diff --git a/app/src/main/java/org/sopt/dateroad/domain/model/Place.kt b/app/src/main/java/org/sopt/dateroad/domain/model/Place.kt
new file mode 100644
index 00000000..9d2159c7
--- /dev/null
+++ b/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
+)
diff --git a/app/src/main/java/org/sopt/dateroad/presentation/type/PlaceCardType.kt b/app/src/main/java/org/sopt/dateroad/presentation/type/PlaceCardType.kt
new file mode 100644
index 00000000..db8d9ee7
--- /dev/null
+++ b/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
+ )
+}
diff --git a/app/src/main/java/org/sopt/dateroad/presentation/ui/component/placecard/DateRoadPlaceCard.kt b/app/src/main/java/org/sopt/dateroad/presentation/ui/component/placecard/DateRoadPlaceCard.kt
new file mode 100644
index 00000000..512796be
--- /dev/null
+++ b/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 = { }
+ )
+ }
+}
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index e3586e29..4d92701f 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -158,4 +158,6 @@
지역을 선택해주세요
적용하기
+
+ %1$d 시간
\ No newline at end of file