[Feat] collection create add film UI#119
Conversation
FlintSearchInitView를 삭제하고 FlintSearchEmptyView에 title 파라미터를 추가하여 두 뷰를 통합했습니다.
- `AddFilmScreen` 컴포저블을 새로 추가했습니다. - `FlintBackTopAppbar`와 `FlintSearchTextField`를 사용하여 화면의 기본 UI를 구성했습니다. - `LazyColumn`과 `CollectionCreateFilmSelect` 컴포저블을 이용해 작품 목록과 선택 기능을 구현했습니다. - `CollectionFilmUiModel` 데이터 클래스를 정의했습니다.
…int/Flint-Android into feat/#103-collection-create-Add-Film-UI
`AddFilmScreen`에서 `FlintSearchTextField`를 사용할 때 modifier를 적용할 수 있도록 파라미터를 추가했습니다.
작품 추가 화면(`AddFilmScreen`)에서 작품을 선택하면, 검색창 하단에 선택된 작품들의 포스터가 가로 목록으로 표시되는 기능을 추가했습니다. 사용자는 이 목록에서 각 작품을 다시 제거할 수도 있습니다.
📝 Walkthrough워크스루이번 PR은 영화 추가 UI(AddFilmScreen)를 도입하여 컬렉션 생성 기능을 구현하고, CollectionListScreen을 전체 UI 구현과 함께 재구성하며, 뒤로가기 네비게이션 콜백을 추가하고, 테스트/프리뷰 목적의 Fake 컴패니언 객체를 도메인 모델에 추가합니다. 변경사항
시퀀스 다이어그램sequenceDiagram
participant User
participant AddFilmScreen
participant FilmList as Film List
participant SelectedFilms as Selected Films
participant Navigation
User->>AddFilmScreen: 영화 추가 화면 진입
User->>AddFilmScreen: 검색어 입력
AddFilmScreen->>FilmList: 필터된 영화 목록 표시
User->>FilmScreen: 영화 선택 (토글)
AddFilmScreen->>SelectedFilms: 선택된 영화 업데이트
SelectedFilms-->>User: 선택 영화 가로 리스트 표시
User->>Navigation: 뒤로가기 버튼 클릭
Navigation->>User: 이전 화면으로 이동
예상 코드 리뷰 노력🎯 3 (Moderate) | ⏱️ ~25 minutes 관련 가능성 있는 PR
제안 라벨
제안 리뷰어
시
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@app/src/main/java/com/flint/presentation/collectioncreate/AddFilmScreen.kt`:
- Line 50: selectedFilms 변수는 mutableStateListOf로 내부가 변경 가능하므로 외부에서 참조를 재할당하지 않도록
var를 val로 변경하세요; AddFilmScreen.kt의 remember {
mutableStateListOf<CollectionFilmUiModel>() }를 사용하는 selectedFilms 선언을 var에서 val로
바꾸어 리스트 자체 재할당을 방지하고 Compose 상태 추적 불일치를 없애도록 수정하세요.
- Around line 29-37: AddFilmRoute currently ignores its parameters and hardcodes
onBackClick to an empty lambda; update AddFilmRoute so it either forwards
paddingValues to AddFilmScreen (if layout spacing is needed) and/or wires
navigateToCollectionCreate into the onBackClick callback (e.g., pass
navigateToCollectionCreate as the onBackClick argument to AddFilmScreen), or if
paddingValues truly aren’t needed remove the unused parameter from AddFilmRoute
signature; ensure the unique symbols referenced are AddFilmRoute, AddFilmScreen,
onBackClick, paddingValues and navigateToCollectionCreate so reviewers can find
and verify the change.
🧹 Nitpick comments (4)
app/src/main/java/com/flint/presentation/collectionlist/component/CollectionFileItem.kt (1)
73-80: 그리드 정렬을 위한 고정 높이 적용은 적절합니다.2열 그리드에서 항목 높이를 일관되게 유지하기 위해 고정 높이를 사용하는 것은 합리적인 접근입니다. 다만
45.dp가 매직 넘버로 사용되고 있어, 향후 유지보수성을 위해 상수로 추출하거나 주석을 추가하는 것을 고려해 보세요.app/src/main/java/com/flint/presentation/collectionlist/CollectionListScreen.kt (3)
34-46:navigateToCollectionDetail파라미터가 사용되지 않고 있습니다.
navigateToCollectionDetail콜백이 선언되어 있지만CollectionListScreen에 전달되지 않습니다. 컬렉션 아이템 클릭 시 상세 화면으로 이동하는 기능이 필요하다면, 이 콜백을CollectionListScreen에 전달하고CollectionFileItem에 클릭 핸들러를 추가해야 합니다.
98-101: 그리드 패딩이 비대칭으로 설정되어 있습니다.
start = 20.dp만 적용되어 있어 오른쪽 여백이 없습니다. UI 일관성을 위해 양쪽에 동일한 패딩을 적용하는 것이 좋습니다.♻️ 수정 제안
modifier = Modifier - .padding(start = 20.dp) + .padding(horizontal = 20.dp) .fillMaxSize(),
83-90: Text에 style이 지정되지 않았습니다."총 N개" 텍스트에
style속성이 누락되어 기본 스타일이 적용됩니다. 디자인 시스템의 일관성을 위해FlintTheme.typography에서 적절한 스타일을 지정하는 것을 권장합니다.♻️ 수정 예시
Text( text = "총 ${collections.size}개", color = FlintTheme.colors.gray100, + style = FlintTheme.typography.body1M16, // 또는 적절한 스타일 modifier = Modifier .fillMaxWidth() .padding(horizontal = 16.dp), )
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
app/src/main/java/com/flint/core/designsystem/component/textfield/FlintSearchTextField.ktapp/src/main/java/com/flint/core/designsystem/component/view/FlintSearchEmptyView.ktapp/src/main/java/com/flint/core/designsystem/component/view/FlintSearchInitView.ktapp/src/main/java/com/flint/domain/model/AuthorModel.ktapp/src/main/java/com/flint/domain/model/CollectionDetailModel.ktapp/src/main/java/com/flint/presentation/collectioncreate/AddFilmScreen.ktapp/src/main/java/com/flint/presentation/collectionlist/CollectionListScreen.ktapp/src/main/java/com/flint/presentation/collectionlist/component/CollectionFileItem.ktapp/src/main/java/com/flint/presentation/collectionlist/navigation/CollectionListNavigation.ktapp/src/main/java/com/flint/presentation/main/MainNavHost.kt
💤 Files with no reviewable changes (1)
- app/src/main/java/com/flint/core/designsystem/component/view/FlintSearchInitView.kt
🧰 Additional context used
🧠 Learnings (3)
📚 Learning: 2026-01-13T19:02:41.580Z
Learnt from: chanmi1125
Repo: imflint/Flint-Android PR: 77
File: app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateThumbnail.kt:45-72
Timestamp: 2026-01-13T19:02:41.580Z
Learning: In `app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateThumbnail.kt`, the height difference between CollectionCreateEmptyThumbnail (no aspectRatio) and CollectionCreateFillThumbnail (aspectRatio 1.5f / 1f) is intentional design - the empty state should not have the same aspectRatio as the filled state.
Applied to files:
app/src/main/java/com/flint/presentation/collectionlist/CollectionListScreen.ktapp/src/main/java/com/flint/presentation/collectionlist/component/CollectionFileItem.ktapp/src/main/java/com/flint/presentation/collectioncreate/AddFilmScreen.kt
📚 Learning: 2026-01-13T17:03:16.816Z
Learnt from: giovannijunseokim
Repo: imflint/Flint-Android PR: 72
File: app/src/main/java/com/flint/core/designsystem/component/collection/PeopleBottomSheet.kt:85-98
Timestamp: 2026-01-13T17:03:16.816Z
Learning: In PeopleBottomSheet.kt, the `people` list passed to LazyColumn is static and does not change while the bottom sheet is visible, so a key parameter is not required for the items() call.
Applied to files:
app/src/main/java/com/flint/presentation/collectionlist/CollectionListScreen.kt
📚 Learning: 2026-01-13T19:02:56.195Z
Learnt from: chanmi1125
Repo: imflint/Flint-Android PR: 77
File: app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateThumbnail.kt:45-72
Timestamp: 2026-01-13T19:02:56.195Z
Learning: In `app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateThumbnail.kt`, the aspect ratio difference between `CollectionCreateEmptyThumbnail` (no aspect ratio) and `CollectionCreateFillThumbnail` (1.5f / 1f) is intentional by design.
Applied to files:
app/src/main/java/com/flint/presentation/collectionlist/component/CollectionFileItem.kt
🧬 Code graph analysis (4)
app/src/main/java/com/flint/core/designsystem/component/textfield/FlintSearchTextField.kt (1)
app/src/main/java/com/flint/core/designsystem/component/textfield/FlintBasicTextField.kt (1)
FlintBasicTextField(36-114)
app/src/main/java/com/flint/presentation/collectionlist/navigation/CollectionListNavigation.kt (1)
app/src/main/java/com/flint/presentation/collectionlist/CollectionListScreen.kt (1)
CollectionListRoute(34-46)
app/src/main/java/com/flint/presentation/collectionlist/CollectionListScreen.kt (4)
app/src/main/java/com/flint/core/designsystem/component/topappbar/FlintBackTopAppbar.kt (1)
FlintBackTopAppbar(16-57)app/src/main/java/com/flint/core/designsystem/component/textfield/FlintSearchTextField.kt (1)
FlintSearchTextField(22-53)app/src/main/java/com/flint/presentation/collectionlist/component/CollectionFileItem.kt (1)
CollectionFileItem(40-83)app/src/main/java/com/flint/core/designsystem/theme/Theme.kt (1)
FlintTheme(8-16)
app/src/main/java/com/flint/presentation/collectioncreate/AddFilmScreen.kt (5)
app/src/main/java/com/flint/core/designsystem/component/topappbar/FlintBackTopAppbar.kt (1)
FlintBackTopAppbar(16-57)app/src/main/java/com/flint/core/designsystem/component/textfield/FlintSearchTextField.kt (1)
FlintSearchTextField(22-53)app/src/main/java/com/flint/core/designsystem/component/image/SelectedFilmItem.kt (1)
SelectedFilmItem(20-49)app/src/main/java/com/flint/presentation/collectioncreate/component/CollectionCreateFilmSelect.kt (1)
CollectionCreateFilmSelect(24-54)app/src/main/java/com/flint/core/designsystem/theme/Theme.kt (1)
FlintTheme(8-16)
🔇 Additional comments (13)
app/src/main/java/com/flint/core/designsystem/component/textfield/FlintSearchTextField.kt (1)
27-31: LGTM! Modifier 파라미터 추가가 Compose 가이드라인에 맞게 잘 구현되었습니다.
modifier파라미터가 필수 파라미터 다음, 선택적 파라미터 앞에 올바르게 배치되었습니다.modifier.fillMaxWidth()로 체이닝하여 외부에서 전달된 modifier를 유지하면서 내부 width 제약을 추가하는 방식이 적절합니다.app/src/main/java/com/flint/domain/model/AuthorModel.kt (1)
10-20: 프리뷰 데이터 패턴이 일관되게 적용되었습니다.
CollectionDetailModel.Fake와 동일한 패턴으로AuthorModel.Fake를 추가하여 프리뷰 및 테스트 데이터 생성이 용이해졌습니다.app/src/main/java/com/flint/domain/model/CollectionDetailModel.kt (1)
13-28: LGTM!
AuthorModel.Fake를 재사용하여 Fake 데이터를 구성한 점이 좋습니다. 프리뷰 및 테스트에서 일관된 샘플 데이터를 사용할 수 있습니다.app/src/main/java/com/flint/presentation/collectionlist/navigation/CollectionListNavigation.kt (1)
15-27: 네비게이션 콜백 전달이 올바르게 구현되었습니다.
navigateUp콜백이NavGraphBuilder함수에서CollectionListRoute로 적절하게 전달되고 있으며, 다른 네비게이션 그래프와 일관된 패턴을 따르고 있습니다.app/src/main/java/com/flint/presentation/main/MainNavHost.kt (1)
62-66: LGTM!
navigator::navigateUp을collectionListNavGraph에 전달하여 뒤로가기 네비게이션이 올바르게 연결되었습니다.app/src/main/java/com/flint/presentation/collectionlist/CollectionListScreen.kt (1)
115-175: 프리뷰 구현이 잘 되어 있습니다.다양한 상태(북마크 여부, 콘텐츠 길이 등)를 포함한 테스트 데이터로 프리뷰를 구성하여 디자인 검증에 유용합니다.
app/src/main/java/com/flint/presentation/collectioncreate/AddFilmScreen.kt (4)
39-45: LGTM!
CollectionFilmUiModeldata class가 필요한 필드들을 적절히 정의하고 있습니다.
52-64: 하드코딩된 테스트 데이터에 대한 확인이 필요합니다.현재
filmList가 하드코딩된 더미 데이터를 사용하고 있습니다. UI 프로토타이핑 단계에서는 적절하지만, 추후 ViewModel이나 repository에서 실제 데이터를 주입받도록 변경이 필요합니다.PR 설명에 top app bar 버튼이 아직 구현되지 않았다고 명시되어 있으므로, 이 더미 데이터도 추후 작업 범위에 포함되는지 확인해주세요.
66-141: UI 구성이 잘 되어 있습니다.
FlintBackTopAppbar,FlintSearchTextField,LazyRow,LazyColumn구성이 적절합니다.- 선택된 영화 표시 및 토글 로직이 명확합니다.
key파라미터로filmId를 사용하여 리스트 성능 최적화가 잘 되어 있습니다.
144-152: LGTM!
FlintTheme으로 래핑된 Preview가 적절히 구성되어 있습니다.app/src/main/java/com/flint/core/designsystem/component/view/FlintSearchEmptyView.kt (3)
35-39: 텍스트를 파라미터로 주입한 변경이 적절합니다.
동적 상태에 대응하기 쉬워졌습니다.
47-49: Preview도 새 시그니처에 맞게 잘 갱신되었습니다.
21-21: 모든 호출부가 이미 새 시그니처에 맞게 업데이트되어 있어 추가 조치가 필요하지 않습니다. Preview 함수 내 호출(Line 47-49)에서title파라미터가 올바르게 전달되고 있으며, 다른 호출부는 존재하지 않습니다.Likely an incorrect or invalid review comment.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
| @Composable | ||
| fun AddFilmRoute( | ||
| paddingValues: PaddingValues, | ||
| navigateToCollectionCreate: () -> Unit, | ||
| ) { | ||
| AddFilmScreen( | ||
| onBackClick = {}, | ||
| ) | ||
| } |
There was a problem hiding this comment.
onBackClick이 빈 람다로 하드코딩되어 있고, 파라미터가 사용되지 않습니다.
paddingValues와 navigateToCollectionCreate가 전달되지만 실제로 사용되지 않습니다. onBackClick에 적절한 네비게이션 콜백을 연결해야 합니다.
🔧 제안하는 수정
`@Composable`
fun AddFilmRoute(
paddingValues: PaddingValues,
navigateToCollectionCreate: () -> Unit,
) {
AddFilmScreen(
- onBackClick = {},
+ onBackClick = navigateToCollectionCreate,
)
}만약 paddingValues가 필요 없다면 파라미터에서 제거하거나, 필요하다면 AddFilmScreen에 전달하여 적용해주세요.
🤖 Prompt for AI Agents
In `@app/src/main/java/com/flint/presentation/collectioncreate/AddFilmScreen.kt`
around lines 29 - 37, AddFilmRoute currently ignores its parameters and
hardcodes onBackClick to an empty lambda; update AddFilmRoute so it either
forwards paddingValues to AddFilmScreen (if layout spacing is needed) and/or
wires navigateToCollectionCreate into the onBackClick callback (e.g., pass
navigateToCollectionCreate as the onBackClick argument to AddFilmScreen), or if
paddingValues truly aren’t needed remove the unused parameter from AddFilmRoute
signature; ensure the unique symbols referenced are AddFilmRoute, AddFilmScreen,
onBackClick, paddingValues and navigateToCollectionCreate so reviewers can find
and verify the change.
| @Composable | ||
| fun AddFilmScreen(onBackClick: () -> Unit) { | ||
| var searchText by remember { mutableStateOf("") } | ||
| var selectedFilms = remember { mutableStateListOf<CollectionFilmUiModel>() } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
var 대신 val을 사용하세요.
mutableStateListOf는 내부적으로 변경 가능하므로 변수 자체는 재할당될 필요가 없습니다. var를 사용하면 의도치 않게 리스트 참조를 교체할 수 있어 상태 추적 버그가 발생할 수 있습니다.
♻️ 제안하는 수정
- var selectedFilms = remember { mutableStateListOf<CollectionFilmUiModel>() }
+ val selectedFilms = remember { mutableStateListOf<CollectionFilmUiModel>() }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| var selectedFilms = remember { mutableStateListOf<CollectionFilmUiModel>() } | |
| val selectedFilms = remember { mutableStateListOf<CollectionFilmUiModel>() } |
🤖 Prompt for AI Agents
In `@app/src/main/java/com/flint/presentation/collectioncreate/AddFilmScreen.kt`
at line 50, selectedFilms 변수는 mutableStateListOf로 내부가 변경 가능하므로 외부에서 참조를 재할당하지
않도록 var를 val로 변경하세요; AddFilmScreen.kt의 remember {
mutableStateListOf<CollectionFilmUiModel>() }를 사용하는 selectedFilms 선언을 var에서 val로
바꾸어 리스트 자체 재할당을 방지하고 Compose 상태 추적 불일치를 없애도록 수정하세요.
| val filmList = | ||
| remember { | ||
| mutableStateListOf( | ||
| CollectionFilmUiModel(1L, "https://buly.kr/DEaVFRZ", "해리포터 불의 잔", "마이크 뉴웰", "2005"), | ||
| CollectionFilmUiModel(2L, "https://buly.kr/2UkIDen", "인터스텔라", "크리스토퍼 놀란", "2014"), | ||
| CollectionFilmUiModel(3L, "https://buly.kr/FAeqqRB", "라라랜드", "데이미언 셔젤", "2016"), | ||
| CollectionFilmUiModel(4L, "https://buly.kr/DPVH2Ob", "라라랜드", "데이미언 셔젤", "2016"), | ||
| CollectionFilmUiModel(5L, "https://buly.kr/DEaVFRZ", "라라랜드", "데이미언 셔젤", "2016"), | ||
| CollectionFilmUiModel(6L, "https://buly.kr/DEaVFRZ", "라라랜드", "데이미언 셔젤", "2016"), | ||
| CollectionFilmUiModel(7L, "https://buly.kr/DEaVFRZ", "라라랜드", "데이미언 셔젤", "2016"), | ||
| CollectionFilmUiModel(8L, "https://buly.kr/DEaVFRZ", "라라랜드", "데이미언 셔젤", "2016"), | ||
| ) | ||
| } |
There was a problem hiding this comment.
p2
더미긴 하지만, 이거 #119 에서 했던 것처럼 리스트 분리해주시면 좋을 것 같습니다
📮 관련 이슈
📌 작업 내용
📸 스크린샷
Screen_Recording_20260116-063614_Flint.mp4
😅 미구현
🫛 To. 리뷰어
Summary by CodeRabbit
릴리스 노트
새로운 기능
개선 사항
✏️ Tip: You can customize this high-level summary in your review settings.