모달 내 소켓 통신을 위한 useSocketStore 생성 및 적용

src/components/Common/GameListCarousel/GameListCarousel.tsx

@@ -13,11 +13,13 @@ import {
   GameListCard,
 } from '@/components';
 import { PATH } from '@/constants/router';
+import { SOCKET } from '@/constants/websocket';
 import { useToast } from '@/hooks/useToast';
 import { cn } from '@/lib/utils';
 import { createRoom } from '@/services/rooms';
 import useModalStore from '@/store/useModalStore';
 import useRoomStore from '@/store/useRoomStore';
+import useSocketStore from '@/store/useSocketStore';
 import { GameResponse } from '@/types/api';
 
 interface GameListCarouselProps {
@@ -29,8 +31,9 @@ const GameListCarousel = ({ games }: GameListCarouselProps) => {
   const router = useRouter();
   const { toast } = useToast();
 
-  const { setRoomId, setGameId } = useRoomStore();
+  const { setRoomId } = useRoomStore();
   const { closeModal } = useModalStore();
+  const { sendMessage } = useSocketStore();
 
   const [isClicked, setIsClicked] = useState(false);
 
@@ -62,7 +65,16 @@ const GameListCarousel = ({ games }: GameListCarouselProps) => {
 
   const handleChangeGame = (gameId: string) => {
     if (isClicked) return;
-    setGameId(gameId);
+
+    if (sendMessage) {
+      sendMessage({
+        destination: `${SOCKET.ROOM.CHANGE_GAME}`,
+        body: {
+          gameId,
+        },
+      });
+    }
+
     closeModal();
     setIsClicked(true);
   };

src/components/Common/GameRoom/GameRoomController.tsx

@@ -7,11 +7,11 @@ import { useEffect } from 'react';
 
 import { Spinner } from '@/components';
 import { PATH } from '@/constants/router';
-import { SOCKET } from '@/constants/websocket';
 import { useFetchRoomDetail } from '@/hooks/queries';
 import { useToast } from '@/hooks/useToast';
 import { EnterRoomProps } from '@/hooks/useWebSocket';
 import useRoomStore from '@/store/useRoomStore';
+import useSocketStore from '@/store/useSocketStore';
 import { ChatMessage } from '@/types';
 
 import GameRoomView from './GameRoomView';
@@ -37,14 +37,21 @@ const GameRoomController = ({
 
   const { data: roomDetail, error, isError } = useFetchRoomDetail(roomId);
 
-  const { myName, setHostName, gameId } = useRoomStore();
+  const { myName, setHostName } = useRoomStore();
+  const { setSendMessage } = useSocketStore();
 
   const isRoomManager = roomDetail.players.some(
     (player) => player.name === myName && player.isHost
   );
   const isSelfInPlayers =
     roomDetail.players.findIndex((user) => user.name === myName) !== -1;
 
+  useEffect(() => {
+    if (sendMessage) {
+      setSendMessage(sendMessage);
+    }
+  }, [sendMessage, setSendMessage]);
+
   useEffect(() => {
     if (roomDetail.players.length > 0) {
       const host = roomDetail.players.find((player) => player.isHost);
@@ -69,24 +76,6 @@ const GameRoomController = ({
     }
   }, [myName, roomDetail]);
 
-  useEffect(() => {
-    sendMessage({
-      destination: `${SOCKET.ROOM.CHANGE_PLAYER_NAME}`,
-      body: {
-        name: myName,
-      },
-    });
-  }, [myName]);
-
-  useEffect(() => {
-    sendMessage({
-      destination: `${SOCKET.ROOM.CHANGE_GAME}`,
-      body: {
-        gameId,
-      },
-    });
-  }, [gameId]);
-
   // @TODO: 더 선언적으로 error를 처리할 수 있는 방법 찾기
   useEffect(() => {
     if (isError) {

src/components/ModalList/CreateUserNameModal.tsx

@@ -15,15 +15,18 @@ import {
   ModalShell,
 } from '@/components';
 import { STORAGE_KEY } from '@/constants/storage';
+import { SOCKET } from '@/constants/websocket';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { useToast } from '@/hooks/useToast';
 import useModalStore from '@/store/useModalStore';
 import useRoomStore from '@/store/useRoomStore';
+import useSocketStore from '@/store/useSocketStore';
 
 const CreateUserNameModal = () => {
   const { closeModal } = useModalStore();
   const { setItem } = useLocalStorage();
   const { myName, setMyName } = useRoomStore();
+  const { sendMessage } = useSocketStore();
   const { toast } = useToast();
 
   const formSchema = z.object({
@@ -52,14 +55,24 @@ const CreateUserNameModal = () => {
         description: '기존 닉네임과 다른 닉네임을 입력해주세요.',
       });
     } else {
+      setMyName(values.username);
+      setItem(STORAGE_KEY.NICKNAME, values.username);
+      closeModal();
+
+      if (sendMessage) {
+        sendMessage({
+          destination: `${SOCKET.ROOM.CHANGE_PLAYER_NAME}`,
+          body: {
+            name: values.username,
+          },
+        });
+      }
+
       toast({
         variant: 'success',
         title: '닉네임 변경 성공',
         description: `${values.username}님, 그루파이별에 오신 것을 환영해요!`,
       });
-      setMyName(values.username);
-      setItem(STORAGE_KEY.NICKNAME, values.username);
-      closeModal();
     }
   };
 

src/store/useBalanceGameStore.ts

@@ -6,7 +6,6 @@ interface BalanceGameStoreProps {
   round: BalanceGameRoundResponse;
   selectedPlayers: string[];
   setRound: (round: BalanceGameRoundResponse) => void;
-  setTotalRounds: (count: number) => void; // @TODO: 추후에 완전 삭제 필요
   addSelectedPlayers: (player: string) => void;
   resetSelectedPlayers: () => void;
 }
@@ -20,20 +19,11 @@ const useBalanceGameStore = create<BalanceGameStoreProps>((set) => ({
     currentRound: 0,
     playSeconds: 0,
   },
-
   selectedPlayers: [],
   setRound: (round: BalanceGameRoundResponse) =>
     set({
       round,
     }),
-
-  setTotalRounds: (count) =>
-    set((state) => ({
-      round: {
-        ...state.round,
-        totalRounds: count,
-      },
-    })),
   addSelectedPlayers: (player) =>
     set((state) => ({
       selectedPlayers: [...state.selectedPlayers, player],

src/store/useQnaGameStore.ts

@@ -6,7 +6,6 @@ interface BalanceGameStoreProps {
   round: QnaGameRoundResponse;
   submittedPlayers: string[];
   setRound: (round: QnaGameRoundResponse) => void;
-  setTotalRounds: (count: number) => void; // @TODO: 추후에 완전 삭제 필요
   addSubmittedPlayer: (playerId: string) => void;
   clearSubmittedPlayers: () => void;
   reset: () => void;
@@ -23,13 +22,6 @@ const useQnaGameStore = create<BalanceGameStoreProps>((set) => ({
     set({
       round,
     }),
-  setTotalRounds: (count) =>
-    set((state) => ({
-      round: {
-        ...state.round,
-        totalRounds: count,
-      },
-    })),
   addSubmittedPlayer: (playerId) =>
     set((state) => ({
       submittedPlayers: [...state.submittedPlayers, playerId],

src/store/useRoomStore.ts

@@ -11,7 +11,6 @@ interface RoomStoreProps {
   myName: string;
   setRoomStatus: (status: roomStatusType) => void;
   setRoomId: (id: string) => void;
-  setGameId: (id: string) => void;
   setHostName: (name: string) => void;
   setMyName: (name: string) => void;
   getHostName: () => string | null;
@@ -26,7 +25,6 @@ const useRoomStore = create<RoomStoreProps>((set, get) => ({
   myName: '',
   setRoomStatus: (status) => set({ roomStatus: status }),
   setRoomId: (id) => set({ roomId: id }),
-  setGameId: (id) => set({ gameId: id }),
   setHostName: (name) => set({ hostName: name }),
   setMyName: (name) => set({ myName: name }),
   getHostName: () => get().hostName,

src/store/useSocketStore.ts

@@ -0,0 +1,22 @@
+import * as StompJS from '@stomp/stompjs';
+import { create } from 'zustand';
+
+interface SocketStoreProps {
+  sendMessage:
+    | (<T>(params: Omit<StompJS.IPublishParams, 'body'> & { body?: T }) => void)
+    | null;
+  setSendMessage: (
+    sendFn:
+      | (<T>(
+          params: Omit<StompJS.IPublishParams, 'body'> & { body?: T }
+        ) => void)
+      | null
+  ) => void;
+}
+
+const useSocketStore = create<SocketStoreProps>((set) => ({
+  sendMessage: null,
+  setSendMessage: (sendFn) => set({ sendMessage: sendFn }),
+}));
+
+export default useSocketStore;