[Fix] #216 - 바텀 시트의 일부 기능을 수정 하였습니다. #217

thingineeer · 2023-11-25T13:46:43Z

🌱 작업한 내용

불필요한 코드 삭제
- 중복되는 기능의 코드가 존재하여 제거했습니다.
UIPanGestureRecognizer 기능 추가
- 위 아래 둘다 되는 스와이프 추가 바텀 시트 경계위로는 안되고 경계 아래에서 위 아래 조절 가능 가능
완료 버튼 누르면 한 번에 넘어가지게 수정하였습니다.
background alpha 값 자연스럽게 변경
- 시트를 다 안내리고 다시 돌아오는과정 에서 background 색이 자연스럽에 올라오지 못하는 부분은
  closure 사용하여 해결 하였습니다.
변경된 영상 업데이트 ‼️ 23/11/28 ‼️

🌱 PR Point

UIPanGestureRecognizer 기능을 추가 하였습니다.
- 바텀시트의 경계 안에서 위로 Pan 기능도 추가 하였습니다. + 23/11/28 ⭐️
바텀시트의 중복된 오토 레이아웃
BackgroundColor의 책임을 BottomSheet에서 맡게하여 코드를 작성 하였습니다.
- BackgroundColor도 모든 부분에서 자연스럽게 코드를 구현 하였습니다. + 23/11/28 ⭐️

바텀 시트의 주석은 따로 노션이나, 저희 슬랙 또는 블로그에 정리될 때까지는 모르는 부분을 위해 남겨 놓았습니다. ‼️
추후 정리가 완료된다면, 삭제할 예정이며 삭제는 제가 진행합니다 ‼‼
추가 질문 언제든 환영합니다~

기능

뒤로 가기 기능
- 백그라운드 터치시 (구현 완료)
- 아래로 PanGesture 할 시 (구현 완료)
배경색 변하는 기능
- 백그라운드 터치시 백그라운드의 alpha 값 변경
- 아래로 스와이프시 백그라운드의 alpha 값 변경
  - 유저가 다시 올릴때 다 올려지면 백그라운드의 alpha 값 복구
활용할 기능
- 저희 프로젝트에서는 Combine으로 이벤트를 넘기며 다양하게 활용할 수 있을 것 같습니다.
  기본 적인 기능 들만 구현 하였고, 추후 수정이 필요할때 마다 누구든지 수정 하면 좋겠습니다.

🍀 교훈

라이브러리가 존재한다면 있는 라이브러리 쓰는게 현명한 방법이 아닐까 생각합니다,, 🥹🥹
흑흙 😭😭

참고 @513sojin
https://github.com/SCENEE/FloatingPanel

📸 스크린샷

구현 내용
제스처로 조절 가능

RPReplay_Final1701162940.2.MOV

📮 관련 이슈

Resolved: [Fix] #216 - BottomSheet 이슈 발생 #216

기존 일반 상수에서, 시스템을 활용한 코드로 대체 했습니다.

UIPanGestureRecognizer 를 추가하므로써, 유연하게 작동하는 바텀시트가 되었습니다.

513sojin

화면 전환시 animated: false로 설정하고 바텀시트 내부에서 설정하는 방향이 좋아보입니다요

이렇게 애니메이션 넣던 코드 살리는거 어떠신지요,

UIView.animate(withDuration: 0.25, delay: 0, options: .curveEaseIn, animations: {
            self.backgroundView.alpha = 0.0
            self.view.layoutIfNeeded()
        })

저번보다 훨씬 완성도 높은 바텀시트가 됐네요 수고하셨슴당 👍🏻👍🏻
라이브러리도 있는줄 몰랐는데 ㅎ... 배워갑니다 ^~^

오토레이아웃 관련 이슈인데
코멘트 남긴 부분이랑

bottomSheetTextField.snp.makeConstraints { make in
            make.centerX.equalToSuperview() -> 이 부분 없어져도 될듯
            make.top.equalTo(contentsLabel.snp.bottom).offset(19)
            make.leading.trailing.equalToSuperview().inset(16)
            make.height.equalTo(44)
        }

여기 코드도 leading, trailing 값을 줬는데 centerX로 두번 레이아웃 잡아줄 필요 없을 것 같아요
확인 부탁드립니다 ~

513sojin · 2023-11-26T14:48:19Z

Runnect-iOS/Runnect-iOS/Global/UIComponents/CustomBottomSheetVC.swift

+        bottomSheetView.snp.remakeConstraints { make in
+            make.leading.bottom.trailing.equalToSuperview()
+            make.top.equalTo(view.snp.top).offset(topConst)
+            make.height.equalTo(bottomHeight)
+        }


버튼 눌리는지 확인하다가 발견했는데 여기쪽에서 오토레이아웃 이슈가 나는 것 같아용

leading bottom trailing top 모두 오토레이아웃 잡힌 상태에서는
top / height 중 하나만 레이아웃을 잡아줘야 할 것 같고
make.top.equalTo(view.snp.top).offset(topConst) 이 부분이 빠져도 레이아웃 잘 잡힐 것 같아요 !! 확인 부탁드립니다 ~

*217번 코드도 동일해서 여기도 같이 확인 부탁드립니다

bottomSheetView.snp.makeConstraints { make in make.leading.bottom.trailing.equalToSuperview() make.top.equalTo(view.snp.top).offset(topConst) make.height.equalTo(bottomHeight) }

본 이슈 는 레이아웃을 중복? 으로 사용되서 나오는 경고 같네요!
말씀해주신 부분 말고도 수정 완료 하였습니다!
코드리뷰 반영할때 중복되는 것도 한번더 꼼꼼하게 살펴보겠습니다.

513sojin · 2023-11-27T05:12:40Z

Runnect-iOS/Runnect-iOS/Global/UIComponents/CustomBottomSheetVC.swift

+        if let keyboardFrame: NSValue = sender.userInfo? [UIResponder.keyboardFrameEndUserInfoKey] as? NSValue {
+            let keybaordRectangle = keyboardFrame.cgRectValue
+            let keyboardHeight = keybaordRectangle.height
+
+            self.view.frame.origin.y -= (keyboardHeight - view.safeAreaInsets.bottom)
+        }


이 부분은 291이라는 숫자로 하드코딩 하는것 대신 키보드 높이 값을 계산해서 뷰의 위치를 조정하도록 수정한건가요~?

맞습니다!
이 부분은 구글링하여 참고했으며, 구글링한 코드를 약간 변형하였습니다.

다시 보니까 키보드 내리는 동작도 self.view.frame.origin.y = 0 가 아닌 올리는 동작과 비슷한 코드로 작성하는 게 더 좋을 것 같아서 수정하겠습니다~

thingineeer · 2023-11-27T07:53:54Z

화면 전환시 animated: false로 설정하고 바텀시트 내부에서 설정하는 방향이 좋아보입니다요

이렇게 애니메이션 넣던 코드 살리는거 어떠신지요,
UIView.animate(withDuration: 0.25, delay: 0, options: .curveEaseIn, animations: {
            self.backgroundView.alpha = 0.0
            self.view.layoutIfNeeded()
        }) 
저번보다 훨씬 완성도 높은 바텀시트가 됐네요 수고하셨슴당 👍🏻👍🏻 라이브러리도 있는줄 몰랐는데 ㅎ... 배워갑니다 ^~^

오토레이아웃 관련 이슈인데
코멘트 남긴 부분이랑
bottomSheetTextField.snp.makeConstraints { make in
            make.centerX.equalToSuperview() -> 이 부분 없어져도 될듯
            make.top.equalTo(contentsLabel.snp.bottom).offset(19)
            make.leading.trailing.equalToSuperview().inset(16)
            make.height.equalTo(44)
        }
여기 코드도 leading, trailing 값을 줬는데 centerX로 두번 레이아웃 잡아줄 필요 없을 것 같아요 확인 부탁드립니다 ~

@513sojin
좋은 의견, 리뷰 감사합니다 ^_^

최종 코멘트에서는 이렇게 밖에 리뷰를 달 수 없어가지고 다음부터는 해당 관련 코드에 남겨주시면 감사하겠습니다 👍👍 🔥

CourseDrawing 부분 전부 false로 해결하고 바텀 시트에서 해결하기 위해 최대한 자연스럽게 코드를 변경하였습니다.

UIPanGestureRecognizer 중에는 다양한 케이스가 있는데 ( 여기서 사용한 건, began, changed, ended ) 최대한 유저 관점에서 생각하여 코드를 작성해 보았습니다.
배경화면을 누르는 케이스, 스와이프 하는 도중 화면이 흐려지는 효과 또는 없어지는 효과는 해결됐습니다. 💪💪💪💪

하지만 스와이프를 중간에 멈추는 경우 (일정 아래로 안 가는 경우)는 해결하지 못했습니다. 🥹 PR 영상 마지막 부분 참고 ‼️

저 부분도 코드를 정리하면서 해결해 가겠습니다 😃

약간의 코드 수정이 있었습니다. 코드 선언위치, 키보드 위치 관련 코드, 뷰 배경 흐려짐 관련 코드를 수정 하였습니다.

513sojin

짧은 시간 동안 많이 개선 됐네요 !!부라보
영상보니까 마지막에 언급한 부분 빼고는 다 완성된 것 같아요 넘 고생하셨습니다 🥹👍🏻👍🏻👍🏻

513sojin · 2023-11-27T10:54:04Z

Runnect-iOS/Runnect-iOS/Global/UIComponents/CustomBottomSheetVC.swift

        case .ended:
            // translation.y 값이 75보다 작으면(작게 이동 시) 뷰의 위치를 다시 원상복구하겠다. = 즉, 다시 y=0인 지점으로 리셋
            if translation.y < 75 {
+                backgroundView.alpha = 0.65


순서 바꿔주셨는데 이유가 있나여 ?!

혹시 어떤 순서를 말씀하시는 걸까요!?

UIView.animate(withDuration: 0.25, animations: { self.view.transform = .identity }) backgroundView.alpha = 0.65

여기에서 backgroundView.alpha = 0.65 이 부분이 위로 올라왔길래 여쭤봤슴당~

아아 순서로 인한 뷰의 변화는 없고, 다 블록의 상단에 위치하여 보여주려고 가독성 위한!? 코드라고 보시면 됩니다!!

좋네용 답변 감사합니다 👍🏻

이제 백그라운드도 문제없이 작용합니다. 추가로 위로 스와이프 되는 코드도 추가하여 내리다가 다시 올릴 수 있습니다.

513sojin

처음 보는 코드가 많아서 궁금한거 질문 달아뒀어요 !
어푸룹 해두었으니 머지하시고 편할 때 댓글 남겨주십쇼
수고하셨습니다 ~

513sojin · 2023-11-28T09:22:19Z

Runnect-iOS/Runnect-iOS/Global/UIComponents/CustomBottomSheetVC.swift

+            if velocity.y > 0 && translation.y > 0 {   // 아래로만 Pan 가능한 로직 , 여기서 translation.y > 0 이거 추가 안해주면 재밌게 에니메이션이 움직인다..
                backgroundView.alpha = 0
                UIView.animate(withDuration: 0.25, animations: {
                    self.view.transform = CGAffineTransform(translationX: 0, y: translation.y)
                })
+            } else if velocity.y < 0 && translation.y > 0 {
+                // 위로도 움직이게는 하지만, 한계설정을 바텀시트의 높이로 설정, 즉 위쪽으로 하나도 못 움직이게 설정 ( translation.y > 0 ) 한계점 설정
+                UIView.animate(withDuration: 0.25, animations: {
+                    self.view.transform = CGAffineTransform(translationX: 0, y: translation.y)
+                })


재밌게 애니메이션이 움직인다라 ㅋㅋㅋㅋㅋㅋㅋㅋ
velocity.y > 0 && translation.y > 0 이게 어떤 의미인지 여쭤봅니다 .. !@

UIPanGestureRecognizer 를 아에 모른다고 하고 설명하겠습니다.

translation.y 이게 양수 라는 것은 아래로 내려 저희 벡터값이 양수가 된다는 의미 입니다.

velocity와 translation의 개념은 아래 블로그에서 참고하면 좋을 것 같아요!

https://zeddios.tistory.com/356

저 조건이 없다면 벡터값이 음수, 즉 위에서도 스와이프를 허락 한 것이니 UIPanGestureRecognizer가 작동이 되버려 원하지 않은 동작이 발생합니다.

&& translation.y > 0 이 코드를 추가 하지 않았으면 아래와 같이 노는? 느낌의 매우 이상한.. UI가 되어버립니다 ㅎㅎ
바텀시트 뿐만아니라 그 윗 부분까지도 인식이 되어 버리는거죠!!

RPReplay_Final1701164029.MP4

아하 !!! 남겨준 글(밑의 코멘트 포함)이랑 블로그 읽어보고 왔습니당
좋은 자료와 설명 감사합니다 쵝오 ‼️‼️

513sojin · 2023-11-28T09:22:59Z

Runnect-iOS/Runnect-iOS/Global/UIComponents/CustomBottomSheetVC.swift

+                    // 애니메이션이 끝나면 실행될 코드
                    self.backgroundView.alpha = 0.6
                })
+                recognizer.setTranslation(CGPoint.zero, in: bottomSheetView)


이건 무슨 코드인가요 ? 궁금해여

UIPanGestureRecognizer의 Action메소드가 호출되면, translation은 마지막으로 손가락을 이동한 위치에서부터 계산되지 않고, 손가락을 끌기 시작한 원래 장소!! (즉, 처음 PanGesture를 시작한 위치)에서 계산됩니다.

recognizer.setTranslation(CGPoint.zero, in: bottomSheetView)

그래서 우리는 위 메소드를 0.0으로 호출하여 UIPanGestureRecognizer에게 새로운 드래그 동작을 시작할 것임을 알리는 것이죠.
우리가 드래그를 이어서 한다고 해서 드래그가 한~~~번~~ 이런게 아닙니다. 늘 지속 됩니다 드래그는 ‼️
UIPanGestureRecognizer의 Action메소드는 지속적이라고 그랬죠? 계속 Action메소드를 호출하게 됩니다.
한번 Action메소드가 호출될때마다 파라미터로 보내는 view의 translation을 0,0으로 setting 해줘야만하는것이죠.

안그러면 우리가 처음 드래그를 시작한 그 위치!!!에서 부터 계속 거리를 계산할것이니까요.

이해가 안된다면 해당 개념을 참고한 블로그에서 가져온 글이 있는데 참고하면 좋을 것 같습니다.!!

https://zeddios.tistory.com/356

513sojin · 2023-11-28T10:57:13Z

Runnect-iOS/Runnect-iOS/Global/UIComponents/CustomBottomSheetVC.swift

+            if velocity.y > 0 && translation.y > 0 {   // 아래로만 Pan 가능한 로직 , 여기서 translation.y > 0 이거 추가 안해주면 재밌게 에니메이션이 움직인다..
                backgroundView.alpha = 0
                UIView.animate(withDuration: 0.25, animations: {
                    self.view.transform = CGAffineTransform(translationX: 0, y: translation.y)
                })
+            } else if velocity.y < 0 && translation.y > 0 {
+                // 위로도 움직이게는 하지만, 한계설정을 바텀시트의 높이로 설정, 즉 위쪽으로 하나도 못 움직이게 설정 ( translation.y > 0 ) 한계점 설정
+                UIView.animate(withDuration: 0.25, animations: {
+                    self.view.transform = CGAffineTransform(translationX: 0, y: translation.y)
+                })


아하 !!! 남겨준 글(밑의 코멘트 포함)이랑 블로그 읽어보고 왔습니당
좋은 자료와 설명 감사합니다 쵝오 ‼️‼️

thingineeer added 5 commits November 24, 2023 16:54

[Fix] Runnect#216 - 바텀 시트 keyboardWillShow 코드 수정

642e452

기존 일반 상수에서, 시스템을 활용한 코드로 대체 했습니다.

[Chore] Runnect#216 - 필요없는 코드 제거

fc4f8ba

[Feat] Runnect#216 - 바텀 시트 PanGesture 추가

24b650f

UIPanGestureRecognizer 를 추가하므로써, 유연하게 작동하는 바텀시트가 되었습니다.

[Chore] Runnect#216 - 백그라운드 색 임시 제거

6efaaf4

[Chore] Runnect#216 - 불필요한 코드, 주석 제거

ff391f4

thingineeer added Chore 그 외의 잡일/버전 코드 수정, 패키지 구조 변경, 파일 이동, 파일 이름 변경, 레이아웃 조정 등 Del 쓸모없는 코드, 주석 삭제 Feat 새로운 기능 구현 labels Nov 25, 2023

thingineeer requested a review from 513sojin November 25, 2023 13:46

thingineeer self-assigned this Nov 25, 2023

thingineeer changed the title ~~[Feat] - #216 바텀 시트에 Pan 기능을 추가 하였습니다.~~ [Fix] - #216 바텀 시트에 Pan 기능을 추가 하였습니다. Nov 25, 2023

thingineeer changed the title ~~[Fix] - #216 바텀 시트에 Pan 기능을 추가 하였습니다.~~ [Fix] - #216 바텀 시트의 일부 기능을 수정 하였습니다. Nov 25, 2023

thingineeer added Fix and removed Feat 새로운 기능 구현 labels Nov 25, 2023

thingineeer changed the title ~~[Fix] - #216 바텀 시트의 일부 기능을 수정 하였습니다.~~ [Fix] #216 - 바텀 시트의 일부 기능을 수정 하였습니다. Nov 26, 2023

513sojin reviewed Nov 27, 2023

View reviewed changes

thingineeer added 3 commits November 27, 2023 16:55

[Fix] Runnect#216 - 필요 없는 레이아웃 제거

cc29518

[Feat] Runnect#216 - 코드 리뷰 반영

ccd9041

약간의 코드 수정이 있었습니다. 코드 선언위치, 키보드 위치 관련 코드, 뷰 배경 흐려짐 관련 코드를 수정 하였습니다.

[Chore] Runnect#216 - panGesture private 선언

ca324ba

513sojin approved these changes Nov 27, 2023

View reviewed changes

thingineeer added 2 commits November 28, 2023 18:09

[Style] Runnect#186 - background Alpha값 미세 조정

2d07c79

[Feat] Runnect#216 - 바텀시트 최종 작업

8651274

이제 백그라운드도 문제없이 작용합니다. 추가로 위로 스와이프 되는 코드도 추가하여 내리다가 다시 올릴 수 있습니다.

513sojin approved these changes Nov 28, 2023

View reviewed changes

thingineeer merged commit 9c7c4d4 into Runnect:develop Nov 28, 2023

thingineeer deleted the #216---바텀-시트-오류-해결 branch November 28, 2023 17:15

thingineeer added the 명진😼 label Jan 13, 2024

[Fix] #216 - 바텀 시트의 일부 기능을 수정 하였습니다. #217

[Fix] #216 - 바텀 시트의 일부 기능을 수정 하였습니다. #217

Uh oh!

Conversation

thingineeer commented Nov 25, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🌱 작업한 내용

🌱 PR Point

기능

🍀 교훈

📸 스크린샷

📮 관련 이슈

Uh oh!

513sojin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thingineeer commented Nov 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

513sojin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

513sojin Nov 27, 2023 • edited by thingineeer Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

513sojin left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thingineeer Nov 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thingineeer Nov 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

thingineeer commented Nov 25, 2023 •

edited

Loading

thingineeer commented Nov 27, 2023 •

edited

Loading

513sojin Nov 27, 2023 •

edited by thingineeer

Loading

513sojin left a comment •

edited

Loading

thingineeer Nov 28, 2023 •

edited

Loading

thingineeer Nov 28, 2023 •

edited

Loading