Merge branch 'UI/#7-seats-screen-components' of https://github.com/SO…

…PT-all/35-COLLABORATION-ANDROID-CGV into feature/#13-seats-screen-ui

app/src/main/java/org/sopt/cgv/core/designsystem/component/card/CompTimeCard.kt

@@ -0,0 +1,151 @@
+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
+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 org.sopt.cgv.core.designsystem.theme.*
+import org.sopt.cgv.R
+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,
+    isActivated: Boolean = false,
+    onClick: () -> Unit,
+){
+
+
+    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
+            .size(width = 90.dp, height = 64.dp)
+            .clip(RoundedCornerShape(8.dp))
+            .background(backgroundColor)
+            .border(width = 1.dp, color = Gray200, shape = RoundedCornerShape(8.dp))
+            .clickable {
+                onClick()
+            }
+    ){
+        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.Center,
+            ){
+                Text(
+                    text = formattedStartTime,
+                    color = Black,
+                    style = Typography.head1_b_16
+                )
+                Text(
+                    modifier = Modifier.padding(top = 4.dp),
+                    text = "~$formattedEndTime",
+                    color = Gray600,
+                    style = Typography.body0_r_8
+                )
+            }
+            //잔여 좌석 부분
+            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,
+                        style = Typography.body2_r_12
+                    )
+                    Text(
+                        text = "/",
+                        color = Black,
+                        style = Typography.body2_r_12
+                    )
+                    Text(
+                        text = "${totalSeats}석",
+                        color = Black,
+                        style = Typography.body2_r_12
+                    )
+                }
+            }
+
+        }
+    }
+}
+
+@RequiresApi(Build.VERSION_CODES.O)
+@Preview(showBackground = true)
+@Composable
+fun CompTimeCardPreview() {
+    CompTimeCard(
+        modifier = Modifier,
+        startTime = LocalDateTime.of(2024, 11, 19, 7, 50),
+        endTime = LocalDateTime.of(2024, 11, 19, 9, 41),
+        currentSeats = 183,
+        totalSeats = 185,
+        isMorning = true,
+        isActivated = true,
+        onClick = {}
+    )
+}
+
+
+
+

app/src/main/java/org/sopt/cgv/core/designsystem/component/chip/Chip.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 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 Chip(
+    modifier: Modifier = Modifier,
+    content: String
+){
+
+    Box(
+        modifier = Modifier
+            .clip(RoundedCornerShape(8.dp))
+            .background(Gray100)
+            .padding(vertical = 6.dp, horizontal = 8.dp),
+    ){
+        Text(
+            text = content,
+            color = Gray700,
+            style = Typography.head3_b_14
+        )
+    }
+}
+
+@Preview
+@Composable
+fun SeatChoiceModalChipPreview(){
+    Chip(
+        modifier = Modifier,
+        content = "2024.11.9 (토)"
+    )
+}

app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionChipRow.kt

@@ -0,0 +1,40 @@
+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.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.ui.Alignment
+
+@Composable
+fun SeatSelectionChipRow(
+    modifier: Modifier = Modifier,
+    contents: List<String>,
+){
+    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)
+}

app/src/main/java/org/sopt/cgv/feature/seats/SeatSelectionModal1.kt

@@ -0,0 +1,123 @@
+package org.sopt.cgv.feature.seats
+
+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.*
+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 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)
+@Composable
+fun SeatSelectionModal1(
+    modifier: Modifier = Modifier,
+    seatSelectionMovieTitle: String,
+    chipContents: List<String>,
+    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 = seatSelectionMovieTitle,
+                style = Typography.head6_b_17,
+                modifier = Modifier.align(Alignment.CenterHorizontally)
+            )
+
+            Spacer(modifier = Modifier.height(16.dp))
+
+            SeatSelectionChipRow(contents = chipContents)
+
+            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.Center
+            ) {
+                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))
+
+                CgvButton(
+                    text = "좌석선택",
+                    textStyle = CGVTheme.typography.head6_b_17,
+                    horizontalPadding = 48.dp,
+                    verticalPadding = 17.dp,
+                    roundedCornerShape = 12.dp,
+                    onClick = {},
+                    enabled = true
+                )
+            }
+        }
+    }
+}
+
+
+@Preview(showBackground = true)
+@Composable
+fun SeatSelectionModal1Preview() {
+
+    val ChipContents = listOf(
+        "2024.11.05 (월)",
+        "구리",
+        "10:40 ~ 12:39"
+    )
+
+    SeatSelectionModal1(
+        modifier = Modifier,
+        seatSelectionMovieTitle = "글래디에이터 2",
+        chipContents = ChipContents,
+        onBackClick = {  },
+        onSeatSelectionClick = {  }
+    )
+}