[Chore/IPLC-32] 이력서 리브랜딩 반영

app/src/main/java/org/sopt/certi/core/component/bottomsheet/RegisterTestInfoBottomSheet.kt

@@ -2,7 +2,6 @@ package org.sopt.certi.core.component.bottomsheet
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
-import androidx.compose.foundation.gestures.detectVerticalDragGestures
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -15,12 +14,13 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.ModalBottomSheet
-import androidx.compose.material3.SheetState
 import androidx.compose.material3.Text
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
@@ -33,9 +33,12 @@ 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.geometry.Offset
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
+import androidx.compose.ui.input.nestedscroll.NestedScrollSource
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
@@ -65,7 +68,6 @@ import org.sopt.certi.ui.theme.CertiTheme
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun RegisterTestInfoBottomSheet(
-    sheetState: SheetState,
     forModify: Boolean,
     certTitle: String,
     onConfirm: (city: String, state: String, timeDate: String) -> Unit,
@@ -74,6 +76,16 @@ fun RegisterTestInfoBottomSheet(
     modifier: Modifier = Modifier,
     certificationData: CertificationData? = null
 ) {
+    val sheetState = rememberModalBottomSheetState(
+        skipPartiallyExpanded = true
+    )
+
+    val scrollLock = remember {
+        object : NestedScrollConnection {
+            override fun onPostScroll(consumed: Offset, available: Offset, source: NestedScrollSource): Offset { return available }
+        }
+    }
+
     val density = LocalDensity.current
     val scope = rememberCoroutineScope()
 
@@ -155,14 +167,10 @@ fun RegisterTestInfoBottomSheet(
         Column(
             modifier = Modifier
                 .wrapContentHeight()
-                .pointerInput(Unit) {
-                    detectVerticalDragGestures(
-                        onDragEnd = {},
-                        onDragCancel = {},
-                        onVerticalDrag = { _, _ -> /* 아무것도 안 함 */ }
-                    )
-                }
                 .fillMaxWidth()
+                .heightIn(max = screenHeightDp(664.dp))
+                .nestedScroll(scrollLock)
+                .verticalScroll(rememberScrollState())
         ) {
             Spacer(Modifier.heightForScreenPercentage(35.dp))
 
@@ -368,6 +376,7 @@ fun RegisterTestInfoBottomSheet(
                                             blur = 20.dp
                                         )
                                         .background(CertiTheme.colors.white)
+                                        .nestedScroll(scrollLock)
                                 ) {
                                     itemsIndexed(cityList) { index, placeName ->
                                         PlaceItem(
@@ -396,6 +405,7 @@ fun RegisterTestInfoBottomSheet(
                                             blur = 20.dp
                                         )
                                         .background(CertiTheme.colors.white)
+                                        .nestedScroll(scrollLock)
                                 ) {
                                     itemsIndexed(districtList) { index, placeName ->
                                         PlaceItem(
@@ -485,9 +495,7 @@ fun RegisterTestInfoBottomSheet(
                                         }
                                     }
                                 },
-                                modifier = Modifier
-                                    .fillMaxWidth()
-                                    .heightForScreenPercentage(56.dp)
+                                modifier = Modifier.fillMaxWidth()
                             )
 
                             Spacer(Modifier.heightForScreenPercentage(24.dp))
@@ -537,12 +545,7 @@ private fun PlaceItem(
 @Preview
 @Composable
 fun RegisterTestInfoBottomSheetPreview() {
-    val sheetState = rememberModalBottomSheetState(
-        skipPartiallyExpanded = true
-    )
-
     RegisterTestInfoBottomSheet(
-        sheetState = sheetState,
         certTitle = "자격증 이름",
         forModify = false,
         certificationData = null,

app/src/main/java/org/sopt/certi/core/component/chip/CertiDefaultChip.kt

@@ -9,6 +9,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -56,12 +57,14 @@ fun CertiDefaultChip(
                 cornerRadius = 12.dp,
                 backgroundColor = backgroundColor
             )
-            .padding(horizontal = screenWidthDp(8.dp), vertical = screenHeightDp(6.dp))
+            .padding(horizontal = screenWidthDp(8.dp), vertical = screenHeightDp(4.dp))
     ) {
         Text(
             text = text,
             style = textStyle,
-            color = textColor
+            color = textColor,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis
         )
     }
 }

app/src/main/java/org/sopt/certi/core/component/chip/ResetBadge.kt

@@ -0,0 +1,56 @@
+package org.sopt.certi.core.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.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import org.sopt.certi.core.util.screenWidthDp
+import org.sopt.certi.ui.theme.CERTITheme
+import org.sopt.certi.ui.theme.CertiTheme
+
+@Composable
+fun ResetBadge(
+    text: String,
+    modifier: Modifier = Modifier,
+    textColor: Color = CertiTheme.colors.white,
+    textStyle: TextStyle = CertiTheme.typography.caption.regular_10,
+    backgroundColor: Color = CertiTheme.colors.mainBlue,
+    radius: Dp = 8.dp,
+    maxLines: Int = 1,
+    overFlow: TextOverflow = TextOverflow.Ellipsis
+) {
+    Box(
+        modifier = modifier
+            .clip(RoundedCornerShape(radius))
+            .background(backgroundColor)
+            .padding(horizontal = screenWidthDp(4.dp), vertical = screenWidthDp(2.dp))
+    ) {
+        Text(
+            text = text,
+            color = textColor,
+            style = textStyle,
+            maxLines = maxLines,
+            overflow = overFlow
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun ResetBadgePreview() {
+    CERTITheme {
+        ResetBadge(
+            text = "1지망"
+        )
+    }
+}

app/src/main/java/org/sopt/certi/core/component/dialog/CertiDeleteDialog.kt

@@ -23,6 +23,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Dialog
@@ -51,13 +52,15 @@ fun CertiDeleteDialog(
                 Text(
                     text = title,
                     style = CertiTheme.typography.body.semibold_18,
-                    color = CertiTheme.colors.gray600
+                    color = CertiTheme.colors.gray600,
+                    textAlign = TextAlign.Center
                 )
                 Spacer(modifier = Modifier.height(screenWidthDp(16.dp)))
                 Text(
                     text = description,
                     style = CertiTheme.typography.caption.regular_14,
-                    color = CertiTheme.colors.gray600
+                    color = CertiTheme.colors.gray600,
+                    textAlign = TextAlign.Center
                 )
                 Spacer(modifier = Modifier.height(screenWidthDp(24.dp)))
                 HorizontalDivider(
@@ -113,6 +116,7 @@ fun DialogButton(
             text = text,
             style = CertiTheme.typography.body.semibold_18,
             color = textColor,
+            textAlign = TextAlign.Center,
             modifier = Modifier.padding(vertical = screenWidthDp(16.dp))
         )
     }

app/src/main/java/org/sopt/certi/core/component/section/CertInfoSection.kt

@@ -37,6 +37,7 @@ fun CertInfoSection(
             text = testInfo,
             style = CertiTheme.typography.caption.regular_14,
             color = textColor
+
         )
     }
 }

app/src/main/java/org/sopt/certi/core/component/section/CertItemTitleSection.kt

@@ -1,6 +1,8 @@
 package org.sopt.certi.core.component.section
 
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.material3.Icon
@@ -13,9 +15,11 @@ import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.unit.dp
 import org.sopt.certi.R
 import org.sopt.certi.core.util.noRippleClickable
+import org.sopt.certi.core.util.screenHeightDp
 import org.sopt.certi.core.util.screenWidthDp
 import org.sopt.certi.ui.theme.CertiTheme
 
+@OptIn(ExperimentalLayoutApi::class)
 @Composable
 fun CertItemTitleSection(
     certName: String,
@@ -26,19 +30,25 @@ fun CertItemTitleSection(
 ) {
     Row(
         modifier = modifier,
-        verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.spacedBy(screenWidthDp(8.dp))
     ) {
-        Text(
-            text = certName,
-            style = CertiTheme.typography.subtitle.semibold_20,
-            color = CertiTheme.colors.black
-        )
-        Text(
-            text = certType,
-            style = CertiTheme.typography.caption.regular_12,
-            color = CertiTheme.colors.black
-        )
+        FlowRow(
+            horizontalArrangement = Arrangement.spacedBy(screenWidthDp(8.dp)),
+            verticalArrangement = Arrangement.spacedBy(screenHeightDp(4.dp))
+        ) {
+            Text(
+                text = certName,
+                style = CertiTheme.typography.subtitle.semibold_20,
+                color = CertiTheme.colors.black,
+                modifier = Modifier.align(Alignment.CenterVertically)
+            )
+            Text(
+                text = certType,
+                style = CertiTheme.typography.caption.regular_12,
+                color = CertiTheme.colors.black,
+                modifier = Modifier.align(Alignment.CenterVertically)
+            )
+        }
 
         Spacer(modifier = Modifier.weight(1f))
 

app/src/main/java/org/sopt/certi/core/component/section/MyCertificationListItemSection.kt

@@ -3,6 +3,8 @@ package org.sopt.certi.core.component.section
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -26,13 +28,15 @@ import org.sopt.certi.core.component.chip.CertiEditChipType
 import org.sopt.certi.core.util.heightForScreenPercentage
 import org.sopt.certi.core.util.noRippleClickable
 import org.sopt.certi.core.util.roundedBackgroundWithBorder
+import org.sopt.certi.core.util.screenHeightDp
 import org.sopt.certi.core.util.screenWidthDp
 import org.sopt.certi.core.util.toSpacedDotDate
 import org.sopt.certi.core.util.widthForScreenPercentage
 import org.sopt.certi.domain.model.certification.CertificationData
 import org.sopt.certi.ui.theme.CertiTheme
 import java.time.format.DateTimeFormatter
 
+@OptIn(ExperimentalLayoutApi::class)
 @Composable
 fun MyCertificationListItemSection(
     certificationData: CertificationData,
@@ -92,30 +96,34 @@ fun MyCertificationListItemSection(
 
         Spacer(Modifier.heightForScreenPercentage(12.dp))
 
-        Row(
+        FlowRow(
             modifier = Modifier.padding(vertical = screenWidthDp(2.dp)),
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(screenWidthDp(8.dp))
+            horizontalArrangement = Arrangement.spacedBy(screenWidthDp(8.dp)),
+            verticalArrangement = Arrangement.spacedBy(screenHeightDp(4.dp))
         ) {
             if (certificationData.isAcquired) {
                 CertInfoSection(
                     iconRes = R.drawable.ic_date_16,
-                    testInfo = certificationData.acquisitionDate.toSpacedDotDate()
+                    testInfo = certificationData.acquisitionDate.toSpacedDotDate(),
+                    modifier = Modifier.align(Alignment.CenterVertically)
                 )
                 CertInfoSection(
                     iconRes = R.drawable.ic_level,
                     iconColor = CertiTheme.colors.gray400,
                     testInfo = if (certificationData.grade.isBlank()) stringResource(R.string.acquired_grade_empty_text) else certificationData.grade,
-                    textColor = if (certificationData.grade.isBlank()) CertiTheme.colors.gray200 else CertiTheme.colors.black
+                    textColor = if (certificationData.grade.isBlank()) CertiTheme.colors.gray200 else CertiTheme.colors.black,
+                    modifier = Modifier.align(Alignment.CenterVertically)
                 )
             } else {
                 CertInfoSection(
                     iconRes = R.drawable.ic_placemark,
-                    testInfo = certificationData.city
+                    testInfo = certificationData.city,
+                    modifier = Modifier.align(Alignment.CenterVertically)
                 )
                 CertInfoSection(
                     iconRes = R.drawable.ic_time,
-                    testInfo = certificationData.testTime.format(DateTimeFormatter.ofPattern("HH:mm"))
+                    testInfo = certificationData.testTime.format(DateTimeFormatter.ofPattern("HH:mm")),
+                    modifier = Modifier.align(Alignment.CenterVertically)
                 )
             }
         }
@@ -127,7 +135,7 @@ private fun CertificationStatus(acquired: Boolean) {
     Row(
         modifier = Modifier
             .background(color = if (acquired) CertiTheme.colors.mainBlue else CertiTheme.colors.purpleBlue, shape = RoundedCornerShape(100.dp))
-            .padding(horizontal = screenWidthDp(6.dp), vertical = screenWidthDp(4.dp)),
+            .padding(horizontal = screenWidthDp(6.dp), vertical = screenWidthDp(3.dp)),
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.spacedBy(4.dp)
     ) {