Skip to content

Commit

Permalink
Merge pull request #74 from YAPP-Github/feature/MZ-194-received-envel…
Browse files Browse the repository at this point in the history
…op-ui

Feature/mz 194 received envelop UI
  • Loading branch information
jinukeu authored Jan 19, 2024
2 parents 1a573d1 + 5e89331 commit 1e2a44e
Show file tree
Hide file tree
Showing 19 changed files with 932 additions and 1 deletion.
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

0 comments on commit 1e2a44e

Please sign in to comment.