From 09bc9c9113accf5444af170d8659d9fe6d2812bd Mon Sep 17 00:00:00 2001
From: Moonsu Kang <rkdms4971@naver.com>
Date: Sat, 11 Jan 2025 21:45:15 +0900
Subject: [PATCH] =?UTF-8?q?[UI/#23]=20=EC=9D=B4=EB=A6=84=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20UI=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kms/onboarding/OnboardingNameScreen.kt    | 86 +++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 feature/onboarding/src/main/java/com/kms/onboarding/OnboardingNameScreen.kt

diff --git a/feature/onboarding/src/main/java/com/kms/onboarding/OnboardingNameScreen.kt b/feature/onboarding/src/main/java/com/kms/onboarding/OnboardingNameScreen.kt
new file mode 100644
index 0000000..92ed7f1
--- /dev/null
+++ b/feature/onboarding/src/main/java/com/kms/onboarding/OnboardingNameScreen.kt
@@ -0,0 +1,86 @@
+package com.kms.onboarding
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import com.yapp.designsystem.theme.OrbitTheme
+import com.yapp.ui.component.textfield.OrbitTextField
+import com.yapp.ui.extensions.customClickable
+import com.yapp.ui.utils.heightForScreenPercentage
+import com.yapp.ui.utils.paddingForScreenPercentage
+import feature.onboarding.R
+
+@Composable
+fun OnboardingNameScreen(
+    state: OnboardingContract.State,
+    currentStep: Int,
+    totalSteps: Int,
+    onNextClick: () -> Unit,
+    onBackClick: () -> Unit,
+    onTextChange: (String) -> Unit,
+) {
+    val focusManager = LocalFocusManager.current
+
+    OnboardingScreen(
+        currentStep = currentStep,
+        totalSteps = totalSteps,
+        isButtonEnabled = state.isButtonEnabled,
+        onNextClick = onNextClick,
+        onBackClick = onBackClick,
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .customClickable(
+                    rippleEnabled = false,
+                    onClick = { focusManager.clearFocus() },
+                ),
+        ) {
+            Spacer(modifier = Modifier.heightForScreenPercentage(0.05f))
+            Text(
+                text = stringResource(id = R.string.onboarding_step5_text_title),
+                style = OrbitTheme.typography.heading1SemiBold,
+                color = OrbitTheme.colors.white,
+                modifier = Modifier.fillMaxWidth(),
+                textAlign = TextAlign.Center,
+            )
+            OrbitTextField(
+                text = state.textFieldValue,
+                onTextChange = { value ->
+                    onTextChange(value)
+                },
+                hint = "이름 입력",
+                showWarning = state.showWarning,
+                warningMessage = stringResource(id = R.string.onboarding_step5_textfield_warning),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .paddingForScreenPercentage(horizontalPercentage = 0.192f, verticalPercentage = 0.086f),
+            )
+        }
+    }
+}
+
+@Composable
+@Preview
+fun PreviewOnboardingNameScreen() {
+    OnboardingNameScreen(
+        state = OnboardingContract.State(
+            textFieldValue = "김민수",
+            isButtonEnabled = true,
+            showWarning = false,
+        ),
+        currentStep = 1,
+        totalSteps = 5,
+        onNextClick = {},
+        onBackClick = {},
+        onTextChange = {},
+    )
+}