[Feat/#25] participant-state, state-guide, callout-info 컴포넌트 구현

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

@@ -0,0 +1,96 @@
+package com.poti.android.presentation.history.component
+
+import android.content.ClipData
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+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.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.platform.ClipEntry
+import androidx.compose.ui.platform.LocalClipboard
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.poti.android.core.common.extension.noRippleClickable
+import com.poti.android.core.designsystem.theme.PotiTheme
+import com.poti.android.core.designsystem.theme.PotiTheme.colors
+import kotlinx.coroutines.launch
+
+@Composable
+fun HistoryCalloutInfo(
+    text: String,
+    modifier: Modifier = Modifier,
+    copyable: Boolean = true,
+) {
+    val clipboardManager = LocalClipboard.current
+    val localScope = rememberCoroutineScope()
+
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .clip(RoundedCornerShape(8.dp))
+            .background(colors.gray100),
+    ) {
+        Row(
+            modifier = Modifier
+                .padding(horizontal = 16.dp, vertical = 12.dp)
+                .fillMaxWidth(),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Text(
+                text = text,
+                style = PotiTheme.typography.body14m,
+                color = colors.black,
+                modifier = Modifier.weight(1f),
+            )
+
+            if (copyable) {
+                Text(
+                    text = "복사",
+                    style = PotiTheme.typography.body14m.copy(textDecoration = TextDecoration.Underline),
+                    color = colors.gray700,
+                    modifier = Modifier
+                        .noRippleClickable {
+                            val clipData = ClipData.newPlainText("", text)
+                            val clipEntry = ClipEntry(clipData)
+                            localScope.launch {
+                                clipboardManager.setClipEntry(clipEntry)
+                            }
+                        }
+                        .padding(start = 12.dp),
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun HistoryCalloutInfoPreview() {
+    PotiTheme {
+        HistoryCalloutInfo(
+            text = "정보",
+            copyable = true,
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun HistoryCalloutInfoNoCopyPreview() {
+    PotiTheme {
+        HistoryCalloutInfo(
+            text = "정보 (복사 불가능)",
+            copyable = false,
+        )
+    }
+}

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

@@ -0,0 +1,79 @@
+package com.poti.android.presentation.history.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.poti.android.core.designsystem.theme.PotiTheme
+import com.poti.android.core.designsystem.theme.PotiTheme.colors
+import com.poti.android.core.designsystem.theme.PotiTheme.typography
+
+enum class ParticipantStateLabelColor {
+    RED,
+    BLUE,
+    GRAY,
+}
+
+val ParticipantStateLabelColor.color: Color
+    @Composable get() = when (this) {
+        ParticipantStateLabelColor.RED -> colors.sementicRed
+        ParticipantStateLabelColor.BLUE -> colors.poti600
+        ParticipantStateLabelColor.GRAY -> colors.gray700
+    }
+
+enum class ParticipantStateLabelSize {
+    LARGE,
+    SMALL,
+}
+
+val ParticipantStateLabelSize.style: TextStyle
+    @Composable get() = when (this) {
+        ParticipantStateLabelSize.LARGE -> typography.body16sb
+        ParticipantStateLabelSize.SMALL -> typography.body14sb
+    }
+
+@Composable
+fun HistoryParticipantStateLabel(
+    text: String,
+    sizeType: ParticipantStateLabelSize,
+    colorType: ParticipantStateLabelColor,
+    modifier: Modifier = Modifier,
+) {
+    Text(
+        text = text,
+        style = sizeType.style,
+        color = colorType.color,
+        modifier = modifier,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun HistoryParticipantStateLabelPreview() {
+    PotiTheme {
+        Column(
+            verticalArrangement = Arrangement.spacedBy(10.dp),
+        ) {
+            HistoryParticipantStateLabel(
+                text = "입금 대기",
+                sizeType = ParticipantStateLabelSize.LARGE,
+                colorType = ParticipantStateLabelColor.RED,
+            )
+            HistoryParticipantStateLabel(
+                text = "입금 완료",
+                sizeType = ParticipantStateLabelSize.SMALL,
+                colorType = ParticipantStateLabelColor.GRAY,
+            )
+            HistoryParticipantStateLabel(
+                text = "모집 완료",
+                sizeType = ParticipantStateLabelSize.SMALL,
+                colorType = ParticipantStateLabelColor.BLUE,
+            )
+        }
+    }
+}

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

@@ -0,0 +1,44 @@
+package com.poti.android.presentation.history.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.poti.android.core.designsystem.theme.PotiTheme
+import com.poti.android.core.designsystem.theme.PotiTheme.colors
+import com.poti.android.core.designsystem.theme.PotiTheme.typography
+
+@Composable
+fun HistoryStateGuide(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    Text(
+        text = text,
+        style = typography.body14sb,
+        color = colors.poti600,
+        textAlign = TextAlign.Center,
+        modifier = modifier
+            .clip(RoundedCornerShape(8.dp))
+            .background(colors.poti200)
+            .padding(vertical = 12.dp),
+    )
+}
+
+@Preview
+@Composable
+private fun HistoryStateGuidePreview() {
+    PotiTheme {
+        HistoryStateGuide(
+            text = "상태 메세지를 입력하세요",
+            modifier = Modifier.width(343.dp),
+        )
+    }
+}