Merge pull request #350 from KW-ClassLog/Feat/#348/lecture-question-list

✨ Feat/#348 강의 상제 페이지 질문 목록 API 연동

Author: mumminn

frontend/api/lectures/fetchQuestions.ts

@@ -0,0 +1,19 @@
+import { axiosInstance } from "@/api/axiosInstance";
+import axios from "axios";
+import { ENDPOINTS } from "@/constants/endpoints";
+import { ApiResponse } from "@/types/apiResponseTypes";
+import { FetchQuestionsResult } from "@/types/lectures/fetchQuestionsTypes";
+
+export async function fetchQuestions(lectureId: string) {
+  try {
+    const response = await axiosInstance.get<
+      ApiResponse<FetchQuestionsResult>
+    >(ENDPOINTS.LECTURES.GET_CHAT(lectureId));
+    return response.data;
+  } catch (error: unknown) {
+    if (axios.isAxiosError(error) && error.response) {
+      return error.response.data as ApiResponse<FetchQuestionsResult>;
+    }
+    throw error;
+  }
+}

frontend/app/teacher/lecture-detail/[lectureId]/_components/QuestionList/QuestionList.module.scss

@@ -32,7 +32,6 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: $spacing-xs;
 }
 
 .userInfo {

frontend/app/teacher/lecture-detail/[lectureId]/_components/QuestionList/QuestionList.tsx

@@ -5,6 +5,8 @@ import { useEffect, useState } from "react";
 import Image from "next/image";
 import { IMAGES } from "@/constants/images";
 import { useLectureDetail } from "../LectureDetailContext";
+import { FetchQuestionsResult } from "@/types/lectures/fetchQuestionsTypes";
+import { fetchQuestions } from "@/api/lectures/fetchQuestions";
 
 export interface Question {
   sender: string;
@@ -19,11 +21,41 @@ export default function QuestionList() {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    // TODO: API 호출로 변경
-    setQuestions([]);
-    setLoading(false);
+    let alive = true;
+
+    const load = async () => {
+      setLoading(true);
+
+      try {
+        const res = await fetchQuestions(lectureId);
+        if (!alive) return;
+
+        const list = (res.result ?? []) as FetchQuestionsResult[];
+
+        const mapped: Question[] = list.map((q) => ({
+          sender: q.studentName,
+          message: q.content,
+          timestamp: q.timestamp,
+          profileUrl: q.studentProfile ?? "",
+        }))
+        .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
+
+        setQuestions(mapped);
+      } catch {
+        if (!alive) return;
+        setQuestions([]);
+      } finally {
+        if (alive) setLoading(false);
+      }
+    };
+
+    load();
+    return () => {
+      alive = false;
+    };
   }, [lectureId]);
 
+
   const formatTimestamp = (timestamp: string) => {
     try {
       const date = new Date(timestamp);

frontend/constants/endpoints.ts

@@ -95,12 +95,12 @@ export const ENDPOINTS = {
       `${BASE_API}/lectures/${lectureId}/recordings`,
     GET_RECORDING: (lectureId: string) =>
       `${BASE_API}/lectures/${lectureId}/recordings`,
-    
+
     // 채팅 관련
     SAVE_CHAT: (lectureId: string) =>
       `${BASE_API}/lectures/chatting/after/${lectureId}`,
     GET_CHAT: (lectureId: string) =>
-      `${BASE_API}/lectures/${lectureId}/chatting`,
+      `${BASE_API}/lectures/${lectureId}/questions`,
   },
 
   // 퀴즈 관련

frontend/types/lectures/fetchQuestionsTypes.ts

@@ -0,0 +1,7 @@
+export interface FetchQuestionsResult {
+    studentId: string;
+    studentName: string;
+    studentProfile: string | null;
+    timestamp: string;
+    content: string;
+}