From 5b4bff1783d20deb0c1a347e9c45e1d24dff4f10 Mon Sep 17 00:00:00 2001 From: MinseoSONG Date: Sat, 18 Jan 2025 17:01:00 +0900 Subject: [PATCH 01/14] =?UTF-8?q?[feat]=20DayOfWeekBar=EB=A5=BC=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=ED=95=A9=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/grouplist/screen/GroupListScreen.kt | 132 +++++++++++------- 1 file changed, 83 insertions(+), 49 deletions(-) diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt index d766eb34..e016ae9c 100644 --- a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt @@ -1,21 +1,26 @@ package com.sopt.gongbaek.presentation.ui.grouplist.screen import androidx.compose.foundation.background -import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableIntStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import com.sopt.gongbaek.R +import com.sopt.gongbaek.presentation.ui.component.topbar.CenterTitleTopBar import com.sopt.gongbaek.presentation.util.extension.clickableWithoutRipple -import com.sopt.gongbaek.presentation.util.extension.roundedBackgroundWithBorder import com.sopt.gongbaek.ui.theme.GONGBAEKTheme import com.sopt.gongbaek.ui.theme.GongBaekTheme @@ -35,58 +40,87 @@ fun GroupListScreen( navigateGroupDetail: () -> Unit, navigateGroupRegister: () -> Unit ) { - Box( - modifier = Modifier - .fillMaxSize() - .background(color = Color.White), - contentAlignment = Alignment.Center - ) { + var selectedDayOfWeekIndex by remember { mutableIntStateOf(0) } + + Scaffold( + topBar = { + CenterTitleTopBar(R.string.topbar_group) + } + ) { innerPadding -> Column( - horizontalAlignment = Alignment.CenterHorizontally + modifier = Modifier.padding(innerPadding) ) { - Text( - text = "채우기 화면" + DayOfWeekBar( + selectedIndex = selectedDayOfWeekIndex, + onIndexSelected = { index -> + selectedDayOfWeekIndex = index + }, + modifier = Modifier.padding(horizontal = 16.dp) ) - Spacer(modifier = Modifier.height(10.dp)) - Box( - modifier = Modifier - .roundedBackgroundWithBorder( - cornerRadius = 8.dp, - backgroundColor = GongBaekTheme.colors.subOrange, - borderWidth = 1.dp, - borderColor = GongBaekTheme.colors.mainOrange - ) - .clickableWithoutRipple( - onClick = navigateGroupDetail - ) - ) { - Text( - text = "모임 상세로 이동", - modifier = Modifier.padding(10.dp) - ) - } - Spacer(modifier = Modifier.height(10.dp)) - Box( + } + } +} + +@Composable +private fun DayOfWeekBar( + modifier: Modifier = Modifier, + selectedIndex: Int = 0, + onIndexSelected: (Int) -> Unit = {} +) { + val contentLists = listOf( + "전체", + "월요일", + "화요일", + "수요일", + "목요일", + "금요일" + ) + Row( + modifier = modifier + .background( + color = GongBaekTheme.colors.gray01, + shape = RoundedCornerShape(4.dp) + ) + .padding(vertical = 2.dp, horizontal = 3.dp) + .fillMaxWidth(), + horizontalArrangement = Arrangement.SpaceBetween, + verticalAlignment = Alignment.CenterVertically + ) { + contentLists.forEachIndexed { index, content -> + Text( + text = content, + color = if (selectedIndex == index) { + GongBaekTheme.colors.mainOrange + } else { + GongBaekTheme.colors.gray06 + }, + style = GongBaekTheme.typography.caption1.sb13, modifier = Modifier - .roundedBackgroundWithBorder( - cornerRadius = 8.dp, - backgroundColor = GongBaekTheme.colors.subOrange, - borderWidth = 1.dp, - borderColor = GongBaekTheme.colors.mainOrange - ) - .clickableWithoutRipple( - onClick = navigateGroupRegister + .background( + color = if (selectedIndex == index) { + GongBaekTheme.colors.white + } else { + GongBaekTheme.colors.gray01 + }, + shape = RoundedCornerShape(2.dp) ) - ) { - Text( - text = "모임 등록으로 이동", - modifier = Modifier.padding(10.dp) - ) - } + .padding(horizontal = 9.dp, vertical = 8.dp) + .clickableWithoutRipple { + onIndexSelected(index) + } + ) } } } +@Preview +@Composable +private fun PreviewDayOfWeekBar() { + GONGBAEKTheme { + DayOfWeekBar() + } +} + @Preview(showBackground = true) @Composable fun ShowGroupListScreen() { From b35725666264b956bba4a1f64aff0c3566345f8f Mon Sep 17 00:00:00 2001 From: MinseoSONG Date: Sat, 18 Jan 2025 18:09:08 +0900 Subject: [PATCH 02/14] =?UTF-8?q?[feat]=20CategoryBar=EB=A5=BC=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=ED=95=A9=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/grouplist/screen/GroupListScreen.kt | 104 ++++++++++++++++-- app/src/main/res/values/strings.xml | 9 ++ 2 files changed, 106 insertions(+), 7 deletions(-) diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt index e016ae9c..e467c118 100644 --- a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt @@ -1,11 +1,16 @@ package com.sopt.gongbaek.presentation.ui.grouplist.screen import androidx.compose.foundation.background +import androidx.compose.foundation.border 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.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.lazy.LazyRow import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Scaffold import androidx.compose.material3.Text @@ -16,6 +21,8 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.sopt.gongbaek.R @@ -23,6 +30,7 @@ import com.sopt.gongbaek.presentation.ui.component.topbar.CenterTitleTopBar import com.sopt.gongbaek.presentation.util.extension.clickableWithoutRipple import com.sopt.gongbaek.ui.theme.GONGBAEKTheme import com.sopt.gongbaek.ui.theme.GongBaekTheme +import com.sopt.gongbaek.ui.theme.gray02 @Composable fun GroupListRoute( @@ -41,6 +49,7 @@ fun GroupListScreen( navigateGroupRegister: () -> Unit ) { var selectedDayOfWeekIndex by remember { mutableIntStateOf(0) } + var selectedCategoryIndex by remember { mutableIntStateOf(0) } Scaffold( topBar = { @@ -57,6 +66,79 @@ fun GroupListScreen( }, modifier = Modifier.padding(horizontal = 16.dp) ) + Spacer(Modifier.height(8.dp)) + + CategoryBar( + selectedIndex = selectedCategoryIndex, + onIndexSelected = { index -> + selectedCategoryIndex = index + } + ) + } + } +} + +@Composable +private fun CategoryBar( + modifier: Modifier = Modifier, + selectedIndex: Int = 0, + onIndexSelected: (Int) -> Unit = {} +) { + val contentLists = listOf( + R.string.grouplist_dayofweek_all, + R.string.group_info_chip_category_study, + R.string.group_info_chip_category_dining, + R.string.group_info_chip_category_exercise, + R.string.group_info_chip_category_playing, + R.string.group_info_chip_category_networking, + R.string.group_info_chip_category_others + ) + + LazyRow( + modifier = modifier + .fillMaxWidth(), + horizontalArrangement = Arrangement.spacedBy(9.dp), + verticalAlignment = Alignment.CenterVertically + ) { + items(contentLists.size) { index -> + if (index == 0) { + Spacer(Modifier.width(16.dp)) + } + Text( + text = stringResource(contentLists[index]), + style = GongBaekTheme.typography.caption1.sb13, + color = if (selectedIndex == index) { + GongBaekTheme.colors.white + } else { + GongBaekTheme.colors.gray06 + }, + modifier = Modifier + .border( + width = 1.dp, + color = if (selectedIndex == index) { + Color.Transparent + } else { + GongBaekTheme.colors.gray02 + }, + shape = RoundedCornerShape(4.dp) + ) + .background( + color = if (selectedIndex == index) { + GongBaekTheme.colors.gray09 + } else { + GongBaekTheme.colors.white + }, + shape = RoundedCornerShape(4.dp) + ) + .padding(horizontal = 12.dp, vertical = 6.dp) + .clickableWithoutRipple { + onIndexSelected(index) + } + ) + + if (index == contentLists.size - 1) { + Spacer(Modifier.width(16.dp)) + } } } } @@ -68,12 +150,12 @@ private fun DayOfWeekBar( onIndexSelected: (Int) -> Unit = {} ) { val contentLists = listOf( - "전체", - "월요일", - "화요일", - "수요일", - "목요일", - "금요일" + R.string.grouplist_dayofweek_all, + R.string.grouplist_dayofweek_mon, + R.string.grouplist_dayofweek_tue, + R.string.grouplist_dayofweek_wed, + R.string.grouplist_dayofweek_thu, + R.string.grouplist_dayofweek_fri ) Row( modifier = modifier @@ -88,7 +170,7 @@ private fun DayOfWeekBar( ) { contentLists.forEachIndexed { index, content -> Text( - text = content, + text = stringResource(content), color = if (selectedIndex == index) { GongBaekTheme.colors.mainOrange } else { @@ -113,6 +195,14 @@ private fun DayOfWeekBar( } } +@Preview +@Composable +private fun PreviewCategoryBar() { + GONGBAEKTheme { + CategoryBar() + } +} + @Preview @Composable private fun PreviewDayOfWeekBar() { diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 4f4ae6dc..ec53d129 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -72,4 +72,13 @@ 토 일 + + 전체 + 월요일 + 화요일 + 수요일 + 목요일 + 금요일 + + \ No newline at end of file From 39782ac1e037b514b7f9c4e1ffcd56ffb75147a2 Mon Sep 17 00:00:00 2001 From: MinseoSONG Date: Sat, 18 Jan 2025 20:52:18 +0900 Subject: [PATCH 03/14] =?UTF-8?q?[chore]=20SelectDayCalendar=EC=9D=84=20?= =?UTF-8?q?=EB=B0=94=EB=80=90=20=EB=A1=9C=EC=A7=81=EC=9D=84=20=EB=B0=98?= =?UTF-8?q?=EC=98=81=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=ED=95=A9=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/groupregister/component/SelectDayCalendar.kt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/groupregister/component/SelectDayCalendar.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/groupregister/component/SelectDayCalendar.kt index 3d350c3d..8a128d3c 100644 --- a/app/src/main/java/com/sopt/gongbaek/presentation/ui/groupregister/component/SelectDayCalendar.kt +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/groupregister/component/SelectDayCalendar.kt @@ -43,7 +43,7 @@ fun SelectDayCalendar( ) { val currentDate = LocalDate.now() - var selectedDate by remember { mutableStateOf(currentDate) } + var selectedDate by remember { mutableStateOf(null) } var visibleYearAndMonth by remember { mutableStateOf(currentDate) } Column( @@ -110,7 +110,7 @@ fun CalendarHeader( @Composable fun CalendarGrid( - selectedDate: LocalDate, + selectedDate: LocalDate?, visibleMonth: LocalDate, onDateSelected: (LocalDate) -> Unit, modifier: Modifier = Modifier From eaced2dc1f450e3d40713c6a51c8144de675a718 Mon Sep 17 00:00:00 2001 From: MinseoSONG Date: Sat, 18 Jan 2025 21:58:29 +0900 Subject: [PATCH 04/14] =?UTF-8?q?[feat]=20GongBaekToggleButton=EA=B3=BC=20?= =?UTF-8?q?CycleBottomSheet=EB=A5=BC=20=EA=B5=AC=ED=98=84=ED=95=A9?= =?UTF-8?q?=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/grouplist/screen/GroupListScreen.kt | 143 +++++++++++++++++- app/src/main/res/values/strings.xml | 4 +- 2 files changed, 144 insertions(+), 3 deletions(-) diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt index e467c118..16095761 100644 --- a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt @@ -1,36 +1,53 @@ package com.sopt.gongbaek.presentation.ui.grouplist.screen +import androidx.compose.animation.core.animateFloatAsState +import androidx.compose.animation.core.tween import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.IntrinsicSize import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.aspectRatio +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.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.Scaffold import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableIntStateOf +import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.platform.LocalConfiguration +import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.res.stringResource +import androidx.compose.ui.res.vectorResource import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.IntOffset import androidx.compose.ui.unit.dp import com.sopt.gongbaek.R import com.sopt.gongbaek.presentation.ui.component.topbar.CenterTitleTopBar import com.sopt.gongbaek.presentation.util.extension.clickableWithoutRipple import com.sopt.gongbaek.ui.theme.GONGBAEKTheme import com.sopt.gongbaek.ui.theme.GongBaekTheme -import com.sopt.gongbaek.ui.theme.gray02 +import kotlin.math.roundToInt @Composable fun GroupListRoute( @@ -50,6 +67,7 @@ fun GroupListScreen( ) { var selectedDayOfWeekIndex by remember { mutableIntStateOf(0) } var selectedCategoryIndex by remember { mutableIntStateOf(0) } + var toggleCheckedState by remember { mutableStateOf(true) } Scaffold( topBar = { @@ -57,7 +75,9 @@ fun GroupListScreen( } ) { innerPadding -> Column( - modifier = Modifier.padding(innerPadding) + modifier = Modifier + .padding(innerPadding) + .fillMaxSize() ) { DayOfWeekBar( selectedIndex = selectedDayOfWeekIndex, @@ -74,10 +94,129 @@ fun GroupListScreen( selectedCategoryIndex = index } ) + Spacer(Modifier.height(8.dp)) + + HorizontalDivider( + thickness = 8.dp, + color = GongBaekTheme.colors.gray02 + ) + + LazyColumn( + modifier = Modifier.fillMaxSize() + ) { + item { + Row( + modifier = Modifier + .padding(horizontal = 16.dp, vertical = 12.dp) + .fillMaxWidth() + .height(IntrinsicSize.Min), + horizontalArrangement = Arrangement.SpaceBetween, + verticalAlignment = Alignment.CenterVertically + ) { + CycleBottomSheet() + + GongBaekToggleButton( + checkedState = toggleCheckedState, + onCLick = { + toggleCheckedState = !toggleCheckedState + }, + modifier = Modifier.align(Alignment.Top) + ) + } + } + } + } + } +} + +@Composable +private fun GongBaekToggleButton( + checkedState: Boolean, + onCLick: () -> Unit, + modifier: Modifier = Modifier, +) { + val density = LocalDensity.current + val minBound = with(density) { 0.dp.toPx() } + val maxBound = with(density) { (LocalConfiguration.current.screenWidthDp * 0.06f).dp.toPx() } + val state by animateFloatAsState( + targetValue = if (checkedState) maxBound else minBound, + animationSpec = tween(durationMillis = 300) + ) + Row( + modifier = modifier, + verticalAlignment = Alignment.CenterVertically + ) { + Text( + text = stringResource( + if (checkedState) { + R.string.grouplist_gongbaek_duplicate + } else { + R.string.grouplist_gongbaek_all + } + ), + color = GongBaekTheme.colors.gray06, + style = GongBaekTheme.typography.caption2.r12 + ) + Spacer(Modifier.width(6.dp)) + + Box( + modifier = modifier + .aspectRatio(42f / 24f) + .height((LocalConfiguration.current.screenHeightDp * 0.03f).dp) + .background( + color = if (checkedState) { + GongBaekTheme.colors.mainOrange + } else { + GongBaekTheme.colors.gray06 + }, + shape = RoundedCornerShape(20.dp) + ) + .padding(3.5.dp) + .clickableWithoutRipple { onCLick() } + ) { + Box( + modifier = Modifier + .offset { IntOffset(state.roundToInt(), 0) } + .aspectRatio(1f / 1f) + .height((LocalConfiguration.current.screenHeightDp * 0.02f).dp) + .background( + color = GongBaekTheme.colors.white, + shape = CircleShape + ) + ) } } } +@Composable +private fun CycleBottomSheet( + modifier: Modifier = Modifier, + onCLick: () -> Unit = {} +) { + Row( + modifier = modifier + .background( + color = GongBaekTheme.colors.gray01, + shape = RoundedCornerShape(20.dp) + ) + .padding(horizontal = 12.dp, vertical = 6.dp) + .clickableWithoutRipple { + onCLick() + } + ) { + Text( + text = stringResource(R.string.grouplist_cycle_all), + color = GongBaekTheme.colors.gray10, + style = GongBaekTheme.typography.caption1.m13 + ) + + Icon( + imageVector = ImageVector.vectorResource(R.drawable.ic_arrow_bottom_18), + contentDescription = null + ) + } +} + @Composable private fun CategoryBar( modifier: Modifier = Modifier, diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index ec53d129..f3772b15 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -79,6 +79,8 @@ 수요일 목요일 금요일 - + 모든 주기 + 모든 공백 + 겹치는 공백 \ No newline at end of file From e161860fccdba80146c8f3b20329156f01ec93e5 Mon Sep 17 00:00:00 2001 From: MinseoSONG Date: Sat, 18 Jan 2025 22:13:24 +0900 Subject: [PATCH 05/14] =?UTF-8?q?[feat]=20floatingActionButton=EC=9D=84=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=ED=95=A9=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/grouplist/screen/GroupListScreen.kt | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt index 16095761..9548df61 100644 --- a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt @@ -21,6 +21,7 @@ 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.FloatingActionButton import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon import androidx.compose.material3.Scaffold @@ -72,6 +73,19 @@ fun GroupListScreen( Scaffold( topBar = { CenterTitleTopBar(R.string.topbar_group) + }, + floatingActionButton = { + FloatingActionButton( + onClick = { navigateGroupRegister() }, + shape = CircleShape, + containerColor = GongBaekTheme.colors.mainOrange, + ) { + Icon( + imageVector = ImageVector.vectorResource(R.drawable.ic_plus_24), + contentDescription = null, + tint = GongBaekTheme.colors.white + ) + } } ) { innerPadding -> Column( @@ -107,7 +121,7 @@ fun GroupListScreen( item { Row( modifier = Modifier - .padding(horizontal = 16.dp, vertical = 12.dp) + .padding(start = 16.dp, end = 16.dp, top = 12.dp) .fillMaxWidth() .height(IntrinsicSize.Min), horizontalArrangement = Arrangement.SpaceBetween, @@ -133,7 +147,7 @@ fun GroupListScreen( private fun GongBaekToggleButton( checkedState: Boolean, onCLick: () -> Unit, - modifier: Modifier = Modifier, + modifier: Modifier = Modifier ) { val density = LocalDensity.current val minBound = with(density) { 0.dp.toPx() } From 5f8ee8276404fb543e76afee62e3eb16c1a3e480 Mon Sep 17 00:00:00 2001 From: MinseoSONG Date: Sat, 18 Jan 2025 23:22:22 +0900 Subject: [PATCH 06/14] =?UTF-8?q?[feat]=20GroupListScreen=EC=9D=84=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=ED=95=A9=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/grouplist/screen/GroupListScreen.kt | 344 ++++++++++++++++-- 1 file changed, 314 insertions(+), 30 deletions(-) diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt index 9548df61..cb682b64 100644 --- a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt @@ -19,6 +19,7 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.LazyRow +import androidx.compose.foundation.lazy.items import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.FloatingActionButton @@ -44,8 +45,12 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.IntOffset import androidx.compose.ui.unit.dp import com.sopt.gongbaek.R +import com.sopt.gongbaek.domain.model.GroupInfo +import com.sopt.gongbaek.presentation.type.GroupInfoChipType +import com.sopt.gongbaek.presentation.ui.component.section.GroupInfoSection import com.sopt.gongbaek.presentation.ui.component.topbar.CenterTitleTopBar import com.sopt.gongbaek.presentation.util.extension.clickableWithoutRipple +import com.sopt.gongbaek.presentation.util.extension.createGroupTimeDescription import com.sopt.gongbaek.ui.theme.GONGBAEKTheme import com.sopt.gongbaek.ui.theme.GongBaekTheme import kotlin.math.roundToInt @@ -57,14 +62,134 @@ fun GroupListRoute( ) { GroupListScreen( navigateGroupDetail = navigateGroupDetail, - navigateGroupRegister = navigateGroupRegister + navigateGroupRegister = navigateGroupRegister, + groupList = listOf( + GroupInfo( + groupId = 1, + coverImg = 1, + status = "RECRUITING", + category = "PLAYING", + cycle = "ONCE", + title = "화석의 튜스데이 점심 클럽", + date = "2025-04-06", + dayOfWeek = "THU", + startTime = 13.5, + endTime = 15.5, + place = "학교 피아노 앞" + ), + GroupInfo( + groupId = 1, + coverImg = 1, + status = "RECRUITED", + category = "PLAYING", + cycle = "ONCE", + title = "화석의 튜스데이 점심 클럽", + date = "2025-04-06", + dayOfWeek = "THU", + startTime = 13.5, + endTime = 15.5, + place = "학교 피아노 앞" + ), + GroupInfo( + groupId = 1, + coverImg = 1, + status = "CLOSED", + category = "PLAYING", + cycle = "ONCE", + title = "화석의 튜스데이 점심 클럽", + date = "2025-04-06", + dayOfWeek = "THU", + startTime = 13.5, + endTime = 15.5, + place = "학교 피아노 앞" + ), + GroupInfo( + groupId = 1, + coverImg = 1, + status = "RECRUITING", + category = "PLAYING", + cycle = "ONCE", + title = "화석의 튜스데이 점심 클럽", + date = "2025-04-06", + dayOfWeek = "THU", + startTime = 13.5, + endTime = 15.5, + place = "학교 피아노 앞" + ), + GroupInfo( + groupId = 1, + coverImg = 1, + status = "CLOSED", + category = "PLAYING", + cycle = "ONCE", + title = "화석의 튜스데이 점심 클럽", + date = "2025-04-06", + dayOfWeek = "THU", + startTime = 13.5, + endTime = 15.5, + place = "학교 피아노 앞" + ), + GroupInfo( + groupId = 1, + coverImg = 1, + status = "CLOSED", + category = "PLAYING", + cycle = "ONCE", + title = "화석의 튜스데이 점심 클럽", + date = "2025-04-06", + dayOfWeek = "THU", + startTime = 13.5, + endTime = 15.5, + place = "학교 피아노 앞" + ), + GroupInfo( + groupId = 1, + coverImg = 1, + status = "CLOSED", + category = "PLAYING", + cycle = "ONCE", + title = "화석의 튜스데이 점심 클럽", + date = "2025-04-06", + dayOfWeek = "THU", + startTime = 13.5, + endTime = 15.5, + place = "학교 피아노 앞" + ), + GroupInfo( + groupId = 1, + coverImg = 1, + status = "CLOSED", + category = "PLAYING", + cycle = "ONCE", + title = "화석의 튜스데이 점심 클럽", + date = "2025-04-06", + dayOfWeek = "THU", + startTime = 13.5, + endTime = 15.5, + place = "학교 피아노 앞" + ), + GroupInfo( + groupId = 1, + coverImg = 1, + status = "CLOSED", + category = "PLAYING", + cycle = "ONCE", + title = "화석의 튜스데이 점심 클럽", + date = "2025-04-06", + dayOfWeek = "THU", + startTime = 13.5, + endTime = 15.5, + place = "학교 피아노 앞" + ) + ) ) } @Composable fun GroupListScreen( navigateGroupDetail: () -> Unit, - navigateGroupRegister: () -> Unit + navigateGroupRegister: () -> Unit, + groupList: List ) { var selectedDayOfWeekIndex by remember { mutableIntStateOf(0) } var selectedCategoryIndex by remember { mutableIntStateOf(0) } @@ -78,7 +203,7 @@ fun GroupListScreen( FloatingActionButton( onClick = { navigateGroupRegister() }, shape = CircleShape, - containerColor = GongBaekTheme.colors.mainOrange, + containerColor = GongBaekTheme.colors.mainOrange ) { Icon( imageVector = ImageVector.vectorResource(R.drawable.ic_plus_24), @@ -97,8 +222,7 @@ fun GroupListScreen( selectedIndex = selectedDayOfWeekIndex, onIndexSelected = { index -> selectedDayOfWeekIndex = index - }, - modifier = Modifier.padding(horizontal = 16.dp) + } ) Spacer(Modifier.height(8.dp)) @@ -138,6 +262,25 @@ fun GroupListScreen( ) } } + + items(items = groupList) { groupList -> + GroupInfoSection( + groupStatus = GroupInfoChipType.getChipTypeFromStatus(groupList.status), + groupCategory = GroupInfoChipType.getChipTypeFromCategory(groupList.category), + groupCycle = GroupInfoChipType.getChipTypeFromCycle(groupList.cycle), + groupTitle = groupList.title, + groupTime = createGroupTimeDescription(groupList), + groupPlace = groupList.place, + modifier = Modifier + .padding(vertical = 12.dp, horizontal = 16.dp) + ) + + HorizontalDivider( + modifier = Modifier.fillMaxWidth(), + thickness = 1.dp, + color = GongBaekTheme.colors.gray01 + ) + } } } } @@ -257,15 +400,10 @@ private fun CategoryBar( if (index == 0) { Spacer(Modifier.width(16.dp)) } - Text( - text = stringResource(contentLists[index]), - style = GongBaekTheme.typography.caption1.sb13, - color = if (selectedIndex == index) { - GongBaekTheme.colors.white - } else { - GongBaekTheme.colors.gray06 - }, + + Box( modifier = Modifier + .height((LocalConfiguration.current.screenHeightDp * 0.03f).dp) .border( width = 1.dp, color = if (selectedIndex == index) { @@ -283,11 +421,25 @@ private fun CategoryBar( }, shape = RoundedCornerShape(4.dp) ) - .padding(horizontal = 12.dp, vertical = 6.dp) + .padding( + horizontal = 12.dp, + vertical = 6.dp + ) .clickableWithoutRipple { onIndexSelected(index) + }, + contentAlignment = Alignment.Center + ) { + Text( + text = stringResource(contentLists[index]), + style = GongBaekTheme.typography.caption1.m13, + color = if (selectedIndex == index) { + GongBaekTheme.colors.white + } else { + GongBaekTheme.colors.gray06 } - ) + ) + } if (index == contentLists.size - 1) { Spacer(Modifier.width(16.dp)) @@ -312,25 +464,20 @@ private fun DayOfWeekBar( ) Row( modifier = modifier + .padding(horizontal = 16.dp) + .fillMaxWidth() .background( color = GongBaekTheme.colors.gray01, shape = RoundedCornerShape(4.dp) ) - .padding(vertical = 2.dp, horizontal = 3.dp) - .fillMaxWidth(), + .padding(vertical = 2.dp, horizontal = 3.dp), horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically ) { contentLists.forEachIndexed { index, content -> - Text( - text = stringResource(content), - color = if (selectedIndex == index) { - GongBaekTheme.colors.mainOrange - } else { - GongBaekTheme.colors.gray06 - }, - style = GongBaekTheme.typography.caption1.sb13, - modifier = Modifier + Box( + modifier = modifier + .height((LocalConfiguration.current.screenHeightDp * 0.04f).dp) .background( color = if (selectedIndex == index) { GongBaekTheme.colors.white @@ -339,11 +486,29 @@ private fun DayOfWeekBar( }, shape = RoundedCornerShape(2.dp) ) - .padding(horizontal = 9.dp, vertical = 8.dp) + .padding( + horizontal = if (index == 0) { + 12.dp + } else { + 9.dp + }, + vertical = 8.dp + ) .clickableWithoutRipple { onIndexSelected(index) - } - ) + }, + contentAlignment = Alignment.Center + ) { + Text( + text = stringResource(content), + color = if (selectedIndex == index) { + GongBaekTheme.colors.mainOrange + } else { + GongBaekTheme.colors.gray06 + }, + style = GongBaekTheme.typography.caption1.sb13 + ) + } } } } @@ -370,7 +535,126 @@ fun ShowGroupListScreen() { GONGBAEKTheme { GroupListScreen( navigateGroupDetail = {}, - navigateGroupRegister = {} + navigateGroupRegister = {}, + groupList = listOf( + GroupInfo( + groupId = 1, + coverImg = 1, + status = "CLOSED", + category = "PLAYING", + cycle = "ONCE", + title = "화석의 튜스데이 점심 클럽", + date = "2025-04-06", + dayOfWeek = "THU", + startTime = 13.5, + endTime = 15.5, + place = "학교 피아노 앞" + ), + GroupInfo( + groupId = 1, + coverImg = 1, + status = "CLOSED", + category = "PLAYING", + cycle = "ONCE", + title = "화석의 튜스데이 점심 클럽", + date = "2025-04-06", + dayOfWeek = "THU", + startTime = 13.5, + endTime = 15.5, + place = "학교 피아노 앞" + ), + GroupInfo( + groupId = 1, + coverImg = 1, + status = "CLOSED", + category = "PLAYING", + cycle = "ONCE", + title = "화석의 튜스데이 점심 클럽", + date = "2025-04-06", + dayOfWeek = "THU", + startTime = 13.5, + endTime = 15.5, + place = "학교 피아노 앞" + ), + GroupInfo( + groupId = 1, + coverImg = 1, + status = "CLOSED", + category = "PLAYING", + cycle = "ONCE", + title = "화석의 튜스데이 점심 클럽", + date = "2025-04-06", + dayOfWeek = "THU", + startTime = 13.5, + endTime = 15.5, + place = "학교 피아노 앞" + ), + GroupInfo( + groupId = 1, + coverImg = 1, + status = "CLOSED", + category = "PLAYING", + cycle = "ONCE", + title = "화석의 튜스데이 점심 클럽", + date = "2025-04-06", + dayOfWeek = "THU", + startTime = 13.5, + endTime = 15.5, + place = "학교 피아노 앞" + ), + GroupInfo( + groupId = 1, + coverImg = 1, + status = "CLOSED", + category = "PLAYING", + cycle = "ONCE", + title = "화석의 튜스데이 점심 클럽", + date = "2025-04-06", + dayOfWeek = "THU", + startTime = 13.5, + endTime = 15.5, + place = "학교 피아노 앞" + ), + GroupInfo( + groupId = 1, + coverImg = 1, + status = "CLOSED", + category = "PLAYING", + cycle = "ONCE", + title = "화석의 튜스데이 점심 클럽", + date = "2025-04-06", + dayOfWeek = "THU", + startTime = 13.5, + endTime = 15.5, + place = "학교 피아노 앞" + ), + GroupInfo( + groupId = 1, + coverImg = 1, + status = "CLOSED", + category = "PLAYING", + cycle = "ONCE", + title = "화석의 튜스데이 점심 클럽", + date = "2025-04-06", + dayOfWeek = "THU", + startTime = 13.5, + endTime = 15.5, + place = "학교 피아노 앞" + ), + GroupInfo( + groupId = 1, + coverImg = 1, + status = "CLOSED", + category = "PLAYING", + cycle = "ONCE", + title = "화석의 튜스데이 점심 클럽", + date = "2025-04-06", + dayOfWeek = "THU", + startTime = 13.5, + endTime = 15.5, + place = "학교 피아노 앞" + ) + ) ) } } From c80d2f86284590417594a342d01ce823940efbbf Mon Sep 17 00:00:00 2001 From: MinseoSONG Date: Sat, 18 Jan 2025 23:34:31 +0900 Subject: [PATCH 07/14] =?UTF-8?q?[chore]=20ktlint=EB=A5=BC=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9=ED=95=A9=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../presentation/ui/grouplist/screen/GroupListScreen.kt | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt index cb682b64..ae4589e1 100644 --- a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt @@ -273,6 +273,9 @@ fun GroupListScreen( groupPlace = groupList.place, modifier = Modifier .padding(vertical = 12.dp, horizontal = 16.dp) + .clickableWithoutRipple { + navigateGroupDetail() + } ) HorizontalDivider( From c0741699e380f8c08625d95cf3d52b108ecad1e1 Mon Sep 17 00:00:00 2001 From: MinseoSONG Date: Sat, 18 Jan 2025 23:43:25 +0900 Subject: [PATCH 08/14] =?UTF-8?q?[chore]=20UI=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=EB=A5=BC=20=EC=88=98=EC=A0=95=ED=95=A9?= =?UTF-8?q?=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../presentation/ui/grouplist/screen/GroupListScreen.kt | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt index ae4589e1..d9304b5c 100644 --- a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt @@ -362,13 +362,15 @@ private fun CycleBottomSheet( .padding(horizontal = 12.dp, vertical = 6.dp) .clickableWithoutRipple { onCLick() - } + }, + verticalAlignment = Alignment.CenterVertically ) { Text( text = stringResource(R.string.grouplist_cycle_all), color = GongBaekTheme.colors.gray10, style = GongBaekTheme.typography.caption1.m13 ) + Spacer(Modifier.width(6.dp)) Icon( imageVector = ImageVector.vectorResource(R.drawable.ic_arrow_bottom_18), @@ -406,7 +408,6 @@ private fun CategoryBar( Box( modifier = Modifier - .height((LocalConfiguration.current.screenHeightDp * 0.03f).dp) .border( width = 1.dp, color = if (selectedIndex == index) { From f34894155d6fab3d6cd4c382175e6cd05b4110d7 Mon Sep 17 00:00:00 2001 From: MinseoSONG Date: Sun, 19 Jan 2025 00:56:57 +0900 Subject: [PATCH 09/14] =?UTF-8?q?[chore]=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EB=A5=BC=20=EB=B6=84=EB=A6=AC=ED=95=A9=EB=8B=88?= =?UTF-8?q?=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/grouplist/component/CategoryBar.kt | 105 +++++ .../component/CycleBottomSheetPresenter.kt | 51 +++ .../ui/grouplist/component/DayOfWeekBar.kt | 95 +++++ .../component/GongBaekToggleButton.kt | 88 +++++ .../ui/grouplist/screen/GroupListScreen.kt | 364 +----------------- 5 files changed, 347 insertions(+), 356 deletions(-) create mode 100644 app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/CategoryBar.kt create mode 100644 app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/CycleBottomSheetPresenter.kt create mode 100644 app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/DayOfWeekBar.kt create mode 100644 app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/GongBaekToggleButton.kt diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/CategoryBar.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/CategoryBar.kt new file mode 100644 index 00000000..94c39317 --- /dev/null +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/CategoryBar.kt @@ -0,0 +1,105 @@ +package com.sopt.gongbaek.presentation.ui.grouplist.component + +import androidx.compose.foundation.background +import androidx.compose.foundation.border +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.lazy.LazyRow +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Text +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.res.stringResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.sopt.gongbaek.R +import com.sopt.gongbaek.presentation.util.extension.clickableWithoutRipple +import com.sopt.gongbaek.ui.theme.GONGBAEKTheme +import com.sopt.gongbaek.ui.theme.GongBaekTheme + +@Composable +fun CategoryBar( + modifier: Modifier = Modifier, + selectedIndex: Int = 0, + onIndexSelected: (Int) -> Unit = {} +) { + val contentLists = listOf( + R.string.grouplist_dayofweek_all, + R.string.group_info_chip_category_study, + R.string.group_info_chip_category_dining, + R.string.group_info_chip_category_exercise, + R.string.group_info_chip_category_playing, + R.string.group_info_chip_category_networking, + R.string.group_info_chip_category_others + ) + + LazyRow( + modifier = modifier + .fillMaxWidth(), + horizontalArrangement = Arrangement.spacedBy(9.dp), + verticalAlignment = Alignment.CenterVertically + ) { + items(contentLists.size) { index -> + if (index == 0) { + Spacer(Modifier.width(16.dp)) + } + + Box( + modifier = Modifier + .border( + width = 1.dp, + color = if (selectedIndex == index) { + Color.Transparent + } else { + GongBaekTheme.colors.gray02 + }, + shape = RoundedCornerShape(4.dp) + ) + .background( + color = if (selectedIndex == index) { + GongBaekTheme.colors.gray09 + } else { + GongBaekTheme.colors.white + }, + shape = RoundedCornerShape(4.dp) + ) + .padding( + horizontal = 12.dp, + vertical = 6.dp + ) + .clickableWithoutRipple { + onIndexSelected(index) + }, + contentAlignment = Alignment.Center + ) { + Text( + text = stringResource(contentLists[index]), + style = GongBaekTheme.typography.caption1.m13, + color = if (selectedIndex == index) { + GongBaekTheme.colors.white + } else { + GongBaekTheme.colors.gray06 + } + ) + } + + if (index == contentLists.size - 1) { + Spacer(Modifier.width(16.dp)) + } + } + } +} + +@Preview +@Composable +private fun PreviewCategoryBar() { + GONGBAEKTheme { + CategoryBar() + } +} diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/CycleBottomSheetPresenter.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/CycleBottomSheetPresenter.kt new file mode 100644 index 00000000..07d674aa --- /dev/null +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/CycleBottomSheetPresenter.kt @@ -0,0 +1,51 @@ +package com.sopt.gongbaek.presentation.ui.grouplist.component + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +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.graphics.vector.ImageVector +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.res.vectorResource +import androidx.compose.ui.unit.dp +import com.sopt.gongbaek.R +import com.sopt.gongbaek.presentation.util.extension.clickableWithoutRipple +import com.sopt.gongbaek.ui.theme.GongBaekTheme + +@Composable +fun CycleBottomSheetPresenter( + modifier: Modifier = Modifier, + onClick: () -> Unit = {} +) { + Row( + modifier = modifier + .background( + color = GongBaekTheme.colors.gray01, + shape = RoundedCornerShape(20.dp) + ) + .padding(horizontal = 12.dp, vertical = 6.dp) + .clickableWithoutRipple { + onClick() + }, + verticalAlignment = Alignment.CenterVertically + ) { + Text( + text = stringResource(R.string.grouplist_cycle_all), + color = GongBaekTheme.colors.gray10, + style = GongBaekTheme.typography.caption1.m13 + ) + Spacer(Modifier.width(6.dp)) + + Icon( + imageVector = ImageVector.vectorResource(R.drawable.ic_arrow_bottom_18), + contentDescription = null + ) + } +} diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/DayOfWeekBar.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/DayOfWeekBar.kt new file mode 100644 index 00000000..4066eb65 --- /dev/null +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/DayOfWeekBar.kt @@ -0,0 +1,95 @@ +package com.sopt.gongbaek.presentation.ui.grouplist.component + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.platform.LocalConfiguration +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.sopt.gongbaek.R +import com.sopt.gongbaek.presentation.util.extension.clickableWithoutRipple +import com.sopt.gongbaek.ui.theme.GONGBAEKTheme +import com.sopt.gongbaek.ui.theme.GongBaekTheme + +@Composable +fun DayOfWeekBar( + modifier: Modifier = Modifier, + selectedIndex: Int = 0, + onIndexSelected: (Int) -> Unit = {} +) { + val contentLists = listOf( + R.string.grouplist_dayofweek_all, + R.string.grouplist_dayofweek_mon, + R.string.grouplist_dayofweek_tue, + R.string.grouplist_dayofweek_wed, + R.string.grouplist_dayofweek_thu, + R.string.grouplist_dayofweek_fri + ) + Row( + modifier = modifier + .padding(horizontal = 16.dp) + .fillMaxWidth() + .background( + color = GongBaekTheme.colors.gray01, + shape = RoundedCornerShape(4.dp) + ) + .padding(vertical = 2.dp, horizontal = 3.dp), + horizontalArrangement = Arrangement.SpaceBetween, + verticalAlignment = Alignment.CenterVertically + ) { + contentLists.forEachIndexed { index, content -> + Box( + modifier = modifier + .height((LocalConfiguration.current.screenHeightDp * 0.04f).dp) + .background( + color = if (selectedIndex == index) { + GongBaekTheme.colors.white + } else { + GongBaekTheme.colors.gray01 + }, + shape = RoundedCornerShape(2.dp) + ) + .padding( + horizontal = if (index == 0) { + 12.dp + } else { + 9.dp + }, + vertical = 8.dp + ) + .clickableWithoutRipple { + onIndexSelected(index) + }, + contentAlignment = Alignment.Center + ) { + Text( + text = stringResource(content), + color = if (selectedIndex == index) { + GongBaekTheme.colors.mainOrange + } else { + GongBaekTheme.colors.gray06 + }, + style = GongBaekTheme.typography.caption1.sb13 + ) + } + } + } +} + +@Preview +@Composable +private fun PreviewDayOfWeekBar() { + GONGBAEKTheme { + DayOfWeekBar() + } +} diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/GongBaekToggleButton.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/GongBaekToggleButton.kt new file mode 100644 index 00000000..31e35d5a --- /dev/null +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/GongBaekToggleButton.kt @@ -0,0 +1,88 @@ +package com.sopt.gongbaek.presentation.ui.grouplist.component + +import androidx.compose.animation.core.animateFloatAsState +import androidx.compose.animation.core.tween +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.aspectRatio +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.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.platform.LocalConfiguration +import androidx.compose.ui.platform.LocalDensity +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.unit.IntOffset +import androidx.compose.ui.unit.dp +import com.sopt.gongbaek.R +import com.sopt.gongbaek.presentation.util.extension.clickableWithoutRipple +import com.sopt.gongbaek.ui.theme.GongBaekTheme +import kotlin.math.roundToInt + +@Composable +fun GongBaekToggleButton( + checkedState: Boolean, + onClick: () -> Unit, + modifier: Modifier = Modifier +) { + val density = LocalDensity.current + val minBound = with(density) { 0.dp.toPx() } + val maxBound = with(density) { (LocalConfiguration.current.screenWidthDp * 0.06f).dp.toPx() } + val state by animateFloatAsState( + targetValue = if (checkedState) maxBound else minBound, + animationSpec = tween(durationMillis = 300) + ) + Row( + modifier = modifier, + verticalAlignment = Alignment.CenterVertically + ) { + Text( + text = stringResource( + if (checkedState) { + R.string.grouplist_gongbaek_duplicate + } else { + R.string.grouplist_gongbaek_all + } + ), + color = GongBaekTheme.colors.gray06, + style = GongBaekTheme.typography.caption2.r12 + ) + Spacer(Modifier.width(6.dp)) + + Box( + modifier = modifier + .aspectRatio(42f / 24f) + .height((LocalConfiguration.current.screenHeightDp * 0.03f).dp) + .background( + color = if (checkedState) { + GongBaekTheme.colors.mainOrange + } else { + GongBaekTheme.colors.gray06 + }, + shape = RoundedCornerShape(20.dp) + ) + .padding(3.5.dp) + .clickableWithoutRipple { onClick() } + ) { + Box( + modifier = Modifier + .offset { IntOffset(state.roundToInt(), 0) } + .aspectRatio(1f / 1f) + .height((LocalConfiguration.current.screenHeightDp * 0.02f).dp) + .background( + color = GongBaekTheme.colors.white, + shape = CircleShape + ) + ) + } + } +} diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt index d9304b5c..6e9540db 100644 --- a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/screen/GroupListScreen.kt @@ -1,32 +1,21 @@ package com.sopt.gongbaek.presentation.ui.grouplist.screen -import androidx.compose.animation.core.animateFloatAsState -import androidx.compose.animation.core.tween -import androidx.compose.foundation.background -import androidx.compose.foundation.border import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.IntrinsicSize import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.aspectRatio 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.lazy.LazyColumn -import androidx.compose.foundation.lazy.LazyRow import androidx.compose.foundation.lazy.items import androidx.compose.foundation.shape.CircleShape -import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.FloatingActionButton import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon import androidx.compose.material3.Scaffold -import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableIntStateOf @@ -35,25 +24,23 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.vector.ImageVector -import androidx.compose.ui.platform.LocalConfiguration -import androidx.compose.ui.platform.LocalDensity -import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.vectorResource import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.IntOffset import androidx.compose.ui.unit.dp import com.sopt.gongbaek.R import com.sopt.gongbaek.domain.model.GroupInfo import com.sopt.gongbaek.presentation.type.GroupInfoChipType import com.sopt.gongbaek.presentation.ui.component.section.GroupInfoSection import com.sopt.gongbaek.presentation.ui.component.topbar.CenterTitleTopBar +import com.sopt.gongbaek.presentation.ui.grouplist.component.CategoryBar +import com.sopt.gongbaek.presentation.ui.grouplist.component.CycleBottomSheetPresenter +import com.sopt.gongbaek.presentation.ui.grouplist.component.DayOfWeekBar +import com.sopt.gongbaek.presentation.ui.grouplist.component.GongBaekToggleButton import com.sopt.gongbaek.presentation.util.extension.clickableWithoutRipple import com.sopt.gongbaek.presentation.util.extension.createGroupTimeDescription import com.sopt.gongbaek.ui.theme.GONGBAEKTheme import com.sopt.gongbaek.ui.theme.GongBaekTheme -import kotlin.math.roundToInt @Composable fun GroupListRoute( @@ -201,7 +188,7 @@ fun GroupListScreen( }, floatingActionButton = { FloatingActionButton( - onClick = { navigateGroupRegister() }, + onClick = navigateGroupRegister, shape = CircleShape, containerColor = GongBaekTheme.colors.mainOrange ) { @@ -245,17 +232,17 @@ fun GroupListScreen( item { Row( modifier = Modifier - .padding(start = 16.dp, end = 16.dp, top = 12.dp) .fillMaxWidth() + .padding(start = 16.dp, end = 16.dp, top = 12.dp) .height(IntrinsicSize.Min), horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically ) { - CycleBottomSheet() + CycleBottomSheetPresenter() GongBaekToggleButton( checkedState = toggleCheckedState, - onCLick = { + onClick = { toggleCheckedState = !toggleCheckedState }, modifier = Modifier.align(Alignment.Top) @@ -289,250 +276,6 @@ fun GroupListScreen( } } -@Composable -private fun GongBaekToggleButton( - checkedState: Boolean, - onCLick: () -> Unit, - modifier: Modifier = Modifier -) { - val density = LocalDensity.current - val minBound = with(density) { 0.dp.toPx() } - val maxBound = with(density) { (LocalConfiguration.current.screenWidthDp * 0.06f).dp.toPx() } - val state by animateFloatAsState( - targetValue = if (checkedState) maxBound else minBound, - animationSpec = tween(durationMillis = 300) - ) - Row( - modifier = modifier, - verticalAlignment = Alignment.CenterVertically - ) { - Text( - text = stringResource( - if (checkedState) { - R.string.grouplist_gongbaek_duplicate - } else { - R.string.grouplist_gongbaek_all - } - ), - color = GongBaekTheme.colors.gray06, - style = GongBaekTheme.typography.caption2.r12 - ) - Spacer(Modifier.width(6.dp)) - - Box( - modifier = modifier - .aspectRatio(42f / 24f) - .height((LocalConfiguration.current.screenHeightDp * 0.03f).dp) - .background( - color = if (checkedState) { - GongBaekTheme.colors.mainOrange - } else { - GongBaekTheme.colors.gray06 - }, - shape = RoundedCornerShape(20.dp) - ) - .padding(3.5.dp) - .clickableWithoutRipple { onCLick() } - ) { - Box( - modifier = Modifier - .offset { IntOffset(state.roundToInt(), 0) } - .aspectRatio(1f / 1f) - .height((LocalConfiguration.current.screenHeightDp * 0.02f).dp) - .background( - color = GongBaekTheme.colors.white, - shape = CircleShape - ) - ) - } - } -} - -@Composable -private fun CycleBottomSheet( - modifier: Modifier = Modifier, - onCLick: () -> Unit = {} -) { - Row( - modifier = modifier - .background( - color = GongBaekTheme.colors.gray01, - shape = RoundedCornerShape(20.dp) - ) - .padding(horizontal = 12.dp, vertical = 6.dp) - .clickableWithoutRipple { - onCLick() - }, - verticalAlignment = Alignment.CenterVertically - ) { - Text( - text = stringResource(R.string.grouplist_cycle_all), - color = GongBaekTheme.colors.gray10, - style = GongBaekTheme.typography.caption1.m13 - ) - Spacer(Modifier.width(6.dp)) - - Icon( - imageVector = ImageVector.vectorResource(R.drawable.ic_arrow_bottom_18), - contentDescription = null - ) - } -} - -@Composable -private fun CategoryBar( - modifier: Modifier = Modifier, - selectedIndex: Int = 0, - onIndexSelected: (Int) -> Unit = {} -) { - val contentLists = listOf( - R.string.grouplist_dayofweek_all, - R.string.group_info_chip_category_study, - R.string.group_info_chip_category_dining, - R.string.group_info_chip_category_exercise, - R.string.group_info_chip_category_playing, - R.string.group_info_chip_category_networking, - R.string.group_info_chip_category_others - ) - - LazyRow( - modifier = modifier - .fillMaxWidth(), - horizontalArrangement = Arrangement.spacedBy(9.dp), - verticalAlignment = Alignment.CenterVertically - ) { - items(contentLists.size) { index -> - if (index == 0) { - Spacer(Modifier.width(16.dp)) - } - - Box( - modifier = Modifier - .border( - width = 1.dp, - color = if (selectedIndex == index) { - Color.Transparent - } else { - GongBaekTheme.colors.gray02 - }, - shape = RoundedCornerShape(4.dp) - ) - .background( - color = if (selectedIndex == index) { - GongBaekTheme.colors.gray09 - } else { - GongBaekTheme.colors.white - }, - shape = RoundedCornerShape(4.dp) - ) - .padding( - horizontal = 12.dp, - vertical = 6.dp - ) - .clickableWithoutRipple { - onIndexSelected(index) - }, - contentAlignment = Alignment.Center - ) { - Text( - text = stringResource(contentLists[index]), - style = GongBaekTheme.typography.caption1.m13, - color = if (selectedIndex == index) { - GongBaekTheme.colors.white - } else { - GongBaekTheme.colors.gray06 - } - ) - } - - if (index == contentLists.size - 1) { - Spacer(Modifier.width(16.dp)) - } - } - } -} - -@Composable -private fun DayOfWeekBar( - modifier: Modifier = Modifier, - selectedIndex: Int = 0, - onIndexSelected: (Int) -> Unit = {} -) { - val contentLists = listOf( - R.string.grouplist_dayofweek_all, - R.string.grouplist_dayofweek_mon, - R.string.grouplist_dayofweek_tue, - R.string.grouplist_dayofweek_wed, - R.string.grouplist_dayofweek_thu, - R.string.grouplist_dayofweek_fri - ) - Row( - modifier = modifier - .padding(horizontal = 16.dp) - .fillMaxWidth() - .background( - color = GongBaekTheme.colors.gray01, - shape = RoundedCornerShape(4.dp) - ) - .padding(vertical = 2.dp, horizontal = 3.dp), - horizontalArrangement = Arrangement.SpaceBetween, - verticalAlignment = Alignment.CenterVertically - ) { - contentLists.forEachIndexed { index, content -> - Box( - modifier = modifier - .height((LocalConfiguration.current.screenHeightDp * 0.04f).dp) - .background( - color = if (selectedIndex == index) { - GongBaekTheme.colors.white - } else { - GongBaekTheme.colors.gray01 - }, - shape = RoundedCornerShape(2.dp) - ) - .padding( - horizontal = if (index == 0) { - 12.dp - } else { - 9.dp - }, - vertical = 8.dp - ) - .clickableWithoutRipple { - onIndexSelected(index) - }, - contentAlignment = Alignment.Center - ) { - Text( - text = stringResource(content), - color = if (selectedIndex == index) { - GongBaekTheme.colors.mainOrange - } else { - GongBaekTheme.colors.gray06 - }, - style = GongBaekTheme.typography.caption1.sb13 - ) - } - } - } -} - -@Preview -@Composable -private fun PreviewCategoryBar() { - GONGBAEKTheme { - CategoryBar() - } -} - -@Preview -@Composable -private fun PreviewDayOfWeekBar() { - GONGBAEKTheme { - DayOfWeekBar() - } -} - @Preview(showBackground = true) @Composable fun ShowGroupListScreen() { @@ -541,97 +284,6 @@ fun ShowGroupListScreen() { navigateGroupDetail = {}, navigateGroupRegister = {}, groupList = listOf( - GroupInfo( - groupId = 1, - coverImg = 1, - status = "CLOSED", - category = "PLAYING", - cycle = "ONCE", - title = "화석의 튜스데이 점심 클럽", - date = "2025-04-06", - dayOfWeek = "THU", - startTime = 13.5, - endTime = 15.5, - place = "학교 피아노 앞" - ), - GroupInfo( - groupId = 1, - coverImg = 1, - status = "CLOSED", - category = "PLAYING", - cycle = "ONCE", - title = "화석의 튜스데이 점심 클럽", - date = "2025-04-06", - dayOfWeek = "THU", - startTime = 13.5, - endTime = 15.5, - place = "학교 피아노 앞" - ), - GroupInfo( - groupId = 1, - coverImg = 1, - status = "CLOSED", - category = "PLAYING", - cycle = "ONCE", - title = "화석의 튜스데이 점심 클럽", - date = "2025-04-06", - dayOfWeek = "THU", - startTime = 13.5, - endTime = 15.5, - place = "학교 피아노 앞" - ), - GroupInfo( - groupId = 1, - coverImg = 1, - status = "CLOSED", - category = "PLAYING", - cycle = "ONCE", - title = "화석의 튜스데이 점심 클럽", - date = "2025-04-06", - dayOfWeek = "THU", - startTime = 13.5, - endTime = 15.5, - place = "학교 피아노 앞" - ), - GroupInfo( - groupId = 1, - coverImg = 1, - status = "CLOSED", - category = "PLAYING", - cycle = "ONCE", - title = "화석의 튜스데이 점심 클럽", - date = "2025-04-06", - dayOfWeek = "THU", - startTime = 13.5, - endTime = 15.5, - place = "학교 피아노 앞" - ), - GroupInfo( - groupId = 1, - coverImg = 1, - status = "CLOSED", - category = "PLAYING", - cycle = "ONCE", - title = "화석의 튜스데이 점심 클럽", - date = "2025-04-06", - dayOfWeek = "THU", - startTime = 13.5, - endTime = 15.5, - place = "학교 피아노 앞" - ), - GroupInfo( - groupId = 1, - coverImg = 1, - status = "CLOSED", - category = "PLAYING", - cycle = "ONCE", - title = "화석의 튜스데이 점심 클럽", - date = "2025-04-06", - dayOfWeek = "THU", - startTime = 13.5, - endTime = 15.5, - place = "학교 피아노 앞" - ), GroupInfo( groupId = 1, coverImg = 1, From 5d4d63275f321007125219413ac5bce29fe09a10 Mon Sep 17 00:00:00 2001 From: MinseoSONG Date: Sun, 19 Jan 2025 01:28:59 +0900 Subject: [PATCH 10/14] =?UTF-8?q?[chore]=20type=EB=A5=BC=20=ED=99=9C?= =?UTF-8?q?=EC=9A=A9=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=ED=95=A9=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../gongbaek/domain/type/DayOfWeekType.kt | 4 ++++ .../gongbaek/domain/type/GroupCategoryType.kt | 3 +++ .../ui/grouplist/component/CategoryBar.kt | 19 +++++++++---------- .../ui/grouplist/component/DayOfWeekBar.kt | 18 +++++++++--------- 4 files changed, 25 insertions(+), 19 deletions(-) diff --git a/app/src/main/java/com/sopt/gongbaek/domain/type/DayOfWeekType.kt b/app/src/main/java/com/sopt/gongbaek/domain/type/DayOfWeekType.kt index cbb3e58c..f03d3253 100644 --- a/app/src/main/java/com/sopt/gongbaek/domain/type/DayOfWeekType.kt +++ b/app/src/main/java/com/sopt/gongbaek/domain/type/DayOfWeekType.kt @@ -23,6 +23,10 @@ enum class DayOfWeekType( FRI( description = "금요일", dayOfWeek = "FRI" + ), + ALL( + description = "전체", + dayOfWeek = "ALL" ); companion object { diff --git a/app/src/main/java/com/sopt/gongbaek/domain/type/GroupCategoryType.kt b/app/src/main/java/com/sopt/gongbaek/domain/type/GroupCategoryType.kt index 38cf4730..d9bdb5d0 100644 --- a/app/src/main/java/com/sopt/gongbaek/domain/type/GroupCategoryType.kt +++ b/app/src/main/java/com/sopt/gongbaek/domain/type/GroupCategoryType.kt @@ -20,5 +20,8 @@ enum class GroupCategoryType( ), OTHERS( description = "기타" + ), + ALL( + description = "전체" ) } diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/CategoryBar.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/CategoryBar.kt index 94c39317..1841bc9a 100644 --- a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/CategoryBar.kt +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/CategoryBar.kt @@ -15,10 +15,9 @@ 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.res.stringResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp -import com.sopt.gongbaek.R +import com.sopt.gongbaek.domain.type.GroupCategoryType import com.sopt.gongbaek.presentation.util.extension.clickableWithoutRipple import com.sopt.gongbaek.ui.theme.GONGBAEKTheme import com.sopt.gongbaek.ui.theme.GongBaekTheme @@ -30,13 +29,13 @@ fun CategoryBar( onIndexSelected: (Int) -> Unit = {} ) { val contentLists = listOf( - R.string.grouplist_dayofweek_all, - R.string.group_info_chip_category_study, - R.string.group_info_chip_category_dining, - R.string.group_info_chip_category_exercise, - R.string.group_info_chip_category_playing, - R.string.group_info_chip_category_networking, - R.string.group_info_chip_category_others + GroupCategoryType.ALL.description, + GroupCategoryType.STUDY.description, + GroupCategoryType.DINING.description, + GroupCategoryType.EXERCISE.description, + GroupCategoryType.PLAYING.description, + GroupCategoryType.NETWORKING.description, + GroupCategoryType.OTHERS.description, ) LazyRow( @@ -79,7 +78,7 @@ fun CategoryBar( contentAlignment = Alignment.Center ) { Text( - text = stringResource(contentLists[index]), + text = contentLists[index], style = GongBaekTheme.typography.caption1.m13, color = if (selectedIndex == index) { GongBaekTheme.colors.white diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/DayOfWeekBar.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/DayOfWeekBar.kt index 4066eb65..0719aef0 100644 --- a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/DayOfWeekBar.kt +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/DayOfWeekBar.kt @@ -13,10 +13,9 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalConfiguration -import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp -import com.sopt.gongbaek.R +import com.sopt.gongbaek.domain.type.DayOfWeekType import com.sopt.gongbaek.presentation.util.extension.clickableWithoutRipple import com.sopt.gongbaek.ui.theme.GONGBAEKTheme import com.sopt.gongbaek.ui.theme.GongBaekTheme @@ -28,13 +27,14 @@ fun DayOfWeekBar( onIndexSelected: (Int) -> Unit = {} ) { val contentLists = listOf( - R.string.grouplist_dayofweek_all, - R.string.grouplist_dayofweek_mon, - R.string.grouplist_dayofweek_tue, - R.string.grouplist_dayofweek_wed, - R.string.grouplist_dayofweek_thu, - R.string.grouplist_dayofweek_fri + DayOfWeekType.ALL.description, + DayOfWeekType.MON.description, + DayOfWeekType.TUE.description, + DayOfWeekType.WED.description, + DayOfWeekType.THU.description, + DayOfWeekType.FRI.description, ) + Row( modifier = modifier .padding(horizontal = 16.dp) @@ -73,7 +73,7 @@ fun DayOfWeekBar( contentAlignment = Alignment.Center ) { Text( - text = stringResource(content), + text = content, color = if (selectedIndex == index) { GongBaekTheme.colors.mainOrange } else { From 9a124ee8f706a2d1aca559256175fd8b718a64cd Mon Sep 17 00:00:00 2001 From: MinseoSONG Date: Sun, 19 Jan 2025 01:31:48 +0900 Subject: [PATCH 11/14] =?UTF-8?q?[chore]=20=EB=B3=B4=EC=97=AC=EC=A3=BC?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EA=B8=B0=EB=8A=A5=EC=9D=84=20?= =?UTF-8?q?=EB=A7=89=EC=95=84=EB=91=A1=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../presentation/ui/grouplist/component/DayOfWeekBar.kt | 2 +- .../ui/grouplist/component/GongBaekToggleButton.kt | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/DayOfWeekBar.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/DayOfWeekBar.kt index 0719aef0..e7f4484a 100644 --- a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/DayOfWeekBar.kt +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/DayOfWeekBar.kt @@ -68,7 +68,7 @@ fun DayOfWeekBar( vertical = 8.dp ) .clickableWithoutRipple { - onIndexSelected(index) +// onIndexSelected(index) }, contentAlignment = Alignment.Center ) { diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/GongBaekToggleButton.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/GongBaekToggleButton.kt index 31e35d5a..7346facd 100644 --- a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/GongBaekToggleButton.kt +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/GongBaekToggleButton.kt @@ -71,7 +71,9 @@ fun GongBaekToggleButton( shape = RoundedCornerShape(20.dp) ) .padding(3.5.dp) - .clickableWithoutRipple { onClick() } + .clickableWithoutRipple { +// onClick() + } ) { Box( modifier = Modifier From 86bded597089ad962597187d6f8e45f8b4138c18 Mon Sep 17 00:00:00 2001 From: MinseoSONG Date: Sun, 19 Jan 2025 01:33:55 +0900 Subject: [PATCH 12/14] =?UTF-8?q?[chore]=20ktlint=EB=A5=BC=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9=ED=95=A9=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../gongbaek/presentation/ui/grouplist/component/CategoryBar.kt | 2 +- .../presentation/ui/grouplist/component/DayOfWeekBar.kt | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/CategoryBar.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/CategoryBar.kt index 1841bc9a..9674f9ca 100644 --- a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/CategoryBar.kt +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/CategoryBar.kt @@ -35,7 +35,7 @@ fun CategoryBar( GroupCategoryType.EXERCISE.description, GroupCategoryType.PLAYING.description, GroupCategoryType.NETWORKING.description, - GroupCategoryType.OTHERS.description, + GroupCategoryType.OTHERS.description ) LazyRow( diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/DayOfWeekBar.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/DayOfWeekBar.kt index e7f4484a..66324074 100644 --- a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/DayOfWeekBar.kt +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/DayOfWeekBar.kt @@ -32,7 +32,7 @@ fun DayOfWeekBar( DayOfWeekType.TUE.description, DayOfWeekType.WED.description, DayOfWeekType.THU.description, - DayOfWeekType.FRI.description, + DayOfWeekType.FRI.description ) Row( From 50a334310b77ac9120b4363d4a69275bd68e68a5 Mon Sep 17 00:00:00 2001 From: MinseoSONG Date: Sun, 19 Jan 2025 01:40:26 +0900 Subject: [PATCH 13/14] =?UTF-8?q?[chore]=20=EC=A4=84=EB=B0=94=EA=BF=88?= =?UTF-8?q?=EC=9D=84=20=EC=88=98=EC=A0=95=ED=95=A9=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/grouplist/component/CategoryBar.kt | 18 +++--------------- .../ui/grouplist/component/DayOfWeekBar.kt | 18 +++--------------- .../component/GongBaekToggleButton.kt | 6 +----- 3 files changed, 7 insertions(+), 35 deletions(-) diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/CategoryBar.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/CategoryBar.kt index 9674f9ca..80279be9 100644 --- a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/CategoryBar.kt +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/CategoryBar.kt @@ -53,19 +53,11 @@ fun CategoryBar( modifier = Modifier .border( width = 1.dp, - color = if (selectedIndex == index) { - Color.Transparent - } else { - GongBaekTheme.colors.gray02 - }, + color = if (selectedIndex == index) Color.Transparent else GongBaekTheme.colors.gray02, shape = RoundedCornerShape(4.dp) ) .background( - color = if (selectedIndex == index) { - GongBaekTheme.colors.gray09 - } else { - GongBaekTheme.colors.white - }, + color = if (selectedIndex == index) GongBaekTheme.colors.gray09 else GongBaekTheme.colors.white, shape = RoundedCornerShape(4.dp) ) .padding( @@ -80,11 +72,7 @@ fun CategoryBar( Text( text = contentLists[index], style = GongBaekTheme.typography.caption1.m13, - color = if (selectedIndex == index) { - GongBaekTheme.colors.white - } else { - GongBaekTheme.colors.gray06 - } + color = if (selectedIndex == index) GongBaekTheme.colors.white else GongBaekTheme.colors.gray06 ) } diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/DayOfWeekBar.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/DayOfWeekBar.kt index 66324074..ec36345e 100644 --- a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/DayOfWeekBar.kt +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/DayOfWeekBar.kt @@ -52,19 +52,11 @@ fun DayOfWeekBar( modifier = modifier .height((LocalConfiguration.current.screenHeightDp * 0.04f).dp) .background( - color = if (selectedIndex == index) { - GongBaekTheme.colors.white - } else { - GongBaekTheme.colors.gray01 - }, + color = if (selectedIndex == index) GongBaekTheme.colors.white else GongBaekTheme.colors.gray01, shape = RoundedCornerShape(2.dp) ) .padding( - horizontal = if (index == 0) { - 12.dp - } else { - 9.dp - }, + horizontal = if (index == 0) 12.dp else 9.dp, vertical = 8.dp ) .clickableWithoutRipple { @@ -74,11 +66,7 @@ fun DayOfWeekBar( ) { Text( text = content, - color = if (selectedIndex == index) { - GongBaekTheme.colors.mainOrange - } else { - GongBaekTheme.colors.gray06 - }, + color = if (selectedIndex == index) GongBaekTheme.colors.mainOrange else GongBaekTheme.colors.gray06, style = GongBaekTheme.typography.caption1.sb13 ) } diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/GongBaekToggleButton.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/GongBaekToggleButton.kt index 7346facd..703049bf 100644 --- a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/GongBaekToggleButton.kt +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/GongBaekToggleButton.kt @@ -63,11 +63,7 @@ fun GongBaekToggleButton( .aspectRatio(42f / 24f) .height((LocalConfiguration.current.screenHeightDp * 0.03f).dp) .background( - color = if (checkedState) { - GongBaekTheme.colors.mainOrange - } else { - GongBaekTheme.colors.gray06 - }, + color = if (checkedState) GongBaekTheme.colors.mainOrange else GongBaekTheme.colors.gray06, shape = RoundedCornerShape(20.dp) ) .padding(3.5.dp) From 38c3f19d4b82c2e8dabfbd6077e61a389a586fa8 Mon Sep 17 00:00:00 2001 From: MinseoSONG Date: Sun, 19 Jan 2025 01:47:55 +0900 Subject: [PATCH 14/14] =?UTF-8?q?[chore]=20=EC=A4=84=EB=B0=94=EA=BF=88?= =?UTF-8?q?=EC=9D=84=20=EC=88=98=EC=A0=95=ED=95=A9=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/grouplist/component/GongBaekToggleButton.kt | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/GongBaekToggleButton.kt b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/GongBaekToggleButton.kt index 703049bf..471dc733 100644 --- a/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/GongBaekToggleButton.kt +++ b/app/src/main/java/com/sopt/gongbaek/presentation/ui/grouplist/component/GongBaekToggleButton.kt @@ -46,13 +46,7 @@ fun GongBaekToggleButton( verticalAlignment = Alignment.CenterVertically ) { Text( - text = stringResource( - if (checkedState) { - R.string.grouplist_gongbaek_duplicate - } else { - R.string.grouplist_gongbaek_all - } - ), + text = stringResource(if (checkedState) R.string.grouplist_gongbaek_duplicate else R.string.grouplist_gongbaek_all), color = GongBaekTheme.colors.gray06, style = GongBaekTheme.typography.caption2.r12 )