버그 수정, 기능개선 및 추가, 테스트 인프라 구축

.eslintignore

@@ -0,0 +1,6 @@
+coverage/
+node_modules/
+dist/
+build/
+playwright-report/
+.vite/

README.md

@@ -169,3 +169,41 @@ npm run test:run
 
 1. [vite 공식 가이드 문서(한글)](https://vitejs-kr.github.io/guide/)
 2. [개발환경 초기 설정](./Docs/development-env-setting.md)
+
+## 테스트 전략
+
+이 프로젝트는 **Vitest**, **React Testing Library**, **Playwright**를 활용한 포괄적인 테스트 환경을 구축하고 있습니다.
+
+### 테스트 프레임워크
+
+- **단위 테스트**: Vitest + React Testing Library
+- **E2E 테스트**: Playwright  
+- **커버리지**: @vitest/coverage-v8
+- **테스트 환경**: jsdom (단위), Chromium (E2E)
+
+### 테스트 실행 명령어
+
+```bash
+# 단위 테스트
+npm test              # 변경 감시 모드
+npm run test:run      # 일회성 실행
+npm run test:coverage # 커버리지 리포트 생성
+npm run test:ui       # 브라우저 UI로 테스트 실행
+
+# E2E 테스트  
+npm run test:e2e         # Playwright E2E 테스트
+npm run test:e2e:ui      # Playwright UI 모드
+npm run test:e2e:headed  # 브라우저를 화면에 표시하며 실행
+
+# 전체 테스트
+npm run test:all      # 단위 + E2E 테스트 모두 실행
+```
+
+### 커버리지 목표
+
+| 구분 | 목표 |
+|------|------|
+| Statements | ≥ 80% |
+| Branches | ≥ 75% |
+| Functions | ≥ 80% |
+| Lines | ≥ 80% |

TEST_PLAN.md

@@ -0,0 +1,83 @@
+# 테스트 계획서 (TEST_PLAN)
+
+## 프로젝트 개요
+- **프로젝트명**: eGovFrame React 템플릿
+- **테스트 대상**: React 기반 전자정부 프레임워크 템플릿
+- **테스트 스택**: **Vitest**, React Testing Library, Playwright(E2E)
+- **런타임/빌드**: Node.js 18+, npm
+
+## 테스트 전략
+### 1) 단위 테스트 (Unit)
+- **도구**: **Vitest**, React Testing Library
+- **대상**: 컴포넌트/훅/유틸
+- **커버리지 목표**: Statements/Lines/Functions **≥ 80%**, Branches **≥ 75%**
+
+### 2) 통합 테스트 (Integration)
+- 컴포넌트 간 상호작용, 라우팅, 상태 관리, API 경계부
+
+### 3) E2E (End-to-End)
+- **도구**: Playwright
+- **대상**: 핵심 사용자 시나리오
+- **환경**: 로컬/스테이징
+
+## 테스트 범위 체크리스트
+### 컴포넌트
+- [ ] Header
+- [ ] Navigation
+- [ ] Footer
+- [ ] Main 페이지
+- [ ] 공통 UI
+
+### 기능
+- [ ] 라우팅
+- [ ] 상태 관리
+- [ ] API 호출
+- [ ] 폼 검증
+- [ ] 에러 핸들링
+
+### 접근성
+- [ ] ARIA 레이블
+- [ ] 키보드 내비게이션
+- [ ] 스크린 리더 호환
+
+## 실행 방법
+### 단위/통합
+```bash
+npm test                 # Vitest 실행
+npm run test:watch       # 변경 감시
+npm run test:coverage    # 커버리지 포함 실행
+```
+
+### E2E (Playwright)
+```bash
+npm run test:e2e
+npm run test:e2e:ui
+```
+
+### 품질/빌드
+```bash
+npm run build
+npm run lint
+```
+
+## 테스트 결과
+### 현재 상태 (2024-08-27)
+- **총 테스트 수**: 22개
+- **통과율**: 100% (22/22)
+- **E2E 설정**: 완료
+
+### 커버리지 목표
+| 구분 | 목표 |
+|------|------|
+| Statements | ≥ 80% |
+| Branches | ≥ 75% |
+| Functions | ≥ 80% |
+| Lines | ≥ 80% |
+
+## 빌드 성공
+
+## 참고
+- Vitest: https://vitest.dev/
+- React Testing Library: https://testing-library.com/docs/react-testing-library/intro/
+- Playwright: https://playwright.dev/
+- 전자정부 프레임워크: https://www.egovframe.go.kr/

e2e/main-page.spec.js

@@ -0,0 +1,91 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('EgovFrame 메인 페이지', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('메인 페이지가 올바르게 로드됨', async ({ page }) => {
+    // 페이지 제목 확인
+    await expect(page).toHaveTitle(/표준프레임워크 심플홈페이지/);
+
+    // 메인 로고 확인
+    await expect(page.locator('img[alt*="logo"]')).toBeVisible();
+
+    // 주요 네비게이션 메뉴 확인
+    await expect(page.getByText('사이트소개')).toBeVisible();
+    await expect(page.getByText('정보마당')).toBeVisible();
+    await expect(page.getByText('고객지원')).toBeVisible();
+    await expect(page.getByText('알림마당')).toBeVisible();
+  });
+
+  test('모바일 메뉴 토글 동작', async ({ page }) => {
+    // 모바일 뷰포트로 변경
+    await page.setViewportSize({ width: 375, height: 667 });
+
+    // 모바일 메뉴 버튼 확인 및 클릭
+    const menuButton = page.locator('.allmenu_btn');
+    await expect(menuButton).toBeVisible();
+    await menuButton.click();
+
+    // 모바일 메뉴가 열렸는지 확인
+    await expect(page.locator('.all_menu.show')).toBeVisible();
+  });
+
+  test('네비게이션 메뉴 링크 동작', async ({ page }) => {
+    // 사이트소개 메뉴 클릭
+    await page.getByText('사이트소개').click();
+
+    // URL 변경 확인
+    await expect(page).toHaveURL(/\/about/);
+  });
+
+  test('공지사항 섹션 표시', async ({ page }) => {
+    // 공지사항 제목이 있는지 확인
+    await expect(page.locator('text=공지사항')).toBeVisible();
+
+    // 더보기 링크 확인
+    const moreLink = page.locator('a[href*="/notice"]');
+    await expect(moreLink).toBeVisible();
+  });
+
+  test('갤러리 섹션 표시', async ({ page }) => {
+    // 갤러리 제목이 있는지 확인  
+    await expect(page.locator('text=갤러리')).toBeVisible();
+
+    // 갤러리 이미지들이 로드되는지 확인
+    const galleryImages = page.locator('.gallery img');
+    await expect(galleryImages.first()).toBeVisible();
+  });
+
+  test('로그인 페이지 이동', async ({ page }) => {
+    // 로그인 링크 클릭
+    await page.getByText('로그인').click();
+
+    // 로그인 페이지로 이동 확인
+    await expect(page).toHaveURL(/\/login/);
+
+    // 로그인 폼 확인
+    await expect(page.locator('input[type="text"]')).toBeVisible();
+    await expect(page.locator('input[type="password"]')).toBeVisible();
+  });
+
+  test('페이지 접근성 기본 요소 확인', async ({ page }) => {
+    // 메인 헤딩 확인
+    await expect(page.locator('h1, h2').first()).toBeVisible();
+
+    // Skip to content 링크 확인 (있다면)
+    const skipLink = page.locator('text=본문 바로가기');
+    if (await skipLink.count() > 0) {
+      await expect(skipLink).toBeVisible();
+    }
+
+    // Alt 텍스트가 있는 이미지들 확인
+    const images = page.locator('img');
+    const imageCount = await images.count();
+    if (imageCount > 0) {
+      // 최소한 첫 번째 이미지에는 alt 속성이 있어야 함
+      await expect(images.first()).toHaveAttribute('alt');
+    }
+  });
+});

e2e/pagination.spec.js

@@ -0,0 +1,142 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('페이징 기능 테스트', () => {
+  test('공지사항 페이징 동작', async ({ page }) => {
+    // 공지사항 목록 페이지로 이동
+    await page.goto('/inform/notice');
+
+    // 페이지 로드 대기
+    await page.waitForLoadState('networkidle');
+
+    // 페이징 컴포넌트가 표시되는지 확인
+    const pagination = page.locator('.pagination');
+
+    if (await pagination.count() > 0) {
+      await expect(pagination).toBeVisible();
+
+      // 페이지 번호가 있는지 확인
+      const pageNumbers = page.locator('.pagination li a');
+      if (await pageNumbers.count() > 0) {
+        await expect(pageNumbers.first()).toBeVisible();
+
+        // 다음 페이지가 있다면 클릭 테스트
+        const nextPage = page.locator('.pagination li:not(.disabled) a:has-text("다음")');
+        if (await nextPage.count() > 0) {
+          const currentUrl = page.url();
+          await nextPage.click();
+
+          // 페이지가 변경되었는지 확인
+          await page.waitForLoadState('networkidle');
+          const newUrl = page.url();
+          expect(newUrl).not.toBe(currentUrl);
+        }
+      }
+    }
+  });
+
+  test('갤러리 페이징 동작', async ({ page }) => {
+    // 갤러리 페이지로 이동
+    await page.goto('/inform/gallery');
+
+    // 페이지 로드 대기
+    await page.waitForLoadState('networkidle');
+
+    // 페이징 컴포넌트 확인
+    const pagination = page.locator('.pagination');
+
+    if (await pagination.count() > 0) {
+      await expect(pagination).toBeVisible();
+
+      // 현재 페이지 번호 확인
+      const currentPage = page.locator('.pagination li.cur');
+      if (await currentPage.count() > 0) {
+        await expect(currentPage).toBeVisible();
+        await expect(currentPage).toHaveClass(/cur/);
+      }
+
+      // 페이지당 아이템 수 확인
+      const items = page.locator('.board_list tr, .gallery_item');
+      const itemCount = await items.count();
+      expect(itemCount).toBeGreaterThanOrEqual(0);
+    }
+  });
+
+  test('페이징 이전/다음 버튼 기능', async ({ page }) => {
+    // 데이터가 많은 페이지로 이동 (공지사항)
+    await page.goto('/inform/notice');
+    await page.waitForLoadState('networkidle');
+
+    const pagination = page.locator('.pagination');
+
+    if (await pagination.count() > 0) {
+      // 첫 페이지에서 이전 버튼이 비활성화인지 확인
+      const prevButton = page.locator('.pagination li:has-text("이전")');
+      if (await prevButton.count() > 0) {
+        // 첫 페이지라면 이전 버튼이 disabled여야 함
+        const isFirstPage = await page.locator('.pagination li.cur:has-text("1")').count() > 0;
+        if (isFirstPage) {
+          await expect(prevButton).toHaveClass(/disabled/);
+        }
+      }
+
+      // 다음 페이지로 이동 가능한지 확인
+      const nextButton = page.locator('.pagination li:not(.disabled):has-text("다음")');
+      if (await nextButton.count() > 0) {
+        await nextButton.click();
+        await page.waitForLoadState('networkidle');
+
+        // 페이지 번호가 변경되었는지 확인
+        const currentPageNum = await page.locator('.pagination li.cur').textContent();
+        expect(parseInt(currentPageNum || '1')).toBeGreaterThan(1);
+      }
+    }
+  });
+
+  test('직접 페이지 번호 클릭', async ({ page }) => {
+    await page.goto('/inform/notice');
+    await page.waitForLoadState('networkidle');
+
+    const pagination = page.locator('.pagination');
+
+    if (await pagination.count() > 0) {
+      // 페이지 번호 링크들 확인
+      const pageLinks = page.locator('.pagination li a[href*="page"]');
+      const linkCount = await pageLinks.count();
+
+      if (linkCount > 1) {
+        // 두 번째 페이지 링크 클릭
+        const secondPage = pageLinks.nth(1);
+        const pageText = await secondPage.textContent();
+
+        await secondPage.click();
+        await page.waitForLoadState('networkidle');
+
+        // 현재 활성 페이지가 클릭한 페이지인지 확인
+        const activePage = page.locator('.pagination li.cur');
+        const activePageText = await activePage.textContent();
+        expect(activePageText?.trim()).toBe(pageText?.trim());
+      }
+    }
+  });
+
+  test('페이징 정보 표시 확인', async ({ page }) => {
+    await page.goto('/inform/notice');
+    await page.waitForLoadState('networkidle');
+
+    // 총 건수 정보가 표시되는지 확인
+    const totalInfo = page.locator('text=/총.*건/');
+    if (await totalInfo.count() > 0) {
+      await expect(totalInfo).toBeVisible();
+
+      // 총 건수가 숫자로 표시되는지 확인
+      const infoText = await totalInfo.textContent();
+      expect(infoText).toMatch(/\d+/);
+    }
+
+    // 페이지 정보 (예: 1/10 페이지) 표시 확인
+    const pageInfo = page.getByText(/\d+\s*\/\s*\d+/);
+    if (await pageInfo.count() > 0) {
+      await expect(pageInfo).toBeVisible();
+    }
+  });
+});