[Feat] 선택된 영화 아이템, 프로필 사진 수정 컴포넌트 수정 by ckals413 · Pull Request #60 · imflint/Flint-Android

ckals413 · 2026-01-13T11:30:12Z

📮 관련 이슈

closed [Feat] 선택된 영화 아이템/ 프로필 수정 컴포넌트 생성 #56

📌 작업 내용

선택된 영화 아이템, 프로필 사진 수정 컴포넌트 만들었습니다!

📸 스크린샷

선택된 영화 아이템	프로필 사진 수정

Summary by CodeRabbit

릴리스 노트

새로운 기능
- 프로필 사진 편집을 위한 새로운 UI 컴포넌트 추가 - 편집 아이콘이 포함된 원형 이미지 영역에서 프로필 사진을 쉽게 변경할 수 있습니다.
- 선택된 영화 항목 표시 기능 추가 - 선택된 영화를 원형 이미지로 표시하고 제거할 수 있습니다.

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

coderabbitai · 2026-01-13T11:30:25Z

📝 Walkthrough

워크스루

디자인 시스템 컴포넌트 라이브러리에 두 개의 새로운 Compose UI 컴포넌트를 추가합니다. EditProfileImage는 원형 프로필 이미지에 수정 아이콘 오버레이를 제공하며, SelectedFilmItem은 원형 영화 이미지에 제거 아이콘을 표시하는 컴포넌트입니다.

변경 사항

응집 단위 / 파일	변경 요약
프로필 이미지 편집 컴포넌트 `app/src/main/java/com/flint/core/designsystem/component/image/EditProfileImage.kt`	128dp 원형 이미지 영역을 렌더링하는 새로운 Composable 추가. 우측 하단에 편집 아이콘 오버레이를 표시하며, `onEditClick` 콜백으로 클릭 이벤트를 처리합니다. `ProfileImage` 컴포넌트를 활용하고 `@Preview` 함수를 포함합니다.
선택된 영화 항목 컴포넌트 `app/src/main/java/com/flint/core/designsystem/component/image/SelectedFilmItem.kt`	80dp 원형 네트워크 이미지를 92dp Box 내에 렌더링하는 새로운 Composable 추가. 우측 상단에 제거 아이콘(ic_deselect)을 오버레이하며, `onRemoveClick` 콜백으로 클릭 이벤트를 처리합니다. `@Preview` 함수를 포함합니다.

예상 코드 리뷰 노력

🎯 2 (단순) | ⏱️ ~10분

제안 검토자

giovannijunseokim
nahy-512
chanmi1125

시

🐰 새로운 컴포넌트 두 개가 태어났네요,
원형의 이미지들이 반짝반짝,
편집도 하고 제거도 척척,
디자인 시스템이 더욱 풍성해졌어요! ✨

🚥 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의 주요 변경 사항인 선택된 영화 아이템과 프로필 사진 수정 컴포넌트 생성/수정을 정확하게 반영합니다.
Description check	✅ Passed	PR 설명은 필수 섹션(관련 이슈, 작업 내용, 스크린샷)을 포함하고 있으며, 미구현 사항과 리뷰어 참고사항은 생략되어 있습니다.
Linked Issues check	✅ Passed	PR의 코드 변경이 issue #56의 모든 주요 요구사항을 충족합니다: 선택된 영화 아이템 컴포넌트와 프로필 수정 컴포넌트가 지정된 경로에 성공적으로 구현되었습니다.
Out of Scope Changes check	✅ Passed	추가된 두 개의 컴포넌트 파일(EditProfileImage.kt, SelectedFilmItem.kt)은 모두 issue #56의 요구사항 범위 내에 있으며, 범위 외 변경사항이 없습니다.

_{✏️ 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 (2)

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

40-49: 접근성 개선을 고려해주세요.

contentDescription이 "camera"로 설정되어 있는데, 스크린 리더 사용자를 위해 더 명확한 설명이 좋습니다. 또한 clickable에 시맨틱 정보를 추가하면 접근성이 향상됩니다.

♻️ 접근성 개선 제안

         Icon(
             imageVector = ImageVector.vectorResource(id = R.drawable.ic_profile_change),
-            contentDescription = "camera",
+            contentDescription = "프로필 사진 변경",
             tint = Color.Unspecified,
             modifier =
                 Modifier
                     .align(Alignment.BottomEnd)
                     .size(48.dp)
-                    .clickable { onClickEdit() },
+                    .clickable(
+                        onClickLabel = "프로필 사진 변경"
+                    ) { onClickEdit() },
         )

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

38-47: 접근성 개선을 고려해주세요.

contentDescription이 "x"로 설정되어 있는데, 스크린 리더 사용자에게 충분한 정보를 제공하지 않습니다. EditProfileImage와 동일하게 더 명확한 설명을 추가하는 것이 좋습니다.

♻️ 접근성 개선 제안

         Icon(
             imageVector = ImageVector.vectorResource(id = R.drawable.ic_deselect),
-            contentDescription = "x",
+            contentDescription = "선택 해제",
             tint = Color.Unspecified,
             modifier =
                 Modifier
                     .align(Alignment.TopEnd)
                     .size(24.dp)
-                    .clickable { onClickRemove() },
+                    .clickable(
+                        onClickLabel = "영화 선택 해제"
+                    ) { onClickRemove() },
         )

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 23f9bf3 and a40310b.

📒 Files selected for processing (3)

app/src/main/java/com/flint/core/designsystem/component/image/EditProfileImage.kt
app/src/main/java/com/flint/core/designsystem/component/image/SelectedFilmItem.kt
app/src/main/res/drawable/ic_deselect.xml

🧰 Additional context used

🧬 Code graph analysis (2)

app/src/main/java/com/flint/core/designsystem/component/image/SelectedFilmItem.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)

app/src/main/java/com/flint/core/designsystem/component/image/EditProfileImage.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 Build Check
GitHub Check: PR Lint Check

🔇 Additional comments (4)

app/src/main/res/drawable/ic_deselect.xml (1)

1-16: LGTM!

벡터 드로어블이 48x48에서 24x24로 올바르게 스케일링되었습니다. 경로 데이터도 새로운 뷰포트에 맞게 적절히 조정되었고, SelectedFilmItem.kt에서 사용하는 24dp 아이콘 크기와 일치합니다.

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

53-67: LGTM!

Preview 구현이 FlintTheme으로 올바르게 감싸져 있고, 프로젝트 패턴과 일관성이 있습니다.

app/src/main/java/com/flint/core/designsystem/component/image/SelectedFilmItem.kt (2)

21-49: LGTM!

컴포넌트 구조가 잘 구성되어 있습니다. NetworkImage와 CircleShape를 올바르게 사용하고 있으며, ic_deselect 아이콘 크기(24dp)가 업데이트된 드로어블 리소스와 일치합니다.

51-65: LGTM!

Preview 구현이 EditProfileImage와 일관된 패턴을 따르고 있습니다.

coderabbitai · 2026-01-13T11:35:21Z

Note

Docstrings generation - SUCCESS
Generated docstrings for this pull request at #61

@ckals413

Docstrings generation was requested by @ckals413. * #60 (comment) The following files were modified: * `app/src/main/java/com/flint/core/designsystem/component/image/EditProfileImage.kt` * `app/src/main/java/com/flint/core/designsystem/component/image/SelectedFilmItem.kt`

nahy-512

리뷰 확인 부탁드립니다!

nahy-512 · 2026-01-13T12:13:58Z

+@Composable
+fun EditProfileImage(
+    imageUrl: String,
+    onClickEdit: () -> Unit,


p1
onEditClick으로 이름 바꿔주세요..!

nahy-512 · 2026-01-13T12:16:53Z

+@Composable
+fun SelectedFilmItem(
+    imageUrl: String,
+    onClickRemove: () -> Unit,


p1
이것도 onRemoveClick으로!

nahy-512 · 2026-01-13T12:18:05Z

+    modifier: Modifier = Modifier
+) {
+    Box(
+        modifier = modifier.size(128.dp)


p1
이거 이미지 사이즈 상위로 올려주면 좋을 것 같아요!

카메라 아이콘이 포스터 원 사이즈랑 비율이 이상해져 고정해두는 걸로 하겠습니다!

nahy-512 · 2026-01-13T12:19:23Z

+            Modifier
+                .align(Alignment.BottomEnd)
+                .size(48.dp)
+                .clickable { onClickEdit() }


p1
카메라 아이콘 말고 전체 Box에 클릭 이벤트 다는 편이 더 좋지 않을까요?
기획/디자인에서 클릭 범위를 카메라 아이콘으로 한정해주신 걸까요?

box로 달았습니다!

nahy-512 · 2026-01-13T12:19:41Z

+    modifier: Modifier = Modifier
+) {
+    Box(
+        modifier = modifier.size(80.dp)


p1
요것도 확장성을 위해 상위에서 받아주면 좋을 것 같아요~~

nahy-512 · 2026-01-13T12:21:15Z

+        NetworkImage(
+            imageUrl = imageUrl,
+            shape = CircleShape,
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(4.dp)
+                .align(Alignment.Center)
+        )


p1
여기서는 ProfileImage 컴포넌트로 작업해주시면 좋을 것 같습니다!!
기본 이미지가 Avator 아미지로 보여야 하는 거니까

nahy-512 · 2026-01-13T12:21:35Z

+            Modifier
+                .align(Alignment.TopEnd)
+                .size(24.dp)
+                .clickable { onClickRemove() }


p1
여기도 클릭 범위 확인해주세용

앗 이건 삭제 이모티콘이라 아니구나ㅎㅎ
터치 영역 패딩만 잘 부탁드리겠습니다

피그마상 터치 영역이 따로 설정되어있어, 아이콘 바꾸고, 아이콘에 클릭 설정했습니다!

fix: X아이콘 터치영역 반영 수정했습니당

…film-item

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In
@app/src/main/java/com/flint/core/designsystem/component/image/SelectedFilmItem.kt:
- Around line 37-46: The Icon call uses a non-descriptive contentDescription
("x") and an explicit lambda; update the Icon in SelectedFilmItem to provide an
accessible, localized description (e.g., use string resource like
R.string.deselect or a descriptive literal "선택 해제") via contentDescription and
simplify the click handler to a function reference (onRemoveClick) instead of
the lambda, keeping the existing ImageVector.vectorResource(...) and Modifier
chain unchanged.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 23265df and c50b2b5.

📒 Files selected for processing (2)

app/src/main/java/com/flint/core/designsystem/component/image/EditProfileImage.kt
app/src/main/java/com/flint/core/designsystem/component/image/SelectedFilmItem.kt

🚧 Files skipped from review as they are similar to previous changes (1)

app/src/main/java/com/flint/core/designsystem/component/image/EditProfileImage.kt

🧰 Additional context used

🧬 Code graph analysis (1)

app/src/main/java/com/flint/core/designsystem/component/image/SelectedFilmItem.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 (2)

app/src/main/java/com/flint/core/designsystem/component/image/SelectedFilmItem.kt (2)

1-18: LGTM!

임포트가 적절하게 구성되어 있으며, 필요한 Compose 및 프로젝트 리소스가 모두 포함되어 있습니다.

50-64: LGTM!

프리뷰 함수가 FlintTheme으로 적절히 감싸져 있고, 테마 배경색을 사용하여 컴포넌트를 시각화하고 있습니다. 코드베이스의 다른 컴포넌트들과 일관된 패턴을 따르고 있습니다.

coderabbitai · 2026-01-13T13:49:33Z

+        Icon(
+            imageVector = ImageVector.vectorResource(id = R.drawable.ic_deselect),
+            contentDescription = "x",
+            tint = Color.Unspecified,
+            modifier =
+            Modifier
+                .align(Alignment.TopEnd)
+                .size(48.dp)
+                .clickable { onRemoveClick() }
+        )


⚠️ Potential issue | 🟠 Major

접근성 개선 필요: contentDescription에 의미 있는 설명 사용

contentDescription = "x"는 스크린 리더 사용자에게 의미 있는 정보를 제공하지 않습니다. "선택 해제" 또는 리소스 문자열을 사용하여 접근성을 개선해 주세요.

또한, 람다 { onRemoveClick() }는 함수 참조로 간소화할 수 있습니다.

♿ 제안된 수정 사항

Icon( imageVector = ImageVector.vectorResource(id = R.drawable.ic_deselect), - contentDescription = "x", + contentDescription = "선택 해제", tint = Color.Unspecified, modifier = Modifier .align(Alignment.TopEnd) .size(48.dp) - .clickable { onRemoveClick() } + .clickable(onClick = onRemoveClick) )

🤖 Prompt for AI Agents

In @app/src/main/java/com/flint/core/designsystem/component/image/SelectedFilmItem.kt around lines 37 - 46, The Icon call uses a non-descriptive contentDescription ("x") and an explicit lambda; update the Icon in SelectedFilmItem to provide an accessible, localized description (e.g., use string resource like R.string.deselect or a descriptive literal "선택 해제") via contentDescription and simplify the click handler to a function reference (onRemoveClick) instead of the lambda, keeping the existing ImageVector.vectorResource(...) and Modifier chain unchanged.

nahy-512

고생하셨습니다~~

ckals413 added 2 commits January 13, 2026 18:28

feat: 선택된 영화 컴포넌트 추가

479dd87

feat: 프로필 수정 컴포넌트 추가

a40310b

ckals413 self-assigned this Jan 13, 2026

ckals413 requested a review from a team as a code owner January 13, 2026 11:30

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

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

[Feat] 선택된 영화 아이템/ 프로필 수정 컴포넌트 생성 #56

Closed

2 tasks

coderabbitai Bot reviewed Jan 13, 2026

View reviewed changes

style: ktlint적용

23265df

coderabbitai Bot mentioned this pull request Jan 13, 2026

📝 Add docstrings to feat/#56-selected-film-item #61

Closed

nahy-512 requested changes Jan 13, 2026

View reviewed changes

ckals413 added 4 commits January 13, 2026 22:15

Merge remote-tracking branch 'origin/develop' into feat/#56-selected-…

0ab8fbd

…film-item

fix: 코드리뷰반영

b5fe801

fix: X아이콘 터치영역 반영

05f8007

style: ktlint적용

c50b2b5

coderabbitai Bot reviewed Jan 13, 2026

View reviewed changes

nahy-512 approved these changes Jan 13, 2026

View reviewed changes

nahy-512 merged commit 606318b into develop Jan 13, 2026
2 of 3 checks passed

nahy-512 deleted the feat/#56-selected-film-item branch January 13, 2026 13:55

This was referenced Jan 13, 2026

[Feat] OTT 리스트 바텀시트 컴포넌트 제작 #69

Merged

Feat/#66 search view #70

Merged

[Feat] ExploreScreen(탐색 화면) #120

Merged

[Feat] 온보딩 UI #116

Merged

Conversation

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

Uh oh!

📮 관련 이슈

📌 작업 내용

📸 스크린샷

Summary by CodeRabbit

릴리스 노트

Uh oh!

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

Uh oh!

워크스루

변경 사항

예상 코드 리뷰 노력

관련 가능성 있는 PR

제안 검토자

시

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Uh oh!

nahy-512 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

nahy-512 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ckals413 commented Jan 13, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jan 13, 2026 •

edited

Loading

coderabbitai Bot commented Jan 13, 2026 •

edited

Loading