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

[Refactor] Bottom Sheet + Cropping #278

Merged
merged 14 commits into from
Apr 14, 2023
Merged

Conversation

WhiteHyun
Copy link
Member

@WhiteHyun WhiteHyun commented Apr 12, 2023

📌 PR 요약

🌱 작업한 내용

  • viewController에 내장되어있는 sheetPresentationController를 이용하여 BottomSheet를 리팩토링했습니다.
    • 리팩토링하면서 Constraint가 맞지 않는 부분을 수정했습니다. (기존 피그마 iOS 페이지 -> 앱 디자인 페이지에 맞게 변경)
  • CropViewController 프레임워크를 추가했습니다.
  • PhotoBottomSheetListView의 이름을 BottomSheetListView로 변경했습니다.

🌱 PR 포인트

  • 더 이상 grabber view를 따로 생성할 필요가 없습니다. 자동으로 추가해줍니다! (PLUB과 디자인이 다르지만, 디자인 팀에게 OK 사인을 받았습니다!)

    • 만약 필요없는 경우 sheetPresentationController프로퍼티의 prefersGrabberVisible값을 false로 처리해주세요.

      guard let sheet = sheetPresentationController else { return }
      sheet.prefersGrabberVisible = false // 이렇게 하면 grabber가 보이지 않음
  • BottomSheetViewController를 present하게 될 때, animationtrue로 하셔도 무방합니다.

Note: BottomSheetViewController는 bottom을 중심으로 height를 계산합니다. 따라서 Custom BottomSheetViewController를 구현하시게 된다면, Bottom으로부터 Constraint를 잡아가면서 구현해주시면 알아서 높이조절을 진행해주니 참고 바랍니다.

📸 스크린샷

Board
iPhone14 iPhone SE(2nd)
BottomSheet-SE-Board
Date
iPhone14 iPhone SE(2nd)
BottomSheet-SE-Date
Location
iPhone14 iPhone SE(2nd)
BottomSheet-SE-Location
Participant
iPhone14 iPhone SE(2nd)
BottomSheet-SE-Participant
Photo(Crop 적용 전, 적용 후)
  1. Crop 지원 이전
iPhone14 iPhone SE(2nd)
BottomSheet-Photo BottomSheet-SE-Photo
  1. Crop 지원 후
iPhone14 iPhone SE(2nd)
BottomSheet-Photo-New BottomSheet-SE-Photo-New
QuestionDelete
iPhone14 iPhone SE(2nd)
BottomSheet-SE-QuestionDelete
Schedule
iPhone14 iPhone SE(2nd)
BottomSheet-SE-Schedule
Sort
iPhone14 iPhone SE(2nd)
BottomSheet-SE-Sort
Todo
iPhone14 iPhone SE(2nd)
BottomSheet-SE-Todo

📮 관련 이슈

References

  1. Customize and Resize Sheets in UIKit
  2. What’s new in UIKit

- `sheetPresentationController`를 이용하여 Bottom Sheet 생성
- custom detents를 적용하기 위해 지원 버전을 iOS16로 올림
- Constraints 재설정
- grabber view 제거
- 줄일 수 있는 코드 제거
- grabber view 삭제
- constraint 재구성
- 두 클래스 전부 final 설정
- SortBottomSheetView의 선택시 보이는 체크 이미지 간격 조절
- grabber view 제거
- stackview 프로퍼티 옵션과 constraint 재구성
- 인기순, 최신순 사이 간격 조절
- grabber view 삭제
- constraint 재구성
- grabber view 삭제
- constraint 재구성
1. LocationTableViewCell: Constraint 재설정
2. LocationBaseView: height constraint 수정
3. LocationBottomSheetViewController
   - 버튼 라벨링 수정
   - Constraint를 `앱디자인`에 맞게 수정
- grabber view 제거
- constraint 재설정
- dismiss animation을 `true`로 설정
- grabber view 제거
- 디자인에 맞지 않는 타이포 수정(With us! -> With Us!)
- collectionView constraint 재구성 (contentInset 대신에 constraint로 처리)
- grabber view 제거
- constraint 재구성
- dismiss animation을 true로 설정
DateBottomSheetViewController, PhotoBottomSheetViewController의
dismiss animation을 true로 설정했습니다.
@WhiteHyun WhiteHyun added 😎 Enhancement New feature or request 🍎 ConfigureUI 화면 프로토타입 UI 구현 D+1 PR올린 다음날 까지는 리뷰 부탁드립니다 ♻️Refactoring labels Apr 12, 2023
@WhiteHyun WhiteHyun self-assigned this Apr 12, 2023
@WhiteHyun
Copy link
Member Author

iOS는 양쪽을 2배수(16)이 아니라 3배수(24)로 작업해야한다는 얘기를 들어서.. 다시 수정해서 올릴게요 🥹

@WhiteHyun WhiteHyun marked this pull request as draft April 13, 2023 01:38
양 옆을 `16`에서 `24`로 설정
@WhiteHyun WhiteHyun marked this pull request as ready for review April 13, 2023 01:57
Copy link
Contributor

@dlrjswns dlrjswns left a comment

Choose a reason for hiding this comment

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

디자인팀에게 오케이받았다는게 그래버잡고 위로 스크롤할때 컨텐츠가 안따라가는 부분인가요 ? 그게 아니라면 네이버맵스같은 앱에서는 따라가던데 그렇게하면 어떨까싶어서요 !!

@WhiteHyun
Copy link
Member Author

WhiteHyun commented Apr 13, 2023

디자인팀에게 오케이받았다는게 그래버잡고 위로 스크롤할때 컨텐츠가 안따라가는 부분인가요 ? 그게 아니라면 네이버맵스같은 앱에서는 따라가던데 그렇게하면 어떨까싶어서요 !!

진짜 말 그대로 grabber 디자인이 플럽과 다르지만, 디자인 팀에게 컨펌을 받았다는 뜻입니다!(플럽 디자인의 grabber는 애플이 제공하는 grabber에 비해 가로 길이가 넓음)

네이버 맵스와 같이 grabber를 잡아 위로 당기면 바텀 시트가 올라가게끔 처리할 수 있습니다. 나중에 구현하실 때 저에게 말씀해주세요 :) 자세히 설명해드릴게요.

@dlrjswns
Copy link
Contributor

디자인팀에게 오케이받았다는게 그래버잡고 위로 스크롤할때 컨텐츠가 안따라가는 부분인가요 ? 그게 아니라면 네이버맵스같은 앱에서는 따라가던데 그렇게하면 어떨까싶어서요 !!

진짜 말 그대로 grabber 디자인이 플럽과 다르지만, 디자인 팀에게 컨펌을 받았다는 뜻입니다!(플럽 디자인의 grabber는 애플이 제공하는 grabber에 비해 가로 길이가 넓음)

네이버 맵스와 같이 grabber를 잡아 위로 당기면 바텀 시트가 올라가게끔 처리할 수 있습니다. 나중에 구현하실 때 저에게 말씀해주세요 :) 자세히 설명해드릴게요.

오오 네 알겠습니다 👍

@WhiteHyun WhiteHyun requested a review from dlrjswns April 14, 2023 09:03
Copy link
Contributor

@soobin-k soobin-k left a comment

Choose a reason for hiding this comment

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

고생 많으셨습니다 승현님..!
sheetPresentationController 덕분에 새로운 것도 알아갑니다!!
기존 바텀 시트 문제점이 많았는데, 수정해주셔서 감사드려요☺️

private let modifyBoardView = PhotoBottomSheetListView(text: "게시글 수정", image: "editBlack")
private let reportBoardView = PhotoBottomSheetListView(text: "게시글 신고", image: "lightBeaconMain")
private let deleteBoardView = PhotoBottomSheetListView(text: "게시글 삭제", image: "trashRed", textColor: .error)
private let clipboardFixView = BottomSheetListView(text: "클립보드에 고정", image: "pinBlack")
Copy link
Contributor

Choose a reason for hiding this comment

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

이거 여러군데 사용되어 있길래 수정해볼까했는데..! 감사합니다 승현님👍🏻👍🏻

@WhiteHyun WhiteHyun merged commit 92aa633 into develop Apr 14, 2023
@WhiteHyun WhiteHyun deleted the feat/164-BottomSheet/Refactoring branch April 14, 2023 10:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🍎 ConfigureUI 화면 프로토타입 UI 구현 D+1 PR올린 다음날 까지는 리뷰 부탁드립니다 😎 Enhancement New feature or request ♻️Refactoring
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[FIX] 바텀시트 애니메이션 개선
3 participants