퀴즈 데이터 없으면 NotFound 렌더링 (#51)

* feat: 퀴즈 데이터 없으면 NotFound 렌더링

* chore: not-found 폴더 디렉토리 이동

* refactor: NotFound 컴포넌트 분리

* refactor: quiz trying 디렉토리 제거

app/not-found.tsx

@@ -1,22 +1,11 @@
-import Image from 'next/image';
-import Link from 'next/link';
-import TypeTime from '@/assets/images/type-time.png';
 import BackHeader from '@/components/common/headers/back-header';
+import NotFoundComponent from '@/components/common/not-found/not-found';
 
 export default function NotFound() {
   return (
     <>
       <BackHeader />
-      <div className="mt-40 flex max-w-md flex-col items-center gap-4">
-        <Image src={TypeTime} alt="로고" priority width={160} height={160} />
-        <p className="text-lg">페이지를 찾을 수 없습니다.</p>
-        <Link
-          href="/"
-          className="rounded bg-blue-primary px-4 py-2 text-2xl font-bold text-white"
-        >
-          홈으로 이동하기
-        </Link>
-      </div>
+      <NotFoundComponent />
     </>
   );
 }

app/quizzes/[id]/page.tsx

@@ -0,0 +1,69 @@
+import {
+  HydrationBoundary,
+  QueryClient,
+  dehydrate,
+} from '@tanstack/react-query';
+import { dracula } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import MarkDown from '@/components/ui/markdown';
+import Link from 'next/link';
+import ChoiceForm from './_components/choice-form';
+import quizOptions from '@/services/quiz/options';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import { Badge } from '@/components/ui/badge';
+import NotFound from '@/components/common/not-found/not-found';
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const queryClient = new QueryClient();
+  const quizId = Number(params.id) ?? 0;
+
+  const [quiz, hints] = await Promise.all([
+    queryClient.fetchQuery(quizOptions.detail(quizId)),
+    queryClient.fetchQuery(quizOptions.hints(quizId)),
+    queryClient.fetchQuery(quizOptions.choices(quizId)),
+  ]);
+
+  if (quiz) {
+    return (
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <section className="mb-10">
+          <div className="flex items-center justify-between">
+            <h1 className="text-2xl font-bold">
+              {quiz?.id} {quiz?.title}
+            </h1>
+            <p>
+              By{' '}
+              <Link className="underline" href={`/users/${quiz?.users?.id}`}>
+                {/* TODO: 추후 상세 유저 페이지 라우팅 경로로 변경하기 */}
+                {quiz?.users?.name}
+              </Link>
+            </p>
+          </div>
+        </section>
+        <MarkDown style={dracula}>{quiz?.description ?? ''}</MarkDown>
+        <ChoiceForm quizId={quizId}>
+          {hints && hints?.length > 0 ? (
+            <Accordion type="multiple">
+              <AccordionItem value="item-1">
+                <AccordionTrigger>힌트 보기</AccordionTrigger>
+                <AccordionContent className="flex flex-wrap gap-1">
+                  {hints?.map((hint) => (
+                    <Badge key={hint.id} variant="secondary">
+                      {hint.description}
+                    </Badge>
+                  ))}
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          ) : null}
+        </ChoiceForm>
+      </HydrationBoundary>
+    );
+  } else {
+    return <NotFound />;
+  }
+}

components/common/not-found/not-found.tsx

@@ -0,0 +1,20 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import TypeTime from '@/assets/images/type-time.png';
+
+export default function NotFound() {
+  return (
+    <>
+      <div className="mt-40 flex max-w-md flex-col items-center gap-4">
+        <Image src={TypeTime} alt="로고" priority width={160} height={160} />
+        <b className="text-lg">페이지를 찾을 수 없습니다.</b>
+        <Link
+          href="/"
+          className="mt-8 rounded bg-blue-primary px-4 py-2 text-lg font-bold text-white"
+        >
+          홈으로 이동하기
+        </Link>
+      </div>
+    </>
+  );
+}