[Feat/#19] 모달 컴포넌트

app/src/main/java/com/poti/android/core/designsystem/component/modal/PotiLargeModal.kt

@@ -0,0 +1,158 @@
+package com.poti.android.core.designsystem.component.modal
+
+import androidx.annotation.DrawableRes
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+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.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.poti.android.R
+import com.poti.android.core.designsystem.component.button.ModalButtonType
+import com.poti.android.core.designsystem.component.button.PotiModalButton
+import com.poti.android.core.designsystem.theme.PotiTheme
+
+/**
+ * 라지 모달 컴포넌트입니다. 기본 모달 컴포넌트를 래핑해, 디자인 요구사항에 따른 기본 레이아웃을 제공합니다.
+ *
+ * @param onDismissRequest 모달을 닫는 콜백입니다.
+ * @param title "큰 내용"에 해당하는 텍스트입니다.
+ * @param text "작은 내용"에 해당하는 텍스트입니다.
+ * @param btnText Main 버튼 텍스트입니다.
+ * @param onBtnClick Main 버튼 클릭 콜백입니다.
+ * @param modifier
+ * @param subBtnText Sub 버튼 텍스트입니다. lg-1일 때 사용합니다.
+ * @param onSubBtnClick Sub 버튼 클릭 콜백입니다. lg-1일 때 사용합니다.
+ * @param image 이미지 에셋 아이디입니다. lg-2일 때 사용합니다.
+ * @param dismissOnBackPress 시스템 뒤로가기 시 모달을 닫는 여부입니다. 기본값 true입니다.
+ * @param dismissOnClickOutside 모달 바깥 영역 터치 시 모달을 닫는 여부입니다. 기본값 true입니다.
+ * @param content 텍스트~버튼 사이 공간에 배치됩니다. lg-1일 때 사용합니다.
+ *
+ * @author
+ * @sample PotiLarge1Preview
+ */
+@Composable
+fun PotiLargeModal(
+    onDismissRequest: () -> Unit,
+    title: String,
+    text: String,
+    btnText: String,
+    onBtnClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    subBtnText: String? = null,
+    onSubBtnClick: (() -> Unit)? = null,
+    @DrawableRes image: Int? = null,
+    dismissOnBackPress: Boolean = true,
+    dismissOnClickOutside: Boolean = true,
+    content: (@Composable ColumnScope.() -> Unit)? = null,
+) {
+    PotiModal(
+        onDismissRequest = onDismissRequest,
+        modifier = modifier,
+        dismissOnBackPress = dismissOnBackPress,
+        dismissOnClickOutside = dismissOnClickOutside,
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp)
+                .padding(top = 36.dp, bottom = 12.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Text(
+                text = title,
+                modifier = Modifier
+                    .padding(bottom = 8.dp),
+                color = PotiTheme.colors.black,
+                style = PotiTheme.typography.title18sb,
+            )
+
+            Text(
+                text = text,
+                color = PotiTheme.colors.gray800,
+                style = PotiTheme.typography.body14m,
+            )
+
+            content?.invoke(this)
+
+            image?.let {
+                Image(
+                    painter = painterResource(id = it),
+                    contentDescription = null,
+                    modifier = Modifier
+                        .size(180.dp)
+                        .padding(vertical = 24.dp),
+                    contentScale = ContentScale.Crop,
+                )
+            }
+
+            Column {
+                PotiModalButton(
+                    text = btnText,
+                    onClick = onBtnClick,
+                    modifier = Modifier.fillMaxWidth(),
+                    type = ModalButtonType.MAIN,
+                )
+
+                if (subBtnText != null && onSubBtnClick != null) {
+                    PotiModalButton(
+                        text = subBtnText,
+                        onClick = onSubBtnClick,
+                        modifier = Modifier.fillMaxWidth(),
+                        type = ModalButtonType.SUB_2,
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun PotiLarge1Preview() {
+    PotiTheme {
+        PotiLargeModal(
+            onDismissRequest = {},
+            title = "큰 내용",
+            text = "작은 내용",
+            btnText = "확인",
+            onBtnClick = {},
+            modifier = Modifier
+                .padding(horizontal = 32.dp),
+            subBtnText = "넘어갈래요",
+            onSubBtnClick = {},
+        ) {
+            Box(
+                modifier = Modifier
+                    .height(184.dp),
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun PotiLarge2Preview() {
+    PotiTheme {
+        PotiLargeModal(
+            onDismissRequest = {},
+            title = "큰 내용",
+            text = "작은 내용",
+            btnText = "확인",
+            onBtnClick = {},
+            modifier = Modifier
+                .padding(horizontal = 32.dp),
+            image = R.drawable.ic_launcher_background,
+        )
+    }
+}

app/src/main/java/com/poti/android/core/designsystem/component/modal/PotiModal.kt

@@ -0,0 +1,126 @@
+package com.poti.android.core.designsystem.component.modal
+
+import android.graphics.Color
+import android.graphics.drawable.ColorDrawable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalView
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import androidx.compose.ui.window.DialogProperties
+import androidx.compose.ui.window.DialogWindowProvider
+import com.poti.android.core.designsystem.component.button.PotiFloatingButton
+import com.poti.android.core.designsystem.component.button.PotiModalButton
+import com.poti.android.core.designsystem.theme.PotiTheme
+
+/**
+ * 기본 모달 컴포넌트입니다.
+ *
+ * @param onDismissRequest 모달을 닫는 콜백입니다.
+ * @param modifier
+ * @param dismissOnBackPress 시스템 뒤로가기 시 모달을 닫는 여부입니다. 기본값 true입니다.
+ * @param dismissOnClickOutside 모달 바깥 영역 터치 시 모달을 닫는 여부입니다. 기본값 true입니다.
+ * @param content
+ *
+ * @author 도연
+ * @sample PotiModalPreview
+ */
+@Composable
+internal fun PotiModal(
+    onDismissRequest: () -> Unit,
+    modifier: Modifier = Modifier,
+    dismissOnBackPress: Boolean = true,
+    dismissOnClickOutside: Boolean = true,
+    content: @Composable () -> Unit,
+) {
+    val dialogProperties = remember(dismissOnBackPress, dismissOnClickOutside) {
+        DialogProperties(
+            dismissOnBackPress = dismissOnBackPress,
+            dismissOnClickOutside = dismissOnClickOutside,
+            usePlatformDefaultWidth = false,
+        )
+    }
+
+    Dialog(
+        onDismissRequest = onDismissRequest,
+        properties = dialogProperties,
+    ) {
+        val dialogWindow = (LocalView.current.parent as DialogWindowProvider).window
+
+        dialogWindow.setDimAmount(0.4f)
+
+        dialogWindow.decorView.setBackgroundColor(
+            Color.parseColor("#000000"),
+        )
+
+        dialogWindow.setBackgroundDrawable(
+            ColorDrawable(Color.TRANSPARENT),
+        )
+
+        Surface(
+            modifier = modifier,
+            shape = RoundedCornerShape(12.dp),
+            color = PotiTheme.colors.white,
+        ) {
+            content()
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun PotiModalPreview() {
+    var showModal by remember { mutableStateOf(false) }
+
+    PotiTheme {
+        if (showModal) {
+            PotiModal(
+                modifier = Modifier.padding(10.dp),
+                onDismissRequest = { showModal = false },
+            ) {
+                Column(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(all = 40.dp),
+                    verticalArrangement = Arrangement.spacedBy(20.dp),
+                ) {
+                    Text(
+                        text = "거래는 어땠나요?\n별점으로 간단히 평가해주세요",
+                        modifier = Modifier
+                            .padding(all = 20.dp)
+                            .fillMaxWidth(),
+                    )
+
+                    PotiModalButton(
+                        text = "버튼",
+                        onClick = {},
+                    )
+                }
+            }
+        }
+
+        Box(
+            modifier = Modifier.fillMaxSize(),
+            contentAlignment = Alignment.Center,
+        ) {
+            PotiFloatingButton(
+                onClick = { showModal = true },
+            )
+        }
+    }
+}