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