[Feature/#7] time&seats screen 공통 컴포넌트 & seats 스크린 모달 구현

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
+    )
+}

app/src/main/java/org/sopt/cgv/core/designsystem/component/button/ModalButton.kt

@@ -0,0 +1,146 @@
+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"
+        )
+    }
+}

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

@@ -0,0 +1,150 @@
+package org.sopt.cgv.core.designsystem.component.card
+
+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.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 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
+
+
+@Composable
+fun CompTimeCard(
+    modifier: Modifier = Modifier,
+    startTime: LocalDateTime,
+    endTime: LocalDateTime,
+    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
+
+    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 = 2.dp, color = Gray200, shape = RoundedCornerShape(8.dp))
+            .norippleclick() {
+                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.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
+                    )
+                }
+            }
+
+        }
+    }
+}
+
+@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
+    )
+}
+
+
+
+

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 (토)"
+    )
+}