IceCraft - 마피아 게임페이지 조건에 따른 모달창 리팩토링

 

[Feat #271] - 마피아 게임페이지 조건에 따른 모달창 띄우기 변경 by seokachu · Pull Request #274 · ice-craf

 

마피아 게임페이지 컴포넌트에서 모달창을 Return문에 모달창 하나하나 불러오는 방식으로 진행했었는데

socket.io에서 받아오는 수신내용을 바탕으로

조건부 랜더링을 통해 해당 내용 모달창을 수신하면 UI에서 조건에 따른 모달창을 띄울 수 있도록 리팩토링을 진행하였다.

 

 

 

 

전역상태 관리로 useCurrentModal 을 추가함

//NOTE - ModalList 조건부 랜더링 관리, 주스탠드 관리 상태변경 하나로 통일
export const useCurrentModal = () => useShowModalStore((state) => state.currentModal);

 

 

 

 

그리고 조건에 따라 띄우는 모달창 컴포넌트를 새로 만들어서

전역상태관리로 상태변경 모달창을 새로운 컴포넌트에 받아오고

해당 조건에 맞게 모달창을 불러오게 수정하게 되었다.

const MafiaModals = () => {
  useModalSocket();
  const isOpen = useModalIsOpen();
  const currentModal = useCurrentModal();

  if (!isOpen) return null;

  //NOTE - 모달창 리스트
  /*
    GroupMafiaModal - 마피아 공용 모달창
    UserRoleModal - 직업 카드 모달창
    CheckModal - 찬반 투표 모달창 (yes or no)
    VoteResultModal - 찬반 투표 결과 모달창
    LastVoteResultModal - 최종 투표 결과 모달창
    VictoryModal - 승리 결과 모달창
  */

  switch (currentModal) {
    case "GroupMafiaModal":
      return <GroupMafiaModal />;
    case "UserRoleModal":
      return <UserRoleModal />;
    case "CheckModal":
      return <CheckModal />;
    case "VoteResultModal":
      return <VoteResultModal />;
    case "LastVoteResultModal":
      return <LastVoteResultModal />;
    case "VictoryModal":
      return <VictoryModal />;
    default:
      return null;
  }
};

 

 

 

 

 

그리고 마피아 게임페이지에서 해당 컴포넌트를 불러오게 만들었다.

 <section className={S.section}>
      <LocalParticipant tracks={tracks} />
      <RemoteParticipant tracks={tracks} />
      {/* 원격 참가자의 오디오 트랙을 처리 및 관리 */}
      <RoomAudioRenderer muted={false} />
      <div className={S.goToMainPage}>
        <button
          onClick={() => {
            allAudioSetting(tracks, false);
          }}
          style={{ background: "red" }}
        >
          전체 소리 끄기
        </button>
        <DisconnectButton onClick={leaveRoom}>나가기</DisconnectButton>
      </div>
      <MafiaToolTip />
      <MafiaModals />
    </section>