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

core/ui/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
+ )
  )
- )
+ }
  }
 }

core/ui/src/main/java/pokitmons/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)
+ )
+ }
+ }
+}

core/ui/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 = "여기에 타이틀이 들어갑니다"
+ )
+ }
+ }
+ }
+}

core/ui/src/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 = {}
+ )
+ }
  }
  }
 }

core/ui/src/main/java/pokitmons/pokit/core/ui/components/template/removeItemBottomSheet/RemoveItemBottomSheetContent.kt → core/ui/src/main/java/pokitmons/pokit/core/ui/components/template/removeItemBottomSheet/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,

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>