From 139ae0a587a823c5912c5549078e53887087619b Mon Sep 17 00:00:00 2001
From: kangyuri1114 <yuri3334@gmail.com>
Date: Sun, 17 Nov 2024 22:30:30 +0900
Subject: [PATCH 1/8] =?UTF-8?q?feat:=20list=20color=20token=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

---
 .../yourssu/handy/compose/foundation/SemanticColors.kt    | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt
index d668f4f4..e03cf5ad 100644
--- a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt
@@ -112,7 +112,13 @@ data class ColorScheme(
 
     // Pagination / Basic
     val paginationBasicSelected: Color = ColorNeutralBlack,
-    val paginationBasicUnselected: Color = ColorGray500
+    val paginationBasicUnselected: Color = ColorGray500,
+
+    // List
+    val listEnabled: Color = ColorNeutralWhite,
+    val listPressed: Color = ColorGray50,
+    val listDisabled: Color = ColorNeutralWhite,
+
 )
 
 val lightColorScheme = ColorScheme()

From e23e04694bc6006f878ffd695f4c066be534b75b Mon Sep 17 00:00:00 2001
From: kangyuri1114 <yuri3334@gmail.com>
Date: Mon, 18 Nov 2024 00:14:59 +0900
Subject: [PATCH 2/8] =?UTF-8?q?feat:=20ListItem=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/other.xml                               |  33 +++--
 .../compose/foundation/SemanticColors.kt      |   1 +
 .../yourssu/handy/compose/list/ListItem.kt    | 128 ++++++++++++++++++
 3 files changed, 151 insertions(+), 11 deletions(-)
 create mode 100644 compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt

diff --git a/.idea/other.xml b/.idea/other.xml
index 94c96f63..104e542e 100644
--- a/.idea/other.xml
+++ b/.idea/other.xml
@@ -25,6 +25,17 @@
           <option name="screenX" value="1080" />
           <option name="screenY" value="2160" />
         </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="Lenovo" />
+          <option name="codename" value="TB370FU" />
+          <option name="id" value="TB370FU" />
+          <option name="manufacturer" value="Lenovo" />
+          <option name="name" value="Tab P12" />
+          <option name="screenDensity" value="340" />
+          <option name="screenX" value="1840" />
+          <option name="screenY" value="2944" />
+        </PersistentDeviceSelectionData>
         <PersistentDeviceSelectionData>
           <option name="api" value="31" />
           <option name="brand" value="samsung" />
@@ -245,6 +256,17 @@
           <option name="screenX" value="1812" />
           <option name="screenY" value="2176" />
         </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="q6q" />
+          <option name="id" value="q6q" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="Galaxy Z Fold6" />
+          <option name="screenDensity" value="420" />
+          <option name="screenX" value="1856" />
+          <option name="screenY" value="2160" />
+        </PersistentDeviceSelectionData>
         <PersistentDeviceSelectionData>
           <option name="api" value="30" />
           <option name="brand" value="google" />
@@ -301,17 +323,6 @@
           <option name="screenX" value="1080" />
           <option name="screenY" value="2424" />
         </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="29" />
-          <option name="brand" value="samsung" />
-          <option name="codename" value="x1q" />
-          <option name="id" value="x1q" />
-          <option name="manufacturer" value="Samsung" />
-          <option name="name" value="Galaxy S20" />
-          <option name="screenDensity" value="480" />
-          <option name="screenX" value="1440" />
-          <option name="screenY" value="3200" />
-        </PersistentDeviceSelectionData>
       </list>
     </option>
   </component>
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt
index e03cf5ad..a28e7cc0 100644
--- a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt
@@ -90,6 +90,7 @@ data class ColorScheme(
     val iconBasicPrimary: Color = ColorNeutralBlack,
     val iconBasicSecondary: Color = ColorGray700,
     val iconBasicTertiary: Color = ColorGray500,
+    val iconBasicDisabledStrong: Color = ColorGray300,
     val iconBasicDisabled: Color = ColorGray200,
     val iconBasicWhite: Color = ColorNeutralWhite,
 
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt
new file mode 100644
index 00000000..5fba18ad
--- /dev/null
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt
@@ -0,0 +1,128 @@
+package com.yourssu.handy.compose.list
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.yourssu.handy.compose.HandyTheme
+import com.yourssu.handy.compose.Icon
+import com.yourssu.handy.compose.Text
+import com.yourssu.handy.compose.icons.HandyIcons
+import com.yourssu.handy.compose.icons.line.ArrowsChevronRight
+import com.yourssu.handy.compose.icons.line.User
+
+@Composable
+fun ListItem(
+    headline: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    headlineColor: Color = HandyTheme.colors.textBasicPrimary,
+    enabled: Boolean = true,
+    leadingIcon: ImageVector? = null,
+    leadingIconColor: Color = HandyTheme.colors.iconBasicPrimary,
+    trailingIcon: ImageVector? = null,
+    tailingIconColor: Color = HandyTheme.colors.iconBasicTertiary,
+    containerColor: Color = HandyTheme.colors.listEnabled,
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
+) {
+    val pressed by interactionSource.collectIsPressedAsState()
+
+    val backgroundColor = determineBackgroundColor(enabled, pressed, containerColor)
+
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(64.dp)
+            .clickable(
+                onClick = onClick,
+                enabled = enabled,
+                interactionSource = interactionSource,
+                indication = null
+            )
+            .background(backgroundColor),
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Row {
+            leadingIcon?.let {
+                Icon(
+                    imageVector = leadingIcon,
+                    contentDescription = "leadingIcon",
+                    tint = if (enabled) leadingIconColor else HandyTheme.colors.iconBasicDisabledStrong,
+                    modifier = modifier.padding(start = 16.dp, top = 20.dp, bottom = 20.dp)
+                )
+            }
+
+            Text(
+                text = headline,
+                color = if (enabled) headlineColor else HandyTheme.colors.textBasicDisabled,
+                modifier = modifier.padding(start = 16.dp, top = 20.dp, bottom = 20.dp)
+            )
+
+        }
+
+        trailingIcon?.let {
+            Icon(
+                imageVector = trailingIcon,
+                contentDescription = "trailingIcon",
+                tint = if (enabled) tailingIconColor else HandyTheme.colors.iconBasicDisabledStrong,
+                modifier = modifier.padding(end = 16.dp, top = 20.dp, bottom = 20.dp)
+            )
+        }
+    }
+}
+
+@Composable
+fun determineBackgroundColor(
+    enabled: Boolean,
+    pressed: Boolean,
+    containerColor: Color
+): Color {
+    return when {
+        !enabled -> HandyTheme.colors.listDisabled
+        pressed -> HandyTheme.colors.listPressed
+        else -> containerColor
+    }
+}
+
+@Composable
+@Preview
+fun ListItemPreview() {
+    HandyTheme {
+        Column(
+            modifier = Modifier
+                .background(Color.White)
+                .fillMaxWidth()
+                .padding(20.dp),
+            verticalArrangement = Arrangement.spacedBy(10.dp)
+        ) {
+            ListItem(
+                headline = "Title",
+                onClick = {},
+                leadingIcon = HandyIcons.Line.User,
+                trailingIcon = HandyIcons.Line.ArrowsChevronRight,
+            )
+
+            ListItem(
+                headline = "Title",
+                onClick = {},
+                leadingIcon = HandyIcons.Line.User,
+                trailingIcon = HandyIcons.Line.ArrowsChevronRight,
+                enabled = false
+            )
+        }
+    }
+}
\ No newline at end of file

From b068854c5950596103896955eb86dea7e787bef2 Mon Sep 17 00:00:00 2001
From: kangyuri1114 <yuri3334@gmail.com>
Date: Fri, 22 Nov 2024 17:52:43 +0900
Subject: [PATCH 3/8] =?UTF-8?q?feat:=20content=20=EA=B5=AC=EC=84=B1?=
 =?UTF-8?q?=EC=9A=94=EC=86=8C=20Color=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?=
 =?UTF-8?q?=EA=B0=80=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../yourssu/handy/compose/list/ListItem.kt    | 88 +++++++++++++++----
 1 file changed, 70 insertions(+), 18 deletions(-)

diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt
index 5fba18ad..94c9596f 100644
--- a/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt
@@ -13,9 +13,11 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.yourssu.handy.compose.HandyTheme
@@ -24,24 +26,26 @@ import com.yourssu.handy.compose.Text
 import com.yourssu.handy.compose.icons.HandyIcons
 import com.yourssu.handy.compose.icons.line.ArrowsChevronRight
 import com.yourssu.handy.compose.icons.line.User
+import org.w3c.dom.Text
 
 @Composable
 fun ListItem(
     headline: String,
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
-    headlineColor: Color = HandyTheme.colors.textBasicPrimary,
     enabled: Boolean = true,
     leadingIcon: ImageVector? = null,
-    leadingIconColor: Color = HandyTheme.colors.iconBasicPrimary,
     trailingIcon: ImageVector? = null,
-    tailingIconColor: Color = HandyTheme.colors.iconBasicTertiary,
     containerColor: Color = HandyTheme.colors.listEnabled,
+    pressedContainerColor: Color = HandyTheme.colors.listPressed,
+    headlineColor: Color = HandyTheme.colors.textBasicPrimary,
+    leadingIconColor: Color = HandyTheme.colors.iconBasicPrimary,
+    tailingIconColor: Color = HandyTheme.colors.iconBasicTertiary,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
 ) {
     val pressed by interactionSource.collectIsPressedAsState()
 
-    val backgroundColor = determineBackgroundColor(enabled, pressed, containerColor)
+    val backgroundColor = determineContainerColor(enabled, pressed, containerColor, pressedContainerColor)
 
     Row(
         modifier = modifier
@@ -56,57 +60,70 @@ fun ListItem(
             .background(backgroundColor),
         horizontalArrangement = Arrangement.SpaceBetween
     ) {
-        Row {
+        Row(
+            modifier = modifier.padding(horizontal = 16.dp, vertical = 20.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
             leadingIcon?.let {
                 Icon(
                     imageVector = leadingIcon,
                     contentDescription = "leadingIcon",
-                    tint = if (enabled) leadingIconColor else HandyTheme.colors.iconBasicDisabledStrong,
-                    modifier = modifier.padding(start = 16.dp, top = 20.dp, bottom = 20.dp)
+                    tint = determineContentColor(enabled, leadingIconColor),
                 )
             }
 
             Text(
                 text = headline,
-                color = if (enabled) headlineColor else HandyTheme.colors.textBasicDisabled,
-                modifier = modifier.padding(start = 16.dp, top = 20.dp, bottom = 20.dp)
+                color = determineContentColor(enabled, headlineColor),
+                modifier = modifier.padding(horizontal = 16.dp),
+                overflow = TextOverflow.Ellipsis,
             )
-
         }
 
         trailingIcon?.let {
             Icon(
                 imageVector = trailingIcon,
                 contentDescription = "trailingIcon",
-                tint = if (enabled) tailingIconColor else HandyTheme.colors.iconBasicDisabledStrong,
-                modifier = modifier.padding(end = 16.dp, top = 20.dp, bottom = 20.dp)
+                tint = determineContentColor(enabled, tailingIconColor),
+                modifier = modifier.padding(end = 16.dp, bottom = 20.dp, top = 20.dp)
             )
         }
     }
 }
 
 @Composable
-fun determineBackgroundColor(
+fun determineContainerColor(
     enabled: Boolean,
     pressed: Boolean,
-    containerColor: Color
+    containerColor: Color,
+    pressedContainerColor: Color
 ): Color {
     return when {
         !enabled -> HandyTheme.colors.listDisabled
-        pressed -> HandyTheme.colors.listPressed
+        pressed -> pressedContainerColor
         else -> containerColor
     }
 }
 
+@Composable
+fun determineContentColor(
+    enabled: Boolean,
+    contentColor: Color
+): Color {
+    return when {
+        !enabled -> HandyTheme.colors.textBasicDisabled
+        else -> contentColor
+    }
+}
+
 @Composable
 @Preview
 fun ListItemPreview() {
     HandyTheme {
         Column(
             modifier = Modifier
-                .background(Color.White)
-                .fillMaxWidth()
-                .padding(20.dp),
+                .background(Color.Red)
+                .fillMaxWidth(),
             verticalArrangement = Arrangement.spacedBy(10.dp)
         ) {
             ListItem(
@@ -123,6 +140,41 @@ fun ListItemPreview() {
                 trailingIcon = HandyIcons.Line.ArrowsChevronRight,
                 enabled = false
             )
+
+            ListItem(
+                headline = "Titleeeeeeeeeeeeeeeeeeeeeeee",
+                onClick = {},
+                leadingIcon = HandyIcons.Line.User,
+                trailingIcon = HandyIcons.Line.ArrowsChevronRight,
+                containerColor = HandyTheme.colors.textBrandPrimary,
+                tailingIconColor = HandyTheme.colors.textStatusNegative,
+                headlineColor = HandyTheme.colors.textBasicWhite,
+                leadingIconColor = HandyTheme.colors.iconBasicTertiary
+            )
+
+            ListItem(
+                headline = "Titleeeeeeeeeeeeeeeeeeeeeeee",
+                onClick = {},
+                leadingIcon = HandyIcons.Line.User,
+                trailingIcon = HandyIcons.Line.ArrowsChevronRight,
+                containerColor = HandyTheme.colors.textBrandPrimary,
+                tailingIconColor = HandyTheme.colors.textStatusNegative,
+                headlineColor = HandyTheme.colors.textBasicWhite,
+                leadingIconColor = HandyTheme.colors.iconBasicTertiary,
+                pressedContainerColor = HandyTheme.colors.iconBasicTertiary
+            )
+
+            ListItem(
+                headline = "Titleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
+                onClick = {},
+                leadingIcon = HandyIcons.Line.User,
+                trailingIcon = HandyIcons.Line.ArrowsChevronRight,
+                containerColor = HandyTheme.colors.textBrandPrimary,
+                tailingIconColor = HandyTheme.colors.textStatusNegative,
+                headlineColor = HandyTheme.colors.textBasicWhite,
+                leadingIconColor = HandyTheme.colors.iconBasicTertiary,
+                pressedContainerColor = HandyTheme.colors.iconBasicTertiary
+            )
         }
     }
 }
\ No newline at end of file

From 775593798fb9be82328dc0b3f24389f17dba3c81 Mon Sep 17 00:00:00 2001
From: yurikang <yuri3334@gmail.com>
Date: Tue, 8 Apr 2025 14:06:20 +0900
Subject: [PATCH 4/8] merge main to feat/rein/list

---
 .gitignore                                    |   2 +
 .idea/.gitignore                              |   3 -
 .idea/compiler.xml                            |   2 +-
 .idea/gradle.xml                              |   1 +
 .idea/inspectionProfiles/Project_Default.xml  |  41 ---
 .idea/migrations.xml                          |  10 -
 .idea/misc.xml                                |   7 +-
 .idea/other.xml                               | 329 ------------------
 .idea/vcs.xml                                 |   2 +-
 .../com/yourssu/handy/demo/ButtonPreview.kt   | 187 +++++-----
 .../handy/compose/FloatingActionButton.kt     |   4 +-
 .../handy/compose/button/BaseButton.kt        |   2 +-
 .../yourssu/handy/compose/button/BoxButton.kt | 181 ----------
 .../handy/compose/button/ButtonState.kt       |   6 +-
 .../handy/compose/button/TextButton.kt        |   2 +-
 .../handy/compose/foundation/Radius.kt        |   2 +-
 .../compose/foundation/SemanticColors.kt      |  40 ++-
 .../yourssu/handy/compose/list/ListItem.kt    |   2 +-
 18 files changed, 132 insertions(+), 691 deletions(-)
 delete mode 100644 .idea/.gitignore
 delete mode 100644 .idea/migrations.xml
 delete mode 100644 .idea/other.xml
 delete mode 100644 compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt

diff --git a/.gitignore b/.gitignore
index aa724b77..7778bca7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 *.iml
 .gradle
+.idea/
 /local.properties
 /.idea/caches
 /.idea/libraries
@@ -7,6 +8,7 @@
 /.idea/workspace.xml
 /.idea/navEditor.xml
 /.idea/assetWizardSettings.xml
+/.idea/deploymentTargetSelector.xml
 .DS_Store
 /build
 /captures
diff --git a/.idea/.gitignore b/.idea/.gitignore
deleted file mode 100644
index 26d33521..00000000
--- a/.idea/.gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
diff --git a/.idea/compiler.xml b/.idea/compiler.xml
index b589d56e..b86273d9 100644
--- a/.idea/compiler.xml
+++ b/.idea/compiler.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="CompilerConfiguration">
-    <bytecodeTargetLevel target="17" />
+    <bytecodeTargetLevel target="21" />
   </component>
 </project>
\ No newline at end of file
diff --git a/.idea/gradle.xml b/.idea/gradle.xml
index bb0078e0..a4253118 100644
--- a/.idea/gradle.xml
+++ b/.idea/gradle.xml
@@ -4,6 +4,7 @@
   <component name="GradleSettings">
     <option name="linkedExternalProjectsSettings">
       <GradleProjectSettings>
+        <option name="testRunner" value="CHOOSE_PER_TEST" />
         <option name="externalProjectPath" value="$PROJECT_DIR$" />
         <option name="gradleJvm" value="#GRADLE_LOCAL_JAVA_HOME" />
         <option name="modules">
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 44ca2d9b..e69de29b 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -1,41 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="PreviewAnnotationInFunctionWithParameters" enabled="true" level="ERROR" enabled_by_default="true">
-      <option name="composableFile" value="true" />
-      <option name="previewFile" value="true" />
-    </inspection_tool>
-    <inspection_tool class="PreviewApiLevelMustBeValid" enabled="true" level="ERROR" enabled_by_default="true">
-      <option name="composableFile" value="true" />
-      <option name="previewFile" value="true" />
-    </inspection_tool>
-    <inspection_tool class="PreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="composableFile" value="true" />
-      <option name="previewFile" value="true" />
-    </inspection_tool>
-    <inspection_tool class="PreviewFontScaleMustBeGreaterThanZero" enabled="true" level="ERROR" enabled_by_default="true">
-      <option name="composableFile" value="true" />
-      <option name="previewFile" value="true" />
-    </inspection_tool>
-    <inspection_tool class="PreviewMultipleParameterProviders" enabled="true" level="ERROR" enabled_by_default="true">
-      <option name="composableFile" value="true" />
-      <option name="previewFile" value="true" />
-    </inspection_tool>
-    <inspection_tool class="PreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
-      <option name="composableFile" value="true" />
-      <option name="previewFile" value="true" />
-    </inspection_tool>
-    <inspection_tool class="PreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
-      <option name="composableFile" value="true" />
-      <option name="previewFile" value="true" />
-    </inspection_tool>
-    <inspection_tool class="PreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
-      <option name="composableFile" value="true" />
-      <option name="previewFile" value="true" />
-    </inspection_tool>
-    <inspection_tool class="PreviewPickerAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
-      <option name="composableFile" value="true" />
-      <option name="previewFile" value="true" />
-    </inspection_tool>
-  </profile>
-</component>
\ No newline at end of file
diff --git a/.idea/migrations.xml b/.idea/migrations.xml
deleted file mode 100644
index f8051a6f..00000000
--- a/.idea/migrations.xml
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectMigrations">
-    <option name="MigrateToGradleLocalJavaHome">
-      <set>
-        <option value="$PROJECT_DIR$" />
-      </set>
-    </option>
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
index 8978d23d..dc232202 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -1,9 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="ExternalStorageConfigurationManager" enabled="true" />
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_17" default="true" project-jdk-name="jbr-17" project-jdk-type="JavaSDK">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_21" default="true" project-jdk-name="jbr-21" project-jdk-type="JavaSDK">
     <output url="file://$PROJECT_DIR$/build/classes" />
   </component>
-  <component name="ProjectType">
-    <option name="id" value="Android" />
-  </component>
 </project>
\ No newline at end of file
diff --git a/.idea/other.xml b/.idea/other.xml
deleted file mode 100644
index 104e542e..00000000
--- a/.idea/other.xml
+++ /dev/null
@@ -1,329 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="direct_access_persist.xml">
-    <option name="deviceSelectionList">
-      <list>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="27" />
-          <option name="brand" value="DOCOMO" />
-          <option name="codename" value="F01L" />
-          <option name="id" value="F01L" />
-          <option name="manufacturer" value="FUJITSU" />
-          <option name="name" value="F-01L" />
-          <option name="screenDensity" value="360" />
-          <option name="screenX" value="720" />
-          <option name="screenY" value="1280" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="28" />
-          <option name="brand" value="DOCOMO" />
-          <option name="codename" value="SH-01L" />
-          <option name="id" value="SH-01L" />
-          <option name="manufacturer" value="SHARP" />
-          <option name="name" value="AQUOS sense2 SH-01L" />
-          <option name="screenDensity" value="480" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2160" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="Lenovo" />
-          <option name="codename" value="TB370FU" />
-          <option name="id" value="TB370FU" />
-          <option name="manufacturer" value="Lenovo" />
-          <option name="name" value="Tab P12" />
-          <option name="screenDensity" value="340" />
-          <option name="screenX" value="1840" />
-          <option name="screenY" value="2944" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="31" />
-          <option name="brand" value="samsung" />
-          <option name="codename" value="a51" />
-          <option name="id" value="a51" />
-          <option name="manufacturer" value="Samsung" />
-          <option name="name" value="Galaxy A51" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2400" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="google" />
-          <option name="codename" value="akita" />
-          <option name="id" value="akita" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 8a" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2400" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="33" />
-          <option name="brand" value="samsung" />
-          <option name="codename" value="b0q" />
-          <option name="id" value="b0q" />
-          <option name="manufacturer" value="Samsung" />
-          <option name="name" value="Galaxy S22 Ultra" />
-          <option name="screenDensity" value="600" />
-          <option name="screenX" value="1440" />
-          <option name="screenY" value="3088" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="32" />
-          <option name="brand" value="google" />
-          <option name="codename" value="bluejay" />
-          <option name="id" value="bluejay" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 6a" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2400" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="google" />
-          <option name="codename" value="caiman" />
-          <option name="id" value="caiman" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 9 Pro" />
-          <option name="screenDensity" value="360" />
-          <option name="screenX" value="960" />
-          <option name="screenY" value="2142" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="google" />
-          <option name="codename" value="comet" />
-          <option name="id" value="comet" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 9 Pro Fold" />
-          <option name="screenDensity" value="390" />
-          <option name="screenX" value="2076" />
-          <option name="screenY" value="2152" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="29" />
-          <option name="brand" value="samsung" />
-          <option name="codename" value="crownqlteue" />
-          <option name="id" value="crownqlteue" />
-          <option name="manufacturer" value="Samsung" />
-          <option name="name" value="Galaxy Note9" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="2220" />
-          <option name="screenY" value="1080" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="samsung" />
-          <option name="codename" value="dm3q" />
-          <option name="id" value="dm3q" />
-          <option name="manufacturer" value="Samsung" />
-          <option name="name" value="Galaxy S23 Ultra" />
-          <option name="screenDensity" value="600" />
-          <option name="screenX" value="1440" />
-          <option name="screenY" value="3088" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="samsung" />
-          <option name="codename" value="e1q" />
-          <option name="id" value="e1q" />
-          <option name="manufacturer" value="Samsung" />
-          <option name="name" value="Galaxy S24" />
-          <option name="screenDensity" value="480" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2340" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="33" />
-          <option name="brand" value="google" />
-          <option name="codename" value="felix" />
-          <option name="id" value="felix" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel Fold" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="2208" />
-          <option name="screenY" value="1840" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="google" />
-          <option name="codename" value="felix" />
-          <option name="id" value="felix" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel Fold" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="2208" />
-          <option name="screenY" value="1840" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="33" />
-          <option name="brand" value="google" />
-          <option name="codename" value="felix_camera" />
-          <option name="id" value="felix_camera" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel Fold (Camera-enabled)" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="2208" />
-          <option name="screenY" value="1840" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="33" />
-          <option name="brand" value="samsung" />
-          <option name="codename" value="gts8uwifi" />
-          <option name="id" value="gts8uwifi" />
-          <option name="manufacturer" value="Samsung" />
-          <option name="name" value="Galaxy Tab S8 Ultra" />
-          <option name="screenDensity" value="320" />
-          <option name="screenX" value="1848" />
-          <option name="screenY" value="2960" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="google" />
-          <option name="codename" value="husky" />
-          <option name="id" value="husky" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 8 Pro" />
-          <option name="screenDensity" value="390" />
-          <option name="screenX" value="1008" />
-          <option name="screenY" value="2244" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="30" />
-          <option name="brand" value="motorola" />
-          <option name="codename" value="java" />
-          <option name="id" value="java" />
-          <option name="manufacturer" value="Motorola" />
-          <option name="name" value="G20" />
-          <option name="screenDensity" value="280" />
-          <option name="screenX" value="720" />
-          <option name="screenY" value="1600" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="google" />
-          <option name="codename" value="komodo" />
-          <option name="id" value="komodo" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 9 Pro XL" />
-          <option name="screenDensity" value="360" />
-          <option name="screenX" value="1008" />
-          <option name="screenY" value="2244" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="33" />
-          <option name="brand" value="google" />
-          <option name="codename" value="lynx" />
-          <option name="id" value="lynx" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 7a" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2400" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="31" />
-          <option name="brand" value="google" />
-          <option name="codename" value="oriole" />
-          <option name="id" value="oriole" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 6" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2400" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="33" />
-          <option name="brand" value="google" />
-          <option name="codename" value="panther" />
-          <option name="id" value="panther" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 7" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2400" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="samsung" />
-          <option name="codename" value="q5q" />
-          <option name="id" value="q5q" />
-          <option name="manufacturer" value="Samsung" />
-          <option name="name" value="Galaxy Z Fold5" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1812" />
-          <option name="screenY" value="2176" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="samsung" />
-          <option name="codename" value="q6q" />
-          <option name="id" value="q6q" />
-          <option name="manufacturer" value="Samsung" />
-          <option name="name" value="Galaxy Z Fold6" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1856" />
-          <option name="screenY" value="2160" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="30" />
-          <option name="brand" value="google" />
-          <option name="codename" value="r11" />
-          <option name="id" value="r11" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel Watch" />
-          <option name="screenDensity" value="320" />
-          <option name="screenX" value="384" />
-          <option name="screenY" value="384" />
-          <option name="type" value="WEAR_OS" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="30" />
-          <option name="brand" value="google" />
-          <option name="codename" value="redfin" />
-          <option name="id" value="redfin" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 5" />
-          <option name="screenDensity" value="440" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2340" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="google" />
-          <option name="codename" value="shiba" />
-          <option name="id" value="shiba" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 8" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2400" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="33" />
-          <option name="brand" value="google" />
-          <option name="codename" value="tangorpro" />
-          <option name="id" value="tangorpro" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel Tablet" />
-          <option name="screenDensity" value="320" />
-          <option name="screenX" value="1600" />
-          <option name="screenY" value="2560" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="google" />
-          <option name="codename" value="tokay" />
-          <option name="id" value="tokay" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 9" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2424" />
-        </PersistentDeviceSelectionData>
-      </list>
-    </option>
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
index 35eb1ddf..94a25f7f 100644
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
   </component>
 </project>
\ No newline at end of file
diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/ButtonPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/ButtonPreview.kt
index 74929549..454c286c 100644
--- a/app/src/main/kotlin/com/yourssu/handy/demo/ButtonPreview.kt
+++ b/app/src/main/kotlin/com/yourssu/handy/demo/ButtonPreview.kt
@@ -4,18 +4,15 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color.Companion.White
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.yourssu.handy.compose.HandyTheme
-import com.yourssu.handy.compose.button.BoxButton
-import com.yourssu.handy.compose.button.BoxButtonSize
-import com.yourssu.handy.compose.button.BoxButtonType
+import com.yourssu.handy.compose.button.FilledButton
+import com.yourssu.handy.compose.button.FilledButtonSize
+import com.yourssu.handy.compose.button.FilledButtonType
 import com.yourssu.handy.compose.button.TextButton
 import com.yourssu.handy.compose.button.TextButtonSize
 import com.yourssu.handy.compose.button.TextButtonType
@@ -25,7 +22,7 @@ import com.yourssu.handy.compose.icons.line.ExternalLink
 
 @Preview
 @Composable
-private fun BoxButtonPreview() {
+private fun FilledButtonPreview() {
     HandyTheme {
         Column(
             modifier = Modifier.background(White),
@@ -38,179 +35,179 @@ private fun BoxButtonPreview() {
                     verticalArrangement = Arrangement.spacedBy(8.dp)
                 ) {
 
-                    BoxButton(
+                    FilledButton(
                         onClick = {},
                         text = "isDisabled",
                         enabled = false,
-                        sizeType = BoxButtonSize.XL,
+                        sizeType = FilledButtonSize.XL,
                     )
 
-                    BoxButton(
+                    FilledButton(
                         onClick = {},
                         text = "XL Button",
-                        sizeType = BoxButtonSize.XL,
+                        sizeType = FilledButtonSize.XL,
                     )
 
-                    BoxButton(
+                    FilledButton(
                         onClick = {},
                         text = "L Button",
-                        sizeType = BoxButtonSize.L,
+                        sizeType = FilledButtonSize.L,
                     )
 
-                    BoxButton(
+                    FilledButton(
                         onClick = {},
                         text = "M Button",
-                        sizeType = BoxButtonSize.M,
+                        sizeType = FilledButtonSize.M,
                     )
 
-                    BoxButton(
+                    FilledButton(
                         onClick = {},
                         text = "S Button",
-                        sizeType = BoxButtonSize.S,
+                        sizeType = FilledButtonSize.S,
                     )
 
-                    BoxButton(
+                    FilledButton(
                         onClick = {},
                         text = "XS Button",
-                        sizeType = BoxButtonSize.XS,
+                        sizeType = FilledButtonSize.XS,
                     )
 
-                    BoxButton(
+                    FilledButton(
                         onClick = {},
                         text = "XXS Button",
-                        sizeType = BoxButtonSize.XXS,
+                        sizeType = FilledButtonSize.XXS,
                     )
                 }
                 Column(
                     verticalArrangement = Arrangement.spacedBy(8.dp)
 
                 ) {
-                    BoxButton(
+                    FilledButton(
                         onClick = {},
-                        buttonType = BoxButtonType.Secondary,
+                        buttonType = FilledButtonType.Secondary,
                         text = "isDisabled",
                         enabled = false,
-                        sizeType = BoxButtonSize.XL,
+                        sizeType = FilledButtonSize.XL,
                     )
 
-                    BoxButton(
+                    FilledButton(
                         onClick = {},
                         text = "XL Button",
-                        buttonType = BoxButtonType.Secondary,
-                        sizeType = BoxButtonSize.XL,
+                        buttonType = FilledButtonType.Secondary,
+                        sizeType = FilledButtonSize.XL,
                     )
 
-                    BoxButton(
+                    FilledButton(
                         onClick = {},
                         text = "L Button",
-                        buttonType = BoxButtonType.Secondary,
-                        sizeType = BoxButtonSize.L,
+                        buttonType = FilledButtonType.Secondary,
+                        sizeType = FilledButtonSize.L,
                     )
 
-                    BoxButton(
+                    FilledButton(
                         onClick = {},
                         text = "M Button",
-                        buttonType = BoxButtonType.Secondary,
-                        sizeType = BoxButtonSize.M,
+                        buttonType = FilledButtonType.Secondary,
+                        sizeType = FilledButtonSize.M,
                     )
 
-                    BoxButton(
+                    FilledButton(
                         onClick = {},
                         text = "S Button",
-                        buttonType = BoxButtonType.Secondary,
-                        sizeType = BoxButtonSize.S,
+                        buttonType = FilledButtonType.Secondary,
+                        sizeType = FilledButtonSize.S,
                     )
 
-                    BoxButton(
+                    FilledButton(
                         onClick = {},
                         text = "XS Button",
-                        buttonType = BoxButtonType.Secondary,
-                        sizeType = BoxButtonSize.XS,
+                        buttonType = FilledButtonType.Secondary,
+                        sizeType = FilledButtonSize.XS,
                     )
 
-                    BoxButton(
+                    FilledButton(
                         onClick = {},
                         text = "XXS Button",
-                        buttonType = BoxButtonType.Secondary,
-                        sizeType = BoxButtonSize.XXS,
+                        buttonType = FilledButtonType.Secondary,
+                        sizeType = FilledButtonSize.XXS,
                     )
                 }
                 Column(
                     verticalArrangement = Arrangement.spacedBy(8.dp)
                 ) {
-                    BoxButton(
+                    FilledButton(
                         onClick = {},
-                        buttonType = BoxButtonType.Tertiary,
+                        buttonType = FilledButtonType.Outlined,
                         text = "isDisabled",
                         enabled = false,
-                        sizeType = BoxButtonSize.XL,
+                        sizeType = FilledButtonSize.XL,
                     )
 
-                    BoxButton(
+                    FilledButton(
                         onClick = {},
                         text = "XL Button",
-                        buttonType = BoxButtonType.Tertiary,
-                        sizeType = BoxButtonSize.XL,
+                        buttonType = FilledButtonType.Outlined,
+                        sizeType = FilledButtonSize.XL,
                     )
 
-                    BoxButton(
+                    FilledButton(
                         onClick = {},
                         text = "L Button",
-                        buttonType = BoxButtonType.Tertiary,
-                        sizeType = BoxButtonSize.L,
+                        buttonType = FilledButtonType.Outlined,
+                        sizeType = FilledButtonSize.L,
                     )
 
-                    BoxButton(
+                    FilledButton(
                         onClick = {},
                         text = "M Button",
-                        buttonType = BoxButtonType.Tertiary,
-                        sizeType = BoxButtonSize.M,
+                        buttonType = FilledButtonType.Outlined,
+                        sizeType = FilledButtonSize.M,
                     )
 
-                    BoxButton(
+                    FilledButton(
                         onClick = {},
                         text = "S Button",
-                        buttonType = BoxButtonType.Tertiary,
-                        sizeType = BoxButtonSize.S,
+                        buttonType = FilledButtonType.Outlined,
+                        sizeType = FilledButtonSize.S,
                     )
 
-                    BoxButton(
+                    FilledButton(
                         onClick = {},
                         text = "XS Button",
-                        buttonType = BoxButtonType.Tertiary,
-                        sizeType = BoxButtonSize.XS,
+                        buttonType = FilledButtonType.Outlined,
+                        sizeType = FilledButtonSize.XS,
                     )
 
-                    BoxButton(
+                    FilledButton(
                         onClick = {},
                         text = "XXS Button",
-                        buttonType = BoxButtonType.Tertiary,
-                        sizeType = BoxButtonSize.XXS,
+                        buttonType = FilledButtonType.Outlined,
+                        sizeType = FilledButtonSize.XXS,
                     )
                 }
             }
             Row(
                 horizontalArrangement = Arrangement.spacedBy(8.dp),
             ) {
-                BoxButton(
+                FilledButton(
                     onClick = {},
                     text = "M Button",
-                    sizeType = BoxButtonSize.S,
+                    sizeType = FilledButtonSize.S,
                     leftIcon = HandyIcons.Line.Add,
                     enabled = false,
                 )
 
-                BoxButton(
+                FilledButton(
                     onClick = {},
                     text = "M Button",
-                    sizeType = BoxButtonSize.S,
+                    sizeType = FilledButtonSize.S,
                     rightIcon = HandyIcons.Line.Add,
                     enabled = false,
                 )
-                BoxButton(
+                FilledButton(
                     onClick = {},
                     text = "M Button",
-                    sizeType = BoxButtonSize.S,
+                    sizeType = FilledButtonSize.S,
                     leftIcon = HandyIcons.Line.Add,
                     rightIcon = HandyIcons.Line.Add,
                     enabled = false,
@@ -219,23 +216,23 @@ private fun BoxButtonPreview() {
             Row(
                 horizontalArrangement = Arrangement.spacedBy(8.dp),
             ) {
-                BoxButton(
+                FilledButton(
                     onClick = {},
                     text = "M Button",
-                    sizeType = BoxButtonSize.S,
+                    sizeType = FilledButtonSize.S,
                     leftIcon = HandyIcons.Line.Add,
                 )
 
-                BoxButton(
+                FilledButton(
                     onClick = {},
                     text = "M Button",
-                    sizeType = BoxButtonSize.S,
+                    sizeType = FilledButtonSize.S,
                     rightIcon = HandyIcons.Line.Add,
                 )
-                BoxButton(
+                FilledButton(
                     onClick = {},
                     text = "M Button",
-                    sizeType = BoxButtonSize.S,
+                    sizeType = FilledButtonSize.S,
                     leftIcon = HandyIcons.Line.Add,
                     rightIcon = HandyIcons.Line.Add,
                 )
@@ -243,26 +240,26 @@ private fun BoxButtonPreview() {
             Row(
                 horizontalArrangement = Arrangement.spacedBy(8.dp),
             ) {
-                BoxButton(
+                FilledButton(
                     onClick = {},
                     text = "M Button",
-                    sizeType = BoxButtonSize.S,
-                    buttonType = BoxButtonType.Secondary,
+                    sizeType = FilledButtonSize.S,
+                    buttonType = FilledButtonType.Secondary,
                     leftIcon = HandyIcons.Line.Add,
                 )
 
-                BoxButton(
+                FilledButton(
                     onClick = {},
                     text = "M Button",
-                    sizeType = BoxButtonSize.S,
-                    buttonType = BoxButtonType.Secondary,
+                    sizeType = FilledButtonSize.S,
+                    buttonType = FilledButtonType.Secondary,
                     rightIcon = HandyIcons.Line.Add,
                 )
-                BoxButton(
+                FilledButton(
                     onClick = {},
                     text = "M Button",
-                    sizeType = BoxButtonSize.S,
-                    buttonType = BoxButtonType.Secondary,
+                    sizeType = FilledButtonSize.S,
+                    buttonType = FilledButtonType.Secondary,
                     leftIcon = HandyIcons.Line.Add,
                     rightIcon = HandyIcons.Line.Add,
                 )
@@ -270,26 +267,26 @@ private fun BoxButtonPreview() {
             Row(
                 horizontalArrangement = Arrangement.spacedBy(8.dp),
             ){
-                BoxButton(
+                FilledButton(
                     onClick = {},
                     text = "M Button",
-                    sizeType = BoxButtonSize.S,
-                    buttonType = BoxButtonType.Tertiary,
+                    sizeType = FilledButtonSize.S,
+                    buttonType = FilledButtonType.Outlined,
                     leftIcon = HandyIcons.Line.Add,
                 )
 
-                BoxButton(
+                FilledButton(
                     onClick = {},
                     text = "M Button",
-                    sizeType = BoxButtonSize.S,
-                    buttonType = BoxButtonType.Tertiary,
+                    sizeType = FilledButtonSize.S,
+                    buttonType = FilledButtonType.Outlined,
                     rightIcon = HandyIcons.Line.Add,
                 )
-                BoxButton(
+                FilledButton(
                     onClick = {},
                     text = "M Button",
-                    sizeType = BoxButtonSize.S,
-                    buttonType = BoxButtonType.Tertiary,
+                    sizeType = FilledButtonSize.S,
+                    buttonType = FilledButtonType.Outlined,
                     leftIcon = HandyIcons.Line.Add,
                     rightIcon = HandyIcons.Line.Add,
                 )
@@ -297,10 +294,10 @@ private fun BoxButtonPreview() {
             Row(
                 horizontalArrangement = Arrangement.spacedBy(8.dp),
             ) {
-                BoxButton(
+                FilledButton(
                     onClick = {},
                     text = "M Button",
-                    sizeType = BoxButtonSize.M,
+                    sizeType = FilledButtonSize.M,
                     leftIcon = HandyIcons.Line.Add,
                     horizontalPadding = 100.dp
                 )
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/FloatingActionButton.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/FloatingActionButton.kt
index f2383207..01649927 100644
--- a/compose/src/main/kotlin/com/yourssu/handy/compose/FloatingActionButton.kt
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/FloatingActionButton.kt
@@ -56,7 +56,7 @@ fun FloatingActionButton(
     val contentColor by containerColor.contentColor(enabled)
     val borderColor = containerColor.borderColor()
 
-    val containerSize = boxButtonSizeStateBySize(size = sizeType)
+    val containerSize = floatingButtonSizeStateBySize(size = sizeType)
 
     Surface(
         onClick = onClick,
@@ -93,7 +93,7 @@ data class FloatingActionButtonSizeState(
 )
 
 
-private fun boxButtonSizeStateBySize(
+private fun floatingButtonSizeStateBySize(
     size: FloatingActionButtonSize,
 ): FloatingActionButtonSizeState = when (size) {
     FloatingActionButtonSize.S -> FloatingActionButtonSizeState(
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/button/BaseButton.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/button/BaseButton.kt
index 5e14a8df..46074303 100644
--- a/compose/src/main/kotlin/com/yourssu/handy/compose/button/BaseButton.kt
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/button/BaseButton.kt
@@ -22,7 +22,7 @@ import com.yourssu.handy.compose.Surface
 /**
  * BaseButton : ripple 효과가 없는 Composable 함수 입니다.
  *
- * BoxButton, TextButton의 베이스가 됩니다.
+ * FilledButton, TextButton의 베이스가 됩니다.
  *
  * @param onClick Button 클릭 시 실행되는 함수
  * @param colors Button 색상 상태
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt
deleted file mode 100644
index e6f69c29..00000000
--- a/compose/src/main/kotlin/com/yourssu/handy/compose/button/BoxButton.kt
+++ /dev/null
@@ -1,181 +0,0 @@
-package com.yourssu.handy.compose.button
-
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-import com.yourssu.handy.compose.HandyTheme
-import com.yourssu.handy.compose.Icon
-import com.yourssu.handy.compose.IconSize
-import com.yourssu.handy.compose.Text
-import com.yourssu.handy.compose.foundation.HandyTypography
-
-
-enum class BoxButtonType {
-    Primary,
-    Secondary,
-    Tertiary;
-}
-
-enum class BoxButtonSize {
-    XXS,
-    XS,
-    S,
-    M,
-    L,
-    XL;
-}
-
-/**
- * BoxButton : Box 형태의 Button 입니다.
- * type : Primary, Secondary, Tertiary
- * size : XXS, XS, S, M, L, XL
- *
- * @param onClick Button 클릭 시 실행되는 함수
- * @param text Button 내부 text
- * @param leftIcon Button 왼쪽에 표시되는 Icon
- * @param rightIcon Button 오른쪽에 표시되는 Icon
- * @param enabled Button 활성화 여부, default true
- * @param sizeType Button 사이즈
- * @param buttonType Button 타입 (Primary, Secondary, Tertiary)
- * @param interactionSource Button 상호작용 소스
- * @param horizontalPadding Button 내부 content padding
- **/
-
-@Composable
-fun BoxButton(
-    onClick: () -> Unit,
-    modifier: Modifier = Modifier,
-    text: String,
-    leftIcon: ImageVector? = null,
-    rightIcon: ImageVector? = null,
-    enabled: Boolean = true,
-    sizeType: BoxButtonSize = BoxButtonSize.M,
-    buttonType: BoxButtonType = BoxButtonType.Primary,
-    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
-    horizontalPadding: Dp = boxButtonSizeStateBySize(size = sizeType).horizontalPadding,
-) {
-    val roundingDp = boxButtonSizeStateBySize(size = sizeType).round
-    val (typo, iconSize, height) = boxButtonSizeStateBySize(size = sizeType)
-
-    BaseButton(
-        onClick = onClick,
-        colors = boxButtonColorByType(
-            type = buttonType,
-        ),
-        modifier = Modifier.height(height),
-        enabled = enabled,
-        showBorder = (buttonType == BoxButtonType.Tertiary),
-        interactionSource = interactionSource,
-        rounding = roundingDp,
-        contentPadding = PaddingValues(
-            horizontal = horizontalPadding,
-        ),
-    ) {
-        leftIcon?.let {
-            Icon(
-                imageVector = leftIcon,
-                iconSize = iconSize,
-                modifier = Modifier.padding(end = 4.dp)
-            )
-        }
-
-        Text(
-            text = text,
-            style = typo,
-        )
-
-        rightIcon?.let {
-            Icon(
-                imageVector = rightIcon,
-                iconSize = iconSize,
-                modifier = Modifier.padding(start = 4.dp)
-            )
-        }
-    }
-}
-
-
-@Composable
-private fun boxButtonColorByType(
-    type: BoxButtonType,
-): ButtonColorState = when (type) {
-    BoxButtonType.Primary -> ButtonColorState(
-        contentColor = HandyTheme.colors.textBasicWhite,
-        disabledContentColor = HandyTheme.colors.textBasicDisabled,
-        bgColor = HandyTheme.colors.buttonBoxPrimaryEnabled,
-        disabledBgColor = HandyTheme.colors.buttonBoxPrimaryDisabled,
-    )
-
-    BoxButtonType.Secondary -> ButtonColorState(
-        contentColor = HandyTheme.colors.textBrandSecondary,
-        disabledContentColor = HandyTheme.colors.textBasicDisabled,
-        bgColor = HandyTheme.colors.buttonBoxSecondaryEnabled,
-        disabledBgColor = HandyTheme.colors.buttonBoxSecondaryDisabled,
-    )
-
-    BoxButtonType.Tertiary -> ButtonColorState(
-        bgColor = HandyTheme.colors.buttonBoxTertiaryEnabled,
-        contentColor = HandyTheme.colors.textBasicPrimary,
-        disabledBgColor = HandyTheme.colors.buttonBoxTertiaryDisabled,
-        disabledContentColor = HandyTheme.colors.textBasicDisabled,
-    )
-}
-
-private fun boxButtonSizeStateBySize(
-    size: BoxButtonSize,
-): ButtonStyleProperties = when (size) {
-    BoxButtonSize.XL -> ButtonStyleProperties(
-        typo = HandyTypography.B1Sb16,
-        iconSize = IconSize.S,
-        height = 56.dp,
-        horizontalPadding = 20.dp,
-        round = 16.dp
-    )
-
-    BoxButtonSize.L -> ButtonStyleProperties(
-        typo = HandyTypography.B1Sb16,
-        iconSize = IconSize.S,
-        height = 52.dp,
-        horizontalPadding = 20.dp,
-        round = 16.dp
-    )
-
-    BoxButtonSize.M -> ButtonStyleProperties(
-        typo = HandyTypography.B1Sb16,
-        iconSize = IconSize.S,
-        height = 48.dp,
-        horizontalPadding = 16.dp,
-        round = 14.dp
-    )
-
-    BoxButtonSize.S -> ButtonStyleProperties(
-        typo = HandyTypography.B3Sb14,
-        iconSize = IconSize.XS,
-        height = 40.dp,
-        horizontalPadding = 16.dp,
-        round = 12.dp
-    )
-
-    BoxButtonSize.XS -> ButtonStyleProperties(
-        typo = HandyTypography.B5Sb12,
-        iconSize = IconSize.XXS,
-        height = 32.dp,
-        horizontalPadding = 8.dp,
-        round = 10.dp
-    )
-
-    BoxButtonSize.XXS -> ButtonStyleProperties(
-        typo = HandyTypography.B5Sb12,
-        iconSize = IconSize.XXS,
-        height = 24.dp,
-        horizontalPadding = 8.dp,
-        round = 8.dp
-    )
-}
\ No newline at end of file
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/button/ButtonState.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/button/ButtonState.kt
index 10c6ba7e..52896428 100644
--- a/compose/src/main/kotlin/com/yourssu/handy/compose/button/ButtonState.kt
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/button/ButtonState.kt
@@ -50,9 +50,9 @@ class ButtonColorState(
 @Composable
 private fun pressedColorFor(color: Color): Color {
     return when (color) {
-        HandyTheme.colors.buttonBoxPrimaryEnabled -> HandyTheme.colors.buttonBoxPrimaryPressed
-        HandyTheme.colors.buttonBoxSecondaryEnabled -> HandyTheme.colors.buttonBoxSecondaryPressed
-        HandyTheme.colors.buttonBoxTertiaryEnabled -> HandyTheme.colors.buttonBoxTertiaryPressed
+        HandyTheme.colors.buttonFilledPrimaryEnabled -> HandyTheme.colors.buttonFilledPrimaryPressed
+        HandyTheme.colors.buttonFilledSecondaryEnabled -> HandyTheme.colors.buttonFilledSecondaryPressed
+        HandyTheme.colors.buttonOutlinedEnabled -> HandyTheme.colors.buttonOutlinedPressed
         HandyTheme.colors.buttonTextPrimaryEnabled -> HandyTheme.colors.buttonTextPrimaryPressed
         HandyTheme.colors.buttonTextSecondaryEnabled -> HandyTheme.colors.buttonTextSecondaryPressed
         else -> color
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/button/TextButton.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/button/TextButton.kt
index 0445c5d7..04896441 100644
--- a/compose/src/main/kotlin/com/yourssu/handy/compose/button/TextButton.kt
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/button/TextButton.kt
@@ -29,7 +29,7 @@ enum class TextButtonSize {
 /**
  * BaseButton : ripple 효과가 없는 Composable 함수 입니다.
  *
- * BoxButton, TextButton의 베이스가 됩니다.
+ * FilledButton, TextButton의 베이스가 됩니다.
  *
  * @param onClick Button 클릭 시 실행되는 함수
  * @param text Button 내부 text
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/Radius.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/Radius.kt
index 4625cba1..ad3e8cda 100644
--- a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/Radius.kt
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/Radius.kt
@@ -3,7 +3,7 @@ package com.yourssu.handy.compose.foundation
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
-enum class Radius(dp: Dp) {
+enum class Radius(val dp: Dp) {
     XS(8.dp),
     S(10.dp),
     M(12.dp),
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt
index a28e7cc0..981c275b 100644
--- a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt
@@ -37,29 +37,29 @@ data class ColorScheme(
     val textStatusNegative: Color = ColorStatusRedMain,
     val textStatusPositive: Color = ColorViolet500,
 
-    // Tertiary / Basic
+    // Outlined / Basic
     val lineBasicLight: Color = ColorGray100,
     val lineBasicMedium: Color = ColorGray200,
     val lineBasicStrong: Color = ColorGray300,
 
-    // Tertiary / Status
+    // Outlined / Status
     val lineStatusNegative: Color = ColorStatusRedMain,
     val lineStatusPositive: Color = ColorViolet500,
 
-    // Button / Box / Primary
-    val buttonBoxPrimaryEnabled: Color = ColorViolet500,
-    val buttonBoxPrimaryPressed: Color = ColorViolet700,
-    val buttonBoxPrimaryDisabled: Color = ColorGray100,
+    // Button / Filled / Primary
+    val buttonFilledPrimaryEnabled: Color = ColorViolet500,
+    val buttonFilledPrimaryPressed: Color = ColorViolet700,
+    val buttonFilledPrimaryDisabled: Color = ColorGray100,
 
-    // Button / Box / Secondary
-    val buttonBoxSecondaryEnabled: Color = ColorViolet50,
-    val buttonBoxSecondaryPressed: Color = ColorViolet200,
-    val buttonBoxSecondaryDisabled: Color = ColorGray100,
+    // Button / Filled / Secondary
+    val buttonFilledSecondaryEnabled: Color = ColorViolet50,
+    val buttonFilledSecondaryPressed: Color = ColorViolet200,
+    val buttonFilledSecondaryDisabled: Color = ColorGray100,
 
-    // Button / Box / Tertiary
-    val buttonBoxTertiaryEnabled: Color = ColorNeutralTransparent,
-    val buttonBoxTertiaryPressed: Color = ColorGray100,
-    val buttonBoxTertiaryDisabled: Color = ColorNeutralTransparent,
+    // Button / Outlined
+    val buttonOutlinedEnabled: Color = ColorNeutralTransparent,
+    val buttonOutlinedPressed: Color = ColorGray100,
+    val buttonOutlinedDisabled: Color = ColorNeutralTransparent,
 
     // Button / Text / Primary
     val buttonTextPrimaryEnabled: Color = ColorNeutralTransparent,
@@ -90,7 +90,6 @@ data class ColorScheme(
     val iconBasicPrimary: Color = ColorNeutralBlack,
     val iconBasicSecondary: Color = ColorGray700,
     val iconBasicTertiary: Color = ColorGray500,
-    val iconBasicDisabledStrong: Color = ColorGray300,
     val iconBasicDisabled: Color = ColorGray200,
     val iconBasicWhite: Color = ColorNeutralWhite,
 
@@ -115,11 +114,20 @@ data class ColorScheme(
     val paginationBasicSelected: Color = ColorNeutralBlack,
     val paginationBasicUnselected: Color = ColorGray500,
 
+    // SnackBar
+    val snackBarInfo: Color = ColorGray800,
+    val snackBarError: Color = ColorStatusRedSub,
+
+    // Switch
+    val switchUnselected: Color = ColorGray300,
+    val switchSelected: Color = ColorViolet500,
+    val switchDisabled: Color = ColorGray200,
+    val switchThumb: Color = ColorNeutralWhite,
+
     // List
     val listEnabled: Color = ColorNeutralWhite,
     val listPressed: Color = ColorGray50,
     val listDisabled: Color = ColorNeutralWhite,
-
 )
 
 val lightColorScheme = ColorScheme()
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt
index 94c9596f..c7cd2952 100644
--- a/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt
@@ -99,7 +99,7 @@ fun determineContainerColor(
     pressedContainerColor: Color
 ): Color {
     return when {
-        !enabled -> HandyTheme.colors.listDisabled
+        !enabled -> HandyTheme.colors.
         pressed -> pressedContainerColor
         else -> containerColor
     }

From d0e8f9514113cb065a1887b0230212f47423cb4b Mon Sep 17 00:00:00 2001
From: yurikang <yuri3334@gmail.com>
Date: Tue, 8 Apr 2025 14:06:43 +0900
Subject: [PATCH 5/8] merge main to feat/rein/list

---
 .../com/yourssu/handy/demo/DialogPreview.kt   | 158 +++++++++++++
 .../com/yourssu/handy/demo/DividerPreview.kt  |  31 +++
 .../yourssu/handy/demo/NavigationPreview.kt   |  47 ++++
 .../com/yourssu/handy/demo/SnackBarPreview.kt |  53 +++++
 .../com/yourssu/handy/demo/SwitchPreview.kt   |  40 ++++
 .../com/yourssu/handy/demo/TopBarPreview.kt   | 132 +++++++++++
 .../com/yourssu/handy/compose/Dialog.kt       | 210 ++++++++++++++++++
 .../com/yourssu/handy/compose/Divider.kt      |  65 ++++++
 .../com/yourssu/handy/compose/Navigation.kt   | 114 ++++++++++
 .../com/yourssu/handy/compose/SnackBar.kt     | 190 ++++++++++++++++
 .../handy/compose/SnackBarAnimation.kt        | 161 ++++++++++++++
 .../com/yourssu/handy/compose/SnackData.kt    | 117 ++++++++++
 .../com/yourssu/handy/compose/Switch.kt       | 151 +++++++++++++
 .../com/yourssu/handy/compose/TopAppBar.kt    | 141 ++++++++++++
 .../handy/compose/button/FilledButton.kt      | 181 +++++++++++++++
 15 files changed, 1791 insertions(+)
 create mode 100644 app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt
 create mode 100644 app/src/main/kotlin/com/yourssu/handy/demo/DividerPreview.kt
 create mode 100644 app/src/main/kotlin/com/yourssu/handy/demo/NavigationPreview.kt
 create mode 100644 app/src/main/kotlin/com/yourssu/handy/demo/SnackBarPreview.kt
 create mode 100644 app/src/main/kotlin/com/yourssu/handy/demo/SwitchPreview.kt
 create mode 100644 app/src/main/kotlin/com/yourssu/handy/demo/TopBarPreview.kt
 create mode 100644 compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt
 create mode 100644 compose/src/main/kotlin/com/yourssu/handy/compose/Divider.kt
 create mode 100644 compose/src/main/kotlin/com/yourssu/handy/compose/Navigation.kt
 create mode 100644 compose/src/main/kotlin/com/yourssu/handy/compose/SnackBar.kt
 create mode 100644 compose/src/main/kotlin/com/yourssu/handy/compose/SnackBarAnimation.kt
 create mode 100644 compose/src/main/kotlin/com/yourssu/handy/compose/SnackData.kt
 create mode 100644 compose/src/main/kotlin/com/yourssu/handy/compose/Switch.kt
 create mode 100644 compose/src/main/kotlin/com/yourssu/handy/compose/TopAppBar.kt
 create mode 100644 compose/src/main/kotlin/com/yourssu/handy/compose/button/FilledButton.kt

diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt
new file mode 100644
index 00000000..7c2ee5c7
--- /dev/null
+++ b/app/src/main/kotlin/com/yourssu/handy/demo/DialogPreview.kt
@@ -0,0 +1,158 @@
+package com.yourssu.handy.demo
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.yourssu.handy.compose.HandyTheme
+import com.yourssu.handy.compose.Icon
+import com.yourssu.handy.compose.OneButtonDialog
+import com.yourssu.handy.compose.TwoButtonDialog
+import com.yourssu.handy.compose.button.FilledButton
+import com.yourssu.handy.compose.icons.HandyIcons
+import com.yourssu.handy.compose.icons.filled.Add
+
+@Preview
+@Composable
+private fun OneButtonDialogPreview1() {
+    HandyTheme {
+        OneButtonDialog(
+            title = "제목이 들어갑니다",
+            description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다",
+            positiveText = "버튼",
+            onPositiveClick = {},
+            onDismiss = {}
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun OneButtonDialogPreview2() {
+    HandyTheme {
+        OneButtonDialog(
+            title = "보다 더 정확하게 분석하기 위해 다음 질문에 대해 대답해주세요.",
+            description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다",
+            positiveText = "버튼",
+            onPositiveClick = {},
+            onDismiss = {}
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun OneButtonDialogPreview3() {
+    HandyTheme {
+        OneButtonDialog(
+            title = "제목이 들어갑니다",
+            description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다",
+            positiveText = "버튼",
+            onPositiveClick = {},
+            onDismiss = {},
+            content = { Icon(HandyIcons.Filled.Add) }
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun TwoButtonDialogPreview1() {
+    HandyTheme {
+        TwoButtonDialog(
+            title = "제목이 들어갑니다",
+            description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다",
+            positiveText = "버튼2",
+            onPositiveClick = {},
+            onDismiss = {},
+            negativeText = "버튼1",
+            onNegativeClick = {},
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun TwoButtonDialogPreview2() {
+    HandyTheme {
+        TwoButtonDialog(
+            title = "보다 더 정확하게 분석하기 위해 다음 질문에 대해 대답해주세요.",
+            description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다",
+            positiveText = "버튼2",
+            onPositiveClick = {},
+            onDismiss = {},
+            negativeText = "버튼1",
+            onNegativeClick = {},
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun TwoButtonDialogPreview3() {
+    HandyTheme {
+        TwoButtonDialog(
+            title = "제목이 들어갑니다",
+            description = "내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다 내용이 들어갑니다",
+            positiveText = "버튼2",
+            onPositiveClick = {},
+            onDismiss = {},
+            negativeText = "버튼1",
+            onNegativeClick = {},
+            content = { Icon(HandyIcons.Filled.Add) }
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun DialogOnScreenPreview() {
+
+    var showOneButtonDialog by remember { mutableStateOf(false) }
+    var showTwoButtonDialog by remember { mutableStateOf(false) }
+
+    HandyTheme {
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center,
+            modifier = Modifier
+                .fillMaxWidth()
+                .fillMaxHeight()
+        ) {
+            FilledButton(text = "원버튼 다이알로그", onClick = { showOneButtonDialog = true })
+            Spacer(modifier = Modifier.height(10.dp))
+            FilledButton(text = "투버튼 다이알로그", onClick = { showTwoButtonDialog = true })
+        }
+
+        if (showOneButtonDialog) {
+            OneButtonDialog(
+                title = "제목이 들어갑니다",
+                description = "내용",
+                positiveText = "버튼",
+                onPositiveClick = { showOneButtonDialog = false },
+                onDismiss = { showOneButtonDialog = false }
+            )
+        } else if (showTwoButtonDialog) {
+            TwoButtonDialog(
+                title = "제목이 들어갑니다",
+                description = "내용",
+                positiveText = "버튼",
+                onPositiveClick = { showTwoButtonDialog = false },
+                onDismiss = { showTwoButtonDialog = false },
+                negativeText = "버튼",
+                onNegativeClick = { showTwoButtonDialog = false }
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/DividerPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/DividerPreview.kt
new file mode 100644
index 00000000..c7fbb740
--- /dev/null
+++ b/app/src/main/kotlin/com/yourssu/handy/demo/DividerPreview.kt
@@ -0,0 +1,31 @@
+package com.yourssu.handy.demo
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.yourssu.handy.compose.Divider
+import com.yourssu.handy.compose.DividerThickness
+import com.yourssu.handy.compose.HandyTheme
+import com.yourssu.handy.compose.Text
+
+@Preview(showBackground = true)
+@Composable
+fun DividerExample() {
+    Column {
+        Text("Section 1")
+        Divider(
+            dividerThickness = DividerThickness.TWO,
+            width = 100.dp,
+            color = HandyTheme.colors.bgBasicBlack
+        )
+        Text("Section 2")
+        Divider(
+            dividerThickness = DividerThickness.FOUR,
+            width = 200.dp,
+            color = HandyTheme.colors.bgBasicBlack
+        )
+        Text("Section 3")
+        Divider(dividerThickness = DividerThickness.EIGHT, color = HandyTheme.colors.bgBasicBlack)
+    }
+}
diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/NavigationPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/NavigationPreview.kt
new file mode 100644
index 00000000..be788fc4
--- /dev/null
+++ b/app/src/main/kotlin/com/yourssu/handy/demo/NavigationPreview.kt
@@ -0,0 +1,47 @@
+package com.yourssu.handy.demo
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import com.yourssu.handy.compose.BottomNavItem
+import com.yourssu.handy.compose.Navigation
+import com.yourssu.handy.compose.icons.HandyIcons
+import com.yourssu.handy.compose.icons.filled.Home
+
+@Preview(showBackground = true)
+@Composable
+fun NavigationPreview() {
+    val items = listOf(
+        BottomNavItem(
+            icon = HandyIcons.Filled.Home,
+            label = "Label"
+        ),
+        BottomNavItem(
+            icon = HandyIcons.Filled.Home,
+            label = "Label"
+        ),
+        BottomNavItem(
+            icon = HandyIcons.Filled.Home,
+            label = "Label"
+        ),
+        BottomNavItem(
+            icon = HandyIcons.Filled.Home,
+            label = "Label"
+        ),
+        BottomNavItem(
+            icon = HandyIcons.Filled.Home,
+            label = "Label"
+        ),
+    )
+
+    Column {
+        Spacer(modifier = Modifier.weight(1f))
+        Navigation(
+            items = items,
+            selectedIndex = 0,
+            onItemSelected = {}
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/SnackBarPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/SnackBarPreview.kt
new file mode 100644
index 00000000..189cab15
--- /dev/null
+++ b/app/src/main/kotlin/com/yourssu/handy/demo/SnackBarPreview.kt
@@ -0,0 +1,53 @@
+package com.yourssu.handy.demo
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.yourssu.handy.compose.ErrorSnackBar
+import com.yourssu.handy.compose.HandyTheme
+import com.yourssu.handy.compose.InfoSnackBar
+
+@Preview(showBackground = true)
+@Composable
+fun InfoSnackBarPreview() {
+    HandyTheme {
+        Column(
+            modifier = Modifier.padding(10.dp)
+        ) {
+            InfoSnackBar(
+                text = "한 줄짜리 정보성 메세지가 들어갑니다.",
+                onDismiss = {}
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+            InfoSnackBar(
+                text = "줄 수가 두 줄 이상이 되는 스낵바 메시지입니다. 좌측 정렬을 해주세요.",
+                onDismiss = {}
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun ErrorSnackBarPreview() {
+    HandyTheme {
+        Column(
+            modifier = Modifier.padding(10.dp)
+        ) {
+            ErrorSnackBar(
+                text = "에러 메세지가 들어갑니다",
+                onClose = {}
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+            ErrorSnackBar(
+                text = "두 줄 이상의 에러 메세지가 들어갈 경우 아이콘은 모두 위로 정렬해주세요.",
+                onClose = {}
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/SwitchPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/SwitchPreview.kt
new file mode 100644
index 00000000..8fdb0209
--- /dev/null
+++ b/app/src/main/kotlin/com/yourssu/handy/demo/SwitchPreview.kt
@@ -0,0 +1,40 @@
+package com.yourssu.handy.demo
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import com.yourssu.handy.compose.Switch
+import com.yourssu.handy.compose.SwitchSize
+import com.yourssu.handy.compose.SwitchState
+import com.yourssu.handy.compose.Text
+
+
+data class SwitchPreviewParameter(
+    var switchState: SwitchState,
+    val switchSize: SwitchSize
+)
+
+@Preview(showBackground = true)
+@Composable
+private fun PreviewMultipleSwitchState() {
+    val switchStates =
+        listOf(SwitchState.Unselected, SwitchState.Selected, SwitchState.Disabled)
+    val switchSizes = listOf(SwitchSize.Large, SwitchSize.Medium, SwitchSize.Small)
+    val samples = switchStates.flatMap { state ->
+        switchSizes.map { size -> SwitchPreviewParameter(state, size) }
+    }
+
+
+    Column {
+        samples.forEachIndexed { index, switchPreviewParameter ->
+            Text(text = "Size:${switchPreviewParameter.switchSize} State:${switchPreviewParameter.switchState}")
+            Switch(
+                switchState = switchPreviewParameter.switchState,
+                switchSize = switchPreviewParameter.switchSize,
+                onToggle = {
+
+                }
+            )
+        }
+    }
+}
diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/TopBarPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/TopBarPreview.kt
new file mode 100644
index 00000000..330e1b68
--- /dev/null
+++ b/app/src/main/kotlin/com/yourssu/handy/demo/TopBarPreview.kt
@@ -0,0 +1,132 @@
+package com.yourssu.handy.demo
+
+import android.util.Log
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.yourssu.handy.compose.CenterAlignedTopAppBar
+import com.yourssu.handy.compose.HandyTheme
+import com.yourssu.handy.compose.Icon
+import com.yourssu.handy.compose.LeftAlignedTopAppBar
+import com.yourssu.handy.compose.Text
+import com.yourssu.handy.compose.icons.HandyIcons
+import com.yourssu.handy.compose.icons.line.Add
+import com.yourssu.handy.compose.icons.line.ArrowsChevronLeft
+
+@Preview(showBackground = true)
+@Composable
+fun CenterAlignedTopAppBarPreview() {
+    Column {
+        CenterAlignedTopAppBar(
+            title = "Centered",
+            navIcon = HandyIcons.Line.ArrowsChevronLeft,
+            onNavIconClick = { Log.d("TopBarPreview", "ArrowsChevronLeft clicked") },
+            actions = {}
+        )
+
+        Spacer(modifier = Modifier.height(10.dp))
+
+        CenterAlignedTopAppBar(
+            title = "Back Example",
+            navIcon = HandyIcons.Line.ArrowsChevronLeft,
+            onNavIconClick = { Log.d("TopBarPreview", "ArrowsChevronLeft clicked") },
+            actions = {
+                Text(
+                    text = "Share",
+                    color = HandyTheme.colors.textBrandPrimary,
+                    modifier = Modifier.clickable { Log.d("TopBarPreview", "Share clicked") })
+            }
+        )
+
+        Spacer(modifier = Modifier.height(10.dp))
+
+        CenterAlignedTopAppBar(
+            title = "최대8자까지가능",
+            navIcon = HandyIcons.Line.ArrowsChevronLeft,
+            onNavIconClick = { Log.d("TopBarPreview", "ArrowsChevronLeft clicked") },
+            actions = {
+                Icon(
+                    imageVector = HandyIcons.Line.Add,
+                    contentDescription = "Add",
+                    modifier = Modifier.clickable { Log.d("TopBarPreview", "Add clicked") }
+                )
+                Text(
+                    text = "Text",
+                    color = HandyTheme.colors.textBrandPrimary,
+                    modifier = Modifier.clickable { Log.d("TopBarPreview", "Share clicked") })
+
+            }
+        )
+    }
+}
+
+
+@Preview(showBackground = true)
+@Composable
+fun LeftAlignedTopBarPreview() {
+    Column {
+        LeftAlignedTopAppBar(
+            title = "Title",
+            actions = {}
+        )
+
+        Spacer(modifier = Modifier.height(10.dp))
+
+        LeftAlignedTopAppBar(
+            title = "Title",
+            actions = {
+                Icon(
+                    imageVector = HandyIcons.Line.Add,
+                    contentDescription = "Add",
+                    modifier = Modifier.clickable { Log.d("TopBarPreview", "Add clicked") }
+                )
+            }
+        )
+
+        Spacer(modifier = Modifier.height(10.dp))
+
+        LeftAlignedTopAppBar(
+            title = "Title",
+            actions = {
+                Icon(
+                    imageVector = HandyIcons.Line.Add,
+                    contentDescription = "Add",
+                    modifier = Modifier.clickable { Log.d("TopBarPreview", "Add clicked") }
+                )
+                Icon(
+                    imageVector = HandyIcons.Line.Add,
+                    contentDescription = "Add",
+                    modifier = Modifier.clickable { Log.d("TopBarPreview", "Add clicked") }
+                )
+            }
+        )
+
+        Spacer(modifier = Modifier.height(10.dp))
+
+        LeftAlignedTopAppBar(
+            title = "Title",
+            actions = {
+                Icon(
+                    imageVector = HandyIcons.Line.Add,
+                    contentDescription = "Add",
+                    modifier = Modifier.clickable { Log.d("TopBarPreview", "Add clicked") }
+                )
+                Icon(
+                    imageVector = HandyIcons.Line.Add,
+                    contentDescription = "Add",
+                    modifier = Modifier.clickable { Log.d("TopBarPreview", "Add clicked") }
+                )
+                Icon(
+                    imageVector = HandyIcons.Line.Add,
+                    contentDescription = "Add",
+                    modifier = Modifier.clickable { Log.d("TopBarPreview", "Add clicked") }
+                )
+            }
+        )
+    }
+}
\ No newline at end of file
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt
new file mode 100644
index 00000000..4e7612f1
--- /dev/null
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/Dialog.kt
@@ -0,0 +1,210 @@
+package com.yourssu.handy.compose
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+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.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.yourssu.handy.compose.DialogDefaults.dialogButtonSpacing
+import com.yourssu.handy.compose.DialogDefaults.dialogPadding
+import com.yourssu.handy.compose.DialogDefaults.dialogTextInsidePadding
+import com.yourssu.handy.compose.DialogDefaults.dialogWidth
+import com.yourssu.handy.compose.button.FilledButton
+import com.yourssu.handy.compose.button.FilledButtonSize
+import com.yourssu.handy.compose.button.FilledButtonType
+import com.yourssu.handy.compose.foundation.HandyTypography
+import com.yourssu.handy.compose.foundation.Radius
+import com.yourssu.handy.compose.icons.HandyIcons
+import com.yourssu.handy.compose.icons.filled.Close
+
+
+/**
+ * OneButtonDialog : 선택 버튼이 하나 있는 Dialog 입니다.
+ *
+ * @param title Dialog 제목 text
+ * @param positiveText 확인 버튼 text
+ * @param onPositiveClick 확인 버튼 클릭 시 실행되는 함수
+ * @param onDismiss 닫기(X) 버튼 클릭시 실행되는 함수
+ * @param description Dialog 안의 설명 text (optional)
+ * @param content Dialog 안의 content. 주로 이미지가 들어감(optional)
+ **/
+@Composable
+fun OneButtonDialog(
+    title: String,
+    positiveText: String,
+    onPositiveClick: () -> Unit,
+    onDismiss: () -> Unit,
+    modifier: Modifier = Modifier,
+    description: String?,
+    content: @Composable (() -> Unit)? = null,
+) {
+    Box(
+        modifier = modifier
+            .background(
+                color = HandyTheme.colors.bgBasicDefault,
+                shape = RoundedCornerShape(Radius.XL.dp)
+            )
+            .width(dialogWidth)
+            .padding(dialogPadding),
+    ) {
+        Column {
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+            ) {
+                Text(
+                    text = title,
+                    style = HandyTypography.T1Sb20,
+                    color = HandyTheme.colors.textBasicPrimary,
+                    maxLines = 3,
+                    modifier = Modifier
+                        .weight(1f)
+                )
+
+                Icon(
+                    imageVector = HandyIcons.Filled.Close,
+                    contentDescription = "Close",
+                    modifier = Modifier.clickable { onDismiss() }
+                )
+            }
+
+            Spacer(modifier = Modifier.height(dialogTextInsidePadding))
+
+            if (description != null) {
+                Text(text = description)
+            }
+
+            Spacer(modifier = Modifier.height(dialogPadding))
+
+            if (content != null) {
+                Box(
+                    modifier = Modifier
+                        .align(Alignment.CenterHorizontally)
+                        .padding(bottom = dialogPadding)
+                ) {
+                    content()
+                }
+            }
+
+            FilledButton(
+                modifier = Modifier.fillMaxWidth(),
+                text = positiveText,
+                onClick = { onPositiveClick() },
+                sizeType = FilledButtonSize.L,
+            )
+        }
+    }
+}
+
+
+/**
+ * TwoButtonDialog : 버튼이 두개 있는 다이알로그 입니다.
+ *
+ * @param title Dialog 제목 text
+ * @param positiveText 확인 버튼 text
+ * @param negativeText 취소 버튼 text
+ * @param onPositiveClick 확인 버튼 클릭 시 실행되는 함수
+ * @param onNegativeClick 취소 버튼 클릭 시 실행되는 함수
+ * @param onDismiss 닫기(X) 버튼 클릭시 실행되는 함수
+ * @param description Dialog 안의 설명 text (optional)
+ * @param content Dialog 안의 content. 주로 이미지가 들어감(optional)
+ **/
+@Composable
+fun TwoButtonDialog(
+    title: String,
+    positiveText: String,
+    negativeText: String,
+    onPositiveClick: () -> Unit,
+    onNegativeClick: () -> Unit,
+    onDismiss: () -> Unit,
+    modifier: Modifier = Modifier,
+    description: String?,
+    content: @Composable (() -> Unit)? = null,
+) {
+    Box(
+        modifier = modifier
+            .background(
+                color = HandyTheme.colors.bgBasicDefault,
+                shape = RoundedCornerShape(Radius.XL.dp)
+            )
+            .width(dialogWidth)
+            .padding(dialogPadding),
+    ) {
+        Column {
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+            ) {
+                Text(
+                    text = title,
+                    style = HandyTypography.T1Sb20,
+                    color = HandyTheme.colors.textBasicPrimary,
+                    maxLines = 3,
+                    modifier = Modifier
+                        .weight(1f)
+                )
+
+                Icon(
+                    imageVector = HandyIcons.Filled.Close,
+                    contentDescription = "Close",
+                    modifier = Modifier.clickable { onDismiss() }
+                )
+            }
+
+            Spacer(modifier = Modifier.height(dialogTextInsidePadding))
+
+            if (description != null) {
+                Text(text = description)
+            }
+
+            Spacer(modifier = Modifier.height(dialogPadding))
+
+            if (content != null) {
+                Box(
+                    Modifier
+                        .align(Alignment.CenterHorizontally)
+                        .padding(bottom = dialogPadding)
+                ) {
+                    content()
+                }
+            }
+
+            Row(
+                modifier = Modifier.align(Alignment.CenterHorizontally)
+            ) {
+                FilledButton(
+                    modifier = Modifier.weight(1f),
+                    text = negativeText,
+                    onClick = { onNegativeClick() },
+                    sizeType = FilledButtonSize.L,
+                    buttonType = FilledButtonType.Secondary
+                )
+
+                Spacer(modifier = Modifier.width(dialogButtonSpacing))
+
+                FilledButton(
+                    modifier = Modifier.weight(1f),
+                    text = positiveText,
+                    onClick = { onPositiveClick() },
+                    sizeType = FilledButtonSize.L,
+                )
+            }
+        }
+    }
+
+}
+
+object DialogDefaults {
+    val dialogWidth = 296.dp
+    val dialogPadding = 20.dp
+    val dialogTextInsidePadding = 16.dp
+    val dialogButtonSpacing = 8.dp
+}
\ No newline at end of file
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/Divider.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/Divider.kt
new file mode 100644
index 00000000..3f52cc10
--- /dev/null
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/Divider.kt
@@ -0,0 +1,65 @@
+package com.yourssu.handy.compose
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+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
+
+/**
+ * Divider의 두께를 정의하는 enum class
+ */
+enum class DividerThickness(
+    val size: Dp
+) {
+    ONE(1.dp),
+    TWO(2.dp),
+    FOUR(4.dp),
+    EIGHT(8.dp),
+}
+
+/**
+ * width를 지정할 수 있는 Divider
+ * @param width Divider의 너비
+ * @param color Divider의 색상
+ * @param dividerThickness Divider의 두께
+ */
+@Composable
+fun Divider(
+    dividerThickness: DividerThickness,
+    modifier: Modifier = Modifier,
+    width: Dp = 0.dp,
+    color: Color = HandyTheme.colors.bgBasicStrong,
+) {
+    Box(
+        modifier = modifier
+            .width(width)
+            .height(dividerThickness.size)
+            .background(color)
+    )
+}
+
+/**
+ * width를 지정할 수 없는 Divider
+ * 기본적으로 fillMaxWidth를 사용
+ * @param color Divider의 색상
+ * @param dividerThickness Divider의 두께
+ */
+@Composable
+fun Divider(
+    dividerThickness: DividerThickness,
+    modifier: Modifier = Modifier,
+    color: Color = HandyTheme.colors.bgBasicStrong,
+) {
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(dividerThickness.size)
+            .background(color)
+    )
+}
\ No newline at end of file
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/Navigation.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/Navigation.kt
new file mode 100644
index 00000000..b3ce9f35
--- /dev/null
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/Navigation.kt
@@ -0,0 +1,114 @@
+package com.yourssu.handy.compose
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+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.height
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.unit.dp
+import com.yourssu.handy.compose.foundation.HandyTypography
+
+/**
+ * BottomNavItem : 하단 네비게이션 바의 아이템을 정의하는 데이터 클래스 입니다.
+ *
+ * @param icon 아이템의 아이콘
+ * @param label 아이템의 라벨
+ */
+data class BottomNavItem(
+    val icon: ImageVector,
+    val label: String? = null
+)
+
+/**
+ * BottomNavItem : 하단 네비게이션 바의 아이템 Composable 함수 입니다.
+ *
+ * @param item 하단 네비게이션 바의 아이템
+ * @param isSelected 선택되었는지 여부
+ * @param onClick 클릭 시 실행되는 함수
+ * @param modifier Modifier
+ */
+@Composable
+private fun BottomNavItem(
+    item: BottomNavItem,
+    isSelected: Boolean,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    val color =
+        if (isSelected) HandyTheme.colors.textBasicPrimary else HandyTheme.colors.textBasicDisabled
+
+    Column(
+        modifier = modifier
+            .clickable(
+                interactionSource = remember { MutableInteractionSource() },
+                indication = null,
+                onClick = onClick
+            ),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
+    ) {
+        Icon(
+            item.icon,
+            iconSize = IconSize.M,
+            tint = color
+        )
+
+        if (item.label != null) {
+            Text(
+                text = item.label,
+                style = HandyTypography.C1Rg11,
+                color = color
+            )
+        }
+    }
+}
+
+/**
+ * Navigation : 하단 네비게이션 바 Composable 함수 입니다.
+ *
+ * @param items 하단 네비게이션 바의 아이템 리스트. item의 개수는 3개 이상 5개 이하여야 합니다.
+ * @param selectedIndex 선택된 아이템의 인덱스
+ * @param onItemSelected 아이템 선택 시 실행되는 함수
+ *
+ */
+@Composable
+fun Navigation(
+    items: List<BottomNavItem>,
+    selectedIndex: Int,
+    onItemSelected: (Int) -> Unit,
+    modifier: Modifier = Modifier
+) {
+    require(items.size in 3..5) { "Items size must be between 3 and 5" }
+
+    Surface(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(56.dp)
+            .background(HandyTheme.colors.bgBasicDefault),
+    ) {
+        Divider(dividerThickness = DividerThickness.ONE)
+        Row(
+            modifier = Modifier.fillMaxSize(),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            items.forEachIndexed { index, item ->
+                BottomNavItem(
+                    item = item,
+                    isSelected = index == selectedIndex,
+                    modifier = Modifier.weight(1f),
+                    onClick = { onItemSelected(index) }
+                )
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/SnackBar.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/SnackBar.kt
new file mode 100644
index 00000000..c6c62853
--- /dev/null
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/SnackBar.kt
@@ -0,0 +1,190 @@
+package com.yourssu.handy.compose
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.AnchoredDraggableState
+import androidx.compose.foundation.gestures.DraggableAnchors
+import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.gestures.anchoredDraggable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import com.yourssu.handy.compose.foundation.HandyTypography
+import com.yourssu.handy.compose.icons.HandyIcons
+import com.yourssu.handy.compose.icons.filled.AlertTriangle
+import com.yourssu.handy.compose.icons.line.Close
+import kotlin.math.roundToInt
+
+/**
+ * 드래그 위치를 나타냅니다.
+ * Start는 초기 위치, End는 스낵바가 사라질 위치를 나타냅니다.
+ */
+enum class DragValue {
+    Start, End
+}
+
+/**
+ * 정보성 스낵바의 UI를 그린 함수입니다.
+ *
+ * 유저의 행동에 대한 단순 결과를 나타낼 때 사용합니다.
+ *
+ * 특정 시간(기본 5초) 노출 후에 자동으로 사라집니다.
+ * 아래로 스와이프 할 경우에도 사라집니다.
+ *
+ * @param text 스낵바의 문구를 나타내는 텍스트, 최대 두 줄까지 입력 가능
+ * @param modifier Modifier
+ */
+@OptIn(ExperimentalFoundationApi::class, ExperimentalLayoutApi::class)
+@Composable
+fun InfoSnackBar(
+    text: String,
+    onDismiss: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val density = LocalDensity.current
+    val state = remember {
+        AnchoredDraggableState(
+            initialValue = DragValue.Start,
+            anchors = DraggableAnchors {
+                with(density) {
+                    DragValue.Start at 0f
+                    DragValue.End at 20.dp.toPx()
+                }
+            },
+            positionalThreshold = { distance: Float -> distance * 0.5f },
+            velocityThreshold = { with(density) { 50.dp.toPx() } },
+            animationSpec = tween(),
+        )
+    }
+    val offsetY = remember { Animatable(0f) }
+
+    if (state.currentValue == DragValue.End) {
+        onDismiss()
+    }
+
+    Column(
+        modifier = modifier
+            .offset {
+                IntOffset(
+                    x = 0,
+                    y = offsetY.value.roundToInt()
+                )
+            }
+            .padding(horizontal = 16.dp)
+            .fillMaxWidth()
+            .clip(RoundedCornerShape(12.dp))
+            .background(HandyTheme.colors.snackBarInfo)
+            .padding(16.dp)
+            .anchoredDraggable(
+                state = state,
+                orientation = Orientation.Vertical,
+            )
+    ) {
+        text.split("\n").forEach { line ->
+            FlowRow {
+                line.split(" ").forEachIndexed { index, word ->
+                    Text(
+                        text = word,
+                        color = HandyTheme.colors.textBasicWhite,
+                        maxLines = 2,
+                        style = HandyTypography.B3Sb14
+                    )
+                    if (index != line.split(" ").lastIndex) {
+                        Text(
+                            text = " ",
+                            color = HandyTheme.colors.textBasicWhite,
+                            style = HandyTypography.B3Sb14
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+/**
+ * 에러 스낵바의 UI를 그린 함수입니다.
+ *
+ * 사용자의 수행 과정에 부정적인 결과가 발생하거나
+ * 정보성 스낵바보다 강조해야 할 메시지를 담아야 할 때 사용합니다.
+ *
+ * X 버튼을 눌러야만 사라집니다.
+ *
+ * @param text 스낵바의 문구를 나타내는 텍스트, 최대 두 줄까지 입력 가능
+ * @param onClose 스낵바의 X 버튼을 눌렀을 때 호출되는 함수
+ * @param modifier Modifier
+ */
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+fun ErrorSnackBar(
+    text: String,
+    onClose: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier
+            .padding(horizontal = 16.dp)
+            .fillMaxWidth()
+            .clip(RoundedCornerShape(12.dp))
+            .background(HandyTheme.colors.snackBarError)
+            .padding(16.dp),
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Icon(
+            imageVector = HandyIcons.Filled.AlertTriangle,
+            tint = HandyTheme.colors.bgStatusNegative,
+            modifier = Modifier.align(Alignment.Top)
+        )
+        text.split("\n").forEach { line ->
+            FlowRow(modifier = Modifier.weight(1f)) {
+                line.split(" ").forEachIndexed { index, word ->
+                    Text(
+                        text = word,
+                        color = HandyTheme.colors.textStatusNegative,
+                        maxLines = 2,
+                        style = HandyTypography.B3Sb14
+                    )
+                    if (index != line.split(" ").lastIndex) {
+                        Text(
+                            text = " ",
+                            color = HandyTheme.colors.textStatusNegative,
+                            style = HandyTypography.B3Sb14
+                        )
+                    }
+                }
+            }
+        }
+        Icon(
+            imageVector = HandyIcons.Line.Close,
+            tint = HandyTheme.colors.textBasicTertiary,
+            modifier = Modifier
+                .clickable(onClick = onClose)
+                .align(Alignment.Top)
+        )
+    }
+}
+
+object SnackBarDefaults {
+    const val SNACK_BAR_DURATION = 5000L
+    const val FADE_IN_DURATION = 500
+    const val FADE_OUT_DURATION = 300
+    const val TARGET_VALUE = -16f
+}
\ No newline at end of file
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/SnackBarAnimation.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/SnackBarAnimation.kt
new file mode 100644
index 00000000..085fe6af
--- /dev/null
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/SnackBarAnimation.kt
@@ -0,0 +1,161 @@
+package com.yourssu.handy.compose
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.AnimationSpec
+import androidx.compose.animation.core.EaseOut
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.offset
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.RecomposeScope
+import androidx.compose.runtime.State
+import androidx.compose.runtime.currentRecomposeScope
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.key
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.unit.dp
+import com.yourssu.handy.compose.SnackBarDefaults.FADE_IN_DURATION
+import com.yourssu.handy.compose.SnackBarDefaults.FADE_OUT_DURATION
+import com.yourssu.handy.compose.SnackBarDefaults.TARGET_VALUE
+
+data class SnackBarTransitionItem(
+    val snackBarData: SnackBarData?,
+    val opacityTransition: OpacityTransition
+)
+
+typealias OpacityTransition = @Composable (snackBar: @Composable () -> Unit) -> Unit
+
+/**
+ * 스낵바에 애니메이션을 적용합니다.
+ *
+ * @param newSnackBarData 새로운 스낵바 데이터
+ * @param modifier Modifier
+ * @param snackBar 스낵바 UI의 컴포저블 함수
+ */
+@Composable
+fun FadeInFadeOut(
+    newSnackBarData: SnackBarData?,
+    modifier: Modifier = Modifier,
+    snackBar: @Composable (SnackBarData) -> Unit
+) {
+    var scheduledSnackBarData by remember { mutableStateOf<SnackBarData?>(null) }
+    val snackBarTransitions = remember { mutableListOf<SnackBarTransitionItem>() }
+    var scope by remember { mutableStateOf<RecomposeScope?>(null) }
+
+    if (newSnackBarData != scheduledSnackBarData) {
+        scheduledSnackBarData = newSnackBarData
+
+        val snackBarDataList = snackBarTransitions.map { it.snackBarData }.toMutableList()
+
+        snackBarDataList.add(newSnackBarData)
+
+        snackBarTransitions.clear()
+
+        snackBarDataList.filterNotNull()
+            .mapTo(destination = snackBarTransitions) { appearedSnackBarData ->
+                SnackBarTransitionItem(appearedSnackBarData) { snackBar ->
+                    val isVisible = appearedSnackBarData == newSnackBarData
+                    val animateInSpec: AnimationSpec<Float> =
+                        tween(durationMillis = FADE_IN_DURATION)
+                    val animateOutSpec: AnimationSpec<Float> =
+                        tween(durationMillis = FADE_OUT_DURATION, easing = EaseOut)
+
+                    val opacity = animatedOpacity(
+                        visible = isVisible,
+                        animateInSpec = animateInSpec,
+                        animateOutSpec = animateOutSpec
+                    )
+
+                    val offsetY = animatedOffset(
+                        visible = isVisible,
+                        animateInSpec = animateInSpec,
+                        animateOutSpec = animateOutSpec
+                    )
+
+                    Box(
+                        modifier = Modifier
+                            .offset(y = offsetY.value.dp)
+                            .alpha(opacity.value)
+                    ) {
+                        snackBar()
+                    }
+                }
+            }
+    }
+
+    Box(
+        modifier = modifier
+    ) {
+        scope = currentRecomposeScope
+        snackBarTransitions.forEach { (snackBarData, opacity) ->
+            key(snackBarData) {
+                opacity {
+                    snackBar(snackBarData ?: return@opacity)
+                }
+            }
+        }
+    }
+}
+
+/**
+ * 투명도 애니메이션을 위한 함수입니다.
+ *
+ * @param visible 애니메이션의 시작 여부
+ * @param animateInSpec 애니메이션이 시작될 때 적용되는 스펙
+ * @param animateOutSpec 애니메이션이 종료될 때 적용되는 스펙
+ * @return 현재 투명도 상태
+ */
+@Composable
+private fun animatedOpacity(
+    visible: Boolean,
+    animateInSpec: AnimationSpec<Float>,
+    animateOutSpec: AnimationSpec<Float>,
+): State<Float> {
+    val alpha = remember { Animatable(0f) }
+
+    LaunchedEffect(visible) {
+        alpha.animateTo(
+            if (visible) 1f else 0f,
+            animationSpec = if (visible) animateInSpec else animateOutSpec
+        )
+    }
+    return alpha.asState()
+}
+
+/**
+ * Y축 오프셋 애니메이션을 위한 함수입니다.
+ *
+ * @param visible 애니메이션 시작 여부
+ * @param animateInSpec 애니메이션이 시작될 때 적용되는 스펙
+ * @param animateOutSpec 애니메이션이 종료될 때 적용되는 스펙
+ * @return 현재 오프셋 상태
+ */
+@Composable
+private fun animatedOffset(
+    visible: Boolean,
+    animateInSpec: AnimationSpec<Float>,
+    animateOutSpec: AnimationSpec<Float>,
+): State<Float> {
+    val offsetY = remember { Animatable(0f) }
+
+    LaunchedEffect(visible) {
+        if (visible) {
+            offsetY.animateTo(
+                targetValue = TARGET_VALUE,
+                animationSpec = animateInSpec
+            )
+        } else {
+            offsetY.animateTo(
+                targetValue = 0f,
+                animationSpec = animateOutSpec
+            )
+        }
+    }
+
+    return offsetY.asState()
+}
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/SnackData.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/SnackData.kt
new file mode 100644
index 00000000..89345c62
--- /dev/null
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/SnackData.kt
@@ -0,0 +1,117 @@
+package com.yourssu.handy.compose
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import com.yourssu.handy.compose.SnackBarDefaults.SNACK_BAR_DURATION
+import kotlinx.coroutines.CancellableContinuation
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.suspendCancellableCoroutine
+import kotlinx.coroutines.sync.Mutex
+import kotlinx.coroutines.sync.withLock
+import kotlin.coroutines.resume
+
+interface SnackBarData {
+    val message: String
+    val type: SnackBarType
+
+    fun dismiss()
+}
+
+enum class SnackBarResult {
+    Dismissed,
+}
+
+enum class SnackBarType {
+    Info,
+    Error,
+}
+
+@Stable
+class SnackBarHostState {
+    private val mutex = Mutex()
+
+    internal var currentSnackBarData by mutableStateOf<SnackBarData?>(null)
+        private set
+
+    suspend fun showSnackBar(
+        message: String,
+        type: SnackBarType
+    ): SnackBarResult = mutex.withLock {
+        try {
+            return suspendCancellableCoroutine { continuation ->
+                currentSnackBarData = SnackBarDataImpl(
+                    message = message,
+                    type = type,
+                    continuation = continuation
+                )
+            }
+        } finally {
+            currentSnackBarData = null
+        }
+    }
+}
+
+@Composable
+fun rememberSnackBarHostState(): SnackBarHostState = remember { SnackBarHostState() }
+
+@Stable
+private class SnackBarDataImpl(
+    override val message: String,
+    override val type: SnackBarType,
+    private val continuation: CancellableContinuation<SnackBarResult>
+) : SnackBarData {
+
+    override fun dismiss() {
+        if (continuation.isActive) {
+            continuation.resume(SnackBarResult.Dismissed)
+        }
+    }
+}
+
+/**
+ * SnackBar를 보여주기 위해선 SnackBarHost를 통해 상태를 관리해야 합니다.
+ * 스낵바의 타입에 따라 정보성 스낵바또는 에러 스낵바를 표시합니다.
+ *
+ * @param snackBarHostState 스낵바 상태 관리 객체
+ * @param modifier Modifier
+ * @param snackBar 스낵바 UI의 컴포저블 함수
+ */
+@Composable
+fun SnackBarHost(
+    snackBarHostState: SnackBarHostState,
+    modifier: Modifier = Modifier,
+    snackBar: @Composable (SnackBarData) -> Unit = { snackBarData ->
+        when (snackBarData.type) {
+            SnackBarType.Info -> InfoSnackBar(
+                text = snackBarHostState.currentSnackBarData?.message.orEmpty(),
+                onDismiss = snackBarData::dismiss
+            )
+
+            SnackBarType.Error -> ErrorSnackBar(
+                text = snackBarHostState.currentSnackBarData?.message.orEmpty(),
+                onClose = snackBarData::dismiss
+            )
+        }
+    },
+) {
+    val currentSnackBarData = snackBarHostState.currentSnackBarData
+
+    if (currentSnackBarData?.type == SnackBarType.Info) {
+        LaunchedEffect(currentSnackBarData) {
+            delay(SNACK_BAR_DURATION)
+            currentSnackBarData.dismiss()
+        }
+    }
+
+    FadeInFadeOut(
+        newSnackBarData = currentSnackBarData,
+        modifier = modifier,
+        snackBar = snackBar
+    )
+}
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/Switch.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/Switch.kt
new file mode 100644
index 00000000..002ead90
--- /dev/null
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/Switch.kt
@@ -0,0 +1,151 @@
+package com.yourssu.handy.compose
+
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.CubicBezierEasing
+import androidx.compose.animation.core.animateDp
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.core.updateTransition
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+
+enum class SwitchSize(
+    val trackWidth: Dp,
+    val trackHeight: Dp,
+    val padding: Dp,
+    val thumbSize: Dp,
+) {
+    Large(48.dp, 30.dp, 2.5.dp, 25.dp),
+    Medium(32.dp, 20.dp, 2.dp, 16.dp),
+    Small(24.dp, 16.dp, 1.5.dp, 13.dp),
+}
+
+enum class SwitchState {
+    Unselected,
+    Selected,
+    Disabled,
+}
+
+/**
+ * Switch를 그리는 함수입니다.
+ *
+ * 스위치는 특정 기능을 활성 또는 비활성의 상태로 만들 수 있도록 도와주는 요소입니다.
+ * 내부적으로 Track과 Thumb으로 구성되어 있습니다.
+ *
+ * @param switchState Switch의 상태. [SwitchState.Unselected], [SwitchState.Selected], [SwitchState.Disabled] 중 하나를 가질 수 있습니다.
+ * @param onToggle Switch의 상태를 변경하는 함수. [SwitchState]를 인자로 가집니다.
+ * @param switchSize Switch의 크기. [SwitchSize.Large], [SwitchSize.Medium], [SwitchSize.Small] 중 하나를 가질 수 있습니다.
+ * @param modifier Modifier
+ */
+@Composable
+fun Switch(
+    onToggle: (SwitchState) -> Unit,
+    modifier: Modifier = Modifier,
+    switchState: SwitchState = SwitchState.Unselected,
+    switchSize: SwitchSize = SwitchSize.Large
+) {
+    val trackWidth = switchSize.trackWidth
+    val trackHeight = switchSize.trackHeight
+    val trackPadding = switchSize.padding
+    val thumbSize = switchSize.thumbSize
+
+    // Switch의 Track의 색상 변경을 에니메이션하기 위한 상태입니다.
+    val trackColor: Color by animateColorAsState(switchTrackColor(switchState))
+
+    val easeIn = SwitchAnimationEasing
+    val easeOut = SwitchAnimationEasing
+
+    // Trainstion을 사용하면 Switch의 상태가 변경될 때 애니메이션을 적용할 수 있습니다.
+    val transition = updateTransition(targetState = switchState, label = "SwitchStateTransition")
+
+    // Switch의 Thumb의 Offset을 에니메이션 하기위한 상태입니다.
+    val thumbOffset: Dp by transition.animateDp(
+        transitionSpec = {
+            // Switch의 상태가 변경될 때 애니메이션을 적용합니다.
+            // easeIn: Unselected -> Selected, easeOut: Selected -> Unselected
+            when {
+                SwitchState.Selected isTransitioningTo SwitchState.Unselected ->
+                    tween(durationMillis = SwitchAnimationDuration, easing = easeOut)
+
+                else ->
+                    tween(durationMillis = SwitchAnimationDuration, easing = easeIn)
+            }
+        },
+        label = "ThumbOffset"
+    ) { state ->
+        if (state == SwitchState.Selected) {
+            // Switch의 Thumb이 Track의 오른쪽 끝에 위치하도록 하는 Offset입니다.
+            trackWidth - thumbSize - trackPadding
+        } else {
+            // Switch의 Thumb이 Track의 왼쪽 끝에 위치하도록 하는 Offset입니다.
+            trackPadding
+        }
+    }
+
+    Surface(
+        checked = switchState == SwitchState.Selected,
+        onCheckedChange = { onToggle(if (switchState == SwitchState.Selected) SwitchState.Unselected else SwitchState.Selected) },
+        modifier = modifier
+            .padding(trackPadding)
+            .width(trackWidth)
+            .height(trackHeight),
+        enabled = switchState != SwitchState.Disabled,
+        shape = CircleShape,
+        backgroundColor = trackColor,
+    ) {
+        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.CenterStart) {
+            // Offset을 사용하여 Switch의 Thumb을 이동시킵니다.
+            SwitchThumb(
+                switchSize = switchSize,
+                modifier = Modifier
+                    .offset(x = thumbOffset)
+            )
+        }
+    }
+}
+
+// Switch의 상태가 변경될 때 애니메이션을 적용하기 위한 상수입니다.(ms)
+private const val SwitchAnimationDuration = 150
+
+// Switch의 애니메이션 Easing입니다.
+private val SwitchAnimationEasing = CubicBezierEasing(0.25f, 0.1f, 0.25f, 1f)
+
+/**
+ * Switch의 Thumb을 그리는 함수입니다.
+ * @param switchSize Switch의 크기
+ */
+@Composable
+private fun SwitchThumb(switchSize: SwitchSize, modifier: Modifier) {
+    Box(
+        modifier = modifier
+            .background(HandyTheme.colors.switchThumb, CircleShape)
+            .clip(CircleShape)
+            .size(switchSize.thumbSize),
+    )
+}
+
+/**
+ * Switch의 Track의 색상을 반환하는 함수입니다.
+ * @param switchState Switch의 상태
+ */
+@Composable
+private fun switchTrackColor(switchState: SwitchState): Color = when (switchState) {
+    SwitchState.Unselected -> HandyTheme.colors.switchUnselected
+    SwitchState.Selected -> HandyTheme.colors.switchSelected
+    SwitchState.Disabled -> HandyTheme.colors.switchDisabled
+}
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/TopAppBar.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/TopAppBar.kt
new file mode 100644
index 00000000..a702fb29
--- /dev/null
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/TopAppBar.kt
@@ -0,0 +1,141 @@
+package com.yourssu.handy.compose
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.yourssu.handy.compose.TopBarDefaults.topBarActionsInsidePadding
+import com.yourssu.handy.compose.TopBarDefaults.topBarHeight
+import com.yourssu.handy.compose.TopBarDefaults.topBarHorizontalPadding
+import com.yourssu.handy.compose.TopBarDefaults.topBarIconPadding
+import com.yourssu.handy.compose.foundation.HandyTypography
+
+
+/**
+ * Center-Aligned Top App Bar
+ *
+ * 타이틀이 중앙에 위치한 탑앱바입니다. 좌측에 메뉴 아이콘 및 뒤로 가기 아이콘이 요구될 경우 사용합니다.
+ * 아이콘으로 기능을 명확하게 표현하지 못하거나 확실하게 기능을 설명하고 싶을 때 아이콘 대신 Text를 사용할 수 있습니다.
+ * 이때, 텍스트의 사용은 한 개까지만 가능하며, 텍스트가 공백 포함 5자일 경우 우측에 아이콘을 같이 쓸 수 없습니다.
+ *
+ *
+ * @param title headline or Logo 최대 9자(공백 포함)
+ * @param navIcon 왼쪽 아이콘
+ * @param actions 오른쪽 아이콘 or 텍스트 (아이콘은 임의로 변경할 수 있으며 Center-aligned의 우측엔 최대 2개의 아이콘 버튼)
+ **/
+@Composable
+fun CenterAlignedTopAppBar(
+    title: String,
+    navIcon: ImageVector,
+    onNavIconClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    actions: @Composable (RowScope.() -> Unit)? = null
+) {
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .background(color = HandyTheme.colors.bgBasicDefault)
+            .height(topBarHeight) //Top App Bar의 높이값을 임의로 변경하지 않습니다.
+            .padding(horizontal = topBarHorizontalPadding),
+        contentAlignment = Alignment.Center
+    ) {
+
+        // CenterAligned 일 때는 좌측 아이콘이 항상 있음.
+        Box(
+            modifier = Modifier
+                .align(Alignment.CenterStart)
+        ) {
+            Icon(
+                imageVector = navIcon,
+                modifier = Modifier
+                    .clickable { onNavIconClick() }
+                    .padding(topBarIconPadding) // 터치영역을 8dp만큼 확장
+            )
+        }
+
+        Text(
+            text = title,
+            color = HandyTheme.colors.textBasicPrimary,
+            style = HandyTypography.T2Sb18,
+            textAlign = TextAlign.Center,
+        )
+
+        actions?.let {
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(topBarActionsInsidePadding), // 요소 사이에 24dp 간격 추가
+                modifier = Modifier.fillMaxHeight()
+            ) {
+                Spacer(modifier = Modifier.weight(1f))
+                actions()
+            }
+        }
+    }
+}
+
+
+/**
+ * Left-aligned
+ *
+ * 타이틀이 좌측에 위치한 탑앱바입니다. 기능의 첫 페이지에 사용되는 탑앱바로,
+ * 현재 페이지의 제목을 나타낼 때 사용합니다. 아이콘으로 기능을 명확하게 표현하지 못하거나 확실하게 기능을 설명하고 싶을 때 아이콘 대신 Text를 사용할 수 있습니다.
+ *
+ * @param title headline or Logo 최대 9자(공백 포함)
+ * @param actions 오른쪽 아이콘 or 텍스트 (아이콘은 임의로 변경할 수 있으며 Left-aligned의 우측엔 최대 3개의 아이콘 버튼)
+ **/
+@Composable
+fun LeftAlignedTopAppBar(
+    title: String,
+    actions: @Composable (RowScope.() -> Unit)? = null
+) {
+
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(color = HandyTheme.colors.bgBasicDefault)
+            .height(topBarHeight)
+            .padding(horizontal = topBarHorizontalPadding),
+
+        contentAlignment = Alignment.Center
+    ) {
+
+        Text(
+            text = title,
+            style = HandyTypography.H3Sb24,
+            color = HandyTheme.colors.textBasicPrimary,
+            modifier = Modifier.align(Alignment.CenterStart)
+
+        )
+
+        actions?.let {
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(topBarActionsInsidePadding), // 요소 사이에 24dp 간격 추가
+            ) {
+                Spacer(modifier = Modifier.weight(1f))
+                actions()
+            }
+        }
+    }
+}
+
+
+object TopBarDefaults {
+    val topBarHeight = 56.dp
+    val topBarHorizontalPadding = 16.dp
+    val topBarActionsInsidePadding = 24.dp
+    val topBarIconPadding = 8.dp
+}
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/button/FilledButton.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/button/FilledButton.kt
new file mode 100644
index 00000000..1e407042
--- /dev/null
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/button/FilledButton.kt
@@ -0,0 +1,181 @@
+package com.yourssu.handy.compose.button
+
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.yourssu.handy.compose.HandyTheme
+import com.yourssu.handy.compose.Icon
+import com.yourssu.handy.compose.IconSize
+import com.yourssu.handy.compose.Text
+import com.yourssu.handy.compose.foundation.HandyTypography
+
+
+enum class FilledButtonType {
+    Primary,
+    Secondary,
+    Outlined;
+}
+
+enum class FilledButtonSize {
+    XXS,
+    XS,
+    S,
+    M,
+    L,
+    XL;
+}
+
+/**
+ * FilledButton : Box(Filled) 형태의 Button 입니다.
+ * type : Primary, Secondary, Outlined
+ * size : XXS, XS, S, M, L, XL
+ *
+ * @param onClick Button 클릭 시 실행되는 함수
+ * @param text Button 내부 text
+ * @param leftIcon Button 왼쪽에 표시되는 Icon
+ * @param rightIcon Button 오른쪽에 표시되는 Icon
+ * @param enabled Button 활성화 여부, default true
+ * @param sizeType Button 사이즈
+ * @param buttonType Button 타입 (Primary, Secondary, Outlined)
+ * @param interactionSource Button 상호작용 소스
+ * @param horizontalPadding Button 내부 content padding
+ **/
+
+@Composable
+fun FilledButton(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    text: String,
+    leftIcon: ImageVector? = null,
+    rightIcon: ImageVector? = null,
+    enabled: Boolean = true,
+    sizeType: FilledButtonSize = FilledButtonSize.M,
+    buttonType: FilledButtonType = FilledButtonType.Primary,
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    horizontalPadding: Dp = filledButtonSizeStateBySize(size = sizeType).horizontalPadding,
+) {
+    val roundingDp = filledButtonSizeStateBySize(size = sizeType).round
+    val (typo, iconSize, height) = filledButtonSizeStateBySize(size = sizeType)
+
+    BaseButton(
+        onClick = onClick,
+        colors = filledButtonColorByType(
+            type = buttonType,
+        ),
+        modifier = modifier.height(height),
+        enabled = enabled,
+        showBorder = (buttonType == FilledButtonType.Outlined),
+        interactionSource = interactionSource,
+        rounding = roundingDp,
+        contentPadding = PaddingValues(
+            horizontal = horizontalPadding,
+        ),
+    ) {
+        leftIcon?.let {
+            Icon(
+                imageVector = leftIcon,
+                iconSize = iconSize,
+                modifier = Modifier.padding(end = 4.dp)
+            )
+        }
+
+        Text(
+            text = text,
+            style = typo,
+        )
+
+        rightIcon?.let {
+            Icon(
+                imageVector = rightIcon,
+                iconSize = iconSize,
+                modifier = Modifier.padding(start = 4.dp)
+            )
+        }
+    }
+}
+
+
+@Composable
+private fun filledButtonColorByType(
+    type: FilledButtonType,
+): ButtonColorState = when (type) {
+    FilledButtonType.Primary -> ButtonColorState(
+        contentColor = HandyTheme.colors.textBasicWhite,
+        disabledContentColor = HandyTheme.colors.textBasicDisabled,
+        bgColor = HandyTheme.colors.buttonFilledPrimaryEnabled,
+        disabledBgColor = HandyTheme.colors.buttonFilledPrimaryDisabled,
+    )
+
+    FilledButtonType.Secondary -> ButtonColorState(
+        contentColor = HandyTheme.colors.textBrandSecondary,
+        disabledContentColor = HandyTheme.colors.textBasicDisabled,
+        bgColor = HandyTheme.colors.buttonFilledSecondaryEnabled,
+        disabledBgColor = HandyTheme.colors.buttonFilledSecondaryDisabled,
+    )
+
+    FilledButtonType.Outlined -> ButtonColorState(
+        bgColor = HandyTheme.colors.buttonOutlinedEnabled,
+        contentColor = HandyTheme.colors.textBasicPrimary,
+        disabledBgColor = HandyTheme.colors.buttonOutlinedDisabled,
+        disabledContentColor = HandyTheme.colors.textBasicDisabled,
+    )
+}
+
+private fun filledButtonSizeStateBySize(
+    size: FilledButtonSize,
+): ButtonStyleProperties = when (size) {
+    FilledButtonSize.XL -> ButtonStyleProperties(
+        typo = HandyTypography.B1Sb16,
+        iconSize = IconSize.S,
+        height = 56.dp,
+        horizontalPadding = 20.dp,
+        round = 16.dp
+    )
+
+    FilledButtonSize.L -> ButtonStyleProperties(
+        typo = HandyTypography.B1Sb16,
+        iconSize = IconSize.S,
+        height = 52.dp,
+        horizontalPadding = 20.dp,
+        round = 16.dp
+    )
+
+    FilledButtonSize.M -> ButtonStyleProperties(
+        typo = HandyTypography.B1Sb16,
+        iconSize = IconSize.S,
+        height = 48.dp,
+        horizontalPadding = 16.dp,
+        round = 14.dp
+    )
+
+    FilledButtonSize.S -> ButtonStyleProperties(
+        typo = HandyTypography.B3Sb14,
+        iconSize = IconSize.XS,
+        height = 40.dp,
+        horizontalPadding = 16.dp,
+        round = 12.dp
+    )
+
+    FilledButtonSize.XS -> ButtonStyleProperties(
+        typo = HandyTypography.B5Sb12,
+        iconSize = IconSize.XXS,
+        height = 32.dp,
+        horizontalPadding = 8.dp,
+        round = 10.dp
+    )
+
+    FilledButtonSize.XXS -> ButtonStyleProperties(
+        typo = HandyTypography.B5Sb12,
+        iconSize = IconSize.XXS,
+        height = 24.dp,
+        horizontalPadding = 8.dp,
+        round = 8.dp
+    )
+}
\ No newline at end of file

From 60473bbe93ceab92fbf733862264960adcecd9db Mon Sep 17 00:00:00 2001
From: yurikang <yuri3334@gmail.com>
Date: Tue, 8 Apr 2025 14:07:03 +0900
Subject: [PATCH 6/8] merge main to feat/rein/list

---
 .../src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt
index c7cd2952..94c9596f 100644
--- a/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt
@@ -99,7 +99,7 @@ fun determineContainerColor(
     pressedContainerColor: Color
 ): Color {
     return when {
-        !enabled -> HandyTheme.colors.
+        !enabled -> HandyTheme.colors.listDisabled
         pressed -> pressedContainerColor
         else -> containerColor
     }

From 00f018d3f807e3f73dd9656d2506fedea4e972b6 Mon Sep 17 00:00:00 2001
From: yurikang <yuri3334@gmail.com>
Date: Tue, 8 Apr 2025 14:39:23 +0900
Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=EC=83=89=20=EC=A7=80=EC=A0=95=20?=
 =?UTF-8?q?=EA=B0=80=EB=8A=A5=ED=95=9C=20=EC=98=B5=EC=85=98=20=EA=B0=84?=
 =?UTF-8?q?=EC=86=8C=ED=99=94=20=EB=B0=8F=20preview=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/deploymentTargetSelector.xml            |  3 -
 .idea/inspectionProfiles/Project_Default.xml  | 61 ++++++++++++
 .idea/runConfigurations.xml                   |  4 +
 .../compose/list/{ListItem.kt => List.kt}     | 96 +++++++------------
 4 files changed, 98 insertions(+), 66 deletions(-)
 rename compose/src/main/kotlin/com/yourssu/handy/compose/list/{ListItem.kt => List.kt} (56%)

diff --git a/.idea/deploymentTargetSelector.xml b/.idea/deploymentTargetSelector.xml
index 2c6ea3d8..b268ef36 100644
--- a/.idea/deploymentTargetSelector.xml
+++ b/.idea/deploymentTargetSelector.xml
@@ -5,9 +5,6 @@
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
       </SelectionState>
-      <SelectionState runConfigName="Github.Handy-Android.app">
-        <option name="selectionMode" value="DROPDOWN" />
-      </SelectionState>
     </selectionStates>
   </component>
 </project>
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index e69de29b..7061a0d6 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,61 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="ComposePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="ComposePreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="ComposePreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="ComposePreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewAnnotationInFunctionWithParameters" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewApiLevelMustBeValid" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewDeviceShouldUseNewSpec" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewFontScaleMustBeGreaterThanZero" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewMultipleParameterProviders" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewParameterProviderOnFirstParameter" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewPickerAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+  </profile>
+</component>
\ No newline at end of file
diff --git a/.idea/runConfigurations.xml b/.idea/runConfigurations.xml
index 931b96c3..16660f1d 100644
--- a/.idea/runConfigurations.xml
+++ b/.idea/runConfigurations.xml
@@ -5,8 +5,12 @@
       <set>
         <option value="com.intellij.execution.junit.AbstractAllInDirectoryConfigurationProducer" />
         <option value="com.intellij.execution.junit.AllInPackageConfigurationProducer" />
+        <option value="com.intellij.execution.junit.PatternConfigurationProducer" />
         <option value="com.intellij.execution.junit.TestInClassConfigurationProducer" />
         <option value="com.intellij.execution.junit.UniqueIdConfigurationProducer" />
+        <option value="com.intellij.execution.junit.testDiscovery.JUnitTestDiscoveryConfigurationProducer" />
+        <option value="org.jetbrains.kotlin.idea.junit.KotlinJUnitRunConfigurationProducer" />
+        <option value="org.jetbrains.kotlin.idea.junit.KotlinPatternConfigurationProducer" />
       </set>
     </option>
   </component>
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/list/List.kt
similarity index 56%
rename from compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt
rename to compose/src/main/kotlin/com/yourssu/handy/compose/list/List.kt
index 94c9596f..2c5a0243 100644
--- a/compose/src/main/kotlin/com/yourssu/handy/compose/list/ListItem.kt
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/list/List.kt
@@ -26,26 +26,22 @@ import com.yourssu.handy.compose.Text
 import com.yourssu.handy.compose.icons.HandyIcons
 import com.yourssu.handy.compose.icons.line.ArrowsChevronRight
 import com.yourssu.handy.compose.icons.line.User
-import org.w3c.dom.Text
 
 @Composable
-fun ListItem(
+fun List(
     headline: String,
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
     leadingIcon: ImageVector? = null,
     trailingIcon: ImageVector? = null,
-    containerColor: Color = HandyTheme.colors.listEnabled,
-    pressedContainerColor: Color = HandyTheme.colors.listPressed,
     headlineColor: Color = HandyTheme.colors.textBasicPrimary,
     leadingIconColor: Color = HandyTheme.colors.iconBasicPrimary,
     tailingIconColor: Color = HandyTheme.colors.iconBasicTertiary,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
 ) {
     val pressed by interactionSource.collectIsPressedAsState()
-
-    val backgroundColor = determineContainerColor(enabled, pressed, containerColor, pressedContainerColor)
+    val backgroundColor = determineContainerColor(enabled, pressed)
 
     Row(
         modifier = modifier
@@ -58,34 +54,35 @@ fun ListItem(
                 indication = null
             )
             .background(backgroundColor),
-        horizontalArrangement = Arrangement.SpaceBetween
+        verticalAlignment = Alignment.CenterVertically,
     ) {
-        Row(
-            modifier = modifier.padding(horizontal = 16.dp, vertical = 20.dp),
-            verticalAlignment = Alignment.CenterVertically
-        ) {
-            leadingIcon?.let {
-                Icon(
-                    imageVector = leadingIcon,
-                    contentDescription = "leadingIcon",
-                    tint = determineContentColor(enabled, leadingIconColor),
-                )
-            }
-
-            Text(
-                text = headline,
-                color = determineContentColor(enabled, headlineColor),
-                modifier = modifier.padding(horizontal = 16.dp),
-                overflow = TextOverflow.Ellipsis,
+        leadingIcon?.let {
+            Icon(
+                imageVector = leadingIcon,
+                contentDescription = "leadingIcon",
+                tint = determineContentColor(enabled, leadingIconColor),
+                modifier = Modifier.padding(start = 16.dp)
             )
         }
 
+        Text(
+            text = headline,
+            color = determineContentColor(enabled, headlineColor),
+            modifier = Modifier
+                .padding(horizontal = 16.dp)
+                .weight(1f),
+            overflow = TextOverflow.Ellipsis,
+            maxLines = 1
+        )
+
         trailingIcon?.let {
             Icon(
                 imageVector = trailingIcon,
                 contentDescription = "trailingIcon",
                 tint = determineContentColor(enabled, tailingIconColor),
-                modifier = modifier.padding(end = 16.dp, bottom = 20.dp, top = 20.dp)
+                modifier = Modifier
+                    .padding(end = 16.dp)
+                    .align(Alignment.CenterVertically)
             )
         }
     }
@@ -95,13 +92,11 @@ fun ListItem(
 fun determineContainerColor(
     enabled: Boolean,
     pressed: Boolean,
-    containerColor: Color,
-    pressedContainerColor: Color
 ): Color {
     return when {
         !enabled -> HandyTheme.colors.listDisabled
-        pressed -> pressedContainerColor
-        else -> containerColor
+        pressed -> HandyTheme.colors.listPressed
+        else -> HandyTheme.colors.listEnabled
     }
 }
 
@@ -121,59 +116,34 @@ fun determineContentColor(
 fun ListItemPreview() {
     HandyTheme {
         Column(
-            modifier = Modifier
-                .background(Color.Red)
-                .fillMaxWidth(),
+            modifier = Modifier.fillMaxWidth(),
             verticalArrangement = Arrangement.spacedBy(10.dp)
         ) {
-            ListItem(
-                headline = "Title",
+            List(
+                headline = "Enable List Title",
                 onClick = {},
                 leadingIcon = HandyIcons.Line.User,
                 trailingIcon = HandyIcons.Line.ArrowsChevronRight,
             )
 
-            ListItem(
-                headline = "Title",
+            List(
+                headline = "Disable List Title",
                 onClick = {},
                 leadingIcon = HandyIcons.Line.User,
                 trailingIcon = HandyIcons.Line.ArrowsChevronRight,
                 enabled = false
             )
 
-            ListItem(
-                headline = "Titleeeeeeeeeeeeeeeeeeeeeeee",
+            List(
+                headline = "Loooooooooong Titleeeeeeeeeeeeeeeeeeeeeeeeeee",
                 onClick = {},
                 leadingIcon = HandyIcons.Line.User,
                 trailingIcon = HandyIcons.Line.ArrowsChevronRight,
-                containerColor = HandyTheme.colors.textBrandPrimary,
-                tailingIconColor = HandyTheme.colors.textStatusNegative,
-                headlineColor = HandyTheme.colors.textBasicWhite,
-                leadingIconColor = HandyTheme.colors.iconBasicTertiary
             )
 
-            ListItem(
-                headline = "Titleeeeeeeeeeeeeeeeeeeeeeee",
+            List(
+                headline = "Default Title",
                 onClick = {},
-                leadingIcon = HandyIcons.Line.User,
-                trailingIcon = HandyIcons.Line.ArrowsChevronRight,
-                containerColor = HandyTheme.colors.textBrandPrimary,
-                tailingIconColor = HandyTheme.colors.textStatusNegative,
-                headlineColor = HandyTheme.colors.textBasicWhite,
-                leadingIconColor = HandyTheme.colors.iconBasicTertiary,
-                pressedContainerColor = HandyTheme.colors.iconBasicTertiary
-            )
-
-            ListItem(
-                headline = "Titleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
-                onClick = {},
-                leadingIcon = HandyIcons.Line.User,
-                trailingIcon = HandyIcons.Line.ArrowsChevronRight,
-                containerColor = HandyTheme.colors.textBrandPrimary,
-                tailingIconColor = HandyTheme.colors.textStatusNegative,
-                headlineColor = HandyTheme.colors.textBasicWhite,
-                leadingIconColor = HandyTheme.colors.iconBasicTertiary,
-                pressedContainerColor = HandyTheme.colors.iconBasicTertiary
             )
         }
     }

From 1eaff47a8d42aeb3cbfedfaac5208a68cb086cfd Mon Sep 17 00:00:00 2001
From: yurikang <yuri3334@gmail.com>
Date: Tue, 8 Apr 2025 14:40:26 +0900
Subject: [PATCH 8/8] =?UTF-8?q?feat:=20List=20Preview=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../com/yourssu/handy/demo/ListPreview.kt     | 51 +++++++++++++++++++
 .../com/yourssu/handy/compose/list/List.kt    | 38 --------------
 2 files changed, 51 insertions(+), 38 deletions(-)
 create mode 100644 app/src/main/kotlin/com/yourssu/handy/demo/ListPreview.kt

diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/ListPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/ListPreview.kt
new file mode 100644
index 00000000..78bdcd99
--- /dev/null
+++ b/app/src/main/kotlin/com/yourssu/handy/demo/ListPreview.kt
@@ -0,0 +1,51 @@
+package com.yourssu.handy.demo
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.yourssu.handy.compose.HandyTheme
+import com.yourssu.handy.compose.icons.HandyIcons
+import com.yourssu.handy.compose.icons.line.ArrowsChevronRight
+import com.yourssu.handy.compose.icons.line.User
+
+@Composable
+@Preview
+fun ListPreview() {
+    HandyTheme {
+        Column(
+            modifier = Modifier.fillMaxWidth(),
+            verticalArrangement = Arrangement.spacedBy(10.dp)
+        ) {
+            com.yourssu.handy.compose.list.List(
+                headline = "Enable List Title",
+                onClick = {},
+                leadingIcon = HandyIcons.Line.User,
+                trailingIcon = HandyIcons.Line.ArrowsChevronRight,
+            )
+
+            com.yourssu.handy.compose.list.List(
+                headline = "Disable List Title",
+                onClick = {},
+                leadingIcon = HandyIcons.Line.User,
+                trailingIcon = HandyIcons.Line.ArrowsChevronRight,
+                enabled = false
+            )
+
+            com.yourssu.handy.compose.list.List(
+                headline = "Loooooooooong Titleeeeeeeeeeeeeeeeeeeeeeeeeee",
+                onClick = {},
+                leadingIcon = HandyIcons.Line.User,
+                trailingIcon = HandyIcons.Line.ArrowsChevronRight,
+            )
+
+            com.yourssu.handy.compose.list.List(
+                headline = "Default Title",
+                onClick = {},
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/list/List.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/list/List.kt
index 2c5a0243..494b8176 100644
--- a/compose/src/main/kotlin/com/yourssu/handy/compose/list/List.kt
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/list/List.kt
@@ -109,42 +109,4 @@ fun determineContentColor(
         !enabled -> HandyTheme.colors.textBasicDisabled
         else -> contentColor
     }
-}
-
-@Composable
-@Preview
-fun ListItemPreview() {
-    HandyTheme {
-        Column(
-            modifier = Modifier.fillMaxWidth(),
-            verticalArrangement = Arrangement.spacedBy(10.dp)
-        ) {
-            List(
-                headline = "Enable List Title",
-                onClick = {},
-                leadingIcon = HandyIcons.Line.User,
-                trailingIcon = HandyIcons.Line.ArrowsChevronRight,
-            )
-
-            List(
-                headline = "Disable List Title",
-                onClick = {},
-                leadingIcon = HandyIcons.Line.User,
-                trailingIcon = HandyIcons.Line.ArrowsChevronRight,
-                enabled = false
-            )
-
-            List(
-                headline = "Loooooooooong Titleeeeeeeeeeeeeeeeeeeeeeeeeee",
-                onClick = {},
-                leadingIcon = HandyIcons.Line.User,
-                trailingIcon = HandyIcons.Line.ArrowsChevronRight,
-            )
-
-            List(
-                headline = "Default Title",
-                onClick = {},
-            )
-        }
-    }
 }
\ No newline at end of file