[Task] WordListPage 컴포넌트 및 라우팅

[DDINGJOO]

상위 Story

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

목표

단어장 메인 페이지 컴포넌트 생성 및 라우팅 설정

화면 구성

┌─────────────────────────────────────────────────────┐
│  ← 뒤로              단어장                [⭐ 북마크만] │
├─────────────────────────────────────────────────────┤
│  🔍 단어 검색 (영어/한국어)                           │
│  필터: [전체▾] [BEGINNER▾] [DAILY▾] [학습상태▾]      │
│                                                      │
│  [단어 목록]                                          │
│  ──────────────── 더 보기 (스크롤) ────────────────   │
└─────────────────────────────────────────────────────┘

라우팅

<Route path="/vocab/words" element={<WordListPage />} />

상태 관리

const [searchQuery, setSearchQuery] = useState('')
const [filters, setFilters] = useState({
  level: null,
  category: null,
  status: null,
  bookmarked: false,
})
const [words, setWords] = useState([])
const [cursor, setCursor] = useState(null)
const [hasMore, setHasMore] = useState(true)

완료 조건

• WordListPage 컴포넌트 구현
• /vocab/words 라우트 등록
• 기본 레이아웃 구현