[FEAT] 로그인박스 추가

src/components/common/LoginBox/LoginBox.module.css

@@ -0,0 +1,29 @@
+.loginBox {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 8px 8px 12px;
+    gap: 8px;
+    position: relative;
+    width: 727px;
+    height: 570px;
+    background: #FFFFFF;
+    border: 1px solid #EFEFF0;
+    border-radius: 12px;
+}
+
+.logo {
+    margin-bottom: 0px;
+    width: 256px;
+    height: 256px;
+}
+
+.button {
+    margin: 10px 0;
+    cursor: pointer;
+    width: 600px;
+    height: 90px;
+    border-radius: 12px;
+}

src/components/common/LoginBox/LoginBox.story.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LoginBox } from './LoginBox';
+
+const meta = {
+    title: 'Components/LoginBox',
+    component: LoginBox,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+    args: {},
+} satisfies Meta<typeof LoginBox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/components/common/LoginBox/LoginBox.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, screen } from '@/utils/test-utils';
+import { LoginBox } from './LoginBox';
+import '@testing-library/jest-dom';
+
+describe('LoginBox component', () => {
+    it('renders correctly', () => {
+        render(<LoginBox />);
+        expect(screen.getByAltText('Logo')).toBeInTheDocument();
+        expect(screen.getByAltText('카카오 로그인')).toBeInTheDocument();
+        expect(screen.getByAltText('네이버 로그인')).toBeInTheDocument();
+    });
+});

src/components/common/LoginBox/LoginBox.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import classes from './LoginBox.module.css';
+
+export function LoginBox() {
+    return (
+        <div className={classes.loginBox}>
+            <img src="/images/S-TopLogo.png" alt="Logo" className={classes.logo} />
+            <img src="/images/kakaoLoginButton.png" alt="카카오 로그인" className={classes.button} />
+            <img src="/images/naverLoginButton.png" alt="네이버 로그인" className={classes.button} />
+        </div>
+    );
+}