TIL 97. 2024-05-20

Task TODOLIST

• 찬/반 투표 기능
• 투표 결과값 적용(UI 미적용)
• 투표, 마피아, 경찰, 의사 시간 등, 시간에 따른 특정 player에게만 클릭 이벤트 활성화
• 직업 능력별 이벤트 핸들러 구성

✨ 개발 내용

• 모달 컴포넌트 전체에 적용했던 ProgressBar의 타이머 부분을 별도의 컴포넌트로 분리하여 불필요한 리렌더링 방지

import { useCountDown } from "@/hooks/useCountDown";
import { useCheckModalIsOpen, useModalActions, useModalIsOpen, useModalTimer } from "@/store/show-modal-store";
import S from "@/style/modal/modal.module.css";
import { useEffect, useState } from "react";


const ModalProgress = () => {
  const isModal = useModalIsOpen();
  const { setIsOpen} = useModalActions();
  const timer = useModalTimer();
  const [count, setCount] = useState(timer * 10);


  //NOTE - 타이머 기능
  useCountDown(() => setCount((prevCount) => prevCount - 1), 100, isCheckModal);


  // 모달창 종료
  useEffect(() => {
    if (count === 0 && isModal) {
      setCheckIsOpen(false);

  }, [count]);

  return <progress className={S.progress} value={(timer * 10 - count) * (100 / (timer * 10))} max={100}></progress>;
};

export default ModalProgress;

- 반복되는 로직을 유틸함수로 만들어 재구성

// 해당 player의 직업 찾기
const getPlayerJob = (role: Role, playerId: string) => {
  //NOTE - role 구조: {jobName: string, userList: []}
  const jobNameList = Object.keys(role);

  //NOTE - 해당 player의 직업
  const PlayerJob = jobNameList.find((job) => {
    //NOTE - 직업별 해당 userId[]
    const jobPlayerList = role[job];

    // NOTE - 직업이 존재하지 않을 경우(경찰, 의사)
    if (!jobPlayerList) return null;

    const isPlayerJob = jobPlayerList.find((jobId: string) => playerId === jobId);

    if (isPlayerJob) return job;
  });

  return PlayerJob;
};

export default getPlayerJob;

• forEach, find, map에 대해 다시 공부
  https://velog.io/@leejungoo1396/for-forEach-map-%EC%B0%A8%EC%9D%B4
  https://velog.io/@leejungoo1396/%EC%BD%9C%EB%B0%B1%ED%95%A8%EC%88%98.-Map-Filter