🔀 :: (#91) - 인앱 위젯 추가 페이지 퍼블리싱 #92
Conversation
Walkthrough이 풀 리퀘스트는 위젯 추가 기능을 위한 새로운 디자인 시스템 및 UI 구성 요소를 도입합니다. 주요 변경 사항은 아이콘, 벡터 드로어블, 내비게이션 경로, 그리고 위젯 추가 화면의 구현을 포함합니다. 새로운 모듈 간 통합을 통해 사용자가 설정 화면에서 위젯을 추가할 수 있는 기능을 제공합니다. Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (10)
core/designsystem/src/main/res/drawable/small_time_table_widget_preview.xml (1)
9-57: 시간표 위젯의 텍스트 가독성 개선을 제안합니다.현재 텍스트의 색상이 #000000(검정색)과 #3E3D3F(진한 회색)으로 설정되어 있습니다. 다크 모드에서의 가독성을 위해 다음과 같은 개선을 제안합니다.
- 색상값을 테마 속성으로 변경:
- android:fillColor="#000000" + android:fillColor="?attr/colorOnSurface"
- 다크 모드용 drawable 파일 생성:
<!-- core/designsystem/src/main/res/drawable-night/small_time_table_widget_preview.xml --> <vector> <!-- 동일한 패스 데이터에 다크 모드용 색상 적용 --> android:fillColor="@color/white" </vector>core/designsystem/src/main/res/drawable-night/small_time_table_widget_preview.xml (1)
9-57: 텍스트의 가독성과 색상 대비가 우수합니다.
- 숫자 텍스트(#84849A)와 일반 텍스트(#ffffff)의 색상 대비가 다크 모드에서 가독성을 보장합니다.
- 벡터 패스를 사용한 텍스트 구현은 폰트 리소스 의존성을 제거하여 좋은 접근입니다.
성능 최적화를 위해 다음 사항을 고려해보세요:
- 반복되는 색상값을 리소스로 추출
- 복잡한 패스 데이터 최적화
+<?xml version="1.0" encoding="utf-8"?> +<resources> + <color name="widget_background">#0F0F0F</color> + <color name="widget_number">#84849A</color> + <color name="widget_text">#ffffff</color> +</resources>feature/setting/src/main/java/khs/onmi/setting/screen/addwidget/AddWidgetScreen.kt (3)
25-29: [ko-KR] 위젯 목록 데이터 구조가 단순하고 명확합니다.
Triple을 사용하여 이미지를 포함한 3가지 정보를 효과적으로 관리하고 있습니다. 다만, 각 항목을 구조체나 데이터 클래스로 추상화하여 다른 화면에서도 재사용할 수 있도록 확장성을 고려해볼 수 있습니다.
37-43: [ko-KR] TopNavigationBar 구성에 대한 명확한 명명 개선 제안
현재 "위젯 추가"라는 타이틀이 분명하여 UI 의도를 잘 드러냅니다. 다만, 다국어 지원이 필요한 경우 문자열 리소스 분리를 고려하거나, 다른 화면과의 일관성 유지를 위해 리소스 시스템을 적극 활용해보시길 권장합니다.
46-61: [ko-KR] LazyColumn의 스크롤 목록 구성 및 여백 처리가 적절합니다.
Arrangement.spacedBy(8.dp)와PaddingValues(vertical = 24.dp)로 간격을 유지해 가독성이 높습니다.- 각 위젯 아이템을 개별 컴포저블로 추출하여 유지보수가 용이합니다.
- 클릭 이벤트의 추가 구현(
todo주석)은 향후 누락되지 않도록 주의가 필요합니다.이벤트 구현을 서포트할 필요가 있다면 알려주세요. 추가적인 샘플 코드를 제안해 드릴 수 있습니다.
core/designsystem/src/main/res/drawable/small_meal_widget_preview.xml (1)
9-35: 텍스트 경로의 최적화를 고려해보세요.현재 텍스트가 개별 path 요소로 정의되어 있습니다. 실제 텍스트를 사용하는 것이 더 유지보수하기 쉽고 접근성 측면에서도 좋을 수 있습니다.
다음과 같은 대안을 고려해보세요:
- <path - android:pathData="M13.18,12.32V13.16H12.05V19.85H13.18V20.7H11.21V12.32H13.18Z..." - android:fillColor="#3E3D3F"/> + <TextView + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:textColor="#3E3D3F" + android:text="@string/widget_preview_text"/>이렇게 변경하면:
- 텍스트 수정이 더 쉬워집니다
- 다국어 지원이 용이해집니다
- 접근성이 향상됩니다
feature/setting/src/main/java/khs/onmi/setting/component/addwidget/AddWidgetItem.kt (2)
35-43: [권장사항] ONMITheme 내부에서의 레이아웃 확장성 고려
테마 적용과 레이아웃 구성이 적절하게 조합되어 있습니다. 다만 향후 다양한 테마(폰트 사이즈, 접근성 옵션 등) 대응을 위해, 내부에 있는Column등의 컴포저블에서도Modifier파라미터를 외부에서 주입받도록 설계하면 확장성 측면에 이점이 있을 수 있습니다.
47-51: [참고사항] Shadow 색상값의 재사용 가능성
Color(0xFF2C2C2C)처럼 직접 지정한 컬러값은 ONMITheme 내에서 공용 컬러 리소스로 정의해두면 관리와 유지보수에 용이합니다.feature/setting/src/main/java/khs/onmi/setting/screen/SettingScreen.kt (1)
42-42: [검토필요] 새 파라미터(onAddWidgetClick)에 대한 문서화
onAddWidgetClick이 추가되어 위젯 추가 로직 제어가 가능해졌습니다. 그러나 코드만 보고서는 사용 의도가 직관적으로 드러나지 않을 수 있으므로 KDoc 혹은 함수 주석을 간단히 남겨 후속 유지보수를 돕는 것도 좋습니다.core/designsystem/src/main/res/drawable/combined_widget_preview.xml (1)
7-7: 경로 데이터에 대한 문서화가 필요합니다.복잡한 경로 데이터의 가독성을 위해 각 경로가 어떤 UI 요소를 나타내는지 주석으로 설명하는 것이 좋습니다.
다음과 같이 주석을 추가하는 것을 제안합니다:
+ <!-- Container with rounded corners --> <path android:pathData="M10.16,0L297.84,0A10.16..." android:fillColor="#ffffff"/> + <!-- Left panel background --> <path android:pathData="M10.16,6.78L147.39,6.78A3.39..." android:fillColor="#F8F8F8"/>Also applies to: 10-10, 13-13, 16-16, 19-19, 22-22, 25-25, 28-28, 31-31, 34-34, 37-37, 40-40, 43-43, 46-46, 49-49, 52-52, 55-55, 58-58, 61-61, 64-64, 67-67, 70-70, 73-73, 76-76, 79-79, 82-82
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (20)
core/designsystem/src/main/java/khs/onmi/core/designsystem/icon/Icon.kt(2 hunks)core/designsystem/src/main/res/drawable-night/combined_widget_preview.xml(1 hunks)core/designsystem/src/main/res/drawable-night/small_meal_widget_preview.xml(1 hunks)core/designsystem/src/main/res/drawable-night/small_time_table_widget_preview.xml(1 hunks)core/designsystem/src/main/res/drawable/combined_widget_preview.xml(1 hunks)core/designsystem/src/main/res/drawable/ic_widget_add.xml(1 hunks)core/designsystem/src/main/res/drawable/small_meal_widget_preview.xml(1 hunks)core/designsystem/src/main/res/drawable/small_time_table_widget_preview.xml(1 hunks)core/ui/src/main/java/khs/onmi/core/ui/ModifierExtension.kt(1 hunks)feature/setting/build.gradle.kts(1 hunks)feature/setting/src/main/java/khs/onmi/setting/component/addwidget/AddWidgetItem.kt(1 hunks)feature/setting/src/main/java/khs/onmi/setting/navigation/SettingNavigation.kt(2 hunks)feature/setting/src/main/java/khs/onmi/setting/screen/SettingRoute.kt(1 hunks)feature/setting/src/main/java/khs/onmi/setting/screen/SettingScreen.kt(3 hunks)feature/setting/src/main/java/khs/onmi/setting/screen/addwidget/AddWidgetRoute.kt(1 hunks)feature/setting/src/main/java/khs/onmi/setting/screen/addwidget/AddWidgetScreen.kt(1 hunks)feature/widget/src/main/res/drawable/combined_widget_preview.xml(0 hunks)feature/widget/src/main/res/drawable/small_meal_widget_preview.xml(0 hunks)feature/widget/src/main/res/drawable/small_time_table_widget_preview.xml(0 hunks)navigation/src/main/java/khs/onmi/navigation/ONMINavRoutes.kt(1 hunks)
💤 Files with no reviewable changes (3)
- feature/widget/src/main/res/drawable/small_meal_widget_preview.xml
- feature/widget/src/main/res/drawable/small_time_table_widget_preview.xml
- feature/widget/src/main/res/drawable/combined_widget_preview.xml
✅ Files skipped from review due to trivial changes (2)
- core/designsystem/src/main/res/drawable/ic_widget_add.xml
- core/designsystem/src/main/res/drawable-night/small_meal_widget_preview.xml
🔇 Additional comments (21)
core/designsystem/src/main/res/drawable/small_time_table_widget_preview.xml (2)
1-5: 벡터 드로어블의 크기가 적절합니다.
벡터 드로어블의 크기와 뷰포트가 1:1 비율로 설정되어 있어 왜곡 없이 깔끔하게 표시될 것입니다.
6-8: 배경 경로가 적절하게 정의되어 있습니다.
흰색 배경과 둥근 모서리(10.16dp radius)를 가진 사각형으로 위젯의 기본 형태를 잘 표현하고 있습니다.
core/designsystem/src/main/res/drawable-night/small_time_table_widget_preview.xml (1)
1-8: 벡터 드로어블의 크기와 배경이 적절합니다.
배경색(#0F0F0F)이 다크 모드에 적합하며, 144dp x 144dp의 크기는 작은 위젯에 적합합니다.
feature/setting/src/main/java/khs/onmi/setting/screen/addwidget/AddWidgetRoute.kt (1)
7-11: [ko-KR] 컴포저블 라우트의 네이밍과 역할이 명확합니다.
해당 함수는 네비게이션 전용으로 단순히 AddWidgetScreen을 호출하고 뒤로 가기 동작을 처리하고 있습니다. 현재 요구사항을 충족하고 있으며, 불필요한 로직 누락이나 복잡도가 없어 유지보수 측면에서도 좋습니다.
core/designsystem/src/main/res/drawable/small_meal_widget_preview.xml (3)
1-5: 벡터 드로어블의 크기가 적절합니다.
144dp x 144dp의 크기는 위젯 미리보기에 적합하며, viewportWidth와 viewportHeight가 실제 크기와 일치하여 왜곡 없이 표시될 것입니다.
6-8: 배경 경로가 적절히 정의되어 있습니다.
흰색 배경과 둥근 모서리(10.16dp 반경)를 가진 사각형으로, 위젯의 기본 컨테이너로 적합합니다.
1-36: 다크 모드 지원을 확인하세요.
PR 목적에 따르면 다크 모드도 지원한다고 되어있습니다. drawable-night 디렉토리에 대응되는 리소스가 있는지 확인해주세요.
✅ Verification successful
다크 모드 리소스가 적절히 구현되어 있습니다.
다크 모드용 리소스가 drawable-night 디렉토리에 존재하며, 다음과 같이 적절한 색상 변경이 이루어졌습니다:
- 배경색이
#ffffff에서#0F0F0F로 변경 - 텍스트 색상이
#000000에서#ffffff로 변경 - 강조 색상(
#FF5959)은 동일하게 유지 - 헤더 텍스트 색상이
#3E3D3F에서#84849A로 변경
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check if dark mode resource exists
fd "small_meal_widget_preview.xml" "core/designsystem/src/main/res/drawable-night"
Length of output: 156
Script:
#!/bin/bash
# Check the content of dark mode resource
cat core/designsystem/src/main/res/drawable-night/small_meal_widget_preview.xml
Length of output: 12236
navigation/src/main/java/khs/onmi/navigation/ONMINavRoutes.kt (1)
17-17: 새로운 라우트 상수 추가를 확인했습니다.
해당 상수는 기존 구조와 충돌 없이 깔끔하게 확장 가능한 형태로 보입니다. 추후 이 상수를 사용하는 모든 경로에서 오탈자나 불필요한 중복이 없는지 확인해 주세요.
core/ui/src/main/java/khs/onmi/core/ui/ModifierExtension.kt (2)
1-10: 기본 패키지와 import 체계가 정상적으로 구성되었습니다.
Jetpack Compose 관련 함수 호출과 사용 방식이 문제 없이 연계되어 보입니다.
11-21: 클릭 기능 확장 함수 구현이 직관적이고 재사용성이 높습니다.
composed를 통해 필요한 시점에 적절히 리콤포지션되는 구조가 잘 잡혀 있습니다.rememberRipple과MutableInteractionSource활용으로, 기본적인 Ripple 효과가 상황에 맞게 올바르게 동작해 보입니다.
추가로, color 파라미터가Color.Unspecified일 때 시각적으로 어떻게 표현될지 고려해 보시는 것도 좋겠습니다.
feature/setting/src/main/java/khs/onmi/setting/navigation/SettingNavigation.kt (2)
9-9: AddWidgetRoute import 확인
새로 추가된 AddWidgetRoute를 정상적으로 import하고 있으며, 파일 구조상 문제 없어 보입니다.
25-32: 새로운 AddWidget 경로를 Composable로 정의
composable(...)내부에서AddWidgetRoute를 명확히 라우팅하므로 이후 유지보수가 용이해 보입니다.- 네이밍 규칙과 라우트 구조가 일관성을 유지하고 있습니다.
feature/setting/src/main/java/khs/onmi/setting/screen/SettingRoute.kt (1)
54-54: 새로운 onAddWidgetClick 인자를 추가하여 네비게이션을 확장했습니다.
navController.navigate(ONMINavRoutes.Setting.ADD_WIDGET)를 통해 바로 위젯 추가 페이지로 이동하도록 구현된 점이 직관적입니다.- 기존 함수 호출부와도 충돌을 일으키지 않는 것으로 보입니다.
feature/setting/src/main/java/khs/onmi/setting/component/addwidget/AddWidgetItem.kt (1)
71-80: [확인완료] 미리보기 설정이 잘 되어 있습니다
프리뷰 함수가 실제 UI를 간단히 확인 또는 시연하기에 좋습니다. 추가적인 예시(다른 사이즈, 색상)도 함께 제공하면 디자이너나 QA가 더욱 쉽게 검토할 수 있습니다.
core/designsystem/src/main/java/khs/onmi/core/designsystem/icon/Icon.kt (1)
196-207: [좋은추가] 새 아이콘 함수의 일관성
WidgetAddIcon이 다른 아이콘들과 동일한 시그니처와 사용 방식을 유지해 UI 일관성이 좋습니다.
feature/setting/src/main/java/khs/onmi/setting/screen/SettingScreen.kt (1)
105-110: [확인완료] "위젯 추가" 항목 추가
새로운 SettingItemsData가 UI 목록에 잘 연결되어, onAddWidgetClick 콜백으로 이동 가능성이 확장되었습니다. 적절한 아이콘(WidgetAddIcon)과 텍스트가 적용되어 사용자에게 직관적인 인터랙션을 제공합니다.
feature/setting/build.gradle.kts (1)
14-14: [검토완료] :core:ui 종속성 추가
implementation(project(":core:ui")) 추가로 인해 UI 관련 기능(확장 함수 등)을 사용할 수 있게 되어, 코드 가독성과 유지보수에 도움이 됩니다.
core/designsystem/src/main/res/drawable/combined_widget_preview.xml (2)
1-5: 벡터 드로어블의 크기가 적절합니다.
위젯 미리보기를 위한 308x144dp 크기와 뷰포트 설정이 적절합니다.
8-8: 색상 대비가 접근성 기준을 충족합니다.
- 배경색과 텍스트 색상 간의 대비가 적절합니다.
- 강조색(#FF5959)의 사용이 적절합니다.
Also applies to: 11-11, 14-14, 20-20, 23-23, 26-26, 29-29, 32-32, 35-35, 38-38, 41-41, 44-44, 47-47, 50-50, 53-53, 56-56, 59-59, 62-62, 65-65, 68-68, 71-71, 74-74, 77-77, 80-80, 83-83
core/designsystem/src/main/res/drawable-night/combined_widget_preview.xml (2)
8-8: 다크 모드 색상이 적절하게 구현되었습니다.
- 다크 모드에 적합한 배경색을 사용했습니다.
- 텍스트 가독성을 위한 색상 대비가 잘 유지되었습니다.
- 강조색(#FF5959)이 라이트/다크 모드에서 일관되게 사용되었습니다.
Also applies to: 11-11, 14-14, 20-20, 23-23, 26-26, 29-29, 32-32, 35-35, 38-38, 41-41, 44-44, 47-47, 50-50, 53-53, 56-56, 59-59, 62-62, 65-65, 68-68, 71-71, 74-74, 77-77, 80-80, 83-83
1-93: 라이트/다크 모드 간의 일관성이 잘 유지되었습니다.
- 두 테마 간에 동일한 크기와 경로 데이터를 사용하여 일관된 레이아웃을 제공합니다.
- 색상만 테마에 맞게 적절히 변경되었습니다.
💡 개요
📃 작업내용
라이트모드
다크모드
Summary by CodeRabbit
새로운 기능
버그 수정
스타일
기타