멀티모듈 만드는 방법 까지 알아봤음

project/
├── app/
├── build-logic/convention/  # 컨벤션 플러그인 모듈
├── core/
│   ├── common/
│   └── ui/
├── data/
├── domain/
├── feature/
│   ├── auth/
│   ├── menu/
│   ├── onboarding/
│   ├── order/
│   ├── sales/
│   └── staff/
└── gradle/
    └── libs.versions.toml  # 버전 카탈로그

저거 기준으로 저렇게 모듈을 ㅁ나들었고

• AndroidApplicationConventionPlugin.kt: 앱 모듈 기본 설정
• AndroidApplicationComposeConventionPlugin.kt: 앱 모듈 Compose 설정
• AndroidLibraryConventionPlugin.kt: 안드로이드 라이브러리 모듈 기본 설정
• AndroidLibraryComposeConventionPlugin.kt: 안드로이드 라이브러리 모듈 Compose 설정
• JvmLibraryConventionPlugin.kt: JVM 라이브러리 모듈 설정
• FeatureConventionPlugin.kt: 기능 모듈 설정
• HiltConventionPlugin.kt: Hilt 의존성 주입 설정
• NetworkConventionPlugin.kt: 네트워크 통신 설정
• ImageLoadingConventionPlugin.kt: 이미지 로딩 라이브러리 설정

이런 커스텀 플러그인 코드로 생성함

---

1.Design System ?

Figma나 디자인이 나온경우는 디자이너가 갖다쓰라는게 있을거임

• Color
• Thpography
• Icon

등등..
이 기본이고

여기에 컴포넌트나 이것저것 다 보여줄거임

본인이 혼자 만드거라 여기선에서 깔끔하게 정의할거임

1-1 멀티 모듈 상태에서 Theme

컴포즈 기준에서는

이렇게 되어있는데 멀티모듈 아니면 걍 여기서 작업하면됨 이 단락 패스ㄱㄱ

멀티모듈에 컨벤션 플러그인까지 되어있다 ?

클린아키텍처 구조에 맞추기 위해선

core/ : 공통적으로 사용하는 코드 (예: UI 테마, 디자인 시스템, 공통 util 등)

에 다 때려박는게 좋음ㅇㅇ 그런식으로 수정해보자

theme 패키지 그대로 core:ui에 옮기면 됨

core:ui/src/main/java/com/example/ui/theme/

그러면 생기는 문제

이런 오류가생김 왜 생기느냐 ?

원래 있던 theme이 사라져서 그럼

어떻게 해결하느냐 ?

// build.gradles.kts (Module :app)
dependencies {
    // UI 모듈 의존성
    implementation(project(":core:ui"))

아까 UI로 옮겨놨으니까 앱 모듈에 의존성을 추가해주면댐

잘 해결되는거 확인

2. 구현

core/ui/
├── src/
│   ├── main/
│   │   ├── java/
│   │   │   └── com/
│   │   │       └── example/
│   │   │           └── ui/
│   │   │               ├── theme/
│   │   │               │   ├── Color.kt          // 색상 정의
│   │   │               │   ├── Theme.kt          // 테마 설정
│   │   │               │   ├── Type.kt           // 타이포그래피 정의
│   │   │               │   └── Dimensions.kt     // 간격, 크기 등 상수
│   │   │               │
│   │   │               ├── components/           // 재사용 가능한 UI 컴포넌트
│   │   │               │   ├── buttons/
│   │   │               │   │   ├── PrimaryButton.kt
│   │   │               │   │   ├── SecondaryButton.kt
│   │   │               │   │   └── TextButton.kt
│   │   │               │   │
│   │   │               │   ├── inputs/
│   │   │               │   │   ├── TextField.kt
│   │   │               │   │   └── SearchField.kt
│   │   │               │   │
│   │   │               │   ├── cards/
│   │   │               │   │   └── StandardCard.kt
│   │   │               │   │
│   │   │               │   └── dialogs/
│   │   │               │       └── AlertDialog.kt
│   │   │               │
│   │   │               └── extensions/           // UI 관련 확장 함수
│   │   │                   ├── ViewExtensions.kt
│   │   │                   └── ComposeExtensions.kt
│   │   │
│   │   └── res/
│   │       ├── values/
│   │       │   ├── colors.xml     // XML 기반 색상 리소스
│   │       │   ├── styles.xml     // XML 기반 스타일
│   │       │   └── dimens.xml     // XML 기반 치수
│   │       │
│   │       ├── font/              // 폰트 파일
│   │       │   ├── custom_font_regular.ttf
│   │       │   ├── custom_font_medium.ttf
│   │       │   └── custom_font_bold.ttf
│   │       │
│   │       └── drawable/          // 아이콘 및 그래픽 자산
│   │           ├── ic_back.xml
│   │           └── btn_background.xml

대략적인 파일 구조

res 디렉토리 없으면 생성해주면됨

• color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- main blue colors -->
    <color name="blue_primary">#1335C9</color>
    <color name="blue_secondary">#2142FF</color>
    <color name="blue_tertiary">#4361FF</color>

    <!-- blue variants -->
    <color name="blue_dark">#0A1A5E</color>
    <color name="blue_medium_dark">#0E2894</color>
    <color name="blue_medium">#1335C9</color>
    <color name="blue_bright">#2142FF</color>
    <color name="blue_light">#4361FF</color>
    <color name="blue_lighter">#637BFF</color>
    <color name="blue_pale">#8395FF</color>
    <color name="blue_very_pale">#A3AFFF</color>
    <color name="blue_white">#E0E3FF</color>

    <!-- gray colors -->
    <color name="gray_black">#1A1A1A</color>
    <color name="gray_very_dark">#2E2E33</color>
    <color name="gray_dark">#474752</color>
    <color name="gray_medium_dark">#5F5F70</color>
    <color name="gray_medium">#9696A3</color>
    <color name="gray_medium_light">#B2B2BC</color>
    <color name="gray_light">#CDCDD5</color>
    <color name="gray_very_light">#E8E8EC</color>
    <color name="gray_white">#F4F4F6</color>

</resources>

• dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 간격 -->
    <dimen name="spacing_xxsmall">2dp</dimen>
    <dimen name="spacing_xsmall">4dp</dimen>
    <dimen name="spacing_small">8dp</dimen>
    <dimen name="spacing_medium">16dp</dimen>
    <dimen name="spacing_large">24dp</dimen>
    <dimen name="spacing_xlarge">32dp</dimen>
    <dimen name="spacing_xxlarge">48dp</dimen>

    <!-- 텍스트 크기 -->
    <dimen name="text_size_small">12sp</dimen>
    <dimen name="text_size_medium">14sp</dimen>
    <dimen name="text_size_large">16sp</dimen>
    <dimen name="text_size_xlarge">20sp</dimen>
    <dimen name="text_size_xxlarge">24sp</dimen>
</resources>

• font
  

• drawable

커스텀 디자인 Icon 같은곳을 SVG 파일로 받아서 넣으면된다.

사실 저 아이콘은 쓸모가 없지만 그래도 남겨봤다.

• Color.kt

<color name="blue_primary">#1335C9</color>

val Primary = Color(ContextCompat.getColor(LocalContext.current, R.color.primary))

이렇게 참조해서 정의할수도 있음

package com.example.ui.theme

import androidx.compose.runtime.Immutable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.graphics.Color

// 메인 블루 색상
val BluePrimary = Color(0xFF1335C9)
val BlueSecondary = Color(0xFF2142FF)
val BlueTertiary = Color(0xFF4361FF)

// 블루 변형
val BlueDark = Color(0xFF0A1A5E)
val BlueMediumDark = Color(0xFF0E2894)
val BlueMedium = Color(0xFF1335C9)
val BlueBright = Color(0xFF2142FF)
val BlueLight = Color(0xFF4361FF)
val BlueLighter = Color(0xFF637BFF)
val BluePale = Color(0xFF8395FF)
val BlueVeryPale = Color(0xFFA3AFFF)
val BlueWhite = Color(0xFFE0E3FF)

// 그레이 색상
val GrayBlack = Color(0xFF1A1A1A)
val GrayVeryDark = Color(0xFF2E2E33)
val GrayDark = Color(0xFF474752)
val GrayMediumDark = Color(0xFF5F5F70)
val GrayMedium = Color(0xFF9696A3)
val GrayMediumLight = Color(0xFFB2B2BC)
val GrayLight = Color(0xFFCDCDD5)
val GrayVeryLight = Color(0xFFE8E8EC)
val GrayWhite = Color(0xFFF4F4F6)

// 데이터 클래스로 색상 정의 (CompositionLocal 사용을 위한)
internal val BarrionColors = BarrionColor(
    // 메인 블루 색상
    primaryBlue = BluePrimary,
    secondaryBlue = BlueSecondary,
    tertiaryBlue = BlueTertiary,
    
    // 블루 변형
    blueDark = BlueDark,
    blueMediumDark = BlueMediumDark,
    blueMedium = BlueMedium,
    blueBright = BlueBright,
    blueLight = BlueLight,
    blueLighter = BlueLighter,
    bluePale = BluePale,
    blueVeryPale = BlueVeryPale,
    blueWhite = BlueWhite,
    
    // 그레이 색상
    grayBlack = GrayBlack,
    grayVeryDark = GrayVeryDark,
    grayDark = GrayDark,
    grayMediumDark = GrayMediumDark,
    grayMedium = GrayMedium,
    grayMediumLight = GrayMediumLight,
    grayLight = GrayLight,
    grayVeryLight = GrayVeryLight,
    grayWhite = GrayWhite,
    
    // 기능 색상 (필요시 추가)
    error = Color(0xFFFF3434),
    success = Color(0xFF4CAF50),
    warning = Color(0xFFFFC107),
    info = Color(0xFF2196F3),
    
    // 기타 유틸리티 색상
    white = Color(0xFFFFFFFF),
    black = Color(0xFF000000),
    transparent = Color(0x00000000),
    
    // 투명도 변형
    blackOverlay30 = Color(0x4D000000),
    blackOverlay60 = Color(0x99000000),
    whiteOverlay30 = Color(0x4DFFFFFF)
)

@Immutable
data class BarrionColor(
    // 메인 블루 색상
    val primaryBlue: Color,
    val secondaryBlue: Color,
    val tertiaryBlue: Color,
    
    // 블루 변형
    val blueDark: Color,
    val blueMediumDark: Color,
    val blueMedium: Color,
    val blueBright: Color,
    val blueLight: Color,
    val blueLighter: Color,
    val bluePale: Color,
    val blueVeryPale: Color,
    val blueWhite: Color,
    
    // 그레이 색상
    val grayBlack: Color,
    val grayVeryDark: Color,
    val grayDark: Color,
    val grayMediumDark: Color,
    val grayMedium: Color,
    val grayMediumLight: Color,
    val grayLight: Color,
    val grayVeryLight: Color,
    val grayWhite: Color,
    
    // 기능 색상
    val error: Color,
    val success: Color,
    val warning: Color,
    val info: Color,
    
    // 기타 유틸리티 색상
    val white: Color,
    val black: Color,
    val transparent: Color,
    
    // 투명도 변형
    val blackOverlay30: Color,
    val blackOverlay60: Color,
    val whiteOverlay30: Color
)

// CompositionLocal을 통해 앱 전체에서 색상에 접근할 수 있도록 설정
internal val LocalBarrionColor = staticCompositionLocalOf {
    BarrionColors
}

• Type.kt

package com.example.ui.theme

import androidx.compose.material3.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
import com.example.ui.R

// Pretendard 폰트 패밀리 정의
val PretendardFamily = FontFamily(
    Font(R.font.pretendard_thin, FontWeight.Thin),
    Font(R.font.pretendard_extralight, FontWeight.ExtraLight),
    Font(R.font.pretendard_light, FontWeight.Light),
    Font(R.font.pretendard_regular, FontWeight.Normal),
    Font(R.font.pretendard_medium, FontWeight.Medium),
    Font(R.font.pretendard_semibold, FontWeight.SemiBold),
    Font(R.font.pretendard_bold, FontWeight.Bold),
    Font(R.font.pretendard_extrabold, FontWeight.ExtraBold),
    Font(R.font.pretendard_black, FontWeight.Black)
)

// dimens.xml의 텍스트 크기를 Compose에서 사용하기 위한 변수
private val TextSizeSmall = 12.sp
private val TextSizeMedium = 14.sp
private val TextSizeLarge = 16.sp
private val TextSizeXLarge = 20.sp
private val TextSizeXXLarge = 24.sp

// Typography 정의
val Typography = Typography(
    // 표제 스타일
    headlineLarge = TextStyle(
        fontFamily = PretendardFamily,
        fontWeight = FontWeight.Bold,
        fontSize = TextSizeXXLarge,
        lineHeight = 32.sp,
        letterSpacing = (-0.5).sp
    ),
    headlineMedium = TextStyle(
        fontFamily = PretendardFamily,
        fontWeight = FontWeight.Bold,
        fontSize = TextSizeXLarge,
        lineHeight = 28.sp,
        letterSpacing = (-0.5).sp
    ),
    headlineSmall = TextStyle(
        fontFamily = PretendardFamily,
        fontWeight = FontWeight.Bold,
        fontSize = TextSizeLarge,
        lineHeight = 24.sp,
        letterSpacing = 0.sp
    ),

    // 제목 스타일
    titleLarge = TextStyle(
        fontFamily = PretendardFamily,
        fontWeight = FontWeight.SemiBold,
        fontSize = TextSizeXLarge,
        lineHeight = 28.sp,
        letterSpacing = (-0.25).sp
    ),
    titleMedium = TextStyle(
        fontFamily = PretendardFamily,
        fontWeight = FontWeight.SemiBold,
        fontSize = TextSizeLarge,
        lineHeight = 24.sp,
        letterSpacing = 0.sp
    ),
    titleSmall = TextStyle(
        fontFamily = PretendardFamily,
        fontWeight = FontWeight.Medium,
        fontSize = TextSizeMedium,
        lineHeight = 20.sp,
        letterSpacing = 0.sp
    ),

    // 본문 스타일
    bodyLarge = TextStyle(
        fontFamily = PretendardFamily,
        fontWeight = FontWeight.Normal,
        fontSize = TextSizeLarge,
        lineHeight = 24.sp,
        letterSpacing = 0.sp
    ),
    bodyMedium = TextStyle(
        fontFamily = PretendardFamily,
        fontWeight = FontWeight.Normal,
        fontSize = TextSizeMedium,
        lineHeight = 20.sp,
        letterSpacing = 0.sp
    ),
    bodySmall = TextStyle(
        fontFamily = PretendardFamily,
        fontWeight = FontWeight.Normal,
        fontSize = TextSizeSmall,
        lineHeight = 16.sp,
        letterSpacing = 0.1.sp
    ),

    // 라벨 스타일 (버튼 등에 사용)
    labelLarge = TextStyle(
        fontFamily = PretendardFamily,
        fontWeight = FontWeight.Medium,
        fontSize = TextSizeMedium,
        lineHeight = 20.sp,
        letterSpacing = 0.sp
    ),
    labelMedium = TextStyle(
        fontFamily = PretendardFamily,
        fontWeight = FontWeight.Medium,
        fontSize = TextSizeSmall,
        lineHeight = 16.sp,
        letterSpacing = 0.sp
    ),
    labelSmall = TextStyle(
        fontFamily = PretendardFamily,
        fontWeight = FontWeight.Medium,
        fontSize = 10.sp,
        lineHeight = 14.sp,
        letterSpacing = 0.sp
    )
)

• Theme.kt

package com.example.ui.theme

import android.app.Activity
import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.SideEffect
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalView
import androidx.core.view.WindowCompat

// 라이트 테마를 위한 색상 스키마 정의
private val LightColorScheme = lightColorScheme(
    primary = BluePrimary,
    secondary = BlueSecondary,
    tertiary = BlueTertiary,

    // 배경 및 표면 색상
    background = GrayVeryLight,
    surface = GrayWhite,
    surfaceVariant = GrayLight,

    // 텍스트 및 아이콘 색상
    onPrimary = GrayWhite,  // 기본 색상 위 텍스트/아이콘
    onSecondary = GrayWhite,
    onTertiary = GrayWhite,
    onBackground = GrayBlack,  // 배경 위 텍스트/아이콘
    onSurface = GrayBlack,
    onSurfaceVariant = GrayDark,

    // 기타 색상
    error = Color(0xFFFF3434),
    onError = GrayWhite
)

// 다크 테마를 위한 색상 스키마 정의
private val DarkColorScheme = darkColorScheme(
    primary = BlueBright,  // 어두운 배경에서는 더 밝은 블루
    secondary = BlueLight,
    tertiary = BlueLighter,

    // 배경 및 표면 색상
    background = GrayBlack,
    surface = GrayVeryDark,
    surfaceVariant = GrayDark,

    // 텍스트 및 아이콘 색상
    onPrimary = GrayWhite,
    onSecondary = GrayWhite,
    onTertiary = GrayWhite,
    onBackground = GrayWhite,
    onSurface = GrayWhite,
    onSurfaceVariant = GrayMediumLight,

    // 기타 색상
    error = Color(0xFFFF5252),
    onError = GrayWhite
)

@Composable
fun BarrionTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = false,  // 커스텀 색상을 우선하기 위해 기본값 false로 변경
    content: @Composable () -> Unit,
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }

    // 상태 표시줄 색상 설정
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window

            // 상태 표시줄 배경색을 하얀색으로 설정
            window.statusBarColor = Color.White.toArgb()

            // 상태 표시줄 아이콘 색상 설정 (라이트 테마에서는 어두운 아이콘)
            // 다크 테마에서는 밝은 아이콘을, 라이트 테마에서는 어두운 아이콘을 사용
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = true
        }
    }

    // 커스텀 색상 시스템을 앱 전체에 제공
    CompositionLocalProvider(
        LocalBarrionColor provides BarrionColors
    ) {
        MaterialTheme(
            colorScheme = colorScheme,
            typography = Typography,
            content = content,
        )
    }
}

// 커스텀 색상에 쉽게 접근하기 위한 확장 속성
val MaterialTheme.barrionColors: BarrionColor
    @Composable
    get() = LocalBarrionColor.current

• MainActivty.kt
  테스트를 해보자

package com.example.barrion

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.ui.theme.*

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            BarrionTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    DesignSystemShowcase(
                        modifier = Modifier.padding(innerPadding),
                    )
                }
            }
        }
    }
}

@Composable
fun DesignSystemShowcase(
    modifier: Modifier = Modifier,
) {
    Column(
        modifier = modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            .padding(Spacing.Medium)
    ) {
        // 제목
        Text(
            text = "디자인 시스템 테스트",
            style = MaterialTheme.typography.headlineLarge,
            color = MaterialTheme.colorScheme.primary
        )

        Spacer(modifier = Modifier.height(Spacing.Medium))

        // 타이포그래피 섹션
        SectionTitle(title = "타이포그래피")

        Text(text = "헤드라인 라지", style = MaterialTheme.typography.headlineLarge)
        Text(text = "헤드라인 미디엄", style = MaterialTheme.typography.headlineMedium)
        Text(text = "헤드라인 스몰", style = MaterialTheme.typography.headlineSmall)
        Text(text = "타이틀 라지", style = MaterialTheme.typography.titleLarge)
        Text(text = "바디 라지", style = MaterialTheme.typography.bodyLarge)
        Text(text = "라벨 미디엄", style = MaterialTheme.typography.labelMedium)

        Spacer(modifier = Modifier.height(Spacing.Large))

        // 색상 섹션
        SectionTitle(title = "색상 시스템")

        // 기본 Material 색상
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(Spacing.Small)
        ) {
            ColorSwatch(
                name = "Primary",
                color = MaterialTheme.colorScheme.primary,
                modifier = Modifier.weight(1f)
            )
            ColorSwatch(
                name = "Secondary",
                color = MaterialTheme.colorScheme.secondary,
                modifier = Modifier.weight(1f)
            )
            ColorSwatch(
                name = "Tertiary",
                color = MaterialTheme.colorScheme.tertiary,
                modifier = Modifier.weight(1f)
            )
        }

        Spacer(modifier = Modifier.height(Spacing.Small))

        // 커스텀 색상
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(Spacing.Small)
        ) {
            ColorSwatch(
                name = "BluePale",
                color = MaterialTheme.barrionColors.bluePale,
                modifier = Modifier.weight(1f)
            )
            ColorSwatch(
                name = "GrayMedium",
                color = MaterialTheme.barrionColors.grayMedium,
                modifier = Modifier.weight(1f)
            )
            ColorSwatch(
                name = "Error",
                color = MaterialTheme.colorScheme.error,
                modifier = Modifier.weight(1f)
            )
        }

        Spacer(modifier = Modifier.height(Spacing.Large))

        // 간격 섹션
        SectionTitle(title = "간격 시스템")

        // 다양한 간격을 시각적으로 표시
        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(text = "XSmall", modifier = Modifier.width(80.dp))
            Box(
                modifier = Modifier
                    .height(24.dp)
                    .width(Spacing.XSmall)
                    .background(MaterialTheme.colorScheme.primary)
            )
            Text(text = " ${Spacing.XSmall.value.toInt()}dp")
        }

        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(text = "Small", modifier = Modifier.width(80.dp))
            Box(
                modifier = Modifier
                    .height(24.dp)
                    .width(Spacing.Small)
                    .background(MaterialTheme.colorScheme.primary)
            )
            Text(text = " ${Spacing.Small.value.toInt()}dp")
        }

        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(text = "Medium", modifier = Modifier.width(80.dp))
            Box(
                modifier = Modifier
                    .height(24.dp)
                    .width(Spacing.Medium)
                    .background(MaterialTheme.colorScheme.primary)
            )
            Text(text = " ${Spacing.Medium.value.toInt()}dp")
        }

        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(text = "Large", modifier = Modifier.width(80.dp))
            Box(
                modifier = Modifier
                    .height(24.dp)
                    .width(Spacing.Large)
                    .background(MaterialTheme.colorScheme.primary)
            )
            Text(text = " ${Spacing.Large.value.toInt()}dp")
        }

        Spacer(modifier = Modifier.height(Spacing.Large))

        // 버튼 예시
        SectionTitle(title = "버튼 컴포넌트")

        Button(
            onClick = { },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("기본 버튼")
        }

        Spacer(modifier = Modifier.height(Spacing.Small))

        ElevatedButton(
            onClick = { },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("입체 버튼")
        }

        Spacer(modifier = Modifier.height(Spacing.Small))

        OutlinedButton(
            onClick = { },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("외곽선 버튼")
        }

        Spacer(modifier = Modifier.height(Spacing.Small))

        TextButton(
            onClick = { },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("텍스트 버튼")
        }
    }
}

@Composable
fun SectionTitle(title: String) {
    Column(modifier = Modifier.fillMaxWidth()) {
        Spacer(modifier = Modifier.height(Spacing.Small))
        Text(
            text = title,
            style = MaterialTheme.typography.titleMedium.copy(
                fontWeight = FontWeight.Bold
            ),
            color = MaterialTheme.colorScheme.secondary
        )
        Divider(modifier = Modifier.padding(vertical = Spacing.Small))
    }
}

@Composable
fun ColorSwatch(
    name: String,
    color: androidx.compose.ui.graphics.Color,
    modifier: Modifier = Modifier
) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier
    ) {
        Box(
            modifier = Modifier
                .size(64.dp)
                .clip(RoundedCornerShape(8.dp))
                .background(color)
        )
        Spacer(modifier = Modifier.height(Spacing.XSmall))
        Text(
            text = name,
            style = MaterialTheme.typography.labelMedium
        )
    }
}

@Preview(showBackground = true)
@Composable
fun DesignSystemShowcasePreview() {
    BarrionTheme {
        DesignSystemShowcase()
    }
}