Merge pull request #92 from dnd-side-project/feat/#73

feat: 사전 용어 목록 조회 구현

src/api/words/index.ts

@@ -0,0 +1,13 @@
+import { get } from '@/lib/axios'
+import { SuccessResponse } from '@/types/response'
+import { FilterType, SimpleWordType } from '@/types/word'
+
+export async function getAllWords(
+  category: FilterType,
+  sortBy: string | undefined,
+) {
+  const res = await get<SuccessResponse<SimpleWordType[]>>(
+    `/words?category=${category}&sortBy=${sortBy}`,
+  )
+  return res.words
+}

src/app/dictionary/page.tsx

@@ -1,26 +1,45 @@
 'use client'
+import SortButton from '@/components/common/SortButton'
 import TabFilter from '@/components/domain/dictionary/TabFilter'
 import WordsList from '@/components/domain/dictionary/WordsList'
+import FilterBottomSheet from '@/components/shared/FilterBottomSheet'
 import SearchHeader from '@/components/shared/SearchHeader'
 import TopButton from '@/components/shared/TopButton'
-import { FilterType } from '@/types/word'
+import { sortValue, useGetAllWords } from '@/hooks/word/useGetAllWords'
+import useUIStore from '@/store/useUIStore'
+import { FilterType, SimpleWordType, WordSortType } from '@/types/word'
 import { useSearchParams } from 'next/navigation'
 
 export default function DictionaryPage() {
   const searchParams = useSearchParams()
-  const totalCnt = 100
   const filters: FilterType[] = ['전체', '개발', '디자인', '비즈니스']
-  const category: any = searchParams.get('category') ?? '전체'
+  const { bottomSheetType, openBottomSheet } = useUIStore()
+
+  const category: string = searchParams.get('category') ?? '전체'
+  const sortBy: string = searchParams.get('sortBy') ?? 'name'
+  const { words } = useGetAllWords(
+    category as FilterType,
+    sortBy as WordSortType,
+  )
 
   return (
     <>
       <div className="relative overflow-y-auto bg-background text-onSurface-300">
         <SearchHeader disabled={true} />
         <div className="flex flex-col px-4 gap-5 mt-[90px]">
-          <p className="text-h2">
-            등록된 용어
-            <span className="text-primary-400 ml-2">{totalCnt}</span>
-          </p>
+          <div className="flex justify-between">
+            <p className="text-h2">
+              등록된 용어
+              <span className="text-primary-400 ml-2">
+                {words && words.length}
+              </span>
+            </p>
+            <SortButton
+              sortBy={sortValue[sortBy] ?? '사전순'}
+              onClick={() => openBottomSheet('filter')}
+            />
+          </div>
+
           <div className="flex gap-2">
             {filters.map((filter: FilterType, idx: number) => (
               <TabFilter
@@ -31,9 +50,14 @@ export default function DictionaryPage() {
             ))}
           </div>
         </div>
-        <WordsList category={category} />
+        <WordsList words={words as SimpleWordType[]} />
       </div>
       <TopButton />
+      <FilterBottomSheet
+        isOpen={bottomSheetType === 'filter'}
+        selected={sortValue[sortBy] ?? '사전순'}
+        target="words"
+      />
     </>
   )
 }

src/components/common/SortButton/index.tsx

@@ -1,14 +1,16 @@
+'use client'
 import Image from 'next/image'
+import { MouseEventHandler } from 'react'
 
 type SortButtonProps = {
-  text: string
-  onClick: () => void
+  sortBy: string
+  onClick: MouseEventHandler<HTMLDivElement>
 }
 
-export default function SortButton({ text, onClick }: SortButtonProps) {
+export default function SortButton({ sortBy, onClick }: SortButtonProps) {
   return (
     <div className="flex items-center cursor-pointer" onClick={onClick}>
-      <p className="text-body3">{text}</p>
+      <p className="text-body3">{sortBy}</p>
       <Image alt="open" src={'/icons/arrow_down.svg'} width={24} height={24} />
     </div>
   )

src/components/domain/dictionary/WordsList/index.tsx

@@ -1,17 +1,17 @@
 import WordListItem from '@/components/shared/WordListItem'
-import { words } from '@/components/shared/WordListItem/data'
-import { FilterType, SimpleWordType } from '@/types/word'
+import { SimpleWordType } from '@/types/word'
 
 type WordsListProps = {
-  category: FilterType
+  words: SimpleWordType[]
 }
 
-export default function WordsList({ category }: WordsListProps) {
+export default function WordsList({ words }: WordsListProps) {
   return (
     <>
-      {words.map((word: SimpleWordType, idx: number) => (
-        <WordListItem key={word.id} word={word} />
-      ))}
+      {words &&
+        words.map((word: SimpleWordType, idx: number) => (
+          <WordListItem key={word.id} word={word} />
+        ))}
     </>
   )
 }

src/components/shared/FilterBottomSheet/index.tsx

@@ -1,31 +1,35 @@
+'use client'
 import BottomSheet from '@/components/common/BottomSheet'
 import { FILTER_MENUS } from '@/constants/bottomSheet'
 import Image from 'next/image'
 import { cn } from '@/lib/core'
 import useUIStore from '@/store/useUIStore'
+import useCreateQueryString from '@/hooks/useCreateQueryString'
+import { WordSortType } from '@/types/word'
+import { sortValue } from '@/hooks/word/useGetAllWords'
 
 export type BottomSheetProps = {
   isOpen: boolean
   target: 'words' | 'comments'
   selected: string
-  setSelected: (menu: string) => void
 }
 
 export default function FilterBottomSheet({
   isOpen,
   target,
   selected,
-  setSelected,
 }: BottomSheetProps) {
   const { closeBottomSheet } = useUIStore()
+  const { replacePathname } = useCreateQueryString()
   const menuItems = FILTER_MENUS[target]
 
   if (!isOpen) return null
 
-  const handleClick = (menu: string) => {
-    setSelected(menu)
+  const handleClick = (menu: WordSortType) => {
+    replacePathname('sortBy', sortValue[menu] ?? 'name')
     closeBottomSheet()
   }
+
   return (
     <BottomSheet>
       {menuItems.map((menu, idx) => (
@@ -34,7 +38,7 @@ export default function FilterBottomSheet({
           className={cn('flex justify-between py-6 list-none cursor-pointer', {
             'text-primary-400': selected === menu,
           })}
-          onClick={() => handleClick(menu)}
+          onClick={() => handleClick(menu as WordSortType)}
         >
           <p className="text-sub1">{menu}</p>
           {selected === menu && (

src/components/shared/TopButton/index.tsx

@@ -1,3 +1,4 @@
+'use client'
 import Image from 'next/image'
 import React from 'react'