[UI/#11] 탐색 뷰 / 탐색 기본 화면 구현

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

@@ -4,6 +4,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.SolidColor
 import com.terning.core.designsystem.theme.Grey300
 import com.terning.core.designsystem.theme.Grey400
+import com.terning.core.designsystem.theme.TerningMain
 import com.terning.core.designsystem.theme.TerningTheme
 
 @Composable
@@ -12,18 +13,20 @@ fun SearchTextField(
     onValueChange: (String) -> Unit,
     hint: String,
     leftIcon: Int,
+    readOnly: Boolean = false,
 ) {
     TerningBasicTextField(
         value = text,
         onValueChange = onValueChange,
         textStyle = TerningTheme.typography.button3,
         textColor = Grey400,
         cursorBrush = SolidColor(Grey300),
-        drawLineColor = Grey300,
+        drawLineColor = TerningMain,
         strokeWidth = 2f,
         hint = hint,
         hintColor = Grey300,
         leftIcon = leftIcon,
-        leftIconColor = Grey400,
+        leftIconColor = TerningMain,
+        readOnly = readOnly,
     )
 }

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

@@ -37,7 +37,6 @@ import com.terning.core.designsystem.theme.White
 fun TerningBasicTextField(
     value: String,
     onValueChange: (String) -> Unit,
-    readOnly: Boolean = false,
     textStyle: TextStyle,
     textColor: Color,
     hintColor: Color,
@@ -52,6 +51,7 @@ fun TerningBasicTextField(
     helperMessage: String = "",
     helperIcon: Int? = null,
     helperColor: Color = TerningMain,
+    readOnly: Boolean = false,
 ) {
     val keyboardController = LocalSoftwareKeyboardController.current
     val focusManager = LocalFocusManager.current
@@ -62,7 +62,6 @@ fun TerningBasicTextField(
         onValueChange = onValueChange,
         singleLine = true,
         maxLines = 1,
-        readOnly = readOnly,
         keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
         keyboardActions = KeyboardActions(
             onDone = {
@@ -124,7 +123,9 @@ fun TerningBasicTextField(
                     )
                 }
             }
-        })
+        },
+        readOnly = readOnly,
+    )
 
     Row(
         verticalAlignment = Alignment.CenterVertically,

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

@@ -1,15 +1,18 @@
 package com.terning.core.designsystem.component.topappbar
 
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
+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 androidx.compose.ui.unit.dp
 import com.terning.core.R
 import com.terning.core.designsystem.theme.TerningTheme
 import com.terning.core.designsystem.theme.White
@@ -51,6 +54,7 @@ fun TerningBasicTopAppBar(
                 action()
             }
         },
-        colors = TopAppBarDefaults.topAppBarColors(White)
+        colors = TopAppBarDefaults.topAppBarColors(White),
+        modifier = Modifier.padding(horizontal = 16.dp)
     )
 }

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

@@ -13,6 +13,7 @@ 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/search/SearchRoute.kt

@@ -1,8 +1,12 @@
 package com.terning.feature.search
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -11,12 +15,14 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
-import com.terning.core.designsystem.component.textfield.NameTextField
 import com.terning.core.designsystem.component.textfield.SearchTextField
-import com.terning.core.designsystem.theme.Grey400
-import com.terning.core.designsystem.theme.TerningMain
-import com.terning.core.designsystem.theme.WarningRed
+import com.terning.core.designsystem.theme.Black
+import com.terning.core.designsystem.theme.Grey100
+import com.terning.core.designsystem.theme.TerningTheme
 import com.terning.feature.R
+import com.terning.feature.search.component.ImageSlider
+import com.terning.feature.search.component.InternListType
+import com.terning.feature.search.component.SearchInternList
 
 @Composable
 fun SearchRoute() {
@@ -26,61 +32,55 @@ fun SearchRoute() {
 @Composable
 fun SearchScreen() {
     var text by remember { mutableStateOf("") }
-
-    // TODO 프로필 스크린 TextField로, 삭제될 코드입니다
-    var helperMessage by remember { mutableStateOf(R.string.profile_text_field_helper) }
-    var helperIcon by remember { mutableStateOf<Int?>(null) }
-    var helperColor by remember { mutableStateOf(Grey400) }
-    val specialCharacterPattern = Regex("[!@#\$%^&*(),.?\":{}|<>\\[\\]\\\\/]")
-
-    // TODO 프로필 스크린 TextField로, 삭제될 코드입니다
-    fun updateHelper(text: String) {
-        helperMessage = when {
-            text.isEmpty() -> R.string.profile_text_field_helper
-            specialCharacterPattern.containsMatchIn(text) -> R.string.profile_text_field_warning
-            text.length <= 12 -> R.string.profile_text_field_check
-            else -> R.string.profile_text_field_helper
-        }
-        helperIcon = when {
-            text.isEmpty() -> null
-            specialCharacterPattern.containsMatchIn(text) -> R.drawable.ic_warning
-            text.length <= 12 -> R.drawable.ic_check
-            else -> null
-        }
-        helperColor = when {
-            text.isEmpty() -> Grey400
-            specialCharacterPattern.containsMatchIn(text) -> WarningRed
-            text.length <= 12 -> TerningMain
-            else -> Grey400
-        }
-    }
+    val images = listOf(
+        R.drawable.ic_nav_search,
+        R.drawable.ic_check,
+        R.drawable.ic_nav_my_page,
+    )
 
     Column(
         modifier = Modifier
             .fillMaxWidth()
-            .padding(horizontal = 16.dp)
     ) {
+        Box(
+            modifier = Modifier.padding(
+                horizontal = 24.dp,
+                vertical = 16.dp
+            )
+        ) {
+            SearchTextField(
+                text = text,
+                onValueChange = { newText ->
+                    text = newText
+                },
+                hint = stringResource(R.string.search_text_field_hint),
+                leftIcon = R.drawable.ic_nav_search,
+                readOnly = true,
+            )
+        }
 
-        SearchTextField(
-            text = text,
-            onValueChange = { newText ->
-                text = newText
-            },
-            hint = stringResource(R.string.search_text_field_hint),
-            leftIcon = R.drawable.ic_nav_search
+        ImageSlider(
+            images = images
         )
 
-        // TODO 프로필 스크린 TextField로, 삭제될 코드입니다
-        NameTextField(
-            text = text,
-            onValueChange = { newText ->
-                text = newText
-                updateHelper(newText)
-            },
-            hint = stringResource(R.string.profile_text_field_hint),
-            helperMessage = stringResource(helperMessage),
-            helperIcon = helperIcon,
-            helperColor = helperColor
+        Spacer(modifier = Modifier.padding(8.dp))
+
+        Text(
+            text = stringResource(id = R.string.search_today_popular),
+            modifier = Modifier.padding(
+                horizontal = 24.dp,
+                vertical = 4.dp
+            ),
+            style = TerningTheme.typography.title1,
+            color = Black
         )
+
+        SearchInternList(type = InternListType.VIEW)
+        HorizontalDivider(
+            thickness = 4.dp,
+            modifier = Modifier.padding(vertical = 8.dp),
+            color = Grey100,
+        )
+        SearchInternList(type = InternListType.SCRAP)
     }
-}
+}

feature/src/main/java/com/terning/feature/search/component/DotsIndicator.kt

@@ -0,0 +1,29 @@
+package com.terning.feature.search.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun DotsIndicator(
+    modifier: Modifier = Modifier,
+    pageCount: Int,
+    currentPage: Int,
+) {
+    Row(
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = Modifier.padding(8.dp)
+    ) {
+        repeat(pageCount) { index ->
+            IndicatorDots(
+                isSelected = index == currentPage,
+                modifier = modifier
+            )
+        }
+    }
+}

feature/src/main/java/com/terning/feature/search/component/ImageSlider.kt

@@ -0,0 +1,72 @@
+package com.terning.feature.search.component
+
+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.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.material3.Card
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import com.terning.core.designsystem.theme.Grey200
+import kotlinx.coroutines.delay
+
+@Composable
+fun ImageSlider(
+    modifier: Modifier = Modifier,
+    images: List<Int>,
+) {
+    val pagerState = rememberPagerState(pageCount = { images.size })
+
+    LaunchedEffect(Unit) {
+        while (true) {
+            delay(3000)
+            val nextPage = (pagerState.currentPage + 1) % pagerState.pageCount
+            pagerState.scrollToPage(nextPage)
+        }
+    }
+    Column(
+        modifier
+            .fillMaxWidth()
+            .background(Grey200),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Box(
+            modifier = modifier
+                .wrapContentSize(),
+            contentAlignment = Alignment.BottomCenter
+        ) {
+            HorizontalPager(
+                state = pagerState,
+                modifier = modifier.wrapContentSize()
+            ) { currentPage ->
+                Card(
+                    modifier
+                        .wrapContentSize()
+                ) {
+                    Image(
+                        painter = painterResource(id = images[currentPage]),
+                        contentDescription = null,
+                        modifier = modifier
+                            .fillMaxWidth()
+                            .height(112.dp)
+                            .padding(16.dp)
+                    )
+                }
+            }
+            DotsIndicator(
+                pageCount = images.size,
+                currentPage = pagerState.currentPage
+            )
+        }
+    }
+}

feature/src/main/java/com/terning/feature/search/component/IndicatorDots.kt

@@ -0,0 +1,26 @@
+package com.terning.feature.search.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
+import com.terning.core.designsystem.theme.TerningMain
+import com.terning.core.designsystem.theme.White
+
+@Composable
+fun IndicatorDots(
+    isSelected: Boolean, modifier: Modifier,
+) {
+    Box(
+        modifier = modifier
+            .padding(2.dp)
+            .clip(CircleShape)
+            .size(6.dp)
+            .background(if (isSelected) TerningMain else White)
+    )
+}

feature/src/main/java/com/terning/feature/search/component/InternListType.kt

@@ -0,0 +1,6 @@
+package com.terning.feature.search.component
+
+enum class InternListType(val type: String) {
+    VIEW("view"),
+    SCRAP("scrap");
+}