From c5c60b4fe2fa0662e536e0f99800eebdd529fc3d Mon Sep 17 00:00:00 2001
From: Haze10425 <jheee042500@gmail.com>
Date: Mon, 19 Feb 2024 14:11:03 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=9C=A0=EC=A0=80=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=20=EC=86=8C=EC=BC=93=20=EC=98=A4=EB=A5=98=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Room/Room.tsx | 49 +++++++++++++++++------------------------
 1 file changed, 20 insertions(+), 29 deletions(-)

diff --git a/src/pages/Room/Room.tsx b/src/pages/Room/Room.tsx
index 73d47aa..666549a 100644
--- a/src/pages/Room/Room.tsx
+++ b/src/pages/Room/Room.tsx
@@ -29,6 +29,7 @@ const Room: React.FC = () => {
   const [isAnswer, setIsAnswer] = useState(false);
   const [isPencil, setIsPencil] = useState(false);
   const [count, setCount] = useState(0);
+  const [isRound, setIsRound] = useState<number>(1);
 
   // 유저 목록 불러오기
   const getUser = useCallback(async () => {
@@ -44,6 +45,10 @@ const Room: React.FC = () => {
     }
   }, [api, roomId]);
 
+  useEffect(() => {
+    getUser();
+  }, [getUser]);
+
   useEffect(() => {
     if (!nickName || !character) {
       navigate(`/main/${roomId}`);
@@ -104,7 +109,6 @@ const Room: React.FC = () => {
   }, [api, roomId, setAnswer, socket]);
 
   const [timer, setTimer] = useState(roomSetting?.time ?? 0);
-  const [isRound, setIsRound] = useState<number>(1);
 
   const [start, setStart] = useState(false);
 
@@ -142,41 +146,28 @@ const Room: React.FC = () => {
     }
   }, [start, isPencil, roomSetting, isRound, roomId, socket, setTimer]);
 
+  // pencilUpdate 유저데이터 업데이트
   useEffect(() => {
-    const handleNextRound = () => {
-      getUser();
-      if (isRound !== 1) {
-        socket.emit('isRound', {
-          isRound: isRound,
-          roomId: Number(roomId),
-        });
-      }
-    };
-
-    if (isRound !== 1) {
-      socket.on('pencilUpdate', handleNextRound);
-    }
-
-    return () => {
-      socket.off('pencilUpdate', handleNextRound);
-    };
-  }, [socket, getUser, isRound, roomId]);
-
-  useEffect(() => {
-    if (isRound === 1) {
-      getUser();
-
-      const handlePencilUpdate = () => {
-        getUser();
+    if (socket) {
+      const handleNextRound = () => {
+        if (isRound > 1 && isPencil) {
+          socket.emit('isRound', {
+            isRound: isRound,
+            roomId: Number(roomId),
+          });
+        }
       };
 
-      socket.on('pencilUpdate', handlePencilUpdate);
+      socket.on('pencilUpdate', () => {
+        getUser();
+        handleNextRound();
+      });
 
       return () => {
-        socket.off('pencilUpdate', handlePencilUpdate);
+        socket.off('pencilUpdate');
       };
     }
-  }, [socket, getUser, isRound]);
+  }, [socket, getUser, isRound, roomId, isPencil]);
 
   // 타이머 실행
   useEffect(() => {