Skip to content

Conversation

@alswlekk
Copy link
Contributor

@alswlekk alswlekk commented Sep 25, 2025

🚀 이슈번호

✏️ 변경사항

  • 상단 탭바 공통 컴포넌트 구현
  • 하단의 수정, 수정완료 버튼 컴포넌트 구현
  • 내정보 화면 구현
  • 내 정보 수정하기 화면 구현
  • 설정 화면 네비게이션, 그래프 코드 추가

📷 스크린샷

Screen_recording_20250925_160516.webm

✍️ 사용법

🎸 기타

폰트가 따로 적용되지 않아서 이와 관련해 수정이 필요할 거 같습니다.
IOS 환경에선 따로 돌려볼 수 없는 상황이라 확인을 못했습니다...
실제 폰에서도 돌아가는 게 가능한 지 방법 확인 후 확인해보도록 하겠습니다.

Summary by CodeRabbit

  • 신기능

    • 내 정보 수정 화면 추가: 닉네임 입력, 완료 버튼, 뒤로가기 상단바 제공.
    • 마이페이지에서 내 정보 수정 화면으로 이동 기능 추가.
  • 리팩터링

    • 마이페이지 UI 개편: 상단바 도입, 닉네임 표시 영역 정비, 편집 액션 버튼 추가.
    • 화면 간 내비게이션 흐름 정리 및 뒤로가기 동작 개선.
  • 스타일

    • 버튼 컴포넌트 도입으로 일관된 색상/모서리/크기 적용.
  • 기타

    • 신규 문자열 리소스 추가(예: 내 정보, 닉네임, 수정 완료, 뒤로가기 등)로 텍스트 표기 정비.

@coderabbitai
Copy link

coderabbitai bot commented Sep 25, 2025

Walkthrough

새 문자열 리소스 7개를 추가하고, Route에 UpdateMyInfo를 신설해 내비게이션 그래프에 등록했습니다. MyPageScreen 시그니처에 편집 이동 콜백을 추가하고, EditMyInfoScreen과 공용 컴포넌트(MyPageButton, MyPageTopAppBar)를 새로 도입했습니다.

Changes

Cohort / File(s) Change Summary
Resources
composeApp/src/commonMain/composeResources/values/strings.xml
7개 문자열 키 추가: my_information, nickname, my_club_major_list_title, edit_my_information, add, complete_edit, back_button
Navigation Core
composeApp/src/commonMain/kotlin/org/whosin/client/core/navigation/Route.kt
composeApp/src/commonMain/kotlin/org/whosin/client/core/navigation/WhosInNavGraph.kt
Route.UpdateMyInfo 추가 및 내비게이션 등록; MyPage → Edit 이동 콜백 추가; Edit → MyPage 복귀 시 popUpTo(UpdateMyInfo) + launchSingleTop 구성
MyPage Screens
.../presentation/mypage/MyPageScreen.kt
.../presentation/mypage/EditMyInfoScreen.kt
MyPageScreen 시그니처에 onNavigateToEdit 추가 및 UI 재구성(닉네임 표시/편집 액션, 목록 플레이스홀더); EditMyInfoScreen 신규 추가(닉네임 입력, 완료 버튼, 뒤로가기/마이페이지 콜백)
MyPage Components
.../presentation/mypage/component/MyPageButton.kt
.../presentation/mypage/component/MyPageTopAppBar.kt
공용 버튼 컴포저블 및 상단 앱바(뒤로가기 아이콘) 신규 추가; 각 파일에 Preview 포함

Sequence Diagram(s)

sequenceDiagram
    autonumber
    actor User
    participant MyPage as MyPageScreen
    participant Nav as NavController
    participant Edit as EditMyInfoScreen

    User->>MyPage: 화면 진입
    MyPage->>Nav: navigate(Route.UpdateMyInfo) [onNavigateToEdit]
    Nav->>Edit: composable<Route.UpdateMyInfo>

    note right of Edit: 닉네임 입력 및 완료 버튼 활성화\n리소스: `nickname`, `complete_edit`

    Edit-->>Nav: navigate(Route.MyPage)\npopUpTo(UpdateMyInfo) + launchSingleTop
    Nav-->>MyPage: composable<Route.MyPage>

    User->>MyPage: 뒤로가기
    MyPage->>Nav: popBackStack()
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Poem

새 화면 열리니 닉네임 한 줄,
뒤로 화살표는 조용히 길을 부르네 ↩️
버튼 톡 눌러 마이페이지로 슝—
리소스 일곱, UI에 작은 빛 ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed 제목 “[UI] 설정 화면 ui 구현”은 PR에서 추가된 상단 탭바, 하단 버튼, 내정보 및 내정보 수정 화면 등 UI 변경사항을 명확히 요약하여 주요 변경점을 잘 반영하고 있습니다. 텍스트가 간결하며 PR의 핵심인 설정 화면 관련 UI 구현을 정확하게 지칭하고 있어 스캔하는 동료가 이해하기 쉽습니다. 이 제목은 불필요한 정보나 모호함 없이 필요한 범위만을 담고 있어 적절합니다.
✨ Finishing touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1c7daed and 0ca699c.

📒 Files selected for processing (2)
  • composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageButton.kt (1 hunks)
  • composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageTopAppBar.kt (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageButton.kt
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: android-build
  • GitHub Check: ios-build
🔇 Additional comments (1)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageTopAppBar.kt (1)

3-27: 터치 영역 48dp 미만 + modifier 재사용 이슈

현재 뒤로가기 아이콘의 클릭 범위가 24dp라 접근성 가이드라인(최소 48dp)에 못 미치고, 전달받은 modifier를 그대로 자식에게 넘겨 testTag나 외부 패딩이 예기치 않게 중복 적용될 수 있어요. 아래처럼 로컬 Modifier를 쓰고 48dp 히트박스를 씌워주면 두 문제 모두 해결됩니다.

+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
@@
-fun MyPageTopAppBar(onNavigateBack: () -> Unit, modifier: Modifier = Modifier) {
-    Row(modifier = modifier.fillMaxWidth().background(Color.White)) {
-        AsyncImage(
+fun MyPageTopAppBar(onNavigateBack: () -> Unit, modifier: Modifier = Modifier) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .background(Color.White),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Box(
+            modifier = Modifier
+                .size(48.dp)
+                .clickable(onClick = onNavigateBack),
+            contentAlignment = Alignment.Center,
+        ) {
+            AsyncImage(
             model = Res.getUri("files/ic_back.svg"),
             contentDescription = stringResource(Res.string.back_button),
-            modifier = modifier.size(24.dp).clickable(onClick = onNavigateBack),
-        )
-        Spacer(modifier = modifier.weight(1f))
+            modifier = Modifier.size(24.dp),
         )
+        Spacer(modifier = Modifier.weight(1f))
     }
 }

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (3)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageButton.kt (1)

24-36: onClick 람다 간소화 제안
onClick = onClick으로 바로 넘기면 한 단계 감싸는 람다를 줄일 수 있어 조금 더 깔끔합니다.

-        onClick = { onClick() },
+        onClick = onClick,
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/EditMyInfoScreen.kt (1)

80-85: 동아리/학과 제목 문자열 리소스 사용 권장
이미 strings.xmlmy_club_major_list_title을 추가하셨으니 하드코딩 대신 리소스를 사용하면 i18n과 유지보수성이 좋아집니다.

-            Column(
-                modifier = Modifier.fillMaxWidth().background(Color.Gray).height(271.dp)
-            ) {
-                Text(
-                    "내 동아리 / 학과 목록"
-                )
-            }
+            Column(
+                modifier = Modifier.fillMaxWidth().background(Color.Gray).height(271.dp)
+            ) {
+                Text(
+                    text = stringResource(Res.string.my_club_major_list_title)
+                )
+            }
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/MyPageScreen.kt (1)

83-87: 동아리/학과 목록 제목도 리소스로 대체해주세요
Edit 화면과 마찬가지로 여기서도 문자열을 직접 넣기보다 Res.string.my_club_major_list_title을 사용하면 일관성과 다국어 대응에 도움이 됩니다.

-            Column(
-                modifier = Modifier.fillMaxWidth().background(Color.Gray).height(271.dp)
-            ) {
-                Text(text = "내 동아리 / 학과 목록")
-            }
+            Column(
+                modifier = Modifier.fillMaxWidth().background(Color.Gray).height(271.dp)
+            ) {
+                Text(text = stringResource(Res.string.my_club_major_list_title))
+            }
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4af251c and 1c7daed.

⛔ Files ignored due to path filters (2)
  • composeApp/src/commonMain/composeResources/drawable/ic_back.png is excluded by !**/*.png
  • composeApp/src/commonMain/composeResources/files/ic_back.svg is excluded by !**/*.svg
📒 Files selected for processing (7)
  • composeApp/src/commonMain/composeResources/values/strings.xml (1 hunks)
  • composeApp/src/commonMain/kotlin/org/whosin/client/core/navigation/Route.kt (1 hunks)
  • composeApp/src/commonMain/kotlin/org/whosin/client/core/navigation/WhosInNavGraph.kt (2 hunks)
  • composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/EditMyInfoScreen.kt (1 hunks)
  • composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/MyPageScreen.kt (1 hunks)
  • composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageButton.kt (1 hunks)
  • composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageTopAppBar.kt (1 hunks)
🧰 Additional context used
🧬 Code graph analysis (3)
composeApp/src/commonMain/kotlin/org/whosin/client/core/navigation/WhosInNavGraph.kt (1)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/EditMyInfoScreen.kt (1)
  • EditMyInfoScreen (35-93)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/EditMyInfoScreen.kt (2)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageTopAppBar.kt (1)
  • MyPageTopAppBar (23-34)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageButton.kt (1)
  • MyPageButton (17-38)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/MyPageScreen.kt (2)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageTopAppBar.kt (1)
  • MyPageTopAppBar (23-34)
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageButton.kt (1)
  • MyPageButton (17-38)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: ios-build
  • GitHub Check: android-build
🔇 Additional comments (3)
composeApp/src/commonMain/kotlin/org/whosin/client/core/navigation/Route.kt (1)

21-23: UpdateMyInfo Route 추가 확인 완료
새 화면과 내비게이션 그래프 연결을 위해 Route.UpdateMyInfo를 추가하신 부분 문제없이 잘 반영되었습니다.

composeApp/src/commonMain/composeResources/values/strings.xml (1)

8-14: 새 문자열 리소스 추가 잘 반영되었습니다
새로운 화면에서 사용할 문자열 키들이 정리되어 있어서 향후 다국어 대응에도 도움이 되겠습니다.

composeApp/src/commonMain/kotlin/org/whosin/client/core/navigation/WhosInNavGraph.kt (1)

62-71: UpdateMyInfo 경로 연결 확인
Edit 화면으로의 이동과 완료 시 MyPage로의 복귀 흐름을 안전하게 구성해주셔서 내비게이션 플로우가 자연스럽습니다.

Comment on lines 25 to 33
Row(modifier = modifier.fillMaxWidth().background(Color.White)) {
Icon(
painter = painterResource(Res.drawable.ic_back),
contentDescription = stringResource(Res.string.back_button),
modifier = modifier.size(24.dp).clickable(onClick = onNavigateBack),
tint = Color.Unspecified,
)
Spacer(modifier = modifier.weight(1f))
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

뒤로가기 터치 영역과 Modifier 재사용 수정 필요
현재 아이콘에 걸린 clickable 영역이 24dp에 불과해 권장 최소 터치 영역(48dp)을 충족하지 못하고, 동일한 modifier 인스턴스를 자식들에게도 전달하고 있어 외부에서 패딩이나 testTag를 넘길 때 의도치 않은 레이아웃/테스트 문제가 발생할 수 있습니다. 접근성 이슈이므로 수정이 필요합니다. 아래처럼 별도의 Modifier를 쓰고 48dp 박스를 두르면 해결됩니다(Alignment import 추가 필요).

-    Row(modifier = modifier.fillMaxWidth().background(Color.White)) {
-        Icon(
-            painter = painterResource(Res.drawable.ic_back),
-            contentDescription = stringResource(Res.string.back_button),
-            modifier = modifier.size(24.dp).clickable(onClick = onNavigateBack),
-            tint = Color.Unspecified,
-        )
-        Spacer(modifier = modifier.weight(1f))
-    }
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .background(Color.White),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Box(
+            modifier = Modifier
+                .size(48.dp)
+                .clickable(onClick = onNavigateBack),
+            contentAlignment = Alignment.Center,
+        ) {
+            Icon(
+                painter = painterResource(Res.drawable.ic_back),
+                contentDescription = stringResource(Res.string.back_button),
+                modifier = Modifier.size(24.dp),
+                tint = Color.Unspecified,
+            )
+        }
+        Spacer(modifier = Modifier.weight(1f))
+    }
🤖 Prompt for AI Agents
In
composeApp/src/commonMain/kotlin/org/whosin/client/presentation/mypage/component/MyPageTopAppBar.kt
around lines 25 to 33, the Icon currently reuses the incoming modifier and
limits the clickable area to 24dp which breaks accessibility and can cause
unintended layout/test behavior; create and use a dedicated local Modifier for
the back icon (do not reuse the composable's modifier param), give the touch
target a 48dp hit box (e.g., a 48dp size box with the visible icon centered
inside) and attach the clickable to that local modifier, preserve visual icon
size separately, and add the necessary Alignment import for centering.

@alswlekk alswlekk added UI UI 구현 작업 OK Merge 완료된 PR labels Sep 25, 2025
@alswlekk alswlekk self-assigned this Sep 25, 2025
@alswlekk alswlekk linked an issue Sep 25, 2025 that may be closed by this pull request
@ikseong00 ikseong00 merged commit 2444df0 into WhosInRoom:develop Sep 25, 2025
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

OK Merge 완료된 PR UI UI 구현 작업

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[UI] 설정 화면 ui

2 participants