[ui]: AddMenu에서 사용할 TopAppBar 컴포넌트 분리

Author: casper-jr

app/src/main/java/com/kuit/ourmenu/ui/addmenu/component/AddMenuTopAppBar.kt

@@ -0,0 +1,54 @@
+package com.kuit.ourmenu.ui.addmenu.component
+
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+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
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AddMenuTopAppBar(topAppbarText : @Composable (() -> Unit)) {
+    TopAppBar(
+        title = {
+            topAppbarText()
+        },
+        navigationIcon = {
+            IconButton(onClick = { TODO("뒤로가기 구현") }) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_top_bar_back),
+                    contentDescription = "Back"
+                )
+            }
+        },
+        modifier = Modifier
+            .drawBehind {
+                drawRect(
+                    color = Color.Black
+                )
+            }
+            .shadow(elevation = 4.dp)
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun AddMenuTopAppBarPreview() {
+    AddMenuTopAppBar {
+        Text(
+            "OURMENU",
+            color = Color(0xFFFF5420),
+            fontWeight = FontWeight.Bold
+        )
+    }
+}

app/src/main/java/com/kuit/ourmenu/ui/addmenu/screen/AddMenuSearchScreen.kt

@@ -1,11 +1,81 @@
 package com.kuit.ourmenu.ui.addmenu.screen
 
+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.material3.Button
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+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
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kuit.ourmenu.R
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun AddMenuSearchScreen(modifier: Modifier = Modifier) {
+    Scaffold(modifier = Modifier.fillMaxSize(),
+        topBar = {
+            TopAppBar(
+                title = {
+                    Text(
+                        "OURMENU",
+                        color = Color(0xFFFF5420),
+                        fontWeight = FontWeight.Bold
+                    )
+                },
+                navigationIcon = {
+                    IconButton(onClick = { TODO("뒤로가기 구현") }) {
+                        Icon(
+                            painter = painterResource(R.drawable.ic_top_bar_back),
+                            contentDescription = "Back"
+                        )
+                    }
+                },
+                modifier = Modifier
+                    .drawBehind {
+                        drawRect(
+                            color = Color.Black
+                        )
+                    }
+                    .shadow(elevation = 4.dp)
+            )
+        },
+        bottomBar = {
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(start = 20.dp, end = 20.dp, bottom = 20.dp),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Button(onClick = { /*TODO*/ }) {
+                    Text("가게와 메뉴 직접 추가하기")
+                }
+            }
+        },
+        content = { paddingValues ->
+            Column(
+                modifier = Modifier
+                    .padding(paddingValues)
+                    .fillMaxWidth(),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Text("content")
+            }
+        }
+    )
 
 }