오늘의 공부

• msw는 미리 interface 맞춰볼 때 쓰면 좋다.

• id를 바탕으로 단일 객체를 response로 받는 api에서 여러 id로 된 객체 배열을 얻고 싶을 때 react query의 useQueries를 쓰면 된다.

문제점

개별적으로 로딩이 걸려서 전체 페이지 로딩을 줄 수가 없다.

해결책

모든 요소의 로딩이 끝났는지 확인하면 된다.
Array.some 을 사용한다.

click 과 mousedown 의 차이

목적
모달 외 영역을 누르면 모달 닫기

실제 상황
모달과 헤더가 겹쳐져 있는 상태에서 모달을 open하려고 하니 모달 외의 영역이라 계속 닫히는 현상

문제점
click 이벤트는 마우스를 눌렀다가 뗄 때 발생

export const useClickOutside = (
  ref: RefObject<HTMLElement>,
  callback: () => void,
) => {
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      e.stopPropagation();
      if (ref.current && !ref.current.contains(e.target as Node)) {
        callback();
      }
    };

    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [ref, callback]);
};

useClickOutside(regionModalRef, () => {
  setIsRegionModalOpen(false);
});

<StyledHeaderButton onClick={() => setIsRegionModalOpen(true)}>
  <StyledText>지역으로 찾기</StyledText>
  <StyledSearchContainer>
    <StyledSearchIcon />
  </StyledSearchContainer>
</StyledHeaderButton>