버튼 컴포넌트 리팩터링 및 디자인 시스템 프리뷰 개선

Prezel/.editorconfig

@@ -12,6 +12,7 @@ trim_trailing_whitespace = true
 ij_kotlin_allow_trailing_comma = true
 ij_kotlin_allow_trailing_comma_on_call_site = true
 ktlint_function_naming_ignore_when_annotated_with = Composable
+ktlint_standard_backing-property-naming = disabled
 ktlint_standard_multiline-expression-wrapping = disabled
 ktlint_standard_function-signature = enabled
 ktlint_function_signature_rule_force_multiline_when_parameter_count_greater_or_equal_than = 2

Prezel/app/src/main/java/com/team/prezel/ui/PrezelApp.kt

@@ -17,7 +17,6 @@ import androidx.navigation3.runtime.NavKey
 import androidx.navigation3.runtime.entryProvider
 import androidx.navigation3.ui.NavDisplay
 import com.team.prezel.core.designsystem.component.PrezelNavigationScaffold
-import com.team.prezel.core.designsystem.icon.IconSource
 import com.team.prezel.core.navigation.LocalNavigator
 import com.team.prezel.core.navigation.Navigator
 import com.team.prezel.core.navigation.ProvideSharedTransitionScope
@@ -68,11 +67,11 @@ private fun PrezelAppContent(
                 snackbarHostState = snackbarHostState,
                 navigationItems = {
                     MAIN_NAV_ITEMS.forEach { (key, item) ->
-                        item(
+                        Item(
                             selected = key == appState.navigationState.currentTopLevelKey,
                             onClick = { navigator.navigate(key) },
                             label = stringResource(item.titleTextId),
-                            icon = IconSource(item.iconRes),
+                            iconResId = item.iconRes,
                         )
                     }
                 },

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

@@ -32,13 +32,14 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.team.prezel.core.designsystem.R
-import com.team.prezel.core.designsystem.component.button.PrezelHyperlinkButton
+import com.team.prezel.core.designsystem.component.actions.button.PrezelHyperlinkButton
 import com.team.prezel.core.designsystem.component.list.PrezelList
 import com.team.prezel.core.designsystem.component.list.PrezelListSize
 import com.team.prezel.core.designsystem.foundation.typography.PrezelTextStyles
 import com.team.prezel.core.designsystem.icon.PrezelIcons
-import com.team.prezel.core.designsystem.preview.PreviewScaffold
-import com.team.prezel.core.designsystem.preview.ThemePreview
+import com.team.prezel.core.designsystem.preview.BasicPreview
+import com.team.prezel.core.designsystem.preview.PreviewColumn
+import com.team.prezel.core.designsystem.preview.PreviewSurface
 import com.team.prezel.core.designsystem.theme.PrezelTheme
 import com.team.prezel.core.designsystem.util.drawDashBorder
 
@@ -129,11 +130,11 @@ private fun PrezelAccordionContent(
     }
 }
 
-@ThemePreview
+@BasicPreview
 @Composable
 private fun PrezelAccordionPreview() {
-    PrezelTheme {
-        PreviewScaffold {
+    PreviewSurface {
+        PreviewColumn(scrollable = true) {
             Column(verticalArrangement = Arrangement.spacedBy(40.dp)) {
                 PrezelAccordion(
                     title = "Collapsed Accordion",

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/PrezelAvatar.kt

@@ -2,14 +2,10 @@ package com.team.prezel.core.designsystem.component
 
 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.Row
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Icon
-import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -24,7 +20,9 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.team.prezel.core.designsystem.R
 import com.team.prezel.core.designsystem.foundation.number.PrezelStroke
-import com.team.prezel.core.designsystem.preview.ThemePreview
+import com.team.prezel.core.designsystem.preview.BasicPreview
+import com.team.prezel.core.designsystem.preview.PreviewSection
+import com.team.prezel.core.designsystem.preview.PreviewValueRow
 import com.team.prezel.core.designsystem.theme.PrezelTheme
 
 @Composable
@@ -109,50 +107,52 @@ private fun DefaultAvatarIcon(
     )
 }
 
-@ThemePreview
+@BasicPreview
 @Composable
-private fun PrezelAvatarSizePreview() {
-    PrezelTheme {
-        Surface(color = PrezelTheme.colors.bgRegular) {
-            Row(
-                horizontalArrangement = Arrangement.spacedBy(16.dp),
-                modifier = Modifier.padding(16.dp),
-            ) {
-                PrezelAvatar(
-                    imageUrl = null,
-                    contentDescription = "기본 아바타",
-                    size = PrezelAvatarSize.SMALL,
-                )
-                PrezelAvatar(
-                    imageUrl = null,
-                    contentDescription = "기본 아바타",
-                    size = PrezelAvatarSize.REGULAR,
-                )
-            }
+private fun PrezelAvatarPreview() {
+    PreviewSection(
+        title = "Avatar",
+        description = "Avatar는 사용자를 대신하는 그래픽 요소입니다.",
+    ) {
+        PreviewValueRow(
+            name = "Regular",
+            valueLabel = "기본 아바타",
+        ) {
+            PrezelAvatar(
+                imageUrl = null,
+                contentDescription = "기본 아바타",
+                size = PrezelAvatarSize.REGULAR,
+            )
         }
-    }
-}
-
-@ThemePreview
-@Composable
-private fun PrezelAvatarTypePreview() {
-    PrezelTheme {
-        Surface(color = PrezelTheme.colors.bgRegular) {
-            Row(
-                horizontalArrangement = Arrangement.spacedBy(16.dp),
-                modifier = Modifier.padding(16.dp),
-            ) {
-                PrezelAvatar(
-                    imageUrl = null,
-                    contentDescription = "Default Type",
-                    size = PrezelAvatarSize.SMALL,
-                )
-                PrezelAvatar(
-                    imageUrl = "https://picsum.photos/200",
-                    contentDescription = "Image Type",
-                    size = PrezelAvatarSize.SMALL,
-                )
-            }
+        PreviewValueRow(
+            name = "Regular",
+            valueLabel = "이미지",
+        ) {
+            PrezelAvatar(
+                imageUrl = "https://picsum.photos/200",
+                contentDescription = "기본 아바타",
+                size = PrezelAvatarSize.REGULAR,
+            )
+        }
+        PreviewValueRow(
+            name = "Small",
+            valueLabel = "기본 아바타",
+        ) {
+            PrezelAvatar(
+                imageUrl = null,
+                contentDescription = "기본 아바타",
+                size = PrezelAvatarSize.SMALL,
+            )
+        }
+        PreviewValueRow(
+            name = "Small",
+            valueLabel = "이미지",
+        ) {
+            PrezelAvatar(
+                imageUrl = "https://picsum.photos/200",
+                contentDescription = "이미지",
+                size = PrezelAvatarSize.SMALL,
+            )
         }
     }
 }

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/PrezelCheckbox.kt

@@ -1,16 +1,10 @@
 package com.team.prezel.core.designsystem.component
 
-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.RowScope
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.selection.toggleable
 import androidx.compose.material3.Icon
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -23,9 +17,10 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.unit.dp
 import com.team.prezel.core.designsystem.R
-import com.team.prezel.core.designsystem.foundation.typography.PrezelTextStyles
 import com.team.prezel.core.designsystem.icon.PrezelIcons
-import com.team.prezel.core.designsystem.preview.ThemePreview
+import com.team.prezel.core.designsystem.preview.BasicPreview
+import com.team.prezel.core.designsystem.preview.PreviewSection
+import com.team.prezel.core.designsystem.preview.PreviewValueRow
 import com.team.prezel.core.designsystem.theme.PrezelTheme
 import com.team.prezel.core.designsystem.util.drawDashBorder
 
@@ -81,81 +76,30 @@ fun PrezelCheckbox(
     }
 }
 
-@ThemePreview
+@BasicPreview
 @Composable
-private fun PrezelRegularCheckboxPreview() {
-    PrezelTheme {
-        Column(
-            modifier = Modifier
-                .background(PrezelTheme.colors.bgRegular)
-                .padding(16.dp),
-        ) {
-            CheckboxRowPreview(title = "Regular Checkbox") {
-                var checkState by remember { mutableStateOf(true) }
+private fun PrezelCheckboxPreview() {
+    var checkState by remember { mutableStateOf(true) }
 
-                PrezelCheckbox(
-                    checked = checkState,
-                    modifier = Modifier.drawDashBorder(),
-                    size = CheckboxSize.REGULAR,
-                    onCheckedChange = { checkState = it },
-                )
-
-                PrezelCheckbox(
-                    checked = !checkState,
-                    modifier = Modifier.drawDashBorder(),
-                    size = CheckboxSize.REGULAR,
-                    onCheckedChange = { checkState = it },
-                )
-            }
+    PreviewSection(
+        title = "Checkbox",
+        description = "Checkbox는 목록에서 선택할 항목이 여러 개 있을 때 사용됩니다.",
+    ) {
+        PreviewValueRow(name = "Regular") {
+            PrezelCheckbox(
+                checked = checkState,
+                modifier = Modifier.drawDashBorder(),
+                size = CheckboxSize.REGULAR,
+                onCheckedChange = { checkState = it },
+            )
         }
-    }
-}
-
-@ThemePreview
-@Composable
-private fun PrezelLargeCheckboxPreview() {
-    PrezelTheme {
-        Column(
-            modifier = Modifier
-                .background(PrezelTheme.colors.bgRegular)
-                .padding(16.dp),
-        ) {
-            CheckboxRowPreview(title = "Large Checkbox") {
-                var checkState by remember { mutableStateOf(true) }
-
-                PrezelCheckbox(
-                    checked = checkState,
-                    modifier = Modifier.drawDashBorder(),
-                    size = CheckboxSize.LARGE,
-                    onCheckedChange = { checkState = it },
-                )
-
-                PrezelCheckbox(
-                    checked = !checkState,
-                    modifier = Modifier.drawDashBorder(),
-                    size = CheckboxSize.LARGE,
-                    onCheckedChange = { checkState = it },
-                )
-            }
+        PreviewValueRow(name = "Large") {
+            PrezelCheckbox(
+                checked = !checkState,
+                modifier = Modifier.drawDashBorder(),
+                size = CheckboxSize.LARGE,
+                onCheckedChange = { checkState = it },
+            )
         }
     }
 }
-
-@Composable
-private fun CheckboxRowPreview(
-    title: String,
-    content: @Composable RowScope.() -> Unit,
-) {
-    Column(modifier = Modifier.padding(bottom = 16.dp)) {
-        Text(
-            text = title,
-            style = PrezelTextStyles.Caption2Regular.toTextStyle(),
-            color = PrezelTheme.colors.textLarge,
-            modifier = Modifier.padding(bottom = 4.dp),
-        )
-        Row(
-            horizontalArrangement = Arrangement.spacedBy(8.dp),
-            content = content,
-        )
-    }
-}

Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/PrezelDivider.kt

@@ -1,18 +1,16 @@
 package com.team.prezel.core.designsystem.component
 
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
 import androidx.compose.material3.HorizontalDivider
-import androidx.compose.material3.Text
 import androidx.compose.material3.VerticalDivider
 import androidx.compose.runtime.Composable
 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.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.BasicPreview
+import com.team.prezel.core.designsystem.preview.PreviewSection
+import com.team.prezel.core.designsystem.preview.PreviewValueRow
 import com.team.prezel.core.designsystem.theme.PrezelTheme
 
 enum class PrezelDividerType(
@@ -59,24 +57,34 @@ private fun PrezelDivider(
     }
 }
 
-@ThemePreview
+@BasicPreview
 @Composable
-private fun PrezelDividerPreview() {
-    PrezelTheme {
-        PreviewScaffold {
-            SectionTitle(title = "PrezelDivider - Horizontal")
-            Text("PrezelDividerType.DEFAULT")
+private fun PrezelHorizontalDividerPreview() {
+    PreviewSection(
+        title = "PrezelDivider - Horizontal",
+        description = "Divider는 두 요소 사이를 구분합니다.",
+    ) {
+        PreviewValueRow(name = "DEFAULT") {
             PrezelHorizontalDivider(type = PrezelDividerType.DEFAULT)
-            Text("PrezelDividerType.THICK")
+        }
+        PreviewValueRow(name = "THICK") {
             PrezelHorizontalDivider(type = PrezelDividerType.THICK)
+        }
+    }
+}
 
-            Spacer(modifier = Modifier.height(20.dp))
-
-            SectionTitle(title = "PrezelDivider - Vertical")
-            Text("PrezelDividerType.DEFAULT")
-            PrezelVerticalDivider(type = PrezelDividerType.DEFAULT, modifier = Modifier.height(100.dp))
-            Text("PrezelDividerType.THICK")
-            PrezelVerticalDivider(type = PrezelDividerType.THICK, modifier = Modifier.height(100.dp))
+@BasicPreview
+@Composable
+private fun PrezelVerticalDividerPreview() {
+    PreviewSection(
+        title = "PrezelDivider - Vertical",
+        description = "Divider는 두 요소 사이를 구분합니다.",
+    ) {
+        PreviewValueRow(name = "DEFAULT", modifier = Modifier.height(100.dp)) {
+            PrezelVerticalDivider(type = PrezelDividerType.DEFAULT)
+        }
+        PreviewValueRow(name = "THICK", modifier = Modifier.height(100.dp)) {
+            PrezelVerticalDivider(type = PrezelDividerType.THICK)
         }
     }
 }