본 컴포넌트는 사용자에게 작업의 진행 상태를 시각적으로 전달하며, 특히 useProgress 커스텀 훅과 결합하여 실제 수치를 알 수 없는 API 호출 환경에서도 자연스러운 가짜 진행률(Fake Progress) 애니메이션을 제공하도록 설계되었다.

✅ 컴포넌트 구조

파일명	유형	주요 역할
`useProgress.ts`	Hook	로딩 상태(`isLoading`)에 따라 가변적인 속도로 진행률(0~100)을 계산하는 로직
`Progress.tsx`	Client	전달받은 `value`를 바탕으로 progress를 렌더링
`AuthProgress`	Client	`useProgress`를 내장하여, 로딩 상태만 주입하면 자동으로 로딩 바를 노출

useProgress 훅은 60%에서 한 번, 90%에서 또 한 번 속도를 늦춰 응답이 늦어질 때 사용자가 시스템이 멈춘 것으로 오해하지 않도록 구현했다.
⚠️ 주의: AutoProgress는 fixed 속성을 기본으로 가집니다. 특정 영역 내부에서만 사용하고 싶다면
- 스타일 커스텀 사용
- 혹은 API 호출 로딩 처리 (useProgress 훅 활용) 방식으로 사용해야 한다.

✅ ProgressProps (공통 속성)

모든 진행률 컴포넌트는 아래의 타입을 기반으로 지원한다.

Progress

Props	설명
`value: number`	현재 진행률 값(0~100)
`className?: string`	커스텀 스타일 적용
`indicatorClassName?: string`	진행 바(Indrcator) 스타일 적용

AutoProgress

Props	설명
`isLoading: boolean`	로딩 상태 여부(활성화 시 자동으로 0%부터 올라감)
`className?: string`	커스텀 스타일 적용

✅ 사용 예시

1. AutoProgress 사용 (전역/페이지 로딩 바)

별도의 수치 관리 없이 로딩 상태값만 주입하여 페이지 최상단에 고정된 로딩 바를 구현할 때 권장합니다. 로딩이 완료되면 자동으로 100%를 채운 뒤 사라진다.

import { AutoProgress } from "@/src/shared/ui/progress";

export default function Page({ isLoading }: { isLoading: boolean }) {
  return (
    <>
      <AutoProgress isLoading={isLoading} className="bg-blue-500 h-1" />
      <main>콘텐츠 영역</main>
    </>
  );
}

2. API 호출 로딩 처리 (useProgress 훅 활용)

특정 섹션 내에서 API 호출 상태를 시각화할 때 사용한다.