[Feat] 온보딩 OTT 아이템 추가 by ckals413 · Pull Request #51 · imflint/Flint-Android

ckals413 · 2026-01-12T16:31:52Z

📮 관련 이슈

closed [Feat] 온보딩 OTT 아이템 컴포넌트 생성 #48

📌 작업 내용

온보딩 ott item 추가

📸 스크린샷

스크린샷 1	스크린샷 2

2026-01-13.2.07.11.mov

🫛 To. 리뷰어

바로 url 추가해서 실행시켜서 이미지 추가해두겠습니다!

Summary by CodeRabbit

새로운 기능
- 온보딩에 OTT 플랫폼 선택 UI 추가(선택/미선택 상태 프리뷰 포함)
시각 개선
- 플랫폼 선택 시 오버레이 및 체크 아이콘으로 명확한 피드백 제공
- 포스터 및 로고 이미지 로딩 방식 개선 — 네트워크 이미지 컴포넌트 도입으로 일관된 이미지 표시 및 스케일 유지

_{✏️ Tip: You can customize this high-level summary in your review settings.}

nahy-512

ic_onboarding_film_check 이미지가 없다고 뜨는데, 확인 부탁드릴게요!

…to feat/#48-onboarding-ott-item

giovannijunseokim

LGTM 🥇

chanmi1125

수고하셨습니다!

app/src/main/java/com/flint/presentation/onboarding/component/OnboardingOttItem.kt

giovannijunseokim · 2026-01-13T07:57:08Z

@coderabbitai review

coderabbitai · 2026-01-13T07:57:14Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

coderabbitai · 2026-01-13T07:57:18Z

📝 Walkthrough

Walkthrough

온보딩 필름 항목에서 Compose Image를 커스텀 NetworkImage로 교체하고, 선택 상태(다크 오버레이·체크 아이콘)를 지원하는 신규 온보딩 OTT 컴포저블 OnboardingOttItem을 추가합니다.

Changes

Cohort / File(s)	변경 요약
Image 컴포넌트 교체 `app/src/main/java/com/flint/presentation/onboarding/component/OnboardingFilmItem.kt`	기존 Compose `Image` 사용을 `NetworkImage(imageUrl = ...)`으로 대체. `coil3.rememberAsyncImagePainter` 임포트 제거, `com.flint.core.designsystem.component.image.NetworkImage` 임포트 추가. 함수 시그니처·제어 흐름 불변 (+3/-4)
신규 OTT 아이템 컴포넌트 `app/src/main/java/com/flint/presentation/onboarding/component/OnboardingOttItem.kt`	온보딩용 `OnboardingOttItem(...)` 컴포저블 신규 추가: 100dp 폭의 클릭 가능한 박스에 `NetworkImage` 렌더링, `isSelected`일 때 다크 오버레이와 중앙 체크 아이콘 표시, 플랫폼명 텍스트, `modifier` 지원 및 Preview 포함 (+126/-0)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐇 폴짝, 작은 토끼가 말하네,
네트워크 이미지로 포스터 반짝,
OTT 로고엔 체크가 빛나고,
선택된 박스엔 어둠이 살포시,
온보딩 길에 새 숨결이 왔네 ✨

🚥 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 제목은 온보딩 OTT 아이템 추가라는 핵심 변경사항을 명확하게 반영하며, 간결하고 구체적입니다.
Description check	✅ Passed	PR 설명에 관련 이슈, 작업 내용, 스크린샷, 리뷰어 노트가 포함되어 있으나 미구현 항목 섹션이 비어있습니다.
Linked Issues check	✅ Passed	OnboardingOttItem 컴포넌트가 추가되었으며, 이는 링크된 이슈 #48의 요구사항인 '온보딩 OTT 아이템 컴포넌트 생성'을 충족합니다.
Out of Scope Changes check	✅ Passed	OnboardingFilmItem.kt의 NetworkImage 마이그레이션은 기존 컴포넌트 개선이며, OnboardingOttItem.kt는 이슈 요구사항과 직접 관련이 있습니다.

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

✨ Finishing touches

📝 Generate docstrings

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

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

app/src/main/java/com/flint/presentation/onboarding/component/OnboardingOttItem.kt (1)
26-27: Import와 함수 사이에 빈 줄 추가 권장.

Kotlin 스타일 가이드에 따르면 import 문과 최상위 선언 사이에 빈 줄이 있어야 합니다.
🔧 제안된 수정
 import com.flint.core.designsystem.component.image.NetworkImage
 import com.flint.core.designsystem.theme.FlintTheme
+
 @Composable
 fun OnboardingOttItem(

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 81e706b and a361e91.

📒 Files selected for processing (2)

app/src/main/java/com/flint/presentation/onboarding/component/OnboardingFilmItem.kt
app/src/main/java/com/flint/presentation/onboarding/component/OnboardingOttItem.kt

🧰 Additional context used

🧬 Code graph analysis (2)

app/src/main/java/com/flint/presentation/onboarding/component/OnboardingFilmItem.kt (1)

app/src/main/java/com/flint/core/designsystem/component/image/NetworkImage.kt (1)

NetworkImage (22-46)

app/src/main/java/com/flint/presentation/onboarding/component/OnboardingOttItem.kt (2)

app/src/main/java/com/flint/core/designsystem/component/image/NetworkImage.kt (1)

NetworkImage (22-46)

app/src/main/java/com/flint/core/designsystem/theme/Theme.kt (1)

FlintTheme (8-16)

🔇 Additional comments (3)

app/src/main/java/com/flint/presentation/onboarding/component/OnboardingFilmItem.kt (1)

56-61: LGTM!

NetworkImage 컴포넌트로의 전환이 올바르게 적용되었습니다. 코드베이스 전반의 네트워크 이미지 로딩 패턴과 일관성이 유지됩니다.

app/src/main/java/com/flint/presentation/onboarding/component/OnboardingOttItem.kt (2)

78-84: 선택된 상태의 텍스트 색상 확인 필요.

선택된 항목의 텍스트가 gray300(어두움)으로, 비선택 항목이 white(밝음)로 설정되어 있습니다. 오버레이와 체크 아이콘이 선택 상태를 표시하므로 의도된 디자인일 수 있지만, 일반적인 UX 패턴과 다르므로 디자인 명세와 일치하는지 확인해 주세요.

35-86: LGTM!

컴포넌트 구조가 깔끔하고 OnboardingFilmItem과 일관된 패턴을 따릅니다. NetworkImage 사용, 오버레이 처리, 체크 아이콘 표시가 올바르게 구현되었습니다.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (2)

app/src/main/java/com/flint/presentation/onboarding/component/OnboardingOttItem.kt (2)
41-46: 접근성 개선을 위해 semantics 또는 Modifier.clickable에 역할 정보 추가를 권장합니다.

현재 clickable 수정자만 적용되어 있어 스크린 리더 사용자가 이 요소의 목적을 파악하기 어려울 수 있습니다. semantics 블록을 추가하여 선택 가능한 항목임을 명시하면 접근성이 향상됩니다.
♻️ 접근성 개선 제안
         Box(
             modifier =
             Modifier
                 .size(100.dp)
-                .clickable { onClick() },
+                .clickable(
+                    onClick = onClick,
+                    onClickLabel = platformName
+                ),
             contentAlignment = Alignment.Center
         ) {
64-72: 아이콘 리소스 이름에 "film"이 포함되어 있습니다.

ic_onboarding_film_check는 기존 Film 컴포넌트용으로 보이는데, OTT 컴포넌트에서 재사용하고 있습니다. 동일한 체크 아이콘을 의도적으로 공유하는 것이라면 문제없지만, 명확성을 위해 ic_onboarding_check 같은 공통 이름으로 변경하거나 별도 리소스를 만드는 것을 고려해 볼 수 있습니다.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a361e91 and d7b9bc8.

📒 Files selected for processing (1)

app/src/main/java/com/flint/presentation/onboarding/component/OnboardingOttItem.kt

🧰 Additional context used

🧬 Code graph analysis (1)

app/src/main/java/com/flint/presentation/onboarding/component/OnboardingOttItem.kt (2)

app/src/main/java/com/flint/core/designsystem/component/image/NetworkImage.kt (1)

NetworkImage (22-46)

app/src/main/java/com/flint/core/designsystem/theme/Theme.kt (1)

FlintTheme (8-16)

⏰ 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: PR Lint Check
GitHub Check: PR Build Check

🔇 Additional comments (2)

app/src/main/java/com/flint/presentation/onboarding/component/OnboardingOttItem.kt (2)

79-85: 선택 시 텍스트 색상이 더 어두워지는 것이 의도된 디자인인지 확인이 필요합니다.

현재 isSelected가 true일 때 텍스트 색상이 gray300으로 어두워집니다. 일반적으로 선택된 항목은 더 눈에 띄게 표시하는 경우가 많은데, 체크 아이콘으로 선택 상태를 표현하고 텍스트는 의도적으로 흐리게 처리한 것인지 디자인 명세 확인을 권장합니다.

89-124: LGTM!

프리뷰 함수가 선택/비선택 상태를 모두 보여주고 FlintTheme으로 올바르게 감싸져 있습니다. 다양한 플랫폼 예시를 포함한 점도 좋습니다.

nahy-512

작업 고생하셨습니다!
반영해주면 좋겠는 부분이 좀 있긴 한데,, 일단 치명적인 거는 아니라 어푸 남깁니당

nahy-512 · 2026-01-13T08:22:02Z

app/src/main/java/com/flint/presentation/onboarding/component/OnboardingOttItem.kt

+                        .background(FlintTheme.colors.overlay)
+                )
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_onboarding_film_check),


p2
체크 아이콘이 벡터 이미지니까

imageVector = ImageVector.vectorResource(id = R.drawable.ic_onboarding_film_check),

식으로 써주면 더 좋을 것 같습니다!

바꿨어용!

nahy-512 · 2026-01-13T08:22:53Z

app/src/main/java/com/flint/presentation/onboarding/component/OnboardingOttItem.kt

+                )
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_onboarding_film_check),
+                    contentDescription = "선택됨",


p2
contentDescription 작성을 선호하시나요?? 저는.. 적기 귀찮아서 null로 두는 편
컨벤션을 맞춰봐도 괜찮겠지만, 사전에 논의를 따로 안했으니 일단 차민님 의견만 남겨주시면 좋을 것 같아요!

nahy-512 · 2026-01-13T08:26:40Z

app/src/main/java/com/flint/presentation/onboarding/component/OnboardingOttItem.kt

+                    modifier =
+                    Modifier
+                        .align(Alignment.Center)
+                        .size(40.dp)


p2
피그마에서는 이미지가 저희 추가된 아이콘이 아니라 별도 벡터 이미지로 들어가 있는 걸로 확인했는데, 40.dp는 임의로 설정해주신 값인지, 디쌤들께 컨펌받은 내용인지 궁금합니다!

벡터이미지 디쌤들에게 말해서 정사각형 이미지로 디자인시스템이 수정되었습니다!
디자인 시스템만 변경되어 있는 상태입니다!

nahy-512 · 2026-01-13T08:28:10Z

app/src/main/java/com/flint/presentation/onboarding/component/OnboardingOttItem.kt

+            style = FlintTheme.typography.body1M16,
+            color = if (isSelected) FlintTheme.colors.gray300 else FlintTheme.colors.white,
+            textAlign = TextAlign.Center,
+            modifier = Modifier.width(100.dp)


p2

Suggested change

modifier = Modifier.width(100.dp)

modifier = Modifier.fillMaxWidth()

해주시는 편이 더 좋을 것 같아요~

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

app/src/main/java/com/flint/presentation/onboarding/component/OnboardingOttItem.kt (1)

66-74: 아이콘 리소스 네이밍 확인 필요

ic_onboarding_film_check 아이콘이 OTT 아이템에서도 사용되고 있습니다. 이 아이콘이 온보딩 전반에서 공유되는 리소스라면, ic_onboarding_check와 같이 더 일반적인 이름으로 변경하는 것이 향후 유지보수에 도움이 될 수 있습니다.

현재 동작에는 문제가 없으므로, 필요시 추후 리팩토링으로 진행해도 무방합니다.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d7b9bc8 and 5209992.

📒 Files selected for processing (1)

app/src/main/java/com/flint/presentation/onboarding/component/OnboardingOttItem.kt

🧰 Additional context used

🧬 Code graph analysis (1)

app/src/main/java/com/flint/presentation/onboarding/component/OnboardingOttItem.kt (2)

app/src/main/java/com/flint/core/designsystem/component/image/NetworkImage.kt (1)

NetworkImage (22-46)

app/src/main/java/com/flint/core/designsystem/theme/Theme.kt (1)

FlintTheme (8-16)

⏰ 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). (1)

GitHub Check: PR Build Check

🔇 Additional comments (3)

app/src/main/java/com/flint/presentation/onboarding/component/OnboardingOttItem.kt (3)

1-28: LGTM!

임포트가 깔끔하게 정리되어 있으며, 디자인 시스템의 NetworkImage와 FlintTheme을 적절히 활용하고 있습니다.

30-89: 컴포넌트 구조 LGTM!

OnboardingOttItem 컴포저블이 잘 구현되어 있습니다:

NetworkImage를 활용한 이미지 로딩

선택 상태에 따른 오버레이 및 체크 아이콘 표시

FlintTheme을 통한 일관된 스타일링

적절한 접근성 지원 (contentDescription)

91-126: 프리뷰 구현 LGTM!

선택/비선택 상태와 다양한 플랫폼 이름을 포함한 프리뷰가 잘 구성되어 있습니다. FlintTheme으로 감싸 테마 값이 올바르게 적용됩니다.

ckals413 added 2 commits January 13, 2026 01:21

feat: 온보딩 Ott 컴포넌트 추가

7cc72de

style: ktlint적용

b5ee089

ckals413 requested a review from a team as a code owner January 12, 2026 16:31

ckals413 linked an issue Jan 12, 2026 that may be closed by this pull request

[Feat] 온보딩 OTT 아이템 컴포넌트 생성 #48

Closed

1 task

ckals413 self-assigned this Jan 12, 2026

ckals413 added 🧩 Component feat - 공통 컴포넌트 작업 Feat ✨ 신규 기능을 추가하거나 기존 기능의 동작, 정책을 변경 labels Jan 12, 2026

fix: 사이즈변경

f73f820

nahy-512 requested changes Jan 12, 2026

View reviewed changes

ckals413 added 4 commits January 13, 2026 15:27

Merge branch 'develop' of https://github.com/imflint/Flint-Android in…

d8ae6c8

…to feat/#48-onboarding-ott-item

refactor: AsyncImage로 변경

e8d969f

refactor: AsyncImage로 변경

d13c1e7

style: ktlint적용

a361e91

giovannijunseokim approved these changes Jan 13, 2026

View reviewed changes

chanmi1125 reviewed Jan 13, 2026

View reviewed changes

app/src/main/java/com/flint/presentation/onboarding/component/OnboardingOttItem.kt Show resolved Hide resolved

coderabbitai bot reviewed Jan 13, 2026

View reviewed changes

style: 개행 추가

d7b9bc8

coderabbitai bot reviewed Jan 13, 2026

View reviewed changes

nahy-512 approved these changes Jan 13, 2026

View reviewed changes

ckals413 added 2 commits January 13, 2026 20:13

style: 이미지벡터로 변경

ed9df10

style: ktlint적용

5209992

coderabbitai bot reviewed Jan 13, 2026

View reviewed changes

chanmi1125 approved these changes Jan 13, 2026

View reviewed changes

ckals413 merged commit 03360c2 into develop Jan 13, 2026
3 checks passed

ckals413 deleted the feat/#48-onboarding-ott-item branch January 13, 2026 11:21

coderabbitai bot mentioned this pull request Jan 15, 2026

[Feat] 온보딩 UI #116

Merged

	modifier = Modifier.width(100.dp)
	modifier = Modifier.fillMaxWidth()

Conversation

ckals413 commented Jan 12, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📮 관련 이슈

📌 작업 내용

📸 스크린샷

🫛 To. 리뷰어

Summary by CodeRabbit

Uh oh!

nahy-512 left a comment

Choose a reason for hiding this comment

Uh oh!

giovannijunseokim left a comment

Choose a reason for hiding this comment

Uh oh!

chanmi1125 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

giovannijunseokim commented Jan 13, 2026

Uh oh!

coderabbitai bot commented Jan 13, 2026

Uh oh!

coderabbitai bot commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

nahy-512 left a comment

Choose a reason for hiding this comment

Uh oh!

nahy-512 Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

ckals413 Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

nahy-512 Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

nahy-512 Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

ckals413 Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

nahy-512 Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Comments

ckals413 commented Jan 12, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 13, 2026 •

edited

Loading