TIL 100. 2024-05-23

Task TODOLIST

• 게임 시작 시 게임 시작 버튼 비활성화 및 이미지 초기화
• 방 입장 시 players의 ready 정보를 받아 이미지로 체크
• 테스트한 결과를 바탕으로 Error 처리

✨ 개발 내용

  useEffect(() => {
    //NOTE - 방 입장 시 한 번만 실행 && Remote Player가 존재할 경우에만 실행
    if (roomId && remotesTrack.length !== 0) {
      socket.emit("usersInfo", roomId);
      console.log("usersInfo socket.emit 실행");
    }
  }, [roomId]);

  const sockets = {
    //NOTE - players의 실시간 준비 상태 update
    setReady: (playerId: string, isReady: boolean) => {
      setReadyPlayers(playerId, isReady);
    },
    //NOTE - players의 Ready 초기 상태
    usersInfo: (players: playersInfo[]) => {
      players.forEach((player) => {
        if (player.is_ready) {
          setReadyPlayers(player.user_id, player.is_ready);
        }
      });
    }
  };
  useSocketOn(sockets);

✨ TroubleShotting

방 나갈 시에 방 입장 UI가 보이는 현상 발생

구조

const RoomPage = () => {
  const { isExit } = useExitStore();

  return <>{isExit ? <Loading /> : <JoinMafiaRoom />}</>;
};

• JoinMafiaRoom의 하위 컴포넌트인 MafiaPlayRooms 컴포넌트에서의 방나가기 이벤트 핸들러

  //NOTE - 방 나가기 이벤트 헨들러
  const leaveRoom = () => {
    setIsExit(true);
    socket.emit("exitRoom", roomId, userId);
  };

const Loading = () => {
  const router = useRouter();
  const { setIsExit } = useExitStore();

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsExit(false);
      router.replace("/main");
    }, 3000);

    return () => {
      clearTimeout(timer);
    };
  }, []);

현상이 발생하는 이유)
방을 나갈 시 setIsExit(true); 상태 값이 변경되고 이때 Loading 컴포넌트가 실행 -> 이때 setTimeout이 종료된 후 setIsExit 값을 초기화 시켜주는 로직이 돌아가 JoinMafiaRoom 컴포넌트가 실행되어 방 입장 UI가 보이는 현상이 발생

해결 과정)

• 마피아 페이지에서 방을 나갔을 경우 Loading 컴포넌트가 아닌 페이지를 만들어 Loading 페이지로 이동 시키는 구조를 생각해봤다.
  그랬을 경우에는 LoadingPage에서 setIsExit(false); state 값이 변경되어도 현재 접속한 페이지가 마피아 방 페이지가 아니므로 Error 해결
  그러나 단순히, state값의 변화로 인해 Loading 컴포넌트를 Page로 만들기에는 불필요하다고 느꼈으며, 다른 방법을 생각해보았다.

해결) useEffect의 기본 개념인 clean Up 함수를 통해 해결

  useEffect(() => {
    const timer = setTimeout(() => {
      router.replace("/main");
    }, 3000);

// UnMout 시 작동되므로 UI가 표시 되지 않는 걸 확인
    return () => {
      setIsExit(false);
      clearTimeout(timer);
    };
  }, []);