유저 페이지 스타일 작업 (#52)

* refactor: 프로필 링크 user/id로 통일

* feat: 레이아웃 추가

* feat: 퀴즈 테이블 컴포넌트 적용

* feat: 유저 페이지 테이블 필터링

* feat: users 테이블 get 로직 구현

* refactor: 유저 정보 컴포넌트 구현

* refactor: my 폴더 삭제

* refactor: return 타입 변경

* feat: 서버 컴포넌트로 변경

* feat: not found 페이지 추가

* refactor: userInfo로 prop 이름 변경

* feat: user 페이지로 링크 처리

app/quizzes/[id]/page.tsx

@@ -37,8 +37,7 @@ export default async function Page({ params }: { params: { id: string } }) {
             </h1>
             <p>
               By{' '}
-              <Link className="underline" href={`/users/${quiz?.users?.id}`}>
-                {/* TODO: 추후 상세 유저 페이지 라우팅 경로로 변경하기 */}
+              <Link className="underline" href={`/user/${quiz?.users?.id}`}>
                 {quiz?.users?.name}
               </Link>
             </p>

app/user/[id]/_components/quiz-table.tsx

@@ -0,0 +1,15 @@
+import { columns } from '@/components/quiz/table/columns';
+import DataTable from '@/components/quiz/table/data-table';
+import { QuizTable } from '../../../../libs/models';
+
+type QuizTableProps = {
+  quiz: QuizTable[];
+};
+
+export default function QuizTable({ quiz }: QuizTableProps) {
+  return (
+    <div>
+      <DataTable columns={columns} data={quiz} />
+    </div>
+  );
+}

app/user/[id]/_components/user-info.tsx

@@ -0,0 +1,9 @@
+type UserInfoProps = {
+  userInfo: {
+    name: string;
+  };
+};
+
+export default function UserInfo({ userInfo }: UserInfoProps) {
+  return <h1 className="text-3xl font-bold">{userInfo.name}</h1>;
+}

app/user/[id]/layout.tsx

@@ -0,0 +1,16 @@
+import BackHeader from '@/components/common/headers/back-header';
+import React from 'react';
+
+type LayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function Layout({ children }: LayoutProps) {
+  return (
+    <>
+      <BackHeader />
+
+      <section className="p-4">{children}</section>
+    </>
+  );
+}

app/user/[id]/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} />
+        <p className="text-lg">페이지를 찾을 수 없습니다.</p>
+        <Link
+          href="/"
+          className="mt-8 rounded bg-blue-primary px-4 py-2 text-lg font-bold text-white"
+        >
+          홈으로 이동하기
+        </Link>
+      </div>
+    </>
+  );
+}

app/user/[id]/page.tsx

@@ -0,0 +1,36 @@
+import {
+  HydrationBoundary,
+  QueryClient,
+  dehydrate,
+} from '@tanstack/react-query';
+import quizOptions from '@/services/quiz/options';
+import userOptions from '@/services/user/options';
+import { Separator } from '@/components/ui/separator';
+import UserInfo from './_components/user-info';
+import QuizTable from './_components/quiz-table';
+import NotFound from './not-found';
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const { id } = params;
+
+  const queryClient = new QueryClient();
+
+  const [userInfo, submittedQuiz] = await Promise.all([
+    queryClient.fetchQuery(userOptions.info(id)),
+    queryClient.fetchQuery(quizOptions.submitted(id)),
+  ]);
+
+  if (userInfo) {
+    return (
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        {userInfo && <UserInfo userInfo={userInfo} />}
+        <Separator className="my-4" />
+
+        <h2 className="text-xl font-bold">제출한 퀴즈</h2>
+        <QuizTable quiz={submittedQuiz} />
+      </HydrationBoundary>
+    );
+  }
+
+  return <NotFound />;
+}

components/common/headers/menu.tsx

@@ -48,7 +48,7 @@ export default async function Menu() {
           <Separator className="my-4" />
 
           <Link
-            href={user ? '/my' : '/auth'}
+            href={user ? `/user/${user.id}` : '/auth'}
             scroll={false}
             className="flex gap-4"
           >

components/common/headers/profile.tsx

@@ -13,7 +13,7 @@ export default async function Profile() {
   } = await supabase.auth.getUser();
 
   return (
-    <Link href={user ? '/my' : '/auth'} scroll={false}>
+    <Link href={user ? `/user/${user.id}` : '/auth'} scroll={false}>
       <div className="flex items-center">
         <Image
           src={UserProfile}

services/quiz/api.ts

@@ -1,4 +1,4 @@
-import { QuizTableSchema } from '@/libs/models';
+import { QuizTable, QuizTableSchema } from '@/libs/models';
 import { createClient } from '@/utils/supabase/client';
 import { SupabaseClient } from '@supabase/supabase-js';
 import { type Inputs as QuizInputs } from '@/app/quizzes/writer/_components/writer-form-schema';
@@ -50,10 +50,10 @@ const quizAPI = {
 
     const { data } = await supabase
       .from('quizsubmissions')
-      .select(`*, quizzes (id, *)`)
+      .select(`success, ...quizzes!quizsubmissions_quiz_id_fkey(*)`)
       .eq('user_id', userId);
 
-    return data;
+    return data as unknown as QuizTable[];
   },
 
   getChoicesOfQuiz: async (quizId: number) => {

services/user/api.ts

@@ -0,0 +1,19 @@
+import { createClient } from '@/utils/supabase/client';
+import { SupabaseClient } from '@supabase/supabase-js';
+
+const userAPI = {
+  getUserInfo: async (id: string) => {
+    const supabase: SupabaseClient<Database> = createClient();
+
+    const { data } = await supabase
+      .from('users')
+      .select('name')
+      .eq('id', id)
+      .limit(1)
+      .single();
+
+    return data;
+  },
+};
+
+export default userAPI;

services/user/hook.ts

@@ -0,0 +1,6 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import userOptions from './options';
+
+export function useGetUserInfo(id: string) {
+  return useSuspenseQuery(userOptions.info(id));
+}

services/user/options.ts

@@ -0,0 +1,14 @@
+import { queryOptions } from '@tanstack/react-query';
+import userAPI from './api';
+
+const userOptions = {
+  default: ['users'] as const,
+
+  info: (id: string) =>
+    queryOptions({
+      queryKey: [...userOptions.default, 'info', id],
+      queryFn: () => userAPI.getUserInfo(id),
+    }),
+};
+
+export default userOptions;