Feature/#129 : 마이페이지 UI 변경작업 및 설정 페이지 UI 변경 #130
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Walkthrough이번 변경 사항은 마이페이지(프로필) 화면의 신규 개발 및 기존 설정(Setting) 화면의 구조 개편에 초점을 맞춥니다. 프로필 화면의 UI, 상태, 인텐트, 사이드 이펙트, ViewModel, 컴포넌트, 내비게이션이 새롭게 추가되었으며, Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ProfileScreen
participant ProfileViewModel
participant GetUserProfileUseCase
User->>ProfileScreen: 화면 진입
ProfileScreen->>ProfileViewModel: OnEntryScreen 인텐트 전송
ProfileViewModel->>GetUserProfileUseCase: getUserProfile() 호출
GetUserProfileUseCase-->>ProfileViewModel: 유저 정보 반환
ProfileViewModel-->>ProfileScreen: 상태 업데이트 (프로필 정보 반영)
User->>ProfileScreen: 설정 버튼 클릭
ProfileScreen->>ProfileViewModel: OnClickSettings 인텐트 전송
ProfileViewModel-->>ProfileScreen: NavigateToSetting 사이드이펙트 전송
ProfileScreen->>YappNavHost: onNavigateToSettings 콜백 호출
YappNavHost->>Navigator: navigateSettingScreen() 호출
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🪧 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 (
|
|
@CodeRabbit review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 20
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (14)
app/src/main/java/com/yapp/app/official/navigation/YappNavHost.kt(1 hunks)core/data-api/src/main/java/com/yapp/dataapi/OperationsRepository.kt(1 hunks)core/data/src/main/java/com/yapp/core/data/data/repository/OperationsRepositoryImpl.kt(1 hunks)feature/home/src/main/java/com/yapp/feature/home/setting/SettingContract.kt(1 hunks)feature/home/src/main/java/com/yapp/feature/home/setting/SettingScreen.kt(1 hunks)feature/home/src/main/java/com/yapp/feature/home/setting/SettingViewModel.kt(1 hunks)feature/home/src/main/res/values/strings.xml(1 hunks)feature/profile/src/main/java/com/yapp/feature/profile/ProfileContract.kt(1 hunks)feature/profile/src/main/java/com/yapp/feature/profile/ProfileScreen.kt(1 hunks)feature/profile/src/main/java/com/yapp/feature/profile/ProfileViewModel.kt(1 hunks)feature/profile/src/main/java/com/yapp/feature/profile/component/ProfileInformationSection.kt(1 hunks)feature/profile/src/main/java/com/yapp/feature/profile/component/ProfileSectionItem.kt(1 hunks)feature/profile/src/main/java/com/yapp/feature/profile/component/ProfileTopBarSection.kt(1 hunks)feature/profile/src/main/java/com/yapp/feature/profile/navigation/ProfileNavigation.kt(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (6)
core/data/src/main/java/com/yapp/core/data/data/repository/OperationsRepositoryImpl.kt (1)
core/data-api/src/main/java/com/yapp/dataapi/OperationsRepository.kt (1)
getAppVersion(14-14)
app/src/main/java/com/yapp/app/official/navigation/YappNavHost.kt (1)
feature/profile/src/main/java/com/yapp/feature/profile/navigation/ProfileNavigation.kt (1)
profileNavGraph(17-25)
feature/profile/src/main/java/com/yapp/feature/profile/navigation/ProfileNavigation.kt (1)
feature/profile/src/main/java/com/yapp/feature/profile/ProfileScreen.kt (1)
ProfileRoute(32-86)
feature/profile/src/main/java/com/yapp/feature/profile/component/ProfileSectionItem.kt (1)
core/designsystem/src/main/java/com/yapp/core/designsystem/theme/Theme.kt (1)
YappTheme(9-24)
feature/profile/src/main/java/com/yapp/feature/profile/ProfileScreen.kt (7)
core/designsystem/src/main/java/com/yapp/core/designsystem/component/alert/YappAlertDialog.kt (1)
YappAlertDialog(23-91)core/ui/src/main/java/com/yapp/core/ui/component/YappBackground.kt (1)
YappBackground(10-22)feature/profile/src/main/java/com/yapp/feature/profile/component/ProfileTopBarSection.kt (1)
ProfileTopBarSection(15-31)feature/profile/src/main/java/com/yapp/feature/profile/component/ProfileInformationSection.kt (1)
ProfileInformationSection(18-40)feature/profile/src/main/java/com/yapp/feature/profile/component/ProfileSectionItem.kt (1)
ProfileSectionItem(20-40)core/designsystem/src/main/java/com/yapp/core/designsystem/component/button/outlined/OutlinedSecondaryButton.kt (1)
YappOutlinedSecondaryButtonLarge(46-75)core/designsystem/src/main/java/com/yapp/core/designsystem/theme/Theme.kt (1)
YappTheme(9-24)
feature/profile/src/main/java/com/yapp/feature/profile/component/ProfileInformationSection.kt (1)
core/designsystem/src/main/java/com/yapp/core/designsystem/component/chip/Chip.kt (1)
YappChipLarge(57-76)
🔇 Additional comments (18)
core/data-api/src/main/java/com/yapp/dataapi/OperationsRepository.kt (1)
14-15: 앱 버전 정보를 제공하는 메서드 추가 적절합니다.인터페이스에 앱 버전을 가져오는 메서드를 추가한 것은 설정 화면에서 앱 버전을 표시하기 위한 요구사항에 적절한 접근 방식입니다.
core/data/src/main/java/com/yapp/core/data/data/repository/OperationsRepositoryImpl.kt (1)
70-70: 기존 코드 리팩토링 적절합니다.
isForceUpdateRequired()메서드에서 새로 추가된getAppVersion()메서드를 사용하도록 수정한 것은 코드 중복을 줄이고 일관성을 유지하는 좋은 접근 방식입니다.feature/home/src/main/res/values/strings.xml (1)
8-8: 앱 버전 문자열 리소스 추가 적절합니다.설정 화면에 앱 버전을 표시하기 위한 문자열 리소스를 추가한 것은 적절합니다. PR 설명에 따르면 마이페이지 및 설정 페이지 UI 변경의 일부로 추가된 것으로 보입니다.
app/src/main/java/com/yapp/app/official/navigation/YappNavHost.kt (1)
80-82: 프로필에서 설정 화면으로의 네비게이션 구현이 적절합니다.프로필 화면에서 설정 화면으로 이동할 수 있도록
profileNavGraph에 네비게이션 콜백을 추가한 것은 적절한 구현입니다. 이는 PR 목표인 마이페이지와 설정 페이지 UI 변경 작업에 부합합니다.feature/home/src/main/java/com/yapp/feature/home/setting/SettingScreen.kt (3)
152-152: 문자열 리소스 변경 적절.inquiry 문자열 리소스가 app_version으로 변경되어 UI 변경 목적에 맞게 잘 수정되었습니다.
157-161: 앱 버전 텍스트 표시로 UI 개선.기존 아이콘 대신 앱 버전을 텍스트로 표시하는 변경이 잘 이루어졌습니다. 텍스트 스타일과 색상도 디자인 시스템에 맞게 적절히 설정되었습니다.
32-63: 로그아웃 관련 코드 제거 확인.설정 화면 변경 작업의 일환으로 로그인 화면으로의 네비게이션 파라미터는 남아있지만, 실제 로그아웃 기능 사용 부분이 모두 제거되었습니다. PR 목적에 맞게 변경이 이루어졌습니다.
feature/profile/src/main/java/com/yapp/feature/profile/navigation/ProfileNavigation.kt (3)
7-7: ProfileRoute 컴포넌트 import 추가 적절.새로운 ProfileRoute 컴포저블 사용을 위해 필요한 import가 추가되었습니다.
17-19: 설정 화면 네비게이션 콜백 추가 적절.프로필 네비게이션 그래프에 설정 화면으로 이동하기 위한 콜백 파라미터가 추가되었습니다. 이는 마이페이지에서 설정 화면으로의 이동 경로를 구성하는 중요한 부분입니다.
21-23: ProfileRoute 컴포저블 사용 구현 적절.Placeholder UI 대신 실제 ProfileRoute 컴포저블을 사용하고, 설정 화면 네비게이션 콜백을 적절히 전달하고 있습니다. 관련 코드 스니펫을 확인했을 때도 콜백 네이밍이 일관되게 사용되고 있습니다.
feature/home/src/main/java/com/yapp/feature/home/setting/SettingViewModel.kt (3)
43-43: 앱 버전 정보 가져오는 코드 추가 적절.설정 화면에 앱 버전을 표시하기 위해 operationsRepository에서 앱 버전을 가져오는 코드가 적절히 추가되었습니다.
44-44: 상태 업데이트에 앱 버전 정보 포함.앱 버전 정보를 상태에 포함시켜 UI에서 표시할 수 있도록 하는 코드가 적절히 추가되었습니다.
19-22: 로그아웃 관련 의존성 제거 확인.UI 변경 작업에 맞게 LogoutUseCase와 DeleteAccountUseCase 의존성이 제거되었습니다. 이는 코드의 일관성을 유지하는 좋은 접근입니다.
feature/home/src/main/java/com/yapp/feature/home/setting/SettingContract.kt (2)
5-5: 앱 버전 상태 속성 추가 적절.설정 화면의 상태에 앱 버전 정보를 저장하기 위한 속성이 적절히 추가되었습니다. 기본값도 빈 문자열로 적절히 설정되어 있습니다.
8-15: 로그아웃 관련 인텐트 제거 확인.설정 화면 UI 변경에 맞게 로그아웃 및 계정 삭제 관련 인텐트가 모두 제거되었고, 기존의 다른 인텐트들은 유지되었습니다. 이는 코드의 일관성을 유지하는 좋은 접근입니다.
feature/profile/src/main/java/com/yapp/feature/profile/component/ProfileSectionItem.kt (1)
35-37:❓ Verification inconclusive
텍스트 스타일 이름 네이밍 확인
headline1Bold스타일을 사용하고 있는데, 일반적으로 headline은 대형 텍스트에 사용됩니다. 이 컴포넌트의 크기와 목적에 맞는 스타일인지 확인해 보세요.
🌐 Web query:
Material Design 3 또는 Compose에서 headline 스타일은 어떤 용도로 사용되나요?💡 Result:
Headline 스타일의 역할과 용도
Material Design 3 및 Jetpack Compose에서 headline 스타일은 주로 중요하거나 주목해야 할 주요 텍스트, 섹션 제목, 또는 페이지의 주요 콘텐츠 영역을 강조할 때 사용합니다[1][4][5]. Typography 시스템에서 headline 계열은 뚜렷한 계층 구조상의 한 레벨을 구성하며, 사용자의 시선을 집중시키는 역할을 합니다.
구체적인 용도
- 주요 화면, 페이지, 카드 또는 섹션의 타이틀/헤더
- 중요한 메시지나 내용을 강조할 때(예: 뉴스 헤드라인, 프로필 이름)
- 배너, 다이얼로그, 주요 안내 문구 등 시각적 주목성이 필요한 경우
Material 3에서는 headline 스타일을 세분화하여 headlineLarge, headlineMedium, headlineSmall로 나누고 있습니다. 각 스타일은 기본적으로 크기와 굵기, 줄 간격이 다르며, 강조하고자 하는 우선순위에 따라 크기를 선택합니다[5][6].
스타일 대표 용도 기본 폰트 크기/줄 간격 (sp/pt) headlineLarge 페이지/섹션의 가장 큰 제목, 배너 등 32/40 headlineMedium 하위 섹션 제목, 화면 내 주요 영역 28/36 headlineSmall 세부 섹션 제목, 카드 내 주제 24/32 Compose에서의 사용 예시
Jetpack Compose에서는 MaterialTheme의 typography에서 headline 스타일을 다음과 같이 사용할 수 있습니다.
Text( text = "대제목입니다", style = MaterialTheme.typography.headlineLarge ) Text( text = "중제목입니다", style = MaterialTheme.typography.headlineMedium ) Text( text = "소제목입니다", style = MaterialTheme.typography.headlineSmall )이렇게 headline 스타일을 사용하면 앱 내 텍스트의 계층과 시각적 일관성을 유지할 수 있습니다[5][6][9].
특징 요약
- headline 스타일은 주요 제목, 중요한 텍스트 구간, 시각적으로 강조해야 하는 곳에 사용합니다[1][4].
- headlineLarge~Small로 세분화되어 다양한 강조 단계에 맞게 선택할 수 있습니다[5].
- 일관된 타이포그래피 적용으로, 앱 전반의 디자인 품질을 높이고 사용자 경험을 향상시킵니다.
"These styles can be good for marking primary passages of text or important regions of content."
— Material Design 3 Typography Guide[1]Citations:
- 1: https://m3.material.io/styles/typography/applying-type
- 2: https://blog.naver.com/shwoghk14/222636405439
- 3: https://blog.naver.com/jieunlee486/222997621159
- 4: https://m3.material.io/styles/typography/overview
- 5: https://developer.android.com/develop/ui/compose/designsystems/material3
- 6: https://healthcoding.tistory.com/69
- 7: https://codelabs.developers.google.com/jetpack-compose-theming
- 8: https://monsterb.tistory.com/entry/%EB%A8%B8%ED%8B%B0%EB%A6%AC%EC%96%BC-%EB%94%94%EC%9E%90%EC%9D%B8Material-Design-%EA%B0%9C%EB%85%90
- 9: https://developer.android.com/codelabs/jetpack-compose-theming
- 10: https://m2.material.io/design/typography/the-type-system.html
텍스트 스타일 검토
Material Design 3의 headline 스타일(headlineLarge/Medium/Small)은 페이지·섹션의 주요 제목에 사용됩니다. 이 컴포넌트가 단순 레이블 역할이라면headline1Bold가 과도할 수 있으니, 디자인 의도에 맞게 더 낮은 우선순위의 스타일(e.g. titleSmall, bodyMedium)로 교체를 검토해 보세요.
- 파일: feature/profile/src/main/java/com/yapp/feature/profile/component/ProfileSectionItem.kt (35–37)
Text( text = title, color = YappTheme.colorScheme.labelNeutral, style = YappTheme.typography.headline1Bold )feature/profile/src/main/java/com/yapp/feature/profile/ProfileViewModel.kt (1)
41-43:OnClickUsage인텐트가 구현되지 않았습니다.이 인텐트가 정의되어 있지만 아무 동작도 수행하지 않습니다. 이것이 의도적인지 확인하거나, 구현을 추가해주세요.
이 기능이 아직 구현 중인 상태라면 TODO 주석을 추가하여 명확히 표시하는 것이 좋습니다.
feature/profile/src/main/java/com/yapp/feature/profile/ProfileScreen.kt (1)
159-159: 🧹 Nitpick (assertive)코드 포맷팅 이슈가 있습니다.
Modifier에 적용된 함수 체이닝에 괄호가 누락되었습니다.코드 일관성을 위해 다음과 같이 수정해주세요:
- modifier = Modifier.fillMaxWidth().padding(start = 16.dp, end = 16.dp, bottom = 8.dp), + modifier = Modifier.fillMaxWidth().padding(start = 16.dp, end = 16.dp, bottom = 8.dp),괄호는 필요하지 않지만, 일관된 코드 스타일을 위해 코드 서식을 확인하는 것이 좋습니다.
Likely an incorrect or invalid review comment.
core/data/src/main/java/com/yapp/core/data/data/repository/OperationsRepositoryImpl.kt
Show resolved
Hide resolved
| modifier = modifier.fillMaxWidth(), | ||
| verticalAlignment = Alignment.CenterVertically | ||
| ) { | ||
| Text(modifier = Modifier.weight(1f), text = "마이페이지") |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
문자열 리소스 사용 권장
"마이페이지" 문자열이 하드코딩되어 있습니다. 다국어 지원 및 일관성 있는 문자열 관리를 위해 문자열 리소스를 사용하는 것이 좋습니다.
- Text(modifier = Modifier.weight(1f), text = "마이페이지")
+ Text(modifier = Modifier.weight(1f), text = stringResource(id = R.string.profile_title))필요한 import 추가:
import androidx.compose.ui.res.stringResource해당 문자열 리소스도 추가해야 합니다.
🧹 Nitpick (assertive)
텍스트 스타일 적용 권장
마이페이지 텍스트에 스타일이 적용되어 있지 않습니다. YappTheme의 typography를 사용하여 디자인 시스템과 일관성 있는 스타일을 적용하는 것이 좋습니다.
- Text(modifier = Modifier.weight(1f), text = "마이페이지")
+ Text(
+ modifier = Modifier.weight(1f),
+ text = "마이페이지",
+ style = YappTheme.typography.title1Bold
+ )📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| Text(modifier = Modifier.weight(1f), text = "마이페이지") | |
| Text( | |
| modifier = Modifier.weight(1f), | |
| text = "마이페이지", | |
| style = YappTheme.typography.title1Bold | |
| ) |
| Icon( | ||
| modifier = Modifier.yappClickable(onClick = onClickSettings), | ||
| painter = painterResource(R.drawable.icon_setting), | ||
| contentDescription = "setting" | ||
| ) |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
접근성 개선을 위한 contentDescription
"setting" 문자열이 하드코딩되어 있습니다. 접근성 및 다국어 지원을 위해 문자열 리소스를 사용하는 것이 좋습니다.
Icon(
modifier = Modifier.yappClickable(onClick = onClickSettings),
painter = painterResource(R.drawable.icon_setting),
- contentDescription = "setting"
+ contentDescription = stringResource(id = R.string.setting_icon_description)
)필요한 import 추가:
import androidx.compose.ui.res.stringResource해당 문자열 리소스도 추가해야 합니다.
feature/profile/src/main/java/com/yapp/feature/profile/component/ProfileInformationSection.kt
Outdated
Show resolved
Hide resolved
| Text(text = userName, style = YappTheme.typography.title2Bold) | ||
| YappChipLarge(text = userRole, colorType = ChipColorType.Main, isFill = true) | ||
| } | ||
| Text("${userGeneration}, $userPosition") |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
텍스트 스타일 및 문자열 리소스 권장
사용자의 세대와 포지션을 표시하는 텍스트에 스타일이 적용되어 있지 않습니다. 또한 문자열 연결이 하드코딩되어 있습니다. 적절한 스타일을 적용하고 포맷 문자열을 사용하는 것이 좋습니다.
- Text("${userGeneration}, $userPosition")
+ Text(
+ text = "${userGeneration}, $userPosition",
+ style = YappTheme.typography.body1,
+ color = YappTheme.colorScheme.labelSecondary
+ )| Icon( | ||
| painter = painterResource(id = com.yapp.core.designsystem.R.drawable.icon_chevron_right), | ||
| contentDescription = null, | ||
| tint = YappTheme.colorScheme.labelAssistive | ||
| ) |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
접근성 개선을 위한 contentDescription 추가 필요
아이콘에 contentDescription이 null로 설정되어 있어 스크린 리더 사용자가 해당 요소의 용도를 이해하기 어려울 수 있습니다.
다음과 같이 의미 있는 설명을 추가해주세요:
Icon(
painter = painterResource(id = com.yapp.core.designsystem.R.drawable.icon_chevron_right),
- contentDescription = null,
+ contentDescription = "출석내역 보기",
tint = YappTheme.colorScheme.labelAssistive
)같은 방식으로 다른 아이콘에도 적절한 contentDescription을 추가해주세요.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| Icon( | |
| painter = painterResource(id = com.yapp.core.designsystem.R.drawable.icon_chevron_right), | |
| contentDescription = null, | |
| tint = YappTheme.colorScheme.labelAssistive | |
| ) | |
| Icon( | |
| painter = painterResource(id = com.yapp.core.designsystem.R.drawable.icon_chevron_right), | |
| contentDescription = "출석내역 보기", | |
| tint = YappTheme.colorScheme.labelAssistive | |
| ) |
| onClickPreviousHistory: () -> Unit, | ||
| onClickQuestion: () -> Unit, | ||
| onClickWithdraw: () -> Unit, | ||
| onCLickLogout: () -> Unit |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
함수 이름 표기법 일관성 문제
onCLickLogout 파라미터의 이름이 camelCase 규칙을 따르지 않고 있습니다. 'L'이 대문자로 표기되었습니다.
- onCLickLogout: () -> Unit
+ onClickLogout: () -> Unit파라미터 이름은 lowerCamelCase 규칙을 따라야 하며, 일관된 코드 스타일을 유지하는 것이 중요합니다.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| onCLickLogout: () -> Unit | |
| onClickLogout: () -> Unit |
| Column { | ||
| Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp)) { | ||
| Text(text = userName, style = YappTheme.typography.title2Bold) | ||
| YappChipLarge(text = userRole, colorType = ChipColorType.Main, isFill = true) |
There was a problem hiding this comment.
| YappChipLarge(text = userRole, colorType = ChipColorType.Main, isFill = true) | |
| YappChipSmall(text = userRole, colorType = ChipColorType.Main, isFill = true) |
R: radius가 8px이기 때문에 Small로 사용해주세요
There was a problem hiding this comment.
변경처리 했습니다
|
스트링 리소스와 카멜케이스는 따로 처리 후 바로 머지하겠습니다 |
💡 Issue
🌱 Key changes
마이페이지 UI 변경작업 및 설정 페이지 UI 변경
✅ To Reviewers
아직 API 가 나오지 않은것들이 있어 UI 작업을 먼저 진행했습니다.
이름 옆에 있는 비어있는 공간은 야뿌 이미지로 대체될 예정이고
클릭이벤트도 현재는 설정화면, 로그아웃만 달려있습니다.
리뷰할게 크게 없을거 같긴한데 끊어가기 위해 피알 올리겠습니다
📸 스크린샷
Screen_recording_20250417_092834.mp4
Summary by CodeRabbit
신규 기능
기능 변경
UI 개선
버그 수정