From 8b1ba78444d19a3375a3375a88eb96ba6b305f61 Mon Sep 17 00:00:00 2001 From: moondev03 Date: Wed, 21 Jan 2026 22:22:07 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=20Number=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: Stroke 값 추가 * feat: Radius 값 추가 * feat: Spacing 값 추가 * feat: Shape 값 추가 --- .../foundation/number/PrezelRadius.kt | 13 ++++++++++ .../foundation/number/PrezelShapes.kt | 13 ++++++++++ .../foundation/number/PrezelSpacing.kt | 26 +++++++++++++++++++ .../foundation/number/PrezelStroke.kt | 9 +++++++ 4 files changed, 61 insertions(+) create mode 100644 Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelRadius.kt create mode 100644 Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelShapes.kt create mode 100644 Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelSpacing.kt create mode 100644 Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelStroke.kt diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelRadius.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelRadius.kt new file mode 100644 index 00000000..ef16ab50 --- /dev/null +++ b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelRadius.kt @@ -0,0 +1,13 @@ +package com.team.prezel.core.designsystem.foundation.number + +import androidx.compose.ui.unit.dp + +object PrezelRadius { + val V2 = 2.dp + val V4 = 4.dp + val V6 = 6.dp + val V8 = 8.dp + val V12 = 12.dp + val V16 = 16.dp + val V1000 = 1000.dp +} diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelShapes.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelShapes.kt new file mode 100644 index 00000000..bce79220 --- /dev/null +++ b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelShapes.kt @@ -0,0 +1,13 @@ +package com.team.prezel.core.designsystem.foundation.number + +import androidx.compose.foundation.shape.RoundedCornerShape + +object PrezelShapes { + val V2 = RoundedCornerShape(PrezelRadius.V2) + val V4 = RoundedCornerShape(PrezelRadius.V4) + val V6 = RoundedCornerShape(PrezelRadius.V6) + val V8 = RoundedCornerShape(PrezelRadius.V8) + val V12 = RoundedCornerShape(PrezelRadius.V12) + val V16 = RoundedCornerShape(PrezelRadius.V16) + val V1000 = RoundedCornerShape(PrezelRadius.V1000) +} diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelSpacing.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelSpacing.kt new file mode 100644 index 00000000..5a9dbf3b --- /dev/null +++ b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelSpacing.kt @@ -0,0 +1,26 @@ +package com.team.prezel.core.designsystem.foundation.number + +import androidx.compose.ui.unit.dp + +object PrezelSpacing { + val V0 = 0.dp + val V2 = 2.dp + val V4 = 4.dp + val V6 = 6.dp + val V8 = 8.dp + val V10 = 10.dp + val V12 = 12.dp + val V14 = 14.dp + val V16 = 16.dp + val V20 = 20.dp + val V24 = 24.dp + val V28 = 28.dp + val V32 = 32.dp + val V36 = 36.dp + val V40 = 40.dp + val V48 = 48.dp + val V56 = 56.dp + val V64 = 64.dp + val V72 = 72.dp + val V80 = 80.dp +} diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelStroke.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelStroke.kt new file mode 100644 index 00000000..df6435fe --- /dev/null +++ b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelStroke.kt @@ -0,0 +1,9 @@ +package com.team.prezel.core.designsystem.foundation.number + +import androidx.compose.ui.unit.dp + +object PrezelStroke { + val V1 = 1.dp + val V2 = 2.dp + val V4 = 4.dp +} From 2d3be5f27dfec811e0dd6c31c9f762388d00c1a5 Mon Sep 17 00:00:00 2001 From: moondev03 Date: Wed, 21 Jan 2026 22:22:14 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20PrezelTheme=EC=97=90=20Shape,=20Spa?= =?UTF-8?q?cing,=20Stroke=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Prezel 디자인 시스템의 Shape, Spacing, Stroke를 PrezelTheme에 추가하여 앱 전체에서 일관되게 사용할 수 있도록 합니다. --- .../core/designsystem/theme/PrezelTheme.kt | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelTheme.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelTheme.kt index fe888729..88fdd41f 100644 --- a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelTheme.kt +++ b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelTheme.kt @@ -6,10 +6,18 @@ import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.ReadOnlyComposable import androidx.compose.runtime.staticCompositionLocalOf import com.team.prezel.core.designsystem.foundation.color.PrezelColors +import com.team.prezel.core.designsystem.foundation.number.PrezelRadius +import com.team.prezel.core.designsystem.foundation.number.PrezelShapes +import com.team.prezel.core.designsystem.foundation.number.PrezelSpacing +import com.team.prezel.core.designsystem.foundation.number.PrezelStroke import com.team.prezel.core.designsystem.foundation.typography.PrezelTypography private val LocalPrezelColors = staticCompositionLocalOf { error("No PrezelColors provided") } private val LocalPrezelTypography = staticCompositionLocalOf { error("No PrezelTypography provided") } +private val LocalPrezelRadius = staticCompositionLocalOf { error("No PrezelRadius provided") } +private val LocalPrezelShapes = staticCompositionLocalOf { error("No PrezelShapes provided") } +private val LocalPrezelSpacing = staticCompositionLocalOf { error("No PrezelSpacing provided") } +private val LocalPrezelStroke = staticCompositionLocalOf { error("No PrezelStroke provided") } object PrezelTheme { val colors: PrezelColors @@ -21,6 +29,26 @@ object PrezelTheme { @Composable @ReadOnlyComposable get() = LocalPrezelTypography.current + + val radius: PrezelRadius + @Composable + @ReadOnlyComposable + get() = LocalPrezelRadius.current + + val shapes: PrezelShapes + @Composable + @ReadOnlyComposable + get() = LocalPrezelShapes.current + + val spacing: PrezelSpacing + @Composable + @ReadOnlyComposable + get() = LocalPrezelSpacing.current + + val stroke: PrezelStroke + @Composable + @ReadOnlyComposable + get() = LocalPrezelStroke.current } @Composable @@ -34,6 +62,10 @@ fun PrezelTheme( CompositionLocalProvider( LocalPrezelColors provides colorScheme, LocalPrezelTypography provides typographyScheme, + LocalPrezelRadius provides PrezelRadius, + LocalPrezelShapes provides PrezelShapes, + LocalPrezelSpacing provides PrezelSpacing, + LocalPrezelStroke provides PrezelStroke, content = content, ) } From 86cf821d3372f84eea9f328727b8b509671069c2 Mon Sep 17 00:00:00 2001 From: moondev03 Date: Wed, 21 Jan 2026 22:46:24 +0900 Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=EB=94=94=EC=9E=90=EC=9D=B8?= =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EB=AF=B8=EB=A6=AC=EB=B3=B4?= =?UTF-8?q?=EA=B8=B0=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 디자인 시스템 토큰(e.g., spacing, radius)을 시각적으로 미리보기하고 테스트하기 위한 유틸리티 컴포넌트를 추가합니다. * `PreviewScaffold`: 미리보기 화면의 기본 레이아웃을 제공합니다. * `SectionTitle`: 각 토큰 섹션의 제목을 표시합니다. * `TokenList` 및 `TokenRow`: 이름, 값, 시각적 미리보기를 포함하여 각 디자인 토큰을 행으로 나열합니다. --- .../designsystem/preview/PreviewComponent.kt | 96 +++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/preview/PreviewComponent.kt diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/preview/PreviewComponent.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/preview/PreviewComponent.kt new file mode 100644 index 00000000..84848de5 --- /dev/null +++ b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/preview/PreviewComponent.kt @@ -0,0 +1,96 @@ +package com.team.prezel.core.designsystem.preview + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.verticalScroll +import androidx.compose.material3.HorizontalDivider +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import com.team.prezel.core.designsystem.theme.PrezelTheme +import kotlinx.collections.immutable.ImmutableList + +@Composable +internal fun PreviewScaffold(content: @Composable () -> Unit) { + Column( + modifier = Modifier + .fillMaxSize() + .background(PrezelTheme.colors.bgRegular) + .verticalScroll(rememberScrollState()) + .padding(16.dp), + verticalArrangement = Arrangement.spacedBy(16.dp), + ) { + content() + } +} + +@Composable +internal fun SectionTitle(title: String) { + Column(verticalArrangement = Arrangement.spacedBy(8.dp)) { + Text(text = title, style = PrezelTheme.typography.title2Bold, color = PrezelTheme.colors.textLarge) + HorizontalDivider(color = PrezelTheme.colors.borderRegular) + } +} + +@Composable +internal fun TokenList( + items: ImmutableList>, + preview: @Composable (Dp) -> Unit, +) { + Column(verticalArrangement = Arrangement.spacedBy(10.dp)) { + items.forEach { (name, value) -> + TokenRow( + name = name, + valueLabel = "${value.value}dp", + preview = { preview(value) }, + ) + } + } +} + +@Composable +internal fun TokenRow( + name: String, + valueLabel: String, + preview: @Composable () -> Unit, +) { + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(12.dp), + ) { + Text( + text = name, + style = PrezelTheme.typography.body3Medium, + color = PrezelTheme.colors.textMedium, + modifier = Modifier.width(48.dp), + ) + Text( + text = valueLabel, + style = PrezelTheme.typography.body3Regular, + color = PrezelTheme.colors.textSmall, + modifier = Modifier.width(64.dp), + ) + Spacer(modifier = Modifier.weight(1f)) + Box( + modifier = Modifier + .background(Color.Transparent) + .padding(4.dp), + ) { + preview() + } + } +} From b5301b95f1970f8560b5871447c9cfe752864432 Mon Sep 17 00:00:00 2001 From: moondev03 Date: Wed, 21 Jan 2026 22:46:32 +0900 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=20Number=20=ED=86=A0=ED=81=B0=20?= =?UTF-8?q?=ED=94=84=EB=A6=AC=EB=B7=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: Stroke 토큰 프리뷰 추가 * feat: Radius 토큰 프리뷰 추가 * feat: Spacing 토큰 프리뷰 추가 * feat: Shapes 토큰 프리뷰 추가 --- .../foundation/number/PrezelRadius.kt | 52 +++++++++++++++ .../foundation/number/PrezelShapes.kt | 62 ++++++++++++++++++ .../foundation/number/PrezelSpacing.kt | 63 +++++++++++++++++++ .../foundation/number/PrezelStroke.kt | 44 +++++++++++++ 4 files changed, 221 insertions(+) diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelRadius.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelRadius.kt index ef16ab50..b042611d 100644 --- a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelRadius.kt +++ b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelRadius.kt @@ -1,6 +1,20 @@ package com.team.prezel.core.designsystem.foundation.number +import androidx.compose.foundation.background +import androidx.compose.foundation.border +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip import androidx.compose.ui.unit.dp +import com.team.prezel.core.designsystem.preview.PreviewScaffold +import com.team.prezel.core.designsystem.preview.SectionTitle +import com.team.prezel.core.designsystem.preview.ThemePreview +import com.team.prezel.core.designsystem.preview.TokenList +import com.team.prezel.core.designsystem.theme.PrezelTheme +import kotlinx.collections.immutable.persistentListOf object PrezelRadius { val V2 = 2.dp @@ -11,3 +25,41 @@ object PrezelRadius { val V16 = 16.dp val V1000 = 1000.dp } + +@ThemePreview +@Composable +private fun RadiusTokensPreview() { + PrezelTheme { + PreviewScaffold { RadiusSection() } + } +} + +@Composable +private fun RadiusSection() { + SectionTitle(title = "Radius") + TokenList( + items = persistentListOf( + "V2" to PrezelRadius.V2, + "V4" to PrezelRadius.V4, + "V6" to PrezelRadius.V6, + "V8" to PrezelRadius.V8, + "V12" to PrezelRadius.V12, + "V16" to PrezelRadius.V16, + "V1000" to PrezelRadius.V1000, + ), + preview = { radius -> + val shape = RoundedCornerShape(radius) + Box( + modifier = Modifier + .size(40.dp) + .clip(shape) + .background(PrezelTheme.colors.bgLarge) + .border( + width = PrezelStroke.V1, + color = PrezelTheme.colors.borderRegular, + shape = shape, + ), + ) + }, + ) +} diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelShapes.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelShapes.kt index bce79220..ed99b077 100644 --- a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelShapes.kt +++ b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelShapes.kt @@ -1,6 +1,21 @@ package com.team.prezel.core.designsystem.foundation.number +import androidx.compose.foundation.background +import androidx.compose.foundation.border +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.unit.dp +import com.team.prezel.core.designsystem.preview.PreviewScaffold +import com.team.prezel.core.designsystem.preview.SectionTitle +import com.team.prezel.core.designsystem.preview.ThemePreview +import com.team.prezel.core.designsystem.preview.TokenRow +import com.team.prezel.core.designsystem.theme.PrezelTheme object PrezelShapes { val V2 = RoundedCornerShape(PrezelRadius.V2) @@ -11,3 +26,50 @@ object PrezelShapes { val V16 = RoundedCornerShape(PrezelRadius.V16) val V1000 = RoundedCornerShape(PrezelRadius.V1000) } + +@ThemePreview +@Composable +private fun ShapesTokensPreview() { + PrezelTheme { + PreviewScaffold { + ShapesSection() + } + } +} + +@Composable +private fun ShapesSection() { + SectionTitle(title = "Shapes") + ShapeList( + items = listOf( + "V2" to PrezelShapes.V2, + "V4" to PrezelShapes.V4, + "V6" to PrezelShapes.V6, + "V8" to PrezelShapes.V8, + "V12" to PrezelShapes.V12, + "V16" to PrezelShapes.V16, + "V1000" to PrezelShapes.V1000, + ), + ) +} + +@Composable +private fun ShapeList(items: List>) { + Column(verticalArrangement = Arrangement.spacedBy(10.dp)) { + items.forEach { (name, shape) -> + TokenRow( + name = name, + valueLabel = "shape", + preview = { + Box( + modifier = Modifier + .size(40.dp) + .clip(shape) + .background(PrezelTheme.colors.bgLarge) + .border(PrezelStroke.V1, PrezelTheme.colors.borderRegular, shape), + ) + }, + ) + } + } +} diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelSpacing.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelSpacing.kt index 5a9dbf3b..2ec0074b 100644 --- a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelSpacing.kt +++ b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelSpacing.kt @@ -1,6 +1,20 @@ package com.team.prezel.core.designsystem.foundation.number +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.width +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp +import com.team.prezel.core.designsystem.preview.PreviewScaffold +import com.team.prezel.core.designsystem.preview.SectionTitle +import com.team.prezel.core.designsystem.preview.ThemePreview +import com.team.prezel.core.designsystem.preview.TokenList +import com.team.prezel.core.designsystem.theme.PrezelTheme +import kotlinx.collections.immutable.persistentListOf object PrezelSpacing { val V0 = 0.dp @@ -24,3 +38,52 @@ object PrezelSpacing { val V72 = 72.dp val V80 = 80.dp } + +@ThemePreview +@Composable +private fun SpacingTokensPreview() { + PrezelTheme { + PreviewScaffold { + SpacingSection() + } + } +} + +@Composable +private fun SpacingSection() { + SectionTitle(title = "Spacing") + TokenList( + items = persistentListOf( + "V0" to PrezelSpacing.V0, + "V2" to PrezelSpacing.V2, + "V4" to PrezelSpacing.V4, + "V6" to PrezelSpacing.V6, + "V8" to PrezelSpacing.V8, + "V10" to PrezelSpacing.V10, + "V12" to PrezelSpacing.V12, + "V14" to PrezelSpacing.V14, + "V16" to PrezelSpacing.V16, + "V20" to PrezelSpacing.V20, + "V24" to PrezelSpacing.V24, + "V28" to PrezelSpacing.V28, + "V32" to PrezelSpacing.V32, + "V36" to PrezelSpacing.V36, + "V40" to PrezelSpacing.V40, + "V48" to PrezelSpacing.V48, + "V56" to PrezelSpacing.V56, + "V64" to PrezelSpacing.V64, + "V72" to PrezelSpacing.V72, + "V80" to PrezelSpacing.V80, + ), + preview = { spacing -> + Row(verticalAlignment = Alignment.CenterVertically) { + Box( + modifier = Modifier + .height(8.dp) + .width(spacing) + .background(PrezelTheme.colors.interactiveRegular), + ) + } + }, + ) +} diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelStroke.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelStroke.kt index df6435fe..d621f446 100644 --- a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelStroke.kt +++ b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelStroke.kt @@ -1,9 +1,53 @@ package com.team.prezel.core.designsystem.foundation.number +import androidx.compose.foundation.border +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.size +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp +import com.team.prezel.core.designsystem.preview.PreviewScaffold +import com.team.prezel.core.designsystem.preview.SectionTitle +import com.team.prezel.core.designsystem.preview.ThemePreview +import com.team.prezel.core.designsystem.preview.TokenList +import com.team.prezel.core.designsystem.theme.PrezelTheme +import kotlinx.collections.immutable.persistentListOf object PrezelStroke { val V1 = 1.dp val V2 = 2.dp val V4 = 4.dp } + +@ThemePreview +@Composable +private fun StrokeTokensPreview() { + PrezelTheme { + PreviewScaffold { + StrokeSection() + } + } +} + +@Composable +private fun StrokeSection() { + SectionTitle(title = "Stroke") + TokenList( + items = persistentListOf( + "V1" to PrezelStroke.V1, + "V2" to PrezelStroke.V2, + "V4" to PrezelStroke.V4, + ), + preview = { stroke -> + Box( + modifier = Modifier + .size(40.dp) + .border( + width = stroke, + color = PrezelTheme.colors.borderLarge, + shape = PrezelShapes.V8, + ), + ) + }, + ) +} From 8859f8e526116a9e4bae50e383814f96f851b1bf Mon Sep 17 00:00:00 2001 From: moondev03 Date: Wed, 21 Jan 2026 23:03:28 +0900 Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=ED=94=84=EB=A6=AC=EB=B7=B0=20?= =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 디자인 시스템의 `PrezelColorScheme`과 `PrezelTypographyScheme`의 프리뷰를 개선하고 각 항목별로 분리했습니다. * `PrezelColorScheme` 프리뷰를 각 색상 카테고리(Interactive, Background, Text 등)별로 개별 `@Preview`로 분리했습니다. * `PrezelTypographyScheme` 프리뷰를 Title, Body, Caption 별로 분리했습니다. * 공통 프리뷰 레이아웃을 처리하기 위한 `PreviewScaffold`를 추가하고 이를 각 프리뷰에 적용했습니다. --- .../designsystem/theme/PrezelColorScheme.kt | 189 +++++++++--------- .../theme/PrezelTypographyScheme.kt | 111 ++++++---- 2 files changed, 167 insertions(+), 133 deletions(-) diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelColorScheme.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelColorScheme.kt index a3c7f1df..bb8adcf8 100644 --- a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelColorScheme.kt +++ b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelColorScheme.kt @@ -6,13 +6,9 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size -import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.foundation.verticalScroll import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -26,6 +22,7 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.team.prezel.core.designsystem.foundation.color.ColorTokens import com.team.prezel.core.designsystem.foundation.color.PrezelColors +import com.team.prezel.core.designsystem.preview.PreviewScaffold import com.team.prezel.core.designsystem.preview.ThemePreview import kotlinx.collections.immutable.ImmutableList import kotlinx.collections.immutable.persistentListOf @@ -109,152 +106,164 @@ internal object PrezelColorScheme { @ThemePreview @Composable -private fun PrezelColorSchemePreview() { +private fun PrezelColorSchemeInteractivePreview() { PrezelTheme { - PrezelColorsPreview() - } -} - -@Composable -@Suppress("LongMethod") -private fun PrezelColorsPreview(colors: PrezelColors = PrezelTheme.colors) { - Column( - modifier = Modifier - .fillMaxSize() - .background(colors.bgRegular) - .verticalScroll(rememberScrollState()) - .padding(16.dp), - verticalArrangement = Arrangement.spacedBy(24.dp), - ) { - ColorSection( + PrezelColorsPreviewSection( title = "Interactive", description = "브랜드 색으로 활성화 상태 및 강조가 필요한 요소에 사용하는 색상입니다.", items = persistentListOf( - "XSmall" to colors.interactiveXSmall, - "Small" to colors.interactiveSmall, - "Regular" to colors.interactiveRegular, + "XSmall" to PrezelTheme.colors.interactiveXSmall, + "Small" to PrezelTheme.colors.interactiveSmall, + "Regular" to PrezelTheme.colors.interactiveRegular, ), - dividerColor = colors.borderRegular, - textColor = colors.textLarge, ) + } +} - ColorSection( +@ThemePreview +@Composable +private fun PrezelColorSchemeBackgroundPreview() { + PrezelTheme { + PrezelColorsPreviewSection( title = "Background", description = "콘텐츠의 구조와 계층을 구분하는 색상입니다.", items = persistentListOf( - "Regular" to colors.bgRegular, - "Medium" to colors.bgMedium, - "Large" to colors.bgLarge, - "Scrim" to colors.bgScrim, - "Disabled" to colors.bgDisabled, + "Regular" to PrezelTheme.colors.bgRegular, + "Medium" to PrezelTheme.colors.bgMedium, + "Large" to PrezelTheme.colors.bgLarge, + "Scrim" to PrezelTheme.colors.bgScrim, + "Disabled" to PrezelTheme.colors.bgDisabled, ), - dividerColor = colors.borderRegular, - textColor = colors.textLarge, ) + } +} - ColorSection( +@ThemePreview +@Composable +private fun PrezelColorSchemeTextPreview() { + PrezelTheme { + PrezelColorsPreviewSection( title = "Text", description = "정보와 콘텐츠를 명확하게 전달하기 위해 사용하는 색상입니다.", items = persistentListOf( - "Small" to colors.textSmall, - "Regular" to colors.textRegular, - "Medium" to colors.textMedium, - "Large" to colors.textLarge, - "Disabled" to colors.textDisabled, + "Small" to PrezelTheme.colors.textSmall, + "Regular" to PrezelTheme.colors.textRegular, + "Medium" to PrezelTheme.colors.textMedium, + "Large" to PrezelTheme.colors.textLarge, + "Disabled" to PrezelTheme.colors.textDisabled, ), - dividerColor = colors.borderRegular, - textColor = colors.textLarge, ) + } +} - ColorSection( +@ThemePreview +@Composable +private fun PrezelColorSchemeIconPreview() { + PrezelTheme { + PrezelColorsPreviewSection( title = "Icon", description = "기능적 액션과 시각적 커뮤니케이션을 돕기 위해 사용하는 색상입니다.", items = persistentListOf( - "Regular" to colors.iconRegular, - "Medium" to colors.iconMedium, - "Disabled" to colors.iconDisabled, + "Regular" to PrezelTheme.colors.iconRegular, + "Medium" to PrezelTheme.colors.iconMedium, + "Disabled" to PrezelTheme.colors.iconDisabled, ), - dividerColor = colors.borderRegular, - textColor = colors.textLarge, ) + } +} - ColorSection( +@ThemePreview +@Composable +private fun PrezelColorSchemeBorderPreview() { + PrezelTheme { + PrezelColorsPreviewSection( title = "Border", description = "콘텐츠의 영역과 구조를 구분하는 색상입니다.", items = persistentListOf( - "Small" to colors.borderSmall, - "Regular" to colors.borderRegular, - "Medium" to colors.borderMedium, - "Large" to colors.borderLarge, - "Disabled" to colors.borderDisabled, + "Small" to PrezelTheme.colors.borderSmall, + "Regular" to PrezelTheme.colors.borderRegular, + "Medium" to PrezelTheme.colors.borderMedium, + "Large" to PrezelTheme.colors.borderLarge, + "Disabled" to PrezelTheme.colors.borderDisabled, ), - dividerColor = colors.borderRegular, - textColor = colors.textLarge, ) + } +} - ColorSection( +@ThemePreview +@Composable +private fun PrezelColorSchemeFeedbackPreview() { + PrezelTheme { + PrezelColorsPreviewSection( title = "Feedback", description = "성공, 오류, 경고 상황을 명확하게 전달하기 위해 의미별로 정의된 색상입니다.", items = persistentListOf( - "GoodSmall" to colors.feedbackGoodSmall, - "GoodRegular" to colors.feedbackGoodRegular, - "BadSmall" to colors.feedbackBadSmall, - "BadRegular" to colors.feedbackBadRegular, - "WarningSmall" to colors.feedbackWarningSmall, - "WarningRegular" to colors.feedbackWarningRegular, + "GoodSmall" to PrezelTheme.colors.feedbackGoodSmall, + "GoodRegular" to PrezelTheme.colors.feedbackGoodRegular, + "BadSmall" to PrezelTheme.colors.feedbackBadSmall, + "BadRegular" to PrezelTheme.colors.feedbackBadRegular, + "WarningSmall" to PrezelTheme.colors.feedbackWarningSmall, + "WarningRegular" to PrezelTheme.colors.feedbackWarningRegular, ), - dividerColor = colors.borderRegular, - textColor = colors.textLarge, ) + } +} - ColorSection( +@ThemePreview +@Composable +private fun PrezelColorSchemeAccentPreview() { + PrezelTheme { + PrezelColorsPreviewSection( title = "Accent", description = "콘텐츠의 주목성과 인지도를 높이기 위해 버튼, 액션, 강조 요소 등에 사용되는 포인트 색상입니다.", items = persistentListOf( - "PurpleSmall" to colors.accentPurpleSmall, - "PurpleRegular" to colors.accentPurpleRegular, - "MagentaSmall" to colors.accentMagentaSmall, - "MagentaRegular" to colors.accentMagentaRegular, + "PurpleSmall" to PrezelTheme.colors.accentPurpleSmall, + "PurpleRegular" to PrezelTheme.colors.accentPurpleRegular, + "MagentaSmall" to PrezelTheme.colors.accentMagentaSmall, + "MagentaRegular" to PrezelTheme.colors.accentMagentaRegular, ), - dividerColor = colors.borderRegular, - textColor = colors.textLarge, ) + } +} - ColorSection( +@ThemePreview +@Composable +private fun PrezelColorSchemeSolidPreview() { + PrezelTheme { + PrezelColorsPreviewSection( title = "Solid", description = "흰색과 검정색을 제공하여 시각적 대비, 보조, 구분 등에 활용되는 절대값 색상입니다.", items = persistentListOf( - "White" to colors.solidWhite, - "Black" to colors.solidBlack, + "White" to PrezelTheme.colors.solidWhite, + "Black" to PrezelTheme.colors.solidBlack, ), - dividerColor = colors.borderRegular, - textColor = colors.textLarge, ) } } @Composable -private fun ColorSection( +private fun PrezelColorsPreviewSection( title: String, description: String, items: ImmutableList>, - dividerColor: Color, - textColor: Color, + colors: PrezelColors = PrezelTheme.colors, ) { - Column( - modifier = Modifier.fillMaxWidth(), - verticalArrangement = Arrangement.spacedBy(10.dp), - ) { - HorizontalDivider(color = dividerColor) + PreviewScaffold { + Column( + modifier = Modifier.fillMaxWidth(), + verticalArrangement = Arrangement.spacedBy(10.dp), + ) { + HorizontalDivider(color = colors.borderRegular) - Text(text = title, color = textColor, fontSize = 20.sp, fontWeight = FontWeight.Bold) + Text(text = title, color = colors.textLarge, fontSize = 20.sp, fontWeight = FontWeight.Bold) - Text(text = description, color = textColor.copy(alpha = 0.7f)) + Text(text = description, color = colors.textLarge.copy(alpha = 0.7f)) - HorizontalDivider(color = dividerColor) + HorizontalDivider(color = colors.borderRegular) - items.forEach { (name, color) -> - ColorRow(color = color, name = name, textColor = textColor) + items.forEach { (name, color) -> + ColorRow(color = color, name = name, textColor = colors.textLarge) + } } } } diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelTypographyScheme.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelTypographyScheme.kt index 6beef84e..ecdb535d 100644 --- a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelTypographyScheme.kt +++ b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/theme/PrezelTypographyScheme.kt @@ -5,9 +5,7 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.foundation.verticalScroll import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -18,6 +16,7 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.isSpecified import com.team.prezel.core.designsystem.foundation.typography.PrezelTextStyles import com.team.prezel.core.designsystem.foundation.typography.PrezelTypography +import com.team.prezel.core.designsystem.preview.PreviewScaffold import kotlinx.collections.immutable.ImmutableList import kotlinx.collections.immutable.persistentListOf @@ -47,60 +46,86 @@ internal object PrezelTypographyScheme { @Preview( showBackground = true, - device = "spec:width=800dp,height=1900dp", + device = "spec:width=800dp,height=600dp", fontScale = 10f, ) @Composable -private fun PrezelTypographySchemePreview() { +private fun PrezelTypographyTitlePreview() { PrezelTheme { - PrezelTypographyPreviewContent() + PrezelTypographyPreviewContent( + title = "Title", + items = persistentListOf( + "Title1 Medium" to PrezelTheme.typography.title1Medium, + "Title1 Bold" to PrezelTheme.typography.title1Bold, + "Title2 Medium" to PrezelTheme.typography.title2Medium, + "Title2 Bold" to PrezelTheme.typography.title2Bold, + ), + ) + } +} + +@Preview( + showBackground = true, + device = "spec:width=800dp,height=1000dp", + fontScale = 10f, +) +@Composable +private fun PrezelTypographyBodyPreview() { + PrezelTheme { + PrezelTypographyPreviewContent( + title = "Body", + items = persistentListOf( + "Body1 Regular" to PrezelTheme.typography.body1Regular, + "Body1 Medium" to PrezelTheme.typography.body1Medium, + "Body1 Bold" to PrezelTheme.typography.body1Bold, + "Body2 Regular" to PrezelTheme.typography.body2Regular, + "Body2 Medium" to PrezelTheme.typography.body2Medium, + "Body2 Bold" to PrezelTheme.typography.body2Bold, + "Body3 Regular" to PrezelTheme.typography.body3Regular, + "Body3 Medium" to PrezelTheme.typography.body3Medium, + "Body3 Bold" to PrezelTheme.typography.body3Bold, + ), + ) + } +} + +@Preview( + showBackground = true, + device = "spec:width=800dp,height=600dp", + fontScale = 10f, +) +@Composable +private fun PrezelTypographyCaptionPreview() { + PrezelTheme { + PrezelTypographyPreviewContent( + title = "Caption", + items = persistentListOf( + "Caption1 Regular" to PrezelTheme.typography.caption1Regular, + "Caption1 Medium" to PrezelTheme.typography.caption1Medium, + "Caption2 Regular" to PrezelTheme.typography.caption2Regular, + "Caption2 Medium" to PrezelTheme.typography.caption2Medium, + ), + ) } } @Composable private fun PrezelTypographyPreviewContent( - typography: PrezelTypography = PrezelTheme.typography, - items: ImmutableList> = persistentListOf( - Triple("Title", "Title1 Medium", typography.title1Medium), - Triple("Title", "Title1 Bold", typography.title1Bold), - Triple("Title", "Title2 Medium", typography.title2Medium), - Triple("Title", "Title2 Bold", typography.title2Bold), - Triple("Body", "Body1 Regular", typography.body1Regular), - Triple("Body", "Body1 Medium", typography.body1Medium), - Triple("Body", "Body1 Bold", typography.body1Bold), - Triple("Body", "Body2 Regular", typography.body2Regular), - Triple("Body", "Body2 Medium", typography.body2Medium), - Triple("Body", "Body2 Bold", typography.body2Bold), - Triple("Body", "Body3 Regular", typography.body3Regular), - Triple("Body", "Body3 Medium", typography.body3Medium), - Triple("Body", "Body3 Bold", typography.body3Bold), - Triple("Caption", "Caption1 Regular", typography.caption1Regular), - Triple("Caption", "Caption1 Medium", typography.caption1Medium), - Triple("Caption", "Caption2 Regular", typography.caption2Regular), - Triple("Caption", "Caption2 Medium", typography.caption2Medium), - ), + title: String, + items: ImmutableList>, ) { - Column( - modifier = Modifier - .fillMaxSize() - .background(PrezelTheme.colors.bgRegular) - .verticalScroll(rememberScrollState()) - .padding(16.dp), - verticalArrangement = Arrangement.spacedBy(16.dp), - ) { - items - .groupBy { it.first } - .forEach { (group, groupedItems) -> - HorizontalDivider() - Text(text = group, style = typography.title1Bold) - HorizontalDivider() + PreviewScaffold { + Column(verticalArrangement = Arrangement.spacedBy(16.dp)) { + HorizontalDivider() + Text(text = title, style = PrezelTheme.typography.title1Bold) + HorizontalDivider() - Column(verticalArrangement = Arrangement.spacedBy(12.dp)) { - groupedItems.forEach { item -> - TypographyRow(name = item.second, style = item.third) - } + Column(verticalArrangement = Arrangement.spacedBy(12.dp)) { + items.forEach { (name, style) -> + TypographyRow(name = name, style = style) } } + } } } From 7379ea263f31db38a6984b237354b1b607132a93 Mon Sep 17 00:00:00 2001 From: moondev03 Date: Wed, 21 Jan 2026 23:20:06 +0900 Subject: [PATCH 6/6] =?UTF-8?q?refactor:=20PrezelShapes=EC=9D=98=20List?= =?UTF-8?q?=EB=A5=BC=20ImmutableList=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `PrezelShapes.kt` 파일 내에서 사용되던 표준 `List`를 `kotlinx.collections.immutable.ImmutableList`로 변경하여 불변성을 보장합니다. * `persistentListOf`를 사용하여 `ShapeList`의 아이템을 초기화합니다. * `ShapeList` 컴포저블 함수의 파라미터 타입을 `ImmutableList`로 수정합니다. --- .../core/designsystem/foundation/number/PrezelShapes.kt | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelShapes.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelShapes.kt index ed99b077..15cad583 100644 --- a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelShapes.kt +++ b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/foundation/number/PrezelShapes.kt @@ -16,6 +16,8 @@ import com.team.prezel.core.designsystem.preview.SectionTitle import com.team.prezel.core.designsystem.preview.ThemePreview import com.team.prezel.core.designsystem.preview.TokenRow import com.team.prezel.core.designsystem.theme.PrezelTheme +import kotlinx.collections.immutable.ImmutableList +import kotlinx.collections.immutable.persistentListOf object PrezelShapes { val V2 = RoundedCornerShape(PrezelRadius.V2) @@ -41,7 +43,7 @@ private fun ShapesTokensPreview() { private fun ShapesSection() { SectionTitle(title = "Shapes") ShapeList( - items = listOf( + items = persistentListOf( "V2" to PrezelShapes.V2, "V4" to PrezelShapes.V4, "V6" to PrezelShapes.V6, @@ -54,7 +56,7 @@ private fun ShapesSection() { } @Composable -private fun ShapeList(items: List>) { +private fun ShapeList(items: ImmutableList>) { Column(verticalArrangement = Arrangement.spacedBy(10.dp)) { items.forEach { (name, shape) -> TokenRow(