diff --git a/src/app/(admin)/admin/(contents)/quiz-list/page.tsx b/src/app/(admin)/admin/(contents)/quiz-list/page.tsx index 3eb952c1..c3678195 100644 --- a/src/app/(admin)/admin/(contents)/quiz-list/page.tsx +++ b/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 ( <> - + ); } diff --git a/src/components/pages/AdminQuizListSection/AdminQuizListSection.tsx b/src/components/pages/AdminQuizListSection/AdminQuizListSection.tsx new file mode 100644 index 00000000..bcabc3f3 --- /dev/null +++ b/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(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 ( + <> + + + {data?.map((quiz, index) => ( + + {index + 1 + (pageNumber - 1) * Number(pageSize)} + {quiz.name} + {quiz.email} + {quiz.phone} + {quiz.successCount} + + ))} + + + + ); +} diff --git a/src/constants/DataTableHeaders.ts b/src/constants/DataTableHeaders.ts index 51cb0a1c..c860a210 100644 --- a/src/constants/DataTableHeaders.ts +++ b/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" }, +]; diff --git a/src/hooks/swr/useQuizResults.tsx b/src/hooks/swr/useQuizResults.tsx new file mode 100644 index 00000000..0704a075 --- /dev/null +++ b/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({ + 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; + }, + }; +} diff --git a/src/types/quiz.ts b/src/types/quiz.ts new file mode 100644 index 00000000..3478dc0e --- /dev/null +++ b/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 {}