feat: 관리자 퀴즈 결과 목록 페이지 추가 (#109)

src/app/(admin)/admin/(contents)/quiz-list/page.tsx

@@ -1,12 +1,12 @@
 "use client";
-import { DataTableUsage } from "@/components/common/DataTable/DataTableUsage";
 import { PageHeader } from "@/components/common/PageHeader";
+import { AdminQuizListSection } from "@/components/pages/AdminQuizListSection/AdminQuizListSection";
 
 export default function AdminQuizPage() {
   return (
     <>
       <PageHeader title="퀴즈 제출 목록" />
-      <DataTableUsage></DataTableUsage>
+      <AdminQuizListSection />
     </>
   );
 }

src/components/pages/AdminQuizListSection/AdminQuizListSection.tsx

@@ -0,0 +1,52 @@
+import { DataTable } from "@/components/common/DataTable";
+import { DataTableData } from "@/components/common/DataTable/elements/DataTableData";
+import { DataTableRow } from "@/components/common/DataTable/elements/DataTableRow";
+import { QUIZ_TABLE_HEADERS } from "@/constants/DataTableHeaders";
+import { PAGE_SIZES } from "@/constants/PageSize";
+import { useQuizResults } from "@/hooks/swr/useQuizResults";
+import { useTableSort } from "@/hooks/useTableSort";
+import { Stack } from "@mantine/core";
+import { useState } from "react";
+
+export function AdminQuizListSection() {
+  /* 페이지당 행 개수 */
+  const [pageSize, setPageSize] = useState<string | null>(String(PAGE_SIZES[0]));
+  /* 페이지네이션 페이지 넘버*/
+  const [pageNumber, setPageNumber] = useState(1);
+  /* 데이터 정렬 훅 */
+  const { sortBy, order, handleSortButton } = useTableSort();
+
+  /* SWR 훅을 사용하여 공지사항 목록 패칭 */
+  const { data, pageData } = useQuizResults({
+    params: { page: pageNumber - 1, size: Number(pageSize) },
+  });
+
+  return (
+    <>
+      <Stack>
+        <DataTable
+          headers={QUIZ_TABLE_HEADERS}
+          sortBy={sortBy}
+          order={order}
+          handleSortButton={handleSortButton}
+          totalElements={String(pageData?.totalElements)}
+          pageSize={pageSize}
+          setPageSize={setPageSize}
+          totalPages={pageData?.totalPages}
+          pageNumber={pageNumber}
+          setPageNumber={setPageNumber}
+        >
+          {data?.map((quiz, index) => (
+            <DataTableRow key={index}>
+              <DataTableData>{index + 1 + (pageNumber - 1) * Number(pageSize)}</DataTableData>
+              <DataTableData>{quiz.name}</DataTableData>
+              <DataTableData>{quiz.email}</DataTableData>
+              <DataTableData>{quiz.phone}</DataTableData>
+              <DataTableData>{quiz.successCount}</DataTableData>
+            </DataTableRow>
+          ))}
+        </DataTable>
+      </Stack>
+    </>
+  );
+}

src/constants/DataTableHeaders.ts

@@ -60,3 +60,11 @@ export const APPLICATION_TABLE_HEADERS: DataTableHeaderProps[] = [
   { label: "권한", widthPercentage: 7, sort: false, selector: "userType" },
   { label: "가입일시", widthPercentage: 15, sort: true, selector: "createdAt" },
 ];
+
+export const QUIZ_TABLE_HEADERS: DataTableHeaderProps[] = [
+  { label: "순번", widthPercentage: 7, sort: true, selector: "id" },
+  { label: "사용자", widthPercentage: 15, sort: true, selector: "name" },
+  { label: "이메일", widthPercentage: 15, sort: true, selector: "email" },
+  { label: "전화번호", widthPercentage: 15, sort: true, selector: "phone" },
+  { label: "푼 문제 개수", widthPercentage: 15, sort: true, selector: "successCount" },
+];

src/hooks/swr/useQuizResults.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { PagedQuizResultRequestParams, PagedQuizResultResponse } from "@/types/quiz";
+import useSWR from "swr";
+
+export function useQuizResults({ params }: { params: PagedQuizResultRequestParams }) {
+  const result = useSWR<PagedQuizResultResponse>({
+    url: "/quizzes/result",
+    query: params,
+  });
+
+  return {
+    data: result.data?.content,
+    pageData: result.data && {
+      pageSize: result.data.size,
+      pageNumber: result.data.number,
+      totalElements: result.data.totalElements,
+      totalPages: result.data.totalPages,
+    },
+    get isLoading() {
+      return result.isLoading;
+    },
+    get error() {
+      return result.error;
+    },
+    get mutate() {
+      return result.mutate;
+    },
+  };
+}

src/types/quiz.ts

@@ -0,0 +1,17 @@
+import { PagedApiResponse } from "./common";
+
+export interface QuizResult {
+  id: number;
+  name: string;
+  email: string;
+  phone: string;
+  successCount: number;
+}
+
+export interface PagedQuizResultRequestParams {
+  year?: number;
+  page: number;
+  size: number;
+}
+
+export interface PagedQuizResultResponse extends PagedApiResponse<QuizResult> {}