Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/mz 194 received envelop UI #74

Merged
merged 2 commits into from
Jan 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion core/designsystem/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions core/ui/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -134,6 +135,10 @@ internal class MainNavigator(
navController.navigateLedgerAdd()
}

fun navigateEnvelopeAdd() {
navController.navigateEnvelopeAdd()
}

fun popBackStackIfNotHome() {
if (!isSameCurrentDestination(SentRoute.route)) {
navController.popBackStack()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
@@ -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()
}
}
Original file line number Diff line number Diff line change
@@ -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()
}
}
Original file line number Diff line number Diff line change
@@ -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()
}
}
Loading