[feat] Place Card 컴포넌트 구현

app/src/main/java/org/sopt/dateroad/domain/model/Place.kt

@@ -0,0 +1,6 @@
+package org.sopt.dateroad.domain.model
+
+data class Place(
+    val title: String,
+    val duration: Int
+)

app/src/main/java/org/sopt/dateroad/presentation/type/PlaceCardType.kt

@@ -0,0 +1,34 @@
+package org.sopt.dateroad.presentation.type
+
+import androidx.annotation.DrawableRes
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import org.sopt.dateroad.R
+
+enum class PlaceCardType(
+    @DrawableRes val iconRes: Int? = null,
+    val startPadding: Dp = 17.dp,
+    val endPadding: Dp = 4.dp,
+    val verticalPadding: Dp = 5.dp,
+    val iconStartPadding: Dp = 16.dp,
+    val iconTopPadding: Dp = 19.dp,
+    val iconEndPadding: Dp = 16.dp,
+    val iconBottomPadding: Dp = 20.dp
+
+) {
+    COURSE_NORMAL(
+        startPadding = 14.dp,
+        endPadding = 13.dp,
+        verticalPadding = 13.dp
+    ),
+    COURSE_EDIT(
+        iconRes = R.drawable.ic_date_schedule_move_course
+    ),
+    COURSE_DELETE(
+        iconRes = R.drawable.ic_date_schedule_delete_course,
+        iconStartPadding = 18.dp,
+        iconTopPadding = 18.dp,
+        iconEndPadding = 17.dp,
+        iconBottomPadding = 17.dp
+    )
+}

app/src/main/java/org/sopt/dateroad/presentation/ui/component/placecard/DateRoadPlaceCard.kt

@@ -0,0 +1,109 @@
+package org.sopt.dateroad.presentation.ui.component.placecard
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+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.padding
+import androidx.compose.foundation.layout.width
+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.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.sopt.dateroad.R
+import org.sopt.dateroad.domain.model.Place
+import org.sopt.dateroad.presentation.type.PlaceCardType
+import org.sopt.dateroad.presentation.type.TagType
+import org.sopt.dateroad.presentation.ui.component.tag.DateRoadTextTag
+import org.sopt.dateroad.ui.theme.DateRoadTheme
+
+@Composable
+fun DateRoadPlaceCard(
+    placeCardType: PlaceCardType,
+    placeTimeline: String? = null,
+    place: Place,
+    onIconClick: (() -> Unit)? = null
+) {
+    val paddingValues = Modifier.padding(start = placeCardType.startPadding, end = placeCardType.endPadding)
+
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .clip(RoundedCornerShape(14.dp))
+            .background(DateRoadTheme.colors.gray100)
+            .then(paddingValues)
+            .padding(vertical = placeCardType.verticalPadding),
+        horizontalArrangement = Arrangement.Center,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        placeTimeline?.let {
+            DateRoadTextTag(
+                textContent = it,
+                tagContentType = TagType.PLACE_CARD_NUMBER
+            )
+            Spacer(modifier = Modifier.width(14.dp))
+        }
+        Text(
+            text = place.title,
+            modifier = Modifier.weight(1f),
+            style = DateRoadTheme.typography.bodyBold15
+        )
+        Spacer(modifier = Modifier.width(10.dp))
+
+        DateRoadTextTag(
+            textContent = stringResource(id = R.string.course_detail_duration, place.duration),
+            tagContentType = TagType.PLACE_CARD_TIME
+        )
+        placeCardType.iconRes?.let {
+            Icon(
+                painter = painterResource(id = it),
+                contentDescription = null,
+                modifier = Modifier
+                    .padding(
+                        start = placeCardType.iconStartPadding,
+                        top = placeCardType.iconTopPadding,
+                        end = placeCardType.iconEndPadding,
+                        bottom = placeCardType.iconBottomPadding
+                    )
+                    .clickable {
+                        onIconClick?.invoke()
+                    }
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun DateRoadPlaceCardPreview() {
+    Column {
+        DateRoadPlaceCard(
+            placeCardType = PlaceCardType.COURSE_NORMAL,
+            placeTimeline = "1",
+            place = Place(title = "성수미술관 성수점", duration = 2)
+        )
+        Spacer(modifier = Modifier.height(8.dp))
+        DateRoadPlaceCard(
+            placeCardType = PlaceCardType.COURSE_EDIT,
+            place = Place(title = "성수미술관 성수점", duration = 2),
+            onIconClick = { }
+        )
+        Spacer(modifier = Modifier.height(8.dp))
+        DateRoadPlaceCard(
+            placeCardType = PlaceCardType.COURSE_DELETE,
+            place = Place(title = "성수미술관 성수점", duration = 2),
+            onIconClick = { }
+        )
+    }
+}

app/src/main/res/values/strings.xml

@@ -158,4 +158,6 @@
     <string name="region_bottom_sheet_title">지역을 선택해주세요</string>
     <string name="region_bottom_sheet_button_text">적용하기</string>
 
+    <!-- Course Detail -->
+    <string name="course_detail_duration">%1$d 시간</string>
 </resources>