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.

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/#7] time&seats screen 공통 컴포넌트 & seats 스크린 모달 구현 #8

Closed
wants to merge 12 commits into from

Conversation

tunaunnie
Copy link
Contributor

@tunaunnie tunaunnie commented Nov 19, 2024

📌 Issue

💻 Work Description

  • time, seats 공통 컴포넌트 구현 (cgv/core/designsystem/component)
    • ModalButton
    • CompTimeCard
    • Chip
  • seat 선택 모달 및 컴포넌트 구현 (cgv.feature/seats/)
    • SeatSelectionChipRow
    • SeatSelectionModal1
    • SeatSelectionStepperRow
    • Stepper

📸 Screenshot

default.mp4

공통

  1. ModalButton
  2. CompTimeCard
  3. Chip
image image https://github.com/user-attachments/assets/026695a9-4cc2-4991-9035-617abeedd2f0 image

Seat 스크린 컴포넌트

  1. ChipRow
  2. Stepper
  3. StepperRow
  4. Modal
image image https://github.com/user-attachments/assets/c1f90efe-c959-4471-952e-55275125d080

💭 To Reviewers

  • 안 쓰는 임포트 삭제 완료
  • 서버에서 보내주는 타입대로 (DateTime) 인자 수정 완료, <- 이거 DateTime을 String으로 변환할 때 DateTimeFormatter를 썼는데 API 레벨이 맞지 않는다는 오류 뜸. 그런데 찾아보니까 무시하고 실행이 되는 오류(?)래서 우선 이대로 사용중 (빌드/실행 잘됩니당)
  • 전부 norippleclick으로 수정 완

@tunaunnie tunaunnie self-assigned this Nov 19, 2024
Copy link
Member

@0se0 0se0 left a comment

Choose a reason for hiding this comment

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

  1. 전체적인 컴포넌트 파일에서 사용하지 않는 import들을 지워주세요.
  2. 서버에서 보내주는 값을 확인하고 인자로 넣어주세요!
    ex)starttime, endtime
  3. clickable이 설정된 것도 있고, 아닌 것도 있는데 norippleclick 확장함수를 만들어서 넣어주세요.
  4. 컴포넌트 사용이 제대로 되고 있는 것이 맞는지 임시 화면을 만들어서 보여주세요!
  5. 주석은 삭제해주세요! 모든 컴포넌트 인자에서 modifier을 전달해주는 것이 확장성에 더 좋을 거 같아요!
    먼저 이 5가지를 수정해주신 후 리퀘스트 백 부탁드려용

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.

오히려 비효율적이구 헷갈리려나... 싶어서 다시 나눌까 고민중이어요 ㅎㅎㅜㅠ..

@tunaunnie tunaunnie changed the title [UI/#7] time&seats screen 공통 컴포넌트 제작 [Feature/#7] time&seats screen 공통 컴포넌트 & seats 스크린 모달 구현 Nov 21, 2024
Copy link
Member

@0se0 0se0 left a comment

Choose a reason for hiding this comment

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

리뷰 확인해주시고, 반영하신 후 screen 구현하시면서 컴포넌트도 같이 수정해보시면 더 좋을 거 같습니당, 컴포넌트에서 모든 기능을 만드는 것이 아닌 ui 보여지는 요소를 구현한다고 생각하면 좋을 거 같아욥!

Comment on lines +9 to +20
@Composable
fun Modifier.norippleclick(
enabled: Boolean = true,
onClick: () -> Unit
): Modifier {
return this.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = null,
enabled = enabled,
onClick = onClick
)
}
Copy link
Member

Choose a reason for hiding this comment

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

여기 norippleclick 제가 develop에 넣어 놓았으니 그거 사용해주시면 될 거 같아요!

Comment on lines +45 to +51
var isClicked by remember { mutableStateOf(false) }
var isClickedCard by remember { mutableStateOf(true) }

val backgroundColor = if (isClicked) Gray700 else White
val backgroundColor2 = if (isClicked) Gray700 else Gray200
val leftSeatsColor = if (isClickedCard) PrimaryRed400 else Green

Copy link
Member

Choose a reason for hiding this comment

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

onclick을 인자로 넣어주시고, 그 안에서 배경색을 조절하면 좋을 거 같아요!

Comment on lines +74 to +80
val (buttonWidth, buttonHeight) = remember(length) {
when (length) {
"long" -> Pair(324.dp, 54.dp)
"half" -> Pair(156.dp, 54.dp)
else -> Pair(324.dp, 54.dp)
}
}
Copy link
Member

Choose a reason for hiding this comment

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

버튼 크기를 고정 dp로 주는 것이 아닌, 텍스트를 기준으로 horizontalPadding, verticalPadding을 주신후 나중에 스크린에서 전체 화면에서의 패딩을 조절하면 기기 대응에도 더 좋을 거 같습니당

Comment on lines +92 to +96
)
.norippleclick() {
/* Todo - behavior after cliking the button */
}
) {
Copy link
Member

Choose a reason for hiding this comment

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

요거 디벨롭 확장함수 사용해주세요!

Comment on lines +19 to +24
fun SeatSelectionModal1(
seatSelectionMovieTitle: String,
chipContents: List<String>,
onBackClick: () -> Unit,
onSeatSelectionClick: () -> Unit
) {
Copy link
Member

Choose a reason for hiding this comment

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

modifier 인자를 추가해주세요!

tunaunnie added a commit that referenced this pull request Nov 22, 2024
tunaunnie added a commit that referenced this pull request Nov 22, 2024
@tunaunnie tunaunnie closed this Nov 23, 2024
@tunaunnie tunaunnie reopened this Nov 23, 2024
@tunaunnie tunaunnie closed this Nov 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature] seats / 좌석 선택 모달 UI 구현
3 participants