Skip to content

[Feat] 온보딩 UI 개편#201

Merged
ckals413 merged 4 commits into
developfrom
FLT-12-온보딩-UI-개편
May 4, 2026

Hidden character warning

The head ref may contain hidden characters: "FLT-12-\uc628\ubcf4\ub529-UI-\uac1c\ud3b8"
Merged

[Feat] 온보딩 UI 개편#201
ckals413 merged 4 commits into
developfrom
FLT-12-온보딩-UI-개편

Conversation

@ckals413
Copy link
Copy Markdown
Contributor

@ckals413 ckals413 commented May 3, 2026

📮 관련 이슈

  • closed #이슈번호

📌 작업 내용

  • 온보딩 화면에 장르칩을 추가했습니다.
  • 장르칩과, 선택된 영화 리스트 디쌤들과 논의 후 처음엔 왼쪽 패딩 값 적용, 좌우 스크롤 시 화면에 꽉찬뒤 잘리게 수정했습니다.
  • 화면설계서 바탕으로 온보딩 화면에서 Ott화면이 삭제되면서 바로 OnboardingDone화면으로 이동하게 수정했습니다.

📸 스크린샷

스크린샷
Screen_Recording_20260503_171803_Flint.mp4

😅 미구현

  • [ ]

🫛 To. 리뷰어

  • 피그마 보고 장르칩이랑 검색창 부분 맞췄는데, 뭔가 더 가깝게 느껴지는 느낌이 드네요

Summary by CodeRabbit

  • 새로운 기능
    • 온보딩 화면에 가로 스크롤 가능한 장르 칩 UI 추가 — 원하는 장르를 탭해 선택 가능.
    • 선택 상태는 시각적으로 표시되며 탭으로 토글됩니다.
    • 장르 선택은 검색 결과와 온보딩 진행에 반영되어, 선택에 따라 실시간으로 내용이 업데이트되고 온보딩 완료로 진행됩니다.

@ckals413 ckals413 self-assigned this May 3, 2026
@ckals413 ckals413 added the Feat ✨ 신규 기능을 추가하거나 기존 기능의 동작, 정책을 변경 label May 3, 2026
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 3, 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: c6441a00-11b0-4565-b4bd-28938ba543a4

📥 Commits

Reviewing files that changed from the base of the PR and between 67b3c6d and 834e030.

📒 Files selected for processing (1)
  • app/src/main/java/com/flint/presentation/onboarding/OnboardingViewModel.kt

📝 Walkthrough

Walkthrough

온보딩 콘텐츠 화면에 장르 선택 상태와 UI를 추가하고, 라우트 콜백을 navigateToOnboardingDone으로 변경해 화면→ViewModel→네비게이션 연결을 갱신했습니다.

Changes

온보딩 장르 선택 기능

Layer / File(s) Summary
Data Shape
app/src/main/java/com/flint/presentation/onboarding/OnboardingUiState.kt
OnboardingContentUiStateselectedGenres: ImmutableList<String> 추가. STEP_QUESTIONS 제거 후 GENRES 상수 목록 추가.
ViewModel Logic
app/src/main/java/com/flint/presentation/onboarding/OnboardingViewModel.kt
selectGenre(genre: String) 추가: 선택된 장르를 토글하여 _contentUiState.selectedGenres 갱신.
Core UI
app/src/main/java/com/flint/presentation/onboarding/OnboardingContentScreen.kt
onGenreClick: (String) -> Unit 파라미터 추가. 스티키 헤더에 LazyRowFlintGenreChip 렌더링, 선택 여부를 contentUiState.selectedGenres로 결정하고 탭 시 onGenreClick 호출.
UI Layout tweak
app/src/main/java/com/flint/presentation/onboarding/OnboardingContentScreen.kt
선택된 항목의 수평 LazyRowModifier.layout 적용해 측면 패딩/오프셋을 커스텀으로 처리.
Navigation Wiring
app/src/main/java/com/flint/presentation/onboarding/navigation/OnboardingNavigation.kt
OnboardingContentRoute에 전달되는 콜백을 navigateToOnboardingOttnavigateToOnboardingDone으로 변경.
Previews / Samples
app/src/main/java/com/flint/presentation/onboarding/OnboardingContentScreen.kt
기존 프리뷰에 onGenreClick 인자 추가. 장르 칩 상호작용을 시연하는 인터랙티브 프리뷰 추가.

Sequence Diagram

sequenceDiagram
    participant UI as "OnboardingContentScreen\n(Composables)"
    participant VM as "OnboardingViewModel"
    participant Nav as "NavController"
    participant State as "OnboardingContentUiState"

    UI->>VM: onGenreClick(genre)
    VM->>State: toggle selectedGenres -> emit new state
    State-->>UI: recomposition with updated selectedGenres
    UI->>Nav: onNextClick -> navigateToOnboardingDone()
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested labels

🧩 Component, 📱 UI

Suggested reviewers

  • kimjw2003
  • chanmi1125
  • nahy-512

Poem

🐰 장르 칩을 톡, 톡, 톡 누르면,
스크롤 속에 반짝이네 🌟
상태는 쏙쏙, 화면은 찰칵,
온보딩 길이 한결 가벼워졌네.

🚥 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 개편'은 변경사항의 주요 내용인 온보딩 화면 개편(장르 칩 추가, 네비게이션 변경, 레이아웃 조정)을 충분히 요약하고 있습니다.
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-12-온보딩-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
Review rate limit: 0/1 reviews remaining, refill in 60 minutes.

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

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

🧹 Nitpick comments (3)
app/src/main/java/com/flint/presentation/onboarding/navigation/OnboardingNavigation.kt (1)

14-14: ⚡ Quick win

OTT 화면 관련 코드가 사용되지 않는 상태로 남아 있음

PR 목표에 따르면 OTT 화면이 온보딩 플로우에서 제거되었지만, 아래 세 곳에 연관 코드가 그대로 남아 있습니다:

  • Line 14: import com.flint.presentation.onboarding.OnboardingOttRoute
  • Lines 29–31: fun NavController.navigateToOnboardingOtt() — 더 이상 호출되지 않음
  • Lines 67–76: composable<Route.OnboardingOtt> { ... } — 그래프에 등록되어 있지만 도달할 수 없는 목적지

OnboardingOttRoute 자체가 아직 남아있다면 별도로 삭제가 필요하며, Route.OnboardingOtt도 마찬가지로 정리가 필요합니다.

♻️ 제거 제안
-import com.flint.presentation.onboarding.OnboardingOttRoute
-fun NavController.navigateToOnboardingOtt() {
-    navigate(Route.OnboardingOtt)
-}
-        composable<Route.OnboardingOtt> { backStackEntry ->
-            val sharedViewModel = backStackEntry.sharedViewModel<OnboardingViewModel>(navController)
-
-            OnboardingOttRoute(
-                paddingValues = paddingValues,
-                navigateUp = navController::navigateUp,
-                navigateToDone = navController::navigateToOnboardingDone,
-                viewModel = sharedViewModel,
-                )
-        }

Also applies to: 29-31, 67-76

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@app/src/main/java/com/flint/presentation/onboarding/navigation/OnboardingNavigation.kt`
at line 14, Remove the unused OTT onboarding artifacts: delete the import
OnboardingOttRoute, remove the NavController extension function
navigateToOnboardingOtt(), and remove the composable registration for
Route.OnboardingOtt (the composable { ... } block). Also check for and delete
the OnboardingOttRoute class/object and the Route.OnboardingOtt entry if they
remain unused elsewhere to avoid dangling references; make sure to run build to
catch any remaining usages and update navigation tests if needed.
app/src/main/java/com/flint/presentation/onboarding/OnboardingContentScreen.kt (2)

383-388: 💤 Low value

프리뷰에서 완전 한정 이름(FQCN) 사용

Line 386의 kotlinx.collections.immutable.persistentListOf(...) 대신 파일 상단에 import를 추가하고 persistentListOf()를 사용하거나, toImmutableList()로 단순화할 수 있습니다.

♻️ 개선 제안
+import kotlinx.collections.immutable.toImmutableList
 
-selectedGenres = selectedGenres.toList().let {
-    kotlinx.collections.immutable.persistentListOf(*it.toTypedArray())
-},
+selectedGenres = selectedGenres.toList().toImmutableList(),
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@app/src/main/java/com/flint/presentation/onboarding/OnboardingContentScreen.kt`
around lines 383 - 388, In OnboardingContentScreen where
OnboardingContentUiState is constructed (the selectedGenres mapping), replace
the fully-qualified call kotlinx.collections.immutable.persistentListOf(...)
with a top-level import and a shorter call (persistentListOf(...)) or simplify
by converting the list to an immutable list via a helper like toImmutableList();
update the import section of the file and change the expression that builds
selectedGenres (referencing selectedGenres and OnboardingContentUiState)
accordingly.

156-169: ⚡ Quick win

동일한 Modifier.layout 사이드 패딩 로직이 중복됨

장르 칩 LazyRow(Line 159–169)와 선택된 콘텐츠 LazyRow(Line 211–221)에 완전히 동일한 Modifier.layout 블록이 두 번 등장합니다. Modifier 확장 함수로 추출하면 수정이 용이해집니다.

♻️ 확장 함수로 추출 제안

공통 위치에 다음 확장 함수를 추가합니다 (파일 상단 또는 별도 유틸 파일):

private fun Modifier.overflowHorizontalPadding(padding: Dp): Modifier =
    this.layout { measurable, constraints ->
        val sidePadding = padding.roundToPx()
        val placeable = measurable.measure(
            constraints.copy(maxWidth = constraints.maxWidth + sidePadding * 2)
        )
        layout(constraints.maxWidth, placeable.height) {
            placeable.place(-sidePadding, 0)
        }
    }

그런 다음 두 LazyRow의 modifier를 다음과 같이 교체합니다:

-modifier = Modifier
-    .height(48.dp)
-    .layout { measurable, constraints ->
-        val sidePadding = 16.dp.roundToPx()
-        val placeable = measurable.measure(
-            constraints.copy(maxWidth = constraints.maxWidth + sidePadding * 2)
-        )
-        layout(constraints.maxWidth, placeable.height) {
-            placeable.place(-sidePadding, 0)
-        }
-    },
+modifier = Modifier
+    .height(48.dp)
+    .overflowHorizontalPadding(16.dp),
-modifier = Modifier.layout { measurable, constraints ->
-    val sidePadding = 16.dp.roundToPx()
-    val placeable = measurable.measure(
-        constraints.copy(maxWidth = constraints.maxWidth + sidePadding * 2)
-    )
-    layout(constraints.maxWidth, placeable.height) {
-        placeable.place(-sidePadding, 0)
-    }
-},
+modifier = Modifier.overflowHorizontalPadding(16.dp),

Also applies to: 209-221

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@app/src/main/java/com/flint/presentation/onboarding/OnboardingContentScreen.kt`
around lines 156 - 169, Extract the duplicated Modifier.layout block into a
private extension function named overflowHorizontalPadding(padding: Dp):
Modifier and use it from both LazyRow usages (the genre-chip LazyRow and the
selected-content LazyRow) instead of repeating the layout lambda; implement
overflowHorizontalPadding to round the padding to pixels, measure with
constraints.copy(maxWidth = constraints.maxWidth + sidePadding * 2), and place
the child at -sidePadding, then replace the inline Modifier.layout(...) in both
places with .overflowHorizontalPadding(16.dp).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/src/main/java/com/flint/presentation/onboarding/OnboardingViewModel.kt`:
- Around line 114-126: The selectGenre currently triggers getSearchContentList
but the repository does not accept genres, so remove the
getSearchContentList(...) call from selectGenre and instead compute a
client-side filtered result using the updated _contentUiState.selectedGenres:
after updating selectedGenres in selectGenre, derive a filtered list from the
existing search results (e.g., currentState.searchResults or contentList) by
keeping items whose genre intersects selectedGenres and update _contentUiState
with that filtered list (or expose a new filteredResults property);
alternatively ensure OnboardingContentScreen reads selectedGenres and filters
the displayed list locally. Update references: selectGenre,
getSearchContentList, _contentUiState, selectedGenres, and
OnboardingContentScreen.

---

Nitpick comments:
In
`@app/src/main/java/com/flint/presentation/onboarding/navigation/OnboardingNavigation.kt`:
- Line 14: Remove the unused OTT onboarding artifacts: delete the import
OnboardingOttRoute, remove the NavController extension function
navigateToOnboardingOtt(), and remove the composable registration for
Route.OnboardingOtt (the composable { ... } block). Also check for and delete
the OnboardingOttRoute class/object and the Route.OnboardingOtt entry if they
remain unused elsewhere to avoid dangling references; make sure to run build to
catch any remaining usages and update navigation tests if needed.

In
`@app/src/main/java/com/flint/presentation/onboarding/OnboardingContentScreen.kt`:
- Around line 383-388: In OnboardingContentScreen where OnboardingContentUiState
is constructed (the selectedGenres mapping), replace the fully-qualified call
kotlinx.collections.immutable.persistentListOf(...) with a top-level import and
a shorter call (persistentListOf(...)) or simplify by converting the list to an
immutable list via a helper like toImmutableList(); update the import section of
the file and change the expression that builds selectedGenres (referencing
selectedGenres and OnboardingContentUiState) accordingly.
- Around line 156-169: Extract the duplicated Modifier.layout block into a
private extension function named overflowHorizontalPadding(padding: Dp):
Modifier and use it from both LazyRow usages (the genre-chip LazyRow and the
selected-content LazyRow) instead of repeating the layout lambda; implement
overflowHorizontalPadding to round the padding to pixels, measure with
constraints.copy(maxWidth = constraints.maxWidth + sidePadding * 2), and place
the child at -sidePadding, then replace the inline Modifier.layout(...) in both
places with .overflowHorizontalPadding(16.dp).
🪄 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: 25b9312f-a2cb-4a37-b590-a5141e89d77f

📥 Commits

Reviewing files that changed from the base of the PR and between 47e26fe and 67b3c6d.

📒 Files selected for processing (4)
  • app/src/main/java/com/flint/presentation/onboarding/OnboardingContentScreen.kt
  • app/src/main/java/com/flint/presentation/onboarding/OnboardingUiState.kt
  • app/src/main/java/com/flint/presentation/onboarding/OnboardingViewModel.kt
  • app/src/main/java/com/flint/presentation/onboarding/navigation/OnboardingNavigation.kt

Copy link
Copy Markdown
Contributor

@kimjw2003 kimjw2003 left a comment

Choose a reason for hiding this comment

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

굳굳 수고많았어잉~

@ckals413 ckals413 merged commit 62e570f into develop May 4, 2026
2 checks passed
@ckals413 ckals413 deleted the FLT-12-온보딩-UI-개편 branch May 4, 2026 14:06
@coderabbitai coderabbitai Bot mentioned this pull request May 13, 2026
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Feat ✨ 신규 기능을 추가하거나 기존 기능의 동작, 정책을 변경

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants