유저 페이지 작업하기 (#20)

* feat: 데이터 타입 수정

* feat: 제출한 퀴즈 데이터 페칭 로직 구현

* feat: 유저 페이지 구현

* chore: husky 명령어 수정

* feat: queryOptions로 변경

.husky/pre-commit

@@ -1,4 +1,11 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npm run lint-staged
+case `uname` in
+  *CYGWIN*|*MINGW*|*MSYS*)
+    npm.cmd run lint-staged
+  ;;
+  *)
+    npm run lint-staged
+  ;;
+esac

app/my/page.tsx

@@ -0,0 +1,52 @@
+import { QuizCard } from '@/components/quiz/quiz-card';
+import quizOptions from '@/services/quiz/options';
+import { createClient } from '@/utils/supabase/server';
+import {
+  HydrationBoundary,
+  QueryClient,
+  dehydrate,
+} from '@tanstack/react-query';
+import { cookies } from 'next/headers';
+
+export default async function Page() {
+  const cookieStore = cookies();
+  const supabase = createClient(cookieStore);
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  const queryClient = new QueryClient();
+
+  const submittedQuiz = await queryClient.fetchQuery(
+    quizOptions.submitted(user?.id ?? '')
+  );
+
+  return (
+    <>
+      <h1 className="text-right text-3xl font-bold">
+        {user?.user_metadata.user_name}
+      </h1>
+      <h2 className="text-xl font-bold">풀었던 퀴즈</h2>
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        {submittedQuiz && submittedQuiz.length ? (
+          <ul className="flex flex-col gap-6">
+            {submittedQuiz.map(
+              ({ quiz_id, success, quizzes }) =>
+                quizzes && (
+                  <QuizCard
+                    key={quiz_id}
+                    status={success ? 'correct' : 'wrong'}
+                    difficulty={quizzes.difficulty}
+                    title={quizzes.title}
+                    summary={quizzes.summary}
+                  />
+                )
+            )}
+          </ul>
+        ) : (
+          <p>제출한 퀴즈가 없습니다.</p>
+        )}
+      </HydrationBoundary>
+    </>
+  );
+}

services/quiz/api.ts

@@ -15,6 +15,19 @@ const quizAPI = {
     return data;
   },
 
+  getSubmittedQuiz: async (userId: string) => {
+    const supabase: SupabaseClient<Database> = createClient();
+
+    const { data } = await supabase
+      .from('quizsubmissions')
+      .select(`*, quizzes (id, *)`)
+      .eq('user_id', userId);
+
+    console.log(data);
+
+    return data;
+  },
+
   getChoicesOfQuiz: async (quizId: number) => {
     const supabase: SupabaseClient<Database> = createClient();
 

services/quiz/hooks.ts

@@ -6,6 +6,10 @@ export function useGetQuiz(quizId: number) {
   return useSuspenseQuery(quizOptions.detail(quizId));
 }
 
+export function useGetSubmittedQuiz(userId: string) {
+  return useSuspenseQuery(quizOptions.submitted(userId));
+}
+
 export function useGetChoicesOfQuiz(quizId: number) {
   return useSuspenseQuery(quizOptions.choices(quizId));
 }

services/quiz/options.ts

@@ -10,6 +10,12 @@ const quizOptions = {
       queryFn: () => quizAPI.getQuiz(quizId),
     }),
 
+  submitted: (userId: string) =>
+    queryOptions({
+      queryKey: [...quizOptions.all, 'submitted', userId],
+      queryFn: () => quizAPI.getSubmittedQuiz(userId),
+    }),
+
   choices: (quizId: number) =>
     queryOptions({
       queryKey: [...quizOptions.detail(quizId).queryKey, 'choices'],