[ADD/#16] Button / 컴포넌트 구현

core/build.gradle.kts

@@ -57,6 +57,9 @@ dependencies {
     implementation(libs.androidx.foundation.android)
     implementation(libs.androidx.material3.android)
 
+    // Compose Preview
+    debugImplementation(libs.compose.ui.tooling)
+
     // Test Dependency
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)

core/src/main/java/com/terning/core/designsystem/component/button/RectangleButton.kt

@@ -0,0 +1,46 @@
+package com.terning.core.designsystem.component.button
+
+import androidx.annotation.StringRes
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.terning.core.R
+import com.terning.core.designsystem.theme.TerningPointTheme
+import com.terning.core.designsystem.theme.TerningTheme
+
+@Composable
+fun RectangleButton(
+    style: TextStyle,
+    paddingVertical: Dp,
+    @StringRes text: Int,
+    onButtonClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    isEnabled: Boolean = true
+) {
+    TerningBasicButton(
+        style = style,
+        paddingVertical = paddingVertical,
+        text = text,
+        onButtonClick = onButtonClick,
+        modifier = modifier,
+        isEnabled = isEnabled,
+        shape = RoundedCornerShape(0.dp),
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+fun RectangleButtonPreview() {
+    TerningPointTheme {
+        RectangleButton(
+            style = TerningTheme.typography.button0,
+            text = R.string.button_preview,
+            paddingVertical = 19.dp,
+            onButtonClick = {}
+        )
+    }
+}

core/src/main/java/com/terning/core/designsystem/component/button/RoundButton.kt

@@ -0,0 +1,48 @@
+package com.terning.core.designsystem.component.button
+
+import androidx.annotation.StringRes
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.terning.core.R
+import com.terning.core.designsystem.theme.TerningPointTheme
+import com.terning.core.designsystem.theme.TerningTheme
+
+@Composable
+fun RoundButton(
+    style: TextStyle,
+    paddingVertical: Dp,
+    cornerRadius: Dp,
+    @StringRes text: Int,
+    onButtonClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    isEnabled: Boolean = true,
+) {
+    TerningBasicButton(
+        modifier = modifier,
+        style = style,
+        paddingVertical = paddingVertical,
+        shape = RoundedCornerShape(cornerRadius),
+        text = text,
+        onButtonClick = onButtonClick,
+        isEnabled = isEnabled,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+fun RoundButtonPreview() {
+    TerningPointTheme {
+        RoundButton(
+            style = TerningTheme.typography.button0,
+            text = R.string.button_preview,
+            paddingVertical = 19.dp,
+            cornerRadius = 10.dp,
+            onButtonClick = {}
+        )
+    }
+}

core/src/main/java/com/terning/core/designsystem/component/button/TerningBasicButton.kt

@@ -0,0 +1,82 @@
+package com.terning.core.designsystem.component.button
+
+import androidx.annotation.StringRes
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.ripple.LocalRippleTheme
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.terning.core.R
+import com.terning.core.designsystem.theme.Black
+import com.terning.core.designsystem.theme.Grey150
+import com.terning.core.designsystem.theme.TerningMain
+import com.terning.core.designsystem.theme.TerningMain2
+import com.terning.core.designsystem.theme.TerningPointTheme
+import com.terning.core.designsystem.theme.TerningTheme
+import com.terning.core.designsystem.theme.White
+import com.terning.core.util.NoRippleTheme
+
+@Composable
+fun TerningBasicButton(
+    shape: Shape,
+    style: TextStyle,
+    paddingVertical: Dp,
+    @StringRes text: Int,
+    onButtonClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    isEnabled: Boolean = true,
+) {
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+    val backgroundColor = if (isPressed) TerningMain2 else TerningMain
+
+    CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
+        Button(
+            modifier = modifier.fillMaxWidth(),
+            interactionSource = interactionSource,
+            enabled = isEnabled,
+            colors = ButtonDefaults.buttonColors(
+                containerColor = backgroundColor,
+                contentColor = White,
+                disabledContainerColor = Grey150,
+                disabledContentColor = Black
+            ),
+            shape = shape,
+            onClick = { onButtonClick() }
+        ) {
+            Text(
+                text = stringResource(id = text),
+                style = style,
+                modifier = modifier.padding(vertical = paddingVertical)
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun TerningBasicButtonPreview() {
+    TerningPointTheme {
+        TerningBasicButton(
+            text = R.string.button_preview,
+            shape = ButtonDefaults.shape,
+            style = TerningTheme.typography.button0,
+            paddingVertical = 19.dp,
+            onButtonClick = {}
+        )
+    }
+}

core/src/main/java/com/terning/core/designsystem/topappbar/BackButtonTopAppBar.kt → core/src/main/java/com/terning/core/designsystem/component/topappbar/BackButtonTopAppBar.kt

@@ -1,4 +1,4 @@
-package com.terning.core.designsystem.topappbar
+package com.terning.core.designsystem.component.topappbar
 
 import androidx.compose.runtime.Composable
 

core/src/main/java/com/terning/core/designsystem/topappbar/LogoTopAppBar.kt → core/src/main/java/com/terning/core/designsystem/component/topappbar/LogoTopAppBar.kt

@@ -1,4 +1,4 @@
-package com.terning.core.designsystem.topappbar
+package com.terning.core.designsystem.component.topappbar
 
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable

core/src/main/java/com/terning/core/designsystem/topappbar/MyPageTopAppBar.kt → core/src/main/java/com/terning/core/designsystem/component/topappbar/MyPageTopAppBar.kt

@@ -1,4 +1,4 @@
-package com.terning.core.designsystem.topappbar
+package com.terning.core.designsystem.component.topappbar
 
 import androidx.compose.foundation.layout.Row
 import androidx.compose.material3.Icon

core/src/main/java/com/terning/core/designsystem/topappbar/TerningTopAppBar.kt → core/src/main/java/com/terning/core/designsystem/component/topappbar/TerningTopAppBar.kt

@@ -1,15 +1,11 @@
-package com.terning.core.designsystem.topappbar
+package com.terning.core.designsystem.component.topappbar
 
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign

core/src/main/java/com/terning/core/designsystem/theme/Color.kt

@@ -15,6 +15,7 @@ val Black = Color(0xFF171717)
 
 // Main Color
 val TerningMain = Color(0xFF1EA65E)
+val TerningMain2 = Color(0xFF179653)
 
 // Calendar Color
 val CalRed = Color(0xFFED4E54)

core/src/main/java/com/terning/core/designsystem/theme/Theme.kt

@@ -33,7 +33,7 @@ fun ProvideTerningTypography(typography: TerningTypography, content: @Composable
 }
 
 @Composable
-fun TerningTheme(
+fun TerningPointTheme(
     darkTheme: Boolean = isSystemInDarkTheme(),
     // Dynamic color is available on Android 12+
     dynamicColor: Boolean = true,

core/src/main/java/com/terning/core/designsystem/theme/Type.kt

@@ -204,7 +204,6 @@ class TerningTypography internal constructor(
     }
 }
 
-
 @Composable
 fun TerningTypography(): TerningTypography {
     return TerningTypography(

core/src/main/java/com/terning/core/extension/Retrofit.kt

@@ -1,6 +1,5 @@
 package com.terning.core.extension
 
-
 fun String?.isJsonObject(): Boolean = this?.startsWith("{") == true && this.endsWith("}")
 
 fun String?.isJsonArray(): Boolean = this?.startsWith("[") == true && this.endsWith("]")

core/src/main/java/com/terning/core/util/NoRippleInteractionSource.kt

@@ -0,0 +1,15 @@
+package com.terning.core.util
+
+import androidx.compose.foundation.interaction.Interaction
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.emptyFlow
+
+object NoRippleInteractionSource : MutableInteractionSource {
+
+    override val interactions: Flow<Interaction> = emptyFlow()
+
+    override suspend fun emit(interaction: Interaction) {}
+
+    override fun tryEmit(interaction: Interaction) = true
+}

core/src/main/java/com/terning/core/util/NoRippleTheme.kt

@@ -0,0 +1,19 @@
+package com.terning.core.util
+
+import androidx.compose.material.ripple.RippleAlpha
+import androidx.compose.material.ripple.RippleTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+
+object NoRippleTheme : RippleTheme {
+    @Composable
+    override fun defaultColor() = Color.Unspecified
+
+    @Composable
+    override fun rippleAlpha(): RippleAlpha = RippleAlpha(
+        draggedAlpha = 0.0f,
+        focusedAlpha = 0.0f,
+        hoveredAlpha = 0.0f,
+        pressedAlpha = 0.0f
+    )
+}

core/src/main/res/values/strings.xml

@@ -1,10 +1,14 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <!--    ContentDescription-->
+    <!--ContentDescription-->
     <string name="ic_back">뒤로가기 버튼</string>
     <string name="ic_logo">탑 바 로고</string>
     <string name="ic_20_right">오른쪽 버튼</string>
 
-    <!--    MyPage-->
+    <!-- MyPage-->
     <string name="my_page_top_app_bar">프로필 수정</string>
+
+    <!-- button-->
+    <string name="button_preview">button</string>
+
 </resources>

feature/build.gradle.kts

@@ -77,7 +77,6 @@ dependencies {
     // Material Design
     implementation(libs.material)
     implementation(libs.androidx.material3.android)
-    implementation(libs.androidx.ui.tooling.preview)
     implementation(libs.androidx.ui.graphics)
 
     // TestDependencies
@@ -91,6 +90,9 @@ dependencies {
     implementation(libs.ossLicense)
     implementation(libs.lottie)
 
+    // Compose Preview
+    debugImplementation(libs.compose.ui.tooling)
+
     // KakaoDependencies
     implementation(libs.kakao.user)
 

feature/src/main/java/com/terning/feature/main/MainActivity.kt

@@ -4,7 +4,7 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
-import com.terning.core.designsystem.theme.TerningTheme
+import com.terning.core.designsystem.theme.TerningPointTheme
 import dagger.hilt.android.AndroidEntryPoint
 
 @AndroidEntryPoint
@@ -14,7 +14,7 @@ class MainActivity : ComponentActivity() {
         enableEdgeToEdge()
         setContent {
             val navigator: MainNavigator = rememberMainNavigator()
-            TerningTheme {
+            TerningPointTheme {
                 MainScreen(navigator)
             }
         }