Merge pull request #95 from YAPP-Github/feature/MZ-202-vote-detail-ui

feat: 투표 상세 ui

feature/community/src/main/java/com/susu/feature/community/votedetail/VoteDetailScreen.kt

@@ -0,0 +1,171 @@
+package com.susu.feature.community.votedetail
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+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.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.susu.core.designsystem.component.appbar.SusuDefaultAppBar
+import com.susu.core.designsystem.component.appbar.icon.BackIcon
+import com.susu.core.designsystem.component.appbar.icon.DeleteText
+import com.susu.core.designsystem.component.appbar.icon.EditText
+import com.susu.core.designsystem.theme.Gray15
+import com.susu.core.designsystem.theme.Gray50
+import com.susu.core.designsystem.theme.Orange60
+import com.susu.core.designsystem.theme.SusuTheme
+import com.susu.core.ui.extension.susuClickable
+import com.susu.feature.community.R
+import com.susu.feature.community.votedetail.component.VoteItem
+
+@Composable
+fun VoteDetailRoute(
+    popBackStack: () -> Unit,
+    @Suppress("detekt:UnusedParameter")
+    handleException: (Throwable, () -> Unit) -> Unit,
+) {
+    VoteDetailScreen(
+        onClickBack = popBackStack,
+    )
+}
+
+@Composable
+fun VoteDetailScreen(
+    onClickBack: () -> Unit = {},
+    onClickReport: () -> Unit = {},
+    onClickEdit: () -> Unit = {},
+    onClickDelete: () -> Unit = {},
+) {
+    val isMine: Boolean = false
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(SusuTheme.colorScheme.background10),
+    ) {
+        SusuDefaultAppBar(
+            leftIcon = {
+                BackIcon(
+                    onClick = onClickBack,
+                )
+            },
+            title = "결혼식",
+            actions = {
+                if (isMine) {
+                    EditText(
+                        onClick = onClickEdit,
+                    )
+                    Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_m))
+                    DeleteText(
+                        onClick = onClickDelete,
+                    )
+                } else {
+                    Image(
+                        modifier = Modifier
+                            .size(24.dp)
+                            .susuClickable(rippleEnabled = false, onClick = onClickReport),
+                        painter = painterResource(id = R.drawable.ic_report),
+                        contentDescription = stringResource(id = com.susu.core.ui.R.string.content_description_report_button),
+                    )
+                }
+                Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_m))
+            },
+        )
+
+        Column(
+            modifier = Modifier
+                .padding(SusuTheme.spacing.spacing_m)
+                .weight(1f)
+                .verticalScroll(rememberScrollState()),
+        ) {
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(SusuTheme.spacing.spacing_xxs),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                Image(
+                    modifier = Modifier
+                        .clip(CircleShape)
+                        .size(20.dp)
+                        .border(width = 1.dp, color = Gray15, shape = CircleShape),
+                    painter = painterResource(id = com.susu.core.ui.R.drawable.img_default_profile),
+                    contentDescription = null,
+                )
+
+                Text(text = "익명 수수 123", style = SusuTheme.typography.title_xxxs)
+            }
+
+            Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_m))
+
+            Text(
+                modifier = Modifier.fillMaxWidth(),
+                text = "고등학교 동창이고 좀 애매하게 친한 사인데 축의금 얼마 내야 돼?",
+                style = SusuTheme.typography.text_xxs,
+            )
+
+            Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_xl))
+
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                Icon(
+                    modifier = Modifier.size(20.dp),
+                    painter = painterResource(id = R.drawable.ic_vote),
+                    contentDescription = null,
+                    tint = Orange60,
+                )
+
+                Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_xxxxs))
+
+                Text(
+                    text = "8명 참여",
+                    style = SusuTheme.typography.title_xxxs,
+                    color = Orange60,
+                )
+
+                Spacer(modifier = Modifier.weight(1f))
+
+                Text(
+                    text = "2023.11.24",
+                    style = SusuTheme.typography.text_xxxs,
+                    color = Gray50,
+                )
+            }
+
+            Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_m))
+
+            Column(
+                verticalArrangement = Arrangement.spacedBy(SusuTheme.spacing.spacing_xxs),
+            ) {
+                repeat(5) {
+                    VoteItem(title = "${it}만원", showResult = false)
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun VoteDetailScreenPreview() {
+    SusuTheme {
+        VoteDetailScreen()
+    }
+}

feature/community/src/main/java/com/susu/feature/community/votedetail/component/VoteItem.kt

@@ -0,0 +1,120 @@
+package com.susu.feature.community.votedetail.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+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.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.susu.core.designsystem.theme.Gray70
+import com.susu.core.designsystem.theme.Orange10
+import com.susu.core.designsystem.theme.Orange40
+import com.susu.core.designsystem.theme.Orange60
+import com.susu.core.designsystem.theme.SusuTheme
+import com.susu.core.ui.extension.susuClickable
+import com.susu.feature.community.R
+import kotlin.math.roundToInt
+
+private fun Int.safeDiv(parent: Int): Float {
+    val result = toFloat() / parent.toFloat()
+    return if (result.isNaN()) 0f else result
+}
+
+@Composable
+fun VoteItem(
+    showResult: Boolean = true,
+    isPick: Boolean = false,
+    voteCount: Int = 3,
+    totalVoteCount: Int = 13,
+    title: String = "",
+    onClick: () -> Unit = {},
+) {
+    val percent = voteCount.safeDiv(totalVoteCount)
+
+    Box(
+        modifier = Modifier
+            .clip(RoundedCornerShape(4.dp))
+            .background(Orange10)
+            .fillMaxWidth()
+            .height(48.dp)
+            .susuClickable(onClick = onClick),
+    ) {
+        if (showResult) {
+            Box(
+                modifier = Modifier
+                    .background(if (isPick) Orange60 else Orange40)
+                    .fillMaxWidth(percent)
+                    .height(48.dp),
+            )
+        }
+
+        Row(
+            modifier = Modifier.padding(
+                vertical = SusuTheme.spacing.spacing_s,
+                horizontal = SusuTheme.spacing.spacing_m,
+            ),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            if (isPick) {
+                Image(
+                    painter = painterResource(id = R.drawable.ic_vote_check),
+                    contentDescription = null,
+                )
+
+                Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_xxxxs))
+            }
+
+            Text(
+                modifier = Modifier.weight(1f),
+                text = title,
+                style = SusuTheme.typography.title_xxs,
+            )
+
+            if (showResult) {
+                Text(
+                    text = stringResource(R.string.word_people, voteCount),
+                    style = SusuTheme.typography.text_xxxs,
+                    color = Gray70,
+                )
+                Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_xxs))
+                Text(
+                    text = "${percent.roundToInt()}%",
+                    style = SusuTheme.typography.title_xxs,
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun VoteItemPreview() {
+    SusuTheme {
+        Column(
+            verticalArrangement = Arrangement.spacedBy(10.dp),
+        ) {
+            VoteItem(
+                isPick = false,
+                showResult = false,
+                title = "3만원",
+            )
+            VoteItem(isPick = true, title = "3만원")
+            VoteItem(title = "3만원")
+        }
+    }
+}

feature/community/src/main/res/drawable/ic_vote_check.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+  <path
+      android:pathData="M10,1.667C5.4,1.667 1.666,5.4 1.666,10C1.666,14.6 5.4,18.334 10,18.334C14.6,18.334 18.333,14.6 18.333,10C18.333,5.4 14.6,1.667 10,1.667ZM7.741,13.575L4.75,10.584C4.673,10.507 4.611,10.415 4.57,10.314C4.528,10.213 4.506,10.105 4.506,9.996C4.506,9.887 4.528,9.779 4.57,9.678C4.611,9.577 4.673,9.486 4.75,9.409C4.827,9.332 4.919,9.27 5.019,9.229C5.12,9.187 5.228,9.165 5.337,9.165C5.446,9.165 5.554,9.187 5.655,9.229C5.756,9.27 5.848,9.332 5.925,9.409L8.333,11.809L14.066,6.075C14.222,5.92 14.434,5.832 14.654,5.832C14.874,5.832 15.086,5.92 15.241,6.075C15.397,6.231 15.485,6.442 15.485,6.663C15.485,6.883 15.397,7.095 15.241,7.25L8.917,13.575C8.839,13.653 8.748,13.714 8.647,13.756C8.546,13.797 8.438,13.819 8.329,13.819C8.22,13.819 8.112,13.797 8.011,13.756C7.91,13.714 7.819,13.653 7.741,13.575Z"
+      android:fillColor="#242424"/>
+</vector>

feature/community/src/main/res/values/strings.xml

@@ -8,4 +8,5 @@
     <string name="community_screen_vote_align_high">투표 많은 순</string>
     <string name="community_screen_most_popular_vote">가장 인기있는 투표</string>
     <string name="community_screen_title">투표</string>
+    <string name="word_people">%s명</string>
 </resources>