DEP-186 ui: 짝꿍 선택에 따라 효과 추가 (#58)

* chore: package 경로 변경 * ui: title2 폰트 추가 * ui: 사용할 문자열 strings.xml에 추가 * feat: 짝꿍 타입 선택 fragment와 viewModel 추가 * ui: 짝꿍 타입 선택 ui 구현 * DEP-170 ui: 그라데이션 추가 (#54) * chore: fragment와 viewModel 생성 * ui: 짝꿍 만들기 1단계 ui 구현 * ui: 그라데이션 추가 * ui: 테두리가 있는 rect 도형 구현 * feat: 짝꿍 선택 상태를 주고 받는 fragment와 viewModel 구현 * chore: id 지정
depromeet12th · Dec 7, 2022 · 90b3d4d · 90b3d4d
1 parent b9a81d0
commit 90b3d4d
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 0 deletions.
diff --git a/...on/mate/src/main/java/com/depromeet/threedays/mate/create/step2/ChooseMateTypeFragment.kt b/...on/mate/src/main/java/com/depromeet/threedays/mate/create/step2/ChooseMateTypeFragment.kt
@@ -1,14 +1,61 @@
 package com.depromeet.threedays.mate.create.step2
 
+import android.os.Bundle
+import android.view.View
 import androidx.fragment.app.viewModels
+import androidx.lifecycle.Lifecycle
+import androidx.lifecycle.lifecycleScope
+import androidx.lifecycle.repeatOnLifecycle
 import com.depromeet.threedays.core.BaseFragment
+import com.depromeet.threedays.core.setOnSingleClickListener
+import com.depromeet.threedays.core_design_system.R as core_design
 import com.depromeet.threedays.mate.R
 import com.depromeet.threedays.mate.databinding.FragmentChooseMateTypeBinding
+import com.depromeet.threedays.mate.create.step2.ChooseMateTypeViewModel.MateType
 import dagger.hilt.android.AndroidEntryPoint
+import kotlinx.coroutines.launch
 
 @AndroidEntryPoint
 class ChooseMateTypeFragment :
     BaseFragment<FragmentChooseMateTypeBinding, ChooseMateTypeViewModel>(R.layout.fragment_choose_mate_type) {
     override val viewModel by viewModels<ChooseMateTypeViewModel>()
 
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+
+        initEvent()
+        setUiStateObserver()
+    }
+
+    private fun initEvent() {
+        binding.clWhippingMate.setOnSingleClickListener {
+            viewModel.setMateType(MateType.WHIPPING)
+        }
+        binding.clCarrotMate.setOnSingleClickListener {
+            viewModel.setMateType(MateType.CARROT)
+        }
+    }
+
+    private fun setMateSelected(mateType: MateType) {
+        when(mateType) {
+            MateType.WHIPPING -> {
+                binding.clWhippingMate.setBackgroundResource(R.drawable.bg_rect_gray_200_border_gray_400_r10)
+                binding.clCarrotMate.setBackgroundResource(core_design.drawable.bg_rect_gray200_r10)
+            }
+            MateType.CARROT -> {
+                binding.clWhippingMate.setBackgroundResource(core_design.drawable.bg_rect_gray200_r10)
+                binding.clCarrotMate.setBackgroundResource(R.drawable.bg_rect_gray_200_border_gray_400_r10)
+            }
+        }
+    }
+
+    private fun setUiStateObserver() {
+        lifecycleScope.launch {
+            viewLifecycleOwner.repeatOnLifecycle(Lifecycle.State.STARTED) {
+                viewModel.uiState.collect { uiState ->
+                    setMateSelected(uiState.mateType)
+                }
+            }
+        }
+    }
 }
diff --git a/...n/mate/src/main/java/com/depromeet/threedays/mate/create/step2/ChooseMateTypeViewModel.kt b/...n/mate/src/main/java/com/depromeet/threedays/mate/create/step2/ChooseMateTypeViewModel.kt
@@ -2,10 +2,33 @@ package com.depromeet.threedays.mate.create.step2
 
 import com.depromeet.threedays.core.BaseViewModel
 import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.update
 import javax.inject.Inject
 
 @HiltViewModel
 class ChooseMateTypeViewModel @Inject constructor(
+
 ) : BaseViewModel() {
 
+    private val _uiState: MutableStateFlow<UiState> = MutableStateFlow(UiState())
+    val uiState: StateFlow<UiState>
+        get() = _uiState
+
+    fun setMateType(whipping: MateType) {
+        _uiState.update {
+            it.copy(
+                mateType = whipping
+            )
+        }
+    }
+
+    data class UiState(
+        val mateType: MateType = MateType.WHIPPING
+    )
+
+    enum class MateType {
+        WHIPPING, CARROT
+    }
 }
diff --git a/presentation/mate/src/main/res/drawable/bg_rect_gray_200_border_gray_400_r10.xml b/presentation/mate/src/main/res/drawable/bg_rect_gray_200_border_gray_400_r10.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ripple xmlns:android="http://schemas.android.com/apk/res/android"
+    android:color="#A0A0A0">
+
+    <item
+        android:bottom="1dp"
+        android:left="1dp"
+        android:right="1dp"
+        android:top="1dp">
+        <shape
+            android:shape="rectangle" >
+            <stroke
+                android:width="1dp"
+                android:color="@color/gray_400" />
+
+            <solid android:color="@color/gray_200" />
+            <corners android:radius="10dp" />
+        </shape>
+    </item>
+</ripple>
diff --git a/presentation/mate/src/main/res/layout/fragment_choose_mate_type.xml b/presentation/mate/src/main/res/layout/fragment_choose_mate_type.xml
@@ -109,6 +109,7 @@
 
         <!-- 당근 짝꿍 -->
         <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/cl_carrot_mate"
             android:layout_width="0dp"
             android:layout_height="144dp"
             android:layout_marginTop="10dp"