const CheckModal = () => {
const title = useGroupModalElement();
const voteResults = useVoteResultElement();
const [isVote, setIsVote] = useState(true);
const diedPlayerId = useDiedPlayer();
const { localParticipant } = useLocalParticipant();
const localPlayerId = localParticipant.identity;
//NOTE - 가장 많은 투표 수를 받는 player
const votePlayer = voteResults[0];
//NOTE - 가장 많은 투표를 받은 player가 자신일 경우
useEffect(() => {
if (votePlayer.user_id === localPlayerId) {
setIsVote(false);
}
}, [votePlayer]);
//NOTE - 죽은 playerId
const isDiedPlayer = diedPlayerId.find((playerId) => localPlayerId === playerId);
//NOTE - 최후의 투표 클릭 이벤트
const chooseVoteHandler = (vote: boolean) => {
setIsVote(false);
socket.emit("voteYesOrNo", vote);
};
return (
<>
<div className={S.modalWrap}>
<div className={S.modal}>
<div>
<h1>{title}</h1>
{isVote && !isDiedPlayer ? (
<>
<div className={S.userCheckNickName}>
<p>
<strong>{votePlayer.user_nickname}</strong> 님을
<br /> 최종적으로 지목하시겠습니까?
</p>
</div>
<div className={S.checkButton}>
<button disabled={!isVote} onClick={() => chooseVoteHandler(true)}>
찬성
</button>
<button disabled={!isVote} onClick={() => chooseVoteHandler(false)}>
반대
</button>
</div>
</>
) : (
<div>투표 중입니다.</div>
)}
<ModalProgress />
</div>
</div>
</div>
</>
);
};
export default CheckModal;
위의 코드를 해석해보면, 초기 렌더링시 조건부 UI 형태는 두 가지 경우로 나누어진다.
1) 투표 참여자이면서, 살아있을경우: "찬성/반대" === isVote, !isDiedPlayer,
2) 투표 참여자이면서, 죽어있을 경우: "투표 중입니다." === isVote, isDiedPlayer,
초기 렌더링 이후 정상적으로 작동되어야 하는 4가지 경우
"찬성/반대"
1) 투표 참여자이면서, 살아있을 경우 === isVote, !isDiedPlayer,
"투표 중입니다."
1) 투표 참여자이지만, 죽어있을 경우 === isVote, isDiedPlayer
2) 투표 대상자이면서, 살아있을 경우 === !isVote, !isDiedPlayer
3) 투표 대상자이면서, 죽어있을 경우 === !isVote, isDiedPlayer
const CheckModal = () => {
const title = useGroupModalElement();
const voteResults = useVoteResultElement();
const [isVote, setIsVote] = useState<boolean | null>(null);
const diedPlayerId = useDiedPlayer();
const { localParticipant } = useLocalParticipant();
const localPlayerId = localParticipant.identity;
// 가장 많은 투표 수를 받는 player
const votePlayer = voteResults[0];
//NOTE - 투표 대상자 or 참여자인 지 여부
useEffect(() => {
// 가장 많은 투표를 받은 player가 자신일 경우(투표 대상자)
if (votePlayer.user_id === localPlayerId) {
setIsVote(false);
return;
}
// 가장 많은 투표를 받은 player가 자신이 아닌 경우(투표 참여자)
if (votePlayer.user_id !== localPlayerId) {
setIsVote(true);
}
}, [votePlayer]);
//NOTE - 죽은 playerId
const isDiedPlayer = diedPlayerId.find((playerId) => localPlayerId === playerId);
//NOTE - 최후의 투표 클릭 이벤트
const chooseVoteHandler = (vote: boolean) => {
setIsVote(false);
socket.emit("voteYesOrNo", vote);
};
//NOTE - 초기 렌더링 필터
if (isVote === null) {
return;
}
return (
<>
<div className={S.modalWrap}>
<div className={S.modal}>
<div>
<h1>{title}</h1>
{isVote && !isDiedPlayer ? (
<>
<div className={S.userCheckNickName}>
<p>
<strong>{votePlayer.user_nickname}</strong> 님을
<br /> 최종적으로 지목하시겠습니까?
</p>
</div>
<div className={S.checkButton}>
<button disabled={isVote} onClick={() => chooseVoteHandler(true)}>
찬성
</button>
<button disabled={isVote} onClick={() => chooseVoteHandler(false)}>
반대
</button>
</div>
</>
) : (
<div>투표 중입니다.</div>
)}
<ModalProgress />
</div>
</div>
</div>
</>
);
};
export default CheckModal;