[Task] WordDetailModal 컴포넌트 구현

[DDINGJOO]

상위 Story

• [Story] 단어장 기능 구현 #62 [Story] 단어장 기능 구현

목표

단어 상세 정보 모달 컴포넌트 구현

화면 구성

┌─────────────────────────────────────────────────────┐
│  hypothesis                                    [×]  │
├─────────────────────────────────────────────────────┤
│                                                      │
│  🔊 발음 듣기   [남성] [여성]                        │
│                                                      │
│  가설                                                │
│                                                      │
│  📝 예문                                             │
│  "I have a hypothesis about this phenomenon."       │
│                                                      │
│  📊 학습 현황                                        │
│  ┌─────────────────────────────────────────────┐    │
│  │  정답: 2회  |  오답: 5회  |  정확도: 28.6%   │    │
│  │  상태: LEARNING  |  다음 복습: 2024.01.08   │    │
│  └─────────────────────────────────────────────┘    │
│                                                      │
│  [⭐ 북마크]  [💖 즐겨찾기]                           │
│  난이도: [EASY][NORMAL][HARD]                       │
└─────────────────────────────────────────────────────┘

사용 API

• GET /vocab/words/{wordId} - 단어 상세
• GET /vocab/users/{userId}/words - 학습 상태
• POST /vocab/voice/synthesize - TTS
• PUT /vocab/users/{userId}/words/{wordId}/tag - 태그 변경

MUI 컴포넌트

• Dialog, DialogTitle, DialogContent
• Typography
• ToggleButtonGroup (음성, 난이도)
• IconButton (북마크, 즐겨찾기)

완료 조건

• WordDetailModal 컴포넌트 구현
• 단어 상세 정보 표시
• TTS 재생 (남성/여성)
• 학습 현황 표시
• 북마크/난이도 변경 기능