[design] #108 아이콘 리소스 변경 및 포즈 필터바 공용 컴포넌트 분리#112
Conversation
포즈 추천 화면에서 사용되던 `FilterBar`를 앱 전반에서 재사용할 수 있는 공용 `core:ui` 컴포넌트로 분리했습니다. 이에 따라 기존 `feature:pose` 모듈 내의 `FilterBar.kt`는 삭제되었고, 이를 대체하는 `PoseFilterBar.kt`를 추가하여 공용 `FilterBar`를 사용하도록 구조를 변경했습니다.
## 주요 변경 사항
- **아이콘 리소스 교체 및 정리:**
- 기존에 사용되던 `icon_heart_stroke`, `icon_scrap` 등 일부 아이콘을 삭제했습니다.
- `filled`(채워진)와 `stroked`(선) 스타일을 명확하게 구분하는 새로운 아이콘 리소스를 추가하고, 이를 각 기능에 적용했습니다.
- `icon_heart_filled`, `icon_heart_stroked`
- `icon_scrap_filled`, `icon_scrap_stroked`
- `icon_torch_on`, `icon_torch_off`
- **아이콘 이름 변경:**
- `icon_plus_primary.xml` -> `icon_plus.xml`
- `icon_repeat_recommendation.xml` -> `icon_repeat.xml`
- **아이콘 벡터 데이터 업데이트:**
- `icon_download.xml`, `icon_trash.xml` 등의 벡터 드로어블 코드를 stroke 기반으로 수정하여 명확성을 높였습니다.
- **UI 컴포넌트 수정:**
- 아이콘 변경에 따라 관련 UI 컴포넌트(`ArchiveMainTopBar`, `RandomPoseFloatingBar`, `PhotoDetailActionBar` 등)의 아이콘 리소스 경로와 `tint` 속성을 업데이트했습니다.
Walkthrough디자인 시스템 벡터 아이콘 다수(채움→획 변환, 기하 업데이트), 일부 아이콘 추가/삭제, Compose UI에서 아이콘 리소스·크기·색상 변경, FilterBar 삭제 및 PoseFilterBar 추가, PoseDetail에서 스크랩 변경 결과 발행 및 LocalResultEventBus 시그니처 변경이 포함됩니다. Changes
Sequence Diagram(s)mermaid Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
⚔️ Resolve merge conflicts (beta)
No actionable comments were generated in the recent review. 🎉 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@core/designsystem/src/main/res/drawable/icon_torch_on.xml`:
- Around line 1-15: Summary: The diagonal strike path
(android:pathData="M6.47,6.47L21.53,21.531") is currently in icon_torch_on.xml
while the non-struck version is in icon_torch_off.xml, so names and contents are
reversed. Fix: open icon_torch_on.xml and icon_torch_off.xml, and either swap
the file contents or move the diagonal strike <path> (the path with
android:pathData="M6.47,6.47L21.53,21.531") into icon_torch_off.xml and remove
it from icon_torch_on.xml so the "off" file contains the strike-through path and
"on" contains only the torch shape (the large path with android:pathData
starting "M11.648,25.213..."), then run a quick visual check in the app to
confirm icon semantics match filenames.
🧹 Nitpick comments (4)
core/designsystem/src/main/res/drawable/icon_bell.xml (1)
6-8:fillColor가 하드코딩되어 있어 테마 대응이 어려울 수 있습니다.이 아이콘은
fillColor="#74788B"가 직접 지정되어 있고,ArchiveMainTopBar.kt에서tint = Color.Unspecified로 사용됩니다. 반면 다른 아이콘들(icon_heart_filled,icon_torch_off등)은#ffffff로 설정하고 Compose 측tint로 색상을 제어하는 패턴을 따르고 있습니다.다크 모드 등 테마 변경 시 이 아이콘만 색상이 고정되어 대응이 안 될 수 있으므로, 다른 아이콘과 동일하게
#ffffff채우기 + Composetint제어 패턴으로 통일하는 것을 권장합니다.♻️ 제안: drawable에서 흰색 채우기 사용 + Compose에서 tint 적용
icon_bell.xml:- android:fillColor="#74788B"/> + android:fillColor="#ffffff"/>
ArchiveMainTopBar.kt(Line 91):- tint = Color.Unspecified, + tint = NekiTheme.colorScheme.gray500, // 또는 적절한 테마 색상feature/archive/impl/src/main/kotlin/com/neki/android/feature/archive/impl/main/component/ArchiveMainTopBar.kt (1)
88-92: Bell 아이콘의tint = Color.Unspecified사용이 테마 일관성을 깨뜨릴 수 있습니다.같은
Row내에서 플러스 아이콘은NekiTheme.colorScheme.primary400tint를 사용하지만, bell 아이콘은Color.Unspecified로 drawable에 하드코딩된#74788B색상에 의존합니다.icon_bell.xml리뷰에서 언급한 것과 같이, 테마 색상으로 통일하는 것을 권장합니다.core/designsystem/src/main/res/drawable/icon_repeat.xml (1)
1-5: 캔버스 크기가 다른 아이콘들과 다릅니다.이 PR의 다른 아이콘들은 28dp 캔버스를 사용하지만,
icon_repeat.xml은 24dp입니다. 의도된 것이라면 무시해도 되지만, 디자인 시스템 일관성을 위해 확인해 주세요.feature/pose/impl/src/main/java/com/neki/android/feature/pose/impl/main/component/PoseFilterBar.kt (1)
22-23: 하드코딩된 한국어 문자열에 대한 참고 사항.
"인원수"와"스크랩"문자열이 하드코딩되어 있습니다. 현재 한국어 전용 앱이라면 문제없지만, 향후 다국어 지원 시stringResource()를 사용하도록 변경이 필요합니다.
Ojongseok
left a comment
Ojongseok
left a comment
There was a problem hiding this comment.
음성으로 이야기했던 것 처럼 _filled / _stroke 형태로 suffix를 작성하기로 해 저는 _filled / _stroke로 진행을 했습니다. _filled와 반대되게 _stroked로 수정하는게 좋을까요?
| tint = if (isFavorite) { | ||
| NekiTheme.colorScheme.primary400 | ||
| } else { | ||
| NekiTheme.colorScheme.gray700 | ||
| }, |
There was a problem hiding this comment.
tint의 경우 한줄로 나타내는게 어떨까요?
tint = if (isFavorite) NekiTheme.colorScheme.primary400 else NekiTheme.colorScheme.gray700,
| imageVector = if (isFavorite) { | ||
| ImageVector.vectorResource(R.drawable.icon_heart) | ||
| ImageVector.vectorResource(R.drawable.icon_heart_filled) | ||
| } else { | ||
| ImageVector.vectorResource(R.drawable.icon_heart_stroke) | ||
| ImageVector.vectorResource(R.drawable.icon_heart_stroked) | ||
| }, |
There was a problem hiding this comment.
리소스 id만 분기해
imageVector = ImageVector.vectorResource(
if (isFavorite) R.drawable.icon_heart_filled else R.drawable.icon_heart_stroked
),
라인을 줄일 수 있을 것 같은데 어떠신가요?
| if (uiState.pose.isScrapped) R.drawable.icon_scrap_filled | ||
| else R.drawable.icon_scrap_stroked, | ||
| ), | ||
| contentDescription = null, | ||
| tint = NekiTheme.colorScheme.gray500, | ||
| tint = if (uiState.pose.isScrapped) NekiTheme.colorScheme.gray900 | ||
| else NekiTheme.colorScheme.gray500, |
| if (isScrapped) R.drawable.icon_scrap_filled | ||
| else R.drawable.icon_scrap_stroked, |
엇 형용사로 stroked 로 이해했었습니다..!! ed 가 붙는 게 나을 것 같아여
개인적이긴 한데 if else 라인을 한 줄로 줄여 코드를 줄이는 경우보단 개행하는 게 조금 더 좋더라구요, 엄청 짧은 라인이 아니면 거의 개행하는 편입니다..! |
넵, 그럼 stroke 형태의 icon의 경우 _stroked를 붙이도록 수정해서 PR을 다시 올리겠습니다-!
흐음.. 정말 취향차이의 영역인 것 같군요..ㅎㅎ.. 리소스 특성 상 이름이 길기는 하나 저같은 경우에는 크게 중요하지 않은 구문이다 보니 가로스크롤이 들어가더라도 한줄로 작성하거나 길어지는 경우 아래와 같이 작성하는 편입니다. 클형에게 여쭈어보니
라는 답변을 받았습니다. 클형님의 말씀대로 익성님이 작성하신 방법처럼 형태로 작성하시죠! |
대 클 코 |
2 participants
🔗 관련 이슈
📙 작업 설명
FilterBar를core/ui의 공용FilterBar컴포넌트를 사용하도록 리팩토링💬 추가 설명 or 리뷰 포인트 (선택)
Summary by CodeRabbit
새로운 기능
UI 개선
구성 변경
자산 정리