[Feat] #668 - 불꽃 결정 로드맵 collection view 페이징 구현

[hyun99999]

🔥Pull requests

⛳️ 작업한 브랜치

• feature/#668

👷 작업한 내용

• UpgradeFlaekDialouge : 불꽃 결정 로드맵 뷰를 스토리보드로 구현하였습니다.
• 중앙 flake 의 경우 120 사이즈로 통일하고, 가로 화면에 따라서 line spacing(collectionView.frame.width / 10)을 주었습니다.
• 준호가 이전에 보관함 짤 때 사용한 케러셀 레이아웃을 조금 수정했습니다.(참고 - https://lsh424.tistory.com/54)
• 그라데이션을 재활용할 수 있게 수정했습니다.
• UI components 이름을(levelTitle, subtitle)수정하였습니다.
• 페이징 간격이 좁아서 페이징 느낌이 잘 안들더라구요 그래서 햅틱을 추가해서 다이얼의 느낌을 내보았습니다! 훨씬 괜찮은거 같아서 한번 봐주십사합니다!

🚨참고 사항

• https://stackoverflow.com/questions/51254261/when-are-subviews-completely-correctly-laid-out
• https://medium.com/@marcosantadev/calayer-and-auto-layout-with-swift-21b2d2b8b9d1

위의 참고자료를 통해서 코드베이스로 작성할 때 layer 의 frame 을 정해주는 시점을 찾고자.. 했는데 그러지 못해서 스토리보드로 작성하였습니당 다들 저렇게 하면 된다던디이..ㅜ

커밋 기록에서.. 코드베이스로 작성한 히스토리가 있으니.. 혹시나 아시는 분은 코드 한번 봐주셔도 감사하겠습니다아~ viewDidLayoutSubviews 를 오버라이드해서 해보려했는데 잘안됐어여 ㅜ

레이아웃

• 뷰의 요구사항이 텍스트부분까지 선택해도 스크롤되기를 바라셔서 위와 같이 레이아웃을 짜보았습니다. 그래서 셀의 상단쪽에 이미지가 들어가기 때문에 아래와 같은 케러셀이 중앙을 중심으로 수축하는 효과가 나타나지 않습니다. 그래도 cell 의 content view 의 centerY 를 기준으로 이미지의 위치를 잡아 최대한 비슷한 효과가 나타나도록 하였습니다.

• isUserInteractionEnabled 프로퍼티를 찾아보니 false 로 설정하게 되면 뷰에 대한 터치, 프레스, 키보드, 포커스 이벤트가 무시되고 이벤트 큐에서 사라진다고 합니당! 알려주셔서 감사합니당 💫

📸 스크린샷

기능	스크린샷
D-65
D-22(값만 변경함)

📟 관련 이슈

• Resolved: #668

[hyun99999]

204f2f2 커밋에서 아래와 같이 코드를 추가하고 실행했더니 의도한대로 index에 맞게 잘 이동해 있었습니다! flowLayout 내부에서 조정하는 방식은 viewDidLoad 시점에서 컬렉션뷰가 메모리에 올라갈때라서 scrollToItem이 먹지 않는? 것 같다는..생각입니다...

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        setScroll()
    }

    private func setScroll() {
        self.collectionView.scrollToItem(at: .init(row: 2, section: 0), at: .centeredHorizontally, animated: false)
    }

viewDidAppear 을 사용하면 아래처럼 뷰가 그려진 다음에 이동해서 이게 부자연스러 보여서 collectionview flowlayout 에서 구현해두었습니당!

[L-j-h-c]

204f2f2 커밋에서 아래와 같이 코드를 추가하고 실행했더니 의도한대로 index에 맞게 잘 이동해 있었습니다! flowLayout 내부에서 조정하는 방식은 viewDidLoad 시점에서 컬렉션뷰가 메모리에 올라갈때라서 scrollToItem이 먹지 않는? 것 같다는..생각입니다...

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        setScroll()
    }

    private func setScroll() {
        self.collectionView.scrollToItem(at: .init(row: 2, section: 0), at: .centeredHorizontally, animated: false)
    }

viewDidAppear 을 사용하면 아래처럼 뷰가 그려진 다음에 이동해서 이게 부자연스러 보여서 collectionview flowlayout 에서 구현해두었습니당!

허걱 그렇네용.. viewDidAppear에서 하면 안되는 것 같아서 위처럼 해보니까 부자연스러움은 없는데 제법 편법같아서 찝찝하네여...

[hyun99999]

허걱 그렇네용.. viewDidAppear에서 하면 안되는 것 같아서 위처럼 해보니까 부자연스러움은 없는데 제법 편법같아서 찝찝하네여...

음음 아하 그러면 기존 스보 + collectionview flowlayout구현대로 하겠습니당 🧑‍🏭

[hyun99999]

다음과 같이 안에 이미지가 안바뀌어있어서 제 컴에서는 정상적으로 인식되는데 또 안되는 경우도 있는 듯해여! 그래서 여기 바꿔주었습니당 꼼꼼히 확인해주셔서 감사해여~

[hyun99999]

고생하셨슴니다 .. viewDidLayoutSubviews 이게 왜 안될까 .. 찾아보면서 이것저것 다 해봤는디 왜 안될까 ...... 모르겄네요 .. 왤까 ....

첨부한 링크에서는 서브뷰의 레이어일 때는 순서가 뒤로 밀려서 해결하려면 뷰컨이 소유하면된다던데 그래도 안되던딩.. 그렇더라구여

[hyun99999]

@L-j-h-c @yangsubinn 지금 기획적으로 첫 번째 팝업이 뜨는지 여부를 다시 체크 중이라서 이부분까지 추가해서 머지하겠습니당~

[hyun99999]

@L-j-h-c @yangsubinn

지금 기획적으로 첫 번째 팝업이 뜨는지 여부를 다시 체크 중이라서 이부분까지 추가해서 머지하겠습니당~

뜨도록 해서 수정하였습니당