Skip to content

[Feat] 마이페이지 UI 개편#203

Merged
ckals413 merged 9 commits into
developfrom
FLT-14-마이페이지-UI-개편
May 12, 2026

Hidden character warning

The head ref may contain hidden characters: "FLT-14-\ub9c8\uc774\ud398\uc774\uc9c0-UI-\uac1c\ud3b8"
Merged

[Feat] 마이페이지 UI 개편#203
ckals413 merged 9 commits into
developfrom
FLT-14-마이페이지-UI-개편

Conversation

@ckals413
Copy link
Copy Markdown
Contributor

@ckals413 ckals413 commented May 10, 2026

📮 관련 이슈

  • FLT-14

📌 작업 내용

  • 마이페이지에 내 아이디 기준 프로필 조회 (설정버튼, 인포버튼) 추가
  • 키워드프로세스바 바뀐 디자인 변경 (그라데이션, 보더)

📸 스크린샷

스크린샷
image

😅 미구현

  • [ ]

🫛 To. 리뷰어

Summary by CodeRabbit

  • 새로운 기능

    • 프로필에 정보 모달 트리거 및 설정 버튼 추가
    • 개인 프로필에서 모달 토글과 전체화면 오버레이 지원
  • 스타일

    • 키워드 진행바에 그래디언트 및 경계 효과 적용
    • 상단 네비게이션 바 디자인 개선(투명 배경)
  • 개선사항

    • 키워드 섹션에서 상위 3개 항목만 표시
    • 컬렉션 제목을 사용자 닉네임으로 개인화
    • 키워드 데모 데이터에 비율(percentage) 값 추가

Review Change Stack

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 10, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: cab0f0cb-1b1f-4339-8fd5-351057937de8

📥 Commits

Reviewing files that changed from the base of the PR and between 5b4e0fb and cbcff1e.

📒 Files selected for processing (3)
  • app/src/main/java/com/flint/presentation/profile/ProfileScreen.kt
  • app/src/main/java/com/flint/presentation/profile/component/InfoModalTrigger.kt
  • app/src/main/java/com/flint/presentation/profile/component/ProfileKeywordGraphItem.kt
🚧 Files skipped from review as they are similar to previous changes (3)
  • app/src/main/java/com/flint/presentation/profile/component/InfoModalTrigger.kt
  • app/src/main/java/com/flint/presentation/profile/component/ProfileKeywordGraphItem.kt
  • app/src/main/java/com/flint/presentation/profile/ProfileScreen.kt

📝 Walkthrough

Walkthrough

프로필 키워드 섹션에 정보 모달 트리거를 추가하고 샘플 키워드에 percentage를 포함시켰습니다. 키워드 진행률 표시줄을 그라디언트로 재구성했고, 섹션과 화면을 연결해 모달 상태 및 상단 앱바/설정 아이콘을 제어합니다.

변경사항

프로필 정보 모달 기능

Layer / File(s) Summary
데이터 모델
app/src/main/java/com/flint/domain/model/user/KeywordListModel.kt
KeywordListModel.FakeList1 항목 업데이트: 각 키워드에 percentage 값 추가 및 키워드 이름/색상/순위 매핑 변경.
UI 컴포넌트 — InfoModalTrigger
app/src/main/java/com/flint/presentation/profile/component/InfoModalTrigger.kt
새로운 InfoModalTrigger 컴포저블 추가: 회색 배경의 둥근 박스와 중앙 텍스트, @Preview 포함.
UI 컴포넌트 — ProgressBar 스타일
app/src/main/java/com/flint/presentation/profile/component/ProfileKeywordGraphItem.kt
ProfileKeywordProgressBar 리팩터: safePercent 적용, 선형 그라디언트 트랙/채우기 및 수직 테두리 그라디언트 적용; 관련 그래픽(import) 추가.
섹션 통합
app/src/main/java/com/flint/presentation/profile/component/ProfileKeywordSection.kt
시그니처 확장(isMyProfile, showInfoModal, onInfoClick 추가), 정보 아이콘/새로고침 버튼 조건부 렌더링, InfoModalTrigger 조건부 배치, 키워드 목록을 최대 3개로 제한(take(3)), 레이아웃 간격 조정.
화면 레벨 통합
app/src/main/java/com/flint/presentation/profile/ProfileScreen.kt
onSettingsClick 콜백 추가, showInfoModal 로컬 상태 도입, 섹션에 상태 전달 및 토글 연결, 컬렉션 제목을 닉네임 기반으로 변경, 전체화면 오버레이로 모달 닫기 처리, 상단 앱바를 FlintBasicTopAppbar로 교체 및 아이콘 조건부 표시.

Sequence Diagram

sequenceDiagram
  participant User as 사용자
  participant Profile as ProfileScreen
  participant Section as ProfileKeywordSection
  participant Modal as InfoModalTrigger

  User->>Section: 정보 아이콘 클릭
  Section->>Profile: onInfoClick()
  Profile->>Profile: showInfoModal = true
  Profile->>Modal: 렌더링
  Modal-->>User: 정보 표시
  User->>Profile: 오버레이 클릭
  Profile->>Profile: showInfoModal = false
Loading

예상 코드 리뷰 노력

🎯 3 (Moderate) | ⏱️ ~25 minutes

관련 PR

추천 라벨

🧩 Component

추천 리뷰어

  • kimjw2003
  • chanmi1125
  • nahy-512

시를 바치며

🐰 정보 모달 톡, 키워드 빛나네
그래디언트 물결 속에 퍼센트 춤추고
세 개의 마음만 살짝 보이고
설정 한 번이면 풍경 바뀌네
프로필이 반짝, 토끼도 기쁘다

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ 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%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed PR 제목 '[Feat] 마이페이지 UI 개편'은 마이페이지의 주요 UI 변경을 명확하게 요약하며, 코드 변경 사항의 핵심을 잘 반영합니다.
Description check ✅ Passed PR 설명은 관련 이슈, 작업 내용, 스크린샷을 포함하여 템플릿의 필수 항목을 충분히 작성했습니다.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch FLT-14-마이페이지-UI-개편

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


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.

@ckals413 ckals413 self-assigned this May 10, 2026
@ckals413 ckals413 added Style 🎨 UI 변경 대응, 코드 스타일 수정 등 간단한 작업 Feat ✨ 신규 기능을 추가하거나 기존 기능의 동작, 정책을 변경 labels May 10, 2026
Copy link
Copy Markdown
Contributor

@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

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
app/src/main/java/com/flint/presentation/profile/ProfileScreen.kt (1)

62-68: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

설정 버튼 액션이 라우트까지 연결되지 않았습니다.

상단 설정 아이콘은 렌더링되지만, ProfileRoute에서 onSettingsClick을 주입하지 않아 현재는 무동작일 가능성이 큽니다. 기본값 {}도 누락을 숨기고 있습니다.

수정 제안 diff
 fun ProfileRoute(
     paddingValues: PaddingValues,
     navigateUp: () -> Unit,
+    navigateToSettings: () -> Unit,
     navigateToCollectionList: (routeType: CollectionListRouteType, userId: String?) -> Unit,
@@
     ProfileScreen(
         modifier = Modifier.padding(paddingValues),
         uiState = uiState,
         onBackClick = navigateUp,
+        onSettingsClick = navigateToSettings,
         onCollectionItemClick = navigateToCollectionDetail,
@@
 private fun ProfileScreen(
     uiState: ProfileUiState,
     modifier: Modifier = Modifier,
     onRefreshClick: () -> Unit = {},
     onBackClick: () -> Unit = {},
-    onSettingsClick: () -> Unit = {},
+    onSettingsClick: () -> Unit,
@@
         ProfileScreen(
             modifier = Modifier.fillMaxSize(),
             uiState = uiState,
+            onSettingsClick = {},
             onCollectionItemClick = {},
             onCreatedCollectionMoreClick = {},
             onSavedCollectionMoreClick = {}
         )

Also applies to: 103-124, 144-145

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/src/main/java/com/flint/presentation/profile/ProfileScreen.kt` around
lines 62 - 68, ProfileRoute is missing an onSettingsClick callback so the
settings icon renders but does nothing; add a parameter to ProfileRoute with
signature onSettingsClick: () -> Unit = {} (or non-default if callers must
handle it) and pass that lambda into the composable that renders the top app
bar/settings icon (the composable or slot that currently handles the settings
icon click inside ProfileRoute), and update any internal invocations (and
callers of ProfileRoute) to forward or handle this callback so the settings tap
is propagated to navigation. Ensure you update all overloads/usages of
ProfileRoute (the other occurrences noted) to accept/forward onSettingsClick
accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@app/src/main/java/com/flint/presentation/profile/component/ProfileKeywordGraphItem.kt`:
- Around line 84-85: The percent parameter passed into the UI should be clamped
to the expected 0f..1f range to avoid runtime errors when used with
fillMaxWidth; update the component that takes percent (ProfileKeywordGraphItem)
to call percent.coerceIn(0f, 1f) before using it (e.g., in the value passed to
Modifier.fillMaxWidth or any layout calculations) so out-of-range server values
are safely bounded.

---

Outside diff comments:
In `@app/src/main/java/com/flint/presentation/profile/ProfileScreen.kt`:
- Around line 62-68: ProfileRoute is missing an onSettingsClick callback so the
settings icon renders but does nothing; add a parameter to ProfileRoute with
signature onSettingsClick: () -> Unit = {} (or non-default if callers must
handle it) and pass that lambda into the composable that renders the top app
bar/settings icon (the composable or slot that currently handles the settings
icon click inside ProfileRoute), and update any internal invocations (and
callers of ProfileRoute) to forward or handle this callback so the settings tap
is propagated to navigation. Ensure you update all overloads/usages of
ProfileRoute (the other occurrences noted) to accept/forward onSettingsClick
accordingly.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5e3be503-ae9f-44bd-85c2-462d1193f15b

📥 Commits

Reviewing files that changed from the base of the PR and between 62e570f and 5b4e0fb.

📒 Files selected for processing (5)
  • app/src/main/java/com/flint/domain/model/user/KeywordListModel.kt
  • app/src/main/java/com/flint/presentation/profile/ProfileScreen.kt
  • app/src/main/java/com/flint/presentation/profile/component/InfoModalTrigger.kt
  • app/src/main/java/com/flint/presentation/profile/component/ProfileKeywordGraphItem.kt
  • app/src/main/java/com/flint/presentation/profile/component/ProfileKeywordSection.kt

Copy link
Copy Markdown

@jongwoo2003-sidewalk jongwoo2003-sidewalk left a comment

Choose a reason for hiding this comment

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

코드 리뷰

[중간] InfoModalTrigger.kt — 직접 색상 참조 (테마 불일치)

// 현재 (직접 참조)
.background(color = FlintColors.gray800, ...)
color = FlintColors.gray300

// 권장 (테마 참조)
.background(color = FlintTheme.colors.gray800, ...)
color = FlintTheme.colors.gray300

프로젝트 전반에서 FlintTheme.colors.*를 사용하는 컨벤션인데, 이 컴포넌트만 FlintColors.*를 직접 참조하고 있습니다. 다크/라이트 테마 대응 시 문제가 될 수 있습니다.


[확인 필요] ProfileScreen.kt — 마이프로필 진입 시 뒤로가기 동작

// 이전: userId != null 일 때만 back 버튼 표시
if (uiState.userId != null) {
    FlintBackTopAppbar(onClick = onBackClick)
}

// 이후: 항상 표시
FlintBasicTopAppbar(
    navigationIcon = {
        Icon(..., modifier = Modifier.noRippleClickable { onBackClick() })
    },
    ...
)

마이페이지(userId == null) 진입 시에도 뒤로가기 버튼이 항상 노출됩니다. 백스택이 없는 진입 경로에서도 onBackClick이 안전하게 처리되는지 확인이 필요합니다.

@ckals413 ckals413 merged commit 4652bd6 into develop May 12, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Feat ✨ 신규 기능을 추가하거나 기존 기능의 동작, 정책을 변경 Style 🎨 UI 변경 대응, 코드 스타일 수정 등 간단한 작업

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants