diff --git a/frontend/api/lectures/fetchQuestions.ts b/frontend/api/lectures/fetchQuestions.ts new file mode 100644 index 00000000..1fad3096 --- /dev/null +++ b/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 + >(ENDPOINTS.LECTURES.GET_CHAT(lectureId)); + return response.data; + } catch (error: unknown) { + if (axios.isAxiosError(error) && error.response) { + return error.response.data as ApiResponse; + } + throw error; + } +} diff --git a/frontend/app/teacher/lecture-detail/[lectureId]/_components/QuestionList/QuestionList.module.scss b/frontend/app/teacher/lecture-detail/[lectureId]/_components/QuestionList/QuestionList.module.scss index 2a78c240..8fe868b5 100644 --- a/frontend/app/teacher/lecture-detail/[lectureId]/_components/QuestionList/QuestionList.module.scss +++ b/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 { diff --git a/frontend/app/teacher/lecture-detail/[lectureId]/_components/QuestionList/QuestionList.tsx b/frontend/app/teacher/lecture-detail/[lectureId]/_components/QuestionList/QuestionList.tsx index 8dc06ff5..4c0bc03d 100644 --- a/frontend/app/teacher/lecture-detail/[lectureId]/_components/QuestionList/QuestionList.tsx +++ b/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); diff --git a/frontend/constants/endpoints.ts b/frontend/constants/endpoints.ts index 2e4f0f91..f07fb77e 100644 --- a/frontend/constants/endpoints.ts +++ b/frontend/constants/endpoints.ts @@ -94,12 +94,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`, }, // 퀴즈 관련 diff --git a/frontend/types/lectures/fetchQuestionsTypes.ts b/frontend/types/lectures/fetchQuestionsTypes.ts new file mode 100644 index 00000000..594fd55c --- /dev/null +++ b/frontend/types/lectures/fetchQuestionsTypes.ts @@ -0,0 +1,7 @@ +export interface FetchQuestionsResult { + studentId: string; + studentName: string; + studentProfile: string | null; + timestamp: string; + content: string; +}