[Feat/#23] 프로필 화면 UI 구현

app/src/main/java/com/poti/android/core/designsystem/component/display/PotiDivider.kt

@@ -6,8 +6,10 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
@@ -30,10 +32,13 @@ fun PotiDivider(
     styleType: PotiDividerStyle,
     modifier: Modifier = Modifier,
 ) {
+    val shapeModifier = if (styleType == PotiDividerStyle.SMALL) Modifier.clip(CircleShape) else Modifier
+
     Box(
         modifier = modifier
             .fillMaxWidth()
             .height(styleType.height)
+            .then(shapeModifier)
             .background(styleType.color),
     )
 }

app/src/main/java/com/poti/android/core/designsystem/component/display/PotiRating.kt

@@ -8,18 +8,20 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.poti.android.R
-import com.poti.android.core.designsystem.theme.Gray800
 import com.poti.android.core.designsystem.theme.PotiTheme
 
 @Composable
 fun PotiRating(
     rating: String,
     modifier: Modifier = Modifier,
+    iconTint: Color = PotiTheme.colors.gray800,
+    textColor: Color = PotiTheme.colors.gray800,
 ) {
     Row(
         modifier = modifier,
@@ -30,12 +32,12 @@ fun PotiRating(
             imageVector = ImageVector.vectorResource(id = R.drawable.ic_star),
             contentDescription = null,
             modifier = Modifier.size(21.dp),
-            tint = Gray800,
+            tint = iconTint,
         )
         Text(
             text = rating,
             style = PotiTheme.typography.body14m,
-            color = Gray800,
+            color = textColor,
         )
     }
 }

app/src/main/java/com/poti/android/domain/model/user/UserProfile.kt

@@ -0,0 +1,19 @@
+package com.poti.android.domain.model.user
+
+data class UserProfile(
+    val userId: Long,
+    val email: String,
+    val nickname: String,
+    val profileImageUrl: String,
+    val ratingAvg: Double,
+    val activityMessage: String,
+    val joinedAt: String,
+    val hasFavoriteArtist: Boolean,
+    val recruitSummary: HistorySummary,
+)
+
+data class HistorySummary(
+    val total: Int,
+    val inProgress: Int,
+    val completed: Int,
+)

app/src/main/java/com/poti/android/presentation/main/PotiNavHost.kt

@@ -43,6 +43,7 @@ fun PotiNavHost(
         )
         profileNavGraph(
             paddingValues = paddingValues,
+            onPopBackStack = navigator.navController::popBackStack,
         )
     }
 }

app/src/main/java/com/poti/android/presentation/user/component/BadgeButton.kt

@@ -0,0 +1,78 @@
+package com.poti.android.presentation.user.component
+
+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.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+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.graphics.vector.ImageVector
+import androidx.compose.ui.res.vectorResource
+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.designsystem.theme.PotiTheme
+
+@Composable
+fun BadgeButton(
+    bias: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier
+            .heightIn(min = 40.dp)
+            .clip(CircleShape)
+            .background(PotiTheme.colors.poti200)
+            .noRippleClickable(onClick)
+            .padding(vertical = 8.dp)
+            .padding(start = 16.dp, end = 8.dp),
+        horizontalArrangement = Arrangement.Center,
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Text(
+            text = bias,
+            color = PotiTheme.colors.poti800,
+            style = PotiTheme.typography.body14m,
+        )
+
+        Icon(
+            imageVector = ImageVector.vectorResource(R.drawable.ic_arrow_right_sm),
+            contentDescription = null,
+            modifier = Modifier.size(20.dp),
+            tint = PotiTheme.colors.poti800,
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun BadgeButtonPreview() {
+    PotiTheme {
+        Column(
+            modifier = Modifier.padding(16.dp),
+            verticalArrangement = Arrangement.spacedBy(12.dp),
+        ) {
+            BadgeButton(
+                bias = "나의 최애 선택하기",
+                onClick = {},
+                modifier = Modifier,
+            )
+
+            BadgeButton(
+                bias = "아이브",
+                onClick = {},
+                modifier = Modifier,
+            )
+        }
+    }
+}

app/src/main/java/com/poti/android/presentation/user/component/HistorySummaryCard.kt

@@ -0,0 +1,173 @@
+package com.poti.android.presentation.user.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+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.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.material3.VerticalDivider
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+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.poti.android.R
+import com.poti.android.core.common.extension.noRippleClickable
+import com.poti.android.core.designsystem.theme.PotiTheme
+import com.poti.android.domain.model.user.HistorySummary
+
+enum class HistorySummaryType {
+    ALL,
+    IN_PROGRESS,
+    FINISHED,
+}
+
+@Composable
+fun HistorySummaryCard(
+    title: String,
+    summary: HistorySummary,
+    onItemClick: (HistorySummaryType) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier,
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.Start,
+    ) {
+        Text(
+            text = title,
+            color = PotiTheme.colors.black,
+            style = PotiTheme.typography.body16sb,
+        )
+
+        Spacer(Modifier.height(12.dp))
+
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .clip(RoundedCornerShape(12.dp))
+                .background(PotiTheme.colors.gray100)
+                .padding(8.dp),
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            HistoryItem(
+                title = stringResource(R.string.user_history_all),
+                count = summary.total,
+                onClick = { onItemClick(HistorySummaryType.ALL) },
+                modifier = Modifier.weight(1f),
+            )
+
+            VerticalDivider(
+                modifier = Modifier
+                    .height(56.dp)
+                    .clip(CircleShape),
+                thickness = 1.dp,
+                color = PotiTheme.colors.gray300,
+            )
+
+            HistoryItem(
+                title = stringResource(R.string.user_history_ongoing),
+                count = summary.inProgress,
+                onClick = { onItemClick(HistorySummaryType.IN_PROGRESS) },
+                modifier = Modifier.weight(1f),
+            )
+
+            VerticalDivider(
+                modifier = Modifier
+                    .height(56.dp)
+                    .clip(CircleShape),
+                thickness = 1.dp,
+                color = PotiTheme.colors.gray300,
+            )
+
+            HistoryItem(
+                title = stringResource(R.string.user_history_ended),
+                count = summary.completed,
+                onClick = { onItemClick(HistorySummaryType.FINISHED) },
+                modifier = Modifier.weight(1f),
+            )
+        }
+    }
+}
+
+@Composable
+private fun HistoryItem(
+    title: String,
+    count: Int,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+    val backgroundColor = if (isPressed) PotiTheme.colors.gray300 else PotiTheme.colors.gray100
+
+    Column(
+        modifier = modifier
+            .widthIn(92.dp)
+            .clip(RoundedCornerShape(12.dp))
+            .background(backgroundColor)
+            .noRippleClickable(
+                interactionSource = interactionSource,
+                onClick = onClick,
+            )
+            .padding(vertical = 18.5.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        Text(
+            text = count.toString(),
+            color = PotiTheme.colors.poti600,
+            style = PotiTheme.typography.title18sb,
+        )
+        Text(
+            text = title,
+            color = PotiTheme.colors.gray800,
+            style = PotiTheme.typography.caption12m,
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun HistorySummaryCardPreview() {
+    val summary = HistorySummary(
+        total = 7,
+        inProgress = 2,
+        completed = 5,
+    )
+
+    PotiTheme {
+        Column(
+            modifier = Modifier.padding(16.dp),
+            verticalArrangement = Arrangement.spacedBy(12.dp),
+        ) {
+            HistorySummaryCard(
+                title = "참여 내역",
+                summary = summary,
+                onItemClick = {},
+                modifier = Modifier.width(328.dp),
+            )
+
+            HistorySummaryCard(
+                title = "참여 내역",
+                summary = summary,
+                onItemClick = {},
+            )
+        }
+    }
+}