🥞 오늘 한 일

• 최종 프로젝트
  • 주소 모달 바깥 클릭 시 모달 없애기
  • 공구 가격 천만원 이하로 유효성 검사 제작
  • 체크박스 label에 cursor pointer 적용
  • 공구템 작성 시 기본값 삭제
  • 공구 신청 모달 날짜 현재 날짜로 설정
  • 공구 신청 시 쓰로틀링 적용

최종 프로젝트

공구 신청 시 쓰로틀링 적용

// GroupApplyModal.tsx
  const throttleRef = useRef(false);

  const addGroupApplyHandler = useCallback(async () => {
    if (throttleRef.current) return;
    throttleRef.current = true;

    setTimeout(() => {
      throttleRef.current = false;
    }, 5000);
  }, [
    id,
    name,
    phone,
    address,
    detailAddress,
    checkBox,
    user,
    addMutation,
    addAlarm,
  ]);

먼저 throttleRef라는 ref를 제작하고, addGroupApplyHandler 함수를 useCallback으로 변경한 후 throttleRef.current가 true일 경우 바로 return하여 코드가 실행되지 않게 했다. false일 경우에는 true로 변경시킨 후 모든 코드를 실행하고, setTimeout으로 5초 후에 다시 throttleRef.current를 false로 적용했다.

🍳 내일 목표

• 최종 프로젝트
  • 진짜 찐 마무리...