Task TODOLIST
✨ 개발 내용
- 모달 컴포넌트 전체에 적용했던 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);
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;
- 반복되는 로직을 유틸함수로 만들어 재구성
const getPlayerJob = (role: Role, playerId: string) => {
const jobNameList = Object.keys(role);
const PlayerJob = jobNameList.find((job) => {
const jobPlayerList = role[job];
if (!jobPlayerList) return null;
const isPlayerJob = jobPlayerList.find((jobId: string) => playerId === jobId);
if (isPlayerJob) return job;
});
return PlayerJob;
};
export default getPlayerJob;