Skip to content

Comments

[PC-1364] Feature: StoreMain 스켈레톤 UI 및 Shimmer 시스템 구현#246

Merged
hsw1920 merged 6 commits intofeature/PC-1340from
feature/PC-1364
Nov 13, 2025
Merged

[PC-1364] Feature: StoreMain 스켈레톤 UI 및 Shimmer 시스템 구현#246
hsw1920 merged 6 commits intofeature/PC-1340from
feature/PC-1364

Conversation

@hsw1920
Copy link
Collaborator

@hsw1920 hsw1920 commented Nov 13, 2025

🏷️ 티켓 번호

PC-1364

👷🏼‍♂️ 변경 사항

1. PCShimmer 시스템 구현

  • LinearGradient 기반 커스텀 Shimmer 애니메이션

    • PCShimmer.swift: ViewModifier로 구현하여 어떤 View에도 적용 가능
    • ShimmerStyle.swift: 4가지 스타일 제공 (light, dark, subtle, custom)
    • View+PCShimmer.swift: .pcShimmer(style:) 편의 API 제공
  • SwiftUI-Shimmer 써드파티 라이브러리 대신 커스텀 구현한 이유

    • Preview는 작동하지만 실제 앱/시뮬레이터에서 그래디언트 애니메이션이 미표시되는 알 수 없는 이슈가 존재
    • 단순한 SwiftUI 기본 기능(LinearGradient + State + animation)으로 구현

2. StoreMain 스켈레톤 UI 구현

  • StoreMainSkeleton.swift (신규)

    • PromotionProductCardSkeleton: 프로모션 상품 카드 스켈레톤
    • NormalProductCardSkeleton: 일반 상품 카드 스켈레톤
  • PCPuzzleCount.swift

    • skeleton 스타일에 pcShimmer 애니메이션 적용
    • light 스타일에 chevronLeft 아이콘 추가 (일관성 유지)
  • StoreNavigationBar.swift

    • viewState 기반 분기 처리 (loading/success/failure)
    • loading 시 PCPuzzleCount(style: .skeleton(.light)) 표시
  • StoreMainView.swift

    • loading 상태에 StoreMainSkeletonView 표시
    • LazyVStack → VStack으로 변경하여 스켈레톤을 즉시 렌더링

3. Shimmer 관련 문서화

  • DocC 스타일 주석

    • Shimmer 관련 모든 public API에 사용 예시 포함
    • 각 파라미터와 동작 방식 상세 설명
  • Xcode Preview 제공

    • ShimmerStyle: 전체 스타일 비교 Preview

💬 참고 사항

📸 스크린샷(Optional)

ShimmerStyle 비교 영상 첨부

  • ShimmerStyle.swift에 제공되는 프리뷰입니다.
Nov-13-2025.11-19-31.mp4

StoreMain 진입 시

shimmer.mp4

- DesignSystem에 커스텀 shimmer 효과 구현
- ShimmerStyle enum으로 다양한 스타일 지원 (light, dark, subtle, custom)
- View+PCShimmer extension으로 .pcShimmer(style:) 퍼블릭 modifier 제공
- PCShimmer.swift에 DocC 스타일 주석 추가하여 QuickHelp 제공
- View+PCShimmer.swift에 함수 설명 및 사용 예시 추가
- ShimmerStyle.swift에 각 case별 상세 설명 추가
- 각 ShimmerStyle을 비교할 수 있는 Preview를 제공
- PCPuzzleCount skeleton 스타일에 pcShimmer 애니메이션 적용
- StoreMainSkeleton 컴포넌트 추가 (프로모션/일반 상품 카드)
- StoreNavigationBar에 viewState별 분기 처리 (loading/success/failure)
- StoreMainView loading 상태에 스켈레톤 UI 표시
@hsw1920 hsw1920 self-assigned this Nov 13, 2025
@hsw1920 hsw1920 added the ✨ feature 새로운 기능 label Nov 13, 2025
@hsw1920 hsw1920 merged commit d7a899d into feature/PC-1340 Nov 13, 2025
@hsw1920 hsw1920 deleted the feature/PC-1364 branch January 3, 2026 08:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✨ feature 새로운 기능

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant