Skip to content

Conversation

@moondev03
Copy link
Member

@moondev03 moondev03 commented Jan 21, 2026

📌 작업 내용

  • Radius, Shape, Spacing, Stroke 정의
  • Preview를 위한 Component 구현 및 적용

🧩 관련 이슈


📸 스크린샷

Radius

image

Spacing

image

Stroke

image

📢 논의하고 싶은 내용

Summary by CodeRabbit

릴리스 노트

  • 새로운 기능

    • 반경(radius), 모양(shapes), 간격(spacing), 스트로크(stroke) 토큰 추가
    • 토큰 미리보기용 UI 컴포넌트 추가로 시각화 개선
    • PrezelTheme을 통해 새로운 디자인 토큰 접근 가능
  • 개선 사항

    • 테마 기반 색상 참조로 색상 미리보기 통합
    • 타이포그래피 미리보기 UI 구조 개선 및 공개 API(프리뷰 함수) 시그니처 변경 (호환성 영향 가능)

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

* feat: Stroke 값 추가
* feat: Radius 값 추가
* feat: Spacing 값 추가
* feat: Shape 값 추가
Prezel 디자인 시스템의 Shape, Spacing, Stroke를 PrezelTheme에 추가하여 앱 전체에서 일관되게 사용할 수 있도록 합니다.
디자인 시스템 토큰(e.g., spacing, radius)을 시각적으로 미리보기하고 테스트하기 위한 유틸리티 컴포넌트를 추가합니다.

* `PreviewScaffold`: 미리보기 화면의 기본 레이아웃을 제공합니다.
* `SectionTitle`: 각 토큰 섹션의 제목을 표시합니다.
* `TokenList` 및 `TokenRow`: 이름, 값, 시각적 미리보기를 포함하여 각 디자인 토큰을 행으로 나열합니다.
* feat: Stroke 토큰 프리뷰 추가
* feat: Radius 토큰 프리뷰 추가
* feat: Spacing 토큰 프리뷰 추가
* feat: Shapes 토큰 프리뷰 추가
디자인 시스템의 `PrezelColorScheme`과 `PrezelTypographyScheme`의 프리뷰를 개선하고 각 항목별로 분리했습니다.

*   `PrezelColorScheme` 프리뷰를 각 색상 카테고리(Interactive, Background, Text 등)별로 개별 `@Preview`로 분리했습니다.
*   `PrezelTypographyScheme` 프리뷰를 Title, Body, Caption 별로 분리했습니다.
*   공통 프리뷰 레이아웃을 처리하기 위한 `PreviewScaffold`를 추가하고 이를 각 프리뷰에 적용했습니다.
@moondev03 moondev03 self-assigned this Jan 21, 2026
@moondev03 moondev03 added the ✨ feat 새로운 기능 추가 또는 기존 기능 확장 label Jan 21, 2026
@moondev03 moondev03 linked an issue Jan 21, 2026 that may be closed by this pull request
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jan 21, 2026

Walkthrough

디자인 시스템의 숫자 토큰을 추가합니다. PrezelRadius, PrezelShapes, PrezelSpacing, PrezelStroke 객체를 새로 정의하여 반경, 도형(RoundedCornerShape), 간격, 획 값들을 공개합니다. 각 토큰 파일에는 내부 미리보기(composable) 유틸이 포함되어 있으며, PreviewScaffold 및 TokenList 계층을 사용해 토큰별 시각적 프리뷰를 렌더링합니다. PrezelTheme에 신규 CompositionLocal들(LocalPrezelRadius, LocalPrezelShapes, LocalPrezelSpacing, LocalPrezelStroke)이 등록되고 theme 속성(radius, shapes, spacing, stroke)으로 노출됩니다. 색상 및 타이포그래피 미리보기는 PreviewScaffold 기반 레이아웃으로 업데이트되었습니다.

Possibly related PRs

  • PR 13: PrezelTheme에 CompositionLocal 기반의 타이포그래피 토큰 노출을 추가한 변경과 유사한 테마 속성 확장 패턴을 공유합니다.
  • PR 10: 디자인 시스템 테마 구조 개선으로 CompositionLocal 기반 테마 원시 요소를 도입한 변경과 코드 수준 연관성이 있습니다.
🚥 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 제목은 Number System의 설계 및 구현이라는 주요 변경사항을 명확하게 요약하고 있습니다.
Description check ✅ Passed PR 설명은 작업 내용, 관련 이슈, 스크린샷을 포함하여 필수 항목을 대부분 충족하고 있습니다.
Linked Issues check ✅ Passed Radius, Shapes, Spacing, Stroke 토큰 정의 및 Preview 컴포넌트 구현으로 이슈 #17의 요구사항을 모두 충족합니다.
Out of Scope Changes check ✅ Passed 모든 변경사항이 Number System 설계 및 구현이라는 PR 목표와 관련되어 있으며 범위를 벗어난 변경은 없습니다.

✏️ 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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In
`@Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelColorScheme.kt`:
- Around line 244-269: PrezelColorsPreviewSection takes a colors parameter but
ColorRow internally uses PrezelTheme.colors.solidBlack directly; change ColorRow
to accept a borderColor (e.g., add parameter borderColor: Color) and use that
inside ColorRow instead of referencing PrezelTheme.colors.solidBlack, then
update PrezelColorsPreviewSection to pass the passed-in colors (e.g.,
borderColor = colors.solidBlack or colors.borderRegular as appropriate);
alternatively, if external colors aren't needed, remove the colors parameter
from PrezelColorsPreviewSection—modify the PrezelColorsPreviewSection and
ColorRow symbols accordingly for consistency.
🧹 Nitpick comments (2)
Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/preview/PreviewComponent.kt (1)

64-96: 고정 너비가 긴 토큰 이름을 잘라낼 수 있습니다.

namevalueLabel에 각각 48.dp, 64.dp 고정 너비가 적용되어 있어 긴 이름이 잘릴 수 있습니다. 현재 토큰들은 짧은 이름("V2", "V1000" 등)을 사용하므로 문제가 없지만, 향후 확장성을 고려하면 개선의 여지가 있습니다.

♻️ 선택적 개선 제안
 Text(
     text = name,
     style = PrezelTheme.typography.body3Medium,
     color = PrezelTheme.colors.textMedium,
-    modifier = Modifier.width(48.dp),
+    modifier = Modifier.width(48.dp),
+    maxLines = 1,
+    overflow = TextOverflow.Ellipsis,
 )
Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelShapes.kt (1)

56-58: 타입 표기 통일로 가독성 개선 가능
이미 RoundedCornerShape를 import 했으니 시그니처에서 정규화된 패키지명을 제거해도 충분합니다.

♻️ 제안 수정
-private fun ShapeList(items: List<Pair<String, androidx.compose.foundation.shape.RoundedCornerShape>>) {
+private fun ShapeList(items: List<Pair<String, RoundedCornerShape>>) {

`PrezelShapes.kt` 파일 내에서 사용되던 표준 `List`를 `kotlinx.collections.immutable.ImmutableList`로 변경하여 불변성을 보장합니다.

*   `persistentListOf`를 사용하여 `ShapeList`의 아이템을 초기화합니다.
*   `ShapeList` 컴포저블 함수의 파라미터 타입을 `ImmutableList`로 수정합니다.
Copy link
Contributor

@HamBeomJoon HamBeomJoon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니당

@HamBeomJoon HamBeomJoon merged commit 4869cf7 into develop Jan 21, 2026
2 checks passed
@HamBeomJoon HamBeomJoon deleted the feat/#17-number-system branch January 21, 2026 14:29
moondev03 added a commit that referenced this pull request Jan 21, 2026
* feat: 디자인 시스템 Number 추가

* feat: Stroke 값 추가
* feat: Radius 값 추가
* feat: Spacing 값 추가
* feat: Shape 값 추가

* feat: PrezelTheme에 Shape, Spacing, Stroke 추가

Prezel 디자인 시스템의 Shape, Spacing, Stroke를 PrezelTheme에 추가하여 앱 전체에서 일관되게 사용할 수 있도록 합니다.

* feat: 디자인시스템 미리보기 컴포넌트 추가

디자인 시스템 토큰(e.g., spacing, radius)을 시각적으로 미리보기하고 테스트하기 위한 유틸리티 컴포넌트를 추가합니다.

* `PreviewScaffold`: 미리보기 화면의 기본 레이아웃을 제공합니다.
* `SectionTitle`: 각 토큰 섹션의 제목을 표시합니다.
* `TokenList` 및 `TokenRow`: 이름, 값, 시각적 미리보기를 포함하여 각 디자인 토큰을 행으로 나열합니다.

* feat: 디자인 시스템 Number 토큰 프리뷰 추가

* feat: Stroke 토큰 프리뷰 추가
* feat: Radius 토큰 프리뷰 추가
* feat: Spacing 토큰 프리뷰 추가
* feat: Shapes 토큰 프리뷰 추가

* feat: 프리뷰 화면 개선 및 분리

디자인 시스템의 `PrezelColorScheme`과 `PrezelTypographyScheme`의 프리뷰를 개선하고 각 항목별로 분리했습니다.

*   `PrezelColorScheme` 프리뷰를 각 색상 카테고리(Interactive, Background, Text 등)별로 개별 `@Preview`로 분리했습니다.
*   `PrezelTypographyScheme` 프리뷰를 Title, Body, Caption 별로 분리했습니다.
*   공통 프리뷰 레이아웃을 처리하기 위한 `PreviewScaffold`를 추가하고 이를 각 프리뷰에 적용했습니다.

* refactor: PrezelShapes의 List를 ImmutableList로 변경

`PrezelShapes.kt` 파일 내에서 사용되던 표준 `List`를 `kotlinx.collections.immutable.ImmutableList`로 변경하여 불변성을 보장합니다.

*   `persistentListOf`를 사용하여 `ShapeList`의 아이템을 초기화합니다.
*   `ShapeList` 컴포저블 함수의 파라미터 타입을 `ImmutableList`로 수정합니다.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✨ feat 새로운 기능 추가 또는 기존 기능 확장

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Number System 설계 및 구현

3 participants