fix: 유저데이터 소켓 오류 수정

hjy961021 · Feb 19, 2024 · c5c60b4 · c5c60b4
1 parent 23d4900
commit c5c60b4
Showing 1 changed file with 20 additions and 29 deletions.
diff --git 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(() => {