diff --git a/core/src/main/java/com/terning/core/designsystem/component/item/ColorPalette.kt b/core/src/main/java/com/terning/core/designsystem/component/item/ColorPalette.kt new file mode 100644 index 000000000..d263ad91d --- /dev/null +++ b/core/src/main/java/com/terning/core/designsystem/component/item/ColorPalette.kt @@ -0,0 +1,98 @@ +package com.terning.core.designsystem.component.item + +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.CircleShape +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.painterResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.terning.core.R +import com.terning.core.designsystem.theme.CalBlue1 +import com.terning.core.designsystem.theme.CalBlue2 +import com.terning.core.designsystem.theme.CalGreen1 +import com.terning.core.designsystem.theme.CalGreen2 +import com.terning.core.designsystem.theme.CalOrange1 +import com.terning.core.designsystem.theme.CalOrange2 +import com.terning.core.designsystem.theme.CalPink +import com.terning.core.designsystem.theme.CalPurple +import com.terning.core.designsystem.theme.CalRed +import com.terning.core.designsystem.theme.CalYellow +import com.terning.core.extension.noRippleClickable + +@Composable +fun ColorPalette( + modifier: Modifier = Modifier, + onColorSelected:(Color) -> Unit = {} +) { + val colorList = listOf( + CalRed, + CalOrange2, + CalGreen1, + CalBlue1, + CalPurple, + CalOrange1, + CalYellow, + CalGreen2, + CalBlue2, + CalPink + ) + + RadioButtonGroups( + modifier = modifier.size(251.dp, 84.dp), + options = colorList, + gridCellCount = 5, + onOptionSelected = { color -> + onColorSelected(color) + }, + buttonComposable = { + color, isSelected, onOptionSelected -> + ColorButton( + color = color, + isSelected = isSelected, + onColorSelected = onOptionSelected) + }, + verticalArrangementSpace = 6.dp, + horizontalArrangementSpace = 14.dp, + ) +} + +@Composable +internal fun ColorButton( + modifier: Modifier = Modifier, + color: Color, + isSelected: Boolean, + onColorSelected: (Color) -> Unit +) { + Box(modifier = modifier.size(39.dp)) { + Box( + modifier = Modifier + .size(39.dp) + .background(shape = CircleShape, color = color) + .noRippleClickable { + onColorSelected(color) + }, + contentAlignment = Alignment.Center + ) { + if (isSelected) { + Image( + painter = painterResource(id = R.drawable.ic_color_check), + contentDescription = "" + ) + } + } + } +} + + +@Preview(showBackground = true) +@Composable +fun ColorPalettePreview() { + ColorPalette() +} + diff --git a/core/src/main/java/com/terning/core/designsystem/component/item/RadioButtonGroups.kt b/core/src/main/java/com/terning/core/designsystem/component/item/RadioButtonGroups.kt new file mode 100644 index 000000000..3ed2d3919 --- /dev/null +++ b/core/src/main/java/com/terning/core/designsystem/component/item/RadioButtonGroups.kt @@ -0,0 +1,45 @@ +package com.terning.core.designsystem.component.item + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.lazy.grid.GridCells +import androidx.compose.foundation.lazy.grid.LazyVerticalGrid +import androidx.compose.foundation.lazy.grid.items +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.Dp + +@Composable +fun RadioButtonGroups( + options: List, + buttonComposable: @Composable (T, Boolean, (T) -> Unit) -> Unit, + gridCellCount: Int, + verticalArrangementSpace: Dp, + horizontalArrangementSpace: Dp, + modifier: Modifier = Modifier, + onOptionSelected: (T) -> Unit = {}, + +) { + var selectedOption by remember { mutableStateOf(options[0]) } + + LazyVerticalGrid( + columns = GridCells.Fixed(gridCellCount), + verticalArrangement = Arrangement.spacedBy(verticalArrangementSpace), + horizontalArrangement = Arrangement.spacedBy(horizontalArrangementSpace), + modifier = modifier + ) { + items(options) { option -> + buttonComposable( + option, + (selectedOption == option), + ) { + selectedOption = option + onOptionSelected(option) + } + } + } +} + diff --git a/core/src/main/java/com/terning/core/designsystem/theme/Color.kt b/core/src/main/java/com/terning/core/designsystem/theme/Color.kt index d0cf63b58..fe3dc2140 100644 --- a/core/src/main/java/com/terning/core/designsystem/theme/Color.kt +++ b/core/src/main/java/com/terning/core/designsystem/theme/Color.kt @@ -32,12 +32,12 @@ val BackgroundColor = Color(0x4C000000) // Calendar Color val CalRed = Color(0xFFED4E54) val CalOrange1 = Color(0xFFEE7647) -val CalOrange2 = Color(0xFF5397F3) +val CalOrange2 = Color(0xFFF3A649) val CalYellow = Color(0xFFF5E660) val CalGreen1 = Color(0xFFC4E953) val CalGreen2 = Color(0xFF84D558) val CalBlue1 = Color(0xFF45D0CC) -val CalBlue2 = Color(0xFF4119F2) +val CalBlue2 = Color(0xFF4AA9F2) val CalPurple = Color(0xFF9B64E2) val CalPink = Color(0xFFF260AC) diff --git a/core/src/main/res/drawable/ic_color_check.xml b/core/src/main/res/drawable/ic_color_check.xml new file mode 100644 index 000000000..7f91e1bdc --- /dev/null +++ b/core/src/main/res/drawable/ic_color_check.xml @@ -0,0 +1,9 @@ + + + diff --git a/feature/src/main/java/com/terning/feature/home/home/HomeRoute.kt b/feature/src/main/java/com/terning/feature/home/home/HomeRoute.kt index bc8c30273..63c015970 100644 --- a/feature/src/main/java/com/terning/feature/home/home/HomeRoute.kt +++ b/feature/src/main/java/com/terning/feature/home/home/HomeRoute.kt @@ -2,35 +2,71 @@ package com.terning.feature.home.home import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.background +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.lazy.LazyColumn +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.runtime.MutableState +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp +import com.terning.core.designsystem.component.bottomsheet.SortingBottomSheet +import com.terning.core.designsystem.component.button.SortingButton +import com.terning.core.designsystem.component.item.InternItem import com.terning.core.designsystem.component.topappbar.LogoTopAppBar import com.terning.core.designsystem.theme.Black import com.terning.core.designsystem.theme.Grey150 +import com.terning.core.designsystem.theme.Grey200 import com.terning.core.designsystem.theme.TerningTheme import com.terning.core.designsystem.theme.White +import com.terning.core.extension.customShadow import com.terning.feature.R import com.terning.feature.home.home.component.HomeFilteringScreen import com.terning.feature.home.home.component.HomeTodayIntern @Composable fun HomeRoute() { - HomeScreen() + val currentSortBy: MutableState = remember { + mutableStateOf(0) + } + + HomeScreen(currentSortBy) } @OptIn(ExperimentalFoundationApi::class) @Composable -fun HomeScreen() { +fun HomeScreen( + currentSortBy: MutableState, + modifier: Modifier = Modifier, +) { + var sheetState by remember { mutableStateOf(false) } + + if (sheetState) { + SortingBottomSheet( + onDismiss = { + sheetState = false + }, + currentSortBy = currentSortBy.value, + newSortBy = currentSortBy + ) + } + Scaffold( modifier = Modifier, topBar = { @@ -40,7 +76,9 @@ fun HomeScreen() { LazyColumn( modifier = Modifier .fillMaxSize() - .padding(top = paddingValues.calculateTopPadding()) + .padding(top = paddingValues.calculateTopPadding()), + contentPadding = PaddingValues(2.dp), + verticalArrangement = Arrangement.spacedBy(12.dp) ) { item { Column( @@ -49,9 +87,10 @@ fun HomeScreen() { ) { Text( text = stringResource( - id = R.string.home_today_title,"남지우"), + id = R.string.home_today_title, "남지우" + ), modifier = Modifier - .padding(top = 11.dp) + .padding(top = 11.dp, bottom = 19.dp) .padding(horizontal = 24.dp), style = TerningTheme.typography.title1, color = Black, @@ -69,7 +108,7 @@ fun HomeScreen() { style = TerningTheme.typography.detail2, color = Black, modifier = Modifier - .padding(top = 25.dp) + .padding(top = 9.dp) .padding(horizontal = 24.dp), ) @@ -95,19 +134,49 @@ fun HomeScreen() { modifier = Modifier .fillMaxWidth(), ) + + Row( + modifier = Modifier + .fillMaxWidth(), + horizontalArrangement = Arrangement.End, + ) { + SortingButton( + sortBy = currentSortBy.value, + onCLick = { sheetState = true }, + modifier = Modifier + .padding(vertical = 4.dp) + ) + Spacer(modifier = Modifier.padding(9.dp)) + } } } - items(10) { - TerningPostItem( - imageUrl = "https://reqres.in/img/faces/7-image.jpg", - title = "[Someone] 콘텐츠 마케터 대학생 인턴 채용", - dateDeadline = "2", - workingPeriod = "2개월", - isScraped = false, - ) + items(itemCount) { + Box( + modifier = modifier + .height(92.dp) + .padding(horizontal = 24.dp) + .customShadow( + color = Grey200, + shadowRadius = 10.dp, + shadowWidth = 2.dp + ) + .background( + color = White, + shape = RoundedCornerShape(10.dp) + ) + ) { + InternItem( + imageUrl = "https://reqres.in/img/faces/7-image.jpg", + title = "[Someone] 콘텐츠 마케터 대학생 인턴 채용", + dateDeadline = "2", + workingPeriod = "2", + isScraped = false, + ) + } } } - } } + +private const val itemCount = 10 \ No newline at end of file diff --git a/feature/src/main/java/com/terning/feature/home/home/component/HomeTodayIntern.kt b/feature/src/main/java/com/terning/feature/home/home/component/HomeTodayIntern.kt index 926ea1b83..35ad92071 100644 --- a/feature/src/main/java/com/terning/feature/home/home/component/HomeTodayIntern.kt +++ b/feature/src/main/java/com/terning/feature/home/home/component/HomeTodayIntern.kt @@ -3,11 +3,11 @@ package com.terning.feature.home.home.component import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyRow import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp +import com.terning.core.designsystem.theme.CalYellow @Composable fun HomeTodayIntern() { @@ -15,11 +15,12 @@ fun HomeTodayIntern() { horizontalArrangement = Arrangement.spacedBy(12.dp), contentPadding = PaddingValues(horizontal = 24.dp), modifier = Modifier - .fillMaxWidth() - .padding(top = 19.dp), + .fillMaxWidth(), ) { - items(5) { - HomeTodayInternItem("[유한킴벌리] 그린캠프 w.대학생 숲활동가 모집") + items(todayInternItemCount) { + HomeTodayInternItem("[유한킴벌리] 그린캠프 w.대학생 숲활동가 모집", CalYellow) } } } + +private const val todayInternItemCount = 5 \ No newline at end of file diff --git a/feature/src/main/java/com/terning/feature/home/home/component/HomeTodayInternItem.kt b/feature/src/main/java/com/terning/feature/home/home/component/HomeTodayInternItem.kt index 59073da93..f97e42b1d 100644 --- a/feature/src/main/java/com/terning/feature/home/home/component/HomeTodayInternItem.kt +++ b/feature/src/main/java/com/terning/feature/home/home/component/HomeTodayInternItem.kt @@ -1,59 +1,54 @@ package com.terning.feature.home.home.component -import androidx.compose.foundation.background -import androidx.compose.foundation.border -import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width -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.unit.dp +import com.terning.core.designsystem.component.item.ScrapBox +import com.terning.core.designsystem.theme.Black import com.terning.core.designsystem.theme.Grey150 -import com.terning.core.designsystem.theme.Grey500 import com.terning.core.designsystem.theme.TerningTheme -import com.terning.core.designsystem.theme.White @Composable fun HomeTodayInternItem( title: String, + scrapColor: Color, modifier: Modifier = Modifier ) { - Row( - modifier - .background(White) - .width(140.dp) + ScrapBox( + modifier = modifier .height(116.dp) - .border( - width = 1.dp, - color = Grey150, - RoundedCornerShape(5.dp), - ), - verticalAlignment = Alignment.Bottom - ) { - Box( - modifier - .background( - color = Grey500, - shape = RoundedCornerShape( - topStart = 5.dp, - bottomStart = 5.dp - ) + .width(140.dp), + cornerRadius = 5.dp, + scrapColor = scrapColor, + borderWidth = 1.dp, + borderColor = Grey150, + content = { + Column( + modifier = modifier + .fillMaxHeight(), + verticalArrangement = Arrangement.Bottom + ) { + Text( + text = title, + modifier = modifier + .padding( + start = 8.dp, + end = 9.dp, + bottom = 8.dp + ), + style = TerningTheme.typography.button3, + color = Black, + maxLines = 3, ) - .width(8.dp) - .fillMaxHeight() - ) - Text( - text = title, - modifier - .padding(horizontal = 16.dp) - .padding(bottom = 8.dp), - style = TerningTheme.typography.button3 - ) - } + } + } + ) } \ No newline at end of file