[ui]: 하단 전체 너비를 차지하는 공통 버튼 구현

OurMenu · Jan 10, 2025 · 8f9bc05 · 8f9bc05
1 parent 4e6fdc2
commit 8f9bc05
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 19 deletions.
diff --git a/app/src/main/java/com/kuit/ourmenu/ui/addmenu/screen/AddMenuSearchScreen.kt b/app/src/main/java/com/kuit/ourmenu/ui/addmenu/screen/AddMenuSearchScreen.kt
@@ -5,12 +5,8 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Scaffold
@@ -21,7 +17,6 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
@@ -31,6 +26,7 @@ import androidx.compose.ui.unit.sp
 import com.kuit.ourmenu.R
 import com.kuit.ourmenu.ui.addmenu.component.AddMenuTopAppBar
 import com.kuit.ourmenu.ui.addmenu.component.RestaurantSearchItem
+import com.kuit.ourmenu.ui.common.BottomFullWidthButton
 import com.kuit.ourmenu.ui.common.SearchBar
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -64,20 +60,12 @@ fun AddMenuSearchScreen(modifier: Modifier = Modifier) {
                 horizontalAlignment = Alignment.CenterHorizontally,
                 verticalArrangement = Arrangement.Center
             ) {
-                Button(
-                    onClick = { /*TODO*/ },
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .size(320.dp, 52.dp)
-                        .shadow(elevation = 4.dp, shape = RoundedCornerShape(12.dp)),
-                    shape = RoundedCornerShape(12.dp),
-                    colors = ButtonDefaults.buttonColors(
-                        containerColor = Color(0xFFF7F7F9),
-                        contentColor = Color(0xFFA4A4A6)
-                    ),
-                ) {
-                    Text(text = "가게와 메뉴 직접 추가하기")
-                }
+                BottomFullWidthButton(
+                    onClick = { TODO() },
+                    containerColor = Color(0xFFF7F7F9),
+                    contentColor = Color(0xFFA4A4A6),
+                    text = "가게와 메뉴 직접 추가"
+                )
             }
         },
         content = { paddingValues ->

diff --git a/app/src/main/java/com/kuit/ourmenu/ui/common/BottomFullWidthButton.kt b/app/src/main/java/com/kuit/ourmenu/ui/common/BottomFullWidthButton.kt
@@ -0,0 +1,47 @@
+package com.kuit.ourmenu.ui.common
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun BottomFullWidthButton(onClick: () -> Unit, containerColor: Color, contentColor: Color, text: String) {
+    Button(
+        onClick = onClick,
+        modifier = Modifier
+            .fillMaxWidth()
+            .size(320.dp, 52.dp)
+            .shadow(elevation = 4.dp, shape = RoundedCornerShape(12.dp)),
+        shape = RoundedCornerShape(12.dp),
+        colors = ButtonDefaults.buttonColors(
+            containerColor = containerColor,
+            contentColor = contentColor
+        ),
+    ) {
+        Text(text = text)
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun BottomFullWidthButtonPreview() {
+    Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center) {
+        BottomFullWidthButton({}, Color(0xFFF7F7F9), Color(0xFFA4A4A6), "가게와 메뉴 직접 추가하기")
+        Spacer(modifier = Modifier.height(16.dp))
+        BottomFullWidthButton({}, Color(0xFFFF5420), Color.White, "메뉴 추가하기")
+    }
+}