TIL 114. 2024-06-12

이준구·2024년 8월 14일
0

TIL 순서

목록 보기
116/119
post-thumbnail

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

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

profile
개발 중~~~ 내 자신도 발전 중😂🤣

0개의 댓글

관련 채용 정보