프론트엔드 설치 가이드

1. 디렉터리 이동

cd SCH-WEB-PORTAL/frontend

2. 의존성 설치

npm install
# 또는
pnpm install

설치되는 주요 패키지:

3. 개발 서버 실행

npm run dev

http://localhost:5173에서 개발 서버가 실행됩니다.

4. 빌드

npm run build

dist/ 디렉터리에 정적 파일이 생성됩니다.

API 프록시 설정

개발 중 Vite가 /api/* 요청을 백엔드로 자동 프록시합니다.

// vite.config.ts
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8000',
      changeOrigin: true,
    },
  },
},

디렉터리 구조

frontend/src/
├── App.tsx           # 라우팅 정의 (lazy route)
├── types.ts          # 전체 TypeScript 타입 정의
├── icons.tsx         # 아이콘 컴포넌트
├── data/
│   └── sitemap.ts    # 메뉴 구조 및 구현된 항목 목록
└── components/       # 페이지 컴포넌트 (45+개)

sitemap.ts 구조

메뉴 구조는 frontend/src/data/sitemap.ts에서 관리됩니다.

• SITEMAP — 전체 메뉴 트리 (그룹 → 섹션 → 아이템)
• IMPLEMENTED_ITEMS — 현재 구현된 메뉴 항목 Set (미구현 항목은 UI에서 비활성화)
• ITEM_ROUTES — 아이템 ID → 라우트 경로 매핑
• SECTION_ROUTES — 섹션 ID → 라우트 경로 매핑

새 기능을 추가할 때:

1. SITEMAP에 메뉴 항목 추가
2. IMPLEMENTED_ITEMS에 항목 ID 추가
3. ITEM_ROUTES에 라우트 경로 추가
4. App.tsx에 lazy import 및 <Route> 추가
5. components/에 페이지 컴포넌트 생성

ESLint

npm run lint