Feature/mz 195 received envelop detail UI

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

@@ -35,4 +35,8 @@
     <string name="sns_google">구글</string>
     <string name="word_enrollment">등록</string>
     <string name="money_unit_format">%s원</string>
+    <string name="word_yes">예</string>
+    <string name="word_no">아니요</string>
+    <string name="word_phone_number">연락처</string>
+    <string name="word_memo">메모</string>
 </resources>

feature/navigator/src/main/java/com/susu/feature/navigator/MainNavigator.kt

@@ -16,13 +16,15 @@ import com.susu.feature.mypage.navigation.navigateMyPage
 import com.susu.feature.mypage.navigation.navigateMyPageInfo
 import com.susu.feature.mypage.navigation.navigateMyPageSocial
 import com.susu.feature.received.navigation.ReceivedRoute
-import com.susu.feature.received.navigation.navigateEnvelopeAdd
 import com.susu.feature.received.navigation.navigateLedgerAdd
 import com.susu.feature.received.navigation.navigateLedgerDetail
 import com.susu.feature.received.navigation.navigateLedgerEdit
 import com.susu.feature.received.navigation.navigateLedgerFilter
 import com.susu.feature.received.navigation.navigateLedgerSearch
 import com.susu.feature.received.navigation.navigateReceived
+import com.susu.feature.received.navigation.navigateReceivedEnvelopeAdd
+import com.susu.feature.received.navigation.navigateReceivedEnvelopeDetail
+import com.susu.feature.received.navigation.navigateReceivedEnvelopeEdit
 import com.susu.feature.sent.navigation.SentRoute
 import com.susu.feature.sent.navigation.navigateSent
 import com.susu.feature.sent.navigation.navigateSentEnvelope
@@ -50,6 +52,8 @@ internal class MainNavigator(
             in listOf(
                 ReceivedRoute.ledgerSearchRoute,
                 ReceivedRoute.ledgerFilterRoute,
+                ReceivedRoute.envelopeDetailRoute,
+                ReceivedRoute.envelopeEditRoute,
                 SentRoute.sentEnvelopeRoute,
                 SentRoute.sentEnvelopeDetailRoute,
                 SentRoute.sentEnvelopeEditRoute,
@@ -145,8 +149,16 @@ internal class MainNavigator(
         navController.navigateMyPageSocial()
     }
 
-    fun navigateEnvelopeAdd() {
-        navController.navigateEnvelopeAdd()
+    fun navigateReceivedEnvelopeAdd() {
+        navController.navigateReceivedEnvelopeAdd()
+    }
+
+    fun navigateReceivedEnvelopeDetail() {
+        navController.navigateReceivedEnvelopeDetail()
+    }
+
+    fun navigateReceivedEnvelopeEdit() {
+        navController.navigateReceivedEnvelopeEdit()
     }
 
     fun popBackStackIfNotHome() {

feature/navigator/src/main/java/com/susu/feature/navigator/MainScreen.kt

@@ -107,7 +107,9 @@ internal fun MainScreen(
                         navigateLedgerEdit = navigator::navigateLedgerEdit,
                         navigateLedgerFilter = navigator::navigateLedgerFilter,
                         navigateLedgerAdd = navigator::navigateLedgerAdd,
-                        navigateEnvelopAdd = navigator::navigateEnvelopeAdd,
+                        navigateEnvelopAdd = navigator::navigateReceivedEnvelopeAdd,
+                        navigateEnvelopeDetail = navigator::navigateReceivedEnvelopeDetail,
+                        navigateEnvelopeEdit = navigator::navigateReceivedEnvelopeEdit,
                         onShowSnackbar = viewModel::onShowSnackbar,
                         onShowDialog = viewModel::onShowDialog,
                         handleException = viewModel::handleException,

feature/received/src/main/java/com/susu/feature/received/envelopedetail/ReceivedEnvelopeDetailScreen.kt

@@ -0,0 +1,126 @@
+package com.susu.feature.received.envelopedetail
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+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.Gray100
+import com.susu.core.designsystem.theme.SusuTheme
+import com.susu.feature.received.envelopedetail.component.DetailItem
+
+@Composable
+fun ReceivedEnvelopeDetailRoute(
+    @Suppress("detekt:UnusedParameter")
+    popBackStack: () -> Unit,
+    navigateReceivedEnvelopeEdit: () -> Unit,
+) {
+    ReceivedEnvelopeDetailScreen(
+        onClickEdit = navigateReceivedEnvelopeEdit,
+    )
+}
+
+@Composable
+fun ReceivedEnvelopeDetailScreen(
+    modifier: Modifier = Modifier,
+    onClickBackIcon: () -> Unit = {},
+    onClickEdit: () -> Unit = {},
+    onClickDelete: () -> Unit = {},
+) {
+    val scrollState = rememberScrollState()
+
+    Box(
+        modifier = modifier
+            .background(SusuTheme.colorScheme.background10),
+    ) {
+        Column {
+            SusuDefaultAppBar(
+                leftIcon = {
+                    BackIcon(
+                        onClick = onClickBackIcon,
+                    )
+                },
+                actions = {
+                    EditText(
+                        onClick = onClickEdit,
+                    )
+                    Spacer(modifier = modifier.size(SusuTheme.spacing.spacing_m))
+                    DeleteText(
+                        onClick = onClickDelete,
+                    )
+                    Spacer(modifier = modifier.size(SusuTheme.spacing.spacing_m))
+                },
+            )
+            // TODO: text 수정
+            Column(
+                modifier = modifier
+                    .fillMaxSize()
+                    .padding(
+                        start = SusuTheme.spacing.spacing_m,
+                        end = SusuTheme.spacing.spacing_m,
+                        top = SusuTheme.spacing.spacing_xl,
+                    )
+                    .verticalScroll(scrollState),
+            ) {
+                Text(
+                    text = "150,000원",
+                    style = SusuTheme.typography.title_xxl,
+                    color = Gray100,
+                )
+                Spacer(modifier = modifier.size(SusuTheme.spacing.spacing_m))
+                Column {
+                    DetailItem(
+                        categoryText = "이름",
+                        contentText = "김철수",
+                        isEmptyContent = false,
+                    )
+                    DetailItem(
+                        categoryText = "나와의 관계",
+                        contentText = "친구",
+                        isEmptyContent = false,
+                    )
+                    DetailItem(
+                        categoryText = "방문 여부",
+                        contentText = "예",
+                        isEmptyContent = false,
+                    )
+                    DetailItem(
+                        categoryText = "선물",
+                        contentText = "한끼 식사",
+                        isEmptyContent = false,
+                    )
+                    DetailItem(
+                        categoryText = "연락처",
+                        contentText = "01012345678",
+                        isEmptyContent = false,
+                    )
+                    DetailItem(
+                        categoryText = "메모",
+                        contentText = "가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하",
+                        isEmptyContent = false,
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun ReceivedEnvelopeDetailScreenPreview() {
+    SusuTheme {
+        ReceivedEnvelopeDetailScreen()
+    }
+}

feature/received/src/main/java/com/susu/feature/received/envelopedetail/component/DetailItem.kt

@@ -0,0 +1,72 @@
+package com.susu.feature.received.envelopedetail.component
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+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.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.susu.core.designsystem.theme.Gray100
+import com.susu.core.designsystem.theme.Gray60
+import com.susu.core.designsystem.theme.SusuTheme
+
+@Composable
+fun DetailItem(
+    modifier: Modifier = Modifier,
+    categoryText: String,
+    categoryStyle: TextStyle = SusuTheme.typography.title_xxs,
+    categoryTextColor: Color = Gray60,
+    categoryWidth: Dp = 72.dp,
+    contentText: String,
+    contentStyle: TextStyle = SusuTheme.typography.title_s,
+    contentColor: Color = Gray100,
+    isEmptyContent: Boolean,
+    padding: PaddingValues = PaddingValues(vertical = SusuTheme.spacing.spacing_m),
+) {
+    if (!isEmptyContent) {
+        Row(
+            modifier = modifier
+                .fillMaxWidth()
+                .padding(padding),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Text(
+                text = categoryText,
+                style = categoryStyle,
+                color = categoryTextColor,
+                modifier = modifier
+                    .width(categoryWidth)
+                    .align(Alignment.Top),
+            )
+            Spacer(modifier = modifier.size(SusuTheme.spacing.spacing_m))
+            Text(
+                text = contentText,
+                style = contentStyle,
+                color = contentColor,
+                modifier = modifier.weight(1f),
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xffffff)
+@Composable
+fun DetailItem() {
+    SusuTheme {
+        DetailItem(
+            categoryText = "경조사",
+            contentText = "결혼식",
+            isEmptyContent = false,
+        )
+    }
+}