PrezelTabs 구현

[HamBeomJoon]

📌 작업 내용

1. SecondaryTabRow + HorizontalPager 구현

   • HoriontalPager 스크롤가능한지 여부를 외부에서 받도록 했습니다.
   • 탭 클릭시 탭 1개씩 이동할때는 애니메이션 on, 2개 이상 이동할때는 애니메이션 off 처리했습니다.

2. Icon 4개 추가

🧩 관련 이슈

• close PrezelTabs 구현 #34

📸 스크린샷

• Medium Size

• Small Size

📢 논의하고 싶은 내용

Summary by CodeRabbit

• 새로운 기능
  • 재사용 가능한 탭 컴포넌트 추가 — 배지 표시, 크기 옵션(소형/일반) 및 페이저 연동 지원
  • 탭 클릭 시 인접 탭은 애니메이션, 먼 탭은 스크롤로 이동하는 거리 인식 네비게이션 적용
• 아이콘
  • 4종 신규 벡터 아이콘 추가 — 편집, 잠금, 설정, 저장소

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

[coderabbitai]

Walkthrough

디자인 시스템 핵심 모듈에 탭 컴포넌트와 아이콘 리소스를 추가합니다. PrezelTabs 컴포저블은 PrezelTabItem(label, badgeCount, enabled) 데이터 모델과 PrezelTabSize(Small, Regular) 열거형을 제공하며, PagerState 기반의 HorizontalPager와 SecondaryTabRow를 사용해 탭 네비게이션, 선택 인디케이터, 배지 표시 및 거리 기반 애니메이션/스크롤 동작을 구현합니다. 또한 edit, lock, setting, storage 아이콘을 나타내는 4개의 벡터 드로어블 리소스가 각 24×24dp, 색상 #6E737D로 추가되었습니다.

🚥 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 제목이 주요 변경사항(PrezelTabs 구현)과 완전히 관련되어 있으며, 명확하고 간결합니다.
Description check	✅ Passed	PR 설명이 모든 필수 섹션(작업 내용, 관련 이슈, 스크린샷)을 포함하고 있으며 완전합니다.
Linked Issues check	✅ Passed	코드 변경사항이 이슈 #34의 요구사항을 충족합니다: 테마가 적용된 기본 PrezelTabs 컴포넌트 구현.
Out of Scope Changes check	✅ Passed	모든 변경사항이 이슈 #34의 범위 내입니다: PrezelTabs 컴포넌트 구현과 관련 아이콘 4개 추가.

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

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{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/PrezelTabs.kt`:
- Line 49: 함수/컴포넌트 시그니처에서 잘못된 파라미터 이름 userScrolledEnabled 을 userScrollEnabled 로
바꾸고, PrezelTabs 컴포저블 내부와 호출부(특히 현재 리뷰에서 언급된 사용 지점: HorizontalPager 호출 부분 포함, 참고
심볼: PrezelTabs 및 HorizontalPager)에서 모든 참조를 동일하게 변경하여 Material3 HorizontalPager의
파라미터 이름과 일치시키세요; 즉 파라미터 선언, 기본값, 그리고 Line 72에 해당하는 사용 위치의 키 이름을
userScrollEnabled 로 통일하면 됩니다.

🧹 Nitpick comments (3)

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/PrezelTabs.kt (3)

34-41: 데이터 클래스와 Composable 함수 이름 충돌

PrezelTabItem 데이터 클래스(Line 35)와 private composable 함수(Line 112)가 동일한 이름을 사용하고 있습니다. 코드 가독성을 위해 private composable의 이름을 변경하는 것을 권장합니다.

♻️ 권장 수정

 `@Composable`
-private fun PrezelTabItem(
+private fun PrezelTabContent(
     item: PrezelTabItem,
     selected: Boolean,
     size: PrezelTabSize,
     onClick: () -> Unit,
 ) {

Line 101의 호출부도 함께 수정:

-            PrezelTabItem(
+            PrezelTabContent(
                 item = item,
                 selected = pagerState.currentPage == index,
                 size = size,
                 onClick = { onTabClick(index, item.enabled) },
             )

Also applies to: 111-134

---

152-159: 탭 크기에 따른 배지 크기 고려

현재 탭 크기와 관계없이 항상 PrezelBadgeSize.REGULAR를 사용하고 있습니다. PrezelTabSize.Small일 때 배지 크기도 조정하는 것이 시각적 균형에 더 적합할 수 있습니다. 디자인 의도에 따라 검토해 주세요.

♻️ 선택적 수정 제안

         if (badgeCount != null) {
             PrezelBadge(
                 active = false,
                 count = badgeCount,
-                size = PrezelBadgeSize.REGULAR,
+                size = if (size == PrezelTabSize.Small) PrezelBadgeSize.SMALL else PrezelBadgeSize.REGULAR,
                 disabled = !selected,
             )
         }

---

195-226: 비활성화된 탭 프리뷰 추가 권장

현재 프리뷰에서 enabled = false 상태의 탭이 포함되어 있지 않습니다. PR 설명의 스크린샷에서는 비활성화된 탭이 표시되어 있으므로, 이를 테스트하는 프리뷰를 추가하면 컴포넌트의 전체 기능을 확인하는 데 도움이 됩니다.

♻️ 비활성화 탭 포함 프리뷰 예시

`@ThemePreview`
`@Composable`
private fun PrezelTabWithDisabledPreview() {
    val tabs = persistentListOf(
        PrezelTabItem(label = "Label 0", badgeCount = 0),
        PrezelTabItem(label = "Label", enabled = false),
        PrezelTabItem(label = "Label", enabled = false),
    )
    val pagerState = rememberPagerState(initialPage = 0) { tabs.size }

    PrezelTheme {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(PrezelTheme.colors.bgRegular),
        ) {
            PrezelTabs(
                tabs = tabs,
                pagerState = pagerState,
                size = PrezelTabSize.Regular,
            ) { page ->
                Box(
                    modifier = Modifier.fillMaxSize(),
                    contentAlignment = Alignment.Center,
                ) {
                    Text("Page: $page")
                }
            }
        }
    }
}

[moondev03]

👍 👍