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 {}