fix: 1, 2, 4, 6, 7, 14, 16, 20, 21 이슈 조치

tech-kms-jake · tech-kms-jake · commit aeeb36753b77 · 2025-07-30T22:23:12.000+09:00
diff --git a/src/hooks/useRoomSseClient.js b/src/hooks/useRoomSseClient.js
@@ -21,16 +21,21 @@ export default function useRoomSseClient(onRoomEvent) {
             setConnected(true);
         };
 
-        eventSource.onmessage = (event) => {
+        const handleEvent = (type) => (event) => {
             try {
                 const payload = JSON.parse(event.data);
-                console.log(event);
-                onRoomEventRef.current?.(payload); // 예: { type: 'ROOM_CREATED', data: { ... } }
+                console.log(`📨 ${type} 이벤트 수신:`, payload);
+                onRoomEventRef.current?.({ type, payload });
             } catch (e) {
-                console.error('❌ SSE 메시지 파싱 실패', e);
+                console.error(`❌ ${type} 이벤트 파싱 실패`, e);
             }
         };
 
+        // 🎯 각각의 이벤트 타입 등록
+        eventSource.addEventListener('CREATE', handleEvent('CREATE'));
+        eventSource.addEventListener('UPDATE', handleEvent('UPDATE'));
+        eventSource.addEventListener('DELETE', handleEvent('DELETE'));
+
         eventSource.onerror = (err) => {
             console.error('❌ SSE 연결 오류:', err);
             // eventSource.close();
diff --git a/src/hooks/useStompClient.js b/src/hooks/useStompClient.js
@@ -125,5 +125,6 @@ export default function useStompClient(roomId, onMessage) {
     return {
         sendMessage: activeSendMessage, // 처음엔 null, 연결 완료되면 함수
         ready,
+        disconnect: () => stompClient?.deactivate(),
     };
 }
diff --git a/src/layout/game/GameLayout.js b/src/layout/game/GameLayout.js
@@ -112,14 +112,15 @@ const GameLayout = () => {
                 setGameResult(payload.message.result);
                 break;
             case "EXIT_SUCCESS":
+                disconnect();
                 navigate("/room");
                 break;
             default:
                 console.warn("알 수 없는 메시지", payload);
         }
     }, [setPlayerList, setRoomSetting, setGameSetting, setSystemNotice, setChat]);
 
-    const { sendMessage } = useStompClient(roomId, handleStompMessage);
+    const { sendMessage, disconnect } = useStompClient(roomId, handleStompMessage);
 
     useEffect(() => {
         if (sendMessage) {
diff --git a/src/pages/game/GamePlay.js b/src/pages/game/GamePlay.js
@@ -4,7 +4,7 @@ import F1StartingLights from "../../layout/game/components/F1StartingLights"
 import QuizTimer from "../../layout/game/components/QuizTimer"
 import QuizQuestion from "../../layout/game/components/QuizQuestion"
 import QuizResultsModal from "../../layout/game/components/QuizResultsModal"
-import {useRecoilValue} from "recoil";
+import {useRecoilState, useRecoilValue} from "recoil";
 import {
     gameResultAtom,
     questionResultAtom,
@@ -20,10 +20,10 @@ function GamePlay() {
     const [quizStarted, setQuizStarted] = useState(false);
     const [quizCompleted, setQuizCompleted] = useState(false);
     const [showResultsModal, setShowResultsModal] = useState(false);
-    const questions = useRecoilValue(questionsAtom);
-    const currentQuestion = useRecoilValue(questionStartAtom);
-    const questionsResult = useRecoilValue(questionResultAtom);
-    const gameResult = useRecoilValue(gameResultAtom);
+    const [questions, setQuestions] = useRecoilState(questionsAtom);
+    const [currentQuestion, setCurrentQuestion] = useRecoilState(questionStartAtom);
+    const [questionsResult, setQuestionsResult] = useRecoilState(questionResultAtom);
+    const [gameResult, setGameResult] = useRecoilState(gameResultAtom);
     const [visibleQuestion, setVisibleQuestion] = useState(false);
     const [showWinnerModal, setShowWinnerModal] = useState(false);
 
@@ -80,14 +80,23 @@ function GamePlay() {
 
     useEffect(() => {
         if (quizCompleted) {
+            setCurrentQuestion(null);
+            setGameResult(null);
+            setQuestions(null);
+            setQuestionsResult(null);
+
             navigate(`/room/${roomId}`);
         }
     }, [quizCompleted])
 
     useEffect(() => {
         if (gameResult) {
-            setShowWinnerModal(false);
-            setShowResultsModal(true);
+            const timeout = setTimeout(() => {
+                setShowWinnerModal(false);
+                setShowResultsModal(true);
+            }, 3000); // 3초 (3000ms) 후 실행
+
+            return () => clearTimeout(timeout);
         }
     }, [gameResult]);
 
diff --git a/src/pages/quiz/QuizList.js b/src/pages/quiz/QuizList.js
@@ -158,7 +158,7 @@ const QuizList = () => {
                         }
                         return rows;
                     }, []).map((rowItems, rowIndex) => (
-                        <Row key={rowIndex} className="mb-4 g-4 justify-content-center">
+                        <Row key={rowIndex} className="mb-4 g-4 justify-content-start">
                             {rowItems.map((quiz, colIndex) => (
                                 <Col key={colIndex} xl={3} lg={4} md={6} sm={12} className="d-flex justify-content-center">
                                     <QuizCard 
diff --git a/src/pages/rank/Rank.js b/src/pages/rank/Rank.js
@@ -25,6 +25,7 @@ const rankRequest = async (params) => {
 const Rank = () => {
   const [keyword, setKeyword] = useState("");
   const [tableRows, setTableRows] = useState([]);
+  const [tablePages, setTablePages] = useState({ currentPage: 1, totalPages: 1 });
   const [params, setParams] = useQueryParam();
   const { data, isLoading, isFetching } = useApiQuery(
       ['/stats/rankings', params], // queryKey에 params 포함
@@ -42,6 +43,10 @@ const Rank = () => {
         }
       })
       setTableRows(processedRows);
+      setTablePages({
+        currentPage: data.currentPage,
+        totalPages: data.totalPages
+      })
     }
   }, [data])
 
@@ -107,7 +112,7 @@ const Rank = () => {
           </TableBackGroundCard>
           
           {/* Pagination */}
-          <PaginationNavigator currentPage={data?.currentPage} totalPages={data?.totalPages}
+          <PaginationNavigator currentPage={tablePages.currentPage} totalPages={tablePages.totalPages}
                                onPageChange={(page) => setParams({
                                  ...params
                                  ,page: page,
diff --git a/src/pages/room/CreateRoomModal.js b/src/pages/room/CreateRoomModal.js
@@ -2,12 +2,14 @@
 
 import { useState } from "react"
 import styles from "./room.module.scss"
+import useConfirm from "../../hooks/useConfirm";
 
 const CreateRoomModal = ({ isOpen, onClose, onSubmit }) => {
   const [roomName, setRoomName] = useState("")
   const [maxUserCount, setMaxUserCount] = useState("2")
   const [locked, setLocked] = useState(false)
-  const [password, setPassword] = useState("")
+  const [password, setPassword] = useState("");
+  const {openConfirm} = useConfirm();
 
   const handlePasswordChange = (e) => {
     setPassword(e.target.value)
@@ -22,6 +24,12 @@ const CreateRoomModal = ({ isOpen, onClose, onSubmit }) => {
   }
 
   const handleSubmit = () => {
+    if (locked && !password.trim()) {
+      openConfirm({
+        title: "비밀번호를 입력 하세요"
+      });
+      return;
+    }
     // 방 생성 로직
     onSubmit({ roomName, maxUserCount, locked, password });
     onClose();
diff --git a/src/pages/room/RoomCard.js b/src/pages/room/RoomCard.js
@@ -5,7 +5,7 @@ import styles from './room.module.scss';
 const RoomCard = ({ room, onEnterRoom }) => {
   const isFullRoom = room.currentUserCount >= room.maxUserCount;
   const isPrivate = room.locked;
-
+console.log(room);
   const handleEnterRoom = () => {
     if (!isFullRoom && onEnterRoom) {
       onEnterRoom(room);
@@ -15,7 +15,7 @@ const RoomCard = ({ room, onEnterRoom }) => {
   return (
     <div className={styles.quizCard} onClick={handleEnterRoom}>
       <div className={styles.hoverCard}>
-        <h3>{room.roomName}</h3>
+        <h3>{room.quizTitle}</h3>
         <p>{room.description}</p>
         <p>제작자: {room.creator}</p>
         <p>총 문제: {room.numberOfQuestions} 문제</p>
@@ -31,7 +31,7 @@ const RoomCard = ({ room, onEnterRoom }) => {
       </div>
       
       <div className={styles.quizInfo}>
-        <h3 className={styles.quizTitle}>{room.title}</h3>
+        <h3 className={styles.quizTitle}>{room.roomName}</h3>
         <div className={styles.quizStats}>
           <span className={`${styles.quizParticipants} ${isFullRoom ? styles.full : ''}`}>
             인원: {room.currentUserCount} / {room.maxUserCount}
diff --git a/src/pages/room/RoomList.js b/src/pages/room/RoomList.js
@@ -12,6 +12,7 @@ import axios from "axios";
 import {useApiMutation} from "../../hooks/useApiMutation";
 import {useNavigate} from "react-router-dom";
 import useRoomSseClient from "../../hooks/useRoomSseClient";
+import Spinner from "../../shared/Spinner";
 
 const roomsRequest = async () => {
   const response = await axios.get(`/rooms`);
@@ -32,7 +33,6 @@ const RoomList = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const [currentPage, setCurrentPage] = useState(1);
   const [rooms, setRooms] = useState([]);
-  const [filteredRooms, setFilteredRooms] = useState([]);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isFullModalOpen, setIsFullModalOpen] = useState(false);
   const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false);
@@ -41,44 +41,43 @@ const RoomList = () => {
   const navigate = useNavigate();
   const ROOMS_PER_PAGE = 8 // 한 페이지당 8개
 
-  const { data, refetch } = useApiQuery(
+  const { data, isLoading } = useApiQuery(
       ["rooms"],
       () => roomsRequest(),
   );
 
   useRoomSseClient((event) => {
     const { type, payload } = event;
-  console.log(type, payload)
     setRooms((prev) => {
       switch (type) {
         case 'CREATE':
           // 이미 있는 방이면 추가하지 않음 (중복 방지)
-          if (prev.some((room) => room.roomId === payload.roomId)) {
+          if (prev.some((room) => room.roomId === payload.payload.roomId)) {
             return prev;
           }
-          return [...prev, payload];
+          return [...prev, payload.payload];
 
         case 'UPDATE':
           return prev.map((room) =>
-              room.roomId === payload.roomId ? { ...room, ...payload } : room
+              room.roomId === payload.payload.roomId ? { ...room, ...payload.payload } : room
           );
 
         case 'DELETE':
-          return prev.filter((room) => room.roomId !== payload.roomId);
+          return prev.filter((room) => room.roomId !== payload.payload.roomId);
 
         default:
           return prev;
       }
     });
   });
 
-  const { mutate: createRoomMutate } = useApiMutation(createRoomRequest, {
+  const { mutate: createRoomMutate, isLoading: isCreateRoomLoading } = useApiMutation(createRoomRequest, {
     onSuccess: (data) => {
       navigate(`/room/${data.roomId}`);
     },
   });
 
-  const { mutate: enterRoomMutate } = useApiMutation(enterRoomRequest, {
+  const { mutate: enterRoomMutate, isLoading: isEnterRoomLoading } = useApiMutation(enterRoomRequest, {
     onSuccess: (data, variables) => {
       // 임시로 그냥 모달 닫고 입장했다고 가정
       setIsPasswordModalOpen(false);
@@ -90,7 +89,6 @@ const RoomList = () => {
   useEffect(() => {
     if (data) {
       setRooms(data.rooms);
-      setFilteredRooms(data.rooms);
     }
   }, [data])
 
@@ -104,15 +102,14 @@ const RoomList = () => {
   }, []);
 
   const handleSearch = () => {
-    const filtered = rooms.filter((room) => room.roomName.toLowerCase().includes(searchTerm.toLowerCase()));
-    setFilteredRooms(filtered);
+    setRooms((prev) => prev.filter((room) => room.roomName.toLowerCase().includes(searchTerm.toLowerCase())));
     setCurrentPage(1); // 검색 시 첫 페이지로 이동
     setSearchOn(true);
   }
 
   const handleReset = () => {
     setSearchTerm('');
-    setFilteredRooms(rooms);
+    setRooms(data.rooms);
     setCurrentPage(1); // 검색 시 첫 페이지로 이동
     setSearchOn(false);
   };
@@ -142,16 +139,17 @@ const RoomList = () => {
   }
 
   // 현재 페이지에 표시할 방들 계산
-  const totalPages = Math.ceil(filteredRooms.length / ROOMS_PER_PAGE)
+  const totalPages = Math.ceil(rooms.length / ROOMS_PER_PAGE)
   const startIndex = (currentPage - 1) * ROOMS_PER_PAGE
   const endIndex = startIndex + ROOMS_PER_PAGE
-  const currentRooms = filteredRooms.slice(startIndex, endIndex)
+  const currentRooms = rooms.slice(startIndex, endIndex)
 
   // 빈 카드로 채우기 (레이아웃 안정화를 위해)
   const emptyCards = Array(Math.max(0, ROOMS_PER_PAGE - currentRooms.length)).fill(null)
 
   return (
     <div className={styles.mainContainer}>
+      <Spinner show={isLoading || isEnterRoomLoading || isCreateRoomLoading} />
       {/* Main Content */}
       <main className={styles.mainContent}>
         {/* Search Section */}
@@ -188,7 +186,7 @@ const RoomList = () => {
         {searchTerm && searchOn && (
           <div className={styles.searchInfo}>
             <p>
-              "{searchTerm}" 검색 결과: {filteredRooms.length}개의 방
+              "{searchTerm}" 검색 결과: {rooms.length}개의 방
             </p>
           </div>
         )}
@@ -205,13 +203,13 @@ const RoomList = () => {
         </section>
 
         {/* 검색 결과가 없을 때 */}
-        {filteredRooms.length === 0 && searchTerm && (
+        {rooms.length === 0 && searchTerm && (
           <div className={styles.noResults}>
             <p>검색 결과가 없습니다.</p>
             <button
               onClick={() => {
                 setSearchTerm("")
-                setFilteredRooms(dummyRooms)
+                setRooms(data.rooms)
                 setCurrentPage(1)
               }}
             >
diff --git a/src/shared/table/FlexibleTableHeader.js b/src/shared/table/FlexibleTableHeader.js
@@ -60,8 +60,8 @@ const FlexibleTableHeader = ({ header, openColumn, handleAlign, handleSort, togg
             </div>
             {header.column.getCanResize() && (
                 <div
-                    onMouseDown={header.getResizeHandler()}
-                    onTouchStart={header.getResizeHandler()}
+                    // onMouseDown={header.getResizeHandler()}
+                    // onTouchStart={header.getResizeHandler()}
                     className={`${style.resizer} ${
                         header.column.getIsResizing() ? style.isResizing : ''
                     }`}

Original file line number	Diff line number	Diff line change
`@@ -125,5 +125,6 @@ export default function useStompClient(roomId, onMessage) {`
`125`	`125`	`return {`
`126`	`126`	`sendMessage: activeSendMessage, // 처음엔 null, 연결 완료되면 함수`
`127`	`127`	`ready,`
	`128`	`+ disconnect: () => stompClient?.deactivate(),`
`128`	`129`	`};`
`129`	`130`	`}`
Original file line number	Diff line number	Diff line change
`@@ -158,7 +158,7 @@ const QuizList = () => {`
`158`	`158`	`}`
`159`	`159`	`return rows;`
`160`	`160`	`}, []).map((rowItems, rowIndex) => (`
`161`		`- <Row key={rowIndex} className="mb-4 g-4 justify-content-center">`
	`161`	`+ <Row key={rowIndex} className="mb-4 g-4 justify-content-start">`
`162`	`162`	`{rowItems.map((quiz, colIndex) => (`
`163`	`163`	`<Col key={colIndex} xl={3} lg={4} md={6} sm={12} className="d-flex justify-content-center">`
`164`	`164`	`<QuizCard`