[Feat] UnderImageProgressBar 구현

[giovannijunseokim]

📮 관련 이슈

• closed [Feat] UnderImageProgressBar #91

📌 작업 내용

• UnderImageProgressBar 구현

📸 스크린샷

스크린샷

Summary by CodeRabbit

새로운 기능

• 이미지 아래에 진행 상황을 시각적으로 표시하는 진행률 표시줄 컴포넌트가 추가되었습니다. 회색 배경 위에 테마 색상의 채우기 막대가 표시되며, 0부터 1.0까지의 다양한 진행 상태를 지원합니다.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

새로운 Jetpack Compose UI 컴포넌트인 UnderImageProgressBar가 추가됩니다. 이미지 아래에 진행률을 표시하는 컴포넌트로, 배경 박스와 원형 클립이 적용된 전경 진행률 바로 구성됩니다. 여러 진행 상태의 Preview를 포함합니다.

Changes

Cohort / File(s)	변경 사항
UnderImageProgressBar 컴포넌트 추가 app/src/main/java/com/flint/core/designsystem/component/progressbar/UnderImageProgressBar.kt	새로운 진행률 표시 컴포넌트 추가 (+55 줄): 두 레이어 박스 구조(회색 배경 + 테마 보조 색상의 진행률 표시), 원형 클립 적용, fillMaxWidth(progress)로 진행률 표현, 매개변수화된 Preview 포함(0, 0.25, 0.5, 0.75, 1.0)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• [Feat] FlintProgressBar 구현했어요 ~! #80: 동일한 패키지에 거의 동일한 구조(두 레이어 Box, 원형 클립, 같은 함수 서명 및 Preview 패턴)의 Jetpack Compose 진행률 바 컴포저블을 추가하는 PR

Suggested labels

🧩 Component, Feat ✨

Suggested reviewers

• nahy-512
• ckals413

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 타이틀은 UnderImageProgressBar 구현이라는 주요 변경 사항을 명확하게 설명하고 있습니다.
Description check	✅ Passed	PR 설명은 관련 이슈(#91), 작업 내용, 스크린샷을 포함하고 있으나 '미구현' 및 '리뷰어에게' 섹션이 누락되었습니다.
Linked Issues check	✅ Passed	PR의 코드 변경사항이 이슈 #91의 UnderImageProgressBar 컴포넌트 구현 요구사항을 충족합니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 UnderImageProgressBar 컴포넌트 구현이라는 이슈 #91의 범위 내에 있습니다.

_{✏️ 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: 1

🤖 Fix all issues with AI agents

In
`@app/src/main/java/com/flint/core/designsystem/component/progressbar/UnderImageProgressBar.kt`:
- Around line 19-21: UnderImageProgressBar currently accepts a Float progress
that may be outside 0..1 while fillMaxWidth expects a fraction in that range;
clamp the value before use by creating a safeProgress (e.g., val safeProgress =
progress.coerceIn(0f, 1f)) inside the UnderImageProgressBar function and use
safeProgress wherever the original progress value is passed to layout APIs like
fillMaxWidth to prevent unexpected layout behavior or crashes.

🧹 Nitpick comments (1)

app/src/main/java/com/flint/core/designsystem/component/progressbar/UnderImageProgressBar.kt (1)

23-27: 외부 Box에 기본 너비 설정을 고려해주세요.

현재 외부 Box에 기본적으로 fillMaxWidth()가 적용되어 있지 않습니다. Preview에서는 Modifier.fillMaxWidth()를 명시적으로 전달하고 있지만, 호출부에서 이를 누락하면 진행률 바가 제대로 렌더링되지 않을 수 있습니다.

♻️ 제안된 수정 사항

     Box(
         modifier =
             modifier
+                .fillMaxWidth()
                 .height(5.dp)
                 .background(FlintTheme.colors.gray700),
     ) {

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 64fb197 and e558313.

📒 Files selected for processing (1)

• app/src/main/java/com/flint/core/designsystem/component/progressbar/UnderImageProgressBar.kt

🔇 Additional comments (2)

app/src/main/java/com/flint/core/designsystem/component/progressbar/UnderImageProgressBar.kt (2)

29-36: Clip과 background 순서가 올바릅니다.

clip(CircleShape)이 background() 전에 적용되어 foreground 바의 양쪽 끝이 둥글게 처리됩니다. 구현이 적절합니다.

---

40-55: Preview 구현이 잘 되어 있습니다.

PreviewParameterProvider를 활용하여 다양한 진행 상태(0%, 25%, 50%, 75%, 100%)를 미리 볼 수 있도록 구성되어 있습니다. FlintTheme으로 감싸 테마 색상이 올바르게 적용됩니다.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

[nahy-512]

고생하셨습니다!
Base를 따로 안 만들고, CollectionDetail에서 쓰일 컴포넌트를 만들어주신 걸로 이해했는데 맞을까요?