[Feat] FlintProgressBar 구현했어요 ~!

[giovannijunseokim]

📮 관련 이슈

• closed [Feat] FlintProgressBar #76

📌 작업 내용

• FlintProgressBar 구현

📸 스크린샷

스크린샷

🫛 To. 리뷰어

피자 열판 쏘겠습니다^^

허리피자.

가슴피자.

얼굴피자.

어깨피자.

다리피자.

주름피자.

형편피자.

인생피자.

팔자피자.

웃음피자.

2026년 새해 건강과 행복이 함께 하시길 기원 합니다.

🍂🍁~^^~* 🍃🌾

세상 살아 가면서

천만번 해도 부족한 말.

😊감사 합니다😊

🌻사랑 합니다🌻

🍀고맙 습니다🍀

🌹건강 하세요🌹

🌿행복 하세요🌿

Summary by CodeRabbit

릴리스 노트

• 새로운 기능
  • 진행 상황을 시각적으로 표시하는 진행 바 UI 컴포넌트가 추가되었습니다. 이 컴포넌트는 0%부터 100%까지의 다양한 진행 상태를 지원하며, 테마 기반의 색상으로 디자인되었습니다. 컴포넌트 미리보기를 통해 여러 진행 상태를 확인할 수 있습니다.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

새로운 Jetpack Compose UI 컴포넌트 FlintProgressBar를 추가하는 변경사항입니다. 회색 배경 트랙과 진행 상태에 따라 너비가 조정되는 컬러 포그라운드 레이어로 구성된 진행률 표시줄을 구현하며, 다양한 진행 상태를 보여주는 프리뷰를 포함합니다.

Changes

응집된 파일 / 파일 목록	변경 요약
FlintProgressBar 컴포넌트 추가 app/src/main/java/com/flint/core/designsystem/component/progressbar/FlintProgressBar.kt	FlintProgressBar(progress: Float, modifier: Modifier) 공개 컴포저블 함수 추가. 두 계층 구조의 진행률 표시줄 구현 (회색 배경 트랙: gray600, 컬러 포그라운드: secondary400). 0%, 25%, 50%, 75%, 100% 상태를 시연하는 프리뷰 및 PreviewParameterProvider 포함

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

🧩 Component, Feat ✨

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 제목이 변경 사항의 주요 내용을 명확하게 반영하고 있습니다. 'FlintProgressBar 구현'이라는 핵심 작업을 직관적으로 전달합니다.
Description check	✅ Passed	PR 설명이 저장소의 템플릿 구조를 따르고 있으며, 관련 이슈, 작업 내용, 스크린샷이 모두 포함되어 있습니다.
Linked Issues check	✅ Passed	PR의 코드 변경사항이 링크된 이슈 #76의 요구사항을 충족합니다. FlintProgressBar 컴포넌트가 구현되었고, Preview와 함께 다양한 상태를 보여줍니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 FlintProgressBar 컴포넌트 구현이라는 명시된 목표에 부합하며, 범위 내의 변경입니다.

_{✏️ 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/progressbar/FlintProgressBar.kt (2)

19-21: progress 값 범위 검증 추가를 권장합니다.

fillMaxWidth(fraction)은 0~1 범위의 값을 기대합니다. 범위를 벗어난 값이 전달될 경우 예상치 못한 동작이 발생할 수 있으므로, coerceIn을 사용하여 입력값을 명시적으로 제한하는 것이 좋습니다.

♻️ 제안하는 수정안

 @Composable
 fun FlintProgressBar(
     progress: Float,
     modifier: Modifier = Modifier,
 ) {
+    val clampedProgress = progress.coerceIn(0f, 1f)
     Box(
         modifier =
             modifier
                 .height(4.dp)
                 .clip(CircleShape)
                 .background(FlintTheme.colors.gray600),
     ) {
         Box(
             modifier =
                 Modifier
-                    .fillMaxWidth(progress)
+                    .fillMaxWidth(clampedProgress)
                     .fillMaxHeight()
                     .clip(CircleShape)
                     .background(FlintTheme.colors.secondary400),
         )
     }
 }

---

23-38: 접근성(Accessibility) 개선을 고려해 주세요.

스크린 리더 사용자를 위해 semantics modifier를 추가하면 더 좋은 사용자 경험을 제공할 수 있습니다. 현재 구현은 기능적으로 정상 동작하지만, 접근성 요구사항이 있는 프로젝트라면 고려해 보세요.

♻️ 접근성 개선 예시

import androidx.compose.foundation.progressSemantics

// Box에 semantics 추가
Box(
    modifier =
        modifier
            .progressSemantics(progress)
            .height(4.dp)
            .clip(CircleShape)
            .background(FlintTheme.colors.gray600),
) {
    // ...
}

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ada0a48 and fb591a9.

📒 Files selected for processing (1)

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

🧰 Additional context used

🧬 Code graph analysis (1)

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

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

• FlintTheme (8-16)

🔇 Additional comments (3)

app/src/main/java/com/flint/core/designsystem/component/progressbar/FlintProgressBar.kt (3)

1-16: LGTM!

import 구성이 적절하며, 필요한 Compose 컴포넌트와 테마 관련 의존성이 잘 정리되어 있습니다.

---

41-49: LGTM!

FlintTheme으로 올바르게 감싸고, PreviewParameter를 사용하여 다양한 진행 상태를 미리볼 수 있도록 잘 구현되었습니다.

---

51-53: LGTM!

경계값(0%, 100%)과 중간값들을 포함하여 다양한 진행 상태를 테스트할 수 있도록 잘 구성되었습니다.

[nahy-512]

굿 고생하셨습니다!

[ckals413]

LGTM 👍

[nahy-512]

피그마 확인해보니까 온보딩에서 쓰이는 프로그래스바랑 컬렉션 상세보기에 쓰이는 프로그래스바 비활성 부분 Radius가 다르네요!
디쌤 확인 후 Shape를 다르게 식으로 커스텀할 수 있게 해주셔도 좋을 것 같습니다ㅎㅎ 일단은 머지할게요~