로딩 UI 추가

[DreamPaste]

✨ 작업 내용

먼저, classnames라는 라이브러리를 추가했습니다.(클래스 이름을 쉽게 결합하는 라이브러리)

두 가지 재사용 가능한 UI 컴포넌트를 추가했습니다:

2025-06-10.5.55.37.mov

1. GradientImage

   • 이미지 로딩 전 그라디언트 애니메이션 플레이스홀더 표시
   • 이미지가 로드되면 부드럽게 페이드인 전환

2. LoadingLabel

   • "로딩 중…" 텍스트에 캐릭터별 깜빡이는 애니메이션
   • 로딩 완료 시 부드럽게 실제 텍스트로 전환

---

🖼 GradientImage

• img 태그 위에 애니메이션 그라디언트 배경 제공
• 로딩 완료 시 ::before 제거 + 이미지 fade-in
• onLoaded 콜백 지원

사용 예시:

<GradientImage
  src={url}
  alt="프로필"
  className="avatar"
  onLoaded={handleLoad}
/>

---

⏳ LoadingLabel

• 로딩 중에는 "텍스트 애니메이션"
• 완료되면 지정된 텍스트로 전환 (opacity 기반)

사용 예시:

<LoadingLabel
  loading={loading}
  loadingText="이미지 불러오는 중..."
  loadedText="프로필 이미지 선택"
  className="label"
/>

---

스켈레톤 컴포넌트 추가

• 로딩시 보여줄 수 있는 스켈레톤 컴포넌트를 추가했습니다.

🔗 관련 이슈

Fixes #99

[vercel]

@DreamPaste is attempting to deploy a commit to the Chiyoung Kim's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
team2-rolling-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 10, 2025 10:25am

[Chiman2937]

수고하셨습니다!