TIL 99. 2024-05-22

Task TODOLIST

• 최후의 투표 모달 UI와 socket Event연동
• 승리 모달 UI와 socket Event연동
• Refactoring

✨ 개발 내용

기존) 동일 로직을 각각의 컴포넌트에 사용
현재) 커스텀훅으로 변경하여 가독성을 높였다.

// 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;

LocalParticipant.tsx

const { clickHandler } = useClickHandler();

   ...

retrun (
onClick={isLocalOverlay ? (e) => clickHandler(e, localParticipant.identity) : undefined}
 ...
)

RemoteParticipantTile.tsx

const { clickHandler } = useClickHandler();

   ...

retrun (
onClick={isRemoteOverlay ? (e) => clickHandler(e, trackReference.participant.identity) : undefined}
 ...
)

📚 레퍼런스 (또는 새로 알게 된 내용) 혹은 궁금한 사항들

커스텀훅과 유틸함수의 차이