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

[TNT-214] TrainerAddPTSession 관련 신규 디자인 컴포넌트 추가 #59

Merged
merged 4 commits into from
Feb 7, 2025

Conversation

FpRaArNkK
Copy link
Contributor

@FpRaArNkK FpRaArNkK commented Feb 6, 2025

📌 What is the PR?

  • TrainerAddPTSession 관련된 신규 디자인 컴포넌트를 작성했습니다.
    • TCalendar의 compactMonth 디자인 추가 -> TDatePickerView에 반영
    • TTimePicker 작성

🪄 Changes

  • TCalendar 스타일 추가 -> TDatePickerView에 반영
  • TTimePicker

🌐 Common Changes

  • 기존 TDatePickerView의 기본 데이트 피커가 TCalendar의 데이트피커로 교체되었습니다.

🔥 PR Point

  1. 타임피커...를 만들다보니까 점점 산으로 가고 라이브러리같이 되는 것 같아서 여기까지만 하고 올립니다..!
    지금 코드 상으로도 제대로 기능하는 것을 확인했습니다.
    커스텀 타임피커를 만들게 된 이유는.. ㅠ
  1. 기본/선택 텍스트의 폰트, 컬러, 배경색, 단위 사이 ":" 텍스트 등 매크로한 UI 설정
  2. UIPickerView, PickerView의 wheel UI 사용시 자동으로 3D UI 설정 - 해제 불가
  3. 기본 iOS 타임 피커처럼 어느정도 무한스크롤이 표현되어야 함
  4. 평면 무한 스크롤 피커 + 화면 표시 셀 개수 조정이 가능해야 함
  1. 타임 피커의 pick UI 표시 방식은 아래와 같습니다.
    2.1 - 각 FlatPickerColumn의 행에 GeometryReader를 사용하여 row의 midY를 계산하고, RowPreferenceKey를 통해 상위 뷰로 전달합니다.
    2.2 - PreferenceKey 업데이트를 기반으로 현재 스크롤 컨테이너의 중앙과 가장 가까운 행을 찾아 선택 상태를 업데이트하며, 0.2초의 debounce를 통해 스크롤이 멈춘 시점에 중앙에 스냅되도록 구현했습니다.

  2. 타임 피커의 입력값 설명은 다음과 같습니다.
    selectedDate를 통해 가져온 Date를 TTimePicker는 시간, 분, 오전/오후를 각각 FlatPickerColumn으로 표현하며, minuteStep를통해 1분, 5분, 10분 등 분단위를 지정 가능합니다.
    사용법은 다음과 같습니다

@State private var date: Date = .now
 
TTimePicker(selectedDate: $date, minuteStep: 1)
                .padding(.horizontal, 24)
  • FlatPickerColumn은 무한 스크롤 옵션(infiniteScroll)에 따라 원본 데이터를 반복하여 보여주거나 그대로 표시하도록 구성되었습니다. (내부 구현이라 무시하셔도 됩니다)
  • RowPreferenceKey 관련 경고("Bound preference RowPreferenceKey tried to update multiple times per frame")는 여러 자식 뷰가 동시에 값을 업데이트하는 상황에서 발생할 수 있으나, UI 동작에는 영향이 없으므로 무시 가능합니다.

📸 Screenshot

기능 스크린샷
GIF
GIF
GIF

🙆🏻 To Reviewers

  • 어.. 타임피커는 정신건강에 해롭넨요

💭 Related Issues

@FpRaArNkK FpRaArNkK added the ✨Feat 새로운 기능 구현 (새로운 로직 추가, UI 구현 등) label Feb 6, 2025
@FpRaArNkK FpRaArNkK requested a review from syss220211 February 6, 2025 05:23
@FpRaArNkK FpRaArNkK self-assigned this Feb 6, 2025
@FpRaArNkK FpRaArNkK merged commit c8a8668 into develop Feb 7, 2025
@FpRaArNkK FpRaArNkK deleted the TNT-214-trainerAddSession branch February 12, 2025 08:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨Feat 새로운 기능 구현 (새로운 로직 추가, UI 구현 등)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants