From 9f638fe0e0f16f7867678cb67d43542d4afd73f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B2=9C=EC=A7=80=EC=9C=A4?=
 <70828192+cheonjiyun@users.noreply.github.com>
Date: Tue, 29 Oct 2024 22:56:19 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8=20?=
 =?UTF-8?q?=ED=95=A0=EB=95=8C=20=EA=B0=80=EB=81=94=20=EC=B1=84=ED=8C=85?=
 =?UTF-8?q?=EA=B5=AC=EB=8F=85=EC=9D=B4=20=EC=95=88=EB=90=98=EB=8A=94=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0=20(#142)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

연결될때 useState를 변경해서 구독을 트리거 함
---
 src/pages/Game.tsx | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/pages/Game.tsx b/src/pages/Game.tsx
index 559ef69..e637f7e 100644
--- a/src/pages/Game.tsx
+++ b/src/pages/Game.tsx
@@ -16,8 +16,10 @@ export default function Game() {
   const auth = localStorage.getItem('auth');
   const [chats, setChats] = useState<ChatArray>([]);
   const socketClientState = useRef<StompJs.Client | null>(null);
+
   const [chatSubscribeId, setChatSubscribeId] = useState<StompJs.StompSubscription | null>(null);
   const [roomsInfoState, setRoomsInfoState] = useRecoilState(roomInfoState); // 방 정보
+  const [finishSocketConneted, setFinishSocketConnetd] = useState(false); // 웹 소켓 연결이 끝난다는 트리거(채팅 구독이 연결 전에 실행될 때를 대비해 다시 실행하기 위함)
 
   const setGameRoundState = useSetRecoilState(gameRound);
 
@@ -59,13 +61,16 @@ export default function Game() {
       socket.activate();
     }
 
+    socket.onConnect = () => {
+      setFinishSocketConnetd(true);
+    };
+
     socketClientState.current = socket;
   };
 
   // 채팅구독
   const subscribeChat = () => {
     if (!socketClientState.current?.connected) return;
-
     const chatSubscribeId = socketClientState.current.subscribe(`/sub/chat/${auth}`, response => {
       const msg: ChatResponse = JSON.parse(response.body);
 
@@ -96,15 +101,9 @@ export default function Game() {
     socketClientState.current?.deactivate();
   };
 
-  // 웹소켓 연결
-  useEffect(() => {
-    connect();
-    return () => disConnect();
-  }, []);
-
   // 채팅구독
   useEffect(() => {
-    if (!(gamesStatus.statusType === 'DAY')) return;
+    if (gamesStatus.statusType !== 'DAY') return;
 
     // 본래 채팅불러오기
     (async () => {
@@ -114,7 +113,15 @@ export default function Game() {
 
     subscribeChat();
     return () => unsubscribeChat();
-  }, [gamesStatus.statusType]);
+  }, [gamesStatus.statusType, finishSocketConneted]);
+
+  useEffect(() => {});
+
+  // 웹소켓 연결
+  useEffect(() => {
+    connect();
+    return () => disConnect();
+  }, []);
 
   // 방 정보 저장 (방 상태가 바뀔때만 작동?)
   useEffect(() => {