[ADD/#19] TerningTextField

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

@@ -0,0 +1,37 @@
+package com.terning.core.designsystem.textfield
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
+import com.terning.core.designsystem.theme.Black
+import com.terning.core.designsystem.theme.Grey300
+import com.terning.core.designsystem.theme.Grey400
+import com.terning.core.designsystem.theme.Grey500
+import com.terning.core.designsystem.theme.TerningMain
+import com.terning.core.designsystem.theme.TerningTypography
+
+@Composable
+fun NameTextField(
+    text: String,
+    onValueChange: (String) -> Unit,
+    hint: String,
+    helperMessage: String,
+    helperIcon: Int? = null,
+    helperColor: Color = TerningMain,
+) {
+    TerningTextField(
+        value = text,
+        onValueChange = onValueChange,
+        textStyle = TerningTypography().detail1,
+        textColor = Black,
+        drawLineColor = Grey500,
+        cursorBrush = SolidColor(Grey400),
+        hint = hint,
+        hintColor = Grey300,
+        showTextLength = true,
+        maxTextLength = 12,
+        helperMessage = helperMessage,
+        helperIcon = helperIcon,
+        helperColor = helperColor
+    )
+}

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

@@ -0,0 +1,29 @@
+package com.terning.core.designsystem.textfield
+
+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.TerningTypography
+
+@Composable
+fun SearchTextField(
+    text: String,
+    onValueChange: (String) -> Unit,
+    hint: String,
+    leftIcon: Int,
+) {
+    TerningTextField(
+        value = text,
+        onValueChange = onValueChange,
+        textStyle = TerningTypography().button3,
+        textColor = Grey400,
+        cursorBrush = SolidColor(Grey300),
+        drawLineColor = Grey300,
+        strokeWidth = 2f,
+        hint = hint,
+        hintColor = Grey300,
+        leftIcon = leftIcon,
+        leftIconColor = Grey400,
+    )
+}

core/src/main/java/com/terning/core/designsystem/textfield/TerningTextField.kt

@@ -0,0 +1,138 @@
+package com.terning.core.designsystem.textfield
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.unit.dp
+import com.terning.core.designsystem.theme.Grey300
+import com.terning.core.designsystem.theme.TerningMain
+import com.terning.core.designsystem.theme.TerningTypography
+import com.terning.core.designsystem.theme.White
+
+@Composable
+fun TerningTextField(
+    value: String,
+    onValueChange: (String) -> Unit,
+    textStyle: TextStyle,
+    textColor: Color = TerningMain,
+    cursorBrush: Brush = SolidColor(TerningMain),
+    hint: String = "",
+    hintColor: Color = TerningMain,
+    strokeWidth: Float = 1f,
+    drawLineColor: Color,
+    leftIcon: Int? = null,
+    leftIconColor: Color = TerningMain,
+    maxTextLength: Int? = null,
+    showTextLength: Boolean = false,
+    helperMessage: String = "",
+    helperIcon: Int? = null,
+    helperColor: Color = TerningMain,
+) {
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val focusManager = LocalFocusManager.current
+
+    BasicTextField(
+        value = value,
+        onValueChange = onValueChange,
+        singleLine = true,
+        maxLines = 1,
+        keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
+        keyboardActions = KeyboardActions(
+            onDone = {
+                keyboardController?.hide()
+                focusManager.clearFocus()
+            }),
+
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(White)
+            .drawWithContent {
+                val canvasWidth = size.width
+                val canvasHeight = size.height
+
+                drawContent()
+                drawLine(
+                    color = drawLineColor,
+                    start = Offset(x = 0f, y = canvasHeight),
+                    end = Offset(x = canvasWidth, y = canvasHeight),
+                    strokeWidth = strokeWidth.dp.toPx(),
+                )
+            },
+
+        textStyle = textStyle.copy(color = textColor),
+        cursorBrush = cursorBrush,
+
+        decorationBox = { innerTextField ->
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(12.dp),
+                modifier = Modifier.padding(vertical = 8.dp)
+            ) {
+                leftIcon?.let {
+                    Icon(
+                        painter = painterResource(id = it),
+                        contentDescription = null,
+                        tint = leftIconColor,
+                    )
+                }
+                Box(modifier = Modifier.weight(1f)) {
+                    if (value.isEmpty()) {
+                        Text(
+                            text = hint,
+                            style = textStyle,
+                            color = hintColor
+                        )
+                    }
+                    innerTextField()
+                }
+                if (showTextLength && maxTextLength != null) {
+                    Text(
+                        text = "${value.length}/$maxTextLength",
+                        style = TerningTypography().button3,
+                        color = Grey300,
+                    )
+                }
+            }
+        }
+    )
+
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(4.dp),
+        modifier = Modifier.padding(vertical = 8.dp)
+    ) {
+        helperIcon?.let {
+            Icon(
+                painter = painterResource(id = it),
+                contentDescription = null,
+                tint = helperColor,
+            )
+        }
+        Text(
+            text = helperMessage,
+            style = TerningTypography().detail3,
+            color = helperColor,
+        )
+    }
+}

feature/src/main/AndroidManifest.xml

@@ -7,6 +7,7 @@
             android:exported="true"
             android:label="@string/app_name"
             android:screenOrientation="portrait"
+            android:windowSoftInputMode="adjustResize"
             android:theme="@style/Theme.TerningAndroid">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />

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

@@ -12,7 +12,7 @@ import androidx.navigation.navOptions
 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(
@@ -22,7 +22,7 @@ class MainNavigator(
         @Composable get() = navController
             .currentBackStackEntryAsState().value?.destination
 
-    val startDestination = SignIn
+    val startDestination = Search
 
     val currentTab: MainTab?
         @Composable get() = MainTab.find { tab ->

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

@@ -21,7 +21,6 @@ import androidx.navigation.compose.NavHost
 import com.terning.core.designsystem.theme.Grey300
 import com.terning.core.designsystem.theme.TerningMain
 import com.terning.core.designsystem.theme.White
-import com.terning.core.designsystem.topappbar.BackButtonTopAppBar
 import com.terning.core.designsystem.topappbar.LogoTopAppBar
 import com.terning.core.designsystem.topappbar.MyPageTopAppBar
 import com.terning.core.designsystem.topappbar.TerningTopAppBar
@@ -42,10 +41,7 @@ fun MainScreen(
         topBar = {
             when (navigator.currentTab) {
                 MainTab.HOME -> LogoTopAppBar()
-                MainTab.CALENDAR -> BackButtonTopAppBar(
-                    title = "dkssud",
-                    onBackButtonClick = { navigator.navigateUp() })
-
+                MainTab.CALENDAR -> TerningTopAppBar()
                 MainTab.SEARCH -> LogoTopAppBar()
                 MainTab.MY_PAGE -> MyPageTopAppBar()
                 null -> TerningTopAppBar()
@@ -80,6 +76,21 @@ fun MainScreen(
     }
 }
 
+
+
+@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/search/SearchRoute.kt

@@ -1,25 +1,89 @@
 package com.terning.feature.search
 
+import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import com.terning.core.designsystem.topappbar.LogoTopAppBar
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.terning.core.designsystem.textfield.NameTextField
+import com.terning.core.designsystem.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.feature.R
 
 @Composable
 fun SearchRoute() {
     SearchScreen()
 }
 
 @Composable
-fun SearchScreen(modifier: Modifier = Modifier) {
+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
+        }
+    }
+
     Column(
         modifier = Modifier
             .fillMaxWidth()
+            .padding(horizontal = 16.dp)
     ) {
-        Text(text = "탐색 스크린")
+
+        SearchTextField(
+            text = text,
+            onValueChange = { newText ->
+                text = newText
+            },
+            hint = stringResource(R.string.search_text_field_hint),
+            leftIcon = R.drawable.ic_nav_search
+        )
+
+        // 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
+        )
     }
 }

feature/src/main/res/drawable/ic_check.xml

@@ -0,0 +1,18 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="12dp"
+    android:height="12dp"
+    android:viewportWidth="12"
+    android:viewportHeight="12">
+  <path
+      android:strokeWidth="1"
+      android:pathData="M6,0.5L6,0.5A5.5,5.5 0,0 1,11.5 6L11.5,6A5.5,5.5 0,0 1,6 11.5L6,11.5A5.5,5.5 0,0 1,0.5 6L0.5,6A5.5,5.5 0,0 1,6 0.5z"
+      android:fillColor="#00000000"
+      android:strokeColor="#1EAC61"/>
+  <path
+      android:pathData="M9,4L4.875,8.125L3,6.25"
+      android:strokeLineJoin="round"
+      android:strokeWidth="0.75"
+      android:fillColor="#00000000"
+      android:strokeColor="#1EAC61"
+      android:strokeLineCap="round"/>
+</vector>