AND-SOPT-ANDROID · wjdrjs00 · Nov 14, 2024 · Nov 1, 2024 · Nov 1, 2024 · Nov 1, 2024
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -46,23 +46,18 @@ dependencies {
     implementation(libs.androidx.lifecycle.runtime.ktx)
     implementation(libs.androidx.lifecycle.viewmodel.compose)
     implementation(libs.androidx.activity.compose)
-
-    implementation(libs.bundles.compose)
-
     implementation(platform(libs.androidx.compose.bom))
+    implementation(libs.bundles.compose)
     implementation(libs.androidx.navigation.compose)
-    implementation(libs.androidx.ui)
-    implementation(libs.androidx.ui.graphics)
-    implementation(libs.androidx.ui.tooling.preview)
-    implementation(libs.androidx.material3)
-
     implementation(libs.kotlinx.serialization.json)
 
     testImplementation(libs.junit)
+
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)
     androidTestImplementation(platform(libs.androidx.compose.bom))
-    androidTestImplementation(libs.androidx.ui.test.junit4)
-    debugImplementation(libs.androidx.ui.tooling)
-    debugImplementation(libs.androidx.ui.test.manifest)
+    androidTestImplementation(libs.compose.ui.test.junit4)
+
+    debugImplementation(libs.compose.ui.tooling)
+    debugImplementation(libs.compose.ui.test.manifest)
 }
diff --git a/app/src/main/java/org/sopt/and/domain/register/model/UserRegisterValidationResult.kt b/app/src/main/java/org/sopt/and/domain/register/model/UserRegisterValidationResult.kt
@@ -0,0 +1,6 @@
+package org.sopt.and.domain.register.model
+
+data class UserRegisterValidationResult(
+    val isEmailValid: Boolean,
+    val isPasswordValid: Boolean,
+)
diff --git a/app/src/main/java/org/sopt/and/domain/register/usecase/ValidateUserRegisterUseCase.kt b/app/src/main/java/org/sopt/and/domain/register/usecase/ValidateUserRegisterUseCase.kt
@@ -0,0 +1,17 @@
+package org.sopt.and.domain.register.usecase
+
+import org.sopt.and.domain.register.model.UserRegisterValidationResult
+import org.sopt.and.domain.register.validator.UserRegisterValidator
+
+class ValidateUserRegisterUseCase(
+    private val validator: UserRegisterValidator,
+) {
+
+    operator fun invoke(email: String, password: String): UserRegisterValidationResult {
+        val isEmailValid = validator.isEmailValid(email)
+        val isPasswordValid = validator.isPasswordValid(password)
+
+        return UserRegisterValidationResult(isEmailValid, isPasswordValid)
+    }
+
+}
diff --git a/app/src/main/java/org/sopt/and/domain/register/validator/UserRegisterValidator.kt b/app/src/main/java/org/sopt/and/domain/register/validator/UserRegisterValidator.kt
@@ -0,0 +1,27 @@
+package org.sopt.and.domain.register.validator
+
+class UserRegisterValidator {
+
+    private val emailRegex = "[a-zA-Z0-9._-]+@[a-z]+\\.+[a-z]+".toRegex()
+
+    fun isEmailValid(email: String): Boolean = emailRegex.matches(email)
+
+    fun isPasswordValid(password: String): Boolean {
+        if (password.length !in MIN_PASSWORD_LENGTH..MAX_PASSWORD_LENGTH)
+            return false
+
+        val hasUppercase = password.any { it.isUpperCase() }
+        val hasLowercase = password.any { it.isLowerCase() }
+        val hasDigit = password.any { it.isDigit() }
+        val hasSpecialChar = password.any { "!@#$%^&*()-_=+[]{}|;:'\",.<>?/".contains(it) }
+        val criteriaChecks = listOf(hasUppercase, hasLowercase, hasDigit, hasSpecialChar)
+
+        return criteriaChecks.count { it } >= MIN_VALID_CRITERIA
+    }
+
+    companion object {
+        private const val MIN_PASSWORD_LENGTH = 8
+        private const val MAX_PASSWORD_LENGTH = 20
+        private const val MIN_VALID_CRITERIA = 3
+    }
+}
diff --git a/app/src/main/java/org/sopt/and/ui/signup/SignUpViewModel.kt b/app/src/main/java/org/sopt/and/ui/signup/SignUpViewModel.kt
@@ -3,9 +3,14 @@ package org.sopt.and.ui.signup
 import androidx.compose.runtime.State
 import androidx.compose.runtime.mutableStateOf
 import androidx.lifecycle.ViewModel
+import org.sopt.and.domain.register.usecase.ValidateUserRegisterUseCase
+import org.sopt.and.domain.register.validator.UserRegisterValidator
 import org.sopt.and.model.UserInfo
 
-class SignUpViewModel : ViewModel() {
+class SignUpViewModel(
+    private val validator: UserRegisterValidator = UserRegisterValidator(),
+    private val validateUserRegisterUseCase: ValidateUserRegisterUseCase = ValidateUserRegisterUseCase(validator)
+) : ViewModel() {
 
     private val _userInfo = mutableStateOf(UserInfo())
     val userInfo: State<UserInfo> = _userInfo
@@ -31,49 +36,36 @@ class SignUpViewModel : ViewModel() {
     }
 
     fun validateAndHandleEmailPassword(onValidationSuccess: (UserInfo) -> Unit) {
-        if (validateEmailAndPassword()) {
-            handleValidationResult(onValidationSuccess)
-        }
-    }
+        val result = validateUserRegisterUseCase(
+            email = _userInfo.value.email,
+            password = _userInfo.value.password
+        )
 
-    private fun validateEmailAndPassword(): Boolean {
-        _isEmailValid.value = isEmailValid(_userInfo.value.email)
-        _isPasswordValid.value = isPasswordValid(_userInfo.value.password)
+        _isEmailValid.value = result.isEmailValid
+        _isPasswordValid.value = result.isPasswordValid
 
-        return _isEmailValid.value && _isPasswordValid.value
+        if (_isEmailValid.value && _isPasswordValid.value) {
+            onValidationSuccess(_userInfo.value)
+        }
+        handleValidationResult()
     }
 
-    private fun handleValidationResult(onValidationSuccess: (UserInfo) -> Unit) {
+    private fun handleValidationResult() {
         when {
             !_isEmailValid.value && !_isPasswordValid.value -> {
                 _snackbarMessage.value = "잘못된 이메일, 비밀번호 형식입니다."
             }
+
             !_isEmailValid.value -> {
                 _snackbarMessage.value = "잘못된 이메일 형식입니다."
             }
+
             !_isPasswordValid.value -> {
                 _snackbarMessage.value = "잘못된 비밀번호 형식입니다."
             }
-            else -> {
-                onValidationSuccess(_userInfo.value)
-            }
         }
     }
 
-    private val emailRegex = "[a-zA-Z0-9._-]+@[a-z]+\\.+[a-z]+".toRegex()
-    private fun isEmailValid(email: String): Boolean = emailRegex.matches(email)
-
-    private fun isPasswordValid(password: String): Boolean {
-        if (password.length !in 8..20) return false
-
-        val hasUppercase = password.any { it.isUpperCase() }
-        val hasLowercase = password.any { it.isLowerCase() }
-        val hasDigit = password.any { it.isDigit() }
-        val hasSpecialChar = password.any { "!@#$%^&*()-_=+[]{}|;:'\",.<>?/".contains(it) }
-
-        return listOf(hasUppercase, hasLowercase, hasDigit, hasSpecialChar).count { it } >= 3
-    }
-
     fun isSignUpButtonEnabled(): Boolean =
         _userInfo.value.email.isNotBlank() && _userInfo.value.password.length >= 8
 

diff --git a/docs/week3.md b/docs/week3.md
@@ -0,0 +1,64 @@
+# 3주차 필수 과제
+
+## 과제
+
+- [x] 지금까지 과제로 진행한 뷰에 대해서 실습 때 진행한 플로우를 바탕으로 컴포넌트화 및 UI단 설계를 진행해주세요.
+- (홈, MY, 로그인, 회원가입 필수 검색 선택)
+
+| 회원가입                                                                                                                  | 로그인                                                                                                                  | 홈                                                                                                                  | MY                                                                                                                  |
+|:----------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------|:--------------------------------------------------------------------------------------------------------------------|
+| <img src="https://github.com/user-attachments/assets/843c8ea9-e6ee-4e99-9462-16533232f9aa" alt="회원가입 화면" width="250"> | <img src="https://github.com/user-attachments/assets/7d058ee8-d3db-459c-98c2-99b7c132d879" alt="로그인 화면" width="250"> | <img src="https://github.com/user-attachments/assets/5df0a20f-6e12-4b07-82b5-695dba6eb5ee" alt="홈 화면" width="250"> | <img src="https://github.com/user-attachments/assets/e6b323b0-462f-41ff-8b81-c153a52208ef" alt="MY 화면" width="250"> |
+
+<br>
+
+## 1. 공통 컴포넌트 찾기
+
+<img width="1055" alt="공통 컴포넌트" src="https://github.com/user-attachments/assets/cf552486-2dd2-4698-b767-6a3d22552265">
+
+- 공통 컴포넌트 추출 기준은 두 화면이상 공통적으로 보이는 컴포넌트 기준으로 추출해봤습니다.
+- text는 text색상별로 컴포넌트화 해보면 어떨까? 하는 생각으로 한번 추출해 봤습니다.
+    - ex) `whiteText()` / `grayText()`
+
+<br>
+
+## 2. 뷰 스케치 및 각 화면 컴포넌트화
+
+| 회원가입                                                                                                                     | 로그인                                                                                                                     |
+|:-------------------------------------------------------------------------------------------------------------------------|:------------------------------------------------------------------------------------------------------------------------|
+| <img width="500" alt="회원가입 뷰 스케치" src="https://github.com/user-attachments/assets/a2675b7f-952b-4956-b23a-005003941058"> | <img width="500" alt="로그인 뷰 스케치" src="https://github.com/user-attachments/assets/0c3d49c8-e50c-4d1c-8225-07973cc6f175"> |
+| 홈                                                                                                                        | MY                                                                                                                      |
+| <img width="520" alt="홈 뷰 스케치" src="https://github.com/user-attachments/assets/0ea3b906-3209-4615-8a54-a37c2f5540f4">    | <img width="480" alt="MY 뷰 스케치" src="https://github.com/user-attachments/assets/626cb726-0507-4530-8cd9-ea6716a9addc">  |
+
+<br>
+
+## 3. UI 로직 설계
+
+| 회원가입                                                                                                                        | 로그인                                                                                                                       |
+|:----------------------------------------------------------------------------------------------------------------------------|:--------------------------------------------------------------------------------------------------------------------------|
+| <img width="500" alt="회원가입 UI 로직 설계" src="https://github.com/user-attachments/assets/b862a7d2-32f3-4d86-99cd-a4f0437808a2"> | <img width="500" alt="로그인 로직설계" src="https://github.com/user-attachments/assets/5fde7f8e-2441-4be6-bf9e-da6de88a6e5b">    |
+| 홈                                                                                                                           | MY                                                                                                                        |
+| <img width="500" alt="홈 UI 로직 설계" src="https://github.com/user-attachments/assets/6d4c66f1-3fb9-4b33-b2d0-c148831fd228">    | <img width="500" alt="My UI 로직 설계" src="https://github.com/user-attachments/assets/8d40dbfe-96bc-49b4-9fdc-9aba98159155"> |
+
+<br>
+
+## 4. 공통되는 로직 확장함수화
+
+- 오류메시지 출력 부분 (snackbar)
+
+```kotlin
+@Composable
+fun Modifier.showSnackbarEffect(
+    message: String,
+    snackbarHostState: SnackbarHostState,
+    onMessageShown: () -> Unit = {}
+) = this.then(
+        Modifier.apply {
+            if (message.isNotEmpty()) {
+                LaunchedEffect(snackbarHostState) {
+                    snackbarHostState.showSnackbar(message)
+                    onMessageShown()
+                }
+            }
+        }
+    )
+```
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -1,5 +1,5 @@
 [versions]
-agp = "8.7.1"
+androidGradlePlugin = "8.7.1"
 kotlin = "2.0.0"
 coreKtx = "1.13.1"
 junit = "4.13.2"
@@ -14,31 +14,39 @@ kotlinxSerializationJson = "1.7.3"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
+androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycleRuntimeKtx" }
+androidx-lifecycle-viewmodel-compose = { group = "androidx.lifecycle", name = "lifecycle-viewmodel-compose", version.ref = "lifecycleViewmodelCompose" }
 androidx-navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigationCompose" }
+androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activityCompose" }
+
 junit = { group = "junit", name = "junit", version.ref = "junit" }
 androidx-junit = { group = "androidx.test.ext", name = "junit", version.ref = "junitVersion" }
 androidx-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espressoCore" }
-androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycleRuntimeKtx" }
-androidx-lifecycle-viewmodel-compose = { group = "androidx.lifecycle", name = "lifecycle-viewmodel-compose", version.ref = "lifecycleViewmodelCompose" }
-androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activityCompose" }
+
 androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
-androidx-ui = { group = "androidx.compose.ui", name = "ui" }
-androidx-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics" }
-androidx-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" }
-androidx-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
-androidx-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
-androidx-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
-androidx-material3 = { group = "androidx.compose.material3", name = "material3" }
+compose-ui = { module = "androidx.compose.ui:ui" }
+compose-ui-graphics = { module = "androidx.compose.ui:ui-graphics" }
+compose-ui-tooling = { module = "androidx.compose.ui:ui-tooling" }
+compose-ui-tooling-preview = { module = "androidx.compose.ui:ui-tooling-preview" }
+compose-material3 = { module = "androidx.compose.material3:material3" }
+compose-ui-test-manifest = { module = "androidx.compose.ui:ui-test-manifest" }
+compose-ui-test-junit4 = { module = "androidx.compose.ui:ui-test-junit4" }
 compose-material-icons-extended = { module = "androidx.compose.material:material-icons-extended" }
+
 kotlinx-serialization-json = { group = "org.jetbrains.kotlinx", name = "kotlinx-serialization-json", version.ref = "kotlinxSerializationJson" }
 
 [bundles]
 compose = [
+    "compose-ui",
+    "compose-ui-graphics",
+    "compose-ui-tooling",
+    "compose-ui-tooling-preview",
+    "compose-material3",
     "compose-material-icons-extended"
 ]
 
 [plugins]
-android-application = { id = "com.android.application", version.ref = "agp" }
+android-application = { id = "com.android.application", version.ref = "androidGradlePlugin" }
 kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
 kotlin-compose = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
 kotlin-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }