test: 공지사항 e2e 테스트 보완 및 홈 공지 팝업 e2e 테스트 추가(#283)

- 공지 목록의 제목, 날짜 포맷 검증
- 홈 진입시 활성 공지 팝업 표시 확인
- 확인 클릭 후 dismiss 쿠키 설정으로 재진입시 팝업 미표시 확인

Author: H-sooyeon

frontend/e2e/announcement-modal.spec.ts

@@ -0,0 +1,71 @@
+import { test, expect } from '@playwright/test';
+import path from 'path';
+
+// 백엔드 .env.local의 ADMIN_KEY (개발 환경 기본값)
+const ADMIN_KEY = process.env.E2E_ADMIN_KEY ?? 'ittda_admin';
+const ANNOUNCEMENT_TITLE = 'E2E 테스트 공지사항';
+
+// /api/admin/announcements → Next.js 프록시 → 백엔드 /v1/admin/announcements
+async function createAnnouncement(
+  request: import('@playwright/test').APIRequestContext,
+): Promise<string> {
+  const res = await request.post('/api/admin/announcements', {
+    headers: { 'x-admin-key': ADMIN_KEY, 'Content-Type': 'application/json' },
+    data: {
+      title: ANNOUNCEMENT_TITLE,
+      content: 'E2E 테스트 중 생성된 공지입니다.',
+      isActive: true,
+    },
+  });
+  const body = await res.json();
+  if (!body.data?.id) throw new Error(`공지 생성 실패: ${JSON.stringify(body)}`);
+  return body.data.id;
+}
+
+async function deleteAnnouncement(
+  request: import('@playwright/test').APIRequestContext,
+  id: string,
+): Promise<void> {
+  await request.delete(`/api/admin/announcements/${id}`, {
+    headers: { 'x-admin-key': ADMIN_KEY },
+  });
+}
+
+test.describe('홈 공지사항 팝업', () => {
+  let announcementId: string;
+
+  test.use({ storageState: path.join(__dirname, '.auth/guest.json') });
+
+  test.beforeAll(async ({ request }) => {
+    // isActive: true 생성 시 기존 활성 공지가 자동 비활성화됨
+    announcementId = await createAnnouncement(request);
+  });
+
+  test.afterAll(async ({ request }) => {
+    await deleteAnnouncement(request, announcementId);
+  });
+
+  test('활성 공지사항이 있으면 홈 진입 시 팝업 모달이 표시된다', async ({ page }) => {
+    await page.goto('/');
+    await expect(
+      page.getByText(ANNOUNCEMENT_TITLE),
+    ).toBeVisible({ timeout: 8000 });
+    // 확인 버튼도 함께 표시된다
+    await expect(page.getByRole('button', { name: '확인' })).toBeVisible();
+  });
+
+  test('"확인" 버튼을 누르면 모달이 닫히고 다시 홈에 와도 팝업이 뜨지 않는다', async ({ page }) => {
+    // 각 테스트는 test.use({ storageState })로 독립된 컨텍스트를 가지므로
+    // dismiss 쿠키가 없는 초기 상태로 시작됨
+    await page.goto('/');
+    await expect(page.getByText(ANNOUNCEMENT_TITLE)).toBeVisible({ timeout: 8000 });
+
+    // 2) 확인 버튼 클릭 → dismiss 쿠키 설정 + router.refresh()
+    await page.getByRole('button', { name: '확인' }).click();
+    await expect(page.getByText(ANNOUNCEMENT_TITLE)).not.toBeVisible({ timeout: 5000 });
+
+    // 3) 홈 재진입 → 쿠키 기반으로 SSR에서 모달 렌더링 제외
+    await page.goto('/');
+    await expect(page.getByText(ANNOUNCEMENT_TITLE)).not.toBeVisible({ timeout: 5000 });
+  });
+});

frontend/e2e/announcements.spec.ts

@@ -35,4 +35,40 @@ test.describe('공지사항', () => {
     // /profile로 이동하거나 브라우저 히스토리의 이전 페이지로 이동
     await expect(page).toHaveURL(/\/(profile|announcements)/, { timeout: 3000 });
   });
+
+  test('공지사항이 있을 때 각 항목에 제목과 날짜가 표시된다', async ({ page }) => {
+    await page.goto('/announcements');
+
+    // 빈 상태면 건너뜀
+    const isEmpty = await page
+      .getByText('공지사항이 없습니다.')
+      .isVisible({ timeout: 3000 })
+      .catch(() => false);
+    if (isEmpty) {
+      test.skip();
+      return;
+    }
+
+    const firstCard = page.locator('main > div').first();
+    // 제목 — h3 태그
+    await expect(firstCard.locator('h3')).toBeVisible({ timeout: 8000 });
+    await expect(firstCard.locator('h3')).not.toBeEmpty();
+    // 날짜 — formatKoreanDate가 '년' 포함
+    await expect(firstCard.getByText(/\d{4}년/)).toBeVisible();
+  });
+
+  test('진행 중인 공지에는 "진행 중" 배지가 표시된다', async ({ page }) => {
+    await page.goto('/announcements');
+
+    const badge = page.getByText('진행 중');
+    const hasBadge = await badge.isVisible({ timeout: 3000 }).catch(() => false);
+
+    if (!hasBadge) {
+      // 현재 활성 공지가 없는 환경이면 건너뜀
+      test.skip();
+      return;
+    }
+
+    await expect(badge.first()).toBeVisible();
+  });
 });