Merge pull request #160 from Team-Notitime/feat/sign/159-terms-bottom…

…sheet

feat: 회원가입 화면 bottomSheet 추가 (#159)

core/design-system/src/main/java/com/easyhz/noffice/core/design_system/component/terms/TermsView.kt

@@ -1,21 +1,37 @@
 package com.easyhz.noffice.core.design_system.component.terms
 
+import android.view.ViewGroup
+import android.webkit.WebChromeClient
+import android.webkit.WebSettings
 import android.webkit.WebView
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.viewinterop.AndroidView
 
 @Composable
 fun TermsView(
     modifier: Modifier = Modifier,
     fileName: String
 ) {
+    val context = LocalContext.current
     AndroidView(
         modifier = modifier,
-        factory = { ctx ->
-            WebView(ctx).apply {
-                loadUrl("file:///android_asset/${fileName}")
+        factory = { _ ->
+            WebView(context).apply {
+                layoutParams = ViewGroup.LayoutParams(
+                    ViewGroup.LayoutParams.MATCH_PARENT,
+                    ViewGroup.LayoutParams.MATCH_PARENT
+                )
+                settings.apply {
+                    cacheMode = WebSettings.LOAD_DEFAULT
+                    textZoom = 100
+                }
+                webChromeClient = WebChromeClient()
             }
+        },
+        update = {
+            it.loadUrl("file:///android_asset/${fileName}")
         }
     )
 }

core/design-system/src/main/java/com/easyhz/noffice/core/design_system/util/terms/TermType.kt

@@ -14,5 +14,8 @@ enum class TermsType(
     PRIVACY_POLICY(
         title = R.string.privacy_policy_title,
         fileName = "privacy_policy.html"
+    ),MARKETING(
+        title = R.string.marketing,
+        fileName = "marketing.html"
     ),
 }

core/design-system/src/main/res/values/terms.xml

@@ -6,4 +6,7 @@
     <string name="privacy_policy_title">
         개인정보 처리방침
     </string>
+    <string name="marketing">
+        마켓팅 수신 동의
+    </string>
 </resources>

feature/announcement/src/main/java/com/easyhz/noffice/feature/announcement/screen/creation/promotion/PromotionScreen.kt

@@ -175,7 +175,7 @@ fun PromotionScreen(
             }
             if(uiState.isShowPromotionBottomSheet) {
                 PromotionBottomSheet(
-                    sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
+                    sheetState = sheetState,
                     selectedCard = uiState.bottomSheetSelectCardIndex,
                     coverImages = uiState.coverList,
                     hasPromotion = uiState.hasPromotion,

feature/sign/src/main/java/com/easyhz/noffice/feature/sign/component/signUp/TermsDetailBottomSheet.kt

@@ -0,0 +1,70 @@
+package com.easyhz.noffice.feature.sign.component.signUp
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.SheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.easyhz.noffice.core.design_system.R
+import com.easyhz.noffice.core.design_system.component.bottomSheet.BottomSheet
+import com.easyhz.noffice.core.design_system.component.topBar.DetailTopBar
+import com.easyhz.noffice.core.design_system.theme.Grey400
+import com.easyhz.noffice.core.design_system.theme.Grey50
+import com.easyhz.noffice.core.design_system.theme.White
+import com.easyhz.noffice.core.design_system.util.terms.TermsType
+import com.easyhz.noffice.core.design_system.util.topBar.DetailTopBarMenu
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+internal fun TermsDetailBottomSheet(
+    sheetState: SheetState,
+    termsType: TermsType,
+    onDismissRequest: () -> Unit,
+) {
+    val scrollState = rememberScrollState()
+    BottomSheet(
+        sheetState = sheetState,
+        shape = RoundedCornerShape(topStart = 24.dp, topEnd = 24.dp),
+        containerColor = White,
+        onDismissRequest = onDismissRequest,
+        dragHandle = {
+            DetailTopBar(
+                modifier = Modifier.background(Grey50),
+                title = stringResource(id =termsType.title),
+                trailingItem = DetailTopBarMenu(
+                    content = {
+                        Icon(
+                            modifier = Modifier.size(24.dp),
+                            painter = painterResource(id = R.drawable.ic_x),
+                            contentDescription = "left",
+                            tint = Grey400
+                        )
+                    },
+                    onClick = onDismissRequest
+                ),
+            )
+        }
+    ) {
+        Box(modifier = Modifier.fillMaxHeight(0.9f)) {
+            Column(
+                modifier = Modifier.verticalScroll(scrollState)
+            ) {
+                com.easyhz.noffice.core.design_system.component.terms.TermsView(
+                    modifier = Modifier,
+                    fileName = termsType.fileName
+                )
+            }
+        }
+    }
+}

feature/sign/src/main/java/com/easyhz/noffice/feature/sign/component/signUp/TermsView.kt

@@ -2,6 +2,7 @@ package com.easyhz.noffice.feature.sign.component.signUp
 
 import androidx.compose.animation.Crossfade
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -195,7 +196,7 @@ private fun TermsItem(
             }
         }
         Row(
-            modifier = Modifier.noRippleClickable { onClickDetail() },
+            modifier = Modifier.clickable { onClickDetail() },
             verticalAlignment = Alignment.CenterVertically
         ) {
             Text(

feature/sign/src/main/java/com/easyhz/noffice/feature/sign/contract/signUp/SignUpIntent.kt

@@ -1,6 +1,5 @@
 package com.easyhz.noffice.feature.sign.contract.signUp
 
-import androidx.compose.ui.text.input.TextFieldValue
 import com.easyhz.noffice.core.common.base.UiIntent
 import com.easyhz.noffice.feature.sign.util.signUp.Terms
 
@@ -13,4 +12,7 @@ sealed class SignUpIntent: UiIntent() {
     data class ClickTermsDetail(val terms: Terms): SignUpIntent()
     data class ChangeNameTextValue(val text: String): SignUpIntent()
     data object ClearFocus: SignUpIntent()
+    data object HideTermsBottomSheet: SignUpIntent()
+    data class SetTermsBottomSheet(val isShow: Boolean): SignUpIntent()
+
 }

feature/sign/src/main/java/com/easyhz/noffice/feature/sign/contract/signUp/SignUpSideEffect.kt

@@ -5,4 +5,5 @@ import com.easyhz.noffice.core.common.base.UiSideEffect
 sealed class SignUpSideEffect: UiSideEffect() {
     data object ClearFocus: SignUpSideEffect()
     data object NavigateToHome: SignUpSideEffect()
+    data object HideTermsBottomSheet: SignUpSideEffect()
 }

feature/sign/src/main/java/com/easyhz/noffice/feature/sign/contract/signUp/SignUpState.kt

@@ -1,11 +1,11 @@
 package com.easyhz.noffice.feature.sign.contract.signUp
 
-import androidx.compose.ui.text.input.TextFieldValue
 import com.easyhz.noffice.core.common.base.UiState
 import com.easyhz.noffice.core.common.extension.toEnumMap
 import com.easyhz.noffice.core.common.util.Step
 import com.easyhz.noffice.core.common.util.toEnabledStepButton
 import com.easyhz.noffice.core.common.util.updateStepButton
+import com.easyhz.noffice.core.design_system.util.terms.TermsType
 import com.easyhz.noffice.feature.sign.util.signUp.SignUpStep
 import com.easyhz.noffice.feature.sign.util.signUp.Terms
 import com.easyhz.noffice.feature.sign.util.signUp.toTermsMap
@@ -17,14 +17,18 @@ data class SignUpState(
     val isCheckedAllTerms: Boolean,
     val termsStatusMap: EnumMap<Terms, Boolean>,
     val name: String,
+    val isShowTermsBottomSheet: Boolean,
+    val selectedTerms: TermsType
 ) : UiState() {
     companion object {
         fun init() = SignUpState(
             step = Step(currentStep = SignUpStep.TERMS, previousStep = null),
             enabledStepButton = SignUpStep.entries.toEnabledStepButton(),
             isCheckedAllTerms = false,
             termsStatusMap = Terms.entries.toTermsMap(),
-            name = ""
+            name = "",
+            isShowTermsBottomSheet = false,
+            selectedTerms = TermsType.SERVICE_OF_TERMS
         )
     }
 

feature/sign/src/main/java/com/easyhz/noffice/feature/sign/screen/signUp/SignUpScreen.kt

@@ -11,7 +11,9 @@ import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
+import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
@@ -29,18 +31,21 @@ import com.easyhz.noffice.core.design_system.theme.Grey400
 import com.easyhz.noffice.core.design_system.theme.White
 import com.easyhz.noffice.core.design_system.util.topBar.DetailTopBarMenu
 import com.easyhz.noffice.feature.sign.component.signUp.NameView
+import com.easyhz.noffice.feature.sign.component.signUp.TermsDetailBottomSheet
 import com.easyhz.noffice.feature.sign.component.signUp.TermsView
 import com.easyhz.noffice.feature.sign.contract.signUp.SignUpIntent
 import com.easyhz.noffice.feature.sign.contract.signUp.SignUpSideEffect
 import com.easyhz.noffice.feature.sign.util.signUp.SignUpStep
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun SignUpScreen(
     viewModel: SignUpViewModel = hiltViewModel(),
     navigateToHome: () -> Unit,
 ) {
     val uiState by viewModel.uiState.collectAsStateWithLifecycle()
     val focusManager = LocalFocusManager.current
+    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
 
     BackHandler(onBack = {
         viewModel.postIntent(SignUpIntent.ClickBackButton)
@@ -81,21 +86,39 @@ fun SignUpScreen(
                 }.using(SizeTransform(clip = false))
             }, label = "signUpFlow"
         ) { targetScreen ->
-            when(targetScreen) {
+            when (targetScreen) {
                 SignUpStep.TERMS -> {
                     TermsView(modifier = Modifier.screenHorizonPadding())
                 }
+
                 SignUpStep.NAME -> {
                     NameView(modifier = Modifier.screenHorizonPadding())
                 }
             }
         }
+
+        if (uiState.isShowTermsBottomSheet) {
+            TermsDetailBottomSheet(
+                sheetState = sheetState,
+                termsType = uiState.selectedTerms
+            ) { viewModel.postIntent(SignUpIntent.HideTermsBottomSheet) }
+        }
     }
 
-    viewModel.sideEffect.collectInSideEffectWithLifecycle {sideEffect ->
-        when(sideEffect) {
-            is SignUpSideEffect.ClearFocus -> { focusManager.clearFocus() }
-            is SignUpSideEffect.NavigateToHome -> { navigateToHome() }
+    viewModel.sideEffect.collectInSideEffectWithLifecycle { sideEffect ->
+        when (sideEffect) {
+            is SignUpSideEffect.ClearFocus -> {
+                focusManager.clearFocus()
+            }
+
+            is SignUpSideEffect.NavigateToHome -> {
+                navigateToHome()
+            }
+
+            is SignUpSideEffect.HideTermsBottomSheet -> {
+                sheetState.hide()
+                viewModel.postIntent(SignUpIntent.SetTermsBottomSheet(false))
+            }
         }
     }
 }

feature/sign/src/main/java/com/easyhz/noffice/feature/sign/screen/signUp/SignUpViewModel.kt

@@ -2,6 +2,7 @@ package com.easyhz.noffice.feature.sign.screen.signUp
 
 import com.easyhz.noffice.core.common.base.BaseViewModel
 import com.easyhz.noffice.core.common.util.updateStepButton
+import com.easyhz.noffice.core.design_system.util.terms.TermsType
 import com.easyhz.noffice.feature.sign.contract.signUp.SignUpIntent
 import com.easyhz.noffice.feature.sign.contract.signUp.SignUpSideEffect
 import com.easyhz.noffice.feature.sign.contract.signUp.SignUpState
@@ -21,9 +22,11 @@ class SignUpViewModel @Inject constructor(
             is SignUpIntent.ClickNextButton -> { onClickNextButton() }
             is SignUpIntent.ClickTermsAllCheck -> { onClickTermsAllCheck() }
             is SignUpIntent.ClickTermsCheck -> { onClickTermsCheck(intent.terms) }
-            is SignUpIntent.ClickTermsDetail -> { /* TODO */ }
+            is SignUpIntent.ClickTermsDetail -> { onClickTermsDetail(intent.terms) }
             is SignUpIntent.ChangeNameTextValue -> { onChangeNameTextValue(intent.text) }
             is SignUpIntent.ClearFocus -> { onClearFocus() }
+            is SignUpIntent.HideTermsBottomSheet -> { hideBottomSheet() }
+            is SignUpIntent.SetTermsBottomSheet -> { setBottomSheet(intent.isShow) }
         }
     }
 
@@ -58,4 +61,18 @@ class SignUpViewModel @Inject constructor(
     private fun onClearFocus() {
         postSideEffect { SignUpSideEffect.ClearFocus }
     }
+
+    private fun onClickTermsDetail(terms: Terms) {
+        val termsType = TermsType.valueOf(terms.name)
+        reduce { copy(selectedTerms = termsType) }
+        setBottomSheet(true)
+    }
+
+    private fun setBottomSheet(isShow: Boolean) {
+        reduce { copy(isShowTermsBottomSheet = isShow) }
+    }
+
+    private fun hideBottomSheet() {
+        postSideEffect { SignUpSideEffect.HideTermsBottomSheet }
+    }
 }