[UI/#13] onboarding profile setting

app/src/main/AndroidManifest.xml

@@ -41,6 +41,10 @@
             </intent-filter>
         </activity>
 
+        <activity
+            android:name="com.going.presentation.onboarding.OnboardingProfileSettingActivity"
+            android:exported="true" />
+
     </application>
 
 </manifest>

core-ui/src/main/java/com/going/ui/extension/ContextExt.kt

@@ -32,4 +32,5 @@ fun Context.drawableOf(@DrawableRes resId: Int) = ContextCompat.getDrawable(this
 fun Context.hideKeyboard(view: View) {
     val inputMethodManager = getSystemService(Activity.INPUT_METHOD_SERVICE) as InputMethodManager
     inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)
-}
+    view.clearFocus()
+}

presentation/src/main/java/com/going/presentation/onboarding/OnboardingProfileSettingActivity.kt

@@ -0,0 +1,72 @@
+package com.going.presentation.onboarding
+
+import android.os.Bundle
+import android.view.inputmethod.EditorInfo
+import androidx.activity.viewModels
+import androidx.lifecycle.flowWithLifecycle
+import androidx.lifecycle.lifecycleScope
+import com.going.presentation.R
+import com.going.presentation.databinding.ActivityOnboardingProfileSettingBinding
+import com.going.ui.base.BaseActivity
+import kotlinx.coroutines.flow.launchIn
+import kotlinx.coroutines.flow.onEach
+
+class OnboardingProfileSettingActivity :
+    BaseActivity<ActivityOnboardingProfileSettingBinding>(R.layout.activity_onboarding_profile_setting) {
+    private val viewModel by viewModels<OnboardingProfileSettingViewModel>()
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+
+        initBindingViewModel()
+        initOnLineInfoEditorActionListener()
+        observeIsProfileAvailable()
+        observeTextLength()
+    }
+
+    private fun initBindingViewModel() {
+        binding.viewModel = viewModel
+    }
+
+    private fun initOnLineInfoEditorActionListener() {
+        binding.etvOnboardingProfileSettingOnLineInfo.setOnEditorActionListener { view, actionId, _ ->
+            if (actionId == EditorInfo.IME_ACTION_DONE) view.clearFocus()
+            false
+        }
+    }
+
+    private fun observeIsProfileAvailable() {
+        viewModel.isMoveScreenAvailable.flowWithLifecycle(lifecycle).onEach { isEnd ->
+            if (isEnd) moveSplash()
+        }.launchIn(lifecycleScope)
+    }
+
+    // 커스텀 글자수 제한 함수
+    private fun observeTextLength() {
+        viewModel.nowNameLength.observe(this) { length ->
+            val maxNameLength = viewModel.getMaxNameLen()
+
+            if (length > maxNameLength) {
+                binding.etvOnboardingProfileSettingName.apply {
+                    setText(text?.subSequence(0, maxNameLength))
+                    setSelection(maxNameLength)
+                }
+            }
+        }
+
+        viewModel.nowInfoLength.observe(this) { length ->
+            val maxInfoLength = viewModel.getMaxInfoLen()
+
+            if (length > maxInfoLength) {
+                binding.etvOnboardingProfileSettingOnLineInfo.apply {
+                    setText(text?.subSequence(0, maxInfoLength))
+                    setSelection(maxInfoLength)
+                }
+            }
+        }
+    }
+
+    private fun moveSplash() {
+        // 스플래시로 이동
+    }
+}

presentation/src/main/java/com/going/presentation/onboarding/OnboardingProfileSettingViewModel.kt

@@ -0,0 +1,59 @@
+package com.going.presentation.onboarding
+
+import androidx.lifecycle.MutableLiveData
+import androidx.lifecycle.ViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import java.text.BreakIterator
+
+class OnboardingProfileSettingViewModel : ViewModel() {
+    val name = MutableLiveData(String())
+    val nowNameLength = MutableLiveData(0)
+    val info = MutableLiveData(String())
+    val nowInfoLength = MutableLiveData(0)
+
+    // 추후 해당 값을 활용하여 텍스트박스에 변화를 줄 것 예측샷 ㅋㅋ
+    val isNameAvailable = MutableLiveData(false)
+    val isInfoAvailable = MutableLiveData(false)
+    val isProfileAvailable = MutableLiveData(false)
+
+    private val _isMoveScreenAvailable = MutableStateFlow(false)
+    val isMoveScreenAvailable: StateFlow<Boolean> = _isMoveScreenAvailable
+
+    fun getMaxNameLen() = MAX_NAME_LEN
+    fun getMaxInfoLen() = MAX_INFO_LEN
+
+    fun checkProfileAvailable() {
+        nowNameLength.value = getGraphemeLength(name.value)
+        nowInfoLength.value = getGraphemeLength(info.value)
+
+        isNameAvailable.value =
+            (getGraphemeLength(name.value) <= MAX_NAME_LEN) && !name.value.isNullOrBlank()
+        isInfoAvailable.value = getGraphemeLength(info.value) in 1..MAX_INFO_LEN
+
+        isProfileAvailable.value = isNameAvailable.value ?: false && isInfoAvailable.value ?: false
+    }
+
+    // 이모지 포함 글자 수 세는 함수
+    private fun getGraphemeLength(value: String?): Int {
+        BREAK_ITERATOR.setText(value)
+
+        var count = 0
+        while (BREAK_ITERATOR.next() != BreakIterator.DONE) {
+            count++
+        }
+
+        return count
+    }
+
+    fun setIsMoveScreenAvailable() {
+        _isMoveScreenAvailable.value = true
+    }
+
+    companion object {
+        val BREAK_ITERATOR: BreakIterator = BreakIterator.getCharacterInstance()
+
+        const val MAX_NAME_LEN = 5
+        const val MAX_INFO_LEN = 20
+    }
+}

presentation/src/main/res/layout/activity_onboarding_profile_setting.xml

@@ -0,0 +1,137 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <data>
+
+        <variable
+            name="viewModel"
+            type="com.going.presentation.onboarding.OnboardingProfileSettingViewModel" />
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent">
+
+        <androidx.appcompat.widget.Toolbar
+            android:id="@+id/tb_onboarding_profile_setting"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:background="@color/white_000"
+            android:elevation="2dp"
+            android:paddingVertical="12dp"
+            android:paddingStart="18dp"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            app:title="@string/onboarding_title"
+            app:titleTextColor="@color/black_000" />
+
+        <TextView
+            android:id="@+id/tv_onboarding_profile_setting_name_title"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="32dp"
+            android:text="@string/onboarding_name_title"
+            android:textColor="@color/black_000"
+            app:layout_constraintStart_toStartOf="@id/layout_onboarding_profile_setting_name"
+            app:layout_constraintTop_toBottomOf="@id/tb_onboarding_profile_setting" />
+
+        <com.google.android.material.textfield.TextInputLayout
+            android:id="@+id/layout_onboarding_profile_setting_name"
+            style="@style/textInputLayout_style"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginHorizontal="24dp"
+            android:layout_marginTop="6dp"
+            app:boxStrokeWidth="2dp"
+            app:endIconMode="custom"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/tv_onboarding_profile_setting_name_title">
+
+            <com.google.android.material.textfield.TextInputEditText
+                android:id="@+id/etv_onboarding_profile_setting_name"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:afterTextChanged="@{(text) -> viewModel.checkProfileAvailable()}"
+                android:imeOptions="actionNext"
+                android:inputType="text"
+                android:maxLines="1"
+                android:text="@={viewModel.name}"
+                android:textColor="@color/black_000"
+                android:textSize="15sp"
+                tools:text="@string/onboarding_name" />
+        </com.google.android.material.textfield.TextInputLayout>
+
+        <TextView
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="@{@string/text_count(viewModel.nowNameLength, viewModel.MAX_NAME_LEN)}"
+            app:layout_constraintEnd_toEndOf="@id/layout_onboarding_profile_setting_name"
+            app:layout_constraintTop_toBottomOf="@id/layout_onboarding_profile_setting_name" />
+
+        <TextView
+            android:id="@+id/tv_onboarding_profile_setting_on_line_info_title"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="32dp"
+            android:text="@string/onboarding_one_line_info_title"
+            android:textColor="@color/black_000"
+            app:layout_constraintStart_toStartOf="@id/layout_onboarding_profile_setting_name"
+            app:layout_constraintTop_toBottomOf="@id/layout_onboarding_profile_setting_name" />
+
+        <com.google.android.material.textfield.TextInputLayout
+            android:id="@+id/layout_onboarding_profile_setting_on_line_info"
+            style="@style/textInputLayout_style"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginHorizontal="24dp"
+            android:layout_marginTop="6dp"
+            app:boxStrokeWidth="2dp"
+            app:endIconMode="custom"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/tv_onboarding_profile_setting_on_line_info_title">
+
+            <com.google.android.material.textfield.TextInputEditText
+                android:id="@+id/etv_onboarding_profile_setting_on_line_info"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:afterTextChanged="@{(text) -> viewModel.checkProfileAvailable()}"
+                android:imeOptions="actionDone"
+                android:inputType="text"
+                android:maxLines="1"
+                android:text="@={viewModel.info}"
+                android:textColor="@color/black_000"
+                android:textSize="15sp"
+                tools:text="@string/onboarding_one_line_info" />
+        </com.google.android.material.textfield.TextInputLayout>
+
+        <TextView
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="@{@string/text_count(viewModel.nowInfoLength, viewModel.MAX_INFO_LEN)}"
+            app:layout_constraintEnd_toEndOf="@id/layout_onboarding_profile_setting_on_line_info"
+            app:layout_constraintTop_toBottomOf="@id/layout_onboarding_profile_setting_on_line_info" />
+
+        <Button
+            android:id="@+id/btn_onboarding_profile_setting_finish"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginHorizontal="24dp"
+            android:layout_marginBottom="60dp"
+            android:enabled="@{viewModel.isProfileAvailable()}"
+            android:onClick="@{() -> viewModel.setIsMoveScreenAvailable()}"
+            android:paddingVertical="10dp"
+            android:text="@string/onboarding_finish_button"
+            android:textColor="@color/black_000"
+            android:textSize="16sp"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent" />
+
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>

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

@@ -7,8 +7,17 @@
     <string name="dummy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</string>
 
     <string name="server_error">서버 통신에 실패했습니다.</string>
-
+  
     <string name="sign_in_tv_title">여행을 시작해보세요</string>
     <string name="sign_in_tv_terms"><u>개인정보처리방침</u></string>
 
+    <string name="text_count">%1$d / %2$d</string>
+
+    <!--onboarding-->
+    <string name="onboarding_title">프로필 생성</string>
+    <string name="onboarding_name_title">이름</string>
+    <string name="onboarding_name">이름을 입력해주세요.</string>
+    <string name="onboarding_one_line_info_title">한줄 소개</string>
+    <string name="onboarding_one_line_info">당신을 한줄로 표현해보세요.</string>
+    <string name="onboarding_finish_button">유형 검사하러 가기</string>]
 </resources>

presentation/src/main/res/values/themes.xml

@@ -10,4 +10,19 @@
 
     <style name="Theme.Doorip" parent="Base.Theme.Doorip" />
 
-</resources>
+    <!-- TextInputLayout Style -->
+    <style name="ThemeOverlay.Eggeum.TextInputLayout.CursorColor" parent="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
+        <item name="colorControlActivated">@color/red_600</item>
+    </style>
+
+    <style name="textInputLayout_style" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
+        <item name="boxBackgroundMode">outline</item>
+        <item name="boxStrokeColor">@color/red_600</item>
+        <item name="boxBackgroundColor">@color/white_000</item>
+        <item name="boxCornerRadiusBottomEnd">6dp</item>
+        <item name="boxCornerRadiusBottomStart">6dp</item>
+        <item name="boxCornerRadiusTopEnd">6dp</item>
+        <item name="boxCornerRadiusTopStart">6dp</item>
+        <item name="android:theme">@style/ThemeOverlay.Eggeum.TextInputLayout.CursorColor</item>
+    </style>
+</resources>