UI #7 : timeCardRow 수정

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,45 +34,45 @@ 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,
     startTime: LocalDateTime,
     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,15 +92,15 @@ fun CompTimeCard(
             }
             //잔여 좌석 부분
             Row(
-                modifier = Modifier
+                modifier = modifier
                     .fillMaxWidth()
                     .height(23.dp)
                     .background(backgroundColor2),
                 verticalAlignment = Alignment.CenterVertically,
                 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 = {}
     )
 }
 

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,56 +26,75 @@ 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<TimeCardContent>,
     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),
             endTime = LocalDateTime.of(2024, 11, 19, 9, 41),
             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 = 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 = 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)