[Story] 단어장 기능 구현

[DDINGJOO]

상위 Epic

• [Epic] 단어 암기 서비스 구현 #57 [Epic] 단어 암기 서비스 구현

목표

전체 단어 목록 조회, 검색, 필터, 북마크 기능 구현 (/vocab/words)

화면 구성

┌─────────────────────────────────────────────────────────────┐
│  ← 뒤로              단어장                    [⭐ 북마크만] │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────────────────────────────────────────────┐   │
│  │ 🔍 단어 검색 (영어/한국어)                           │   │
│  └─────────────────────────────────────────────────────┘   │
│  필터: [전체▾] [BEGINNER▾] [DAILY▾] [학습상태▾]           │
│                                                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ apple                               [🔊] [⭐]       │   │
│  │ 사과                                                 │   │
│  │ 🟢 BEGINNER · DAILY         상태: MASTERED          │   │
│  ├─────────────────────────────────────────────────────┤   │
│  │ hypothesis                          [🔊] [☆]       │   │
│  │ 가설                                                 │   │
│  │ 🔴 ADVANCED · ACADEMIC      상태: LEARNING          │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

필터 옵션

• 레벨: 전체, BEGINNER, INTERMEDIATE, ADVANCED
• 카테고리: 전체, DAILY, BUSINESS, ACADEMIC
• 학습 상태: 전체, NEW, LEARNING, REVIEWING, MASTERED
• 북마크: 전체, 북마크만

사용 API

• GET /vocab/words - 단어 목록 (필터링)
• GET /vocab/words/search - 단어 검색
• GET /vocab/words/{wordId} - 단어 상세
• GET /vocab/users/{userId}/words - 학습 상태
• PUT /vocab/users/{userId}/words/{wordId}/tag - 북마크/난이도
• POST /vocab/voice/synthesize - TTS 발음

하위 태스크

• WordListPage 컴포넌트 생성
• WordListItem 컴포넌트 구현
• 검색 입력 및 디바운스 처리
• 필터 Chip/Select 구현
• WordDetailModal 컴포넌트 구현
• 북마크 토글 기능
• 무한 스크롤 구현
• 라우팅 설정 (/vocab/words)

완료 조건

• 단어 목록 표시 및 무한 스크롤
• 검색 기능 동작
• 필터 적용 가능
• 북마크 토글 동작
• 단어 클릭 시 상세 모달 표시