Merge pull request team-wedding#169 from team-wedding/develop

Develop

Author: eesoyeon

.gitignore

@@ -27,3 +27,10 @@ dist-ssr
 
 # Sentry Config File
 .env.sentry-build-plugin
+
+*storybook.log
+storybook-static
+
+#Playwright test Results
+test-results 
+test-value

.storybook/main.ts

@@ -0,0 +1,13 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@chromatic-com/storybook',
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
+    '@storybook/addon-postcss',
+  ],
+  framework: { name: '@storybook/react-vite', options: {} },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,22 @@
+import type { Preview } from '@storybook/react-vite';
+import '../src/styles/global.css';
+
+const preview: Preview = {
+  parameters: {
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#ffffff' },
+        { name: 'dark', value: '#333333' },
+      ],
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

e2e/createInvitation.spec.ts

@@ -0,0 +1,58 @@
+// e2e/createInvitation.spec.ts
+import { test, expect } from '@playwright/test';
+
+test.describe('CreateInvitationPage', () => {
+  test.beforeEach(async ({ page }) => {
+    // 로그인 후 초대장 생성 페이지로 이동
+    await page.goto('/login');
+    //하드 코딩 되어있는 테스트용 계정 로그인 정보
+    await page.fill('input[name="email"]', 'testuser@example.com');
+    await page.fill('input[name="password"]', ' TestPassword123!');
+    await page.click('button[type="submit"]');
+    //하드 코딩 되어있는 invitationID
+    await page.goto('/create/129');
+  });
+
+  test('초기 렌더링 및 필수 입력값 검증', async ({ page }) => {
+    await expect(page.getByLabel('이름')).toBeVisible();
+    await expect(page.getByLabel('날짜')).toBeVisible();
+    // await expect(page.getByText('이름을 입력하세요')).toBeVisible();
+    // await expect(page.getByText('날짜를 입력하세요')).toBeVisible();
+  });
+
+  // test('이미지 업로드', async ({ page }) => {
+  //   const filePath = 'src/assets/image/wedding1.png';
+  //   await page.setInputFiles('input[type="file"]', filePath);
+  //   await expect(page.locator('.image-preview')).toBeVisible();
+  // });
+
+  // test('음악/테마 선택', async ({ page }) => {
+  //   await page.selectOption('select[name="music"]', 'aBeautifulPlan');
+  //   await page.selectOption('select[name="theme"]', 'classic');
+  //   await expect(page.getByText('aBeautifulPlan')).toBeVisible();
+  //   await expect(page.getByText('classic')).toBeVisible();
+  // });
+
+  test('초대장 미리보기', async ({ page }) => {
+    await page.fill('input[name="name"]', '테스트 초대장');
+    await page.fill('input[name="date"]', '2024-12-31');
+    await page.click('button.preview');
+    await expect(page.getByText('테스트 초대장')).toBeVisible();
+    await expect(page.getByText('2024-12-31')).toBeVisible();
+  });
+
+  // test('초대장 생성 성공', async ({ page }) => {
+  //   await page.fill('input[name="name"]', '테스트 초대장');
+  //   await page.fill('input[name="date"]', '2024-12-31');
+  //   await page.fill('input[name="location"]', '서울');
+  //   await page.click('button[type="submit"]');
+  //   await expect(page).toHaveURL('/dashboard');
+  //   await expect(page.getByText('초대장이 생성되었습니다')).toBeVisible();
+  // });
+
+  // test('취소/초기화 동작', async ({ page }) => {
+  //   await page.fill('input[name="name"]', '임시 입력');
+  //   await page.click('button.cancel');
+  //   await expect(page.getByLabel('이름')).toHaveValue('');
+  // });
+});

e2e/dashboard.spec.ts

@@ -0,0 +1,54 @@
+// e2e/dashboard.spec.ts
+import { test, expect } from '@playwright/test';
+
+test.describe('DashBoardPage', () => {
+  test.beforeEach(async ({ page }) => {
+    // 로그인 후 대시보드로 이동 (로그인 경로/방식에 따라 수정)
+    await page.goto('/login');
+    //하드 코딩 되어있는 테스트용 계정 로그인 정보
+    await page.fill('input[name="email"]', 'testuser@example.com');
+    await page.fill('input[name="password"]', 'TestPassword123!');
+    await page.click('button[type="submit"]');
+    await page.waitForURL('/dashboard');
+  });
+
+  test('초기 렌더링 및 주요 섹션 확인', async ({ page }) => {
+    await expect(page.getByText('아직 저장된 청첩장이 없어요')).toBeVisible();
+    await expect(page.getByText('청첩장 만들기')).toBeVisible();
+  });
+
+  test('만들기 페이지로 이동', async ({ page }) => {
+    await expect(page.getByText('청첩장 만들기')).toBeVisible();
+    await page.getByText('청첩장 만들기').click();
+    await page.fill('input[name="invitation-title"]', '친구용 청첩장');
+    await page.getByTestId('title-submit').click();
+    await page.waitForURL((url) => url.pathname.startsWith('/create/'));
+  });
+
+  // test('초대장 목록이 보이고, 상세 진입 가능', async ({ page }) => {
+  //   const invitation = page.locator('.invitation-item').first();
+  //   await expect(invitation).toBeVisible();
+  //   await invitation.click();
+  //   await expect(page).toHaveURL(/\/invitation\/\d+/);
+  // });
+
+  // test('초대장 삭제', async ({ page }) => {
+  //   const deleteButton = page.locator('.invitation-item .delete-btn').first();
+  //   await deleteButton.click();
+  //   await expect(page.getByText('정말 삭제하시겠습니까?')).toBeVisible();
+  //   await page.click('button.confirm-delete');
+  //   await expect(deleteButton).not.toBeVisible();
+  // });
+
+  // test('에러/로딩 처리', async ({ page }) => {
+  //   // 네트워크 차단 등으로 에러 상황을 시뮬레이션할 수 있음
+  //   // 예시: await page.route('/api/invitations', route => route.abort());
+  //   // await page.reload();
+  //   // await expect(page.getByText('에러')).toBeVisible();
+  // });
+
+  // test('로그아웃 동작', async ({ page }) => {
+  //   await page.click('button.logout');
+  //   await expect(page).toHaveURL('/login');
+  // });
+});

e2e/signup.spec.ts

@@ -0,0 +1,46 @@
+import { test, expect } from '@playwright/test';
+
+// 회원가입 E2E 테스트
+
+test('회원가입 후 /dashboard 진입', async ({ page }) => {
+  // 1. 메인 페이지 접속
+  await page.goto('http://localhost:5173/');
+
+  // 2. "시작하기" 버튼 클릭
+  await page.getByRole('button', { name: '시작하기' }).click();
+
+  // 3. "회원가입" 링크 클릭
+  await page.getByRole('link', { name: '회원가입' }).click();
+
+  // 4. 회원정보 입력
+  await page.getByRole('textbox', { name: '이름' }).fill('테스트유저');
+  // 이메일은 매번 다르게 생성 (중복 방지)
+  const email = `testuser6@example.com`;
+  await page.getByRole('textbox', { name: '이메일' }).fill(email);
+  await page
+    .getByRole('textbox', { name: '비밀번호', exact: true })
+    .fill('TestPassword123!');
+  await page
+    .getByRole('textbox', { name: '비밀번호 확인' })
+    .fill('TestPassword123!');
+
+  // 5. "회원가입" 버튼 클릭
+  await page.getByRole('button', { name: '회원가입' }).click();
+
+  // 6. /dashboard로 이동하는지 확인 (자동 로그인 또는 리다이렉트)
+  await page.waitForTimeout(1000); // 네트워크/애니메이션 대기
+  await expect(page).toHaveURL(/.*login/);
+
+  // 7. 로그인 페이지에서 이메일과 비밀번호 입력
+  await page.getByRole('textbox', { name: '이메일' }).fill(email);
+  await page
+    .getByRole('textbox', { name: '비밀번호', exact: true })
+    .fill('TestPassword123!');
+
+  // 8. "로그인" 버튼 클릭
+  await page.getByRole('button', { name: '로그인' }).click();
+
+  await page.waitForTimeout(1000); // 네트워크/애니메이션 대기
+  await expect(page).toHaveURL(/.*dashboard/);
+  await page.context().storageState({ path: 'auth.json' });
+});

eslint.config.js

@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from 'eslint-plugin-storybook';
+
 import ts from '@typescript-eslint/eslint-plugin';
 import tsParser from '@typescript-eslint/parser';
 import react from 'eslint-plugin-react';
@@ -32,4 +35,5 @@ export default [
     },
   },
   prettier,
+  ...storybook.configs['flat/recommended'],
 ];

index.html

@@ -17,6 +17,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <div id="modal-root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>