[Base] #14 디자인 시스템 수정 및 추가구현 (#17)

* [FEATURE] #14 아이템 수정 bottomSheet, 아이템 삭제 bottomSheet 구현

* [UI] #14 PokitList에서 state기본값을 Disable에서 Default로 수정 및 케밥 버튼 제거

* [CHORE] #14 PokitList 케밥 버튼 제거로 인한 인자 변경내용 반영 (AddLinkScreen, AddPokitScreen)

* [CHORE] #14 ModifyBottomSheet, RemoveItemBottomSheet를 PokitBottomSheet 를 포함하지 않는 방식으로 수정

core/ui/src/main/java/pokitmons/pokit/core/ui/components/block/pokitlist/PokitList.kt

@@ -6,19 +6,14 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
-import pokitmons.pokit.core.ui.R
 import pokitmons.pokit.core.ui.components.block.pokitlist.attributes.PokitListState
 import pokitmons.pokit.core.ui.theme.PokitTheme
 
@@ -27,10 +22,9 @@ fun <T> PokitList(
     item: T,
     title: String,
     sub: String,
-    onClickKebab: (T) -> Unit,
     onClickItem: (T) -> Unit,
     modifier: Modifier = Modifier,
-    state: PokitListState = PokitListState.DISABLE,
+    state: PokitListState = PokitListState.DEFAULT,
 ) {
     val titleTextColor = getTitleTextColor(state = state)
     val subTextColor = getSubTextColor(state = state)
@@ -62,20 +56,6 @@ fun <T> PokitList(
                 style = PokitTheme.typography.detail1.copy(color = subTextColor)
             )
         }
-
-        IconButton(
-            onClick = { onClickKebab(item) },
-            modifier = Modifier
-                .padding(0.dp)
-                .align(Alignment.Top),
-            enabled = state != PokitListState.DISABLE
-        ) {
-            Icon(
-                painter = painterResource(id = R.drawable.icon_24_kebab),
-                contentDescription = null,
-                modifier = Modifier.size(24.dp)
-            )
-        }
     }
 }
 

core/ui/src/main/java/pokitmons/pokit/core/ui/components/block/pokitlist/Preview.kt

@@ -23,7 +23,6 @@ fun PokitListPreview() {
                 item = "STRING",
                 title = "카테고리입니당",
                 sub = "15개 항목",
-                onClickKebab = {},
                 onClickItem = {}
             )
 
@@ -32,7 +31,6 @@ fun PokitListPreview() {
                 item = "STRING",
                 title = "카테고리입니당",
                 sub = "15개 항목",
-                onClickKebab = {},
                 onClickItem = {}
             )
 
@@ -41,7 +39,6 @@ fun PokitListPreview() {
                 item = "STRING",
                 title = "카테고리입니당",
                 sub = "15개 항목",
-                onClickKebab = {},
                 onClickItem = {}
             )
         }

core/ui/src/main/java/pokitmons/pokit/core/ui/components/template/modifybottomsheet/ModifyBottomSheetContent.kt

@@ -0,0 +1,45 @@
+package pokitmons.pokit.core.ui.components.template.modifybottomsheet
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import pokitmons.pokit.core.ui.R
+import pokitmons.pokit.core.ui.components.template.modifybottomsheet.subcomponents.ModifyBottomSheetItem
+
+@Composable
+fun ModifyBottomSheetContent(
+    onClickShare: (() -> Unit)? = null,
+    onClickModify: (() -> Unit)? = null,
+    onClickRemove: (() -> Unit)? = null,
+) {
+    Column(
+        modifier = Modifier.fillMaxWidth()
+    ) {
+        onClickShare?.let { onClickShare ->
+            ModifyBottomSheetItem(
+                onClick = {},
+                title = stringResource(id = R.string.share),
+                painter = painterResource(id = R.drawable.icon_24_share)
+            )
+        }
+
+        onClickModify?.let { onClickModify ->
+            ModifyBottomSheetItem(
+                onClick = onClickModify,
+                title = stringResource(id = R.string.modify),
+                painter = painterResource(id = R.drawable.icon_24_edit)
+            )
+        }
+
+        onClickRemove?.let { onClickRemove ->
+            ModifyBottomSheetItem(
+                onClick = onClickRemove,
+                title = stringResource(id = R.string.remove),
+                painter = painterResource(id = R.drawable.icon_24_trash)
+            )
+        }
+    }
+}

core/ui/src/main/java/pokitmons/pokit/core/ui/components/template/modifybottomsheet/Preview.kt

@@ -0,0 +1,22 @@
+package pokitmons.pokit.core.ui.components.template.modifybottomsheet
+
+import androidx.compose.foundation.layout.fillMaxSize
+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.theme.PokitTheme
+
+@Preview(showBackground = true)
+@Composable
+private fun ModifyBottomSheetContentPreview() {
+    PokitTheme {
+        Surface(modifier = Modifier.fillMaxSize()) {
+            ModifyBottomSheetContent(
+                onClickRemove = {},
+                onClickModify = {},
+                onClickShare = {}
+            )
+        }
+    }
+}

core/ui/src/main/java/pokitmons/pokit/core/ui/components/template/modifybottomsheet/subcomponents/ModifyBottomSheetItem.kt

@@ -0,0 +1,45 @@
+package pokitmons.pokit.core.ui.components.template.modifybottomsheet.subcomponents
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.unit.dp
+import pokitmons.pokit.core.ui.theme.PokitTheme
+
+@Composable
+internal fun ModifyBottomSheetItem(
+    onClick: () -> Unit,
+    title: String,
+    painter: Painter,
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .clickable {
+                onClick()
+            }
+            .padding(horizontal = 24.dp, vertical = 20.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Text(
+            text = title,
+            style = PokitTheme.typography.body1Medium.copy(color = PokitTheme.colors.textSecondary)
+        )
+
+        Image(
+            modifier = Modifier.size(24.dp),
+            painter = painter,
+            contentDescription = null
+        )
+    }
+}

core/ui/src/main/java/pokitmons/pokit/core/ui/components/template/removeItemBottomSheet/Preview.kt

@@ -0,0 +1,23 @@
+package pokitmons.pokit.core.ui.components.template.removeItemBottomSheet
+
+import androidx.compose.foundation.layout.fillMaxSize
+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 pokitmons.pokit.core.ui.theme.PokitTheme
+
+@Preview(showBackground = true)
+@Composable
+private fun RemoveItemBottomSheetContentPreview() {
+    PokitTheme {
+        Surface(modifier = Modifier.fillMaxSize()) {
+            RemoveItemBottomSheetContent(
+                removeItemType = RemoveItemType.LINK,
+                onClickCancel = {},
+                onClickRemove = {}
+            )
+        }
+    }
+}

core/ui/src/main/java/pokitmons/pokit/core/ui/components/template/removeItemBottomSheet/RemoveItemBottomSheetContent.kt

@@ -0,0 +1,80 @@
+package pokitmons.pokit.core.ui.components.template.removeItemBottomSheet
+
+import androidx.compose.foundation.layout.Arrangement
+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.Alignment
+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.components.template.removeItemBottomSheet.attributes.RemoveItemType
+import pokitmons.pokit.core.ui.theme.PokitTheme
+
+@Composable
+fun RemoveItemBottomSheetContent(
+    removeItemType: RemoveItemType,
+    onClickCancel: () -> Unit,
+    onClickRemove: () -> Unit,
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = 36.dp, start = 20.dp, end = 20.dp, bottom = 20.dp),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Text(
+            text = stringResource(id = removeItemType.titleStringResourceId),
+            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
+        )
+    }
+
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = 16.dp, start = 20.dp, end = 20.dp, bottom = 28.dp),
+        horizontalArrangement = Arrangement.spacedBy(8.dp)
+    ) {
+        PokitButton(
+            text = stringResource(id = R.string.cancellation),
+            icon = null,
+            onClick = onClickCancel,
+            shape = PokitButtonShape.RECTANGLE,
+            type = PokitButtonType.SECONDARY,
+            size = PokitButtonSize.LARGE,
+            style = PokitButtonStyle.STROKE,
+            modifier = Modifier.weight(1f)
+        )
+
+        PokitButton(
+            text = stringResource(id = R.string.removal),
+            icon = null,
+            onClick = onClickRemove,
+            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/removeItemBottomSheet/attributes/RemoveItemType.kt

@@ -0,0 +1,14 @@
+package pokitmons.pokit.core.ui.components.template.removeItemBottomSheet.attributes
+
+import pokitmons.pokit.core.ui.R
+
+enum class RemoveItemType(val titleStringResourceId: Int, val subStringResourceId: Int) {
+    POKIT(
+        titleStringResourceId = R.string.title_remove_pokit,
+        subStringResourceId = R.string.sub_remove_link
+    ),
+    LINK(
+        titleStringResourceId = R.string.title_remove_link,
+        subStringResourceId = R.string.sub_remove_link
+    ),
+}

core/ui/src/main/res/values/string.xml

@@ -2,4 +2,16 @@
 <resources>
     <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>
 </resources>

feature/addlink/src/main/java/com/strayalpaca/addlink/AddLinkScreen.kt

@@ -302,7 +302,6 @@ fun AddLinkScreen(
                             item = it,
                             title = it.title,
                             sub = stringResource(id = R.string.count_format, it.count),
-                            onClickKebab = onClickSelectPokitItem,
                             onClickItem = onClickSelectPokitItem,
                             state = PokitListState.ACTIVE
                         )

feature/addpokit/src/main/java/com/strayalpaca/addpokit/AddPokitScreen.kt

@@ -206,7 +206,6 @@ fun AddPokitScreen(
                         item = item,
                         title = item.title,
                         sub = stringResource(id = coreString.pokit_count_format, item.count),
-                        onClickKebab = {},
                         onClickItem = {},
                         state = PokitListState.DEFAULT
                     )