[Fix] 백엔드 리팩토링에 맞춰 테스트 코드 수정

frontend/src/components/common/Modal/index.tsx

@@ -25,7 +25,7 @@ const Modal = ({
   leftButton,
   rightButton,
   type,
-  onLeftClick = () => { },
+  onLeftClick = () => {},
   onRightClick,
 }: ModalProps) => {
   const handleButtonClick = (callback: () => void) => () => {

frontend/src/components/mypage/QuestionList/QuestionItem/index.tsx

@@ -23,7 +23,7 @@ const QuestionItem = ({ questionListId, type, page }: ItemProps) => {
   const openDeleteModal = (e: React.MouseEvent) => {
     e.stopPropagation();
     modal.openModal();
-  }
+  };
 
   const deleteHandler = () => {
     deleteQuestions(questionListId);
@@ -38,7 +38,7 @@ const QuestionItem = ({ questionListId, type, page }: ItemProps) => {
         leftButton="취소하기"
         rightButton="삭제하기"
         type="red"
-        onLeftClick={() => { }}
+        onLeftClick={() => {}}
         onRightClick={deleteHandler}
       />
       <div

frontend/src/hooks/__test__/useSession.test.ts

@@ -13,6 +13,10 @@ import {
   mockSocketStore,
   mockToast,
 } from "@hooks/__test__/mocks/useSession.mock";
+import { SESSION_EMIT_EVENT, SESSION_LISTEN_EVENT } from "@/constants/WebSocket/SessionEvent";
+import { SIGNAL_LISTEN_EVENT } from "@/constants/WebSocket/SignalingEvent";
+
+const REACTION_DURATION = 3000;
 
 // jest.mock: 실제 모듈대신 mock 모듈을 사용하도록 설정
 jest.mock("@hooks/session/useMediaDevices");
@@ -137,7 +141,7 @@ describe("useSession Hook 테스트", () => {
       expect(mockGetMedia).toHaveBeenCalled();
 
       // 4. 소켓 이벤트 발생 확인
-      expect(mockSocket.emit).toHaveBeenCalledWith("join_room", {
+      expect(mockSocket.emit).toHaveBeenCalledWith(SESSION_EMIT_EVENT.JOIN, {
         roomId: "test-session",
         nickname: "test-user",
       });
@@ -193,13 +197,13 @@ describe("useSession Hook 테스트", () => {
         result.current.emitReaction("👍");
       });
 
-      expect(mockSocket.emit).toHaveBeenCalledWith("reaction", {
+      expect(mockSocket.emit).toHaveBeenCalledWith(SESSION_EMIT_EVENT.REACTION, {
         roomId: "test-session",
-        reaction: "👍",
+        reactionType: "👍",
       });
 
       act(() => {
-        jest.advanceTimersByTime(3000);
+        jest.advanceTimersByTime(REACTION_DURATION);
       });
       expect(result.current.reaction).toBe("");
     });
@@ -213,29 +217,27 @@ describe("useSession Hook 테스트", () => {
 
     it("모든 소켓 이벤트 리스너 등록", () => {
       const expectedEvents = [
-        "all_users",
-        "getOffer",
-        "getAnswer",
-        "getCandidate",
-        "user_exit",
-        "room_full",
-        "master_changed",
-        "room_finished",
-        "reaction",
+        SIGNAL_LISTEN_EVENT.OFFER,
+        SIGNAL_LISTEN_EVENT.ANSWER,
+        SIGNAL_LISTEN_EVENT.CANDIDATE,
+        SESSION_LISTEN_EVENT.FULL,
+        SESSION_LISTEN_EVENT.QUIT,
+        SESSION_LISTEN_EVENT.JOIN,
+        SESSION_LISTEN_EVENT.CHANGE_HOST,
+        SESSION_LISTEN_EVENT.FINISH,
+        SESSION_LISTEN_EVENT.REACTION,
       ];
 
       expectedEvents.forEach((event) => {
         expect(mockSocket.on).toHaveBeenCalledWith(event, expect.any(Function));
       });
     });
 
-    it("room_full 이벤트 발생", () => {
-      // room_full 이벤트 핸들러 찾기
+    it("방이 가득찬 FULL 이벤트 발생", () => {
       const roomFullHandler = mockSocket.on.mock.calls.find(
-        ([event]: [string]) => event === "room_full"
+        ([event]: [string]) => event === SESSION_LISTEN_EVENT.FULL
       )[1];
 
-      // 이벤트 핸들러 실행
       roomFullHandler();
 
       expect(mockToast.error).toHaveBeenCalledWith(
@@ -254,33 +256,39 @@ describe("useSession Hook 테스트", () => {
 
       // 1. 소켓 이벤트 리스너 제거
       expect(mockSocket.off).toHaveBeenCalledWith(
-        "all_users",
+        SIGNAL_LISTEN_EVENT.OFFER,
+        expect.any(Function)
+      );
+      expect(mockSocket.off).toHaveBeenCalledWith(
+        SIGNAL_LISTEN_EVENT.ANSWER,
+        expect.any(Function)
+      );
+      expect(mockSocket.off).toHaveBeenCalledWith(
+        SIGNAL_LISTEN_EVENT.CANDIDATE,
         expect.any(Function)
       );
       expect(mockSocket.off).toHaveBeenCalledWith(
-        "getOffer",
+        SESSION_LISTEN_EVENT.JOIN,
         expect.any(Function)
       );
       expect(mockSocket.off).toHaveBeenCalledWith(
-        "getAnswer",
+        SESSION_LISTEN_EVENT.QUIT,
         expect.any(Function)
       );
       expect(mockSocket.off).toHaveBeenCalledWith(
-        "getCandidate",
+        SESSION_LISTEN_EVENT.FULL,
         expect.any(Function)
       );
-      expect(mockSocket.off).toHaveBeenCalledWith("user_exit");
-      expect(mockSocket.off).toHaveBeenCalledWith("room_full");
       expect(mockSocket.off).toHaveBeenCalledWith(
-        "master_changed",
+        SESSION_LISTEN_EVENT.CHANGE_HOST,
         expect.any(Function)
       );
       expect(mockSocket.off).toHaveBeenCalledWith(
-        "room_finished",
+        SESSION_LISTEN_EVENT.REACTION,
         expect.any(Function)
       );
       expect(mockSocket.off).toHaveBeenCalledWith(
-        "reaction",
+        SESSION_LISTEN_EVENT.FINISH,
         expect.any(Function)
       );
 

frontend/src/hooks/session/usePeerConnection.ts

@@ -189,7 +189,6 @@ const usePeerConnection = (socket: Socket) => {
       };
 
       // Offer를 생성해야 하는 경우에만 Offer 생성
-      // Offer: 초대 - Offer 생성 -> 자신의 설정 저장 -> 상대에게 전송
       if (isOffer) {
         try {
           const offer = await pc.createOffer();

frontend/src/hooks/session/useReaction.ts

@@ -8,7 +8,7 @@ import {
 } from "react";
 import { Socket } from "socket.io-client";
 import { PeerConnection } from "../type/session";
-import { SESSION_EMIT_EVENT } from "@/constants/WebSocket/SessionEvent.ts";
+import { SESSION_EMIT_EVENT } from "@/constants/WebSocket/SessionEvent";
 
 const REACTION_DURATION = 3000;
 

frontend/src/hooks/session/useSession.ts

@@ -9,8 +9,8 @@ import { usePeerConnectionCleanup } from "@hooks/session/usePeerConnectionCleanu
 import { useReaction } from "@hooks/session/useReaction";
 import { useSocketEvents } from "./useSocketEvents";
 import { Socket } from "socket.io-client";
-import { SESSION_EMIT_EVENT } from "@/constants/WebSocket/SessionEvent.ts";
-import useAuth from "@hooks/useAuth.ts";
+import { SESSION_EMIT_EVENT } from "@/constants/WebSocket/SessionEvent";
+import useAuth from "@hooks/useAuth";
 
 export const useSession = (sessionId: string) => {
   const { socket } = useSocket();

frontend/src/hooks/session/useSocketEvents.ts

@@ -18,8 +18,8 @@ import {
 import {
   SIGNAL_EMIT_EVENT,
   SIGNAL_LISTEN_EVENT,
-} from "@/constants/WebSocket/SignalingEvent.ts";
-import { SESSION_LISTEN_EVENT } from "@/constants/WebSocket/SessionEvent.ts";
+} from "@/constants/WebSocket/SignalingEvent";
+import { SESSION_LISTEN_EVENT } from "@/constants/WebSocket/SessionEvent";
 
 interface UseSocketEventsProps {
   socket: Socket | null;

frontend/src/hooks/useAuth.ts

@@ -1,4 +1,4 @@
-import useAuthStore from "@stores/useAuthStore.ts";
+import useAuthStore from "@stores/useAuthStore";
 import axios from "axios";
 import { useEffect } from "react";
 

frontend/src/hooks/useModal.ts

@@ -19,13 +19,13 @@ const useModal = (): UseModalReturn => {
       dialog.showModal();
 
       const handleEscape = (e: KeyboardEvent) => {
-        if (e.key === 'Escape') {
+        if (e.key === "Escape") {
           e.preventDefault();
           setIsOpen(false);
         }
       };
 
-      window.addEventListener('keydown', handleEscape);
+      window.addEventListener("keydown", handleEscape);
     } else {
       dialog.close();
     }
@@ -41,7 +41,7 @@ const useModal = (): UseModalReturn => {
     dialogRef,
     isOpen,
     openModal: () => setIsOpen(true),
-    closeModal: () => setIsOpen(false)
+    closeModal: () => setIsOpen(false),
   };
 };
 

frontend/src/pages/MyPage/view/Profile.tsx

@@ -10,12 +10,11 @@ interface UseModalReturn {
 
 const Profile = ({
   nickname,
-  modal
+  modal,
 }: {
-  nickname: string
-  modal: UseModalReturn
+  nickname: string;
+  modal: UseModalReturn;
 }) => {
-
   return (
     <div className="flex flex-row gap-8">
       <ProfileIcon />

frontend/src/pages/MyPage/view/ProfileEditModal.tsx

@@ -10,7 +10,11 @@ interface UseModalReturn {
   closeModal: () => void;
 }
 
-const ProfileEditModal = ({ modal: { dialogRef, isOpen, closeModal } }: { modal: UseModalReturn }) => {
+const ProfileEditModal = ({
+  modal: { dialogRef, isOpen, closeModal },
+}: {
+  modal: UseModalReturn;
+}) => {
   const { nickname } = useAuth();
 
   const handleMouseDown = (e: React.MouseEvent<HTMLDialogElement>) => {
@@ -46,7 +50,7 @@ const ProfileEditModal = ({ modal: { dialogRef, isOpen, closeModal } }: { modal:
           <TitleInput
             placeholder="닉네임을 입력해주세요"
             initValue={nickname}
-            onChange={() => { }}
+            onChange={() => {}}
             minLength={2}
           />
         </div>