diff --git a/core/designsystem/src/main/java/com/withpeace/withpeace/core/designsystem/theme/Type.kt b/core/designsystem/src/main/java/com/withpeace/withpeace/core/designsystem/theme/Type.kt index 751781fc..33507297 100644 --- a/core/designsystem/src/main/java/com/withpeace/withpeace/core/designsystem/theme/Type.kt +++ b/core/designsystem/src/main/java/com/withpeace/withpeace/core/designsystem/theme/Type.kt @@ -181,4 +181,10 @@ data class WithPeaceTypography( lineHeight = 21.sp, letterSpacing = 0.16.sp, ), + val medium16LineHeight20: TextStyle = TextStyle( + fontFamily = PretendardFont, + fontWeight = FontWeight.Medium, + fontSize = 16.sp, + lineHeight = 20.sp, + ), ) diff --git a/feature/balancegame/src/main/java/com/withpeace/withpeace/feature/balancegame/BalanceGameScreen.kt b/feature/balancegame/src/main/java/com/withpeace/withpeace/feature/balancegame/BalanceGameScreen.kt index b9bfcd61..88aec29f 100644 --- a/feature/balancegame/src/main/java/com/withpeace/withpeace/feature/balancegame/BalanceGameScreen.kt +++ b/feature/balancegame/src/main/java/com/withpeace/withpeace/feature/balancegame/BalanceGameScreen.kt @@ -1,24 +1,47 @@ package com.withpeace.withpeace.feature.balancegame +import androidx.compose.foundation.Image import androidx.compose.foundation.background +import androidx.compose.foundation.border +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.offset +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.HorizontalDivider +import androidx.compose.material3.LinearProgressIndicator import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.res.stringResource +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.StrokeCap +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import androidx.hilt.navigation.compose.hiltViewModel import com.withpeace.withpeace.core.designsystem.theme.WithpeaceTheme import com.withpeace.withpeace.core.designsystem.ui.WithPeaceBackButtonTopAppBar @Composable fun BalanceGameRoute( + viewModel: BalanceGameViewModel = hiltViewModel(), onShowSnackBar: (String) -> Unit, onClickBackButton: () -> Unit, ) { BalanceGameScreen( onClickBackButton = onClickBackButton, + onClickBeforeDay = viewModel::onClickBeforeDay, + onClickAfterDay = viewModel::onClickAfterDay, ) } @@ -26,6 +49,8 @@ fun BalanceGameRoute( fun BalanceGameScreen( modifier: Modifier = Modifier, onClickBackButton: () -> Unit, + onClickBeforeDay: () -> Unit, + onClickAfterDay: () -> Unit, ) { Column( modifier = modifier @@ -47,6 +72,201 @@ fun BalanceGameScreen( ) }, ) + HorizontalDivider( + color = WithpeaceTheme.colors.SystemGray3, + modifier = modifier.fillMaxWidth(), + thickness = 1.dp, + ) + Spacer(modifier = modifier.height(24.dp)) + Box( + modifier = modifier + .fillMaxWidth() + .padding(horizontal = 24.dp), + ) { + Image( + modifier = modifier + .align(Alignment.CenterStart) + .clickable { onClickBeforeDay() }, + painter = painterResource(R.drawable.ic_left), + contentDescription = "전날", + ) + Text( + text = "오늘의 밸런스 게임", + modifier = modifier + .align(Alignment.Center) + .background( + color = WithpeaceTheme.colors.SubPurple, + shape = RoundedCornerShape(999.dp), + ) + .padding(horizontal = 14.dp, vertical = 8.dp), + style = WithpeaceTheme.typography.disablePolicyTitle, + color = WithpeaceTheme.colors.MainPurple, + ) + Image( + modifier = modifier.align(Alignment.CenterEnd), + painter = painterResource(R.drawable.ic_right), + contentDescription = "다음날", + ) + } + Spacer(modifier = modifier.height(24.dp)) + Text( + "내가 가지고 싶은 복지 카드는?", + style = WithpeaceTheme.typography.title2, + color = WithpeaceTheme.colors.SnackbarBlack, + ) + Spacer(modifier = modifier.height(32.dp)) + // isActive && selectedStatus == null & isToday + // + Box( + modifier = modifier + .fillMaxWidth() + .padding(horizontal = 24.dp), + ) { + Column( + modifier + .fillMaxWidth() + .border( + width = 1.dp, + color = WithpeaceTheme.colors.MainPurple, + shape = RoundedCornerShape(16.dp), + ) + .align(Alignment.BottomCenter), + horizontalAlignment = Alignment.CenterHorizontally, + ) { + Spacer(modifier = modifier.height(28.dp)) + Text( + "오프라인에서만 쓸 수 있는 80만원 카드", + style = WithpeaceTheme.typography.body, + color = WithpeaceTheme.colors.SnackbarBlack, + ) + Spacer(modifier = modifier.height(20.dp)) + Row( + modifier.padding(start = 28.dp, end = 24.dp), + verticalAlignment = Alignment.CenterVertically, + ) { + LinearProgressIndicator( + gapSize = (-10).dp, // 갭을 -2이하로 안할시 진행도와 남은 track이 분리되어 보임 + strokeCap = StrokeCap.Round, + trackColor = Color(0xffd9d9d9), + drawStopIndicator = {}, + color = WithpeaceTheme.colors.MainPurple, + progress = { 0.7f }, + ) + Spacer(modifier.width(6.dp)) + Text( + "68%", + style = WithpeaceTheme.typography.Tag, + color = WithpeaceTheme.colors.SystemGray1, + ) + } + Spacer(modifier = modifier.height(20.dp)) + } + Image( + painter = painterResource(R.drawable.ic_a), + modifier = modifier + .offset((-7).dp, (-5).dp) + .align(Alignment.TopStart) + .background( + shape = CircleShape, + color = WithpeaceTheme.colors.MainPurple, + ) + .padding(horizontal = 8.3.dp, vertical = 7.7.dp), + contentDescription = "a 선택", + ) + } + Spacer(modifier = modifier.height(16.dp)) + Text( + text = "VS", + style = WithpeaceTheme.typography.title2, + color = WithpeaceTheme.colors.MainPurple, + ) + Spacer(modifier = modifier.height(16.dp)) + Box( + modifier = modifier + .fillMaxWidth() + .padding(horizontal = 24.dp), + ) { + Column( + modifier + .fillMaxWidth() + .border( + width = 1.dp, + color = WithpeaceTheme.colors.MainPurple, + shape = RoundedCornerShape(16.dp), + ) + .align(Alignment.BottomCenter), + horizontalAlignment = Alignment.CenterHorizontally, + ) { + Spacer(modifier = modifier.height(28.dp)) + Text( + "오프라인에서만 쓸 수 있는 80만원 카드", + style = WithpeaceTheme.typography.body, + color = WithpeaceTheme.colors.SnackbarBlack, + ) + Spacer(modifier = modifier.height(20.dp)) + Row( + modifier.padding(start = 28.dp, end = 24.dp), + verticalAlignment = Alignment.CenterVertically, + ) { + LinearProgressIndicator( + gapSize = (-10).dp, // 갭을 -2이하로 안할시 진행도와 남은 track이 분리되어 보임 + strokeCap = StrokeCap.Round, + trackColor = Color(0xffd9d9d9), + drawStopIndicator = {}, + color = WithpeaceTheme.colors.MainPurple, + progress = { 0.7f }, + ) + Spacer(modifier.width(6.dp)) + Text( + "68%", + style = WithpeaceTheme.typography.Tag, + color = WithpeaceTheme.colors.SystemGray1, + ) + } + Spacer(modifier = modifier.height(20.dp)) + } + Image( + painter = painterResource(R.drawable.ic_b), + modifier = modifier + .offset((-7).dp, (-5).dp) + .align(Alignment.TopStart) + .background( + shape = CircleShape, + color = WithpeaceTheme.colors.MainPurple, + ) + .padding(horizontal = 9.0.dp, vertical = 7.7.dp), + contentDescription = "b 선택", + ) + } + Spacer(modifier = modifier.height(12.dp)) + Row( + modifier = modifier + .fillMaxWidth() + .padding(horizontal = 24.dp), + horizontalArrangement = Arrangement.End, + ) { + Image( + painter = painterResource(R.drawable.ic_user), + contentDescription = "", + ) + Spacer(modifier = modifier.width(2.dp)) + Text( + "100명 참여", + style = WithpeaceTheme.typography.medium16LineHeight20, + color = WithpeaceTheme.colors.SystemGray2, + ) + } } } +} + +@Composable +@Preview +fun BalanceGamePreview() { + WithpeaceTheme { + BalanceGameScreen( + onClickBackButton = {}, + onClickBeforeDay = {}, + ) { } + } } \ No newline at end of file