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

[Feature] 사장님 운영시간 설정 UI 리뉴얼 #532

Merged
merged 6 commits into from
Feb 12, 2025
Merged

[Feature] 사장님 운영시간 설정 UI 리뉴얼 #532

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
da31859
Merge pull request #512 from BCSDLab/releases/v.4.1.6
wateralsie Dec 19, 2024
55b13fe
Merge pull request #521 from BCSDLab/release/v4.2.0
ThirFir Jan 6, 2025
aba3ee8
Merge pull request #526 from BCSDLab/release/v4.3.0
kongwoojin Jan 21, 2025
2ddd5c8
feature: 버텀시트 UI 생성
hsgo2430 Jan 24, 2025
ef9b76f
feature: 바텀시트에서 사용할 UI 생성
hsgo2430 Jan 31, 2025
ced4a56
fix: 1차 피드백 적용
hsgo2430 Feb 7, 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
166 changes: 166 additions & 0 deletions business/src/main/java/in/koreatech/business/ui/component/CheckSettingTimeScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
package `in`.koreatech.business.ui.component

import android.util.Log
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
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.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.material.Divider
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import `in`.koreatech.business.R
import `in`.koreatech.business.feature.insertstore.insertdetailinfo.operatingTime.OperatingTimeState
import `in`.koreatech.business.ui.theme.Black1
import `in`.koreatech.business.ui.theme.ColorPrimary
import `in`.koreatech.business.ui.theme.Gray3
import `in`.koreatech.business.ui.theme.Red2

@Composable
fun CheckSettingTime(
modifier: Modifier = Modifier,
kongwoojin marked this conversation as resolved.
Show resolved Hide resolved
settingTimeList: List<String> = emptyList()
) {

Divider(
Copy link
Contributor

Choose a reason for hiding this comment

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

요거는 VerticalDivider or HorizontalDivider와는 다른 컴포넌트인가요?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

HorizontalDivider와 동일한 기능을 할거에요!
예전부터 Divider를 써와서 사용했어요!

modifier = Modifier
.fillMaxWidth(),
color = Gray3,
thickness = 0.5.dp
)

LazyColumn(
modifier = Modifier.fillMaxWidth()
) {
itemsIndexed(settingTimeList){ index, item ->
if(index != 5 || item.isNotBlank()){
TimeItem(
timeString = item
)
}
Divider(
modifier = Modifier
.fillMaxWidth(),
color = Gray3,
thickness = 0.5.dp
)
}
}
if(settingTimeList.last().isBlank()){
Row(
modifier = Modifier
.padding(vertical = 16.dp)
.fillMaxWidth()
,
horizontalArrangement = Arrangement.Center
){
Text(
text = "설정시간 추가",
hsgo2430 marked this conversation as resolved.
Show resolved Hide resolved
style = TextStyle(
fontSize = 16.sp,
textAlign = TextAlign.Center
)
Copy link
Contributor

Choose a reason for hiding this comment

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

Typography에 정의된 디자인시스템을 따르면 좋을 것 같은데, 새로 TextStyle을 생성해주신 이유가 있을까요?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

까먹고 있었어요!
한번 적용해볼게요!

)

Spacer(modifier = Modifier.width(8.dp))

Image(
painter = painterResource(R.drawable.fi_plus),
contentDescription = "플러스버튼"
hsgo2430 marked this conversation as resolved.
Show resolved Hide resolved
)
}

Divider(
modifier = Modifier
.fillMaxWidth(),
color = Gray3,
thickness = 0.5.dp
)
}
}

@Composable
fun TimeItem(
modifier: Modifier = Modifier,
timeString: String = "월, 화, 수, 목, 금 : 06:00 ~ 23:00"
) {
Row(
modifier = Modifier
.padding(horizontal = 24.dp, vertical = 16.dp)
.fillMaxWidth()
.height(25.dp)
,
horizontalArrangement = Arrangement.SpaceBetween
){
if(timeString.isNotBlank()){
val stringList = timeString.split(" : ")
val coloredString = buildAnnotatedString {
append(stringList[0] + " : ")
withStyle(style = SpanStyle(color = if (stringList[1] == "휴무") Red2 else ColorPrimary)){
append(stringList[1])
}
}

Text(
text = coloredString,
style = TextStyle(
fontSize = 16.sp
kongwoojin marked this conversation as resolved.
Show resolved Hide resolved
)
)

Image(
painter = painterResource(R.drawable.ic_x),
contentDescription = "아이템 삭제"
)
}
}
}

@Preview
@Composable
fun PreviewCheckSettingTime() {
CheckSettingTime(
settingTimeList = list1
)
}

@Preview
@Composable
fun PreviewTimeItem() {
TimeItem()
}

val list1: List<String> = listOf(
Copy link
Contributor

Choose a reason for hiding this comment

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

이름이 명확하게 지어지면 좋을 거 같습니다.

Copy link
Contributor

Choose a reason for hiding this comment

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

또 프리뷰에서만 쓰이는 변수라면 전역으로 두는 것 보단 프리뷰 컴포저블 함수 내에 위치시키는 게 좋을거 같은데 어떠세요?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

정말 좋은 방법인데요!
참고할게요!

"토, 일 : 휴무",
"월, 화, 수, 목, 금 : 06:00 ~ 23:00",
"",
"",
"",
""
)

val list2: List<String> = listOf(
Copy link
Contributor

Choose a reason for hiding this comment

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

이 리스트는 SettingTimeComponent.kt에서 쓰이는 리스트 같은데 왜 여기에 위치하나여?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

원래는 CheckSettingTimeScreen.kt에서 Preview를 위해 사용했던거에요.
그리고 pr에도 남겨놨듯이 로직 적용 전이라서 임시 방편으로 사용한거구요.
로직 구현되면 삭제될 예정이에요!

kongwoojin marked this conversation as resolved.
Show resolved Hide resolved
"토, 일 : 휴무",
"월 : 06:00 ~ 23:00",
"화 : 06:00 ~ 23:00",
"수 : 06:00 ~ 23:00",
"목 : 06:00 ~ 23:00",
"금 : 06:00 ~ 23:00"
)
86 changes: 86 additions & 0 deletions business/src/main/java/in/koreatech/business/ui/component/NullSettingTimeScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
package `in`.koreatech.business.ui.component

import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material.Divider
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import `in`.koreatech.business.R
import `in`.koreatech.business.ui.theme.Gray3

@Composable
fun NullSettingTime(
modifier: Modifier = Modifier,
updateIsSettingScreenState: (Boolean) -> Unit = {},
) {
Divider(
modifier = Modifier
.fillMaxWidth(),
color = Gray3,
thickness = 0.5.dp
)

Text(
modifier = Modifier
.padding(vertical = 135.dp)
.fillMaxWidth()
,
text = "등록한 운영시간이 없습니다.",
style = TextStyle(
fontSize = 16.sp,
textAlign = TextAlign.Center
)
)

Divider(
modifier = Modifier
.fillMaxWidth(),
color = Gray3,
thickness = 0.5.dp
)

Row(
modifier = Modifier
.padding(vertical = 16.dp)
.fillMaxWidth()
.clickable {
updateIsSettingScreenState(true)
}
,
horizontalArrangement = Arrangement.Center
){
Text(
text = "설정시간 추가",
style = TextStyle(
fontSize = 16.sp,
textAlign = TextAlign.Center
)
)

Spacer(modifier = Modifier.width(8.dp))

Image(
painter = painterResource(R.drawable.fi_plus),
contentDescription = "플러스버튼"
)
}

Divider(
modifier = Modifier
.fillMaxWidth(),
color = Gray3,
thickness = 0.5.dp
)
}
Loading