[UI/#31] 탐색 뷰 / 검색 텍스트 필드 클릭 뷰 구현

core/src/main/java/com/terning/core/designsystem/component/textfield/NameTextField.kt

@@ -1,6 +1,7 @@
 package com.terning.core.designsystem.component.textfield
 
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
 import com.terning.core.designsystem.theme.Black
@@ -22,6 +23,7 @@ fun NameTextField(
     TerningBasicTextField(
         value = text,
         onValueChange = onValueChange,
+        modifier = Modifier,
         textStyle = TerningTheme.typography.detail1,
         textColor = Black,
         drawLineColor = Grey500,

core/src/main/java/com/terning/core/designsystem/component/textfield/SearchTextField.kt

@@ -1,6 +1,7 @@
 package com.terning.core.designsystem.component.textfield
 
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.SolidColor
 import com.terning.core.designsystem.theme.Grey300
 import com.terning.core.designsystem.theme.Grey400
@@ -9,15 +10,18 @@ import com.terning.core.designsystem.theme.TerningTheme
 
 @Composable
 fun SearchTextField(
-    text: String,
-    onValueChange: (String) -> Unit,
+    text: String = "",
+    onValueChange: (String) -> Unit = {},
+    modifier: Modifier,
     hint: String,
     leftIcon: Int,
+    enabled: Boolean = true,
     readOnly: Boolean = false,
 ) {
     TerningBasicTextField(
         value = text,
         onValueChange = onValueChange,
+        modifier = modifier,
         textStyle = TerningTheme.typography.button3,
         textColor = Grey400,
         cursorBrush = SolidColor(Grey300),
@@ -27,6 +31,7 @@ fun SearchTextField(
         hintColor = Grey300,
         leftIcon = leftIcon,
         leftIconColor = TerningMain,
+        enabled = enabled,
         readOnly = readOnly,
     )
 }

core/src/main/java/com/terning/core/designsystem/component/textfield/TerningBasicTextField.kt

@@ -35,8 +35,9 @@ import com.terning.core.designsystem.theme.White
 
 @Composable
 fun TerningBasicTextField(
-    value: String,
-    onValueChange: (String) -> Unit,
+    value: String = "",
+    onValueChange: (String) -> Unit = {},
+    modifier: Modifier,
     textStyle: TextStyle,
     textColor: Color,
     hintColor: Color,
@@ -51,6 +52,7 @@ fun TerningBasicTextField(
     helperMessage: String = "",
     helperIcon: Int? = null,
     helperColor: Color = TerningMain,
+    enabled: Boolean = true,
     readOnly: Boolean = false,
 ) {
     val keyboardController = LocalSoftwareKeyboardController.current
@@ -70,7 +72,7 @@ fun TerningBasicTextField(
             }
         ),
 
-        modifier = Modifier
+        modifier = modifier
             .fillMaxWidth()
             .background(White)
             .drawWithContent {
@@ -124,6 +126,8 @@ fun TerningBasicTextField(
                 }
             }
         },
+
+        enabled = enabled,
         readOnly = readOnly,
     )
 

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

@@ -1,14 +1,18 @@
 package com.terning.core.designsystem.component.topappbar
 
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 
 @Composable
 fun BackButtonTopAppBar(
-    title: String, onBackButtonClick: (() -> Unit),
+    title: String,
+    modifier: Modifier,
+    onBackButtonClick: (() -> Unit),
 ) {
     TerningBasicTopAppBar(
         title = title,
         showBackButton = true,
+        modifier = modifier,
         onBackButtonClick = { onBackButtonClick.invoke() },
     )
 }

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

@@ -2,19 +2,23 @@ package com.terning.core.designsystem.component.topappbar
 
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import com.terning.core.R
 
 @Composable
-fun LogoTopAppBar() {
+fun LogoTopAppBar(
+    modifier: Modifier = Modifier
+) {
     TerningBasicTopAppBar(
         showBackButton = false,
         actions = listOf {
             Icon(
                 painter = painterResource(id = R.drawable.ic_logo),
                 contentDescription = stringResource(id = R.string.ic_logo),
             )
-        }
+        },
+        modifier = modifier
     )
 }

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

@@ -6,14 +6,17 @@ 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
 import com.terning.core.R
 import com.terning.core.designsystem.theme.TerningTheme
 
 @Composable
-fun MyPageTopAppBar() {
+fun MyPageTopAppBar(
+    modifier: Modifier,
+) {
     TerningBasicTopAppBar(
         showBackButton = false,
         actions = listOf(
@@ -36,6 +39,7 @@ fun MyPageTopAppBar() {
                     }
                 }
             }
-        )
+        ),
+        modifier = modifier,
     )
 }

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

@@ -1,5 +1,6 @@
 package com.terning.core.designsystem.component.topappbar
 
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -21,6 +22,7 @@ import com.terning.core.designsystem.theme.White
 @Composable
 fun TerningBasicTopAppBar(
     title: String = "",
+    modifier: Modifier,
     showBackButton: Boolean = false,
     actions: List<@Composable () -> Unit> = emptyList(),
     onBackButtonClick: () -> Unit = {},
@@ -35,14 +37,17 @@ fun TerningBasicTopAppBar(
             )
 
         },
+        modifier = modifier,
         navigationIcon = {
             if (showBackButton) {
-                IconButton(onClick = {
-                    onBackButtonClick.invoke()
-                }) {
+                IconButton(
+                    onClick = {
+                        onBackButtonClick.invoke()
+                    }) {
                     Icon(
                         painter = painterResource(id = R.drawable.ic_back),
-                        contentDescription = stringResource(id = R.string.ic_back)
+                        contentDescription = stringResource(id = R.string.ic_back),
+                        modifier = Modifier.padding(start = 8.dp)
                     )
                 }
             } else {
@@ -55,6 +60,6 @@ fun TerningBasicTopAppBar(
             }
         },
         colors = TopAppBarDefaults.topAppBarColors(White),
-        modifier = Modifier.padding(horizontal = 16.dp)
+        windowInsets = WindowInsets(0, 0, 0, 0),
     )
 }

feature/src/main/java/com/terning/feature/home/HomeRoute.kt

@@ -2,9 +2,12 @@ package com.terning.feature.home
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import com.terning.core.designsystem.component.topappbar.LogoTopAppBar
 
 @Composable
 fun HomeRoute() {
@@ -13,7 +16,18 @@ fun HomeRoute() {
 
 @Composable
 fun HomeScreen() {
-    Column(modifier = Modifier.fillMaxSize()) {
-        Text(text = "홈 스크린")
+    Scaffold(
+        modifier = Modifier,
+        topBar = {
+            LogoTopAppBar()
+        }
+    ) { paddingValues ->
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(paddingValues)
+        ) {
+            Text(text = "홈 스크린")
+        }
     }
 }

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

@@ -13,7 +13,6 @@ import com.terning.feature.calendar.navigation.navigateCalendar
 import com.terning.feature.home.navigation.navigateHome
 import com.terning.feature.mypage.navigation.navigateMyPage
 import com.terning.feature.onboarding.signin.navigation.SignIn
-import com.terning.feature.search.navigation.Search
 import com.terning.feature.search.navigation.navigateSearch
 
 class MainNavigator(

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

@@ -16,9 +16,6 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.navigation.compose.NavHost
-import com.terning.core.designsystem.component.topappbar.LogoTopAppBar
-import com.terning.core.designsystem.component.topappbar.MyPageTopAppBar
-import com.terning.core.designsystem.component.topappbar.TerningBasicTopAppBar
 import com.terning.core.designsystem.theme.Grey300
 import com.terning.core.designsystem.theme.TerningMain
 import com.terning.core.designsystem.theme.White
@@ -29,21 +26,13 @@ import com.terning.feature.mypage.navigation.myPageNavGraph
 import com.terning.feature.onboarding.signin.navigation.signInNavGraph
 import com.terning.feature.onboarding.signup.navigation.signUpNavGraph
 import com.terning.feature.search.navigation.searchNavGraph
+import com.terning.feature.searchprocess.navigation.searchProcessNavGraph
 
 @Composable
 fun MainScreen(
     navigator: MainNavigator = rememberMainNavigator(),
 ) {
     Scaffold(
-        topBar = {
-            when (navigator.currentTab) {
-                MainTab.HOME -> LogoTopAppBar()
-                MainTab.CALENDAR -> TerningBasicTopAppBar()
-                MainTab.SEARCH -> LogoTopAppBar()
-                MainTab.MY_PAGE -> MyPageTopAppBar()
-                null -> TerningBasicTopAppBar()
-            }
-        },
         bottomBar = {
             MainBottomBar(
                 isVisible = navigator.showBottomBar(),
@@ -64,29 +53,16 @@ fun MainScreen(
             ) {
                 homeNavGraph()
                 calendarNavGraph()
-                searchNavGraph()
+                searchNavGraph(navHostController = navigator.navController)
                 myPageNavGraph()
                 signInNavGraph(navHostController = navigator.navController)
                 signUpNavGraph()
+                searchProcessNavGraph(navHostController = navigator.navController)
             }
         }
     }
 }
 
-
-@Composable
-private fun MainTopBar(
-    isVisible: Boolean,
-    tabs: List<MainTab>,
-    currentTab: MainTab?,
-    onTabSelected: (MainTab) -> Unit,
-) {
-    AnimatedVisibility(
-        visible = isVisible,
-    ) {
-    }
-}
-
 @Composable
 private fun MainBottomBar(
     isVisible: Boolean,

feature/src/main/java/com/terning/feature/mypage/MyPageRoute.kt

@@ -4,16 +4,17 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalLifecycleOwner
-import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.flowWithLifecycle
+import com.terning.core.designsystem.component.topappbar.MyPageTopAppBar
 import com.terning.core.extension.toast
 import com.terning.core.state.UiState
 import com.terning.domain.entity.response.MockResponseModel
@@ -55,17 +56,24 @@ fun MyPageRoute(
 fun MyPageScreen(
     mockList: List<MockResponseModel>,
 ) {
-    LazyColumn(
-        modifier = Modifier
-            .fillMaxSize()
-            .padding(20.dp)
-    ) {
-        items(mockList) { friend ->
-            MockItem(
-                name = friend.firstName,
-                profileImage = friend.avatar,
-                email = friend.email
-            )
+    Scaffold(
+        modifier = Modifier,
+        topBar = {
+            MyPageTopAppBar(modifier = Modifier)
+        }
+    ) { paddingValues ->
+        LazyColumn(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(paddingValues)
+        ) {
+            items(mockList) { friend ->
+                MockItem(
+                    name = friend.firstName,
+                    profileImage = friend.avatar,
+                    email = friend.email
+                )
+            }
         }
     }
 }