#33 [fix] : 이용약관 뷰 수정

SOPT-all · Jan 18, 2025 · a6d5e39 · a6d5e39
1 parent 7f02401
commit a6d5e39
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 68 deletions.
diff --git a/app/src/main/java/com/sopt/withsuhyeon/core/component/button/ShowButton.kt b/app/src/main/java/com/sopt/withsuhyeon/core/component/button/ShowButton.kt
@@ -11,17 +11,19 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.sopt.withsuhyeon.R
 import com.sopt.withsuhyeon.core.util.modifier.noRippleClickable
 import com.sopt.withsuhyeon.ui.theme.Grey500
 import com.sopt.withsuhyeon.ui.theme.defaultWithSuhyeonTypography
 
 @Composable
 fun ShowButton(
     onClick: () -> Unit,
-    text: String = "보기",
+    text: String = stringResource(R.string.show_button_title),
     font: TextStyle = defaultWithSuhyeonTypography.body03_SB,
     color: Color = Grey500,
     modifier: Modifier = Modifier,

diff --git a/app/src/main/java/com/sopt/withsuhyeon/core/component/checkbox/CheckBox.kt b/app/src/main/java/com/sopt/withsuhyeon/core/component/checkbox/CheckBox.kt
@@ -23,7 +23,9 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.sopt.withsuhyeon.R
 import com.sopt.withsuhyeon.core.util.KeyStorage.CHECKED
+import com.sopt.withsuhyeon.core.util.KeyStorage.DEFAULT
 import com.sopt.withsuhyeon.core.util.KeyStorage.DISABLED_TYPE
+import com.sopt.withsuhyeon.core.util.KeyStorage.PRIMARY_TYPE
 import com.sopt.withsuhyeon.core.util.KeyStorage.SECONDARY_TYPE
 import com.sopt.withsuhyeon.core.util.modifier.noRippleClickable
 import com.sopt.withsuhyeon.ui.theme.WithSuhyeonTheme
@@ -34,8 +36,8 @@ import com.sopt.withsuhyeon.ui.theme.WithSuhyeonTheme.typography
 fun CheckBox(
     placeholder: String,
     onClick: () -> Unit,
-    type: String = "primary",
-    state: String = "default",
+    type: String = PRIMARY_TYPE,
+    state: String = DEFAULT,
     font: TextStyle = typography.body03_SB,
     modifier: Modifier = Modifier,
 //    TODO :

diff --git a/app/src/main/java/com/sopt/withsuhyeon/core/util/KeyStorage.kt b/app/src/main/java/com/sopt/withsuhyeon/core/util/KeyStorage.kt
@@ -4,6 +4,7 @@ object KeyStorage {
     const val LONG_TEXTFIELD_MAX_LENGTH = 200
     const val ALERT_TYPE = "alert"
     const val DISABLED_TYPE = "disabled"
+    const val PRIMARY_TYPE = "primary"
     const val SECONDARY_TYPE = "secondary"
     const val CHECKED = "checked"
     const val DEFAULT = "default"

diff --git a/app/src/main/java/com/sopt/withsuhyeon/feature/onboarding/TermsOfUseScreen.kt b/app/src/main/java/com/sopt/withsuhyeon/feature/onboarding/TermsOfUseScreen.kt
@@ -3,6 +3,7 @@ package com.sopt.withsuhyeon.feature.onboarding
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -67,16 +68,22 @@ fun TermsOfUseScreen(
             .background(color = colors.White)
             .padding(
                 vertical = 16.dp,
-                horizontal = 16.dp
             )
             .fillMaxSize()
-
     ) {
         MainTopNavBar(
             text = EMPTY_STRING,
-            modifier = Modifier.padding(20.dp)
         )
-        AnimatedProgressBar(progress = 0.1f)
+        HorizontalDivider(
+            modifier = Modifier.height(1.dp),
+            color = colors.Grey100
+        )
+        AnimatedProgressBar(
+            progress = 0.1f,
+            modifier = Modifier.padding(
+                16.dp
+            )
+        )
         Spacer(
             modifier = Modifier.height(16.dp)
         )
@@ -85,6 +92,9 @@ fun TermsOfUseScreen(
             modifier = Modifier.height(32.dp)
         )
         Row(
+            modifier = Modifier.padding(
+                horizontal = 16.dp
+            ),
             horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.Start),
             verticalAlignment = Alignment.CenterVertically,
         ) {
@@ -109,78 +119,88 @@ fun TermsOfUseScreen(
         Spacer(
             modifier = Modifier.height(16.dp)
         )
-        Column(
-            modifier = Modifier
-                .border(
-                    width = 1.dp, color = colors.Grey100, RoundedCornerShape(size = 24.dp)
-                )
-                .padding(
-                    horizontal = 20.dp,
-                    vertical = 24.dp
-                ),
-            verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.Top),
+        Box(
+            modifier = Modifier.padding(horizontal = 16.dp)
         ) {
-            Row(
-                modifier = Modifier.fillMaxWidth(),
-                horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.Start),
-            ) {
-                CheckBox(
-                    placeholder = stringResource(R.string.onboarding_terms_of_use_age),
-                    onClick = {
-                        isAgedSelected = !isAgedSelected
-                        updateAllTermsSelectedState()
-                    },
-                    type = SECONDARY_TYPE,
-                    state = if (isAgedSelected) CHECKED else DEFAULT
-                )
-                ShowButton(onClick = {
-                    // TODO - 정책 연결
-                })
-            }
-            Row(
-                modifier = Modifier.fillMaxWidth(),
-                horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.Start),
-            ) {
-                CheckBox(
-                    placeholder = stringResource(R.string.onboarding_terms_of_use_agree),
-                    onClick = {
-                        isTermsSelected = !isTermsSelected
-                        updateAllTermsSelectedState()
-                    },
-                    type = SECONDARY_TYPE,
-                    state = if (isTermsSelected) CHECKED else DEFAULT
-                )
-                ShowButton(onClick = {
-                    // TODO - 정책 연결
-                })
-            }
-            Row(
-                modifier = Modifier.fillMaxWidth(),
-                horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.Start),
+            Column(
+                modifier = Modifier
+                    .border(
+                        width = 1.dp, color = colors.Grey100, RoundedCornerShape(size = 24.dp)
+                    )
+                    .padding(
+                        horizontal = 20.dp,
+                        vertical = 24.dp
+                    ),
+
+                verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.Top),
             ) {
-                CheckBox(
-                    placeholder = stringResource(R.string.onboarding_temrs_of_use_personal_information),
-                    onClick = {
-                        isPersonalInformationSelected = !isPersonalInformationSelected
-                        updateAllTermsSelectedState()
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.Start),
+                ) {
+                    CheckBox(
+                        placeholder = stringResource(R.string.onboarding_terms_of_use_age),
+                        onClick = {
+                            isAgedSelected = !isAgedSelected
+                            updateAllTermsSelectedState()
+                        },
+                        type = SECONDARY_TYPE,
+                        state = if (isAgedSelected) CHECKED else DEFAULT
+                    )
+                    ShowButton(onClick = {
+                        // TODO - 정책 연결
+                    })
+                }
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth(),
+                    horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.Start),
+                ) {
+                    CheckBox(
+                        placeholder = stringResource(R.string.onboarding_terms_of_use_agree),
+                        onClick = {
+                            isTermsSelected = !isTermsSelected
+                            updateAllTermsSelectedState()
+                        },
+                        type = SECONDARY_TYPE,
+                        state = if (isTermsSelected) CHECKED else DEFAULT
+                    )
+                    ShowButton(onClick = {
+                        // TODO - 정책 연결
+                    })
+                }
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.Start),
+                ) {
+                    CheckBox(
+                        placeholder = stringResource(R.string.onboarding_temrs_of_use_personal_information),
+                        onClick = {
+                            isPersonalInformationSelected = !isPersonalInformationSelected
+                            updateAllTermsSelectedState()
 
-                    },
-                    type = SECONDARY_TYPE,
-                    state = if (isPersonalInformationSelected) CHECKED else DEFAULT
-                )
-                ShowButton(onClick = {
-                    // TODO - 정책 연결
-                })
+                        },
+                        type = SECONDARY_TYPE,
+                        state = if (isPersonalInformationSelected) CHECKED else DEFAULT
+                    )
+                    ShowButton(onClick = {
+                        // TODO - 정책 연결
+                    })
+                }
             }
         }
 
         Spacer(modifier = Modifier.weight(1f))
 
         HorizontalDivider(
-            modifier = Modifier.height(1.dp)
+            modifier = Modifier.height(1.dp),
+            color = colors.Grey100
         )
+
         Spacer(modifier = Modifier.height(16.dp))
+
         LargeButton(
+            modifier = Modifier.padding(horizontal = 16.dp),
             onClick = {
                 if (isAllTermsSelected) {
                     onButtonClick()

diff --git a/app/src/main/java/com/sopt/withsuhyeon/feature/onboarding/components/OnBoardingTitle.kt b/app/src/main/java/com/sopt/withsuhyeon/feature/onboarding/components/OnBoardingTitle.kt
@@ -13,7 +13,7 @@ fun OnBoardingTitle(
     modifier: Modifier = Modifier
 ) {
     Text(
-        modifier = modifier.padding(vertical = 20.dp),
+        modifier = modifier.padding(vertical = 20.dp, horizontal = 16.dp),
         text = text,
         style = typography.title02_B,
     )

diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -110,4 +110,7 @@
     <string name="alert_modal_delete_btn">삭제하기</string>
     <string name="alert_modal_cancel_btn">취소하기</string>
 
+    <!-- ShowButton -->
+    <string name="show_button_title">보기</string>
+
 </resources>