From 80d9f4dd6993f1d2d1728d914a851a3d6c0cd711 Mon Sep 17 00:00:00 2001 From: tunaunnie Date: Fri, 22 Nov 2024 20:42:46 +0900 Subject: [PATCH] =?UTF-8?q?UI=20#7=20:=20timeCardRow=20=EC=88=98=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)