Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feat/#34] 장소 상세 페이지 StoreInfo, StoreInfoItem 구현 #35

Merged
merged 12 commits into from
Jan 16, 2025
+358 −0
Merged

[Feat/#34] 장소 상세 페이지 StoreInfo, StoreInfoItem 구현 #35

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ff9fbf1
[Feat/#34] StoreInfoItem UI 구현
Roel4990 Jan 15, 2025
b08299f
[Feat/#34] StoreInfo UI 구현
Roel4990 Jan 15, 2025
9dd330b
Merge branch 'develop' into feat/#34-explore-card
Roel4990 Jan 15, 2025
9e4bb4a
[Feat/#34] StoreInfo 및 StoreInfoItem 전체적으로 구조 수정
Roel4990 Jan 15, 2025
6d6b8b6
[Feat/#34] StoreInfo 구조 변경 및 StoreInfoItem title strings 추출
Roel4990 Jan 15, 2025
f187f66
[Feat/#34] Hairline 사용
Roel4990 Jan 15, 2025
f8945cf
[Feat/#34] padding 값 수정
Roel4990 Jan 15, 2025
193dd10
[Feat/#34] isBlurred 디폴트값 제거
Roel4990 Jan 15, 2025
a3317e5
[Feat/#34] ktLintFormat 처리
Roel4990 Jan 15, 2025
1376aff
[Feat/#34] StoreInfo 컴포넌트 수정
Roel4990 Jan 15, 2025
608683a
[Feat/#34] StoreInfoItem content 위치 수정
Roel4990 Jan 15, 2025
869c28b
[Feat/#34] string snake case 으로 수정
Roel4990 Jan 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions ...src/main/java/com/spoony/spoony/presentation/placeDetail/component/PlaceDetailIconText.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
)
}
}
165 changes: 143 additions & 22 deletions app/src/main/java/com/spoony/spoony/presentation/placeDetail/component/StoreInfo.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,42 @@ 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.immutableListOf

@Composable
fun StoreInfo(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1: 상호명이 빠졌어요!! 인자로 추가해주세요~~

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

구조가 바뀌었습니다! 확인 부탁드려요!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p1) 너무 외부까지 slot으로 뚫은 것 같아요.
내부에서 일부 선언해서 컴포넌트로 사용할 수 있게 해주세요

현재 Preview를 보시면 컴포넌트를 사용하는데 최소 120줄을 사용하고 있어요.
이것은 컴포넌트라고 볼 수 없을 것 같아요

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 수정했습니다!

menuItems: List<String>,
locationItems: List<String>,
modifier: Modifier = Modifier,
isBlurred: Boolean = true
menuContent: @Composable () -> Unit,
menuPaddingValues: PaddingValues,
menuShape: RoundedCornerShape,
locationContent: @Composable () -> Unit,
locationPaddingValues: PaddingValues,
locationShape: RoundedCornerShape,
isBlurred: Boolean,
modifier: Modifier = Modifier
) {
Column(
modifier = modifier
Expand All @@ -39,16 +53,17 @@ fun StoreInfo(
)
) {
StoreInfoItem(
title = "Menu",
items = menuItems,
isMenu = true
title = stringResource(id = R.string.PLACE_DETAIL_STORE_INFO_MENU_TITLE),
content = menuContent,
padding = menuPaddingValues,
shape = menuShape
)
HorizontalDashedLine()
StoreInfoItem(
title = "Location",
subTitle = "이키",
items = locationItems,
isMenu = false
title = stringResource(id = R.string.PLACE_DETAIL_STORE_INFO_LOCATION_TITLE),
content = locationContent,
padding = locationPaddingValues,
shape = locationShape
)
}
}
Expand All @@ -60,10 +75,11 @@ private fun HorizontalDashedLine(
strokeWidth: Float = 2f,
dashLengths: FloatArray = floatArrayOf(30f, 30f)
) {
val density = LocalDensity.current
Box(
modifier = modifier
.fillMaxWidth()
.height(1.dp)
.height(with(density) { 1 / density.density }.dp)
) {
Canvas(modifier = Modifier.matchParentSize()) {
val pathEffect = PathEffect.dashPathEffect(
Expand All @@ -86,6 +102,11 @@ private fun HorizontalDashedLine(
@Preview(showBackground = true)
@Composable
private fun StoreInfoPreview() {
val menuItems = immutableListOf(
"고등어봉초밥",
"크렘브륄레",
"사케"
)
SpoonyAndroidTheme {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
Expand All @@ -95,24 +116,124 @@ private fun StoreInfoPreview() {
modifier = Modifier
.padding(horizontal = 20.dp),
isBlurred = true,
menuItems = listOf(
"고등어봉초밥",
"크렘브륄레"
menuContent = {
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()
)
}
}
}
},
menuPaddingValues = PaddingValues(
top = 20.dp,
bottom = 28.dp,
start = 16.dp,
end = 16.dp
),
menuShape = RoundedCornerShape(
topStart = 8.dp,
topEnd = 8.dp,
bottomStart = 20.dp,
bottomEnd = 20.dp
),
locationContent = {
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()
)
}
},
locationPaddingValues = PaddingValues(
vertical = 21.dp,
horizontal = 16.dp
),
locationItems = listOf(
"서울 서대문구 연희로11가길 39"
locationShape = RoundedCornerShape(
topStart = 20.dp,
topEnd = 20.dp,
bottomStart = 8.dp,
bottomEnd = 8.dp
)
)
StoreInfo(
modifier = Modifier
.padding(horizontal = 20.dp),
isBlurred = false,
menuItems = listOf(
"고등어봉초밥",
"크렘브륄레"
menuContent = {
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()
)
}
}
}
},
menuPaddingValues = PaddingValues(
top = 20.dp,
bottom = 28.dp,
start = 16.dp,
end = 16.dp
),
menuShape = RoundedCornerShape(
topStart = 8.dp,
topEnd = 8.dp,
bottomStart = 20.dp,
bottomEnd = 20.dp
),
locationContent = {
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()
)
}
},
locationPaddingValues = PaddingValues(
vertical = 21.dp,
horizontal = 16.dp
),
locationItems = listOf(
"서울 서대문구 연희로11가길 39"
locationShape = RoundedCornerShape(
topStart = 20.dp,
topEnd = 20.dp,
bottomStart = 8.dp,
bottomEnd = 8.dp
)
)
}
Expand Down
Loading
Loading