[Feature]: 폴더 스켈레톤 로딩 UI와 Compose 마스크 구현#199
Conversation
- `skeleton` Modifier의 렌더링 방식을 `BlendMode.SrcIn` 기반으로 변경하여 실제 콘텐츠가 그려진 영역에만 효과가 적용되도록 개선 - `graphicsLayer`를 통해 `CompositingStrategy.Offscreen`을 설정하여 BlendMode가 다른 컴포넌트에 영향을 주지 않도록 격리 - `drawWithCache` 내부 로직을 수정하여 `drawContent()` 호출 후 그라데이션을 합성하는 구조로 변경 - 불필요한 프리뷰 컴포저블 및 미사용 Import 제거 - 애니메이션 라벨 명칭 변경 및 코드 포맷팅 정리
- 로딩 상태를 시각적으로 표현하기 위한 `SkeletonFolderItem` 컴포저블 신규 생성 - `BoxWithConstraints`와 스케일링 헬퍼 함수를 사용하여 컴포넌트 크기에 대응하는 유동적인 레이아웃 구현 - 세 개의 `Surface` 레이어에 회전값과 `skeleton` 모디파이어를 적용하여 겹쳐진 폴더 형태 구현 - 하단 마스크 이미지(`folder_mask`) 적용 및 디자인 확인을 위한 `SkeletonFolderItemPreview` 추가
- 로딩 상태를 표시하기 위한 `LoadingFoldersGrid` 컴포저블 신규 생성 - `SkeletonFolderItem`을 2열 그리드(`LazyVerticalGrid`) 형식으로 배치하여 스켈레톤 UI 구현 - `BoxWithConstraints`를 활용하여 화면 너비에 따른 아이템 간의 동적 가로 간격 계산 로직 적용 - 컴포넌트 확인을 위한 `LoadingFoldersGridPreview` 추가
- `SkeletonFolderItem` 컴포저블의 역할과 동작 방식, 매개변수에 대한 KDoc 추가 - 내부 크기 변환 헬퍼 함수 `s(dp: Dp)`에 대한 설명 주석 추가 - 컴포넌트 내부의 배경면(Surface) 및 폴더 마스크(Image) 레이어에 대한 설명 주석 추가
- `skeleton` 확장 함수에 동작 원리, 파라미터 설명 및 사용 예시를 포함한 KDoc 추가 - `CompositingStrategy.Offscreen` 및 `BlendMode.SrcIn` 사용 이유에 대한 내부 주석 구체화 - 주석 내 '컴포넌트' 용어를 '컴포저블'로 변경하여 Compose 용어 일관성 유지
- `elevation`, `shape`, `clip`, `ambientColor`, `spotColor` 속성을 포함하는 `ShadowStyle` 데이터 클래스 정의 - `ShadowStyle` 객체를 매개변수로 받아 그림자 효과를 적용하는 `Modifier.shadow` 확장 함수 구현
|
Caution The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased. |
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
1 participant
📝 설명
LoadingFoldersGrid를 추가했습니다.SkeletonFolderItem을 Figma 기준 비율에 맞춘 카드 배경, 하단 폴더 마스크, 원형 배지와 텍스트 pill 형태의 정적 회색 placeholder로 구성했습니다.GenericShape기반의 ComposeFolderMask를 추가하고, 기본 테마 스타일과 Preview를 제공하도록 변경했습니다.CategoryColorStyle팔레트와 세로 그라데이션을 재사용하도록 정리했습니다.Modifier.skeleton이 실제 콘텐츠의 alpha 영역에만 shimmer를 합성하도록CompositingStrategy.Offscreen과BlendMode.SrcIn동작을 보강하고 관련 KDoc을 실제 구현에 맞게 정정했습니다.ShadowStyle확장과 링크 로딩 그리드 진입점 선언을 포함합니다.✔️ PR 유형
어떤 변경 사항이 있나요?
📎 관련 이슈 번호
없음
🧪 검증
git diff --check.\gradlew.bat :feature:file:compileDebugKotlin --console=plain