TIL 114. 2024-06-12

2. 승리 모달창 에러 해결

• 서버에서 전달하는 Socket Event 중 “victoryPlayer”와 “gameEnd“가 동시에 전달

  victoryPlayer: 승리의 모달 컴포넌트 요소
  gameEnd: 게임 종료 state값 초기화
  해석: 승리 모달창이 실행되는 시점에서 모든 state값이 초기화되어 정상 작동되지 않는 걸 확인할 수 있다.(모달창이 나타나지 않는 현상)

해결:

• 기존 게임 상태의 전역 state값인 gameState를 승리의 모달 컴포넌트 종료 시 "gameEnd"로 변경하여, MafiaPlayRooms라는 상위컴포넌트에서 게임 종료 로직 처리

승리 모달창에서 게임 종료 로직을 처리하지 않은 이유

• 게임 입장 시 초기화, 게임 실행, 죽은 player 관리, Error 처리 등 중앙 컨트롤 역할을 담당하는 MafiaPlayRooms 컴포넌트에서 처리하고 있으므로 유지보수 및 가독성 측면에서 전역 state값을 활용하여, 중앙에서 같이 처리하는 게 맞다고 판단

const VictoryModal = () => {
const { setIsGameState } = useGameActions();
  
    //NOTE - 모달창 종료
  useEffect(() => {
    if (count <= 0 && isModal) {
      setIsOpen(false);
      setIsGameState("gameEnd");
    }
  }, [count]);
  
  ...
}
  

const MafiaPlayRooms = () => {
const isGameState = useGameState();

  //NOTE - 게임 종료
  useEffect(() => {
    if (isGameState === "gameEnd") {
      setOverlayReset(); //Local,Remote 클릭 이벤트 및 캠 이미지 초기화
      setModalReset(); //전체 모달 요소 초기화
      setGameReset(); // 죽은 players 및 게임 state 초기화
      setIsMediaReset(true); // 캠 및 오디오 초기화
    }
  }, [isGameState]);


}

TroubleShotting

위의 모달창 겹치는 에러 해결 과정