feat : [선물하기] 결제 정보 확인 팝업

presentation/src/main/java/com/nexters/boolti/presentation/screen/gift/GiftConfirmDialog.kt

@@ -0,0 +1,124 @@
+package com.nexters.boolti.presentation.screen.gift
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.AbsoluteAlignment
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.nexters.boolti.presentation.R
+import com.nexters.boolti.presentation.component.BTDialog
+import com.nexters.boolti.presentation.extension.toContactFormat
+import com.nexters.boolti.presentation.theme.Grey15
+import com.nexters.boolti.presentation.theme.Grey30
+import com.nexters.boolti.presentation.theme.marginHorizontal
+
+@Composable
+fun GiftConfirmDialog(
+    receiverName: String,
+    receiverContact: String,
+    senderName: String,
+    senderContact: String,
+    ticketName: String,
+    ticketCount: Int,
+    totalPrice: Int,
+    onClick: () -> Unit,
+    onDismiss: () -> Unit,
+) {
+    BTDialog(
+        positiveButtonLabel = stringResource(R.string.ticketing_payment_button_label_short),
+        onClickPositiveButton = onClick,
+        onDismiss = onDismiss,
+    ) {
+        Text(
+            text = stringResource(R.string.ticketing_confirm_dialog_title),
+            style = MaterialTheme.typography.headlineSmall
+        )
+        Column(
+            modifier = Modifier
+                .padding(top = 24.dp)
+                .clip(RoundedCornerShape(4.dp))
+                .fillMaxWidth()
+                .background(MaterialTheme.colorScheme.secondaryContainer)
+                .padding(horizontal = marginHorizontal, vertical = 16.dp),
+        ) {
+            InfoRow(
+                label = stringResource(R.string.gift_receiver),
+                value1 = receiverName,
+                value2 = receiverContact.toContactFormat(),
+            )
+            InfoRow(
+                modifier = Modifier.padding(top = 16.dp),
+                label = stringResource(R.string.gift_sender),
+                value1 = senderName,
+                value2 = senderContact.toContactFormat(),
+            )
+            InfoRow(
+                modifier = Modifier.padding(top = 16.dp),
+                label = stringResource(R.string.ticket),
+                value1 = ticketName,
+                value2 = stringResource(
+                    R.string.reservations_ticket_count_price_format_short,
+                    ticketCount,
+                    totalPrice
+                ),
+            )
+        }
+    }
+}
+
+@Composable
+private fun InfoRow(
+    modifier: Modifier = Modifier,
+    label: String,
+    value1: String,
+    value2: String? = null,
+) {
+    Column(modifier = modifier) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween,
+        ) {
+            Text(text = label, style = MaterialTheme.typography.bodySmall, color = Grey30)
+            Text(text = value1, style = MaterialTheme.typography.bodySmall, color = Grey15)
+        }
+        value2?.let {
+            Text(
+                modifier = Modifier
+                    .padding(top = 4.dp)
+                    .align(AbsoluteAlignment.Right),
+                text = value2,
+                style = MaterialTheme.typography.bodySmall,
+                color = Grey15,
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun GiftConfirmDialogPreview() {
+    GiftConfirmDialog(
+        receiverName = "박다람쥐",
+        receiverContact = "010-8080-9090",
+        senderName = "김불티",
+        senderContact = "010-1010-2020",
+        ticketName = "일반 티켓 B",
+        ticketCount = 1,
+        totalPrice = 5000,
+        onClick = {},
+        onDismiss = {},
+    )
+}

presentation/src/main/java/com/nexters/boolti/presentation/screen/gift/GiftScreen.kt

@@ -25,6 +25,9 @@ import androidx.compose.material3.Scaffold
 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.draw.clip
@@ -42,6 +45,7 @@ import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.nexters.boolti.presentation.R
+import com.nexters.boolti.presentation.component.BTDialog
 import com.nexters.boolti.presentation.component.BtAppBar
 import com.nexters.boolti.presentation.component.BtAppBarDefaults
 import com.nexters.boolti.presentation.component.BusinessInformation
@@ -52,6 +56,7 @@ import com.nexters.boolti.presentation.screen.ticketing.OrderAgreementSection
 import com.nexters.boolti.presentation.screen.ticketing.RefundPolicySection
 import com.nexters.boolti.presentation.screen.ticketing.Section
 import com.nexters.boolti.presentation.screen.ticketing.TicketInfoSection
+import com.nexters.boolti.presentation.screen.ticketing.TicketingConfirmDialog
 import com.nexters.boolti.presentation.theme.BooltiTheme
 import com.nexters.boolti.presentation.theme.Grey10
 import com.nexters.boolti.presentation.theme.Grey40
@@ -68,6 +73,7 @@ fun GiftScreen(
 ) {
     val uiState by viewModel.uiState.collectAsStateWithLifecycle()
     val uriHandler = LocalUriHandler.current
+    var showDialog by remember { mutableStateOf(false) }
 
     Scaffold(
         modifier = modifier,
@@ -198,12 +204,26 @@ fun GiftScreen(
                         uiState.totalPrice
                     ),
                     onClick = {
-                        TODO("팝업 구현")
+                        showDialog = true
                     },
                 )
             }
         }
     }
+
+    if (showDialog) {
+        GiftConfirmDialog(
+            receiverName = uiState.receiverName,
+            receiverContact = uiState.receiverContact,
+            senderName = uiState.senderName,
+            senderContact = uiState.senderContact,
+            ticketName = uiState.ticketName,
+            ticketCount = uiState.ticketCount,
+            totalPrice = uiState.totalPrice,
+            onClick = viewModel::pay,
+            onDismiss = { showDialog = false },
+        )
+    }
 }
 
 @Composable

presentation/src/main/java/com/nexters/boolti/presentation/screen/gift/GiftViewModel.kt

@@ -91,4 +91,8 @@ class GiftViewModel @Inject constructor(
     fun selectImage(image: String) {
         _uiState.update { it.copy(selectedImage = image) }
     }
+
+    fun pay() {
+        TODO("일해라 송준영")
+    }
 }

presentation/src/main/res/values/strings.xml

@@ -168,6 +168,8 @@
     <!-- 선물하기 -->
     <string name="gift_receiver_info">받는 분 정보</string>
     <string name="gift_sender_info">보내는 분 정보</string>
+    <string name="gift_receiver">받는 분</string>
+    <string name="gift_sender">보내는 분</string>
     <string name="gift_message_length_unit">자</string>
     <string name="gift_receiver_note">결제 후 카카오톡 친구 목록에서 받는 분을 선택해주세요.</string>
     <string name="gift_show_info">공연 및 티켓 정보</string>