[chore] 자체 QA - Timeline 관련 뷰 (데이트 일정, 지난 데이트, 데이트 상세)

app/src/main/java/org/sopt/dateroad/data/mapper/todomain/ResponseTimelineDtoMapper.kt

@@ -1,8 +1,6 @@
 package org.sopt.dateroad.data.mapper.todomain
 
 import org.sopt.dateroad.data.dataremote.model.response.ResponseTimelineDto
-import org.sopt.dateroad.data.mapper.toEntity.toAreaTitle
-import org.sopt.dateroad.data.mapper.toEntity.toAreaType
 import org.sopt.dateroad.data.mapper.toEntity.toBasicDates
 import org.sopt.dateroad.data.mapper.toEntity.toDDayString
 import org.sopt.dateroad.data.mapper.toEntity.toFormattedDate
@@ -13,7 +11,7 @@ fun ResponseTimelineDto.toFutureTimelineDomain(): Timeline = Timeline(
     dDay = this.dDay.toDDayString(),
     title = this.title,
     date = this.date.toFormattedDate(),
-    city = this.city.toAreaType().toAreaTitle(),
+    city = this.city,
     tags = this.tags.map { it.toDomain() }
 )
 
@@ -22,6 +20,6 @@ fun ResponseTimelineDto.toPastTimelineDomain(): Timeline = Timeline(
     dDay = this.dDay.toDDayString(),
     title = this.title,
     date = this.date.toBasicDates(),
-    city = this.city.toAreaType().toAreaTitle(),
+    city = this.city,
     tags = this.tags.map { it.toDomain() }
 )

app/src/main/java/org/sopt/dateroad/presentation/ui/past/PastScreen.kt

@@ -2,6 +2,7 @@ package org.sopt.dateroad.presentation.ui.past
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
@@ -10,6 +11,7 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -93,7 +95,12 @@ fun PastScreen(
             onLeftIconClick = popBackStack
         )
         if (pastUiState.timelines.isEmpty()) {
-            DateRoadEmptyView(emptyViewType = EmptyViewType.PAST)
+            Box(
+                modifier = Modifier.fillMaxSize(),
+                contentAlignment = Alignment.Center
+            ) {
+                DateRoadEmptyView(emptyViewType = EmptyViewType.PAST)
+            }
         } else {
             LazyColumn(
                 modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = 6.dp, bottom = 11.dp),

app/src/main/java/org/sopt/dateroad/presentation/ui/past/component/PastCard.kt

@@ -16,19 +16,23 @@ 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.geometry.Offset
 import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import org.sopt.dateroad.R
 import org.sopt.dateroad.domain.model.Timeline
+import org.sopt.dateroad.presentation.type.DateTagType
 import org.sopt.dateroad.presentation.type.TimelineType
 import org.sopt.dateroad.presentation.ui.component.tag.DateRoadImageTag
 import org.sopt.dateroad.presentation.util.modifier.noRippleClickable
+import org.sopt.dateroad.ui.theme.DATEROADTheme
 import org.sopt.dateroad.ui.theme.DateRoadTheme
 import org.sopt.dateroad.ui.theme.defaultDateRoadColors
 
@@ -51,7 +55,7 @@ fun PastCard(
             contentDescription = null,
             tint = timelineType.lineColor,
             modifier = Modifier
-                .fillMaxSize()
+                .align(Alignment.BottomEnd)
         )
         Column(
             modifier = Modifier
@@ -142,6 +146,22 @@ fun PastCard(
                 }
             }
         }
-        Spacer(modifier = Modifier.height(10.dp))
+    }
+}
+
+@Preview
+@Composable
+fun PastCardPreview() {
+    DATEROADTheme {
+        PastCard(
+            timeline = Timeline(
+                dDay = "D-day",
+                title = "성수동 당일치기 데이트 가볼까요?\n이정도 어떠신지?",
+                date = "2024년 6월 24일",
+                city = "건대/성수/왕십리",
+                tags = listOf(DateTagType.FOOD, DateTagType.DRIVE)
+            ),
+            timelineType = TimelineType.PINK
+        )
     }
 }

app/src/main/java/org/sopt/dateroad/presentation/ui/timeline/TimelineScreen.kt

@@ -148,7 +148,7 @@ fun TimelineScreen(
                     val date = uiState.timelines[page]
                     val timelineType = TimelineType.getTimelineTypeByIndex(page)
                     TimelineCard(
-                        timelineCard = date,
+                        timeline = date,
                         timelineType = timelineType,
                         onClick = { navigateToTimelineDetail(timelineType, date.timelineId) },
                         modifier = Modifier

app/src/main/java/org/sopt/dateroad/presentation/ui/timeline/component/TimelineCard.kt

@@ -43,7 +43,7 @@ import org.sopt.dateroad.ui.theme.defaultDateRoadColors
 @Composable
 fun TimelineCard(
     modifier: Modifier,
-    timelineCard: Timeline,
+    timeline: Timeline,
     timelineType: TimelineType,
     onClick: (Int) -> Unit = {}
 ) {
@@ -52,7 +52,7 @@ fun TimelineCard(
             .clip(RoundedCornerShape(24.dp))
             .aspectRatio(291 / 406f)
             .background(timelineType.backgroundColor)
-            .noRippleClickable(onClick = { onClick(timelineCard.timelineId) })
+            .noRippleClickable(onClick = { onClick(timeline.timelineId) })
     ) {
         Icon(
             painter = painterResource(id = R.drawable.bg_timeline_card),
@@ -80,7 +80,7 @@ fun TimelineCard(
                             .weight(1f)
                     ) {
                         Text(
-                            text = timelineCard.date,
+                            text = timeline.date,
                             style = DateRoadTheme.typography.titleExtra24,
                             color = DateRoadTheme.colors.black,
                             maxLines = 2,
@@ -89,7 +89,7 @@ fun TimelineCard(
                     }
                     Spacer(modifier = Modifier.width(10.dp))
                     DateRoadTextTag(
-                        textContent = timelineCard.dDay,
+                        textContent = timeline.dDay,
                         tagContentType = TagType.TIMELINE_D_DAY
                     )
                 }
@@ -101,32 +101,32 @@ fun TimelineCard(
                     verticalArrangement = Arrangement.Bottom,
                     horizontalAlignment = Alignment.Start
                 ) {
-                    if (timelineCard.tags.size >= 3) {
+                    if (timeline.tags.size >= 3) {
                         DateRoadImageTag(
-                            textContent = stringResource(id = timelineCard.tags[2].titleRes),
-                            imageContent = timelineCard.tags[2].imageRes,
+                            textContent = stringResource(id = timeline.tags[2].titleRes),
+                            imageContent = timeline.tags[2].imageRes,
                             tagContentType = timelineType.tagType,
                             spaceValue = 2,
                             modifier = Modifier
                                 .graphicsLayer(rotationZ = -12f)
                                 .padding(start = 19.dp, bottom = 5.dp)
                         )
                     }
-                    if (timelineCard.tags.size >= 2) {
+                    if (timeline.tags.size >= 2) {
                         DateRoadImageTag(
-                            textContent = stringResource(id = timelineCard.tags[1].titleRes),
-                            imageContent = timelineCard.tags[1].imageRes,
+                            textContent = stringResource(id = timeline.tags[1].titleRes),
+                            imageContent = timeline.tags[1].imageRes,
                             tagContentType = timelineType.tagType,
                             spaceValue = 2,
                             modifier = Modifier
                                 .graphicsLayer(rotationZ = 15f)
                                 .padding(start = 60.dp, bottom = 10.dp)
                         )
                     }
-                    if (timelineCard.tags.isNotEmpty()) {
+                    if (timeline.tags.isNotEmpty()) {
                         DateRoadImageTag(
-                            textContent = stringResource(id = timelineCard.tags[0].titleRes),
-                            imageContent = timelineCard.tags[0].imageRes,
+                            textContent = stringResource(id = timeline.tags[0].titleRes),
+                            imageContent = timeline.tags[0].imageRes,
                             tagContentType = timelineType.tagType,
                             spaceValue = 2
                         )
@@ -173,14 +173,14 @@ fun TimelineCard(
                     .padding(horizontal = 20.dp, vertical = 25.dp)
             ) {
                 Text(
-                    text = timelineCard.city,
+                    text = timeline.city,
                     style = DateRoadTheme.typography.bodyMed15,
                     color = DateRoadTheme.colors.gray500,
                     modifier = Modifier.fillMaxWidth()
                 )
                 Spacer(modifier = Modifier.height(5.dp))
                 Text(
-                    text = timelineCard.title,
+                    text = timeline.title,
                     style = DateRoadTheme.typography.titleExtra24,
                     color = DateRoadTheme.colors.black,
                     maxLines = 2,
@@ -200,7 +200,7 @@ fun TimelineCardPreview() {
         TimelineCard(
             modifier = Modifier,
             timelineType = TimelineType.PURPLE,
-            timelineCard = Timeline(
+            timeline = Timeline(
                 timelineId = 0,
                 dDay = "3",
                 title = "성수동 당일치기 데이트\n가볼까요?",

app/src/main/java/org/sopt/dateroad/presentation/ui/timelinedetail/TimelineDetailScreen.kt

@@ -153,12 +153,11 @@ fun TimelineDetailScreen(
                 .background(timelineType.backgroundColor)
         ) {
             Icon(
-                painter = painterResource(id = R.drawable.bg_past_card),
+                painter = painterResource(id = R.drawable.bg_timeline_detail),
                 contentDescription = null,
                 tint = timelineType.lineColor,
                 modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(0.dp)
+                    .align(Alignment.BottomEnd)
             )
             Column(
                 modifier = Modifier
@@ -215,9 +214,9 @@ fun TimelineDetailScreen(
                         }
                     }
                 }
+                Spacer(modifier = Modifier.height(18.dp))
             }
         }
-        Spacer(modifier = Modifier.height(18.dp))
         Box(
             modifier = Modifier
                 .clip(RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp))

app/src/main/res/drawable/bg_past_card.xml

@@ -1,5 +1,11 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android" android:alpha="0.9" android:height="167dp" android:viewportHeight="167" android:viewportWidth="293" android:width="293dp">
-
-    <path android:fillColor="#00000000" android:pathData="M348,5C92.32,63.45 198.47,218.12 257.27,177.83C301.24,147.7 250.84,27.44 132.32,55.9C85.48,67.14 41.16,104.49 5,207" android:strokeColor="#E1B7F0" android:strokeWidth="10"/>
-
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="293dp"
+    android:height="167dp"
+    android:viewportWidth="293"
+    android:viewportHeight="167">
+  <path
+      android:pathData="M348,5C92.32,63.45 198.47,218.12 257.27,177.83C301.24,147.7 250.84,27.44 132.32,55.9C85.48,67.14 41.16,104.49 5,207"
+      android:strokeWidth="10"
+      android:fillColor="#00000000"
+      android:strokeColor="#E1B7F0"/>
 </vector>

app/src/main/res/drawable/bg_timeline_detail.xml

@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="311dp"
+    android:height="209dp"
+    android:viewportWidth="311"
+    android:viewportHeight="209">
+  <path
+      android:pathData="M348,5C92.32,63.45 198.47,218.12 257.27,177.83C301.24,147.7 250.84,27.44 132.32,55.9C85.48,67.14 41.16,104.49 5,207"
+      android:strokeWidth="10"
+      android:fillColor="#00000000"
+      android:strokeColor="#E1B7F0"/>
+</vector>