Merge pull request #335 from KW-ClassLog/Feat/#332/student-chatting-socket

✨ Feat/#332 강의중일 때 학생 채팅 소켓 연결

Author: iinuyha

frontend/api/axiosInstance.ts

@@ -7,7 +7,7 @@ export const axiosInstance = axios.create({
   withCredentials: true,
 });
 
-// 토큰이 필요하지 않은 API들 (로그인, 로그아웃, 회원가입, 이메일 인증)
+// 토큰이 필요하지 않은 API들 (로그인, 회원가입, 이메일 인증 페이지)
 const noTokenRequired = [
   "/users/login",
   "/users/signup",

frontend/api/lectures/fetchChattingList.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 { FetchChattingListResult } from "@/types/lectures/fetchChattingListTypes";
+
+export async function fetchChattingList(lectureId: string) {
+  try {
+    const response = await axiosInstance.get<
+      ApiResponse<FetchChattingListResult>
+    >(ENDPOINTS.LECTURES.GET_CHATTING_LIST(lectureId));
+    return response.data;
+  } catch (error: unknown) {
+    if (axios.isAxiosError(error) && error.response) {
+      return error.response.data as ApiResponse<FetchChattingListResult>;
+    }
+    throw error;
+  }
+}

frontend/app/student/lecture-detail/[lectureId]/_components/QuestionListSection/QuestionListSection.module.scss

@@ -22,6 +22,9 @@
 }
 
 .questionItem {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
   width: fit-content;
   padding: $spacing-sm;
   border: 1px solid $color-neutral-7;
@@ -30,11 +33,15 @@
 
   &:last-child {
     border-bottom: none;
+    margin-bottom: $spacing-sm;
   }
 }
 
+.bottomSpacer {
+  height: 1px;
+}
+
 .timestamp {
-  margin-top: $spacing-xs;
   font-size: $font-size-sm;
   color: $color-neutral-5;
 }
@@ -46,6 +53,12 @@
   font-weight: $font-weight-light;
 }
 
+.teacherName {
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
+  color: $color-blue;
+}
+
 .questionInputContainer {
   display: flex;
   gap: $spacing-sm;

frontend/app/student/lecture-detail/[lectureId]/_components/QuestionListSection/QuestionListSection.tsx

@@ -1,116 +1,79 @@
-import React, { useEffect, useState, useRef, useCallback } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { useLectureStatusStore } from "@/store/useLectureStatusStore";
+import { ChatMessage, useLectureChat } from "@/hooks/useLectureChat";
 import NoDataView from "@/components/NoDataView/NoDataView";
 import { MessageCircle, Send } from "lucide-react";
 import styles from "./QuestionListSection.module.scss";
 import LoadingSpinner from "@/components/LoadingSpinner/LoadingSpinner";
 import BasicInput from "@/components/Input/BasicInput/BasicInput";
 import IconButton from "@/components/Button/IconButton/IconButton";
+import { fetchChattingList } from "@/api/lectures/fetchChattingList";
 
 export default function QuestionListSection({
   lectureId,
 }: {
   lectureId: string;
 }) {
   const { lectureStatus } = useLectureStatusStore();
-  const [questions, setQuestions] = useState<string[]>([]);
+  const { messages, connected, sendMessage } = useLectureChat(lectureId);
   const [questionInput, setQuestionInput] = useState<string>("");
   const [loading, setLoading] = useState(true);
-  const socketRef = useRef<WebSocket | null>(null);
-
-  // 소켓 연결 함수
-  const connectSocket = useCallback(() => {
-    if (socketRef.current?.readyState === WebSocket.OPEN) return;
-
-    try {
-      // TODO: 실제 소켓 서버 URL로 변경
-      const socketUrl = `ws://localhost:8080/ws/lecture/${lectureId}`;
-      socketRef.current = new WebSocket(socketUrl);
-
-      socketRef.current.onopen = () => {
-        console.log("소켓 연결 성공");
-      };
-
-      socketRef.current.onmessage = (event) => {
-        try {
-          const data = JSON.parse(event.data);
-          handleSocketMessage(data);
-        } catch (error) {
-          console.error("소켓 메시지 파싱 오류:", error);
-        }
-      };
-
-      socketRef.current.onclose = () => {
-        console.log("소켓 연결 종료");
-      };
-
-      socketRef.current.onerror = (error) => {
-        console.error("소켓 오류:", error);
-      };
-    } catch (error) {
-      console.error("소켓 연결 실패:", error);
-    }
-  }, [lectureId]);
-
-  // 소켓 메시지 처리 함수
-  const handleSocketMessage = (data: {
-    type: string;
-    question?: string;
-    questions?: string[];
-  }) => {
-    switch (data.type) {
-      case "newQuestion":
-        setQuestions((prev) => [...prev, data.question || ""]);
-        break;
-      case "questionList":
-        setQuestions(data.questions || []);
-        break;
-      default:
-        console.log("알 수 없는 메시지 타입:", data.type);
-    }
-  };
+  const [previousMessages, setPreviousMessages] = useState<ChatMessage[]>([]);
+  const listEndRef = useRef<HTMLLIElement | null>(null);
 
   // 질문 전송 함수
   const sendQuestion = () => {
-    if (!questionInput.trim() || !socketRef.current) return;
+    if (!questionInput.trim() || !connected) return;
 
-    const message = {
-      type: "sendQuestion",
-      lectureId: lectureId,
-      question: questionInput.trim(),
-      timestamp: new Date().toISOString(),
-    };
-
-    socketRef.current.send(JSON.stringify(message));
+    sendMessage(questionInput.trim());
     setQuestionInput(""); // 입력창 초기화
   };
 
   useEffect(() => {
-    // TODO: API 호출로 변경
-    setQuestions([
-      "dd",
-      "AsdfasAsdfasAsdfasAsdfasAsdfasAsdfasAsdfasAsdfasAsdfasAsdfasAsdfasAsdfasAsdfasAsdfasAsdfasAsdfasAsdfasAsdfasAsdfas",
-      "Asdfadfg",
-      "Asdfadfg",
-    ]);
-    setLoading(false);
-
-    // 강의 중일 때만 소켓 연결
-    if (lectureStatus === "onLecture") {
-      connectSocket();
-    }
-
-    // 컴포넌트 언마운트 시 소켓 연결 해제
-    return () => {
-      if (socketRef.current) {
-        socketRef.current.close();
+    let isMounted = true;
+    const loadPreviousMessages = async () => {
+      try {
+        const res = await fetchChattingList(lectureId);
+        if (!isMounted) return;
+        if (res.isSuccess && Array.isArray(res.result)) {
+          const mapped: ChatMessage[] = res.result.map((m) => ({
+            senderId: null,
+            senderName: null,
+            content: m.content,
+            role: m.role,
+            timestamp: m.timestamp,
+          }));
+          setPreviousMessages(mapped);
+        } else {
+          setPreviousMessages([]);
+        }
+      } catch {
+        if (!isMounted) return;
+        setPreviousMessages([]);
+      } finally {
+        if (isMounted) setLoading(false);
       }
     };
-  }, [lectureId, lectureStatus, connectSocket]);
+    loadPreviousMessages();
+    return () => {
+      isMounted = false;
+    };
+  }, [lectureId]);
+
+  const combinedMessages = useMemo(() => {
+    // 과거 메시지 이후에 실시간 메시지 순서로 노출
+    return [...previousMessages, ...messages];
+  }, [previousMessages, messages]);
+
+  // 새로운 메시지가 추가될 때 항상 맨 아래로 스크롤
+  useEffect(() => {
+    listEndRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+  }, [combinedMessages]);
 
-  const now = () => {
+  // 시간 포맷팅 함수
+  const formatTime = (timestamp: string) => {
     try {
-      const date = new Date();
+      const date = new Date(timestamp);
       const hours = date.getHours().toString().padStart(2, "0");
       const minutes = date.getMinutes().toString().padStart(2, "0");
       return `${hours}:${minutes}`;
@@ -126,12 +89,22 @@ export default function QuestionListSection({
       {lectureStatus === "onLecture" ? (
         <div className={styles.questionListContainer}>
           <ul className={styles.questionList}>
-            {questions.map((q, index) => (
+            {combinedMessages.map((message, index) => (
               <li key={index} className={styles.questionItem}>
-                <div className={styles.message}>{q}</div>
-                <div className={styles.timestamp}>{now()}</div>
+                <div className={styles.message}>
+                  <div className={styles.content}>{message.content}</div>
+                </div>
+                <div className={styles.timestamp}>
+                  {formatTime(message.timestamp)}
+                </div>
+                {message.role === "TEACHER" && (
+                  <div className={styles.teacherName}>
+                    * 강사가 보낸 메시지입니다.
+                  </div>
+                )}
               </li>
             ))}
+            <li ref={listEndRef} className={styles.bottomSpacer} />
           </ul>
           <div className={styles.questionInputContainer}>
             <BasicInput
@@ -143,6 +116,7 @@ export default function QuestionListSection({
               icon={<Send />}
               onClick={sendQuestion}
               ariaLabel={"전송"}
+              disabled={!connected}
             />
           </div>
         </div>

frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNoteButton/LectureNoteButton.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useParams } from "next/navigation";
 import IconButton from "@/components/Button/IconButton/IconButton";
 import ToolPopover from "../../ToolPopover/ToolPopover";
@@ -10,29 +10,20 @@ import { FileText } from "lucide-react";
 import { fetchLectureNoteByLectureId } from "@/api/lectures/fetchLectureNoteByLectureId";
 import { FetchLectureNoteByLectureIdResult } from "@/types/lectures/fetchLectureNoteByLectureIdTypes";
 import styles from "./LectureNoteButton.module.scss";
+import useSelectedClassStore from "@/store/useSelectedClassStore";
 
 export default function LectureNoteButton() {
   const { lectureId } = useParams<{ lectureId: string }>();
   const docBtnRef = useRef<HTMLSpanElement>(null);
 
   const [openDoc, setOpenDoc] = useState(false);
   const [uploadOpen, setUploadOpen] = useState(false);
-  const [classId, setClassId] = useState<string | null>(null);
-  const [lectureNotes, setLectureNotes] = useState<FetchLectureNoteByLectureIdResult[]>([]);
+  const [lectureNotes, setLectureNotes] = useState<
+    FetchLectureNoteByLectureIdResult[]
+  >([]);
+  const { selectedClassId } = useSelectedClassStore();
 
-  useEffect(() => {
-    const raw = localStorage.getItem("class-storage");
-    if (raw) {
-      try {
-        const parsed = JSON.parse(raw);
-        setClassId(parsed.state?.selectedClassId ?? null);
-      } catch (err) {
-        console.error("class-storage 파싱 실패:", err);
-      }
-    }
-  }, []);
-
-  const fetchLectureNotes = async () => {
+  const fetchLectureNotes = useCallback(async () => {
     try {
       const response = await fetchLectureNoteByLectureId(lectureId);
       if (response.isSuccess && response.result) {
@@ -45,11 +36,11 @@ export default function LectureNoteButton() {
       console.error("강의자료 조회 오류:", err);
       setLectureNotes([]);
     }
-  };
+  }, [lectureId]);
 
   useEffect(() => {
     if (lectureId) fetchLectureNotes();
-  }, [lectureId]);
+  }, [lectureId, fetchLectureNotes]);
 
   return (
     <>
@@ -69,15 +60,15 @@ export default function LectureNoteButton() {
         side="bottom"
       >
         <LectureNotePopover
-            notes={lectureNotes} 
-            onPicked={() => setOpenDoc(false)}
-            onUploadRequest={() => setUploadOpen(true)}
+          notes={lectureNotes}
+          onPicked={() => setOpenDoc(false)}
+          onUploadRequest={() => setUploadOpen(true)}
         />
       </ToolPopover>
 
-      {uploadOpen && classId && (
+      {uploadOpen && selectedClassId && (
         <FileSelectModal
-          classId={classId}
+          classId={selectedClassId}
           lectureId={lectureId}
           onClose={() => setUploadOpen(false)}
           registeredFiles={lectureNotes.map((n) => n.lectureNoteName)}
@@ -89,4 +80,4 @@ export default function LectureNoteButton() {
       )}
     </>
   );
-}
+}

frontend/constants/endpoints.ts

@@ -72,6 +72,8 @@ export const ENDPOINTS = {
       `${BASE_API}/lectures/student/${lectureId}`,
     GET_CLASS_NAME: (lectureId: string) =>
       `${BASE_API}/lectures/classes/${lectureId}`,
+    GET_CHATTING_LIST: (lectureId: string) =>
+      `${BASE_API}/lectures/chatting/before/${lectureId}`,
 
     // 노트 관련
     UPLOAD_NOTE: (classId: string) =>