[PC-566] 프로필 미리보기 화면 ui 구현

core/designsystem/src/main/java/com/puzzle/designsystem/component/Button.kt

@@ -209,7 +209,7 @@ fun PieceLoginButton(
 }
 
 @Composable
-fun PieceRoundingButton(
+fun PieceRoundingSolidButton(
     label: String,
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
@@ -238,6 +238,35 @@ fun PieceRoundingButton(
     }
 }
 
+@Composable
+fun PieceRoundingOutlinedButton(
+    label: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+) {
+    Button(
+        onClick = onClick,
+        enabled = enabled,
+        shape = RoundedCornerShape(46.dp),
+        border = BorderStroke(width = 1.dp, color = PieceTheme.colors.primaryDefault),
+        colors = ButtonDefaults.buttonColors(
+            containerColor = PieceTheme.colors.white,
+            contentColor = PieceTheme.colors.primaryDefault,
+            disabledContainerColor = PieceTheme.colors.light1,
+            disabledContentColor = PieceTheme.colors.primaryDefault,
+        ),
+        modifier = modifier
+            .height(52.dp)
+            .widthIn(min = 100.dp),
+    ) {
+        Text(
+            text = label,
+            style = PieceTheme.typography.bodyMSB,
+        )
+    }
+}
+
 @Preview
 @Composable
 fun PreviewPieceSolidButton() {
@@ -312,9 +341,23 @@ fun PreviewPieceIconButton() {
 
 @Preview
 @Composable
-fun PreviewPieceRoundingButton() {
+fun PreviewPieceRoundingSolidButton() {
+    PieceTheme {
+        PieceRoundingSolidButton(
+            label = "Label",
+            onClick = {},
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp),
+        )
+    }
+}
+
+@Preview
+@Composable
+fun PreviewPieceRoundingOutlinedButton() {
     PieceTheme {
-        PieceRoundingButton(
+        PieceRoundingOutlinedButton(
             label = "Label",
             onClick = {},
             modifier = Modifier

core/designsystem/src/main/java/com/puzzle/designsystem/component/Dialog.kt

@@ -211,7 +211,8 @@ fun PieceImageDialog(
     imageUri: Any?,
     buttonLabel: String,
     onDismissRequest: () -> Unit,
-    onButtonClick: () -> Unit,
+    onApproveClick: () -> Unit = {},
+    isApproveButtonEnabled: Boolean = true,
 ) {
     Dialog(
         onDismissRequest = onDismissRequest,
@@ -239,13 +240,15 @@ fun PieceImageDialog(
                     .size(180.dp),
             )
 
-            PieceRoundingButton(
-                label = buttonLabel,
-                onClick = onButtonClick,
-                modifier = Modifier
-                    .align(Alignment.BottomCenter)
-                    .padding(bottom = 10.dp),
-            )
+            if (isApproveButtonEnabled) {
+                PieceRoundingSolidButton(
+                    label = buttonLabel,
+                    onClick = onApproveClick,
+                    modifier = Modifier
+                        .align(Alignment.BottomCenter)
+                        .padding(bottom = 10.dp),
+                )
+            }
         }
     }
 }
@@ -308,7 +311,7 @@ fun PreviewPieceImageDialog() {
             imageUri = R.drawable.ic_image_default,
             buttonLabel = "매칭 수락하기",
             onDismissRequest = {},
-            onButtonClick = {},
+            onApproveClick = {},
         )
     }
 }

core/designsystem/src/main/res/drawable/ic_right_disable.xml

@@ -0,0 +1,25 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="52dp"
+    android:height="52dp"
+    android:viewportWidth="52"
+    android:viewportHeight="52">
+    <group>
+        <clip-path android:pathData="M0,0h52v52h-52z" />
+        <path
+            android:pathData="M26,26m-26,0a26,26 0,1 1,52 0a26,26 0,1 1,-52 0"
+            android:fillColor="#CBD1D9" />
+        <path
+            android:pathData="M26,17.466L34.533,26L26,34.533"
+            android:strokeLineJoin="round"
+            android:strokeWidth="1.6"
+            android:fillColor="#00000000"
+            android:strokeColor="#ffffff"
+            android:strokeLineCap="round" />
+        <path
+            android:pathData="M34.532,26L17.465,26"
+            android:strokeWidth="1.6"
+            android:fillColor="#00000000"
+            android:strokeColor="#ffffff"
+            android:strokeLineCap="round" />
+    </group>
+</vector>

core/designsystem/src/main/res/values/strings.xml

@@ -48,6 +48,7 @@
     <string name="other_accepted_matching">상대방이 매칭을 수락했어요!</string>
     <string name="connected_with_other">상대방과 연결되었어요!</string>
     <string name="check_contact">연락처 확인하기</string>
+    <string name="check_photo">사진 보기</string>
 
     <!--login-->
     <string name="login_description">서로의 빈 곳을 채우며 맞물리는 퍼즐처럼.\n서로의 가치관과 마음이 연결되는 순간을 만들어갑니다.</string>

core/navigation/src/main/java/com/puzzle/navigation/Route.kt

@@ -46,7 +46,10 @@ sealed class MatchingGraphDest : Route {
     data class BlockRoute(val userId: Int, val userName: String) : MatchingGraphDest()
 
     @Serializable
-    data object ContactRoute: MatchingGraphDest()
+    data object ContactRoute : MatchingGraphDest()
+
+    @Serializable
+    data object ProfilePreviewRoute : MatchingGraphDest()
 }
 
 @Serializable

feature/matching/src/main/java/com/puzzle/matching/graph/detail/MatchingDetailScreen.kt

@@ -43,7 +43,7 @@ import com.puzzle.designsystem.component.PieceDialogBottom
 import com.puzzle.designsystem.component.PieceDialogDefaultTop
 import com.puzzle.designsystem.component.PieceImageDialog
 import com.puzzle.designsystem.component.PieceLoading
-import com.puzzle.designsystem.component.PieceRoundingButton
+import com.puzzle.designsystem.component.PieceRoundingSolidButton
 import com.puzzle.designsystem.component.PieceSubCloseTopBar
 import com.puzzle.designsystem.foundation.PieceTheme
 import com.puzzle.domain.model.profile.OpponentProfile
@@ -171,7 +171,7 @@ private fun MatchingDetailScreen(
                 PieceImageDialog(
                     imageUri = state.profile?.imageUrl,
                     buttonLabel = "매칭 수락하기",
-                    onButtonClick = { dialogType = DialogType.ACCEPT_MATCHING },
+                    onApproveClick = { dialogType = DialogType.ACCEPT_MATCHING },
                     onDismissRequest = { showDialog = false },
                 )
             }
@@ -256,14 +256,12 @@ private fun MatchingDetailScreen(
 
 @Composable
 private fun BackgroundImage(modifier: Modifier = Modifier) {
-    Box(modifier = modifier.fillMaxSize()) {
-        Image(
-            painter = painterResource(id = R.drawable.matchingdetail_bg),
-            contentDescription = "basic info 배경화면",
-            contentScale = ContentScale.Crop,
-            modifier = Modifier.matchParentSize(),
-        )
-    }
+    Image(
+        painter = painterResource(id = R.drawable.matchingdetail_bg),
+        contentDescription = "basic info 배경화면",
+        contentScale = ContentScale.Crop,
+        modifier = Modifier.fillMaxSize(),
+    )
 }
 
 @Composable
@@ -367,7 +365,7 @@ private fun MatchingDetailBottomBar(
         Spacer(modifier = Modifier.width(8.dp))
 
         if (currentPage == MatchingDetailPage.ValuePickPage) {
-            PieceRoundingButton(
+            PieceRoundingSolidButton(
                 label = stringResource(R.string.accept_matching),
                 onClick = onAcceptClick,
             )

feature/matching/src/main/java/com/puzzle/matching/graph/detail/common/component/BasicInfoHeader.kt

@@ -1,6 +1,7 @@
 package com.puzzle.matching.graph.detail.common.component
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -10,6 +11,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.puzzle.common.ui.clickable
 import com.puzzle.designsystem.R
@@ -19,8 +21,9 @@ import com.puzzle.designsystem.foundation.PieceTheme
 internal fun BasicInfoHeader(
     nickName: String,
     selfDescription: String,
-    onMoreClick: () -> Unit,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    hasMoreButton: Boolean = true,
+    onMoreClick: () -> Unit = {}
 ) {
     Column(verticalArrangement = Arrangement.spacedBy(8.dp), modifier = modifier) {
         Text(
@@ -37,13 +40,29 @@ internal fun BasicInfoHeader(
                 modifier = Modifier.weight(1f)
             )
 
-            Image(
-                painter = painterResource(id = R.drawable.ic_more),
-                contentDescription = "basic info 배경화면",
-                modifier = Modifier
-                    .size(32.dp)
-                    .clickable { onMoreClick() },
-            )
+            if (hasMoreButton) {
+                Image(
+                    painter = painterResource(id = R.drawable.ic_more),
+                    contentDescription = "basic info 배경화면",
+                    modifier = Modifier
+                        .size(32.dp)
+                        .clickable { onMoreClick() },
+                )
+            }
         }
     }
 }
+
+@Preview
+@Composable
+private fun BasicInfoHeaderPreview() {
+    PieceTheme {
+        BasicInfoHeader(
+            nickName = "nickName",
+            selfDescription = "selfDescription",
+            onMoreClick = {},
+            hasMoreButton = false,
+            modifier = Modifier.background(PieceTheme.colors.white)
+        )
+    }
+}