[feature/#841] make AdjustSentence UI

sopt-makers · Sep 17, 2024 · 7d98a63 · 7d98a63
1 parent bf9998e
commit 7d98a63
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 2 deletions.
diff --git a/feature/mypage/src/main/java/org/sopt/official/feature/mypage/component/MyPageTextField.kt b/feature/mypage/src/main/java/org/sopt/official/feature/mypage/component/MyPageTextField.kt
@@ -0,0 +1,62 @@
+package org.sopt.official.feature.mypage.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+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 androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.graphics.Color.Companion.Transparent
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import org.sopt.official.designsystem.Black80
+import org.sopt.official.designsystem.Gray60
+import org.sopt.official.designsystem.SoptTheme
+import org.sopt.official.designsystem.White
+import org.sopt.official.feature.mypage.R
+
+@Composable
+fun MyPageTextField(
+    modifier: Modifier = Modifier
+) {
+    var text by remember { mutableStateOf("") }
+    var isFocused by remember { mutableStateOf(false) }
+
+    BasicTextField(
+        value = text,
+        onValueChange = { newText ->
+            text = newText
+        },
+        modifier = modifier
+            .fillMaxWidth()
+            .background(color = Black80, shape = RoundedCornerShape(12.dp))
+            .border(
+                width = 1.dp,
+                color = if (isFocused) White else Transparent,
+                shape = RoundedCornerShape(12.dp)
+            )
+            .onFocusChanged { focusState ->
+                isFocused = focusState.isFocused
+            }
+            .padding(horizontal = 20.dp)
+            .padding(vertical = 16.dp),
+        textStyle = SoptTheme.typography.body18M.copy(color = White),
+        decorationBox = { innerTextField ->
+            if (text.isEmpty())
+                Text(
+                    text = stringResource(id = R.string.adjust_sentence_hint),
+                    color = Gray60,
+                    style = SoptTheme.typography.body16M
+                )
+            innerTextField()
+        }
+    )
+}
diff --git a/...src/main/java/org/sopt/official/feature/mypage/soptamp/sentence/AdjustSentenceActivity.kt b/...src/main/java/org/sopt/official/feature/mypage/soptamp/sentence/AdjustSentenceActivity.kt
@@ -32,7 +32,9 @@ import androidx.activity.viewModels
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -55,6 +57,7 @@ import org.sopt.official.common.util.viewBinding
 import org.sopt.official.designsystem.SoptTheme
 import org.sopt.official.feature.mypage.R
 import org.sopt.official.feature.mypage.component.MyPageButton
+import org.sopt.official.feature.mypage.component.MyPageTextField
 import org.sopt.official.feature.mypage.databinding.ActivityAdjustSentenceBinding
 
 @AndroidEntryPoint
@@ -93,13 +96,17 @@ class AdjustSentenceActivity : AppCompatActivity() {
                                 actionIconContentColor = SoptTheme.colors.primary
                             )
                         )
-                    }) { innerPadding ->
+                    }
+                ) { innerPadding ->
                     Column(
                         modifier = Modifier
                             .fillMaxSize()
                             .padding(innerPadding)
                             .background(SoptTheme.colors.background)
                     ) {
+                        Spacer(modifier = Modifier.height(16.dp))
+                        MyPageTextField(modifier = Modifier.padding(horizontal = 20.dp))
+                        Spacer(modifier = Modifier.height(52.dp))
                         MyPageButton(
                             paddingVertical = 16.dp,
                             style = SoptTheme.typography.body14R,
@@ -115,7 +122,6 @@ class AdjustSentenceActivity : AppCompatActivity() {
         }
     }
 
-
     private fun initView() {
         viewModel.finish
             .flowWithLifecycle(lifecycle)

diff --git a/feature/mypage/src/main/res/values/strings.xml b/feature/mypage/src/main/res/values/strings.xml
@@ -63,4 +63,5 @@
     <!--    한 마디 편집하기   -->
     <string name="toolbar_adjust_sentence">한 마디 편집</string>
     <string name="adjust_sentence_button">저장</string>
+    <string name="adjust_sentence_hint">설정된 한 마디가 없습니다.</string>
 </resources>