기존) 동일 로직을 각각의 컴포넌트에 사용
현재) 커스텀훅으로 변경하여 가독성을 높였다.
// useClickHandler.ts
const useClickHandler = () => {
const inSelect = useInSelect();
const role = useRoleModalElement();
const setImageState = useJobImageAction();
const { setActiveParticipant, setIsOverlay } = useOverLayActions();
const clickHandler = (event: React.MouseEvent<HTMLElement>, playerId: string) => {
event.stopPropagation();
setIsOverlay(false); // : 클릭 이벤트를 한 번만 수행
setActiveParticipant(playerId); // : 캠 클릭시 클릭한 위치에 이미지 띄우기
//NOTE - 투표 및 마피아 시간
if (inSelect.includes("vote")) {
console.log(inSelect, playerId);
socket.emit("voteTo", playerId);
setImageState(CamCheck);
return;
}
if (inSelect.includes("mafia")) {
console.log(inSelect, playerId);
socket.emit("voteTo", playerId);
setImageState(CamCheck);
return;
}
//NOTE - 의사 시간
if (inSelect.includes("doctor")) {
console.log(inSelect, playerId);
socket.emit("selectPlayer", playerId);
setImageState(CamCheck);
return;
}
//NOTE - 경찰 시간
if (inSelect.includes("police")) {
const clickPlayerJob = getPlayerJob(role, playerId);
console.log(inSelect, playerId);
if (clickPlayerJob === "mafia") {
console.log("clickJob", clickPlayerJob);
setImageState(Mafia);
}
if (clickPlayerJob === "doctor") {
console.log("clickJob", clickPlayerJob);
setImageState(Doctor);
}
if (clickPlayerJob === "citizen") {
console.log("clickJob", clickPlayerJob);
setImageState(Citizen);
}
}
};
return { clickHandler };
};
export default useClickHandler;
const { clickHandler } = useClickHandler();
...
retrun (
onClick={isLocalOverlay ? (e) => clickHandler(e, localParticipant.identity) : undefined}
...
)
const { clickHandler } = useClickHandler();
...
retrun (
onClick={isRemoteOverlay ? (e) => clickHandler(e, trackReference.participant.identity) : undefined}
...
)