From 293a417a8969d88584267f846f34edf22e3e0065 Mon Sep 17 00:00:00 2001 From: jinukeu Date: Thu, 25 Jan 2024 15:57:24 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20SusuButton=20-=20TextModifier,=20Te?= =?UTF-8?q?xtAlign=20=EC=86=8D=EC=84=B1=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../susu/core/designsystem/component/button/BasicButton.kt | 2 ++ .../core/designsystem/component/button/SusuFilledButton.kt | 6 +++++- .../core/designsystem/component/button/SusuGhostButton.kt | 6 +++++- .../core/designsystem/component/button/SusuLinedButton.kt | 7 ++++++- 4 files changed, 18 insertions(+), 3 deletions(-) diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/BasicButton.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/BasicButton.kt index 5cecee22..7b590248 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/BasicButton.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/BasicButton.kt @@ -28,6 +28,7 @@ import com.susu.core.ui.extension.susuClickable fun BasicButton( modifier: Modifier = Modifier, shape: Shape = RectangleShape, + textModifier: Modifier = Modifier, text: String? = null, textStyle: TextStyle = TextStyle.Default, contentColor: Color = Color.Unspecified, @@ -72,6 +73,7 @@ fun BasicButton( text?.let { Text( + modifier = textModifier, text = it, style = textStyle, color = contentColor, diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuFilledButton.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuFilledButton.kt index a01346f0..0d62e485 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuFilledButton.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuFilledButton.kt @@ -12,6 +12,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Shape import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.susu.core.designsystem.R @@ -49,6 +50,8 @@ enum class FilledButtonColor( fun SusuFilledButton( modifier: Modifier = Modifier, shape: Shape = RoundedCornerShape(4.dp), + textModifier: Modifier = Modifier, + textAlign: TextAlign = TextAlign.Unspecified, text: String? = null, color: FilledButtonColor, style: @Composable () -> ButtonStyle, @@ -63,8 +66,9 @@ fun SusuFilledButton( BasicButton( modifier = modifier, shape = shape, + textModifier = textModifier, text = text, - textStyle = textStyle, + textStyle = textStyle.copy(textAlign = textAlign), contentColor = if (isActive) activeContentColor else inactiveContentColor, rippleColor = rippleColor, backgroundColor = if (isActive) activeBackgroundColor else inactiveBackgroundColor, diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuGhostButton.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuGhostButton.kt index b372b4a1..1b904b93 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuGhostButton.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuGhostButton.kt @@ -12,6 +12,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Shape import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.susu.core.designsystem.R @@ -49,6 +50,8 @@ enum class GhostButtonColor( fun SusuGhostButton( modifier: Modifier = Modifier, shape: Shape = RoundedCornerShape(4.dp), + textModifier: Modifier = Modifier, + textAlign: TextAlign = TextAlign.Unspecified, text: String? = null, color: GhostButtonColor, style: @Composable () -> ButtonStyle, @@ -64,8 +67,9 @@ fun SusuGhostButton( BasicButton( modifier = modifier, shape = shape, + textModifier = textModifier, text = text, - textStyle = textStyle, + textStyle = textStyle.copy(textAlign = textAlign), contentColor = if (isActive) activeContentColor else inactiveContentColor, rippleColor = rippleColor, backgroundColor = if (isActive) activeBackgroundColor else inactiveBackgroundColor, diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuLinedButton.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuLinedButton.kt index caacb381..15d975b1 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuLinedButton.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuLinedButton.kt @@ -8,10 +8,12 @@ import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Icon import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Shape import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.susu.core.designsystem.R @@ -56,6 +58,8 @@ enum class LinedButtonColor( fun SusuLinedButton( modifier: Modifier = Modifier, shape: Shape = RoundedCornerShape(4.dp), + textModifier: Modifier = Modifier, + textAlign: TextAlign = TextAlign.Unspecified, text: String? = null, color: LinedButtonColor, style: @Composable () -> ButtonStyle, @@ -70,8 +74,9 @@ fun SusuLinedButton( BasicButton( modifier = modifier, shape = shape, + textModifier = textModifier, text = text, - textStyle = textStyle, + textStyle = textStyle.copy(textAlign = textAlign), borderWidth = 1.dp, borderColor = if (isActive) activeBorderColor else inactiveBorderColor, contentColor = if (isActive) activeContentColor else inactiveContentColor, From 7cc107413b2720bf9afef810eacba07f93964ded Mon Sep 17 00:00:00 2001 From: jinukeu Date: Thu, 25 Jan 2024 19:23:33 +0900 Subject: [PATCH 2/4] feat: CommunityScreen ui --- .../component/button/SusuFloatingButton.kt | 8 +- core/ui/src/main/res/values/strings.xml | 1 + .../susu/feature/community/CommunityScreen.kt | 313 +++++++++++++++++- .../navigation/CommunityNavigation.kt | 3 +- .../src/main/res/drawable/ic_report.xml | 15 + .../src/main/res/drawable/ic_uncheck.xml | 9 + .../src/main/res/drawable/ic_vote.xml | 9 + .../src/main/res/drawable/ic_vote_add.xml | 9 + .../community/src/main/res/values/strings.xml | 4 + .../susu/feature/navigator/MainNavigator.kt | 1 + 10 files changed, 365 insertions(+), 7 deletions(-) create mode 100644 feature/community/src/main/res/drawable/ic_report.xml create mode 100644 feature/community/src/main/res/drawable/ic_uncheck.xml create mode 100644 feature/community/src/main/res/drawable/ic_vote.xml create mode 100644 feature/community/src/main/res/drawable/ic_vote_add.xml diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuFloatingButton.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuFloatingButton.kt index 85221062..edb3a67a 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuFloatingButton.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuFloatingButton.kt @@ -1,5 +1,6 @@ package com.susu.core.designsystem.component.button +import androidx.annotation.DrawableRes import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box @@ -12,6 +13,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.shadow import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.susu.core.designsystem.R @@ -23,6 +25,7 @@ import com.susu.core.ui.extension.susuClickable @Composable fun SusuFloatingButton( modifier: Modifier = Modifier, + @DrawableRes imageResId: Int = R.drawable.ic_floating_button_add, onClick: () -> Unit = {}, ) { Box( @@ -34,7 +37,10 @@ fun SusuFloatingButton( .susuClickable(rippleColor = Gray10, onClick = onClick), contentAlignment = Alignment.Center, ) { - Image(painter = painterResource(id = R.drawable.ic_floating_button_add), contentDescription = "추가 아이콘") + Image( + painter = painterResource(id = imageResId), + contentDescription = stringResource(id = com.susu.core.ui.R.string.content_description_add_button), + ) } } diff --git a/core/ui/src/main/res/values/strings.xml b/core/ui/src/main/res/values/strings.xml index 748fd4e8..c31e7c41 100644 --- a/core/ui/src/main/res/values/strings.xml +++ b/core/ui/src/main/res/values/strings.xml @@ -43,4 +43,5 @@ 메모 등록 자유 + 신고 버튼 diff --git a/feature/community/src/main/java/com/susu/feature/community/CommunityScreen.kt b/feature/community/src/main/java/com/susu/feature/community/CommunityScreen.kt index 33e9fcce..eed737e7 100644 --- a/feature/community/src/main/java/com/susu/feature/community/CommunityScreen.kt +++ b/feature/community/src/main/java/com/susu/feature/community/CommunityScreen.kt @@ -1,13 +1,58 @@ package com.susu.feature.community +import androidx.compose.foundation.ExperimentalFoundationApi +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.horizontalScroll +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues +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.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.lazy.LazyRow +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.HorizontalDivider +import androidx.compose.material3.Icon import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.draw.drawBehind +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import com.susu.core.designsystem.component.appbar.SusuDefaultAppBar +import com.susu.core.designsystem.component.appbar.icon.LogoIcon +import com.susu.core.designsystem.component.appbar.icon.NotificationIcon +import com.susu.core.designsystem.component.appbar.icon.SearchIcon +import com.susu.core.designsystem.component.button.FilledButtonColor +import com.susu.core.designsystem.component.button.GhostButtonColor +import com.susu.core.designsystem.component.button.SusuFilledButton +import com.susu.core.designsystem.component.button.SusuFloatingButton +import com.susu.core.designsystem.component.button.SusuGhostButton +import com.susu.core.designsystem.component.button.XSmallButtonStyle +import com.susu.core.designsystem.theme.Blue60 +import com.susu.core.designsystem.theme.Gray10 +import com.susu.core.designsystem.theme.Gray15 +import com.susu.core.designsystem.theme.Gray20 +import com.susu.core.designsystem.theme.Gray30 +import com.susu.core.designsystem.theme.Gray40 +import com.susu.core.designsystem.theme.Gray50 +import com.susu.core.designsystem.theme.Gray60 +import com.susu.core.designsystem.theme.Orange60 import com.susu.core.designsystem.theme.SusuTheme import com.susu.core.ui.extension.susuClickable @@ -22,18 +67,276 @@ fun CommunityRoute( ) } +@OptIn(ExperimentalFoundationApi::class) @Composable fun CommunityScreen( padding: PaddingValues, + onClickSearchIcon: () -> Unit = {}, navigateVoteAdd: () -> Unit = {}, ) { - Text( + Box( modifier = Modifier .padding(padding) - .susuClickable(onClick = navigateVoteAdd), - text = "투표", - fontSize = 48.sp, - ) + .fillMaxSize(), + ) { + Column( + modifier = Modifier + + .background(SusuTheme.colorScheme.background10), + ) { + SusuDefaultAppBar( + modifier = Modifier.padding(horizontal = SusuTheme.spacing.spacing_xs), + leftIcon = { + LogoIcon() + }, + title = stringResource(R.string.community_screen_title), + actions = { + Row { + SearchIcon(onClickSearchIcon) + } + }, + ) + + LazyColumn( + modifier = Modifier.weight(1f), + contentPadding = PaddingValues(vertical = SusuTheme.spacing.spacing_m), + ) { + item { + Column { + Text( + modifier = Modifier.padding(start = SusuTheme.spacing.spacing_m), + text = stringResource(R.string.community_screen_most_popular_vote), + style = SusuTheme.typography.title_xxs, + ) + + Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_xxs)) + + LazyRow( + contentPadding = PaddingValues(horizontal = SusuTheme.spacing.spacing_m), + horizontalArrangement = Arrangement.spacedBy(SusuTheme.spacing.spacing_m), + ) { + items(count = 5) { + Column( + modifier = Modifier + .clip(RoundedCornerShape(8.dp)) + .background(Gray15) + .size( + width = 296.dp, + height = 156.dp, + ) + .padding(SusuTheme.spacing.spacing_m), + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + ) { + Text(text = "결혼식", color = Gray60, style = SusuTheme.typography.title_xxxs) + Icon( + modifier = Modifier.size(20.dp), + painter = painterResource(id = com.susu.core.ui.R.drawable.ic_arrow_right), + contentDescription = null, + tint = Gray50, + ) + } + + Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_xxs)) + + Text( + text = "고등학교 동창이고 좀 애매하게 친한 사인데 축의금 얼마 내야 돼?", + style = SusuTheme.typography.text_xxxs, + ) + + Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_xs)) + + SusuGhostButton( + textModifier = Modifier.weight(1f), + text = "12,430명 참여 중", + textAlign = TextAlign.Center, + color = GhostButtonColor.Black, + style = XSmallButtonStyle.height44, + isClickable = false, + leftIcon = { + Image( + painter = painterResource(id = R.drawable.ic_vote), + contentDescription = null, + ) + }, + ) + } + } + } + + } + } + + item { + Spacer( + modifier = Modifier + .size(SusuTheme.spacing.spacing_m), + ) + HorizontalDivider( + thickness = SusuTheme.spacing.spacing_xxs, + color = Gray20, + ) + } + + stickyHeader { + Column( + modifier = Modifier + .background(Gray10) + .padding( + top = SusuTheme.spacing.spacing_m, + start = SusuTheme.spacing.spacing_m, + end = SusuTheme.spacing.spacing_m, + bottom = SusuTheme.spacing.spacing_xxs, + ), + verticalArrangement = Arrangement.spacedBy(SusuTheme.spacing.spacing_xl), + ) { + Row( + horizontalArrangement = Arrangement.spacedBy(SusuTheme.spacing.spacing_xxxxs), + ) { + listOf("전체", "결혼식", "장례식", "돌잔치", "생일 기념일", "자유").forEach { + SusuFilledButton( + color = FilledButtonColor.Black, + style = XSmallButtonStyle.height28, + text = it, + isActive = true, + onClick = { }, + ) + } + } + + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.SpaceBetween, + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(SusuTheme.spacing.spacing_xxs), + ) { + Box( + modifier = Modifier + .clip(CircleShape) + .size(6.dp) + .background(Gray30), + ) + + Text( + text = stringResource(R.string.community_screen_vote_align_high), + style = SusuTheme.typography.title_xxxs, + color = Gray40, + ) + } + + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(SusuTheme.spacing.spacing_xxxxs), + ) { + Image( + painter = painterResource(id = R.drawable.ic_uncheck), + contentDescription = null, + ) + + Text( + text = stringResource(R.string.community_screen_show_my_article), + style = SusuTheme.typography.title_xxxs, + color = Gray40, + ) + } + } + } + } + + item { + Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_s)) + } + + items(10) { + Column( + modifier = Modifier + .padding( + start = SusuTheme.spacing.spacing_m, + end = SusuTheme.spacing.spacing_m, + bottom = SusuTheme.spacing.spacing_xxs, + ) + .fillMaxWidth() + .clip(RoundedCornerShape(8.dp)) + .background(Gray15) + .padding(SusuTheme.spacing.spacing_m), + ) { + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.SpaceBetween, + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + ) { + Text(text = "결혼식", color = Orange60, style = SusuTheme.typography.title_xxxs) + Icon( + modifier = Modifier.size(20.dp), + painter = painterResource(id = com.susu.core.ui.R.drawable.ic_arrow_right), + contentDescription = null, + tint = Orange60, + ) + } + + Text( + text = "10분 전", + style = SusuTheme.typography.text_xxxs, + color = Gray40, + ) + } + + Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_xxs)) + + Text( + text = "고등학교 동창이고 좀 애매하게 친한 사인데 축의금 얼마 내야 돼?", + style = SusuTheme.typography.text_xxxs, + ) + + Column( + verticalArrangement = Arrangement.spacedBy(SusuTheme.spacing.spacing_xxxxs), + ) { + repeat(5) { + SusuGhostButton( + textModifier = Modifier.weight(1f), + text = "${it}만원", + color = GhostButtonColor.Black, + style = XSmallButtonStyle.height44, + isClickable = false, + ) + } + } + + Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_s)) + + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.SpaceBetween, + ) { + Text( + text = "8명 참여", + style = SusuTheme.typography.title_xxxs, + color = Blue60, + ) + + Image( + painter = painterResource(id = R.drawable.ic_report), + contentDescription = stringResource(com.susu.core.ui.R.string.content_description_report_button), + ) + } + } + } + } + } + + SusuFloatingButton( + modifier = Modifier + .align(Alignment.BottomEnd) + .padding(SusuTheme.spacing.spacing_l), + imageResId = R.drawable.ic_vote_add, + onClick = navigateVoteAdd, + ) + } } @Preview diff --git a/feature/community/src/main/java/com/susu/feature/community/navigation/CommunityNavigation.kt b/feature/community/src/main/java/com/susu/feature/community/navigation/CommunityNavigation.kt index ec263286..3310b77f 100644 --- a/feature/community/src/main/java/com/susu/feature/community/navigation/CommunityNavigation.kt +++ b/feature/community/src/main/java/com/susu/feature/community/navigation/CommunityNavigation.kt @@ -7,6 +7,7 @@ import androidx.navigation.NavOptions import androidx.navigation.compose.composable import com.susu.core.ui.DialogToken import com.susu.core.ui.SnackbarToken +import com.susu.feature.community.CommunityRoute import com.susu.feature.community.CommunityScreen import com.susu.feature.community.voteadd.VoteAddRoute @@ -29,7 +30,7 @@ fun NavGraphBuilder.communityNavGraph( handleException: (Throwable, () -> Unit) -> Unit, ) { composable(route = CommunityRoute.route) { - CommunityScreen( + CommunityRoute( padding = padding, navigateVoteAdd = navigateVoteAdd, ) diff --git a/feature/community/src/main/res/drawable/ic_report.xml b/feature/community/src/main/res/drawable/ic_report.xml new file mode 100644 index 00000000..48c8e505 --- /dev/null +++ b/feature/community/src/main/res/drawable/ic_report.xml @@ -0,0 +1,15 @@ + + + + + diff --git a/feature/community/src/main/res/drawable/ic_uncheck.xml b/feature/community/src/main/res/drawable/ic_uncheck.xml new file mode 100644 index 00000000..bdcd96fb --- /dev/null +++ b/feature/community/src/main/res/drawable/ic_uncheck.xml @@ -0,0 +1,9 @@ + + + diff --git a/feature/community/src/main/res/drawable/ic_vote.xml b/feature/community/src/main/res/drawable/ic_vote.xml new file mode 100644 index 00000000..49b6a3fe --- /dev/null +++ b/feature/community/src/main/res/drawable/ic_vote.xml @@ -0,0 +1,9 @@ + + + diff --git a/feature/community/src/main/res/drawable/ic_vote_add.xml b/feature/community/src/main/res/drawable/ic_vote_add.xml new file mode 100644 index 00000000..77838a10 --- /dev/null +++ b/feature/community/src/main/res/drawable/ic_vote_add.xml @@ -0,0 +1,9 @@ + + + diff --git a/feature/community/src/main/res/values/strings.xml b/feature/community/src/main/res/values/strings.xml index 05144a77..81a34cfe 100644 --- a/feature/community/src/main/res/values/strings.xml +++ b/feature/community/src/main/res/values/strings.xml @@ -4,4 +4,8 @@ 투표 내용을 작성해주세요 선택지를 입력하세요 투표 추가 버튼 + 내 글 보기 + 투표 많은 순 + 가장 인기있는 투표 + 투표 diff --git a/feature/navigator/src/main/java/com/susu/feature/navigator/MainNavigator.kt b/feature/navigator/src/main/java/com/susu/feature/navigator/MainNavigator.kt index 9bf079f1..2d6321c1 100644 --- a/feature/navigator/src/main/java/com/susu/feature/navigator/MainNavigator.kt +++ b/feature/navigator/src/main/java/com/susu/feature/navigator/MainNavigator.kt @@ -60,6 +60,7 @@ internal class MainNavigator( SentRoute.sentEnvelopeRoute, SentRoute.sentEnvelopeDetailRoute, SentRoute.sentEnvelopeEditRoute, + CommunityRoute.route, CommunityRoute.voteAddRoute, ), -> SusuTheme.colorScheme.background10 From e0145269367dbba8e504ef60bc750ccdb1140d7d Mon Sep 17 00:00:00 2001 From: jinukeu Date: Thu, 25 Jan 2024 19:32:41 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20CommunityScreen=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{ => community}/CommunityScreen.kt | 134 +----------------- .../component/MostPopularVoteCard.kt | 86 +++++++++++ .../community/community/component/VoteCard.kt | 117 +++++++++++++++ .../navigation/CommunityNavigation.kt | 3 +- 4 files changed, 210 insertions(+), 130 deletions(-) rename feature/community/src/main/java/com/susu/feature/community/{ => community}/CommunityScreen.kt (56%) create mode 100644 feature/community/src/main/java/com/susu/feature/community/community/component/MostPopularVoteCard.kt create mode 100644 feature/community/src/main/java/com/susu/feature/community/community/component/VoteCard.kt diff --git a/feature/community/src/main/java/com/susu/feature/community/CommunityScreen.kt b/feature/community/src/main/java/com/susu/feature/community/community/CommunityScreen.kt similarity index 56% rename from feature/community/src/main/java/com/susu/feature/community/CommunityScreen.kt rename to feature/community/src/main/java/com/susu/feature/community/community/CommunityScreen.kt index eed737e7..576c9897 100644 --- a/feature/community/src/main/java/com/susu/feature/community/CommunityScreen.kt +++ b/feature/community/src/main/java/com/susu/feature/community/community/CommunityScreen.kt @@ -1,9 +1,8 @@ -package com.susu.feature.community +package com.susu.feature.community.community import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.Image import androidx.compose.foundation.background -import androidx.compose.foundation.horizontalScroll import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column @@ -12,7 +11,6 @@ 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.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.lazy.LazyColumn @@ -26,17 +24,13 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip -import androidx.compose.ui.draw.drawBehind -import androidx.compose.ui.geometry.Offset import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp import com.susu.core.designsystem.component.appbar.SusuDefaultAppBar import com.susu.core.designsystem.component.appbar.icon.LogoIcon -import com.susu.core.designsystem.component.appbar.icon.NotificationIcon import com.susu.core.designsystem.component.appbar.icon.SearchIcon import com.susu.core.designsystem.component.button.FilledButtonColor import com.susu.core.designsystem.component.button.GhostButtonColor @@ -54,7 +48,9 @@ import com.susu.core.designsystem.theme.Gray50 import com.susu.core.designsystem.theme.Gray60 import com.susu.core.designsystem.theme.Orange60 import com.susu.core.designsystem.theme.SusuTheme -import com.susu.core.ui.extension.susuClickable +import com.susu.feature.community.R +import com.susu.feature.community.community.component.MostPopularVoteCard +import com.susu.feature.community.community.component.VoteCard @Composable fun CommunityRoute( @@ -116,52 +112,7 @@ fun CommunityScreen( horizontalArrangement = Arrangement.spacedBy(SusuTheme.spacing.spacing_m), ) { items(count = 5) { - Column( - modifier = Modifier - .clip(RoundedCornerShape(8.dp)) - .background(Gray15) - .size( - width = 296.dp, - height = 156.dp, - ) - .padding(SusuTheme.spacing.spacing_m), - ) { - Row( - verticalAlignment = Alignment.CenterVertically, - ) { - Text(text = "결혼식", color = Gray60, style = SusuTheme.typography.title_xxxs) - Icon( - modifier = Modifier.size(20.dp), - painter = painterResource(id = com.susu.core.ui.R.drawable.ic_arrow_right), - contentDescription = null, - tint = Gray50, - ) - } - - Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_xxs)) - - Text( - text = "고등학교 동창이고 좀 애매하게 친한 사인데 축의금 얼마 내야 돼?", - style = SusuTheme.typography.text_xxxs, - ) - - Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_xs)) - - SusuGhostButton( - textModifier = Modifier.weight(1f), - text = "12,430명 참여 중", - textAlign = TextAlign.Center, - color = GhostButtonColor.Black, - style = XSmallButtonStyle.height44, - isClickable = false, - leftIcon = { - Image( - painter = painterResource(id = R.drawable.ic_vote), - contentDescription = null, - ) - }, - ) - } + MostPopularVoteCard() } } @@ -251,80 +202,7 @@ fun CommunityScreen( } items(10) { - Column( - modifier = Modifier - .padding( - start = SusuTheme.spacing.spacing_m, - end = SusuTheme.spacing.spacing_m, - bottom = SusuTheme.spacing.spacing_xxs, - ) - .fillMaxWidth() - .clip(RoundedCornerShape(8.dp)) - .background(Gray15) - .padding(SusuTheme.spacing.spacing_m), - ) { - Row( - modifier = Modifier.fillMaxWidth(), - horizontalArrangement = Arrangement.SpaceBetween, - ) { - Row( - verticalAlignment = Alignment.CenterVertically, - ) { - Text(text = "결혼식", color = Orange60, style = SusuTheme.typography.title_xxxs) - Icon( - modifier = Modifier.size(20.dp), - painter = painterResource(id = com.susu.core.ui.R.drawable.ic_arrow_right), - contentDescription = null, - tint = Orange60, - ) - } - - Text( - text = "10분 전", - style = SusuTheme.typography.text_xxxs, - color = Gray40, - ) - } - - Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_xxs)) - - Text( - text = "고등학교 동창이고 좀 애매하게 친한 사인데 축의금 얼마 내야 돼?", - style = SusuTheme.typography.text_xxxs, - ) - - Column( - verticalArrangement = Arrangement.spacedBy(SusuTheme.spacing.spacing_xxxxs), - ) { - repeat(5) { - SusuGhostButton( - textModifier = Modifier.weight(1f), - text = "${it}만원", - color = GhostButtonColor.Black, - style = XSmallButtonStyle.height44, - isClickable = false, - ) - } - } - - Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_s)) - - Row( - modifier = Modifier.fillMaxWidth(), - horizontalArrangement = Arrangement.SpaceBetween, - ) { - Text( - text = "8명 참여", - style = SusuTheme.typography.title_xxxs, - color = Blue60, - ) - - Image( - painter = painterResource(id = R.drawable.ic_report), - contentDescription = stringResource(com.susu.core.ui.R.string.content_description_report_button), - ) - } - } + VoteCard() } } } diff --git a/feature/community/src/main/java/com/susu/feature/community/community/component/MostPopularVoteCard.kt b/feature/community/src/main/java/com/susu/feature/community/community/component/MostPopularVoteCard.kt new file mode 100644 index 00000000..bd90867e --- /dev/null +++ b/feature/community/src/main/java/com/susu/feature/community/community/component/MostPopularVoteCard.kt @@ -0,0 +1,86 @@ +package com.susu.feature.community.community.component + +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Icon +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.susu.core.designsystem.component.button.GhostButtonColor +import com.susu.core.designsystem.component.button.SusuGhostButton +import com.susu.core.designsystem.component.button.XSmallButtonStyle +import com.susu.core.designsystem.theme.Gray15 +import com.susu.core.designsystem.theme.Gray50 +import com.susu.core.designsystem.theme.Gray60 +import com.susu.core.designsystem.theme.SusuTheme +import com.susu.feature.community.R + +@Composable +fun MostPopularVoteCard() { + Column( + modifier = Modifier + .clip(RoundedCornerShape(8.dp)) + .background(Gray15) + .size( + width = 296.dp, + height = 156.dp, + ) + .padding(SusuTheme.spacing.spacing_m), + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + ) { + Text(text = "결혼식", color = Gray60, style = SusuTheme.typography.title_xxxs) + Icon( + modifier = Modifier.size(20.dp), + painter = painterResource(id = com.susu.core.ui.R.drawable.ic_arrow_right), + contentDescription = null, + tint = Gray50, + ) + } + + Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_xxs)) + + Text( + text = "고등학교 동창이고 좀 애매하게 친한 사인데 축의금 얼마 내야 돼?", + style = SusuTheme.typography.text_xxxs, + ) + + Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_xs)) + + SusuGhostButton( + textModifier = Modifier.weight(1f), + text = "12,430명 참여 중", + textAlign = TextAlign.Center, + color = GhostButtonColor.Black, + style = XSmallButtonStyle.height44, + isClickable = false, + leftIcon = { + Image( + painter = painterResource(id = R.drawable.ic_vote), + contentDescription = null, + ) + }, + ) + } +} + +@Preview +@Composable +fun MostPopularVoteCardPreview() { + SusuTheme { + MostPopularVoteCard() + } +} diff --git a/feature/community/src/main/java/com/susu/feature/community/community/component/VoteCard.kt b/feature/community/src/main/java/com/susu/feature/community/community/component/VoteCard.kt new file mode 100644 index 00000000..ce020aef --- /dev/null +++ b/feature/community/src/main/java/com/susu/feature/community/community/component/VoteCard.kt @@ -0,0 +1,117 @@ +package com.susu.feature.community.community.component + +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Icon +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.susu.core.designsystem.component.button.GhostButtonColor +import com.susu.core.designsystem.component.button.SusuGhostButton +import com.susu.core.designsystem.component.button.XSmallButtonStyle +import com.susu.core.designsystem.theme.Blue60 +import com.susu.core.designsystem.theme.Gray15 +import com.susu.core.designsystem.theme.Gray40 +import com.susu.core.designsystem.theme.Orange60 +import com.susu.core.designsystem.theme.SusuTheme +import com.susu.feature.community.R + +@Composable +fun VoteCard() { + Column( + modifier = Modifier + .padding( + start = SusuTheme.spacing.spacing_m, + end = SusuTheme.spacing.spacing_m, + bottom = SusuTheme.spacing.spacing_xxs, + ) + .fillMaxWidth() + .clip(RoundedCornerShape(8.dp)) + .background(Gray15) + .padding(SusuTheme.spacing.spacing_m), + ) { + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.SpaceBetween, + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + ) { + Text(text = "결혼식", color = Orange60, style = SusuTheme.typography.title_xxxs) + Icon( + modifier = Modifier.size(20.dp), + painter = painterResource(id = com.susu.core.ui.R.drawable.ic_arrow_right), + contentDescription = null, + tint = Orange60, + ) + } + + Text( + text = "10분 전", + style = SusuTheme.typography.text_xxxs, + color = Gray40, + ) + } + + Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_xxs)) + + Text( + text = "고등학교 동창이고 좀 애매하게 친한 사인데 축의금 얼마 내야 돼?", + style = SusuTheme.typography.text_xxxs, + ) + + Column( + verticalArrangement = Arrangement.spacedBy(SusuTheme.spacing.spacing_xxxxs), + ) { + repeat(5) { + SusuGhostButton( + textModifier = Modifier.weight(1f), + text = "${it}만원", + color = GhostButtonColor.Black, + style = XSmallButtonStyle.height44, + isClickable = false, + ) + } + } + + Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_s)) + + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.SpaceBetween, + ) { + Text( + text = "8명 참여", + style = SusuTheme.typography.title_xxxs, + color = Blue60, + ) + + Image( + painter = painterResource(id = R.drawable.ic_report), + contentDescription = stringResource(com.susu.core.ui.R.string.content_description_report_button), + ) + } + } +} + +@Preview +@Composable +fun VoteCardPreview() { + SusuTheme { + VoteCard() + } +} diff --git a/feature/community/src/main/java/com/susu/feature/community/navigation/CommunityNavigation.kt b/feature/community/src/main/java/com/susu/feature/community/navigation/CommunityNavigation.kt index 3310b77f..5516485f 100644 --- a/feature/community/src/main/java/com/susu/feature/community/navigation/CommunityNavigation.kt +++ b/feature/community/src/main/java/com/susu/feature/community/navigation/CommunityNavigation.kt @@ -7,8 +7,7 @@ import androidx.navigation.NavOptions import androidx.navigation.compose.composable import com.susu.core.ui.DialogToken import com.susu.core.ui.SnackbarToken -import com.susu.feature.community.CommunityRoute -import com.susu.feature.community.CommunityScreen +import com.susu.feature.community.community.CommunityRoute import com.susu.feature.community.voteadd.VoteAddRoute fun NavController.navigateVoteAdd() { From 9a865256a9130a2bb10b3cb44350ce1ce748c087 Mon Sep 17 00:00:00 2001 From: jinukeu Date: Thu, 25 Jan 2024 19:33:27 +0900 Subject: [PATCH 4/4] chore: ktlint detekt --- .../designsystem/component/button/SusuLinedButton.kt | 1 - .../feature/community/community/CommunityScreen.kt | 12 ------------ 2 files changed, 13 deletions(-) diff --git a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuLinedButton.kt b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuLinedButton.kt index 15d975b1..280815bb 100644 --- a/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuLinedButton.kt +++ b/core/designsystem/src/main/java/com/susu/core/designsystem/component/button/SusuLinedButton.kt @@ -8,7 +8,6 @@ import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Icon import androidx.compose.runtime.Composable -import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Shape diff --git a/feature/community/src/main/java/com/susu/feature/community/community/CommunityScreen.kt b/feature/community/src/main/java/com/susu/feature/community/community/CommunityScreen.kt index 576c9897..ec243144 100644 --- a/feature/community/src/main/java/com/susu/feature/community/community/CommunityScreen.kt +++ b/feature/community/src/main/java/com/susu/feature/community/community/CommunityScreen.kt @@ -16,9 +16,7 @@ import androidx.compose.foundation.layout.size import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.LazyRow import androidx.compose.foundation.shape.CircleShape -import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.HorizontalDivider -import androidx.compose.material3.Icon import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment @@ -26,27 +24,19 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource -import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.susu.core.designsystem.component.appbar.SusuDefaultAppBar import com.susu.core.designsystem.component.appbar.icon.LogoIcon import com.susu.core.designsystem.component.appbar.icon.SearchIcon import com.susu.core.designsystem.component.button.FilledButtonColor -import com.susu.core.designsystem.component.button.GhostButtonColor import com.susu.core.designsystem.component.button.SusuFilledButton import com.susu.core.designsystem.component.button.SusuFloatingButton -import com.susu.core.designsystem.component.button.SusuGhostButton import com.susu.core.designsystem.component.button.XSmallButtonStyle -import com.susu.core.designsystem.theme.Blue60 import com.susu.core.designsystem.theme.Gray10 -import com.susu.core.designsystem.theme.Gray15 import com.susu.core.designsystem.theme.Gray20 import com.susu.core.designsystem.theme.Gray30 import com.susu.core.designsystem.theme.Gray40 -import com.susu.core.designsystem.theme.Gray50 -import com.susu.core.designsystem.theme.Gray60 -import com.susu.core.designsystem.theme.Orange60 import com.susu.core.designsystem.theme.SusuTheme import com.susu.feature.community.R import com.susu.feature.community.community.component.MostPopularVoteCard @@ -77,7 +67,6 @@ fun CommunityScreen( ) { Column( modifier = Modifier - .background(SusuTheme.colorScheme.background10), ) { SusuDefaultAppBar( @@ -115,7 +104,6 @@ fun CommunityScreen( MostPopularVoteCard() } } - } }