메인페이지 디자인 변경

Author: lyh990517

app/src/main/res/values/themes.xml

@@ -10,7 +10,7 @@
         <item name="colorSecondaryVariant">@color/teal_700</item>
         <item name="colorOnSecondary">@color/black</item>
         <!-- Status bar color. -->
-        <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
+        <item name="android:statusBarColor">@android:color/transparent</item>
         <!-- Customize your theme here. -->
     </style>
 </resources>

presentaion/src/main/java/com/example/presentaion/ui_component/SearchBar.kt

@@ -0,0 +1,21 @@
+package com.example.presentaion.ui_component
+
+import androidx.compose.material.OutlinedTextField
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.State
+import androidx.compose.ui.Modifier
+
+@Composable
+fun SearchBar(
+    modifier: Modifier = Modifier,
+    state: State<String>,
+    onValueChange: (String) -> Unit,
+    label: @Composable (() -> Unit)? = null
+) {
+    OutlinedTextField(
+        modifier = modifier,
+        value = state.value,
+        onValueChange = onValueChange,
+        label = label
+    )
+}

presentaion/src/main/java/com/example/presentaion/view/MainScreen.kt

@@ -1,35 +1,96 @@
 package com.example.presentaion.view
 
+import androidx.compose.foundation.Image
+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.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.material.Button
-import androidx.compose.material.OutlinedTextField
+import androidx.compose.material.ButtonDefaults
+import androidx.compose.material.Icon
 import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Send
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.State
+import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.mutableStateOf
 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.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.lifecycle.viewmodel.compose.viewModel
+import com.example.presentaion.R
+import com.example.presentaion.ui_component.SearchBar
 import com.example.presentaion.viewmodel.FireStoreViewModel
 
 @Composable
 fun MainScreen(viewModel: FireStoreViewModel) {
     val roomId = remember { mutableStateOf("") }
-    Column() {
-        SearchBar(roomId) {
-            roomId.value = it
-        }
-        Button(onClick = { viewModel.getRoomInfo(roomId.value, false) }) {
-            Text(text = "Enter")
-        }
-        Button(onClick = { viewModel.getRoomInfo(roomId.value, true) }) {
-            Text(text = "Join")
-        }
+    Column(
+        modifier = Modifier.fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
+    ) {
+        LogoImage()
+        Spacer(modifier = Modifier.padding(vertical = 50.dp))
+        InputContent(roomId, viewModel)
     }
 }
 
 @Composable
-fun SearchBar(
-    state: State<String>,
-    onValueChange: (String) -> Unit
+fun LogoImage() {
+    Image(
+        modifier = Modifier.size(200.dp),
+        painter = painterResource(id = R.drawable.webrtc),
+        contentDescription = "Logo"
+    )
+}
+
+@Composable
+private fun InputContent(
+    roomId: MutableState<String>,
+    viewModel: FireStoreViewModel
 ) {
-    OutlinedTextField(value = state.value, onValueChange = onValueChange)
+    SearchBar(modifier = Modifier
+        .fillMaxWidth()
+        .padding(horizontal = 40.dp),
+        state = roomId,
+        onValueChange = { roomId.value = it }) {
+        Text(text = "Room")
+    }
+    Spacer(modifier = Modifier.padding(vertical = 20.dp))
+    Button(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(50.dp)
+            .padding(horizontal = 40.dp),
+        onClick = { viewModel.getRoomInfo(roomId.value, false) },
+        colors = ButtonDefaults.buttonColors(backgroundColor = Color.Blue)
+    ) {
+        Icon(imageVector = Icons.Filled.Send, contentDescription = "", tint = Color.White)
+        Text(text = "Start", color = Color.White, fontSize = 20.sp)
+    }
+    Spacer(modifier = Modifier.padding(vertical = 10.dp))
+    Button(modifier = Modifier
+        .fillMaxWidth()
+        .height(50.dp)
+        .padding(horizontal = 40.dp),
+        colors = ButtonDefaults.buttonColors(backgroundColor = Color.Blue),
+        onClick = { viewModel.getRoomInfo(roomId.value, true) }) {
+        Text(text = "Join", color = Color.White, fontSize = 20.sp)
+    }
 }
+
+@Preview
+@Composable
+fun MainScreenPreview() {
+    MainScreen(viewModel = viewModel())
+}