PrezelAccordion 구현

[HamBeomJoon]

📌 작업 내용

1. PrezelAccordion 구현

   • Header / Label / Content를 slot API로 제공
   • 펼침 상태에 따른 chevron rotation 애니메이션 적용
   • AnimatedVisibility 기반 expand / collapse 처리
   • Divider 표시 옵션 제공
   • Ripple 제거된 클릭 정책 적용

2. PrezelIcon 업데이트

   • 전체적으로 아이콘이 Outlined -> Filled로 변경되었습니다.

🧩 관련 이슈

• close PrezelAccordion 구현 #52

📸 스크린샷

2026-02-08.22.10.42.mov

Summary by CodeRabbit

릴리스 노트

• New Features

  • 새로운 Accordion 컴포넌트 추가: 확장/축소 애니메이션과 회전 아이콘을 가진 인터랙티브한 UI 요소 제공
  • 아이콘 라이브러리 확장: Edit, Lock, Menu, Search, Setting, Storage, Upload 등 다수 아이콘 추가 및 Info/Warning의 Filled·Outlined 변형 제공

• Style / Assets

  • 여러 기존 아이콘의 그래픽(벡터) 업데이트로 시각적 일관성 향상
  • 접근성용 문자열 리소스(아코디언 설명) 추가

• Previews

  • 상단바 미리보기 아이콘 갱신으로 데모 표현 개선

[coderabbitai]

Walkthrough

새로운 Compose 컴포넌트 PrezelAccordion(expanded 상태, 토글 콜백, 헤더/라벨/콘텐츠 콜러블 등 공개 API)와 관련 내부 프리뷰가 추가되었습니다. 다수의 아이콘 상수(예: Edit, Lock, Menu, Search, Setting, Storage, Upload)와 Info/Warning 변형( Filled/Outlined )이 PrezelIcons에 추가/재구성되었고, 여러 벡터 드로어블 XML 리소스가 업데이트·추가·삭제되었습니다. 또한 아코디언 접근성 설명 문자열 리소스가 추가되었습니다.

Possibly related PRs

• PrezelImage 구현 #45: PrezelIcons.kt의 아이콘 매핑 변경과 드로어블 리소스 추가/수정 내용이 겹칩니다.
• Prezel Icons 정의 #19: 디자인 시스템 아이콘 매핑 및 벡터 드로어블 리소스 수정이 직접적으로 일치합니다.
• PrezelTopAppBar 구현 #21: 동일한 TopAppBar.kt 파일과 프리뷰에서 아이콘 사용이 변경되어 코드 레벨에서 연관됩니다.

🚥 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	제목은 변경의 핵심 내용인 PrezelAccordion 구현을 명확하게 설명하고 있으며, 간결하고 구체적입니다.
Description check	✅ Passed	PR 설명이 템플릿 구조를 따르며, 작업 내용, 관련 이슈, 스크린샷이 포함되어 있고 충분히 상세합니다.
Linked Issues check	✅ Passed	PR의 코드 변경사항이 연결된 이슈 #52의 요구사항을 충족합니다. PrezelAccordion 컴포넌트가 구현되었고, header/label/content 슬롯 API가 제공되며, 확장/축소 애니메이션이 적용되었습니다.
Out of Scope Changes check	✅ Passed	Icon 변경은 Accordion 구현과 관련된 필요한 변경사항입니다. TopAppBar 프리뷰 업데이트도 관련 변경입니다. 모든 변경사항이 이슈 범위 내에 있습니다.

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

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

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

42-79: 접근성(Accessibility): 확장/축소 상태에 대한 시맨틱 정보 누락

클릭 가능한 헤더 영역에 Role 및 확장 상태 시맨틱이 없어, 스크린 리더 사용자가 이 컴포넌트가 아코디언인지, 현재 펼쳐져 있는지 접혀 있는지 알 수 없습니다. Modifier.semantics를 추가하여 접근성을 개선하는 것을 권장합니다.

♿ 시맨틱 정보 추가 제안

PrezelAccordionHeader의 Row modifier에 시맨틱을 추가하거나, 상위 PrezelAccordion에서 처리할 수 있습니다:

+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.semantics.role
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.stateDescription

PrezelAccordionHeader에 expanded 파라미터를 전달하고:

 Row(
     modifier = Modifier
         .fillMaxWidth()
         .defaultMinSize(minHeight = 48.dp)
+        .semantics {
+            role = Role.Button
+        }
         .clickable(
             enabled = enabled,
             indication = null,
             interactionSource = remember { MutableInteractionSource() },
             onClick = onClick,
         ),
     verticalAlignment = Alignment.CenterVertically,
 )

---

47-47: enabled = false 상태에서 시각적 피드백 부재

enabled 파라미터가 존재하지만, 비활성화 시 시각적 변화(예: alpha 조절, 색상 변경)가 없어 사용자가 비활성 상태를 인지하기 어렵습니다. PrezelCheckbox 등 다른 컴포넌트에서는 상태에 따른 색상 분기가 적용되어 있습니다.

---

159-191: 프리뷰 간 헤더 패딩 불일치 (nit)

PrezelAccordionPreview_Collapsed(Line 169)에서는 헤더 Text에 패딩이 없고, PrezelAccordionPreview_Expanded(Line 205)에서는 padding(start = 12.dp)이 적용되어 있습니다. 프리뷰 간 일관성을 맞추면 디자인 검토 시 혼동을 줄일 수 있습니다.

Also applies to: 193-226

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

84-84: PrezelTopAppBarWithLeadingPreview에서는 여전히 PrezelIcons.Blank 사용 중

Line 84에서 PrezelIcons.Blank이 그대로 남아있습니다. 다른 프리뷰들은 실제 아이콘으로 변경되었으므로, 이 프리뷰도 PrezelIcons.ArrowLeft로 통일하는 것이 좋겠습니다.

♻️ 수정 제안

-                            painter = painterResource(PrezelIcons.Blank),
+                            painter = painterResource(PrezelIcons.ArrowLeft),

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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: 2

🤖 Fix all issues with AI agents

In
`@Prezel/core/designsystem/src/main/res/drawable/core_designsystem_ic_calendar.xml`:
- Around line 7-8: Update the calendar drawable's fill color: locate the
android:fillColor attribute in core_designsystem_ic_calendar.xml (the <path>
element containing the calendar android:pathData) and change its value from
"#2F3238" to "#6E737D" so it matches the other design system icons.

In
`@Prezel/core/designsystem/src/main/res/drawable/core_designsystem_ic_menu.xml`:
- Around line 1-9: The vector drawable's pathData defines three horizontal dots
(a "more" icon) but the resource is named core_designsystem_ic_menu.xml (which
implies a hamburger/menu icon); either update the pathData to the three-line
hamburger shape in the <path> (replace the current dot pathData) or rename the
asset to reflect "more" (e.g., core_designsystem_ic_more) and update any
references; locate the <vector> and its <path> (android:pathData) in
core_designsystem_ic_menu.xml to make the change so resource name and visual
match the design system convention.

🧹 Nitpick comments (5)

Prezel/core/designsystem/src/main/res/drawable/core_designsystem_ic_person.xml (1)

6-11: 하드코딩된 fillColor 대신 테마 컬러 참조 고려

두 path 모두 fillColor가 #6E737D로 하드코딩되어 있습니다. Compose에서 tint를 통해 항상 색상을 오버라이드한다면 문제없지만, 그렇지 않은 경우 다크 모드 등 테마 전환 시 아이콘이 배경과 구분되지 않을 수 있습니다.

AI 요약에 따르면 이번 PR의 다른 아이콘들도 동일한 패턴을 사용하고 있으므로, 전체 아이콘 세트에 대해 일관된 방침이 있는지 확인해 주세요.

Prezel/core/designsystem/src/main/res/drawable/core_designsystem_ic_search.xml (1)

1-9: 새 Search 아이콘 추가 확인.

아이콘 구조와 fillColor가 일관됩니다. 참고로, TopAppBar.kt (Line 112)에서 PrezelIcons.Blank을 contentDescription "검색"으로 사용하고 있는 부분이 있습니다. 이 새로운 Search 아이콘으로 교체하는 것이 적절할 수 있습니다.

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

115-125: 접근성: chevron 아이콘에 contentDescription 추가 권장

contentDescription = null로 설정되어 있어 스크린 리더 사용자가 아코디언의 확장/축소 상태를 인지할 수 없습니다. 확장 상태에 따라 적절한 설명을 제공하는 것이 좋습니다.

또한, R.drawable.core_designsystem_ic_chevron_down을 직접 참조하는 대신 PrezelIcons.ChevronDown을 사용하면 다른 컴포넌트(PrezelRadio, PrezelCheckbox 등)와 일관성을 유지할 수 있습니다.

♻️ 제안

 `@Composable`
 private fun PrezelAccordionChevron(rotation: Float) {
     Icon(
-        painter = painterResource(R.drawable.core_designsystem_ic_chevron_down),
-        contentDescription = null,
+        painter = painterResource(PrezelIcons.ChevronDown),
+        contentDescription = "Toggle accordion",
         modifier = Modifier
             .size(24.dp)
             .rotate(rotation),
         tint = PrezelTheme.colors.iconRegular,
     )
 }

---

40-77: 공개 API 시그니처 검토

전체적으로 잘 구성되어 있습니다. 슬롯 기반 API로 header/label/content를 분리하고, AnimatedVisibility 기반의 확장/축소, ripple 제거 클릭 정책 등 PR 목표를 충실히 구현했습니다.

한 가지 고려할 점: enabled = false일 때 chevron이 여전히 표시되고 시각적 비활성화 표시가 없습니다. 비활성 상태의 시각적 피드백(예: 투명도 조절)을 추가하면 사용자 경험이 개선될 수 있습니다.

---

87-112: 헤더 영역의 클릭 영역과 접근성 시맨틱스

clickable modifier에 indication = null과 커스텀 interactionSource를 사용하여 ripple을 제거한 것은 PR 목표와 일치합니다. 다만, 접근성 향상을 위해 semantics 혹은 toggleable modifier를 활용하여 확장/축소 역할(Role)을 명시하면 TalkBack 등 보조 기술에서 더 나은 경험을 제공할 수 있습니다. 참고로 PrezelCheckbox에서는 toggleable에 Role.Checkbox를 사용하고 있습니다.