diff --git a/app/src/main/java/com/spoony/spoony/presentation/placeDetail/component/PlaceDetailIconText.kt b/app/src/main/java/com/spoony/spoony/presentation/placeDetail/component/PlaceDetailIconText.kt new file mode 100644 index 00000000..08d3ea46 --- /dev/null +++ b/app/src/main/java/com/spoony/spoony/presentation/placeDetail/component/PlaceDetailIconText.kt @@ -0,0 +1,49 @@ +package com.spoony.spoony.presentation.placeDetail.component + +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width +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.graphics.Color +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import com.spoony.spoony.core.designsystem.theme.SpoonyAndroidTheme + +@Composable +fun PlaceDetailIconText( + icon: ImageVector, + iconSize: Dp, + text: String, + textStyle: TextStyle, + modifier: Modifier = Modifier, + textColor: Color = SpoonyAndroidTheme.colors.black, + iconTint: Color = SpoonyAndroidTheme.colors.gray600 +) { + Row( + modifier = modifier, + verticalAlignment = Alignment.CenterVertically + ) { + Icon( + imageVector = icon, + contentDescription = null, + modifier = Modifier.size(iconSize), + tint = iconTint + ) + Spacer(modifier = Modifier.width(4.dp)) + Text( + text = text, + color = textColor, + style = textStyle, + maxLines = 1, + overflow = TextOverflow.Ellipsis + ) + } +} diff --git a/app/src/main/java/com/spoony/spoony/presentation/placeDetail/component/PlaceDetailImageLazyRow.kt b/app/src/main/java/com/spoony/spoony/presentation/placeDetail/component/PlaceDetailImageLazyRow.kt new file mode 100644 index 00000000..02893655 --- /dev/null +++ b/app/src/main/java/com/spoony/spoony/presentation/placeDetail/component/PlaceDetailImageLazyRow.kt @@ -0,0 +1,112 @@ +package com.spoony.spoony.presentation.placeDetail.component + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.lazy.LazyRow +import androidx.compose.foundation.lazy.itemsIndexed +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.blur +import androidx.compose.ui.draw.clip +import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.platform.LocalConfiguration +import androidx.compose.ui.platform.LocalContext +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import coil.compose.AsyncImage +import coil.request.ImageRequest +import com.spoony.spoony.core.designsystem.theme.SpoonyAndroidTheme +import kotlinx.collections.immutable.ImmutableList +import kotlinx.collections.immutable.immutableListOf + +@Composable +fun PlaceDetailImageLazyRow( + imageList: ImmutableList, + modifier: Modifier = Modifier, + isBlurred: Boolean = true +) { + val context = LocalContext.current + val screenWidth = LocalConfiguration.current.screenWidthDp.dp + val imageSize = if (imageList.size == 1) screenWidth * 1f - 40.dp else screenWidth * (278f / 360f) + LazyRow( + modifier = modifier, + horizontalArrangement = Arrangement.spacedBy(10.dp), + contentPadding = PaddingValues(horizontal = 20.dp) + ) { + itemsIndexed(imageList, key = { index, _ -> index }) { _, imageUrl -> + AsyncImage( + modifier = Modifier + .size(imageSize) + .clip(RoundedCornerShape(10.dp)) + .background(SpoonyAndroidTheme.colors.gray300) + .then( + if (isBlurred) Modifier.blur(24.dp) else Modifier + ), + model = ImageRequest.Builder(context) + .crossfade(true) + .data(imageUrl) + .build(), + contentScale = ContentScale.Crop, + contentDescription = null + ) + } + } +} + +@Preview +@Composable +private fun PlaceDetailImageLazyRowPreview() { + SpoonyAndroidTheme { + Column( + verticalArrangement = Arrangement.spacedBy(20.dp) + ) { + PlaceDetailImageLazyRow( + imageList = immutableListOf( + "https://scontent-ssn1-1.cdninstagram.com/v/t51.29350-15/473779988_950264370546560_5341501240589886868_n.jpg?stp=dst-jpg_e35_tt7&efg=eyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi4xNDQweDE4MDAuc2RyLmYyOTM1MC5kZWZhdWx0X2ltYWdlIn0&_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=108&_nc_ohc=pHHeQnTQ2MMQ7kNvgFAMpBC&_nc_gid=ade93f1afc274f04a82c92d9b55d5753&edm=APs17CUBAAAA&ccb=7-5&ig_cache_key=MzU0NjA2ODI2MjUyMDI2ODQxNA%3D%3D.3-ccb7-5&oh=00_AYCoKFozJIoZG9Izmc5UtfR5Gg__iKqdIG_lBiKdHBHHoQ&oe=678DA05C&_nc_sid=10d13b", + "https://scontent-ssn1-1.cdninstagram.com/v/t51.29350-15/473777300_2608644809333752_6829001915967720892_n.jpg?stp=dst-jpegr_e35_tt6&efg=eyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi4xNDQweDE4MDAuaGRyLmYyOTM1MC5kZWZhdWx0X2ltYWdlIn0&_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=104&_nc_ohc=jGWaaI-t3NgQ7kNvgG_G7jW&_nc_gid=ade93f1afc274f04a82c92d9b55d5753&edm=APs17CUBAAAA&ccb=7-5&ig_cache_key=MzU0NjA2ODI2MjkzMTE3ODc4Ng%3D%3D.3-ccb7-5&oh=00_AYA2Yk3eVifWtHRTdKnlzzrSExKSY53mP1SoTgVhRS9WZA&oe=678DA27E&_nc_sid=10d13b", + "https://scontent-ssn1-1.cdninstagram.com/v/t51.29350-15/473699784_1020999916728583_5213195047254766315_n.jpg?stp=dst-jpegr_e35_tt6&efg=eyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi4xNDQweDE0NDAuaGRyLmYyOTM1MC5kZWZhdWx0X2ltYWdlIn0&_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=107&_nc_ohc=Jsa46D-cPKQQ7kNvgEb3Ibg&_nc_gid=43b0cc3eec544f7b82ac6ce4d0931342&edm=AP4sbd4BAAAA&ccb=7-5&ig_cache_key=MzU0NDg1ODAzMzAwMjU2MzI2Nw%3D%3D.3-ccb7-5&oh=00_AYAUoYMY3WAk816Pv1ntEDKsuGiRyiIqIIEtN2n_rNDOzA&oe=678DAEA4&_nc_sid=7a9f4b", + "https://scontent-ssn1-1.cdninstagram.com/v/t51.29350-15/473668872_631155566092547_2449423066645547426_n.jpg?stp=dst-jpegr_e35_tt6&efg=eyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi4xNDQweDE4MDAuaGRyLmYyOTM1MC5kZWZhdWx0X2ltYWdlIn0&_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=111&_nc_ohc=R493Nwe8XM4Q7kNvgGceBQv&_nc_gid=43b0cc3eec544f7b82ac6ce4d0931342&edm=AP4sbd4BAAAA&ccb=7-5&ig_cache_key=MzU0NDY0OTE1NzAwNzA2MzU2Mg%3D%3D.3-ccb7-5&oh=00_AYDU1LNSGLa4GKAZQRlX5ABzJQ4qf5h62z257zioGFlesA&oe=678DABD6&_nc_sid=7a9f4b", + "https://scontent-ssn1-1.cdninstagram.com/v/t51.29350-15/473560284_568265156121387_7921460915182213394_n.jpg?stp=dst-jpegr_e35_tt6&efg=eyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi4xNDQweDE4MDAuaGRyLmYyOTM1MC5kZWZhdWx0X2ltYWdlIn0&_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=103&_nc_ohc=gKoX2mv1x0QQ7kNvgHd6AjB&_nc_gid=af16ea24a7d04cc9a0d1e86a87ffccac&edm=APoiHPcBAAAA&ccb=7-5&ig_cache_key=MzU0NDU3MjM1MzUwNDM2MDA5Ng%3D%3D.3-ccb7-5&oh=00_AYDc2sbybqTbqQJaVw9HkW-Zt4aaVElCM-ecAUheJdCyGQ&oe=678DAE1A&_nc_sid=22de04" + ), + isBlurred = false + ) + PlaceDetailImageLazyRow( + imageList = immutableListOf( + "https://scontent-ssn1-1.cdninstagram.com/v/t51.29350-15/473779988_950264370546560_5341501240589886868_n.jpg?stp=dst-jpg_e35_tt7&efg=eyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi4xNDQweDE4MDAuc2RyLmYyOTM1MC5kZWZhdWx0X2ltYWdlIn0&_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=108&_nc_ohc=pHHeQnTQ2MMQ7kNvgFAMpBC&_nc_gid=ade93f1afc274f04a82c92d9b55d5753&edm=APs17CUBAAAA&ccb=7-5&ig_cache_key=MzU0NjA2ODI2MjUyMDI2ODQxNA%3D%3D.3-ccb7-5&oh=00_AYCoKFozJIoZG9Izmc5UtfR5Gg__iKqdIG_lBiKdHBHHoQ&oe=678DA05C&_nc_sid=10d13b", + "https://scontent-ssn1-1.cdninstagram.com/v/t51.29350-15/473777300_2608644809333752_6829001915967720892_n.jpg?stp=dst-jpegr_e35_tt6&efg=eyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi4xNDQweDE4MDAuaGRyLmYyOTM1MC5kZWZhdWx0X2ltYWdlIn0&_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=104&_nc_ohc=jGWaaI-t3NgQ7kNvgG_G7jW&_nc_gid=ade93f1afc274f04a82c92d9b55d5753&edm=APs17CUBAAAA&ccb=7-5&ig_cache_key=MzU0NjA2ODI2MjkzMTE3ODc4Ng%3D%3D.3-ccb7-5&oh=00_AYA2Yk3eVifWtHRTdKnlzzrSExKSY53mP1SoTgVhRS9WZA&oe=678DA27E&_nc_sid=10d13b", + "https://scontent-ssn1-1.cdninstagram.com/v/t51.29350-15/473699784_1020999916728583_5213195047254766315_n.jpg?stp=dst-jpegr_e35_tt6&efg=eyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi4xNDQweDE0NDAuaGRyLmYyOTM1MC5kZWZhdWx0X2ltYWdlIn0&_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=107&_nc_ohc=Jsa46D-cPKQQ7kNvgEb3Ibg&_nc_gid=43b0cc3eec544f7b82ac6ce4d0931342&edm=AP4sbd4BAAAA&ccb=7-5&ig_cache_key=MzU0NDg1ODAzMzAwMjU2MzI2Nw%3D%3D.3-ccb7-5&oh=00_AYAUoYMY3WAk816Pv1ntEDKsuGiRyiIqIIEtN2n_rNDOzA&oe=678DAEA4&_nc_sid=7a9f4b", + "https://scontent-ssn1-1.cdninstagram.com/v/t51.29350-15/473668872_631155566092547_2449423066645547426_n.jpg?stp=dst-jpegr_e35_tt6&efg=eyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi4xNDQweDE4MDAuaGRyLmYyOTM1MC5kZWZhdWx0X2ltYWdlIn0&_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=111&_nc_ohc=R493Nwe8XM4Q7kNvgGceBQv&_nc_gid=43b0cc3eec544f7b82ac6ce4d0931342&edm=AP4sbd4BAAAA&ccb=7-5&ig_cache_key=MzU0NDY0OTE1NzAwNzA2MzU2Mg%3D%3D.3-ccb7-5&oh=00_AYDU1LNSGLa4GKAZQRlX5ABzJQ4qf5h62z257zioGFlesA&oe=678DABD6&_nc_sid=7a9f4b", + "https://scontent-ssn1-1.cdninstagram.com/v/t51.29350-15/473560284_568265156121387_7921460915182213394_n.jpg?stp=dst-jpegr_e35_tt6&efg=eyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi4xNDQweDE4MDAuaGRyLmYyOTM1MC5kZWZhdWx0X2ltYWdlIn0&_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=103&_nc_ohc=gKoX2mv1x0QQ7kNvgHd6AjB&_nc_gid=af16ea24a7d04cc9a0d1e86a87ffccac&edm=APoiHPcBAAAA&ccb=7-5&ig_cache_key=MzU0NDU3MjM1MzUwNDM2MDA5Ng%3D%3D.3-ccb7-5&oh=00_AYDc2sbybqTbqQJaVw9HkW-Zt4aaVElCM-ecAUheJdCyGQ&oe=678DAE1A&_nc_sid=22de04" + ), + isBlurred = true + ) + } + } +} + +@Preview +@Composable +private fun PlaceDetailImageLazyRowOnePreview() { + SpoonyAndroidTheme { + Column( + verticalArrangement = Arrangement.spacedBy(20.dp) + ) { + PlaceDetailImageLazyRow( + imageList = immutableListOf( + "https://scontent-ssn1-1.cdninstagram.com/v/t51.29350-15/473779988_950264370546560_5341501240589886868_n.jpg?stp=dst-jpg_e35_tt7&efg=eyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi4xNDQweDE4MDAuc2RyLmYyOTM1MC5kZWZhdWx0X2ltYWdlIn0&_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=108&_nc_ohc=pHHeQnTQ2MMQ7kNvgFAMpBC&_nc_gid=ade93f1afc274f04a82c92d9b55d5753&edm=APs17CUBAAAA&ccb=7-5&ig_cache_key=MzU0NjA2ODI2MjUyMDI2ODQxNA%3D%3D.3-ccb7-5&oh=00_AYCoKFozJIoZG9Izmc5UtfR5Gg__iKqdIG_lBiKdHBHHoQ&oe=678DA05C&_nc_sid=10d13b" + ), + isBlurred = false + ) + PlaceDetailImageLazyRow( + imageList = immutableListOf( + "https://scontent-ssn1-1.cdninstagram.com/v/t51.29350-15/473779988_950264370546560_5341501240589886868_n.jpg?stp=dst-jpg_e35_tt7&efg=eyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi4xNDQweDE4MDAuc2RyLmYyOTM1MC5kZWZhdWx0X2ltYWdlIn0&_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=108&_nc_ohc=pHHeQnTQ2MMQ7kNvgFAMpBC&_nc_gid=ade93f1afc274f04a82c92d9b55d5753&edm=APs17CUBAAAA&ccb=7-5&ig_cache_key=MzU0NjA2ODI2MjUyMDI2ODQxNA%3D%3D.3-ccb7-5&oh=00_AYCoKFozJIoZG9Izmc5UtfR5Gg__iKqdIG_lBiKdHBHHoQ&oe=678DA05C&_nc_sid=10d13b" + ), + isBlurred = true + ) + } + } +} diff --git a/app/src/main/java/com/spoony/spoony/presentation/placeDetail/component/StoreInfo.kt b/app/src/main/java/com/spoony/spoony/presentation/placeDetail/component/StoreInfo.kt new file mode 100644 index 00000000..a15ff5f8 --- /dev/null +++ b/app/src/main/java/com/spoony/spoony/presentation/placeDetail/component/StoreInfo.kt @@ -0,0 +1,176 @@ +package com.spoony.spoony.presentation.placeDetail.component + +import androidx.compose.foundation.Canvas +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.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.key +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.blur +import androidx.compose.ui.draw.clip +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.PathEffect +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.platform.LocalDensity +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.res.vectorResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.spoony.spoony.R +import com.spoony.spoony.core.designsystem.theme.SpoonyAndroidTheme +import kotlinx.collections.immutable.ImmutableList +import kotlinx.collections.immutable.immutableListOf + +@Composable +fun StoreInfo( + menuItems: ImmutableList, + locationSubTitle: String, + location: String, + isBlurred: Boolean, + modifier: Modifier = Modifier +) { + Column( + modifier = modifier + .clip(RoundedCornerShape(8.dp)) + .then( + if (isBlurred) { + Modifier.blur(16.dp) + } else { + Modifier + } + ) + ) { + StoreInfoItem( + title = stringResource(id = R.string.place_detail_store_info_menu_title), + padding = PaddingValues( + top = 20.dp, + bottom = 28.dp, + start = 16.dp, + end = 16.dp + ), + shape = RoundedCornerShape( + topStart = 8.dp, + topEnd = 8.dp, + bottomStart = 20.dp, + bottomEnd = 20.dp + ) + ) { + Column( + verticalArrangement = Arrangement.spacedBy(12.dp) + ) { + menuItems.forEach { menuItem -> + key(menuItem) { + PlaceDetailIconText( + icon = ImageVector.vectorResource(R.drawable.ic_spoon_24), + iconSize = 20.dp, + text = menuItem, + textStyle = SpoonyAndroidTheme.typography.body2m, + modifier = Modifier.fillMaxWidth() + ) + } + } + } + } + HorizontalDashedLine() + StoreInfoItem( + title = stringResource(id = R.string.place_detail_store_info_location_title), + padding = PaddingValues( + vertical = 21.dp, + horizontal = 16.dp + ), + shape = RoundedCornerShape( + topStart = 20.dp, + topEnd = 20.dp, + bottomStart = 8.dp, + bottomEnd = 8.dp + ) + ) { + Text( + locationSubTitle, + style = SpoonyAndroidTheme.typography.title2sb + ) + Spacer(modifier = Modifier.height(11.dp)) + PlaceDetailIconText( + icon = ImageVector.vectorResource(R.drawable.ic_pin_24), + iconSize = 20.dp, + text = location, + textStyle = SpoonyAndroidTheme.typography.body2m, + modifier = Modifier.fillMaxWidth() + ) + } + } +} + +@Composable +private fun HorizontalDashedLine( + modifier: Modifier = Modifier, + color: Color = SpoonyAndroidTheme.colors.gray200, + strokeWidth: Float = 2f, + dashLengths: FloatArray = floatArrayOf(30f, 30f) +) { + val density = LocalDensity.current + Box( + modifier = modifier + .fillMaxWidth() + .height(with(density) { 1 / density.density }.dp) + ) { + Canvas(modifier = Modifier.matchParentSize()) { + val pathEffect = PathEffect.dashPathEffect( + intervals = dashLengths, + phase = 0f + ) + val horizontalPadding = 25.dp.toPx() + val yPos = size.height / 2 + drawLine( + color = color, + start = Offset(x = horizontalPadding, y = yPos), + end = Offset(x = size.width - horizontalPadding, y = yPos), + strokeWidth = strokeWidth, + pathEffect = pathEffect + ) + } + } +} + +@Preview(showBackground = true) +@Composable +private fun StoreInfoPreview() { + val menuItems = immutableListOf( + "고등어봉초밥", + "크렘브륄레", + "사케" + ) + SpoonyAndroidTheme { + Column( + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.spacedBy(20.dp) + ) { + StoreInfo( + modifier = Modifier + .padding(horizontal = 20.dp), + isBlurred = true, + menuItems = menuItems, + locationSubTitle = "어키", + location = "서울 마포구 연희로11가길 39" + ) + StoreInfo( + modifier = Modifier + .padding(horizontal = 20.dp), + isBlurred = false, + menuItems = menuItems, + locationSubTitle = "어키", + location = "서울 마포구 연희로11가길 39" + ) + } + } +} diff --git a/app/src/main/java/com/spoony/spoony/presentation/placeDetail/component/StoreInfoItem.kt b/app/src/main/java/com/spoony/spoony/presentation/placeDetail/component/StoreInfoItem.kt new file mode 100644 index 00000000..c6b26704 --- /dev/null +++ b/app/src/main/java/com/spoony/spoony/presentation/placeDetail/component/StoreInfoItem.kt @@ -0,0 +1,131 @@ +package com.spoony.spoony.presentation.placeDetail.component + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.PaddingValues +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.shape.RoundedCornerShape +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.key +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Shape +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.res.vectorResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.spoony.spoony.R +import com.spoony.spoony.core.designsystem.theme.SpoonyAndroidTheme +import kotlinx.collections.immutable.immutableListOf + +@Composable +fun StoreInfoItem( + title: String, + shape: Shape, + padding: PaddingValues, + modifier: Modifier = Modifier, + content: @Composable () -> Unit +) { + Column( + modifier = modifier + .fillMaxWidth() + .background( + shape = shape, + color = SpoonyAndroidTheme.colors.gray0 + ) + .padding(padding) + ) { + Text( + title, + style = SpoonyAndroidTheme.typography.body1b + ) + Spacer(modifier = Modifier.height(12.dp)) + content() + } +} + +@Preview +@Composable +private fun StoreInfoItemMenuPreview() { + val menuItems = immutableListOf( + "고등어봉초밥", + "크렘브륄레", + "사케" + ) + SpoonyAndroidTheme { + StoreInfoItem( + title = "Menu", + content = { + Column( + verticalArrangement = Arrangement.spacedBy(12.dp) + ) { + menuItems.forEach { menuItem -> + key(menuItem) { + PlaceDetailIconText( + icon = ImageVector.vectorResource(R.drawable.ic_spoon_24), + iconSize = 20.dp, + text = menuItem, + textStyle = SpoonyAndroidTheme.typography.body2m, + modifier = Modifier.fillMaxWidth() + ) + } + } + } + }, + padding = PaddingValues( + top = 20.dp, + bottom = 28.dp, + start = 16.dp, + end = 16.dp + ), + shape = RoundedCornerShape( + topStart = 8.dp, + topEnd = 8.dp, + bottomStart = 20.dp, + bottomEnd = 20.dp + ) + ) + } +} + +@Preview +@Composable +private fun StoreInfoItemLocationPreview() { + SpoonyAndroidTheme { + StoreInfoItem( + title = "Location", + content = { + Text( + "어키", + style = SpoonyAndroidTheme.typography.title2sb + ) + Spacer(modifier = Modifier.height(11.dp)) + Column( + verticalArrangement = Arrangement.spacedBy(12.dp) + ) { + PlaceDetailIconText( + icon = ImageVector.vectorResource(R.drawable.ic_pin_24), + iconSize = 20.dp, + text = "서울 마포구 연희로11가길 39", + textStyle = SpoonyAndroidTheme.typography.body2m, + modifier = Modifier.fillMaxWidth() + ) + } + }, + padding = PaddingValues( + vertical = 22.dp, + horizontal = 16.dp + ), + shape = RoundedCornerShape( + topStart = 20.dp, + topEnd = 20.dp, + bottomStart = 8.dp, + bottomEnd = 8.dp + ) + ) + } +} diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 1d37292d..34bf61f3 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -1,4 +1,6 @@ Spoony-Android %1$s / %2$s + Menu + Location