Merge pull request #70 from YAPP-Github/feature/MZ-185-sent-envelope-add

Feature/mz 185 sent envelope add

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

@@ -23,6 +23,7 @@ import com.susu.feature.received.navigation.navigateReceived
 import com.susu.feature.sent.navigation.SentRoute
 import com.susu.feature.sent.navigation.navigateSent
 import com.susu.feature.sent.navigation.navigateSentEnvelope
+import com.susu.feature.sent.navigation.navigateSentEnvelopeAdd
 import com.susu.feature.sent.navigation.navigateSentEnvelopeDetail
 import com.susu.feature.sent.navigation.navigateSentEnvelopeEdit
 import com.susu.feature.statistics.navigation.navigateStatistics
@@ -93,6 +94,10 @@ internal class MainNavigator(
         navController.navigateSentEnvelopeEdit()
     }
 
+    fun navigateSentEnvelopeAdd() {
+        navController.navigateSentEnvelopeAdd()
+    }
+
     fun navigateLogin() {
         navController.navigate(LoginSignupRoute.Parent.Login.route) {
             popUpTo(id = navController.graph.id) {

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

@@ -82,6 +82,7 @@ internal fun MainScreen(
                         navigateSentEnvelope = navigator::navigateSentEnvelope,
                         navigateSentEnvelopeDetail = navigator::navigateSentEnvelopeDetail,
                         navigateSentEnvelopeEdit = navigator::navigateSentEnvelopeEdit,
+                        navigateSentEnvelopeAdd = navigator::navigateSentEnvelopeAdd,
                     )
 
                     receivedNavGraph(

feature/sent/src/main/java/com/susu/feature/envelopeadd/SentEnvelopeAddScreen.kt

@@ -0,0 +1,150 @@
+package com.susu.feature.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.envelopeadd.content.DateContent
+import com.susu.feature.envelopeadd.content.EventContent
+import com.susu.feature.envelopeadd.content.MemoContent
+import com.susu.feature.envelopeadd.content.MoneyContent
+import com.susu.feature.envelopeadd.content.MoreContent
+import com.susu.feature.envelopeadd.content.NameContent
+import com.susu.feature.envelopeadd.content.PhoneContent
+import com.susu.feature.envelopeadd.content.PresentContent
+import com.susu.feature.envelopeadd.content.RelationshipContent
+import com.susu.feature.envelopeadd.content.VisitedContent
+import com.susu.feature.sent.R
+
+enum class EnvelopeAddStep {
+    MONEY,
+    NAME,
+    RELATIONSHIP,
+    EVENT,
+    DATE,
+    MORE,
+    VISITED,
+    PRESENT,
+    PHONE,
+    MEMO,
+}
+
+@Composable
+fun SentEnvelopeAddRoute(
+    popBackStack: () -> Unit,
+) {
+    var currentStep by remember { mutableStateOf(EnvelopeAddStep.MONEY) }
+
+    SentEnvelopeAddScreen(
+        currentStep = currentStep,
+        onClickBack = popBackStack,
+        onClickNext = {
+            // TODO: 수정 필요 (MORE 이후 분리 필요)
+            currentStep = when (currentStep) {
+                EnvelopeAddStep.MONEY -> EnvelopeAddStep.NAME
+                EnvelopeAddStep.NAME -> EnvelopeAddStep.RELATIONSHIP
+                EnvelopeAddStep.RELATIONSHIP -> EnvelopeAddStep.EVENT
+                EnvelopeAddStep.EVENT -> EnvelopeAddStep.DATE
+                EnvelopeAddStep.DATE -> EnvelopeAddStep.MORE
+                EnvelopeAddStep.MORE -> EnvelopeAddStep.VISITED
+                EnvelopeAddStep.VISITED -> EnvelopeAddStep.PRESENT
+                EnvelopeAddStep.PRESENT -> EnvelopeAddStep.PHONE
+                EnvelopeAddStep.PHONE -> EnvelopeAddStep.MEMO
+                else -> EnvelopeAddStep.MEMO
+            }
+        },
+    )
+}
+
+@Composable
+fun SentEnvelopeAddScreen(
+    modifier: Modifier = Modifier,
+    currentStep: EnvelopeAddStep = EnvelopeAddStep.MONEY,
+    onClickBack: () -> Unit = {},
+    onClickNext: () -> Unit = {},
+) {
+    // TODO: 수정 필요
+    val relationshipList = listOf("친구", "가족", "친척", "동료", "직접 입력")
+    val friendList = listOf("김철수", "국영수", "신짱구", "홍길동")
+    val eventList = 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.EVENT -> EventContent(eventList = eventList)
+                EnvelopeAddStep.DATE -> DateContent(name = "김철수")
+                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(R.string.sent_envelope_add_next),
+            onClick = onClickNext,
+            modifier = modifier
+                .fillMaxWidth()
+                .imePadding(),
+        )
+    }
+}
+
+@Preview
+@Composable
+fun SentEnvelopeAddScreenPreview() {
+    SusuTheme {
+        SentEnvelopeAddScreen()
+    }
+}

feature/sent/src/main/java/com/susu/feature/envelopeadd/content/DateContent.kt

@@ -0,0 +1,97 @@
+package com.susu.feature.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.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.ExperimentalMaterial3Api
+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.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.susu.core.designsystem.component.bottomsheet.datepicker.SusuDatePickerBottomSheet
+import com.susu.core.designsystem.theme.Gray100
+import com.susu.core.designsystem.theme.Gray60
+import com.susu.core.designsystem.theme.SusuTheme
+import com.susu.core.ui.extension.susuClickable
+import com.susu.feature.envelopeadd.content.component.SelectDateRow
+import com.susu.feature.sent.R
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun DateContent(
+    modifier: Modifier = Modifier,
+    padding: PaddingValues = PaddingValues(
+        horizontal = SusuTheme.spacing.spacing_m,
+        vertical = SusuTheme.spacing.spacing_xl,
+    ),
+    year: Int? = null,
+    month: Int? = null,
+    day: Int? = null,
+    name: String,
+) {
+    var isSheetOpen by remember { mutableStateOf(false) }
+
+    val title = buildAnnotatedString {
+        withStyle(style = SpanStyle(color = Gray60)) {
+            append(name + stringResource(R.string.sent_envelope_add_date_to))
+        }
+        withStyle(style = SpanStyle(color = Gray100)) {
+            append(stringResource(R.string.sent_envelope_add_date_title))
+        }
+    }
+
+    Column(
+        modifier = modifier
+            .fillMaxSize()
+            .padding(padding),
+    ) {
+        Text(
+            text = title,
+            style = SusuTheme.typography.title_m,
+            color = Gray100,
+        )
+        Spacer(
+            modifier = modifier
+                .size(SusuTheme.spacing.spacing_m),
+        )
+        SelectDateRow(
+            year = year,
+            month = month,
+            day = day,
+            modifier = modifier.susuClickable(
+                rippleEnabled = false,
+                onClick = { isSheetOpen = true },
+            ),
+        )
+    }
+
+    // DatePickerBottomSheet
+    if (isSheetOpen) {
+        SusuDatePickerBottomSheet(
+            maximumContainerHeight = 346.dp,
+            onDismissRequest = { _, _, _ -> isSheetOpen = false },
+        )
+    }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFFF6F6F6)
+@Composable
+fun DateContentPreview() {
+    SusuTheme {
+        DateContent(
+            name = "김철수",
+        )
+    }
+}

feature/sent/src/main/java/com/susu/feature/envelopeadd/content/EventContent.kt

@@ -0,0 +1,96 @@
+package com.susu.feature.envelopeadd.content
+
+import androidx.compose.foundation.layout.Arrangement
+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.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+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.GhostButtonColor
+import com.susu.core.designsystem.component.button.MediumButtonStyle
+import com.susu.core.designsystem.component.button.SusuFilledButton
+import com.susu.core.designsystem.component.button.SusuGhostButton
+import com.susu.core.designsystem.theme.Gray100
+import com.susu.core.designsystem.theme.SusuTheme
+import com.susu.feature.sent.R
+
+@Composable
+fun EventContent(
+    modifier: Modifier = Modifier,
+    padding: PaddingValues = PaddingValues(
+        horizontal = SusuTheme.spacing.spacing_m,
+        vertical = SusuTheme.spacing.spacing_xl,
+    ),
+    eventList: List<String>,
+) {
+    val scrollState = rememberScrollState()
+    var selectedItem by remember { mutableStateOf(-1) }
+
+    Column(
+        modifier = modifier
+            .fillMaxSize()
+            .padding(padding)
+            .verticalScroll(scrollState),
+    ) {
+        Text(
+            text = stringResource(id = R.string.sent_envelope_add_relationship_title),
+            style = SusuTheme.typography.title_m,
+            color = Gray100,
+        )
+        Spacer(
+            modifier = modifier
+                .size(SusuTheme.spacing.spacing_xxl),
+        )
+        Column(
+            verticalArrangement = Arrangement.spacedBy(SusuTheme.spacing.spacing_xxs),
+        ) {
+            eventList.forEachIndexed { index, event ->
+                if (selectedItem == index) {
+                    SusuFilledButton(
+                        color = FilledButtonColor.Orange,
+                        style = MediumButtonStyle.height60,
+                        text = event,
+                        onClick = {
+                            selectedItem = index
+                        },
+                        modifier = modifier.fillMaxWidth(),
+                    )
+                } else {
+                    SusuGhostButton(
+                        color = GhostButtonColor.Black,
+                        style = MediumButtonStyle.height60,
+                        text = event,
+                        onClick = {
+                            selectedItem = index
+                        },
+                        modifier = modifier.fillMaxWidth(),
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFFF6F6F6)
+@Composable
+fun EventContentPreview() {
+    val eventList = mutableListOf("결혼식", "돌잔치", "장례식", "생일 기념일", "직접 입력")
+
+    SusuTheme {
+        EventContent(eventList = eventList)
+    }
+}