Progressbar 컴포넌트

[eunsoA]

#️⃣ 연관된 이슈

ex) #이슈번호, #이슈번호

#99

📝 훅 간단 사용 설명

어떤 훅인지 간단하게 설명해주세요! (docs 내용 기반)

• 진행률을 0-100 범위의 숫자로 받아서 시각적으로 표시
• 커스터마이징 가능한 스타일 옵션 (너비, 높이, 색상, 모서리 둥글기)
• React.memo로 최적화되어 불필요한 리렌더링 방지
• useProgress 훅과 연동하여 자동 애니메이션 지원

기본 사용법

import { Progressbar } from '@hookdle/components';
import { useProgress } from '@hookdle/hooks';

function BasicExample() {
  const { progress } = useProgress();
  return <Progressbar progress={progress} />;
}

커스텀 스타일링

<Progressbar
  progress={progress}
  width={300}
  height={20}
  backgroundColor="#f0f0f0"
  barColor="#007bff"
  borderRadius={5}
/>

스크린샷 (선택)

[hoyyChoi]

이름좀 변경해주세요!
은소인터벌
updateProgress