Feat: 로딩 오버레이 컴포넌트 app에 공통 적용

[summerDev96]

📦 Pull Request

📝 요약(Summary)

• 로딩 오버레이 컴포넌트 생성 후 app에 로딩 있는 경우 적용되게 하였습니다.

💬 공유사항 to 리뷰어

• app 파일 코드가 성주님 코드와 다른 것 같아 머지 시 확인요청드립니다!

로딩 오버레이 컴포넌트 동작

• 로딩 중인지 확인(isLoading) 후 로딩을 보여줍니다.
• 로딩이 너무 짧은 경우 깜빡임처럼 보여서, 최소 0.2초 이상 로딩을 유지하게 setTimeout을 사용하였습니다.
• showLoading상태일 때 로딩바가 보여집니다.

export function LoadingOverlay({ className }: LoadingOverlayProps) {
  const [showLoading, setShowLoading] = useState(false);
  const isFetching = useIsFetching();
  const isMutating = useIsMutating();

  // 로딩중인지 확인: useQuery, useMutation으로 데이터 받아오는 중인지 확인
  const isLoading = isFetching > 0 || isMutating > 0;

  useEffect(() => {
    let timeout: ReturnType<typeof setTimeout> | null = null;

    // 로딩중인 경우 로딩 보여줌
    if (isLoading) {
      setShowLoading(true);
      return;
    }

    // 로딩 보여주고 있을 때, 최소 0.2초 이상 보여줌
    if (showLoading) {
      timeout = setTimeout(() => {
        setShowLoading(false);
      }, MIN_DELAY);
    }

    return () => {
      if (timeout) clearTimeout(timeout);
    };
  }, [isLoading, showLoading]);

  if (!showLoading) return null;

  return (
    <Overlay className={className}>
      <Loading size={'lg'} />
    </Overlay>
  );
}

🗂️ 관련 이슈

📸 스크린샷

KakaoTalk_Recording_20250730_172552.mp4

✅ 체크리스트

• 빌드 및 테스트 통과
• ESLint/Prettier 검사 통과

[vercel]

@summerDev96 is attempting to deploy a commit to the 626-ju's projects Team on Vercel.

A member of the Team first needs to authorize it.