design: admin 페이지 레이아웃 변경

src/app/admin/layout.tsx

@@ -2,7 +2,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 
 const MENUS = [
-  { name: '용어 목록', path: '/admin/words' },
+  { name: '용어 목록', path: '/admin' },
   { name: '용어 등록', path: '/admin/words/add' },
   { name: '신고 댓글', path: '/admin/reports' },
 ]
@@ -13,8 +13,8 @@ export default function AdminLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="w-full h-full bg-gray-100 text-background">
-      <nav className="flex gap-8 max-lg:gap-2 justify-around py-4 bg-white shadow-sm items-center shrink-0">
+    <div className="w-full bg-gray-100 text-background">
+      <nav className="fixed top-0 w-full flex gap-8 max-lg:gap-2 justify-around py-4 bg-white shadow-sm items-center shrink-0">
         <div className="flex gap-2 items-center max-lg:hidden">
           <Image
             alt="logo.svg"
@@ -38,7 +38,7 @@ export default function AdminLayout({
           서비스 메인으로
         </Link>
       </nav>
-      {children}
+      <div className="h-full py-12"> {children}</div>
     </div>
   )
 }

src/app/admin/page.tsx

@@ -1,5 +1,10 @@
-import Link from 'next/link'
+import AdminWordList from '@/components/domain/admin/WordList'
 
-export default function AdminMagePage() {
-  return <></>
+export default async function WordsListPage() {
+  return (
+    <div className="px-40 mt-8 overflow-y-auto">
+      <p className="text-h2 mb-2">전체 용어</p>
+      <AdminWordList />
+    </div>
+  )
 }

src/components/domain/admin/WordList/index.tsx

@@ -1,13 +1,18 @@
-import { AdminWordType } from '@/types/word'
+'use client'
 import WordListItem from './WordListItem'
+import useGetAllWords from '@/hooks/admin/useGetAllWords'
+import { AdminWordType } from '@/types/word'
+
+export default function AdminWordList() {
+  const { words } = useGetAllWords()
 
-export default function AdminWordList({ words }: { words: AdminWordType[] }) {
   return (
     <>
       <div>
-        {words.map((word, idx) => (
-          <WordListItem key={word.id} word={word} />
-        ))}
+        {words &&
+          words.map((word: AdminWordType, idx) => (
+            <WordListItem key={word.id} word={word} />
+          ))}
       </div>
     </>
   )

src/hooks/admin/useGetAllWords.tsx

@@ -0,0 +1,10 @@
+import { getAllWords } from '@/api/admin/words'
+import { useQuery } from '@tanstack/react-query'
+
+export default function useGetAllWords() {
+  const { data: words } = useQuery({
+    queryKey: ['admin', 'words'],
+    queryFn: getAllWords,
+  })
+  return { words }
+}