KW-ClassLog · sunninz · Nov 12, 2025 · Nov 1, 2025 · Nov 1, 2025 · Nov 1, 2025
diff --git a/frontend/api/quizzes/fetchQuizDetailStat.ts b/frontend/api/quizzes/fetchQuizDetailStat.ts
@@ -0,0 +1,19 @@
+import axios from "axios";
+import { axiosInstance } from "@/api/axiosInstance";
+import { ENDPOINTS } from "@/constants/endpoints";
+import { ApiResponse } from "@/types/apiResponseTypes";
+import { fetchQuizDetailStatResult } from "@/types/quizzes/fetchQuizDetailStatTypes";
+
+export async function fetchQuizDetailStat(lectureId: string) {
+  try {
+    const response = await axiosInstance.get<
+      ApiResponse<fetchQuizDetailStatResult>
+    >(ENDPOINTS.QUIZZES.GET_DETAIL_STAT(lectureId));
+    return response.data;
+  } catch (error: unknown) {
+    if (axios.isAxiosError(error) && error.response) {
+      return error.response.data as ApiResponse<fetchQuizDetailStatResult>;
+    }
+    throw error;
+  }
+}
diff --git a/frontend/api/quizzes/fetchQuizForDashboard.ts b/frontend/api/quizzes/fetchQuizForDashboard.ts
@@ -0,0 +1,19 @@
+import axios from "axios";
+import { axiosInstance } from "@/api/axiosInstance";
+import { ENDPOINTS } from "@/constants/endpoints";
+import { ApiResponse } from "@/types/apiResponseTypes";
+import { fetchQuizForDashboardResult } from "@/types/quizzes/fetchQuizForDashboardTypes";
+
+export async function fetchQuizForDashboard(lectureId: string) {
+  try {
+    const response = await axiosInstance.get<
+      ApiResponse<fetchQuizForDashboardResult>
+    >(ENDPOINTS.QUIZZES.GET_FOR_DASHBOARD(lectureId));
+    return response.data;
+  } catch (error: unknown) {
+    if (axios.isAxiosError(error) && error.response) {
+      return error.response.data as ApiResponse<fetchQuizForDashboardResult>;
+    }
+    throw error;
+  }
+}
diff --git a/frontend/api/quizzes/fetchQuizInfo.ts b/frontend/api/quizzes/fetchQuizInfo.ts
@@ -0,0 +1,19 @@
+import axios from "axios";
+import { axiosInstance } from "@/api/axiosInstance";
+import { ENDPOINTS } from "@/constants/endpoints";
+import { ApiResponse } from "@/types/apiResponseTypes";
+import { fetchQuizInfoResult } from "@/types/quizzes/fetchQuizInfoTypes";
+
+export async function fetchQuizInfo(lectureId: string) {
+  try {
+    const response = await axiosInstance.get<ApiResponse<fetchQuizInfoResult>>(
+      ENDPOINTS.QUIZZES.GET_INFO(lectureId)
+    );
+    return response.data;
+  } catch (error: unknown) {
+    if (axios.isAxiosError(error) && error.response) {
+      return error.response.data as ApiResponse<fetchQuizInfoResult>;
+    }
+    throw error;
+  }
+}
diff --git a/frontend/api/quizzes/fetchSubmitList.ts b/frontend/api/quizzes/fetchSubmitList.ts
@@ -0,0 +1,19 @@
+import axios from "axios";
+import { axiosInstance } from "@/api/axiosInstance";
+import { ENDPOINTS } from "@/constants/endpoints";
+import { ApiResponse } from "@/types/apiResponseTypes";
+import { fetchQuizSubmitListResult } from "@/types/quizzes/fetchSubmitListTypes";
+
+export async function fetchSubmitList(lectureId: string) {
+  try {
+    const response = await axiosInstance.get<
+      ApiResponse<fetchQuizSubmitListResult>
+    >(ENDPOINTS.QUIZZES.GET_SUBMIT_LIST(lectureId));
+    return response.data;
+  } catch (error: unknown) {
+    if (axios.isAxiosError(error) && error.response) {
+      return error.response.data as ApiResponse<fetchQuizSubmitListResult>;
+    }
+    throw error;
+  }
+}
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
@@ -1,4 +1,40 @@
 import "./globals.scss";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "ClassLog",
+  manifest: "./manifest.webmanifest",
+  themeColor: "#ffffff",
+  appleWebApp: {
+    capable: true,
+    title: "ClassLog",
+    statusBarStyle: "default",
+  },
+  icons: {
+    apple: [
+      {
+        url: "/favicon/apple-touch-icon.png",
+        sizes: "180x180",
+        type: "image/png",
+      },
+    ],
+    icon: [
+      {
+        url: "/favicon/favicon-96x96.png",
+        sizes: "96x96",
+        type: "image/png",
+      },
+      {
+        url: "/favicon/favicon.svg",
+        type: "image/svg+xml",
+      },
+      {
+        url: "/favicon/favicon.ico",
+        type: "image/x-icon",
+      },
+    ],
+  },
+};
 
 export default function RootLayout({
   children,
@@ -7,25 +43,6 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ko">
-      <head>
-        <link rel="manifest" href="./manifest.webmanifest" />
-        <title>ClassLog</title>
-        <meta name="theme-color" content="#ffffff" />
-        <meta name="apple-mobile-web-app-title" content="ClassLog" />
-        <link
-          rel="apple-touch-icon"
-          href="/favicon/apple-touch-icon.png"
-          sizes="180x180"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          href="/favicon/favicon-96x96.png"
-          sizes="96x96"
-        />
-        <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
-        <link rel="shortcut icon" href="/favicon/favicon.ico" />
-      </head>
       {children}
     </html>
   );

diff --git a/frontend/app/teacher/layout.tsx b/frontend/app/teacher/layout.tsx
@@ -44,12 +44,16 @@ export default function TeacherLayout({
   const showSidebar = currentRoute?.sidebarType === SiderbarType.DEFAULT;
   const showHeader = currentRoute?.headerType !== TeacherHeaderType.NONE;
 
+  const bodyClassName = [
+    "teacher-body",
+    showSidebar && "show-sidebar",
+    showHeader && "show-header",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
   return (
-    <body
-      className={`teacher-body ${showSidebar ? "show-sidebar" : ""} ${
-        showHeader ? "show-header" : ""
-      }`}
-    >
+    <body className={bodyClassName}>
       {showSidebar && <SideBar />}
       {renderHeader()}
       <div className="content">{children}</div>

diff --git a/.../teacher/quiz-dashboard/[lectureId]/_components/DashboardContainer/DashboardContainer.tsx b/.../teacher/quiz-dashboard/[lectureId]/_components/DashboardContainer/DashboardContainer.tsx
@@ -1,125 +1,52 @@
 "use client";
-import React from "react";
+
+import React, { useEffect, useState } from "react";
 import styles from "./DashboardContainer.module.scss";
 import QuizInfo from "../QuizInfo/QuizInfo";
 import QuizSubmitList from "../QuizSubmitList/QuizSubmitList";
 import QuizList from "../QuizList/QuizList";
 import StatisticsContainer from "../StatisticsContainer/StatisticsContainer";
-
-type Quiz =
-  | {
-      quizId: string;
-      quizOrder: number;
-      type: "multipleChoice";
-      quizBody: string;
-      correctRate: number;
-      solution: string;
-      options: Array<{ optionOrder: number; option: string; count: number }>;
-    }
-  | {
-      quizId: string;
-      quizOrder: number;
-      type: "trueFalse";
-      quizBody: string;
-      correctRate: number;
-      solution: string;
-      options: Array<{ optionOrder: null; option: string; count: number }>;
-    }
-  | {
-      quizId: string;
-      quizOrder: number;
-      type: "shortAnswer";
-      quizBody: string;
-      correctRate: number;
-      solution: string;
-      count: number;
-    };
+import { fetchQuizForDashboardResult } from "@/types/quizzes/fetchQuizForDashboardTypes";
+import { fetchQuizForDashboard } from "@/api/quizzes/fetchQuizForDashboard";
+import { useParams } from "next/navigation";
 
 export default function DashboardContainer() {
-  const statData: {
-    totalQuizCount: number;
-    averageCorrectRate: number;
-    quizList: Quiz[];
-  } = {
-    totalQuizCount: 4,
-    averageCorrectRate: 57.5,
-    quizList: [
-      {
-        quizId: "qz-001",
-        quizOrder: 1,
-        type: "multipleChoice",
-        quizBody: "앙상블 학습의 주요 목적 중 하나로 올바른 설명을 고르세요.",
-        correctRate: 70.0,
-        solution: "여러 모델을 결합해 오류를 줄이기 위해",
-        options: [
-          {
-            optionOrder: 1,
-            option: "여러 모델을 결합해 오류를 줄이기 위해",
-            count: 7,
-          },
-          {
-            optionOrder: 2,
-            option: "하나의 모델 성능을 극단적으로 향상시키기 위해",
-            count: 2,
-          },
-          {
-            optionOrder: 3,
-            option: "모델의 학습 속도를 높이기 위해",
-            count: 0,
-          },
-          {
-            optionOrder: 4,
-            option: "데이터를 줄여 모델을 간소화하기 위해",
-            count: 1,
-          },
-        ],
-      },
-      {
-        quizId: "qz-002",
-        quizOrder: 2,
-        type: "trueFalse",
-        quizBody: "Random Forest는 개별 트리의 가지치기를 수행하지 않는다.",
-        correctRate: 80.0,
-        solution: "O",
-        options: [
-          { optionOrder: null, option: "O", count: 8 },
-          { optionOrder: null, option: "X", count: 2 },
-        ],
-      },
-      {
-        quizId: "qz-003",
-        quizOrder: 3,
-        type: "shortAnswer",
-        quizBody:
-          "앙상블 기법 중 여러 모델이 각자 예측한 결과를 다수결로 결정하는 방법은 무엇인가요?",
-        correctRate: 50.0,
-        solution: "배깅",
-        count: 5,
-      },
-      {
-        quizId: "qz-004",
-        quizOrder: 4,
-        type: "shortAnswer",
-        quizBody:
-          "Random Forest에서 개별 변수의 중요도를 평가할 때 사용하는 데이터 샘플링 기법은 무엇인가요?",
-        correctRate: 30.0,
-        solution: "복원 추출",
-        count: 3,
-      },
-    ],
-  };
+  const [statData, setStatData] = useState<fetchQuizForDashboardResult | null>(
+    null
+  );
+  const { lectureId } = useParams<{ lectureId: string }>();
+
+  useEffect(() => {
+    if (!lectureId) return;
+    fetchQuizForDashboard(lectureId).then((res) => {
+      if (res.isSuccess && res.result) {
+        setStatData(res.result);
+      } else {
+        setStatData(null);
+      }
+    });
+  }, [lectureId]);
+
   return (
     <div className={styles.dashboardContainer}>
       <QuizInfo />
       <div className={styles.dashboardContainerInner}>
         <section className={styles.leftSection}>
           <QuizSubmitList />
           <QuizList
-            quizList={statData.quizList}
-            totalQuizCount={statData.totalQuizCount}
+            quizList={statData?.quizList || []}
+            totalQuizCount={statData?.totalQuizCount || 0}
           />
         </section>
-        <StatisticsContainer statData={statData} />
+        <StatisticsContainer
+          statData={
+            statData || {
+              averageCorrectRate: 0,
+              totalQuizCount: 0,
+              quizList: [],
+            }
+          }
+        />
       </div>
     </div>
   );

diff --git a/frontend/app/teacher/quiz-dashboard/[lectureId]/_components/QuizInfo/QuizInfo.tsx b/frontend/app/teacher/quiz-dashboard/[lectureId]/_components/QuizInfo/QuizInfo.tsx
@@ -1,27 +1,43 @@
 "use client";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./QuizInfo.module.scss";
-
-const data = {
-  title: "Ensemble 1",
-  quizDate: "2025-06-03",
-  quizDay: "화",
-};
+import { fetchQuizInfo } from "@/api/quizzes/fetchQuizInfo";
+import { useParams } from "next/navigation";
+import { fetchQuizInfoResult } from "@/types/quizzes/fetchQuizInfoTypes";
 
 function formatDate(date: string, day: string) {
   const [yyyy, mm, dd] = date.split("-");
   return `${yyyy}.${mm}.${dd} (${day})`;
 }
 
 export default function QuizInfo() {
+  const { lectureId } = useParams<{ lectureId: string }>();
+  const [data, setData] = useState<fetchQuizInfoResult | null>(null);
+
+  useEffect(() => {
+    if (!lectureId) return;
+    fetchQuizInfo(lectureId).then((res) => {
+      if (res.isSuccess && res.result) {
+        setData(res.result);
+      } else {
+        setData(null);
+      }
+    });
+  }, [lectureId]);
+
   return (
     <div className={styles.infoRow}>
-      <div className={styles.title}>
-        [{data.title}] <span className={styles.dashboard}>퀴즈 대시보드</span>
-      </div>
-      <div className={styles.date}>
-        {formatDate(data.quizDate, data.quizDay)}
-      </div>
+      {data && (
+        <>
+          <div className={styles.title}>
+            [{data.title}]
+            <span className={styles.dashboard}>퀴즈 대시보드</span>
+          </div>
+          <div className={styles.date}>
+            {formatDate(data.quizDate, data.quizDay)}
+          </div>
+        </>
+      )}
     </div>
   );
 }