UI #6: 모달 안의 Footer 제외 모든 컴포넌트에 Color, Typography 적용

Footer는 공통 컴포넌트 받을 시 구현예정
SOPT-all · Nov 21, 2024 · 0eb52c0 · 0eb52c0
1 parent fffc1e1
commit 0eb52c0
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 19 deletions.
diff --git a/app/src/main/java/org/sopt/cgv/feature/time/ClickableVerticalRegionListInModal.kt b/app/src/main/java/org/sopt/cgv/feature/time/ClickableVerticalRegionListInModal.kt
@@ -14,9 +14,10 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
+import org.sopt.cgv.core.designsystem.theme.Black
 import org.sopt.cgv.core.designsystem.theme.CGVTheme
+import org.sopt.cgv.core.designsystem.theme.Gray700
 
 @Composable
 fun ClickableVerticalRegionListInModal(
@@ -41,8 +42,8 @@ fun ClickableVerticalRegionListInModal(
             ) {
                 Text(
                     text = item,
-                    style = CGVTheme.typography.body3_m_14,
-                    color = if (selectedItem == item) Color.Black else Color.DarkGray
+                    style = if (selectedItem == item) CGVTheme.typography.head3_b_14 else CGVTheme.typography.body3_m_14,
+                    color = if (selectedItem == item) Black else Gray700
                 )
             }
         }

diff --git a/app/src/main/java/org/sopt/cgv/feature/time/SelectableTheatersInModal.kt b/app/src/main/java/org/sopt/cgv/feature/time/SelectableTheatersInModal.kt
@@ -22,12 +22,16 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import org.sopt.cgv.R
 import org.sopt.cgv.core.designsystem.theme.CGVTheme
+import org.sopt.cgv.core.designsystem.theme.Gray200
+import org.sopt.cgv.core.designsystem.theme.Gray700
+import org.sopt.cgv.core.designsystem.theme.Gray850
+import org.sopt.cgv.core.designsystem.theme.PrimaryRed400
+import org.sopt.cgv.core.designsystem.theme.White
 
 
 data class MovieTheatersByDetailRegion(
@@ -49,7 +53,8 @@ fun SelectableTheatersInModal(
         item {
             Text(
                 text = stringResource(R.string.cgv_theater_selection_guide),
-                style = CGVTheme.typography.small1_l_10
+                style = CGVTheme.typography.small1_l_10,
+                color = Gray700
             )
         }
 
@@ -75,12 +80,15 @@ fun DetailRegionTheaters(
         Text(
             text = detailRegionName,
             style = CGVTheme.typography.head0_b_10,
-            color = Color.Red
+            color = PrimaryRed400
         )
+
         Spacer(modifier = Modifier.height(25.dp))
+
         theaterNames.forEach {
             TheaterListItem(it)
         }
+
         Spacer(modifier = Modifier.height(36.dp))
     }
 }
@@ -94,13 +102,14 @@ fun TheaterListItem(
     Box(
         modifier = Modifier
             .fillMaxWidth()
+            .height(44.dp)
             .clickable { isSelected = !isSelected }
-            .background(color = if (isSelected) Color.Gray else Color.White)
+            .background(color = if (isSelected) Gray200 else White)
             .drawBehind {
                 val strokeWidth = 1.dp.toPx()
                 val y = size.height - strokeWidth / 2
                 drawLine(
-                    color = Color(0xFFEDEDED),
+                    color = Gray200,
                     start = Offset(0f, y),
                     end = Offset(size.width, y),
                     strokeWidth = strokeWidth
@@ -113,7 +122,8 @@ fun TheaterListItem(
         ) {
             Text(
                 text = theaterName,
-                style = CGVTheme.typography.body3_m_14
+                style = if (isSelected) CGVTheme.typography.head4_b_15 else CGVTheme.typography.body3_m_14,
+                color = Gray850
             )
 
             Spacer(modifier = Modifier.weight(1f))
@@ -123,7 +133,8 @@ fun TheaterListItem(
                     painter = painterResource(R.drawable.ic_time_modal_check),
                     contentDescription = "",
                     modifier = Modifier
-                        .padding(horizontal = 5.dp, vertical = 7.dp)
+                        .padding(horizontal = 5.dp, vertical = 7.dp),
+                    tint = PrimaryRed400
                 )
             }
         }

diff --git a/app/src/main/java/org/sopt/cgv/feature/time/TheaterClassificationTabInModal.kt b/app/src/main/java/org/sopt/cgv/feature/time/TheaterClassificationTabInModal.kt
@@ -11,9 +11,11 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import org.sopt.cgv.core.designsystem.theme.CGVTheme
+import org.sopt.cgv.core.designsystem.theme.Gray850
+import org.sopt.cgv.core.designsystem.theme.PrimaryRed400
+import org.sopt.cgv.core.designsystem.theme.White
 
 @Composable
 fun TheaterClassificationTabInModal(
@@ -27,14 +29,14 @@ fun TheaterClassificationTabInModal(
     ) {
         TabRow(
             selectedTabIndex = selectedIndex.value,
-            modifier = Modifier,
-            containerColor = Color.White,
-            contentColor = Color.White,
+            containerColor = White,
+            contentColor = White,
             indicator = { tabPositions ->
                 TabRowDefaults.PrimaryIndicator(
                     modifier = Modifier.tabIndicatorOffset(tabPositions[selectedIndex.value]),
                     width = 175.dp,
-                    color = Color.Red
+                    height = 2.dp,
+                    color = PrimaryRed400
                 )
             },
             divider = {}
@@ -44,8 +46,8 @@ fun TheaterClassificationTabInModal(
                     selected = selectedIndex.value == index,
                     onClick = { selectedIndex.value = index },
                     modifier = Modifier.padding(vertical = 10.dp),
-                    selectedContentColor = Color.Red,
-                    unselectedContentColor = Color.Black
+                    selectedContentColor = PrimaryRed400,
+                    unselectedContentColor = Gray850
                 ) {
                     Text(
                         text = category,

diff --git a/app/src/main/java/org/sopt/cgv/feature/time/TheaterSelectionModalBottomSheet.kt b/app/src/main/java/org/sopt/cgv/feature/time/TheaterSelectionModalBottomSheet.kt
@@ -16,6 +16,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
+import org.sopt.cgv.core.designsystem.theme.White
 
 @ExperimentalMaterial3Api
 @Composable
@@ -61,7 +62,7 @@ fun TheaterSelectionModalBottomSheet(
             Column(
                 modifier = Modifier
                     .fillMaxSize()
-                    .background(Color.White)
+                    .background(White)
             ) {
                 Spacer(modifier = Modifier.height(10.dp))
 

diff --git a/app/src/main/java/org/sopt/cgv/feature/time/TheaterSelectionModalFooter.kt b/app/src/main/java/org/sopt/cgv/feature/time/TheaterSelectionModalFooter.kt
@@ -31,6 +31,7 @@ import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.launch
+import org.sopt.cgv.core.designsystem.theme.White
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -55,7 +56,7 @@ fun TheaterSelectionModalFooter(
         Column(
             modifier = Modifier
                 .fillMaxWidth()
-                .background(color = Color.White)
+                .background(color = White)
                 .padding(horizontal = 18.dp)
         ) {
             ShowSelectedChipsBox()