From 37be0652e36e5ee160ea2872e97cffaded091d64 Mon Sep 17 00:00:00 2001 From: tunaunnie Date: Wed, 20 Nov 2024 01:05:19 +0900 Subject: [PATCH 01/17] UI #1 : Color.kt and Theme.kt restore --- .../sopt/cgv/core/designsystem/theme/Color.kt | 8 +++ .../sopt/cgv/core/designsystem/theme/Theme.kt | 12 ++-- app/src/main/res/drawable/ic_seats_minus.xml | 12 ---- app/src/main/res/drawable/ic_seats_plus.xml | 18 ------ app/src/main/res/drawable/ic_time_sun.xml | 57 ------------------- 5 files changed, 14 insertions(+), 93 deletions(-) delete mode 100644 app/src/main/res/drawable/ic_seats_minus.xml delete mode 100644 app/src/main/res/drawable/ic_seats_plus.xml delete mode 100644 app/src/main/res/drawable/ic_time_sun.xml diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/theme/Color.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/theme/Color.kt index 8114aeb..2a56a9d 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/theme/Color.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/theme/Color.kt @@ -3,6 +3,14 @@ package org.sopt.cgv.core.designsystem.theme import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color +val Purple80 = Color(0xFFD0BCFF) +val PurpleGrey80 = Color(0xFFCCC2DC) +val Pink80 = Color(0xFFEFB8C8) + +val Purple40 = Color(0xFF6650a4) +val PurpleGrey40 = Color(0xFF625b71) +val Pink40 = Color(0xFF7D5260) + val Black = Color(0xFF000000) val White = Color(0xFFFFFFFF) val BackgroundOpacity1 = Color(0x99000000) diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/theme/Theme.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/theme/Theme.kt index b9aef2f..1328d03 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/theme/Theme.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/theme/Theme.kt @@ -12,15 +12,15 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.platform.LocalContext private val DarkColorScheme = darkColorScheme( - primary = Yellow, - secondary = Pink, - tertiary = Purple + primary = Purple80, + secondary = PurpleGrey80, + tertiary = Pink80 ) private val LightColorScheme = lightColorScheme( - primary = Purple, - secondary = Pink, - tertiary = Yellow + primary = Purple40, + secondary = PurpleGrey40, + tertiary = Pink40 /* Other default colors to override background = Color(0xFFFFFBFE), diff --git a/app/src/main/res/drawable/ic_seats_minus.xml b/app/src/main/res/drawable/ic_seats_minus.xml deleted file mode 100644 index 8b64710..0000000 --- a/app/src/main/res/drawable/ic_seats_minus.xml +++ /dev/null @@ -1,12 +0,0 @@ - - - diff --git a/app/src/main/res/drawable/ic_seats_plus.xml b/app/src/main/res/drawable/ic_seats_plus.xml deleted file mode 100644 index 777c87c..0000000 --- a/app/src/main/res/drawable/ic_seats_plus.xml +++ /dev/null @@ -1,18 +0,0 @@ - - - - diff --git a/app/src/main/res/drawable/ic_time_sun.xml b/app/src/main/res/drawable/ic_time_sun.xml deleted file mode 100644 index e469f01..0000000 --- a/app/src/main/res/drawable/ic_time_sun.xml +++ /dev/null @@ -1,57 +0,0 @@ - - - - - - - - - - - From af635b136e43117f8ffd31aa4cfa2eb9cea05117 Mon Sep 17 00:00:00 2001 From: tunaunnie Date: Wed, 20 Nov 2024 01:27:50 +0900 Subject: [PATCH 02/17] UI #7 : develop common component --- .../component/button/ModalButton.kt | 142 +++++++++++++++++ .../designsystem/component/button/Stepper.kt | 122 +++++++++++++++ .../component/card/CompTimeCard.kt | 143 ++++++++++++++++++ .../component/chip/SeatChoiceModalChip.kt | 44 ++++++ .../org/sopt/cgv/feature/main/MainActivity.kt | 2 +- app/src/main/res/drawable/ic_seats_minus.xml | 12 ++ app/src/main/res/drawable/ic_seats_plus.xml | 18 +++ app/src/main/res/drawable/ic_time_sun.xml | 57 +++++++ 8 files changed, 539 insertions(+), 1 deletion(-) create mode 100644 app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt create mode 100644 app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt create mode 100644 app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt create mode 100644 app/src/main/java/org/sopt/cgv/core/designsystem/component/chip/SeatChoiceModalChip.kt create mode 100644 app/src/main/res/drawable/ic_seats_minus.xml create mode 100644 app/src/main/res/drawable/ic_seats_plus.xml create mode 100644 app/src/main/res/drawable/ic_time_sun.xml diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt new file mode 100644 index 0000000..e7b677a --- /dev/null +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt @@ -0,0 +1,142 @@ +package org.sopt.cgv.core.designsystem.component.button + +import android.R +import android.widget.Button +import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.background +import androidx.compose.foundation.border +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxSize +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.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.ComposeCompilerApi +import androidx.compose.runtime.getValue +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.draw.clip +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import org.sopt.cgv.core.designsystem.theme.Gray200 +import org.sopt.cgv.core.designsystem.theme.PrimaryRed400 +import org.sopt.cgv.core.designsystem.theme.White + +data class ButtonStyle( + val backgroundColor: Color, + val border: BorderStroke?, + val textColor: Color, +) + +@Composable +fun getButtonStyle(buttonType: String): ButtonStyle { + return remember(buttonType) { + when (buttonType) { + "Choice" -> ButtonStyle( + backgroundColor = PrimaryRed400, + border = null, + textColor = White + ) + "Back" -> ButtonStyle( + backgroundColor = White, + border = BorderStroke(1.dp, PrimaryRed400), + textColor = PrimaryRed400 + ) + else -> ButtonStyle( + backgroundColor = PrimaryRed400, + border = null, + textColor = White + ) + } + } + +} + +@Composable +fun ModalButton( + buttonType: String, //선택 버튼인 경우 Choice, 뒤로가기인 경우 Back + initialActivation: Boolean, // 처음부터 활성화 상태면 true, 활성화 조건 필요하면 false + content: String, + length: String, //long, half로 사용 +){ + + var isActivated by remember { mutableStateOf(initialActivation) } + val buttonStyle = getButtonStyle(buttonType) + + val (buttonWidth, buttonHeight) = remember(length) { + when (length) { + "long" -> Pair(324.dp, 54.dp) + "half" -> Pair(156.dp, 54.dp) + else -> Pair(324.dp, 54.dp) + } + } + + Box( + modifier = Modifier + .size(width = buttonWidth, height = buttonHeight) + .clip(RoundedCornerShape(12.dp)) + .background(buttonStyle.backgroundColor) + .then( + if (buttonStyle.border != null) + Modifier.border(buttonStyle.border, RoundedCornerShape(8.dp)) + else + Modifier + ) + ) { + Row( + modifier = Modifier.fillMaxSize(), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceEvenly + ){ + Text( + text = content, + color = buttonStyle.textColor + ) + + } + } +} + + + +@Preview +@Composable +fun ButtonPreview(){ + Column( + modifier = Modifier + .fillMaxWidth() + .padding(16.dp), + verticalArrangement = Arrangement.spacedBy(16.dp), + horizontalAlignment = Alignment.CenterHorizontally + ) { + ModalButton( + buttonType = "Choice", + initialActivation = true, + content = "좌석선택", + length = "long" + ) + ModalButton( + buttonType = "Back", + initialActivation = false, + content = "뒤로가기", + length = "half" + ) + ModalButton( + buttonType = "Choice", + initialActivation = true, + content = "확인", + length = "half" + ) + } +} \ No newline at end of file diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt new file mode 100644 index 0000000..8b397e9 --- /dev/null +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt @@ -0,0 +1,122 @@ +package org.sopt.cgv.core.designsystem.component.button + +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Row +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.shape.CircleShape +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Icon +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.getValue +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +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 androidx.compose.ui.unit.sp +import org.sopt.cgv.R +import org.sopt.cgv.core.designsystem.theme.Gray100 +import org.sopt.cgv.core.designsystem.theme.Gray700 +import org.sopt.cgv.core.designsystem.theme.Gray800 + +@Composable +fun Stepper( + modifier: Modifier = Modifier, + initialValue: Int = 0, + onValueChange: (Int) -> Unit +) { + var currentValue by remember { mutableStateOf(initialValue) } + + Row( + modifier = modifier + .size(height = 36.dp, width = 100.dp) + .clip(RoundedCornerShape(8.dp)) + .background(Gray100), + ) { + Row( + modifier = modifier + .fillMaxSize() + .padding(horizontal = 8.dp, vertical = 4.dp), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceAround, + ){ + // - 버튼 + Box( + modifier = Modifier + .clickable { + if (currentValue > 0) { + currentValue-- + onValueChange(currentValue) + } + } + .size(20.dp), + contentAlignment = Alignment.Center + ) { + Icon( + painter = painterResource(id = R.drawable.ic_seats_minus), + contentDescription = "인원 감소", + tint = Gray800, + modifier = Modifier.size(20.dp) + ) + } + + // 현재 값 + Box( + modifier = Modifier + .padding(horizontal = 5.dp) + .size(width = 34.dp, height = 28.dp) + .background(Color.White, RoundedCornerShape(8.dp)), + contentAlignment = Alignment.Center + ) { + Text( + text = currentValue.toString(), + fontSize = 17.sp, + color = Gray700 + ) + } + + // + 버튼 + Box( + modifier = Modifier + .clickable { + currentValue++ + onValueChange(currentValue) + } + .size(20.dp), + contentAlignment = Alignment.Center + ) { + Icon( + painter = painterResource(id = R.drawable.ic_seats_plus), + contentDescription = "인원 증가", + tint = Gray800, + modifier = Modifier.size(20.dp) // 아이콘 크기 + ) + } + } + + } +} + +@Preview +@Composable +fun StepperPreview() { + Stepper( + initialValue = 0, + onValueChange = { newValue -> + println("Stepper value changed: $newValue") + } + ) +} \ No newline at end of file diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt new file mode 100644 index 0000000..1f9ceed --- /dev/null +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt @@ -0,0 +1,143 @@ +package org.sopt.cgv.core.designsystem.component.card + +import androidx.compose.foundation.background +import androidx.compose.foundation.border +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.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.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.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import org.sopt.cgv.core.designsystem.theme.* +import org.sopt.cgv.R +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.getValue +import androidx.compose.runtime.setValue + + +@Composable +fun CompTimeCard( + startTime: String, + endTime: String, + currentSeats: Int, + totalSeats: Int, + isMorning: Boolean +){ + + var isClicked by remember { mutableStateOf(false) } + var isClickedCard by remember { mutableStateOf(true) } + + val backgroundColor = if (isClicked) Gray700 else White + val backgroundColor2 = if (isClicked) Gray700 else Gray200 + val leftSeatsColor = if (isClickedCard) PrimaryRed400 else Green + + Box( + modifier = Modifier + .size(width = 90.dp, height = 64.dp) + .clip(RoundedCornerShape(8.dp)) + .background(backgroundColor) + .border(width = 2.dp, color = Gray200, shape = RoundedCornerShape(8.dp)) + .clickable { + isClicked = !isClicked + } + ){ + Column( + modifier = Modifier.fillMaxSize(), + verticalArrangement = Arrangement.SpaceBetween + ){ + //시간 부분 + Row( + modifier = Modifier + .size(width = 90.dp, height = 41.dp) + .padding(horizontal = 8.dp, vertical = 10.dp), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceAround, + ){ + Text( + text = startTime, + color = Black, + fontSize = 18.sp + ) + Text( + modifier = Modifier.padding(top = 4.dp), + text = " ~$endTime", + color = Gray600, + fontSize = 8.sp + ) + } + //잔여 좌석 부분 + Row( + modifier = Modifier + .fillMaxWidth() + .height(23.dp) + .background(backgroundColor2), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceAround, + ){ + Row( + modifier = Modifier + .padding(top = 3.dp, bottom = 3.dp, start = 9.dp, end = 8.dp), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceAround, + ){ + if(isMorning){ + Icon( + painter = painterResource(id = R.drawable.ic_time_sun), + contentDescription = "morning movie", + tint = Gray700, + modifier = Modifier.size(16.dp) + ) + } + Text( + text = "$currentSeats", + color = leftSeatsColor, + fontSize = 12.sp, + ) + Text( + text = "/", + color = Black, + fontSize = 12.sp, + ) + Text( + text = "${totalSeats}석", + color = Black, + fontSize = 10.sp, + ) + } + } + + } + } +} + +@Preview(showBackground = true) +@Composable +fun CompTimeCardPreview() { + CompTimeCard( + startTime = "07:50", + endTime = "09:41", + currentSeats = 183, + totalSeats = 185, + isMorning = true + ) +} + + + + diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/chip/SeatChoiceModalChip.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/chip/SeatChoiceModalChip.kt new file mode 100644 index 0000000..7b51d51 --- /dev/null +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/chip/SeatChoiceModalChip.kt @@ -0,0 +1,44 @@ +package org.sopt.cgv.core.designsystem.component.chip + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +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.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import org.sopt.cgv.core.designsystem.theme.Gray100 +import org.sopt.cgv.core.designsystem.theme.Gray700 + +@Composable +fun SeatChoiceModalChip( + type: String, //Date, Location, Time 으로 구분 + content: String +){ + + Box( + modifier = Modifier + .clip(RoundedCornerShape(8.dp)) + .background(Gray100) + .padding(vertical = 6.dp, horizontal = 8.dp), + ){ + Text( + text = content, + color = Gray700, + fontSize = 14.sp, + ) + } +} + +@Preview +@Composable +fun SeatChoiceModalChipPreview(){ + SeatChoiceModalChip( + type = "Date", + content = "2024.11.9 (토)" + ) +} \ No newline at end of file diff --git a/app/src/main/java/org/sopt/cgv/feature/main/MainActivity.kt b/app/src/main/java/org/sopt/cgv/feature/main/MainActivity.kt index 46c5f29..a35ceef 100644 --- a/app/src/main/java/org/sopt/cgv/feature/main/MainActivity.kt +++ b/app/src/main/java/org/sopt/cgv/feature/main/MainActivity.kt @@ -11,7 +11,7 @@ import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview -import org.sopt.cgv.ui.theme.CGVTheme +import org.sopt.cgv.core.designsystem.theme.CGVTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { diff --git a/app/src/main/res/drawable/ic_seats_minus.xml b/app/src/main/res/drawable/ic_seats_minus.xml new file mode 100644 index 0000000..8b64710 --- /dev/null +++ b/app/src/main/res/drawable/ic_seats_minus.xml @@ -0,0 +1,12 @@ + + + diff --git a/app/src/main/res/drawable/ic_seats_plus.xml b/app/src/main/res/drawable/ic_seats_plus.xml new file mode 100644 index 0000000..777c87c --- /dev/null +++ b/app/src/main/res/drawable/ic_seats_plus.xml @@ -0,0 +1,18 @@ + + + + diff --git a/app/src/main/res/drawable/ic_time_sun.xml b/app/src/main/res/drawable/ic_time_sun.xml new file mode 100644 index 0000000..e469f01 --- /dev/null +++ b/app/src/main/res/drawable/ic_time_sun.xml @@ -0,0 +1,57 @@ + + + + + + + + + + + From 53de586f7919272b79b611dfb6331aaf01d90e73 Mon Sep 17 00:00:00 2001 From: tunaunnie Date: Wed, 20 Nov 2024 22:54:00 +0900 Subject: [PATCH 03/17] UI #7 : remove unnecessary imports --- .../component/button/ModalButton.kt | 6 -- .../designsystem/component/button/Stepper.kt | 3 - app/src/main/res/drawable/ic_seats_minus.xml | 12 ++++ app/src/main/res/drawable/ic_seats_plus.xml | 18 ++++++ app/src/main/res/drawable/ic_time_sun.xml | 57 +++++++++++++++++++ 5 files changed, 87 insertions(+), 9 deletions(-) create mode 100644 app/src/main/res/drawable/ic_seats_minus.xml create mode 100644 app/src/main/res/drawable/ic_seats_plus.xml create mode 100644 app/src/main/res/drawable/ic_time_sun.xml diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt index e7b677a..28ea5c6 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt @@ -1,11 +1,8 @@ package org.sopt.cgv.core.designsystem.component.button -import android.R -import android.widget.Button import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.background import androidx.compose.foundation.border -import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column @@ -17,7 +14,6 @@ import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Text import androidx.compose.runtime.Composable -import androidx.compose.runtime.ComposeCompilerApi import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember @@ -27,9 +23,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp -import org.sopt.cgv.core.designsystem.theme.Gray200 import org.sopt.cgv.core.designsystem.theme.PrimaryRed400 import org.sopt.cgv.core.designsystem.theme.White diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt index 8b397e9..7582c5d 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt @@ -6,11 +6,8 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Row 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.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Icon import androidx.compose.material3.Text diff --git a/app/src/main/res/drawable/ic_seats_minus.xml b/app/src/main/res/drawable/ic_seats_minus.xml new file mode 100644 index 0000000..8b64710 --- /dev/null +++ b/app/src/main/res/drawable/ic_seats_minus.xml @@ -0,0 +1,12 @@ + + + diff --git a/app/src/main/res/drawable/ic_seats_plus.xml b/app/src/main/res/drawable/ic_seats_plus.xml new file mode 100644 index 0000000..777c87c --- /dev/null +++ b/app/src/main/res/drawable/ic_seats_plus.xml @@ -0,0 +1,18 @@ + + + + diff --git a/app/src/main/res/drawable/ic_time_sun.xml b/app/src/main/res/drawable/ic_time_sun.xml new file mode 100644 index 0000000..e469f01 --- /dev/null +++ b/app/src/main/res/drawable/ic_time_sun.xml @@ -0,0 +1,57 @@ + + + + + + + + + + + From fa672edaee74d598db03ff376c92d15874f91a5f Mon Sep 17 00:00:00 2001 From: tunaunnie Date: Wed, 20 Nov 2024 23:30:18 +0900 Subject: [PATCH 04/17] UI #7 : noRippleClick() apply --- .../cgv/core/common/ModifierExtensions.kt | 20 +++++++++++++++++++ .../component/button/ModalButton.kt | 4 ++++ .../designsystem/component/button/Stepper.kt | 5 +++-- .../component/card/CompTimeCard.kt | 3 ++- gradle/libs.versions.toml | 4 ---- 5 files changed, 29 insertions(+), 7 deletions(-) create mode 100644 app/src/main/java/org/sopt/cgv/core/common/ModifierExtensions.kt diff --git a/app/src/main/java/org/sopt/cgv/core/common/ModifierExtensions.kt b/app/src/main/java/org/sopt/cgv/core/common/ModifierExtensions.kt new file mode 100644 index 0000000..a03676d --- /dev/null +++ b/app/src/main/java/org/sopt/cgv/core/common/ModifierExtensions.kt @@ -0,0 +1,20 @@ +package org.sopt.cgv.core.common + +import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier + +@Composable +fun Modifier.norippleclick( + enabled: Boolean = true, + onClick: () -> Unit +): Modifier { + return this.clickable( + interactionSource = remember { MutableInteractionSource() }, + indication = null, + enabled = enabled, + onClick = onClick + ) +} diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt index 28ea5c6..aaff1d4 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt @@ -3,6 +3,7 @@ package org.sopt.cgv.core.designsystem.component.button import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.background import androidx.compose.foundation.border +import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column @@ -87,6 +88,9 @@ fun ModalButton( else Modifier ) + .clickable { + /* Todo - behavior after cliking the button */ + } ) { Row( modifier = Modifier.fillMaxSize(), diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt index 7582c5d..5ff5a36 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt @@ -25,6 +25,7 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import org.sopt.cgv.R +import org.sopt.cgv.core.common.norippleclick import org.sopt.cgv.core.designsystem.theme.Gray100 import org.sopt.cgv.core.designsystem.theme.Gray700 import org.sopt.cgv.core.designsystem.theme.Gray800 @@ -53,7 +54,7 @@ fun Stepper( // - 버튼 Box( modifier = Modifier - .clickable { + .norippleclick { if (currentValue > 0) { currentValue-- onValueChange(currentValue) @@ -88,7 +89,7 @@ fun Stepper( // + 버튼 Box( modifier = Modifier - .clickable { + .norippleclick { currentValue++ onValueChange(currentValue) } diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt index 1f9ceed..480eb07 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt @@ -29,6 +29,7 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.getValue import androidx.compose.runtime.setValue +import org.sopt.cgv.core.common.norippleclick @Composable @@ -53,7 +54,7 @@ fun CompTimeCard( .clip(RoundedCornerShape(8.dp)) .background(backgroundColor) .border(width = 2.dp, color = Gray200, shape = RoundedCornerShape(8.dp)) - .clickable { + .norippleclick() { isClicked = !isClicked } ){ diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml index 9acaf18..f04c70d 100644 --- a/gradle/libs.versions.toml +++ b/gradle/libs.versions.toml @@ -1,9 +1,5 @@ [versions] -<<<<<<< HEAD -agp = "8.7.0" -======= agp = "8.7.2" ->>>>>>> 40b20887d5ea076d9d327235ff0f87d0ecb95c39 kotlin = "1.9.0" coreKtx = "1.15.0" junit = "4.13.2" From 35b74d257248880dffbf5c33623d187c580e33f0 Mon Sep 17 00:00:00 2001 From: tunaunnie Date: Wed, 20 Nov 2024 23:46:34 +0900 Subject: [PATCH 05/17] UI #7 : modifier add --- .../cgv/core/designsystem/component/button/ModalButton.kt | 8 ++++++-- .../cgv/core/designsystem/component/button/Stepper.kt | 1 + .../cgv/core/designsystem/component/card/CompTimeCard.kt | 2 ++ .../designsystem/component/chip/SeatChoiceModalChip.kt | 2 ++ gradle/libs.versions.toml | 2 +- 5 files changed, 12 insertions(+), 3 deletions(-) diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt index aaff1d4..a4b9120 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt @@ -60,8 +60,9 @@ fun getButtonStyle(buttonType: String): ButtonStyle { @Composable fun ModalButton( - buttonType: String, //선택 버튼인 경우 Choice, 뒤로가기인 경우 Back - initialActivation: Boolean, // 처음부터 활성화 상태면 true, 활성화 조건 필요하면 false + modifier: Modifier = Modifier, + buttonType: String, + initialActivation: Boolean, content: String, length: String, //long, half로 사용 ){ @@ -119,18 +120,21 @@ fun ButtonPreview(){ horizontalAlignment = Alignment.CenterHorizontally ) { ModalButton( + modifier = Modifier, buttonType = "Choice", initialActivation = true, content = "좌석선택", length = "long" ) ModalButton( + modifier = Modifier, buttonType = "Back", initialActivation = false, content = "뒤로가기", length = "half" ) ModalButton( + modifier = Modifier, buttonType = "Choice", initialActivation = true, content = "확인", diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt index 5ff5a36..687cc3c 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt @@ -112,6 +112,7 @@ fun Stepper( @Composable fun StepperPreview() { Stepper( + modifier = Modifier, initialValue = 0, onValueChange = { newValue -> println("Stepper value changed: $newValue") diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt index 480eb07..caa6e33 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt @@ -34,6 +34,7 @@ import org.sopt.cgv.core.common.norippleclick @Composable fun CompTimeCard( + modifier: Modifier = Modifier, startTime: String, endTime: String, currentSeats: Int, @@ -131,6 +132,7 @@ fun CompTimeCard( @Composable fun CompTimeCardPreview() { CompTimeCard( + modifier = Modifier, startTime = "07:50", endTime = "09:41", currentSeats = 183, diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/chip/SeatChoiceModalChip.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/chip/SeatChoiceModalChip.kt index 7b51d51..f350e9f 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/chip/SeatChoiceModalChip.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/chip/SeatChoiceModalChip.kt @@ -16,6 +16,7 @@ import org.sopt.cgv.core.designsystem.theme.Gray700 @Composable fun SeatChoiceModalChip( + modifier: Modifier = Modifier, type: String, //Date, Location, Time 으로 구분 content: String ){ @@ -38,6 +39,7 @@ fun SeatChoiceModalChip( @Composable fun SeatChoiceModalChipPreview(){ SeatChoiceModalChip( + modifier = Modifier, type = "Date", content = "2024.11.9 (토)" ) diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml index f04c70d..585fc76 100644 --- a/gradle/libs.versions.toml +++ b/gradle/libs.versions.toml @@ -1,5 +1,5 @@ [versions] -agp = "8.7.2" +agp = "8.7.0" kotlin = "1.9.0" coreKtx = "1.15.0" junit = "4.13.2" From fb6b64039eb8879e1a13bf8c8fe1f29268000104 Mon Sep 17 00:00:00 2001 From: tunaunnie Date: Thu, 21 Nov 2024 17:33:29 +0900 Subject: [PATCH 06/17] UI #7 : apply typography --- .../designsystem/component/button/ModalButton.kt | 4 +++- .../core/designsystem/component/button/Stepper.kt | 3 ++- .../designsystem/component/card/CompTimeCard.kt | 14 +++++++------- .../component/chip/SeatChoiceModalChip.kt | 3 ++- 4 files changed, 14 insertions(+), 10 deletions(-) diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt index a4b9120..ae8c691 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt @@ -26,6 +26,7 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import org.sopt.cgv.core.designsystem.theme.PrimaryRed400 +import org.sopt.cgv.core.designsystem.theme.Typography import org.sopt.cgv.core.designsystem.theme.White data class ButtonStyle( @@ -100,7 +101,8 @@ fun ModalButton( ){ Text( text = content, - color = buttonStyle.textColor + color = buttonStyle.textColor, + style = Typography.head6_b_17 ) } diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt index 687cc3c..75116e8 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt @@ -29,6 +29,7 @@ import org.sopt.cgv.core.common.norippleclick import org.sopt.cgv.core.designsystem.theme.Gray100 import org.sopt.cgv.core.designsystem.theme.Gray700 import org.sopt.cgv.core.designsystem.theme.Gray800 +import org.sopt.cgv.core.designsystem.theme.Typography @Composable fun Stepper( @@ -81,7 +82,7 @@ fun Stepper( ) { Text( text = currentValue.toString(), - fontSize = 17.sp, + style = Typography.head6_b_17, color = Gray700 ) } diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt index caa6e33..ecce0fc 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt @@ -69,18 +69,18 @@ fun CompTimeCard( .size(width = 90.dp, height = 41.dp) .padding(horizontal = 8.dp, vertical = 10.dp), verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceAround, + horizontalArrangement = Arrangement.Center, ){ Text( text = startTime, color = Black, - fontSize = 18.sp + style = Typography.head1_b_16 ) Text( modifier = Modifier.padding(top = 4.dp), - text = " ~$endTime", + text = "~$endTime", color = Gray600, - fontSize = 8.sp + style = Typography.body0_r_8 ) } //잔여 좌석 부분 @@ -109,17 +109,17 @@ fun CompTimeCard( Text( text = "$currentSeats", color = leftSeatsColor, - fontSize = 12.sp, + style = Typography.body2_r_12 ) Text( text = "/", color = Black, - fontSize = 12.sp, + style = Typography.body2_r_12 ) Text( text = "${totalSeats}석", color = Black, - fontSize = 10.sp, + style = Typography.body2_r_12 ) } } diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/chip/SeatChoiceModalChip.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/chip/SeatChoiceModalChip.kt index f350e9f..6d9670b 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/chip/SeatChoiceModalChip.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/chip/SeatChoiceModalChip.kt @@ -13,6 +13,7 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import org.sopt.cgv.core.designsystem.theme.Gray100 import org.sopt.cgv.core.designsystem.theme.Gray700 +import org.sopt.cgv.core.designsystem.theme.Typography @Composable fun SeatChoiceModalChip( @@ -30,7 +31,7 @@ fun SeatChoiceModalChip( Text( text = content, color = Gray700, - fontSize = 14.sp, + style = Typography.head3_b_14 ) } } From 042476f22530b4bccf0c5b94737bd8f6e66a77d4 Mon Sep 17 00:00:00 2001 From: tunaunnie Date: Thu, 21 Nov 2024 23:59:12 +0900 Subject: [PATCH 07/17] =?UTF-8?q?[feature]=20#7=20SeatScreenModal1=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/bottomsheet/SeatScreenModal1.kt | 132 ++++++++++++++++++ .../component/button/ModalButton.kt | 2 +- 2 files changed, 133 insertions(+), 1 deletion(-) create mode 100644 app/src/main/java/org/sopt/cgv/core/designsystem/component/bottomsheet/SeatScreenModal1.kt diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/bottomsheet/SeatScreenModal1.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/bottomsheet/SeatScreenModal1.kt new file mode 100644 index 0000000..e67491f --- /dev/null +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/bottomsheet/SeatScreenModal1.kt @@ -0,0 +1,132 @@ +package org.sopt.cgv.core.designsystem.component.bottomsheet + +import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.layout.* +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.* +import androidx.compose.runtime.* +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 kotlinx.coroutines.launch +import org.sopt.cgv.core.designsystem.component.button.ModalButton +import org.sopt.cgv.core.designsystem.component.button.Stepper +import org.sopt.cgv.core.designsystem.component.chip.SeatChoiceModalChip +import org.sopt.cgv.core.designsystem.theme.Black +import org.sopt.cgv.core.designsystem.theme.Typography + +@OptIn(ExperimentalMaterial3Api::class) +@Composable +fun SeatScreenModal1( + onBackClick: () -> Unit, + onSeatSelectionClick: () -> Unit +) { + ModalBottomSheet( + onDismissRequest = { }, + sheetState = rememberModalBottomSheetState( + skipPartiallyExpanded = true + ), + shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp), + containerColor = Color.White + ) { + Column( + modifier = Modifier + .padding(16.dp) + .fillMaxWidth() + ) { + Text( + text = "글래디에이터 2", + style = Typography.head6_b_17, + modifier = Modifier.align(Alignment.CenterHorizontally) + ) + + Spacer(modifier = Modifier.height(16.dp)) + + Row( + horizontalArrangement = Arrangement.SpaceEvenly, + modifier = Modifier.fillMaxWidth() + ) { + SeatChoiceModalChip(type = "Date", content = "2024.11.05 (월)") + SeatChoiceModalChip(type = "Location", content = "구리") + SeatChoiceModalChip(type = "Time", content = "10:40 ~ 12:39") + } + + Spacer(modifier = Modifier.height(24.dp)) + + Text( + text = "인원선택", + style = Typography.head3_b_14, + color = Black + ) + + Spacer(modifier = Modifier.height(8.dp)) + + Column( + modifier = Modifier.fillMaxWidth(), + verticalArrangement = Arrangement.spacedBy(12.dp) + ) { + StepperRow("일반") + StepperRow("청소년") + StepperRow("경로") + StepperRow("우대") + } + + Spacer(modifier = Modifier.height(32.dp)) + + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.spacedBy(16.dp) + ) { + ModalButton( + modifier = Modifier, + buttonType = "Back", + initialActivation = false, + content = "뒤로가기", + length = "half" + ) + ModalButton( + modifier = Modifier, + buttonType = "Choice", + initialActivation = false, + content = "좌석선택", + length = "half" + ) + } + } + } +} + + +@Composable +fun StepperRow(label: String) { + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.SpaceBetween, + verticalAlignment = Alignment.CenterVertically + ) { + Text( + text = label, + style = Typography.body4_m_15, + color = Color.Black + ) + Stepper( + modifier = Modifier, + initialValue = 0, + onValueChange = { newValue -> + println("$label 인원: $newValue") + } + ) + } +} + + +@Preview(showBackground = true) +@Composable +fun ReservationBottomSheetPreview() { + SeatScreenModal1( + onBackClick = { }, + onSeatSelectionClick = { } + ) +} diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt index ae8c691..2c173d2 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt @@ -86,7 +86,7 @@ fun ModalButton( .background(buttonStyle.backgroundColor) .then( if (buttonStyle.border != null) - Modifier.border(buttonStyle.border, RoundedCornerShape(8.dp)) + Modifier.border(buttonStyle.border, RoundedCornerShape(12.dp)) else Modifier ) From 451e48fdd3712d807837cd2b22aba5fc5a810caa Mon Sep 17 00:00:00 2001 From: tunaunnie Date: Fri, 22 Nov 2024 02:03:39 +0900 Subject: [PATCH 08/17] =?UTF-8?q?move=20#7=20:=20seats=20=ED=8F=B4?= =?UTF-8?q?=EB=8D=94=EB=A1=9C=20=EA=B5=AC=ED=98=84=20=EB=82=B4=EC=9A=A9=20?= =?UTF-8?q?=EC=98=AE=EA=B9=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/button/ModalButton.kt | 5 +- .../chip/{SeatChoiceModalChip.kt => Chip.kt} | 7 +- .../cgv/feature/seats/SeatSelectionChipRow.kt | 43 +++++++++++++ .../seats/SeatSelectionModal1.kt} | 64 +++++++------------ .../feature/seats/SeatSelectionStepperRow.kt | 42 ++++++++++++ .../button => feature/seats}/Stepper.kt | 4 +- gradle/libs.versions.toml | 1 - 7 files changed, 114 insertions(+), 52 deletions(-) rename app/src/main/java/org/sopt/cgv/core/designsystem/component/chip/{SeatChoiceModalChip.kt => Chip.kt} (87%) create mode 100644 app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionChipRow.kt rename app/src/main/java/org/sopt/cgv/{core/designsystem/component/bottomsheet/SeatScreenModal1.kt => feature/seats/SeatSelectionModal1.kt} (65%) create mode 100644 app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionStepperRow.kt rename app/src/main/java/org/sopt/cgv/{core/designsystem/component/button => feature/seats}/Stepper.kt (96%) diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt index 2c173d2..05d0d7d 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt @@ -25,6 +25,7 @@ import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import org.sopt.cgv.core.common.norippleclick import org.sopt.cgv.core.designsystem.theme.PrimaryRed400 import org.sopt.cgv.core.designsystem.theme.Typography import org.sopt.cgv.core.designsystem.theme.White @@ -65,7 +66,7 @@ fun ModalButton( buttonType: String, initialActivation: Boolean, content: String, - length: String, //long, half로 사용 + length: String, ){ var isActivated by remember { mutableStateOf(initialActivation) } @@ -90,7 +91,7 @@ fun ModalButton( else Modifier ) - .clickable { + .norippleclick() { /* Todo - behavior after cliking the button */ } ) { diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/chip/SeatChoiceModalChip.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/chip/Chip.kt similarity index 87% rename from app/src/main/java/org/sopt/cgv/core/designsystem/component/chip/SeatChoiceModalChip.kt rename to app/src/main/java/org/sopt/cgv/core/designsystem/component/chip/Chip.kt index 6d9670b..2e5b75d 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/chip/SeatChoiceModalChip.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/chip/Chip.kt @@ -10,15 +10,13 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp import org.sopt.cgv.core.designsystem.theme.Gray100 import org.sopt.cgv.core.designsystem.theme.Gray700 import org.sopt.cgv.core.designsystem.theme.Typography @Composable -fun SeatChoiceModalChip( +fun Chip( modifier: Modifier = Modifier, - type: String, //Date, Location, Time 으로 구분 content: String ){ @@ -39,9 +37,8 @@ fun SeatChoiceModalChip( @Preview @Composable fun SeatChoiceModalChipPreview(){ - SeatChoiceModalChip( + Chip( modifier = Modifier, - type = "Date", content = "2024.11.9 (토)" ) } \ No newline at end of file diff --git a/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionChipRow.kt b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionChipRow.kt new file mode 100644 index 0000000..bdf6bf9 --- /dev/null +++ b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionChipRow.kt @@ -0,0 +1,43 @@ +package org.sopt.cgv.feature.seats + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.width +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import org.sopt.cgv.core.designsystem.component.chip.Chip +import androidx.compose.foundation.lazy.items +import androidx.compose.ui.Alignment + +@Composable +fun SeatSelectionChipRow( + modifier: Modifier = Modifier, + contents: List, +){ + Row( + horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterHorizontally), + modifier = modifier.fillMaxWidth() + ) { + contents.forEach { + chipContent -> + Chip(content = chipContent) + } + } + +} + + +@Preview(showBackground = true) +@Composable +fun SeatSelectionChipRowPreview(){ + val ChipContents = listOf( + "2024.11.05 (월)", + "구리", + "10:40 ~ 12:39" + ) + SeatSelectionChipRow(contents = ChipContents) +} \ No newline at end of file diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/bottomsheet/SeatScreenModal1.kt b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionModal1.kt similarity index 65% rename from app/src/main/java/org/sopt/cgv/core/designsystem/component/bottomsheet/SeatScreenModal1.kt rename to app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionModal1.kt index e67491f..80b79f4 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/bottomsheet/SeatScreenModal1.kt +++ b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionModal1.kt @@ -1,7 +1,7 @@ -package org.sopt.cgv.core.designsystem.component.bottomsheet +package org.sopt.cgv.feature.seats -import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.layout.* +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.* import androidx.compose.runtime.* @@ -10,16 +10,16 @@ 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 kotlinx.coroutines.launch import org.sopt.cgv.core.designsystem.component.button.ModalButton -import org.sopt.cgv.core.designsystem.component.button.Stepper -import org.sopt.cgv.core.designsystem.component.chip.SeatChoiceModalChip import org.sopt.cgv.core.designsystem.theme.Black import org.sopt.cgv.core.designsystem.theme.Typography +import org.sopt.cgv.core.designsystem.component.chip.Chip @OptIn(ExperimentalMaterial3Api::class) @Composable -fun SeatScreenModal1( +fun SeatSelectionModal1( + seatSelectionMovieTitle: String, + chipContents: List, onBackClick: () -> Unit, onSeatSelectionClick: () -> Unit ) { @@ -37,21 +37,14 @@ fun SeatScreenModal1( .fillMaxWidth() ) { Text( - text = "글래디에이터 2", + text = seatSelectionMovieTitle, style = Typography.head6_b_17, modifier = Modifier.align(Alignment.CenterHorizontally) ) Spacer(modifier = Modifier.height(16.dp)) - Row( - horizontalArrangement = Arrangement.SpaceEvenly, - modifier = Modifier.fillMaxWidth() - ) { - SeatChoiceModalChip(type = "Date", content = "2024.11.05 (월)") - SeatChoiceModalChip(type = "Location", content = "구리") - SeatChoiceModalChip(type = "Time", content = "10:40 ~ 12:39") - } + SeatSelectionChipRow(contents = chipContents) Spacer(modifier = Modifier.height(24.dp)) @@ -77,7 +70,7 @@ fun SeatScreenModal1( Row( modifier = Modifier.fillMaxWidth(), - horizontalArrangement = Arrangement.spacedBy(16.dp) + horizontalArrangement = Arrangement.Center ) { ModalButton( modifier = Modifier, @@ -86,6 +79,9 @@ fun SeatScreenModal1( content = "뒤로가기", length = "half" ) + + Spacer(modifier = Modifier.width(16.dp)) + ModalButton( modifier = Modifier, buttonType = "Choice", @@ -99,33 +95,19 @@ fun SeatScreenModal1( } -@Composable -fun StepperRow(label: String) { - Row( - modifier = Modifier.fillMaxWidth(), - horizontalArrangement = Arrangement.SpaceBetween, - verticalAlignment = Alignment.CenterVertically - ) { - Text( - text = label, - style = Typography.body4_m_15, - color = Color.Black - ) - Stepper( - modifier = Modifier, - initialValue = 0, - onValueChange = { newValue -> - println("$label 인원: $newValue") - } - ) - } -} - - @Preview(showBackground = true) @Composable -fun ReservationBottomSheetPreview() { - SeatScreenModal1( +fun SeatSelectionModal1Preview() { + + val ChipContents = listOf( + "2024.11.05 (월)", + "구리", + "10:40 ~ 12:39" + ) + + SeatSelectionModal1( + seatSelectionMovieTitle = "글래디에이터 2", + chipContents = ChipContents, onBackClick = { }, onSeatSelectionClick = { } ) diff --git a/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionStepperRow.kt b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionStepperRow.kt new file mode 100644 index 0000000..fadeb74 --- /dev/null +++ b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionStepperRow.kt @@ -0,0 +1,42 @@ +package org.sopt.cgv.feature.seats + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth +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.tooling.preview.Preview +import org.sopt.cgv.core.designsystem.theme.Typography + +@Composable +fun StepperRow(label: String) { + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.SpaceBetween, + verticalAlignment = Alignment.CenterVertically + ) { + Text( + text = label, + style = Typography.body4_m_15, + color = Color.Black + ) + Stepper( + modifier = Modifier, + initialValue = 0, + onValueChange = { newValue -> + println("$label 인원: $newValue") + } + ) + } +} + +@Preview(showBackground = true) +@Composable +fun StepperRowPreview(){ + StepperRow( + label = "하이" + ) +} diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt b/app/src/main/java/org/sopt/cgv/feature/seats/Stepper.kt similarity index 96% rename from app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt rename to app/src/main/java/org/sopt/cgv/feature/seats/Stepper.kt index 75116e8..b819a68 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/Stepper.kt +++ b/app/src/main/java/org/sopt/cgv/feature/seats/Stepper.kt @@ -1,7 +1,6 @@ -package org.sopt.cgv.core.designsystem.component.button +package org.sopt.cgv.feature.seats import androidx.compose.foundation.background -import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Row @@ -23,7 +22,6 @@ 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 androidx.compose.ui.unit.sp import org.sopt.cgv.R import org.sopt.cgv.core.common.norippleclick import org.sopt.cgv.core.designsystem.theme.Gray100 diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml index 585fc76..0c193ee 100644 --- a/gradle/libs.versions.toml +++ b/gradle/libs.versions.toml @@ -38,7 +38,6 @@ retrofit = { group = "com.squareup.retrofit2", name = "retrofit", version.ref = retrofit-kotlin-serialization-converter = { group = "com.jakewharton.retrofit", name = "retrofit2-kotlinx-serialization-converter", version.ref = "retrofitKotlinSerializationConverter" } kotlinx-serialization-json = { group = "org.jetbrains.kotlinx", name = "kotlinx-serialization-json", version.ref = "kotlinxSerializationJson" } - [plugins] android-application = { id = "com.android.application", version.ref = "agp" } kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" } From 964d412dd53c5399f13c3e937793ae99b7e5d921 Mon Sep 17 00:00:00 2001 From: tunaunnie Date: Fri, 22 Nov 2024 02:16:42 +0900 Subject: [PATCH 09/17] feature #7 : fix datetime type --- .../component/card/CompTimeCard.kt | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt index ecce0fc..f94b611 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt @@ -30,13 +30,15 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.getValue import androidx.compose.runtime.setValue import org.sopt.cgv.core.common.norippleclick +import java.time.LocalDateTime +import java.time.format.DateTimeFormatter @Composable fun CompTimeCard( modifier: Modifier = Modifier, - startTime: String, - endTime: String, + startTime: LocalDateTime, + endTime: LocalDateTime, currentSeats: Int, totalSeats: Int, isMorning: Boolean @@ -49,6 +51,10 @@ fun CompTimeCard( val backgroundColor2 = if (isClicked) Gray700 else Gray200 val leftSeatsColor = if (isClickedCard) PrimaryRed400 else Green + val timeFormatter = DateTimeFormatter.ofPattern("HH:mm") + val formattedStartTime = startTime.format(timeFormatter) + val formattedEndTime = endTime.format(timeFormatter) + Box( modifier = Modifier .size(width = 90.dp, height = 64.dp) @@ -72,13 +78,13 @@ fun CompTimeCard( horizontalArrangement = Arrangement.Center, ){ Text( - text = startTime, + text = formattedStartTime, color = Black, style = Typography.head1_b_16 ) Text( modifier = Modifier.padding(top = 4.dp), - text = "~$endTime", + text = "~$formattedEndTime", color = Gray600, style = Typography.body0_r_8 ) @@ -133,8 +139,8 @@ fun CompTimeCard( fun CompTimeCardPreview() { CompTimeCard( modifier = Modifier, - startTime = "07:50", - endTime = "09:41", + startTime = LocalDateTime.of(2024, 11, 19, 7, 50), + endTime = LocalDateTime.of(2024, 11, 19, 9, 41), currentSeats = 183, totalSeats = 185, isMorning = true From 50a85ee792833077a1e200d15173ef3761fc87af Mon Sep 17 00:00:00 2001 From: tunaunnie Date: Fri, 22 Nov 2024 02:17:28 +0900 Subject: [PATCH 10/17] chore #7: rm imports --- .../sopt/cgv/core/designsystem/component/card/CompTimeCard.kt | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt index f94b611..3f20a34 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt @@ -2,7 +2,6 @@ package org.sopt.cgv.core.designsystem.component.card import androidx.compose.foundation.background import androidx.compose.foundation.border -import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column @@ -22,7 +21,6 @@ import androidx.compose.ui.draw.clip import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp import org.sopt.cgv.core.designsystem.theme.* import org.sopt.cgv.R import androidx.compose.runtime.mutableStateOf From 286aefcccb57a4f63a17537da640b745e9e067cc Mon Sep 17 00:00:00 2001 From: tunaunnie Date: Fri, 22 Nov 2024 02:25:35 +0900 Subject: [PATCH 11/17] chore #7: rm imports --- .../sopt/cgv/core/designsystem/component/button/ModalButton.kt | 1 - .../java/org/sopt/cgv/feature/seats/SeatSelectionChipRow.kt | 3 --- .../java/org/sopt/cgv/feature/seats/SeatSelectionModal1.kt | 1 - 3 files changed, 5 deletions(-) diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt index 05d0d7d..96e702c 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt @@ -3,7 +3,6 @@ package org.sopt.cgv.core.designsystem.component.button import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.background import androidx.compose.foundation.border -import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column diff --git a/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionChipRow.kt b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionChipRow.kt index bdf6bf9..e200f22 100644 --- a/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionChipRow.kt +++ b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionChipRow.kt @@ -2,15 +2,12 @@ package org.sopt.cgv.feature.seats import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.width import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import org.sopt.cgv.core.designsystem.component.chip.Chip -import androidx.compose.foundation.lazy.items import androidx.compose.ui.Alignment @Composable diff --git a/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionModal1.kt b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionModal1.kt index 80b79f4..e7f024b 100644 --- a/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionModal1.kt +++ b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionModal1.kt @@ -13,7 +13,6 @@ import androidx.compose.ui.unit.dp import org.sopt.cgv.core.designsystem.component.button.ModalButton import org.sopt.cgv.core.designsystem.theme.Black import org.sopt.cgv.core.designsystem.theme.Typography -import org.sopt.cgv.core.designsystem.component.chip.Chip @OptIn(ExperimentalMaterial3Api::class) @Composable From 8531af3d94f116abc37678c66f0783f75cf63676 Mon Sep 17 00:00:00 2001 From: tunaunnie Date: Fri, 22 Nov 2024 19:13:42 +0900 Subject: [PATCH 12/17] =?UTF-8?q?ui=20#7:=20timecardRow=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../feature/seats/SeatSelectionTimeCardRow.kt | 64 +++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionTimeCardRow.kt diff --git a/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionTimeCardRow.kt b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionTimeCardRow.kt new file mode 100644 index 0000000..cb63baa --- /dev/null +++ b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionTimeCardRow.kt @@ -0,0 +1,64 @@ +package org.sopt.cgv.feature.seats + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.lazy.LazyRow +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import org.sopt.cgv.core.designsystem.component.card.CompTimeCard +import java.time.LocalDateTime + +//modifier: Modifier = Modifier, +//startTime: LocalDateTime, +//endTime: LocalDateTime, +//currentSeats: Int, +//totalSeats: Int, +//isMorning: Boolean + +data class TimeCardContent( + val startTime: LocalDateTime, + val endTime: LocalDateTime, + val currentSeats: Int, + val totalSeats: Int, + val isMorning: Boolean +) + + +@Composable +fun SeatSelectionTimeCardRow( + contents: PersistentList, + modifier: Modifier = Modifier, +){ + LazyRow( + modifier = modifier, + horizontalArrangement = Arrangement.spacedBy(12.dp), + contentPadding = PaddingValues(horizontal = 20.dp) + ) { + items(contents) { eachCard -> + CompTimeCard( + modifier = modifier, + startTime = eachCard.startTime + ) + + } + } + +} + +//modifier: Modifier = Modifier, +//startTime: LocalDateTime, +//endTime: LocalDateTime, +//currentSeats: Int, +//totalSeats: Int, +//isMorning: Boolean + +@Preview(showBackground = true) +@Composable +fun SeatSelectionTimeCardRowPreview(){ + SeatSelectionTimeCardRow() +} \ No newline at end of file From c445077e7e48b6744b70baec3f0d93a8ab9c4dde Mon Sep 17 00:00:00 2001 From: tunaunnie Date: Fri, 22 Nov 2024 19:31:43 +0900 Subject: [PATCH 13/17] =?UTF-8?q?UI=20#7:=20SeatSelectionTimeCardRow=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../feature/seats/SeatSelectionTimeCardRow.kt | 58 +++++++++++-------- 1 file changed, 34 insertions(+), 24 deletions(-) diff --git a/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionTimeCardRow.kt b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionTimeCardRow.kt index cb63baa..0780d0f 100644 --- a/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionTimeCardRow.kt +++ b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionTimeCardRow.kt @@ -2,24 +2,17 @@ package org.sopt.cgv.feature.seats import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.PaddingValues -import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.lazy.LazyRow +import androidx.compose.foundation.lazy.items import androidx.compose.runtime.Composable -import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import kotlinx.collections.immutable.PersistentList +import kotlinx.collections.immutable.persistentListOf import org.sopt.cgv.core.designsystem.component.card.CompTimeCard import java.time.LocalDateTime -//modifier: Modifier = Modifier, -//startTime: LocalDateTime, -//endTime: LocalDateTime, -//currentSeats: Int, -//totalSeats: Int, -//isMorning: Boolean - data class TimeCardContent( val startTime: LocalDateTime, val endTime: LocalDateTime, @@ -28,7 +21,6 @@ data class TimeCardContent( val isMorning: Boolean ) - @Composable fun SeatSelectionTimeCardRow( contents: PersistentList, @@ -36,29 +28,47 @@ fun SeatSelectionTimeCardRow( ){ LazyRow( modifier = modifier, - horizontalArrangement = Arrangement.spacedBy(12.dp), - contentPadding = PaddingValues(horizontal = 20.dp) + horizontalArrangement = Arrangement.spacedBy(6.dp), + contentPadding = PaddingValues(horizontal = 10.dp) ) { items(contents) { eachCard -> CompTimeCard( - modifier = modifier, - startTime = eachCard.startTime + startTime = eachCard.startTime, + endTime = eachCard.endTime, + currentSeats = eachCard.currentSeats, + totalSeats = eachCard.totalSeats, + isMorning = eachCard.isMorning ) - } } - } -//modifier: Modifier = Modifier, -//startTime: LocalDateTime, -//endTime: LocalDateTime, -//currentSeats: Int, -//totalSeats: Int, -//isMorning: Boolean @Preview(showBackground = true) @Composable fun SeatSelectionTimeCardRowPreview(){ - SeatSelectionTimeCardRow() + val sampleTimeCardData = persistentListOf( + TimeCardContent( + startTime = LocalDateTime.of(2024, 11, 19, 7, 50), + endTime = LocalDateTime.of(2024, 11, 19, 9, 41), + currentSeats = 185, + totalSeats = 178, + isMorning = true, + ), + TimeCardContent( + startTime = LocalDateTime.of(2024, 11, 19, 7, 50), + endTime = LocalDateTime.of(2024, 11, 19, 9, 41), + currentSeats = 185, + totalSeats = 178, + isMorning = true, + ), + TimeCardContent( + startTime = LocalDateTime.of(2024, 11, 19, 7, 50), + endTime = LocalDateTime.of(2024, 11, 19, 9, 41), + currentSeats = 185, + totalSeats = 178, + isMorning = true, + ) + ) + SeatSelectionTimeCardRow(contents = sampleTimeCardData) } \ No newline at end of file From 80d9f4dd6993f1d2d1728d914a851a3d6c0cd711 Mon Sep 17 00:00:00 2001 From: tunaunnie Date: Fri, 22 Nov 2024 20:42:46 +0900 Subject: [PATCH 14/17] =?UTF-8?q?UI=20#7=20:=20timeCardRow=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/card/CompTimeCard.kt | 40 +++++++++++-------- .../feature/seats/SeatSelectionTimeCardRow.kt | 37 ++++++++++++++--- 2 files changed, 55 insertions(+), 22 deletions(-) diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt index 3f20a34..3ad09ce 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt @@ -1,7 +1,10 @@ package org.sopt.cgv.core.designsystem.component.card +import android.os.Build +import androidx.annotation.RequiresApi import androidx.compose.foundation.background import androidx.compose.foundation.border +import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column @@ -31,7 +34,7 @@ import org.sopt.cgv.core.common.norippleclick import java.time.LocalDateTime import java.time.format.DateTimeFormatter - +@RequiresApi(Build.VERSION_CODES.O) @Composable fun CompTimeCard( modifier: Modifier = Modifier, @@ -39,37 +42,37 @@ fun CompTimeCard( endTime: LocalDateTime, currentSeats: Int, totalSeats: Int, - isMorning: Boolean + isMorning: Boolean, + isActivated: Boolean = false, + onClick: () -> Unit, ){ - var isClicked by remember { mutableStateOf(false) } - var isClickedCard by remember { mutableStateOf(true) } - val backgroundColor = if (isClicked) Gray700 else White - val backgroundColor2 = if (isClicked) Gray700 else Gray200 - val leftSeatsColor = if (isClickedCard) PrimaryRed400 else Green + val backgroundColor = if (isActivated) White else Gray700 + val backgroundColor2 = if (isActivated) Gray200 else Gray700 + val leftSeatsColor = if (isActivated) PrimaryRed400 else Green val timeFormatter = DateTimeFormatter.ofPattern("HH:mm") val formattedStartTime = startTime.format(timeFormatter) val formattedEndTime = endTime.format(timeFormatter) Box( - modifier = Modifier + modifier = modifier .size(width = 90.dp, height = 64.dp) .clip(RoundedCornerShape(8.dp)) .background(backgroundColor) - .border(width = 2.dp, color = Gray200, shape = RoundedCornerShape(8.dp)) - .norippleclick() { - isClicked = !isClicked + .border(width = 1.dp, color = Gray200, shape = RoundedCornerShape(8.dp)) + .clickable { + onClick() } ){ Column( - modifier = Modifier.fillMaxSize(), + modifier = modifier.fillMaxSize(), verticalArrangement = Arrangement.SpaceBetween ){ //시간 부분 Row( - modifier = Modifier + modifier = modifier .size(width = 90.dp, height = 41.dp) .padding(horizontal = 8.dp, vertical = 10.dp), verticalAlignment = Alignment.CenterVertically, @@ -89,7 +92,7 @@ fun CompTimeCard( } //잔여 좌석 부분 Row( - modifier = Modifier + modifier = modifier .fillMaxWidth() .height(23.dp) .background(backgroundColor2), @@ -97,7 +100,7 @@ fun CompTimeCard( horizontalArrangement = Arrangement.SpaceAround, ){ Row( - modifier = Modifier + modifier = modifier .padding(top = 3.dp, bottom = 3.dp, start = 9.dp, end = 8.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceAround, @@ -107,7 +110,7 @@ fun CompTimeCard( painter = painterResource(id = R.drawable.ic_time_sun), contentDescription = "morning movie", tint = Gray700, - modifier = Modifier.size(16.dp) + modifier = modifier.size(16.dp) ) } Text( @@ -132,6 +135,7 @@ fun CompTimeCard( } } +@RequiresApi(Build.VERSION_CODES.O) @Preview(showBackground = true) @Composable fun CompTimeCardPreview() { @@ -141,7 +145,9 @@ fun CompTimeCardPreview() { endTime = LocalDateTime.of(2024, 11, 19, 9, 41), currentSeats = 183, totalSeats = 185, - isMorning = true + isMorning = true, + isActivated = true, + onClick = {} ) } diff --git a/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionTimeCardRow.kt b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionTimeCardRow.kt index 0780d0f..c979d6d 100644 --- a/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionTimeCardRow.kt +++ b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionTimeCardRow.kt @@ -1,15 +1,23 @@ package org.sopt.cgv.feature.seats +import android.os.Build +import androidx.annotation.RequiresApi import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.lazy.LazyRow import androidx.compose.foundation.lazy.items +import androidx.compose.foundation.lazy.itemsIndexed 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.tooling.preview.Preview import androidx.compose.ui.unit.dp import kotlinx.collections.immutable.PersistentList import kotlinx.collections.immutable.persistentListOf +import org.sopt.cgv.core.common.norippleclick import org.sopt.cgv.core.designsystem.component.card.CompTimeCard import java.time.LocalDateTime @@ -18,35 +26,43 @@ data class TimeCardContent( val endTime: LocalDateTime, val currentSeats: Int, val totalSeats: Int, - val isMorning: Boolean + val isMorning: Boolean, + val isActivated: Boolean ) +@RequiresApi(Build.VERSION_CODES.O) @Composable fun SeatSelectionTimeCardRow( contents: PersistentList, modifier: Modifier = Modifier, -){ +) { + var clickedCardIndex = remember { mutableStateOf(Int) } + LazyRow( modifier = modifier, horizontalArrangement = Arrangement.spacedBy(6.dp), contentPadding = PaddingValues(horizontal = 10.dp) ) { - items(contents) { eachCard -> + itemsIndexed(contents) { index: Int, eachCard -> CompTimeCard( + modifier = Modifier, startTime = eachCard.startTime, endTime = eachCard.endTime, currentSeats = eachCard.currentSeats, totalSeats = eachCard.totalSeats, - isMorning = eachCard.isMorning + isMorning = eachCard.isMorning, + isActivated = eachCard.isActivated, + onClick = {} ) } } } +@RequiresApi(Build.VERSION_CODES.O) @Preview(showBackground = true) @Composable -fun SeatSelectionTimeCardRowPreview(){ +fun SeatSelectionTimeCardRowPreview() { val sampleTimeCardData = persistentListOf( TimeCardContent( startTime = LocalDateTime.of(2024, 11, 19, 7, 50), @@ -54,6 +70,7 @@ fun SeatSelectionTimeCardRowPreview(){ currentSeats = 185, totalSeats = 178, isMorning = true, + isActivated = false, ), TimeCardContent( startTime = LocalDateTime.of(2024, 11, 19, 7, 50), @@ -61,6 +78,7 @@ fun SeatSelectionTimeCardRowPreview(){ currentSeats = 185, totalSeats = 178, isMorning = true, + isActivated = false, ), TimeCardContent( startTime = LocalDateTime.of(2024, 11, 19, 7, 50), @@ -68,6 +86,15 @@ fun SeatSelectionTimeCardRowPreview(){ currentSeats = 185, totalSeats = 178, isMorning = true, + isActivated = false, + ), + TimeCardContent( + startTime = LocalDateTime.of(2024, 11, 19, 7, 50), + endTime = LocalDateTime.of(2024, 11, 19, 9, 41), + currentSeats = 185, + totalSeats = 178, + isMorning = false, + isActivated = false, ) ) SeatSelectionTimeCardRow(contents = sampleTimeCardData) From 31384d84344323e26fcafa56f4947f35735fff3d Mon Sep 17 00:00:00 2001 From: tunaunnie Date: Fri, 22 Nov 2024 20:56:09 +0900 Subject: [PATCH 15/17] =?UTF-8?q?delete=20#7=20:=20button=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/button/ModalButton.kt | 146 ------------------ .../component/card/CompTimeCard.kt | 5 - .../cgv/feature/seats/SeatSelectionModal1.kt | 34 ++-- .../feature/seats/SeatSelectionTimeCardRow.kt | 4 - 4 files changed, 21 insertions(+), 168 deletions(-) delete mode 100644 app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt deleted file mode 100644 index 96e702c..0000000 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt +++ /dev/null @@ -1,146 +0,0 @@ -package org.sopt.cgv.core.designsystem.component.button - -import androidx.compose.foundation.BorderStroke -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.Row -import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size -import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material3.Text -import androidx.compose.runtime.Composable -import androidx.compose.runtime.getValue -import androidx.compose.runtime.mutableStateOf -import androidx.compose.runtime.remember -import androidx.compose.runtime.setValue -import androidx.compose.ui.Alignment -import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.dp -import org.sopt.cgv.core.common.norippleclick -import org.sopt.cgv.core.designsystem.theme.PrimaryRed400 -import org.sopt.cgv.core.designsystem.theme.Typography -import org.sopt.cgv.core.designsystem.theme.White - -data class ButtonStyle( - val backgroundColor: Color, - val border: BorderStroke?, - val textColor: Color, -) - -@Composable -fun getButtonStyle(buttonType: String): ButtonStyle { - return remember(buttonType) { - when (buttonType) { - "Choice" -> ButtonStyle( - backgroundColor = PrimaryRed400, - border = null, - textColor = White - ) - "Back" -> ButtonStyle( - backgroundColor = White, - border = BorderStroke(1.dp, PrimaryRed400), - textColor = PrimaryRed400 - ) - else -> ButtonStyle( - backgroundColor = PrimaryRed400, - border = null, - textColor = White - ) - } - } - -} - -@Composable -fun ModalButton( - modifier: Modifier = Modifier, - buttonType: String, - initialActivation: Boolean, - content: String, - length: String, -){ - - var isActivated by remember { mutableStateOf(initialActivation) } - val buttonStyle = getButtonStyle(buttonType) - - val (buttonWidth, buttonHeight) = remember(length) { - when (length) { - "long" -> Pair(324.dp, 54.dp) - "half" -> Pair(156.dp, 54.dp) - else -> Pair(324.dp, 54.dp) - } - } - - Box( - modifier = Modifier - .size(width = buttonWidth, height = buttonHeight) - .clip(RoundedCornerShape(12.dp)) - .background(buttonStyle.backgroundColor) - .then( - if (buttonStyle.border != null) - Modifier.border(buttonStyle.border, RoundedCornerShape(12.dp)) - else - Modifier - ) - .norippleclick() { - /* Todo - behavior after cliking the button */ - } - ) { - Row( - modifier = Modifier.fillMaxSize(), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceEvenly - ){ - Text( - text = content, - color = buttonStyle.textColor, - style = Typography.head6_b_17 - ) - - } - } -} - - - -@Preview -@Composable -fun ButtonPreview(){ - Column( - modifier = Modifier - .fillMaxWidth() - .padding(16.dp), - verticalArrangement = Arrangement.spacedBy(16.dp), - horizontalAlignment = Alignment.CenterHorizontally - ) { - ModalButton( - modifier = Modifier, - buttonType = "Choice", - initialActivation = true, - content = "좌석선택", - length = "long" - ) - ModalButton( - modifier = Modifier, - buttonType = "Back", - initialActivation = false, - content = "뒤로가기", - length = "half" - ) - ModalButton( - modifier = Modifier, - buttonType = "Choice", - initialActivation = true, - content = "확인", - length = "half" - ) - } -} \ No newline at end of file diff --git a/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt b/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt index 3ad09ce..0327693 100644 --- a/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt +++ b/app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt @@ -26,11 +26,6 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import org.sopt.cgv.core.designsystem.theme.* import org.sopt.cgv.R -import androidx.compose.runtime.mutableStateOf -import androidx.compose.runtime.remember -import androidx.compose.runtime.getValue -import androidx.compose.runtime.setValue -import org.sopt.cgv.core.common.norippleclick import java.time.LocalDateTime import java.time.format.DateTimeFormatter diff --git a/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionModal1.kt b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionModal1.kt index e7f024b..9135066 100644 --- a/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionModal1.kt +++ b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionModal1.kt @@ -10,8 +10,10 @@ 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 org.sopt.cgv.core.designsystem.component.button.ModalButton +import org.sopt.cgv.core.designsystem.component.button.CgvButton import org.sopt.cgv.core.designsystem.theme.Black +import org.sopt.cgv.core.designsystem.theme.CGVTheme +import org.sopt.cgv.core.designsystem.theme.PrimaryRed400 import org.sopt.cgv.core.designsystem.theme.Typography @OptIn(ExperimentalMaterial3Api::class) @@ -71,22 +73,28 @@ fun SeatSelectionModal1( modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center ) { - ModalButton( - modifier = Modifier, - buttonType = "Back", - initialActivation = false, - content = "뒤로가기", - length = "half" + CgvButton( + text = "뒤로가기", + textStyle = CGVTheme.typography.head6_b_17, + textColor = PrimaryRed400, + borderColor = PrimaryRed400, + horizontalPadding = 48.dp, + verticalPadding = 17.dp, + roundedCornerShape = 12.dp, + onClick = {}, + isBack = true ) Spacer(modifier = Modifier.width(16.dp)) - ModalButton( - modifier = Modifier, - buttonType = "Choice", - initialActivation = false, - content = "좌석선택", - length = "half" + CgvButton( + text = "좌석선택", + textStyle = CGVTheme.typography.head6_b_17, + horizontalPadding = 48.dp, + verticalPadding = 17.dp, + roundedCornerShape = 12.dp, + onClick = {}, + enabled = true ) } } diff --git a/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionTimeCardRow.kt b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionTimeCardRow.kt index c979d6d..1256144 100644 --- a/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionTimeCardRow.kt +++ b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionTimeCardRow.kt @@ -5,19 +5,15 @@ import androidx.annotation.RequiresApi import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.lazy.LazyRow -import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.itemsIndexed 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.tooling.preview.Preview import androidx.compose.ui.unit.dp import kotlinx.collections.immutable.PersistentList import kotlinx.collections.immutable.persistentListOf -import org.sopt.cgv.core.common.norippleclick import org.sopt.cgv.core.designsystem.component.card.CompTimeCard import java.time.LocalDateTime From eebb2870bc6bc504b3abe063c82bee7cef1d6e7f Mon Sep 17 00:00:00 2001 From: tunaunnie Date: Fri, 22 Nov 2024 21:03:57 +0900 Subject: [PATCH 16/17] =?UTF-8?q?UI=20#8=20:=20norippleclickable=20?= =?UTF-8?q?=ED=95=A8=EC=88=98=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../cgv/core/common/ModifierExtensions.kt | 20 ------------------- .../org/sopt/cgv/feature/seats/Stepper.kt | 6 +++--- 2 files changed, 3 insertions(+), 23 deletions(-) delete mode 100644 app/src/main/java/org/sopt/cgv/core/common/ModifierExtensions.kt diff --git a/app/src/main/java/org/sopt/cgv/core/common/ModifierExtensions.kt b/app/src/main/java/org/sopt/cgv/core/common/ModifierExtensions.kt deleted file mode 100644 index a03676d..0000000 --- a/app/src/main/java/org/sopt/cgv/core/common/ModifierExtensions.kt +++ /dev/null @@ -1,20 +0,0 @@ -package org.sopt.cgv.core.common - -import androidx.compose.foundation.clickable -import androidx.compose.foundation.interaction.MutableInteractionSource -import androidx.compose.runtime.Composable -import androidx.compose.runtime.remember -import androidx.compose.ui.Modifier - -@Composable -fun Modifier.norippleclick( - enabled: Boolean = true, - onClick: () -> Unit -): Modifier { - return this.clickable( - interactionSource = remember { MutableInteractionSource() }, - indication = null, - enabled = enabled, - onClick = onClick - ) -} diff --git a/app/src/main/java/org/sopt/cgv/feature/seats/Stepper.kt b/app/src/main/java/org/sopt/cgv/feature/seats/Stepper.kt index b819a68..17a9276 100644 --- a/app/src/main/java/org/sopt/cgv/feature/seats/Stepper.kt +++ b/app/src/main/java/org/sopt/cgv/feature/seats/Stepper.kt @@ -23,7 +23,7 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import org.sopt.cgv.R -import org.sopt.cgv.core.common.norippleclick +import org.sopt.cgv.core.common.extension.noRippleClickable import org.sopt.cgv.core.designsystem.theme.Gray100 import org.sopt.cgv.core.designsystem.theme.Gray700 import org.sopt.cgv.core.designsystem.theme.Gray800 @@ -53,7 +53,7 @@ fun Stepper( // - 버튼 Box( modifier = Modifier - .norippleclick { + .noRippleClickable { if (currentValue > 0) { currentValue-- onValueChange(currentValue) @@ -88,7 +88,7 @@ fun Stepper( // + 버튼 Box( modifier = Modifier - .norippleclick { + .noRippleClickable { currentValue++ onValueChange(currentValue) } From 00f838c28e6cb0d175291dc3804809cf639881a4 Mon Sep 17 00:00:00 2001 From: tunaunnie Date: Fri, 22 Nov 2024 21:05:54 +0900 Subject: [PATCH 17/17] =?UTF-8?q?UI=20#8=20:=20modal=EC=97=90=20modifier?= =?UTF-8?q?=20=EC=9D=B8=EC=9E=90=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/java/org/sopt/cgv/feature/seats/SeatSelectionModal1.kt | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionModal1.kt b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionModal1.kt index 9135066..af1e1d5 100644 --- a/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionModal1.kt +++ b/app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionModal1.kt @@ -19,6 +19,7 @@ import org.sopt.cgv.core.designsystem.theme.Typography @OptIn(ExperimentalMaterial3Api::class) @Composable fun SeatSelectionModal1( + modifier: Modifier = Modifier, seatSelectionMovieTitle: String, chipContents: List, onBackClick: () -> Unit, @@ -113,6 +114,7 @@ fun SeatSelectionModal1Preview() { ) SeatSelectionModal1( + modifier = Modifier, seatSelectionMovieTitle = "글래디에이터 2", chipContents = ChipContents, onBackClick = { },