PrezelBadge 구현

[HamBeomJoon]

📌 작업 내용

PrezelBadge 컴포저블 구현

• Small: 점(dot) 표시
• Regular: 숫자 텍스트 표시

Badge 상태 처리

• Disabled > Active > Default 우선순위 적용

Preview 6종 추가

• Small/Regular × Active/Disabled 조합

🧩 관련 이슈

• close PrezelBadge 구현 #30

📸 스크린샷

• Dark.textLarge로 했습니다

📢 논의하고 싶은 내용

• Regular Badge의 숫자를 Int로 받을지, String으로 받을지 어떻게할까요? 그리고 최댓값 같은게 있을까요?
• Size를 text가 있을때 Regular, 없을때 Small로 해서 Size enum class를 없애는 게 나을까요?

Summary by CodeRabbit

• 새로운 기능

  • 뱃지 UI 컴포넌트 추가 — SMALL/REGULAR 크기, 카운트 표시 및 활성/비활성 상태 지원

• 개선 사항

  • 아바타 아이콘 크기 확대(정규: 48→64, 소형: 24→32) 및 기본 아이콘 색상 조정

• 권한 변경

  • 앱에 인터넷 권한(INTERNET) 추가

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

[coderabbitai]

Walkthrough

AndroidManifest.xml에 android.permission.INTERNET 사용 권한이 추가되었습니다. PrezelAvatar의 아이콘 크기가 REGULAR 48.dp→64.dp, SMALL 24.dp→32.dp로 조정되었고 DefaultAvatarIcon의 tint가 borderMedium에서 iconDisabled로 변경되었습니다. 새 Compose 컴포넌트 PrezelBadge와 enum PrezelBadgeSize(SMALL, REGULAR)가 추가되었으며, active/disabled에 따른 색상 결정 로직, SMALL 도트 렌더러 및 REGULAR 숫자 배지 렌더러(패딩 및 최소 크기 포함)와 미리보기들이 포함됩니다. detekt 설정에 MatchingDeclarationName 규칙이 추가되었으나 active: false로 비활성화되어 있습니다.

Possibly related PRs

• Color System 설계 및 적용 #10: core/designsystem 모듈의 UI 컴포넌트 및 테마 타입(PrezelTheme, 색상/간격/텍스트 스타일) 변경과 직접적인 코드 수준 연관이 있어 PrezelBadge 및 디자인시스템 조정과 관련됩니다.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	INTERNET 권한 추가, Avatar 아이콘 크기 변경, Detekt 설정 변경이 이슈 #30의 BadgeBadge 구현 범위 외의 변경사항입니다.	INTERNET 권한, PrezelAvatar 업데이트, Detekt 설정 변경 등은 별도 이슈로 분리하거나 각각의 필요성을 명확히 설명해주세요.
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 (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	제목이 PR의 주요 변경 사항인 PrezelBadge 컴포넌트 구현을 명확하게 요약하고 있습니다.
Description check	✅ Passed	PR 설명이 작업 내용, 관련 이슈, 스크린샷, 논의 사항을 포함하여 템플릿의 모든 주요 섹션을 완성했습니다.
Linked Issues check	✅ Passed	코드 변경사항이 이슈 #30의 요구사항을 충족합니다: Prezel 테마가 적용된 PrezelBadge 컴포넌트 구현, Small(도트)과 Regular(숫자) 두 가지 변형 제공 완료.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

_{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
`@Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/badge/PrezelBadge.kt`:
- Around line 49-67: The REGULAR branch uses .size(dimension) then .padding(...)
which constrains the content area; change it to allow the badge to size to its
text by replacing the fixed .size(dimension) with a minimum height constraint
(use defaultMinSize(minHeight = dimension) or defaultMinSize(minHeight = 20.dp))
and apply .background(...) then .padding(horizontal = 6.dp, vertical = 2.dp) so
the modifier on the PrezelBadgeSize.REGULAR case (look for
PrezelBadgeSize.REGULAR, modifier, dimension, PrezelTheme.shapes.V1000, and the
Text block) uses defaultMinSize + background + padding to avoid clipping and let
the badge expand with its text.

🧹 Nitpick comments (2)

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/badge/PrezelBadgeSize.kt (1)

8-16: PrezelBadgeActive와 PrezelBadgeDisabled enum 대신 Boolean 사용을 고려하세요.

이진 상태(ON/OFF)에 대해 enum을 사용하는 것은 불필요한 복잡성을 추가합니다. Compose의 표준 패턴은 enabled: Boolean = true와 같은 Boolean 파라미터를 사용하는 것입니다.

현재 API:

PrezelBadge(active = PrezelBadgeActive.ON, disabled = PrezelBadgeDisabled.OFF)

권장 API:

PrezelBadge(isActive = true, enabled = true)

Boolean을 사용하면 호출부가 더 간결해지고, Compose 컴포넌트의 관례(Button, TextField 등에서 enabled: Boolean 사용)와 일치합니다.

♻️ 제안된 리팩토링

-enum class PrezelBadgeActive {
-    ON,
-    OFF,
-}
-
-enum class PrezelBadgeDisabled {
-    ON,
-    OFF,
-}

그리고 PrezelBadge.kt에서:

`@Composable`
fun PrezelBadge(
    modifier: Modifier = Modifier,
    text: String? = null,
    size: PrezelBadgeSize = PrezelBadgeSize.REGULAR,
    isActive: Boolean = false,
    enabled: Boolean = true,
)

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/badge/PrezelBadge.kt (1)

82-84: Preview 함수를 private으로 변경하세요.

다른 컴포넌트의 Preview 함수들(PrezelAvatarSizePreview, PrezelAvatarTypePreview)과 일관성을 위해 private 접근 제한자를 추가하세요.

♻️ 제안된 수정

 `@ThemePreview`
 `@Composable`
-fun PrezelBadgePreview() {
+private fun PrezelBadgePreview() {

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In
`@Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/PrezelBadge.kt`:
- Around line 80-87: The Box modifier currently applies size before padding
(modifier.size(badgeSize).background(...).padding(...)), which makes padding
consume space inside the fixed badgeSize; change this so padding is outside the
fixed size or make the badge size content-aware: either move .padding(...)
before .size(badgeSize) to treat padding as external margin, or replace
.size(badgeSize) with a content-flexible constraint (e.g.,
defaultMinSize/minWidth/minHeight using badgeSize as minimum) and keep padding
inside; update the modifier chain in PrezelBadge (the Box modifier) accordingly
so text layout matches the intended behavior.
- Around line 110-171: The PrezelBadgePreview function exceeds Detekt's 40-line
limit; refactor it by either splitting the single PrezelBadgePreview into
multiple smaller `@Composable` previews (e.g., PrezelBadgePreviewSmallStates,
PrezelBadgePreviewRegularStates) each rendering a subset of the Rows, or
simplify the layout by removing per-Row padding and using
Column(verticalArrangement = Arrangement.spacedBy(8.dp)) inside PrezelTheme to
reduce lines; update or remove redundant Row wrappers as needed to bring each
preview under the 40-line threshold while keeping the same badge examples and
using the existing PrezelBadge, PrezelBadgeSize and PrezelTheme symbols.

🧹 Nitpick comments (1)

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/PrezelBadge.kt (1)

33-48: 고정 크기로 인한 텍스트 오버플로우 가능성 검토 필요

REGULAR 배지의 크기가 20.dp로 고정되어 있어, 두 자릿수 이상의 텍스트(예: "99", "100")가 표시될 경우 텍스트가 잘리거나 레이아웃이 깨질 수 있습니다.

PR 논의 항목에서 언급된 "최댓값" 관련 결정에 따라, 다음 중 하나를 고려해 주세요:

1. 텍스트 길이에 따라 동적으로 너비가 조절되도록 widthIn(min = 20.dp) 사용
2. 최댓값 초과 시 "9+" 또는 "99+" 형식으로 표시하는 로직 추가

♻️ 동적 너비 적용 예시

     val badgeSize = when (size) {
         PrezelBadgeSize.SMALL -> 8.dp
-        PrezelBadgeSize.REGULAR -> 20.dp
+        PrezelBadgeSize.REGULAR -> 20.dp  // height만 사용, width는 동적으로 처리
     }

PrezelNumberBadge에서 Modifier.size(badgeSize) 대신 Modifier.height(badgeSize).widthIn(min = badgeSize)를 사용하는 방안을 검토해 주세요.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In
`@Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/PrezelBadge.kt`:
- Around line 103-110: The active and default branches of prezelBadgeColors
currently hard-code PrezelColorScheme.Light.bgRegular for the second color,
which ignores dark theme; replace those uses of
PrezelColorScheme.Light.bgRegular with the theme-aware value from
PrezelTheme.colors (e.g., PrezelTheme.colors.bgRegular or the appropriate
PrezelTheme.colors.text* value if that second element is intended as text color)
so both active and else branches use PrezelTheme.colors instead of
PrezelColorScheme.Light.

♻️ Duplicate comments (1)

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/PrezelBadge.kt (1)

83-90: 고정 size 내부에 padding 적용으로 콘텐츠 영역 축소 가능

size() 뒤에 padding()을 적용하면 내부 텍스트 영역이 줄어듭니다. 의도한 동작인지 확인해 주세요.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In
`@Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/PrezelBadge.kt`:
- Around line 75-82: 현재 Box의 modifier에서 defaultMinSize(20.dp)가 minWidth만 20.dp로
설정하고 있어 최소 높이가 지정되지 않습니다; PrezelBadge의 높이도 보장하려면 modifier 체인에서 defaultMinSize를
명시적 매개변수로 호출하여 minWidth와 minHeight를 모두 20.dp로 설정하거나 defaultMinSize(minWidth =
20.dp, minHeight = 20.dp)처럼 수정하고, 변경은 PrezelBadge.kt의 Box 블록과 해당 modifier 호출을
업데이트하세요.

♻️ Duplicate comments (1)

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/PrezelBadge.kt (1)

92-101: 하드코딩된 PrezelColorScheme.Dark.textLarge 사용에 대한 의도 확인 필요

이전 리뷰에서 PrezelColorScheme.Light 하드코딩이 지적되었고, 현재 Dark로 변경되었지만 여전히 테마 시스템(PrezelTheme.colors)을 우회하고 있습니다.

배지 배경이 항상 어두운 색상(interactiveRegular, solidBlack)이라 밝은 텍스트가 필요한 것으로 보이지만, textOnPrimary나 textInverse 같은 시맨틱 컬러 토큰이 있다면 그것을 사용하는 것이 테마 일관성에 더 좋습니다.

의도한 디자인이라면 주석으로 이유를 남겨주시면 유지보수에 도움이 됩니다.

🧹 Nitpick comments (1)

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/PrezelBadge.kt (1)

28-51: count 파라미터가 SMALL 사이즈에서 불필요하게 요구됨

PrezelBadgeSize.SMALL인 경우 count 값이 사용되지 않지만, 현재 API에서는 항상 전달해야 합니다. PR 설명에 언급된 "Size enum을 제거하고 텍스트 존재 여부로 Small/Regular 결정" 논의와도 관련이 있습니다.

🔧 대안 1: count를 nullable로 변경

 `@Composable`
 fun PrezelBadge(
     active: Boolean,
-    count: Int,
+    count: Int? = null,
     modifier: Modifier = Modifier,
     size: PrezelBadgeSize = PrezelBadgeSize.REGULAR,
     disabled: Boolean = false,
 ) {

🔧 대안 2: size 제거 후 count 유무로 결정

`@Composable`
fun PrezelBadge(
    active: Boolean,
    modifier: Modifier = Modifier,
    count: Int? = null,
    disabled: Boolean = false,
) {
    // count가 null이면 SMALL(dot), 있으면 REGULAR(number)
}