[#257] 상세 경로 안내 변경된 디자인 반영

app/src/main/java/com/depromeet/team6/presentation/ui/itinerary/component/ItineraryInfoDetail.kt

@@ -2,15 +2,16 @@ package com.depromeet.team6.presentation.ui.itinerary.component
 
 import android.util.SparseArray
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -21,6 +22,7 @@ import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
 import com.depromeet.team6.R
 import com.depromeet.team6.domain.model.RealTimeBusArrival
 import com.depromeet.team6.domain.model.course.LegInfo
@@ -93,30 +95,43 @@ private fun ItineraryInfoSuffix(
     modifier: Modifier = Modifier
 ) {
     val markerIconId = if (isDestination) R.drawable.map_marker_arrival else R.drawable.map_marker_departure
+    val timelineIconSize = Dimens.LegTimelineIconSize
+    val markerYOffset = if (isDestination) 0.dp else 2.dp
+    val timelineTimeIconGap = Dimens.LegTimelineTimeIconGap
+    val timelineTimeSlotWidth = Dimens.LegTimelineTimeSlotWidth
+    val timelineColumnWidth = timelineTimeSlotWidth + timelineTimeIconGap + timelineIconSize
+
     Row(
-        modifier = Modifier
+        modifier = modifier.zIndex(1f),
+        verticalAlignment = Alignment.CenterVertically
     ) {
-        Column(
-            modifier = Modifier.width(Dimens.LegDetailVerticalLineWidth),
-            horizontalAlignment = Alignment.CenterHorizontally
+        Row(
+            modifier = Modifier
+                .width(timelineColumnWidth)
+                .height(Dimens.LegDetailVerticalLineWidth),
+            verticalAlignment = Alignment.CenterVertically
         ) {
+            Box(modifier = Modifier.width(timelineTimeSlotWidth)) {
+                BoardingTime(
+                    boardingDateTime = arrivalTime,
+                    modifier = Modifier.align(Alignment.CenterStart)
+                )
+            }
+            Spacer(modifier = Modifier.width(timelineTimeIconGap))
+
             Image(
-                modifier = Modifier.size(36.dp),
+                modifier = Modifier
+                    .offset(y = markerYOffset)
+                    .size(timelineIconSize),
                 imageVector = ImageVector.vectorResource(markerIconId),
                 contentDescription = ""
             )
-            BoardingTime(
-                boardingDateTime = arrivalTime,
-                modifier = Modifier
-            )
         }
         Spacer(
             modifier = Modifier.width(6.dp)
         )
         Text(
-            modifier = Modifier
-                .height(36.dp)
-                .wrapContentSize(Alignment.Center),
+            modifier = Modifier,
             text = name,
             style = defaultTeam6Typography.body5_B5SB14,
             color = defaultTeam6Colors.white