🔀 :: (#249) - 프로그램, 프로그램 참가자 관리 페이지의 UI 요소인 Box와 리스트 아이템이 horizontalScroll이 될 수 있게 수정하였습니다.

[audgns10]

💡 개요

• 프로그램, 프로그램 참가자 관리 페이지의 UI 요소인 Box와 리스트 아이템이 horizontalScroll이 될 수 있도록 수정이 필요해보였습니다.

📃 작업내용

• 프로그램, 프로그램 참가자 관리 페이지의 UI 요소인 Box와 리스트 아이템이 horizontalScroll이 될 수 있게 수정을 하였습니다.

  • ScrollState를 별도로 생성하지 않고, 상위 컴포저블에서 하나의 ScrollState를 생성하여 하위 컴포저블들에 전달하도록 변경하여 중첩 스크롤 에러를 일으키지 않고 수정할 수 있었습니다.
  2024-12-16.10.49.01.mov

🔀 변경사항

• chore HomeDetailProgramParticipantList
• chore HomeDetailProgramParticipantListItem
• chore ProgramList
• chore ProgramListItem
• chore StandardProgramListItem
• chore HomeDetailStandardProgramParticipantListItem
• chore HomeDetailProgramScreen
• chore HomeDetail(Training and Standard)ProgramParticipantScreen

🙋‍♂️ 질문사항

• 개선할 점, 오타, 코드에 이상한 부분이 있다면 Comment 달아주세요.

🍴 사용방법

• x

🎸 기타

• x

Summary by CodeRabbit

• 새로운 기능

  • HomeDetailProgramScreen, HomeDetailStandardProgramParticipantScreen, HomeDetailTrainingProgramParticipantScreen에서 수평 스크롤 기능이 향상되었습니다.
  • 프로그램 참가자 목록 및 표준 프로그램 목록에 대한 수평 스크롤 상태 관리가 추가되었습니다.

• 버그 수정

  • UI 상태 및 오류 처리 로직이 유지되어 데이터가 없거나 로드 실패 시 사용자에게 피드백을 제공합니다.

• 문서화

  • 함수 시그니처가 업데이트되어 수평 스크롤 상태를 필수 매개변수로 요구합니다.

[coderabbitai]

Walkthrough

이 풀 리퀘스트는 홈 모듈의 여러 화면과 컴포넌트에서 수평 스크롤 상태 관리를 개선하는 변경 사항을 포함하고 있습니다. 주요 변경 사항은 ScrollState를 명시적으로 전달하고, 다양한 프로그램 및 참가자 목록 컴포넌트의 스크롤 동작을 일관되게 만드는 것에 중점을 두고 있습니다. 이러한 수정은 사용자 인터페이스의 스크롤 경험을 향상시키고, 컴포넌트 간 스크롤 상태 공유를 가능하게 합니다.

Changes

파일 경로	변경 요약
.../HomeDetailProgramScreen.kt	horizontalScrollState 파라미터 추가, 스크롤 상태 관리 개선
.../HomeDetailStandardProgramParticipantScreen.kt	scrollState 파라미터 도입, 수평 스크롤 제어
.../HomeDetailTrainingProgramParticipantScreen.kt	scrollState 파라미터 추가, 스크롤 상태 통합
.../component/HomeDetailProgramParticipantList.kt	수평 스크롤 상태 파라미터 도입
.../component/ProgramList.kt	horizontalScrollState 파라미터 추가, 스크롤 상태 관리
기타 관련 컴포넌트	스크롤 상태 관리를 위한 유사한 변경

Possibly related issues

• 프로그램, 프로그램 참가자 관리 페이지의 UI 요소인 Box와 리스트 아이템이 horizontalScroll이 될 수 있게 합니다. #249: 프로그램 및 참가자 관리 페이지의 수평 스크롤 기능 개선과 직접적으로 연관됨

Possibly related PRs

• 🔀 :: (#177) - 홈 스크린을 퍼블리싱했습니다. #179: 홈 화면 및 탐색 매개변수 수정과 관련
• 🔀 :: (#193) - 박람회 -> 프로그램 버튼 클릭시 나와야하는 화면을 퍼블리싱하였습니다. #196: 새로운 탐색 경로 및 화면 도입
• 🔀 :: (#236) - 프로그램 관리 페이지의 UI가 디자인 요구사항과 맞지않은 부분이 존재하여 해당 부분을 수정하였습니다. #237: 프로그램 참가자 화면 UI 개선
• 🔀 :: (#234) - 각 프로그램 참가자 관리 페이지 부분을 전체적으로 리팩터링 하였습니다. #247: 참가자 관리 페이지 리팩토링

Suggested labels

✨ Feature

Suggested reviewers

• diejdkll
• Chaejongin12
• kimjeakwan

Poem

🐰 스크롤의 토끼, 경로를 찾다
상태를 전달하며 춤을 추네
컴포넌트마다 흐르는 리듬
부드러운 스크롤, 사용자의 미소
코드의 토끼, 여정을 노래해! 🌈

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🔭 Outside diff range comments (1)

feature/home/src/main/java/com/school_of_company/home/view/component/HomeDetailProgramParticipantListItem.kt (1)

Line range hint 22-85: 코드 중복을 제거할 수 있습니다.

HomeDetailProgramParticipantListItem과 HomeDetailStandardProgramParticipantListItem이 매우 유사한 구조를 가지고 있습니다. 공통 컴포넌트를 추출하여 재사용하는 것이 좋습니다.

다음과 같은 리팩토링을 제안합니다:

@Composable
private fun ParticipantListItemContent(
    index: Int,
    name: String,
    organization: String,
    position: String,
    status: Boolean,
    entryTime: String?,
    leaveTime: String?,
    horizontalScrollState: ScrollState,
    modifier: Modifier = Modifier
) {
    // 공통 UI 로직 구현
}

🧹 Nitpick comments (9)

feature/home/src/main/java/com/school_of_company/home/view/component/HomeDetailProgramParticipantList.kt (1)

Line range hint 69-72: 프리뷰 함수를 구현해 주세요.

빈 프리뷰 함수는 컴포넌트 개발 및 테스트에 도움이 되지 않습니다. 샘플 데이터를 사용하여 프리뷰를 구현하는 것이 좋습니다.

feature/home/src/main/java/com/school_of_company/home/view/component/HomeDetailStandardProgramParticipantListItem.kt (1)

Line range hint 28-85: UI 유연성 개선이 필요합니다.

1. 고정된 너비 값들은 다양한 화면 크기에서 문제를 일으킬 수 있습니다. 상대적인 크기나 동적 계산을 고려해보세요.
2. 상태 텍스트를 더 명확하게 표현할 수 있습니다.

다음과 같은 개선을 제안합니다:

- Text(
-     text = if (data.status) "출석" else "미출석",
-     style = typography.captionRegular2,
-     color = colors.black,
-     modifier = Modifier.width(120.dp)
- )
+ Text(
+     text = if (data.status) "출석 완료" else "미출석",
+     style = typography.captionRegular2,
+     color = if (data.status) colors.primary else colors.error,
+     modifier = Modifier.width(120.dp)
+ )

또한 고정 너비 대신 다음과 같은 접근을 고려해보세요:

private val columnWeights = listOf(0.1f, 0.15f, 0.2f, 0.15f, 0.15f, 0.25f, 0.25f)

feature/home/src/main/java/com/school_of_company/home/view/component/HomeDetailProgramParticipantListItem.kt (1)

107-109: 날짜 형식을 표준화하는 것이 좋습니다.

프리뷰 데이터의 날짜 형식(2024-09-12 T 08:30)이 일반적인 ISO 8601 형식과 다릅니다. 표준 형식(2024-09-12T08:30:00)을 사용하는 것이 좋습니다.

feature/home/src/main/java/com/school_of_company/home/view/component/StandardProgramListItem.kt (1)

33-33: 스크롤 상태 매개변수에 대한 문서화 추가 필요

부모 컴포저블에서 전달되는 스크롤 상태를 명시적으로 요구하도록 변경된 것은 좋은 접근입니다. 하지만 이 매개변수의 용도와 중요성을 설명하는 KDoc 문서를 추가하면 좋겠습니다.

+/**
+ * @param horizontalScrollState 부모 컴포저블에서 관리되는 가로 스크롤 상태
+ * 중첩된 스크롤 문제를 방지하기 위해 상위에서 전달됨
+ */

feature/home/src/main/java/com/school_of_company/home/view/component/ProgramListItem.kt (1)

34-34: 스크롤 상태 매개변수에 대한 문서화 추가 필요

StandardProgramListItem과 일관성을 유지하기 위해 horizontalScrollState 매개변수에 대한 문서화가 필요합니다.

+/**
+ * @param horizontalScrollState 부모 컴포저블에서 관리되는 가로 스크롤 상태
+ * 중첩된 스크롤 문제를 방지하기 위해 상위에서 전달됨
+ */

feature/home/src/main/java/com/school_of_company/home/view/HomeDetailStandardProgramParticipantScreen.kt (1)

273-278: 성공 상태의 코드 구조 개선 제안

Success 상태의 처리 로직을 별도의 컴포저블로 추출하면 코드의 가독성과 유지보수성이 향상될 것 같습니다.

+@Composable
+private fun SuccessContent(
+    data: ImmutableList<StandardProgramAttendListResponseEntity>,
+    horizontalScrollState: ScrollState
+) {
+    HomeDetailStandardParticipantList(
+        item = data,
+        horizontalScrollState = horizontalScrollState
+    )
+}

 when (standardProgramAttendListUiState) {
     is StandardProgramAttendListUiState.Loading -> Unit
     is StandardProgramAttendListUiState.Success -> {
-        HomeDetailStandardParticipantList(
-            item = standardProgramAttendListUiState.data.toImmutableList(),
-            horizontalScrollState = scrollState
-        )
+        SuccessContent(
+            data = standardProgramAttendListUiState.data.toImmutableList(),
+            horizontalScrollState = scrollState
+        )
     }

feature/home/src/main/java/com/school_of_company/home/view/HomeDetailProgramScreen.kt (1)

18-18: 사용되지 않는 import 문이 있습니다.

wrapContentWidth와 TextOverflow import가 추가되었지만 코드에서 사용되지 않는 것으로 보입니다.

불필요한 import 문을 제거하는 것이 좋겠습니다.

Also applies to: 35-35

feature/home/src/main/java/com/school_of_company/home/view/component/ProgramList.kt (2)

51-52: 코드 재사용성 개선을 위한 제안

ProgramList와 StandardProgramList가 매우 유사한 구조를 가지고 있습니다. 공통 로직을 추출하여 재사용 가능한 컴포넌트로 만드는 것을 고려해보세요.

다음과 같은 리팩토링을 제안드립니다:

@Composable
private fun <T> CommonProgramList(
    modifier: Modifier = Modifier,
    items: ImmutableList<T>,
    horizontalScrollState: ScrollState,
    itemContent: @Composable (Int, T) -> Unit
) {
    ExpoAndroidTheme { colors, _ ->
        LazyColumn(
            modifier = modifier
                .fillMaxSize()
                .background(color = colors.white)
                .padding(horizontal = 16.dp)
        ) {
            itemsIndexed(items) { index, item ->
                itemContent(index + 1, item)
            }
        }
    }
}

Also applies to: 66-67

---

87-88: 프리뷰 기능 개선 제안

현재 프리뷰가 기본 상태만 보여주고 있습니다. 다양한 스크롤 상태와 데이터 상태를 보여주는 추가 프리뷰를 구현하면 좋을 것 같습니다.

다음과 같은 추가 프리뷰를 제안드립니다:

@Preview(name = "스크롤된 상태")
@Composable
private fun ProgramListScrolledPreview() {
    val scrollState = rememberScrollState()
    scrollState.scrollTo(100) // 스크롤된 상태 시뮬레이션
    ProgramList(
        trainingItem = persistentListOf(/* 더 많은 테스트 데이터 */),
        navigateToTrainingProgramDetail = {},
        horizontalScrollState = scrollState
    )
}

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between af7d6b4 and e16477c.

📒 Files selected for processing (9)

• feature/home/src/main/java/com/school_of_company/home/view/HomeDetailProgramScreen.kt (5 hunks)
• feature/home/src/main/java/com/school_of_company/home/view/HomeDetailStandardProgramParticipantScreen.kt (2 hunks)
• feature/home/src/main/java/com/school_of_company/home/view/HomeDetailTrainingProgramParticipantScreen.kt (2 hunks)
• feature/home/src/main/java/com/school_of_company/home/view/component/HomeDetailProgramParticipantList.kt (5 hunks)
• feature/home/src/main/java/com/school_of_company/home/view/component/HomeDetailProgramParticipantListItem.kt (2 hunks)
• feature/home/src/main/java/com/school_of_company/home/view/component/HomeDetailStandardProgramParticipantListItem.kt (1 hunks)
• feature/home/src/main/java/com/school_of_company/home/view/component/ProgramList.kt (6 hunks)
• feature/home/src/main/java/com/school_of_company/home/view/component/ProgramListItem.kt (2 hunks)
• feature/home/src/main/java/com/school_of_company/home/view/component/StandardProgramListItem.kt (2 hunks)

🔇 Additional comments (10)

feature/home/src/main/java/com/school_of_company/home/view/component/HomeDetailProgramParticipantList.kt (1)

22-23: 스크롤 상태 관리가 적절히 구현되었습니다.

부모 컴포저블에서 단일 ScrollState를 생성하여 자식 컴포넌트로 전달하는 방식은 중첩 스크롤 문제를 방지할 수 있는 좋은 접근 방식입니다.

Also applies to: 46-47

feature/home/src/main/java/com/school_of_company/home/view/component/StandardProgramListItem.kt (1)

111-112: 미리보기 함수의 스크롤 상태 처리가 적절함

미리보기 함수에서 rememberScrollState()를 사용하여 스크롤 상태를 제공하는 것이 올바르게 구현되었습니다.

feature/home/src/main/java/com/school_of_company/home/view/component/ProgramListItem.kt (1)

140-141: 미리보기 함수의 스크롤 상태 처리가 적절함

미리보기 함수에서 스크롤 상태를 올바르게 제공하고 있습니다.

feature/home/src/main/java/com/school_of_company/home/view/HomeDetailStandardProgramParticipantScreen.kt (1)

212-212: 스크롤 상태가 적절하게 적용됨

Box 컴포넌트 내의 horizontalScroll 수정자에 scrollState를 사용한 것이 적절합니다.

feature/home/src/main/java/com/school_of_company/home/view/HomeDetailTrainingProgramParticipantScreen.kt (2)

214-214: 수평 스크롤 기능이 적절하게 구현되었습니다.

헤더 행에 수평 스크롤을 추가한 것이 좋습니다. 스크롤 상태를 공유함으로써 사용자 경험이 향상될 것으로 예상됩니다.

---

275-280: 리스트 컴포넌트와 스크롤 상태 동기화가 잘 구현되었습니다.

헤더와 리스트 아이템 간의 스크롤 상태를 공유하여 일관된 스크롤 경험을 제공합니다.

feature/home/src/main/java/com/school_of_company/home/view/HomeDetailProgramScreen.kt (2)

161-161: Box의 너비 설정이 적절합니다.

Box에 fillMaxWidth()를 추가하여 일관된 레이아웃을 유지하도록 한 것이 좋습니다.

---

243-244: 프로그램 리스트의 수평 스크롤 구현이 일관성 있게 적용되었습니다.

StandardProgramList와 ProgramList 모두에 horizontalScrollState를 전달하여 일관된 스크롤 동작을 구현한 것이 좋습니다.

Also applies to: 300-301

feature/home/src/main/java/com/school_of_company/home/view/component/ProgramList.kt (2)

3-3: 필요한 import 문이 올바르게 추가되었습니다!

ScrollState 관련 기능을 위한 import 문이 적절하게 추가되었습니다.

Also applies to: 9-9

---

24-25: 스크롤 상태 관리 검증이 필요합니다.

horizontalScrollState를 상위 컴포저블에서 하위로 전달하는 방식은 적절하나, 불필요한 리컴포지션이 발생하지 않는지 확인이 필요합니다.

다음 스크립트로 다른 파일들에서 ProgramList의 사용 패턴을 확인해보겠습니다:

Also applies to: 39-40

✅ Verification successful

Let me check how the scrollState is managed in HomeDetailProgramScreen to verify recomposition concerns.

---

스크롤 상태 관리가 적절하게 구현되어 있습니다.

HomeDetailProgramScreen에서 scrollState가 rememberScrollState()를 통해 적절히 생성되어 있고, 컴포저블 파라미터로 전달되어 재사용되고 있습니다. 불필요한 리컴포지션 우려는 없어 보입니다.

• scrollState는 컴포저블의 최상위 레벨에서 한 번만 생성됨
• 여러 자식 컴포넌트에서 동일한 scrollState를 재사용하여 메모리 효율성 확보
• remember를 통한 상태 보존으로 리컴포지션 최적화가 이루어짐

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# ProgramList 컴포저블의 사용 패턴 확인
ast-grep --pattern 'ProgramList($$$)' 

Length of output: 2402

---

Script:

#!/bin/bash
# Check how scrollState is managed in HomeDetailProgramScreen
ast-grep --pattern 'val scrollState = $$$'

Length of output: 44

---

Script:

#!/bin/bash
# HomeDetailProgramScreen에서 scrollState 선언과 사용을 확인
rg "scrollState" feature/home/src/main/java/com/school_of_company/home/view/HomeDetailProgramScreen.kt -A 2 -B 2

Length of output: 2384