Feat/symbol selection

frontend/app/src/main/java/com/example/speechbuddy/compose/home/HomeScreen.kt

@@ -1,6 +1,9 @@
 package com.example.speechbuddy.compose.home
 
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -13,6 +16,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
@@ -82,14 +86,14 @@ fun HomeScreen() {
 private fun BottomNavigationBar(
     items: List<BottomNavItem>,
     navController: NavController,
-    modifier: Modifier = Modifier,
     onItemClick: (BottomNavItem) -> Unit
 ) {
     val backStackEntry = navController.currentBackStackEntryAsState()
 
     NavigationBar(
-        modifier = modifier,
-        containerColor = MaterialTheme.colorScheme.secondaryContainer
+        modifier = Modifier.height(100.dp),
+        containerColor = MaterialTheme.colorScheme.secondaryContainer,
+        windowInsets = WindowInsets(top = 20.dp)
     ) {
         items.forEach { item ->
             val selected = item.route == backStackEntry.value?.destination?.route
@@ -102,6 +106,7 @@ private fun BottomNavigationBar(
                         contentDescription = stringResource(id = item.nameResId)
                     )
                 },
+                modifier = Modifier.size(40.dp),
                 colors = NavigationBarItemDefaults.colors(
                     selectedIconColor = MaterialTheme.colorScheme.onPrimaryContainer,
                     unselectedIconColor = MaterialTheme.colorScheme.outline

frontend/app/src/main/java/com/example/speechbuddy/compose/landing/LandingScreen.kt

@@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
@@ -25,11 +26,19 @@ fun LandingScreen(
     onGuestClick: () -> Unit,
     onLoginClick: () -> Unit,
 ) {
-    Surface(modifier = modifier.fillMaxSize(), color = MaterialTheme.colorScheme.primaryContainer) {
-        Image(
-            painter = painterResource(id = R.mipmap.ic_launcher_foreground),
-            contentDescription = stringResource(id = R.string.app_name),
-        )
+    Surface(
+        modifier = modifier.fillMaxSize(),
+        color = MaterialTheme.colorScheme.primaryContainer
+    ) {
+        Box(
+            modifier = Modifier.size(200.dp),
+            contentAlignment = Alignment.Center
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.speechbuddy_parrot),
+                contentDescription = stringResource(id = R.string.app_name),
+            )
+        }
         Box(
             modifier = Modifier.padding(horizontal = 24.dp, vertical = 64.dp),
             contentAlignment = Alignment.BottomCenter

frontend/app/src/main/java/com/example/speechbuddy/compose/symbolselection/SelectedSymbolUi.kt

@@ -0,0 +1,112 @@
+package com.example.speechbuddy.compose.symbolselection
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+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.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Clear
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.example.speechbuddy.R
+import com.example.speechbuddy.domain.models.Symbol
+import com.example.speechbuddy.ui.SpeechBuddyTheme
+import com.example.speechbuddy.utils.Constants
+
+@ExperimentalMaterial3Api
+@Composable
+fun SelectedSymbolUi(
+    symbol: Symbol,
+    modifier: Modifier = Modifier,
+    onClear: () -> Unit
+) {
+    Card(
+        modifier = modifier.size(100.dp),
+        shape = RoundedCornerShape(10.dp),
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.background
+        ),
+        border = BorderStroke(width = 1.dp, color = MaterialTheme.colorScheme.onBackground)
+    ) {
+        Box(contentAlignment = Alignment.TopEnd) {
+            IconButton(
+                onClick = onClear,
+                modifier = Modifier
+                    .size(22.dp)
+                    .padding(5.dp)
+            ) {
+                Icon(
+                    imageVector = Icons.Default.Clear,
+                    contentDescription = stringResource(id = R.string.symbol_unselect)
+                )
+            }
+
+            Column(
+                modifier = Modifier.fillMaxSize(),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Image(
+                    painter = painterResource(id = symbol.imageResId),
+                    contentDescription = symbol.text,
+                    modifier = Modifier.height(65.dp),
+                    contentScale = ContentScale.FillHeight
+                )
+
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(35.dp)
+                        .background(color = MaterialTheme.colorScheme.secondaryContainer)
+                        .padding(horizontal = 8.dp),
+                    contentAlignment = Alignment.Center
+                ) {
+                    Text(
+                        text = symbol.text,
+                        textAlign = TextAlign.Center,
+                        maxLines = Constants.MAXIMUM_LINES_FOR_SYMBOL_TEXT,
+                        style = MaterialTheme.typography.labelSmall
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@ExperimentalMaterial3Api
+@Composable
+fun SelectedSymbolUiPreview() {
+    val previewSymbol = Symbol(
+        id = 1,
+        text = "119에 전화해주세요",
+        imageResId = R.drawable.symbol_1,
+        categoryId = 1,
+        isFavorite = true,
+        isMine = false
+    )
+
+    SpeechBuddyTheme {
+        SelectedSymbolUi(symbol = previewSymbol, onClear = {})
+    }
+}

frontend/app/src/main/java/com/example/speechbuddy/compose/symbolselection/SelectedSymbolsBox.kt

@@ -0,0 +1,112 @@
+package com.example.speechbuddy.compose.symbolselection
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+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.width
+import androidx.compose.foundation.lazy.LazyRow
+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.MaterialTheme
+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.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.example.speechbuddy.R
+import com.example.speechbuddy.domain.models.Symbol
+import com.example.speechbuddy.ui.SpeechBuddyTheme
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SelectedSymbolsBox(
+    selectedSymbols: List<Symbol>,
+    onClear: (Symbol) -> Unit,
+    onClearAll: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(120.dp)
+            .background(color = MaterialTheme.colorScheme.surface)
+            .border(
+                width = 1.dp,
+                color = MaterialTheme.colorScheme.surfaceVariant,
+                shape = RoundedCornerShape(10.dp)
+            )
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .weight(1f),
+            contentAlignment = Alignment.CenterStart
+        ) {
+            LazyRow(
+                contentPadding = PaddingValues(10.dp),
+                horizontalArrangement = Arrangement.spacedBy(10.dp)
+            ) {
+                items(selectedSymbols) { symbol ->
+                    SelectedSymbolUi(symbol = symbol, onClear = { onClear(symbol) })
+                }
+            }
+        }
+
+        Box(
+            modifier = Modifier
+                .width(50.dp)
+                .background(color = MaterialTheme.colorScheme.background)
+        ) {
+            Button(
+                onClick = onClearAll,
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(6.dp),
+                enabled = selectedSymbols.isNotEmpty(),
+                shape = RoundedCornerShape(5.dp),
+                colors = ButtonDefaults.buttonColors(
+                    containerColor = MaterialTheme.colorScheme.tertiary,
+                    contentColor = MaterialTheme.colorScheme.onTertiary
+                ),
+                contentPadding = PaddingValues(2.dp)
+            ) {
+                Text(
+                    text = stringResource(id = R.string.clear_all),
+                    textAlign = TextAlign.Center,
+                    style = MaterialTheme.typography.bodyMedium
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun SelectedSymbolsBoxPreview() {
+    val previewSymbol = Symbol(
+        id = 1,
+        text = "119에 전화해주세요",
+        imageResId = R.drawable.symbol_1,
+        categoryId = 1,
+        isFavorite = true,
+        isMine = false
+    )
+    val selectedSymbols = List(size = 10, init = { previewSymbol })
+
+    SpeechBuddyTheme {
+        SelectedSymbolsBox(selectedSymbols = selectedSymbols, onClear = {}, onClearAll = {})
+    }
+}

frontend/app/src/main/java/com/example/speechbuddy/compose/symbolselection/SymbolSearchTextField.kt

@@ -0,0 +1,63 @@
+package com.example.speechbuddy.compose.symbolselection
+
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.example.speechbuddy.R
+import com.example.speechbuddy.ui.SpeechBuddyTheme
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SymbolSearchTextField(
+    value: String,
+    onValueChange: (String) -> Unit,
+    modifier: Modifier = Modifier
+) {
+    OutlinedTextField(
+        value = value,
+        onValueChange = onValueChange,
+        modifier = modifier
+            .fillMaxWidth()
+            .defaultMinSize(minHeight = 48.dp),
+        textStyle = MaterialTheme.typography.bodyMedium,
+        placeholder = { Text(text = stringResource(id = R.string.search_box_placeholder)) },
+        trailingIcon = {
+            Icon(
+                imageVector = Icons.Default.Search,
+                contentDescription = stringResource(id = R.string.search_box_placeholder)
+            )
+        },
+        singleLine = true,
+        shape = RoundedCornerShape(10.dp),
+        colors = TextFieldDefaults.outlinedTextFieldColors(
+            textColor = MaterialTheme.colorScheme.onSurface,
+            containerColor = MaterialTheme.colorScheme.surface,
+            focusedBorderColor = MaterialTheme.colorScheme.tertiary,
+            unfocusedBorderColor = MaterialTheme.colorScheme.surfaceVariant
+        )
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+fun SymbolSearchTextFieldPreview() {
+    SpeechBuddyTheme {
+        SymbolSearchTextField(
+            value = "검색어",
+            onValueChange = {}
+        )
+    }
+}