Arch Frontend

Frontend Architecture Skill

Vite + React + Tailwind CSS 프론트엔드 구현 가이드.

반드시 먼저 읽을 문서

1. docs/architecture/01-overview.md — 시스템 개요 및 입출력 구조
2. docs/architecture/05-api-spec.md — API 엔드포인트 (프론트엔드 호출 대상)
3. docs/architecture/06-output-spec.md — 면접 스크립트 뷰 설계

기술 스택

• 빌드: Vite + @seed-design/vite-plugin + @tailwindcss/vite
• UI: React 19 (함수형 컴포넌트 + Hooks) + Seed Design React
• 스타일: Tailwind CSS 4 + Seed Design CSS + Jittda 브랜드 토큰
• 인증: OAuth → JWT (메모리 저장)
• 다국어: react-i18next
• HTTP: fetch 또는 axios + Authorization Bearer header
• 디자인 시스템: jittda-design-system 스킬 참조 (Seed Design + 브랜드 토큰)

Seed Design 컴포넌트 사용법

1. seed-docs MCP → list_react_components / get_react_component 로 조회
2. CLI: npx @seed-design/cli@latest add ui:{name} (packages/ui 에서 실행)
3. packages/ui/src/index.ts에 export 추가
4. 앱에서 import { Component } from '@jittda/ui'

주요 페이지

1. 로그인 페이지

• Google/GitHub OAuth 버튼
• {API_URL}/auth/{provider}/login 으로 리다이렉트
• 콜백 후 #token= 에서 JWT 추출

2. Job 생성 폼

• 파일 업로드: 이력서(PDF), 포트폴리오(DOCX)
• 텍스트 입력: JD, GitHub URLs, LinkedIn URL
• 선택: 경험 레벨, 출력 언어
• POST /api/v1/jobs 호출

3. Job 상태 추적

• GET /api/v1/jobs/{id} 폴링
• Phase별 진행률 표시 (0~4)
• 실시간 상태 업데이트

4. 결과 뷰어 (면접 스크립트)

• 25개 질문 표시 (카테고리별 탭/섹션)
• 접기/펼치기 (Progressive Disclosure)
• 후속질문 분기 (Expert/Mid/Low)
• 키워드 체크리스트
• 용어 설명 툴팁
• 평가 시나리오 (색상 구분)
• on-demand 번역 버튼

파일 배치 (pnpm 워크스페이스)

jittda/frontend/
├── packages/
│   ├── ui/                          — 공유 디자인 시스템 (@jittda/ui)
│   │   ├── src/
│   │   │   ├── seed-design/ui/      — Seed Design CLI 생성 컴포넌트
│   │   │   ├── styles/
│   │   │   │   ├── index.css        — base.css + tokens + 글로벌 스타일
│   │   │   │   └── tokens.css       — Jittda 브랜드 토큰
│   │   │   └── index.ts             — 컴포넌트 export
│   │   └── seed-design.json
│   ├── public-app/                  — 사용자용 앱 (:3000)
│   │   └── src/
│   │       ├── pages/               — LoginPage, CreateJobPage, ResultPage
│   │       ├── components/          — auth/, job/, interview/, common/
│   │       ├── hooks/               — useAuth, useJob
│   │       └── index.css            — @import tailwindcss + @jittda/ui/styles
│   └── admin-app/                   — 관리자 앱 (:3001)
│       └── src/
│           ├── pages/               — Dashboard, JobList, Analytics
│           ├── components/          — charts/, admin/
│           └── index.css            — @import tailwindcss + @jittda/ui/styles
├── package.json                     — 루트 워크스페이스
├── pnpm-workspace.yaml
└── tsconfig.base.json

규칙

• JWT는 메모리만 (localStorage/sessionStorage 금지)
• 컴포넌트명: PascalCase
• Tailwind 유틸리티 클래스 우선 (커스텀 CSS 최소화)
• i18n: 모든 사용자 표시 텍스트는 번역 키 사용
• 반응형: mobile-first