[Feat/#36] participant overview, dropdown 구현

app/src/main/java/com/poti/android/presentation/history/component/HistoryParticipantDetail.kt

@@ -45,6 +45,7 @@ data class DepositItem(
 
 sealed interface DetailState {
     val fields: List<Pair<FieldType, String>>
+    @get:StringRes
     val buttonLabelId: Int?
     val onButtonClick: (() -> Unit)?
 
@@ -122,6 +123,7 @@ fun HistoryParticipantDetail(
     userName: String,
     userImageUrl: String,
     depositItems: List<DepositItem>,
+    totalPrice: Int,
     detailState: DetailState,
     modifier: Modifier = Modifier,
 ) {
@@ -155,7 +157,6 @@ fun HistoryParticipantDetail(
                 overflow = TextOverflow.Ellipsis,
                 modifier = Modifier
                     .weight(1f)
-                    .padding(vertical = 2.dp),
             )
         }
 
@@ -173,7 +174,6 @@ fun HistoryParticipantDetail(
                 color = colors.black,
             )
             Column(
-                modifier = Modifier.fillMaxWidth(),
                 verticalArrangement = Arrangement.spacedBy(8.dp),
             ) {
                 depositItems.forEach { item ->
@@ -202,7 +202,7 @@ fun HistoryParticipantDetail(
                     )
 
                     Text(
-                        text = priceText(depositItems.sumOf { it.price }),
+                        text = priceText(totalPrice),
                         style = typography.body16sb,
                         color = colors.black,
                     )
@@ -296,6 +296,7 @@ private fun HistoryParticipantDetailPreview() {
                 contact = "010-1111-1111",
                 invoice = "우체국 37249720348093",
             ),
+            totalPrice = depositItems.sumOf { it.price },
             modifier = Modifier.width(311.dp),
         )
     }

app/src/main/java/com/poti/android/presentation/history/component/HistoryParticipantDropdown.kt

@@ -1,6 +1,7 @@
 package com.poti.android.presentation.history.component
 
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.Crossfade
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -26,6 +27,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.poti.android.R
 import com.poti.android.core.common.extension.noRippleClickable
+import com.poti.android.core.common.util.screenWidthDp
 import com.poti.android.core.designsystem.component.display.PotiItemOptionType
 import com.poti.android.core.designsystem.theme.PotiTheme
 
@@ -34,6 +36,7 @@ fun HistoryParticipantDropdown(
     userName: String,
     userImageUrl: String,
     depositItems: List<DepositItem>,
+    depositTotalPrice: Int,
     detailState: DetailState,
     stageType: ParticipantStateLabelStage,
     statusType: ParticipantStateLabelStatus,
@@ -49,7 +52,8 @@ fun HistoryParticipantDropdown(
     ) {
         Column(
             modifier = Modifier
-                .padding(vertical = 20.dp, horizontal = 16.dp),
+                .padding(vertical = 20.dp,
+                    horizontal = screenWidthDp(16.dp)),
         ) {
             ParticipantDropdownHeader(
                 name = userName,
@@ -64,6 +68,7 @@ fun HistoryParticipantDropdown(
                     userImageUrl = userImageUrl,
                     depositItems = depositItems,
                     detailState = detailState,
+                    totalPrice = depositTotalPrice,
                     modifier = Modifier.padding(top = 20.dp),
                 )
             }
@@ -102,17 +107,22 @@ private fun ParticipantDropdownHeader(
             modifier = Modifier.padding(vertical = 2.dp),
         )
         Spacer(modifier = Modifier.width(8.dp))
-        Icon(
-            painter = painterResource(
-                id = if (expanded) {
-                    R.drawable.ic_arrow_up_lg
-                } else {
-                    R.drawable.ic_arrow_down_lg
-                },
-            ),
-            contentDescription = null,
-            tint = PotiTheme.colors.gray700,
-        )
+
+        Crossfade(
+            targetState = expanded
+        ) { expand ->
+            Icon(
+                painter = painterResource(
+                    id = if (expand) {
+                        R.drawable.ic_arrow_up_lg
+                    } else {
+                        R.drawable.ic_arrow_down_lg
+                    },
+                ),
+                contentDescription = null,
+                tint = PotiTheme.colors.gray700,
+            )
+        }
     }
 }
 
@@ -153,6 +163,7 @@ fun HistoryParticipantDropdownPreview() {
             userName = "어쩌구저쩌구".repeat(20),
             userImageUrl = "",
             depositItems = depositItems,
+            depositTotalPrice = depositItems.sumOf { it.price },
             detailState = DetailState.AfterDelivery(
                 name = "어쩌구",
                 delivery = "(01234) 서울특별시 솝트구 다솝로 456",

app/src/main/java/com/poti/android/presentation/history/component/HistoryParticipantOverview.kt

@@ -15,6 +15,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.poti.android.core.common.util.screenHeightDp
+import com.poti.android.core.common.util.screenWidthDp
 import com.poti.android.core.designsystem.component.display.PotiItemOption
 import com.poti.android.core.designsystem.component.display.PotiItemOptionSize
 import com.poti.android.core.designsystem.component.display.PotiItemOptionType
@@ -23,21 +25,21 @@ import com.poti.android.core.designsystem.theme.PotiTheme.colors
 
 @Composable
 fun HistoryParticipantOverview(
-    modifier: Modifier = Modifier,
-    memberList: List<String>,
-    userName: String,
-    address: String,
-    phone: String,
+    memberList: String,
+    userInfo: String,
     deliveryMethod: String,
     price: Int,
     participantStageType: ParticipantStateLabelStage,
     participantStatusType: ParticipantStateLabelStatus,
+    modifier: Modifier = Modifier,
 ) {
     Column(
         modifier = modifier
             .fillMaxWidth()
             .background(colors.white)
-            .padding(16.dp),
+            .padding(
+                horizontal = ( 16.dp),
+                vertical = screenHeightDp(16.dp)),
         verticalArrangement = Arrangement.spacedBy(12.dp),
         horizontalAlignment = Alignment.Start,
     ) {
@@ -46,7 +48,7 @@ fun HistoryParticipantOverview(
             horizontalArrangement = Arrangement.SpaceBetween,
         ) {
             Text(
-                text = memberList.joinToString(", "),
+                text = memberList,
                 style = PotiTheme.typography.body16m,
                 color = colors.black,
                 maxLines = 1,
@@ -63,10 +65,11 @@ fun HistoryParticipantOverview(
         }
 
         Text(
-            text = "$userName\n$address\n$phone",
+            text = userInfo,
             style = PotiTheme.typography.body14m,
             color = colors.gray800,
         )
+
         Row(horizontalArrangement = Arrangement.spacedBy(12.dp)) {
             PotiItemOption(
                 optionType = PotiItemOptionType.DELIVERY,
@@ -89,12 +92,15 @@ private fun priceText(price: Int) = String.format("%,d원", price)
 @Composable
 private fun HistoryParticipantOverviewPreview() {
     PotiTheme {
+        val members = listOf("멤버명", "멤버명", "멤버명", "멤버명", "멤버명", "멤버명", "멤버명")
+        val userName = "이포티"
+        val zipcode = "01234"
+        val address = "서울특별시 솝트구 다솝로 456"
+        val phone = "010-2345-2345"
+
         HistoryParticipantOverview(
-            memberList =
-                listOf("멤버명", "멤버명", "멤버명", "멤버명", "멤버명", "멤버명", "멤버명"),
-            address = "(01234) 서울특별시 솝트구 다솝로 456",
-            userName = "이포티",
-            phone = "010-2345-2345",
+            memberList = members.joinToString(", "),
+            userInfo = "$userName\n($zipcode) $address\n$phone",
             deliveryMethod = "준등기",
             price = 12800,
             participantStageType = ParticipantStateLabelStage.DEPOSIT,