diff --git a/frontend/src/components/common/Modal/index.tsx b/frontend/src/components/common/Modal/index.tsx index 1b412f63..011fc352 100644 --- a/frontend/src/components/common/Modal/index.tsx +++ b/frontend/src/components/common/Modal/index.tsx @@ -25,7 +25,7 @@ const Modal = ({ leftButton, rightButton, type, - onLeftClick = () => { }, + onLeftClick = () => {}, onRightClick, }: ModalProps) => { const handleButtonClick = (callback: () => void) => () => { diff --git a/frontend/src/components/mypage/QuestionList/QuestionItem/index.tsx b/frontend/src/components/mypage/QuestionList/QuestionItem/index.tsx index 2efa10a7..329c21cd 100644 --- a/frontend/src/components/mypage/QuestionList/QuestionItem/index.tsx +++ b/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} />
{ 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,15 +217,15 @@ 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) => { @@ -229,13 +233,11 @@ describe("useSession Hook 테스트", () => { }); }); - 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) ); diff --git a/frontend/src/hooks/session/usePeerConnection.ts b/frontend/src/hooks/session/usePeerConnection.ts index 0ab06a78..f6206dbe 100644 --- a/frontend/src/hooks/session/usePeerConnection.ts +++ b/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(); diff --git a/frontend/src/hooks/session/useReaction.ts b/frontend/src/hooks/session/useReaction.ts index 47209947..0bc3f9ae 100644 --- a/frontend/src/hooks/session/useReaction.ts +++ b/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; diff --git a/frontend/src/hooks/session/useSession.ts b/frontend/src/hooks/session/useSession.ts index 3dd3f31c..7670ff27 100644 --- a/frontend/src/hooks/session/useSession.ts +++ b/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(); diff --git a/frontend/src/hooks/session/useSocketEvents.ts b/frontend/src/hooks/session/useSocketEvents.ts index d9054ff8..bc12df46 100644 --- a/frontend/src/hooks/session/useSocketEvents.ts +++ b/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; diff --git a/frontend/src/hooks/useAuth.ts b/frontend/src/hooks/useAuth.ts index 6cd4e0f6..0ee4fc3d 100644 --- a/frontend/src/hooks/useAuth.ts +++ b/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"; diff --git a/frontend/src/hooks/useModal.ts b/frontend/src/hooks/useModal.ts index 735567e2..964afe00 100644 --- a/frontend/src/hooks/useModal.ts +++ b/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), }; }; diff --git a/frontend/src/pages/MyPage/view/Profile.tsx b/frontend/src/pages/MyPage/view/Profile.tsx index 33298dba..881fea4f 100644 --- a/frontend/src/pages/MyPage/view/Profile.tsx +++ b/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 (
diff --git a/frontend/src/pages/MyPage/view/ProfileEditModal.tsx b/frontend/src/pages/MyPage/view/ProfileEditModal.tsx index 5a57d037..70ad4272 100644 --- a/frontend/src/pages/MyPage/view/ProfileEditModal.tsx +++ b/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) => { @@ -46,7 +50,7 @@ const ProfileEditModal = ({ modal: { dialogRef, isOpen, closeModal } }: { modal: { }} + onChange={() => {}} minLength={2} />