[refactor]: WarningTextField 컴포넌트 수정 , 닉네임 설정 페이지 적용(#37)

Author: JJUYAAA

app/src/main/java/com/texthip/thip/ui/common/forms/WarningTextField.kt

@@ -39,8 +39,9 @@ fun WarningTextField(
     showWarning: Boolean = false,
     showLimit: Boolean = true,
     limit: Int = 10,
-    showIcon: Boolean = false
-    ) {
+    showIcon: Boolean = false,
+    containerColor: Color = colors.Black
+) {
     //var text by rememberSaveable { mutableStateOf("") }
     val myStyle = typography.menu_r400_s14_h24.copy(lineHeight = 14.sp)
 
@@ -72,8 +73,8 @@ fun WarningTextField(
                     focusedTextColor = colors.White,
                     focusedIndicatorColor = if (showWarning) colors.Red else Color.Transparent,
                     unfocusedIndicatorColor = if (showWarning) colors.Red else Color.Transparent,
-                    focusedContainerColor = colors.Black,
-                    unfocusedContainerColor = colors.Black,
+                    focusedContainerColor = containerColor,
+                    unfocusedContainerColor = containerColor,
                     cursorColor = colors.NeonGreen
                 ),
                 trailingIcon = {

app/src/main/java/com/texthip/thip/ui/signin/screen/SigninNicknameScreen.kt

@@ -9,30 +9,59 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 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.texthip.thip.R
 import com.texthip.thip.ui.common.forms.FormTextFieldDefault
+import com.texthip.thip.ui.common.forms.WarningTextField
 import com.texthip.thip.ui.common.topappbar.InputTopAppBar
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
 
 @Composable
 fun SigninNicknameScreen() {
+    var nickname by rememberSaveable { mutableStateOf("") }
+    var showWarning by remember { mutableStateOf(false) }
+    var warningMessageResId by remember { mutableStateOf<Int?>(null) }
+    val isRightButtonEnabled by remember {derivedStateOf {nickname.isNotBlank()}} // 닉네임 공백 아닐때 버튼 활성화
+    val coroutineScope = rememberCoroutineScope()
+
     Column(
         Modifier
             .background(colors.Black)
             .fillMaxSize()
     ) {
         InputTopAppBar(
             title = stringResource(R.string.settings_1),
-            isRightButtonEnabled = false,
+            isRightButtonEnabled = isRightButtonEnabled,
             rightButtonName = stringResource(R.string.next),
             isLeftIconVisible = false,
             onLeftClick = {},
-            onRightClick = {}
+            onRightClick = {
+                //TODO 서버 연동시 로직 변경 필요
+                coroutineScope.launch {
+                    delay(500) // 서버 응답 시뮬레이션
+                    if (nickname == "test") {
+                        showWarning = true
+                        warningMessageResId = R.string.nickname_warning
+                    } else {
+                        showWarning = false
+                        warningMessageResId = null
+                        // 다음 페이지로 이동
+                    }
+                }
+            }
         )
         Spacer(modifier = Modifier.height(40.dp))
         Column(
@@ -48,13 +77,19 @@ fun SigninNicknameScreen() {
                     .fillMaxWidth()
                     .padding(bottom = 12.dp)
             )
-            //TODO 컴포넌트 수정필요 -> 경고 메시지 처리
-            FormTextFieldDefault(
+            WarningTextField(
+                containerColor = colors.DarkGrey02,
+                text = nickname,
+                onTextChange = {
+                    nickname = it
+                    showWarning = false // 입력 중에는 경고 숨기기
+                },
                 hint = stringResource(R.string.nickname_condition),
+                showWarning = showWarning,
+                showIcon = false,
                 showLimit = true,
                 limit = 10,
-                showIcon = false,
-                containerColor= colors.DarkGrey02
+                warningMessage = warningMessageResId?.let { stringResource(it) } ?: ""
             )
         }
     }

app/src/main/res/values/strings.xml

@@ -168,11 +168,13 @@
     <string name="settings_1">설정 1/2</string>
     <string name="settings_2">설정 2/2</string>
     <string name="nickname">닉네임 (필수)</string>
+    <string name="nickname_warning">이미 사용중인 닉네임입니다.</string>
     <string name="nickname_condition">한글/영어/숫자로 구성</string>
     <string name="hello_user">안녕하세요, %1$s님</string>
     <string name="signin_done">이제 Thip에서 활동할 준비를 모두 마쳤어요!</string>
     <string name="start_thip">지금 바로 Thip 시작하기</string>
 
+
     <!--    feed   -->
     <string name="my_subscription_list">내 구독 리스트</string>
     <string name="whole_num">전체 %d</string>