Merge pull request #74 from YAPP-Github/feature/MZ-194-received-envel…

…op-ui

Feature/mz 194 received envelop UI

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

@@ -6,7 +6,6 @@
     <string name="word_month_format">%d월</string>
     <string name="word_day_format">%d일</string>
     <string name="money_unit">원</string>
-    <string name="money_unit_format">%s원</string>
     <string name="content_description_search_icon">검색 아이콘</string>
     <string name="content_description_back_icon">뒤로가기 아이콘</string>
     <string name="content_description_logo_image">로고 이미지</string>

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

@@ -28,4 +28,5 @@
     <string name="word_next">다음</string>
     <string name="word_done">완료</string>
     <string name="word_apply_filter">필터 적용하기</string>
+    <string name="money_unit_format">%s원</string>
 </resources>

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

@@ -14,6 +14,7 @@ import com.susu.feature.community.navigation.navigateCommunity
 import com.susu.feature.loginsignup.navigation.LoginSignupRoute
 import com.susu.feature.mypage.navigation.navigateMyPage
 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
@@ -134,6 +135,10 @@ internal class MainNavigator(
         navController.navigateLedgerAdd()
     }
 
+    fun navigateEnvelopeAdd() {
+        navController.navigateEnvelopeAdd()
+    }
+
     fun popBackStackIfNotHome() {
         if (!isSameCurrentDestination(SentRoute.route)) {
             navController.popBackStack()

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

@@ -107,6 +107,7 @@ internal fun MainScreen(
                         navigateLedgerEdit = navigator::navigateLedgerEdit,
                         navigateLedgerFilter = navigator::navigateLedgerFilter,
                         navigateLedgerAdd = navigator::navigateLedgerAdd,
+                        navigateEnvelopAdd = navigator::navigateEnvelopeAdd,
                         onShowSnackbar = viewModel::onShowSnackbar,
                         onShowDialog = viewModel::onShowDialog,
                         handleException = viewModel::handleException,

feature/received/src/main/java/com/susu/feature/received/envelopeadd/ReceivedEnvelopeAddScreen.kt

@@ -0,0 +1,141 @@
+package com.susu.feature.received.envelopeadd
+
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.imePadding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import com.susu.core.designsystem.component.appbar.SusuProgressAppBar
+import com.susu.core.designsystem.component.appbar.icon.BackIcon
+import com.susu.core.designsystem.component.button.FilledButtonColor
+import com.susu.core.designsystem.component.button.MediumButtonStyle
+import com.susu.core.designsystem.component.button.SusuFilledButton
+import com.susu.core.designsystem.theme.SusuTheme
+import com.susu.core.ui.extension.susuDefaultAnimatedContentTransitionSpec
+import com.susu.feature.received.R
+import com.susu.feature.received.envelopeadd.content.MemoContent
+import com.susu.feature.received.envelopeadd.content.MoneyContent
+import com.susu.feature.received.envelopeadd.content.MoreContent
+import com.susu.feature.received.envelopeadd.content.NameContent
+import com.susu.feature.received.envelopeadd.content.PhoneContent
+import com.susu.feature.received.envelopeadd.content.PresentContent
+import com.susu.feature.received.envelopeadd.content.RelationshipContent
+import com.susu.feature.received.envelopeadd.content.VisitedContent
+
+enum class EnvelopeAddStep {
+    MONEY,
+    NAME,
+    RELATIONSHIP,
+    MORE,
+    VISITED,
+    PRESENT,
+    PHONE,
+    MEMO,
+}
+
+@Composable
+fun ReceivedEnvelopeAddRoute(
+    popBackStack: () -> Unit,
+) {
+    var currentStep by remember { mutableStateOf(EnvelopeAddStep.MONEY) }
+
+    ReceivedEnvelopeAddScreen(
+        currentStep = currentStep,
+        onClickBack = popBackStack,
+        onClickNext = {
+            // TODO: 수정 필요 (MORE 이후 분리 필요)
+            currentStep = when (currentStep) {
+                EnvelopeAddStep.MONEY -> EnvelopeAddStep.NAME
+                EnvelopeAddStep.NAME -> EnvelopeAddStep.RELATIONSHIP
+                EnvelopeAddStep.RELATIONSHIP -> EnvelopeAddStep.MORE
+                EnvelopeAddStep.MORE -> EnvelopeAddStep.VISITED
+                EnvelopeAddStep.VISITED -> EnvelopeAddStep.PRESENT
+                EnvelopeAddStep.PRESENT -> EnvelopeAddStep.PHONE
+                EnvelopeAddStep.PHONE -> EnvelopeAddStep.MEMO
+                else -> EnvelopeAddStep.MEMO
+            }
+        },
+    )
+}
+
+@Composable
+fun ReceivedEnvelopeAddScreen(
+    modifier: Modifier = Modifier,
+    currentStep: EnvelopeAddStep = EnvelopeAddStep.MONEY,
+    onClickBack: () -> Unit = {},
+    onClickNext: () -> Unit = {},
+) {
+    // TODO: 수정 필요
+    val relationshipList = listOf("친구", "가족", "친척", "동료", "직접 입력")
+    val friendList = listOf("김철수", "국영수", "신짱구", "홍길동")
+    val moreList = listOf("방문여부", "선물", "메모", "보낸 이의 연락처")
+    val visitedList = listOf("예", "아니요")
+
+    Column(
+        modifier = modifier
+            .background(SusuTheme.colorScheme.background15)
+            .fillMaxSize(),
+    ) {
+        SusuProgressAppBar(
+            leftIcon = {
+                BackIcon(
+                    onClick = onClickBack,
+                )
+            },
+            currentStep = currentStep.ordinal + 1,
+            entireStep = EnvelopeAddStep.entries.size,
+        )
+        AnimatedContent(
+            modifier = modifier.weight(1f),
+            targetState = currentStep,
+            label = "SentEnvelopeAddScreen",
+            transitionSpec = {
+                susuDefaultAnimatedContentTransitionSpec(
+                    leftDirectionCondition = targetState.ordinal > initialState.ordinal,
+                )
+            },
+        ) { targetState ->
+            when (targetState) {
+                EnvelopeAddStep.MONEY -> MoneyContent()
+                EnvelopeAddStep.NAME -> NameContent(friendList = friendList)
+                EnvelopeAddStep.RELATIONSHIP -> RelationshipContent(relationshipList = relationshipList)
+                EnvelopeAddStep.MORE -> MoreContent(moreList = moreList)
+                EnvelopeAddStep.VISITED -> VisitedContent(
+                    event = "결혼식",
+                    visitedList = visitedList,
+                )
+                EnvelopeAddStep.PRESENT -> PresentContent()
+                EnvelopeAddStep.PHONE -> PhoneContent(name = "김철수")
+                EnvelopeAddStep.MEMO -> MemoContent()
+            }
+        }
+        SusuFilledButton(
+            color = FilledButtonColor.Black,
+            style = MediumButtonStyle.height60,
+            shape = RectangleShape,
+            text = stringResource(id = com.susu.core.ui.R.string.word_next),
+            onClick = onClickNext,
+            modifier = modifier
+                .fillMaxWidth()
+                .imePadding(),
+        )
+    }
+}
+
+@Preview
+@Composable
+fun ReceivedEnvelopeAddScreenPreview() {
+    SusuTheme {
+        ReceivedEnvelopeAddScreen()
+    }
+}

feature/received/src/main/java/com/susu/feature/received/envelopeadd/content/MemoContent.kt

@@ -0,0 +1,66 @@
+package com.susu.feature.received.envelopeadd.content
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+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.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import com.susu.core.designsystem.component.textfield.SusuBasicTextField
+import com.susu.core.designsystem.theme.Gray100
+import com.susu.core.designsystem.theme.Gray40
+import com.susu.core.designsystem.theme.SusuTheme
+import com.susu.feature.received.R
+
+@Composable
+fun MemoContent(
+    modifier: Modifier = Modifier,
+    padding: PaddingValues = PaddingValues(
+        horizontal = SusuTheme.spacing.spacing_m,
+        vertical = SusuTheme.spacing.spacing_xl,
+    ),
+) {
+    var memo by remember { mutableStateOf("") }
+
+    Column(
+        modifier = modifier
+            .fillMaxSize()
+            .padding(padding),
+    ) {
+        Text(
+            text = stringResource(R.string.memo_content_title),
+            style = SusuTheme.typography.title_m,
+            color = Gray100,
+        )
+        Spacer(
+            modifier = modifier
+                .size(SusuTheme.spacing.spacing_m),
+        )
+        SusuBasicTextField(
+            text = memo,
+            onTextChange = { memo = it },
+            placeholder = stringResource(R.string.memo_content_placeholder),
+            placeholderColor = Gray40,
+            modifier = modifier.fillMaxWidth(),
+        )
+        Spacer(modifier = modifier.size(SusuTheme.spacing.spacing_xl))
+    }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFFF6F6F6)
+@Composable
+fun MemoContentPreview() {
+    SusuTheme {
+        MemoContent()
+    }
+}

feature/received/src/main/java/com/susu/feature/received/envelopeadd/content/MoneyContent.kt

@@ -0,0 +1,95 @@
+package com.susu.feature.received.envelopeadd.content
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.PaddingValues
+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.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import com.susu.core.designsystem.component.button.FilledButtonColor
+import com.susu.core.designsystem.component.button.SmallButtonStyle
+import com.susu.core.designsystem.component.button.SusuFilledButton
+import com.susu.core.designsystem.component.textfield.SusuPriceTextField
+import com.susu.core.designsystem.theme.Gray100
+import com.susu.core.designsystem.theme.SusuTheme
+import com.susu.core.ui.extension.toMoneyFormat
+import com.susu.feature.received.R
+
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+fun MoneyContent(
+    modifier: Modifier = Modifier,
+    padding: PaddingValues = PaddingValues(
+        horizontal = SusuTheme.spacing.spacing_m,
+        vertical = SusuTheme.spacing.spacing_xl,
+    ),
+) {
+    val moneyList = listOf(
+        10000,
+        30000,
+        50000,
+        100000,
+        500000,
+    )
+    var clickedMoney by remember { mutableStateOf("") }
+
+    Column(
+        modifier = modifier
+            .fillMaxSize()
+            .padding(padding),
+    ) {
+        Text(
+            text = stringResource(R.string.money_content_title),
+            style = SusuTheme.typography.title_m,
+            color = Gray100,
+        )
+        Spacer(
+            modifier = modifier
+                .size(SusuTheme.spacing.spacing_m),
+        )
+        SusuPriceTextField(
+            text = clickedMoney,
+            onTextChange = { clickedMoney = it },
+            placeholder = stringResource(R.string.money_content_placeholder),
+        )
+        Spacer(
+            modifier = modifier
+                .size(SusuTheme.spacing.spacing_xxl),
+        )
+        FlowRow(
+            horizontalArrangement = Arrangement.spacedBy(SusuTheme.spacing.spacing_xxs),
+            verticalArrangement = Arrangement.spacedBy(SusuTheme.spacing.spacing_xxs),
+        ) {
+            for (money in moneyList) {
+                SusuFilledButton(
+                    color = FilledButtonColor.Orange,
+                    style = SmallButtonStyle.height32,
+                    text = stringResource(id = com.susu.core.ui.R.string.money_unit_format, money.toMoneyFormat()),
+                    onClick = {
+                        clickedMoney = money.toString()
+                    },
+                )
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFFF6F6F6)
+@Composable
+fun MoneyContentPreview() {
+    SusuTheme {
+        MoneyContent()
+    }
+}