[Base] #26 디자인 시스템-BottomSheet 추가 및 수정 (#27)

* [FIX] #26 기존 bottomSheet에서 close animation이 제대로 동작하지 않던 문제 수정 * [FEATURE+FIX] #26 단일 버튼 BottomSheet 구현 및 기존 RemoveItemBottomSheet를 TwoButtonBottomSheet로 변경 * [CHORE] #26 ktlint 적용 * [CHORE] #26 코드 리뷰 피드백 반영
YAPP-Github · Jul 30, 2024 · d97a9e3 · d97a9e3
1 parent 5458359
commit d97a9e3
Show file tree

Hide file tree

Showing 16 changed files with 377 additions and 272 deletions.
diff --git a/...src/main/java/pokitmons/pokit/core/ui/components/template/bottomsheet/PokitBottomSheet.kt b/...src/main/java/pokitmons/pokit/core/ui/components/template/bottomsheet/PokitBottomSheet.kt
@@ -16,48 +16,78 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.launch
 import pokitmons.pokit.core.ui.theme.PokitTheme
 
 @OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
 @Composable
 fun PokitBottomSheet(
     onHideBottomSheet: () -> Unit,
+    show: Boolean = false,
     content: @Composable (ColumnScope.() -> Unit),
 ) {
     val bottomSheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
+    var visibility by remember { mutableStateOf(show) }
+    val scope = rememberCoroutineScope()
 
-    ModalBottomSheet(
-        onDismissRequest = onHideBottomSheet,
-        sheetState = bottomSheetState,
-        scrimColor = Color.Transparent,
-        shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp),
-        containerColor = PokitTheme.colors.backgroundBase,
-        dragHandle = {
-            Column {
-                Spacer(modifier = Modifier.height(8.dp))
+    LaunchedEffect(show) {
+        if (visibility && !show) {
+            scope.launch {
+                bottomSheetState.hide()
+            }.invokeOnCompletion {
+                onHideBottomSheet()
+                visibility = false
+            }
+        } else {
+            visibility = show
+        }
+    }
 
-                Box(
-                    Modifier
-                        .clip(RoundedCornerShape(4.dp))
-                        .width(36.dp)
-                        .height(4.dp)
-                        .background(color = PokitTheme.colors.iconTertiary)
-                )
+    if (visibility) {
+        ModalBottomSheet(
+            onDismissRequest = remember {
+                {
+                    onHideBottomSheet()
+                    visibility = false
+                }
+            },
+            sheetState = bottomSheetState,
+            scrimColor = Color.Transparent,
+            shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp),
+            containerColor = PokitTheme.colors.backgroundBase,
+            dragHandle = {
+                Column {
+                    Spacer(modifier = Modifier.height(8.dp))
 
-                Spacer(modifier = Modifier.height(12.dp))
+                    Box(
+                        Modifier
+                            .clip(RoundedCornerShape(4.dp))
+                            .width(36.dp)
+                            .height(4.dp)
+                            .background(color = PokitTheme.colors.iconTertiary)
+                    )
+
+                    Spacer(modifier = Modifier.height(12.dp))
+                }
             }
-        }
-    ) {
-        content()
+        ) {
+            content()
 
-        Spacer(
-            Modifier.windowInsetsBottomHeight(
-                WindowInsets.navigationBarsIgnoringVisibility
+            Spacer(
+                Modifier.windowInsetsBottomHeight(
+                    WindowInsets.navigationBarsIgnoringVisibility
+                )
             )
-        )
+        }
     }
 }
diff --git a/...ons/pokit/core/ui/components/template/onebuttonbottomsheet/OneButtonBottomSheetContent.kt b/...ons/pokit/core/ui/components/template/onebuttonbottomsheet/OneButtonBottomSheetContent.kt
@@ -0,0 +1,76 @@
+package pokitmons.pokit.core.ui.components.template.onebuttonbottomsheet
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import pokitmons.pokit.core.ui.R
+import pokitmons.pokit.core.ui.components.atom.button.PokitButton
+import pokitmons.pokit.core.ui.components.atom.button.attributes.PokitButtonShape
+import pokitmons.pokit.core.ui.components.atom.button.attributes.PokitButtonSize
+import pokitmons.pokit.core.ui.components.atom.button.attributes.PokitButtonStyle
+import pokitmons.pokit.core.ui.components.atom.button.attributes.PokitButtonType
+import pokitmons.pokit.core.ui.theme.PokitTheme
+
+@Composable
+fun OneButtonBottomSheetContent(
+    title: String,
+    subText: String? = null,
+    buttonText: String = stringResource(id = R.string.confirmation),
+    onClickButton: () -> Unit = {},
+) {
+    Column(
+        modifier = Modifier.fillMaxWidth()
+    ) {
+        Spacer(modifier = Modifier.height(36.dp))
+
+        Text(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 20.dp),
+            text = title,
+            textAlign = TextAlign.Center,
+            style = PokitTheme.typography.title2.copy(color = PokitTheme.colors.textPrimary)
+        )
+
+        subText?.let { subText ->
+            Spacer(modifier = Modifier.height(8.dp))
+
+            Text(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 20.dp),
+                text = subText,
+                textAlign = TextAlign.Center,
+                style = PokitTheme.typography.body2Medium.copy(color = PokitTheme.colors.textSecondary)
+            )
+        }
+
+        Spacer(modifier = Modifier.height(20.dp))
+
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 16.dp, start = 20.dp, end = 20.dp, bottom = 28.dp)
+        ) {
+            PokitButton(
+                text = buttonText,
+                icon = null,
+                onClick = onClickButton,
+                shape = PokitButtonShape.RECTANGLE,
+                type = PokitButtonType.PRIMARY,
+                size = PokitButtonSize.LARGE,
+                style = PokitButtonStyle.FILLED,
+                modifier = Modifier.weight(1f)
+            )
+        }
+    }
+}
diff --git a/...src/main/java/pokitmons/pokit/core/ui/components/template/onebuttonbottomsheet/Preview.kt b/...src/main/java/pokitmons/pokit/core/ui/components/template/onebuttonbottomsheet/Preview.kt
@@ -0,0 +1,39 @@
+package pokitmons.pokit.core.ui.components.template.onebuttonbottomsheet
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import pokitmons.pokit.core.ui.theme.PokitTheme
+
+@Preview(showBackground = true)
+@Composable
+private fun Preview() {
+    PokitTheme {
+        Surface(modifier = Modifier.fillMaxSize()) {
+            Column(
+                modifier = Modifier.fillMaxWidth()
+            ) {
+                OneButtonBottomSheetContent(
+                    title = "로그인 오류",
+                    subText = "현재 서버 오류로 로그인에 실패했습니다.\n잠시 후에 다시 시도해 주세요."
+                )
+
+                HorizontalDivider(
+                    modifier = Modifier.height(16.dp).background(PokitTheme.colors.borderTertiary)
+                )
+
+                OneButtonBottomSheetContent(
+                    title = "여기에 타이틀이 들어갑니다"
+                )
+            }
+        }
+    }
+}
diff --git a/...rc/main/java/pokitmons/pokit/core/ui/components/template/removeItemBottomSheet/Preview.kt b/...rc/main/java/pokitmons/pokit/core/ui/components/template/removeItemBottomSheet/Preview.kt
@@ -1,23 +1,41 @@
 package pokitmons.pokit.core.ui.components.template.removeItemBottomSheet
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
-import pokitmons.pokit.core.ui.components.template.removeItemBottomSheet.attributes.RemoveItemType
+import androidx.compose.ui.unit.dp
 import pokitmons.pokit.core.ui.theme.PokitTheme
 
 @Preview(showBackground = true)
 @Composable
 private fun RemoveItemBottomSheetContentPreview() {
     PokitTheme {
         Surface(modifier = Modifier.fillMaxSize()) {
-            RemoveItemBottomSheetContent(
-                removeItemType = RemoveItemType.LINK,
-                onClickCancel = {},
-                onClickRemove = {}
-            )
+            Column(modifier = Modifier.fillMaxWidth()) {
+                TwoButtonBottomSheetContent(
+                    title = "포킷을 정말 삭제하시겠습니까?",
+                    subText = "함께 저장한 모든 링크가 삭제되며,\n복구하실 수 없습니다.",
+                    onClickLeftButton = {},
+                    onClickRightButton = {}
+                )
+
+                HorizontalDivider(
+                    modifier = Modifier.height(16.dp).background(PokitTheme.colors.borderTertiary)
+                )
+
+                TwoButtonBottomSheetContent(
+                    title = "로그아웃 하시겠습니까?",
+                    onClickLeftButton = {},
+                    onClickRightButton = {}
+                )
+            }
         }
     }
 }
diff --git a/...ttomSheet/RemoveItemBottomSheetContent.kt → ...ottomSheet/TwoButtonBottomSheetContent.kt b/...ttomSheet/RemoveItemBottomSheetContent.kt → ...ottomSheet/TwoButtonBottomSheetContent.kt
@@ -20,14 +20,16 @@ import pokitmons.pokit.core.ui.components.atom.button.attributes.PokitButtonShap
 import pokitmons.pokit.core.ui.components.atom.button.attributes.PokitButtonSize
 import pokitmons.pokit.core.ui.components.atom.button.attributes.PokitButtonStyle
 import pokitmons.pokit.core.ui.components.atom.button.attributes.PokitButtonType
-import pokitmons.pokit.core.ui.components.template.removeItemBottomSheet.attributes.RemoveItemType
 import pokitmons.pokit.core.ui.theme.PokitTheme
 
 @Composable
-fun RemoveItemBottomSheetContent(
-    removeItemType: RemoveItemType,
-    onClickCancel: () -> Unit,
-    onClickRemove: () -> Unit,
+fun TwoButtonBottomSheetContent(
+    title: String,
+    subText: String? = null,
+    leftButtonText: String = stringResource(id = R.string.cancellation),
+    rightButtonText: String = stringResource(id = R.string.removal),
+    onClickLeftButton: () -> Unit,
+    onClickRightButton: () -> Unit,
 ) {
     Column(
         modifier = Modifier
@@ -36,17 +38,19 @@ fun RemoveItemBottomSheetContent(
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
         Text(
-            text = stringResource(id = removeItemType.titleStringResourceId),
+            text = title,
             style = PokitTheme.typography.title2.copy(color = PokitTheme.colors.textPrimary)
         )
 
         Spacer(modifier = Modifier.height(8.dp))
 
-        Text(
-            text = stringResource(id = removeItemType.subStringResourceId),
-            style = PokitTheme.typography.body2Medium.copy(color = PokitTheme.colors.textSecondary),
-            textAlign = TextAlign.Center
-        )
+        subText?.let { subString ->
+            Text(
+                text = subString,
+                style = PokitTheme.typography.body2Medium.copy(color = PokitTheme.colors.textSecondary),
+                textAlign = TextAlign.Center
+            )
+        }
     }
 
     Row(
@@ -56,9 +60,9 @@ fun RemoveItemBottomSheetContent(
         horizontalArrangement = Arrangement.spacedBy(8.dp)
     ) {
         PokitButton(
-            text = stringResource(id = R.string.cancellation),
+            text = leftButtonText,
             icon = null,
-            onClick = onClickCancel,
+            onClick = onClickLeftButton,
             shape = PokitButtonShape.RECTANGLE,
             type = PokitButtonType.SECONDARY,
             size = PokitButtonSize.LARGE,
@@ -67,9 +71,9 @@ fun RemoveItemBottomSheetContent(
         )
 
         PokitButton(
-            text = stringResource(id = R.string.removal),
+            text = rightButtonText,
             icon = null,
-            onClick = onClickRemove,
+            onClick = onClickRightButton,
             shape = PokitButtonShape.RECTANGLE,
             type = PokitButtonType.PRIMARY,
             size = PokitButtonSize.LARGE,

diff --git a/...mons/pokit/core/ui/components/template/removeItemBottomSheet/attributes/RemoveItemType.kt b/...mons/pokit/core/ui/components/template/removeItemBottomSheet/attributes/RemoveItemType.kt
diff --git a/core/ui/src/main/res/values/string.xml b/core/ui/src/main/res/values/string.xml
@@ -3,15 +3,12 @@
     <string name="not_read">안읽음</string>
     <string name="pokit_count_format">링크 %d개</string>
 
-    <string name="title_remove_pokit">포킷을 정말 삭제하시겠습니까?</string>
-    <string name="sub_remove_pokit">함께 저장한 모든 링크가 삭제되며,\n복구하실 수 없습니다.</string>
-    <string name="title_remove_link">링크를 정말 삭제하시겠습니까?</string>
-    <string name="sub_remove_link">함께 저장한 모든 정보가 삭제되며,\n복구하실 수 없습니다.</string>
-
     <string name="cancellation">취소</string>
     <string name="removal">삭제</string>
 
     <string name="share">공유하기</string>
     <string name="modify">수정하기</string>
     <string name="remove">삭제하기</string>
+
+    <string name="confirmation">확인</string>
 </resources>