♻️ 마이페이지 리스트뷰 리펙토링

[thoonk]

📌 배경

close #294

내용

• 기존 UITableView DataSource 에서 Diffable DataSource 로 변경 작업
• 기존 2개(드랍, 좋아요)의 UITableView(Hidden 처리)를 1개의 UICollectionView를 이용한 개선 작업
• Compositional Layout 적용 -> UITableView 변경으로 제거
• 콘텐츠 수에 따른 CollectionView Height 업데이트를 통한 전체 스크롤뷰 높이 조정 (기존 ScrollView 안에 2개의 TableView가 있는 상태) -> ScrollView 안 CollectionView contentSize 업데이트 이슈로 인해 UITableView로 변경(Diffable 로직 유지)

테스트 방법 (optional)

• 개발 서버쪽 레벨 축하 팝업 이슈가 있어 해당 이슈 계속 뜬다면, MainViewModel의 showFirstPopUpInfomation() 주석 처리 후 테스트 진행

스크린샷 (optional)

[wendoei]

tableView 로 바꾸기 직전 커밋(#294: 마이페이지 초기 진입할 때 2번 호출되는 이슈 처리 29cc826)에서 테스트 해보니

1. (드랍, 좋아요 중)한 쪽 탭에 데이터가 하나도 없을 경우(0개인경우)에 0개인 탭눌렀다가 돌아오면 안보이는 현상 데이터가 없을 때에도 최소 높이 1을 가지도록 하면 어떨까요 허허;; 동작은 합니다. 정확한 원인은 모르겠지만 0으로 높이를 업데이트하는 순간 contentView 를 날려버리는건지 데이터를 넣어도 contentSize 가 0을 리턴하네요 ,,

   func updateCollectionViewHeight() {
    DispatchQueue.main.async { [weak self] in
        guard let self else { return }
        let contentHeight = self.musicListCollectionView.contentSize.height
        self.collectionViewHeightConstraint?.update(offset: max(contentHeight, 1))
    }
   }

2. 스크롤 다 내렸을 때 하단 부분 짤리는 현상 말씀하신대로 타이밍 이슈가 있어서 최종 contentSize height 를 정확하게 반영하지 못하는 이슈가 있네요! viewDidLayoutSubviews 에서 불러주도록 하면 해결은 되는데 탭 이동할때마다 6번정도 불리는 단점은 있습니다;

   
   output.myMusicsSections
     .bind(with: self) { owner, sections in
    // owner.updateCollectionViewHeight()
    owner.displayMusicList(sections)
   }

override func viewDidLayoutSubviews() { super.viewDidLayoutSubviews() updateCollectionViewHeight() }

결론은 말씀하신대로 전체를 collectionView 로 바꾸는게 가장 좋은 방법일 거 같아요..!
나중에 들어갈 페이징을 대비하기에도 그렇고, 현재는 모든 셀을 첫 로드에 다 그리기 때문에 성능적으로도 이슈가 있을 듯 합니다~!
추후에 시간잡아서 개선해보면 좋을거같습니다!

[thoonk]

@thoonk 고생하셨습니다 :) 혹시 collectionView 사용 시 업데이트 이슈 원인 알아내신 거 있으실까요??

많이 찾아보고 여러 시도를 해봤지만 정확한 이슈 원인 파악은 하지 못 했습니다ㅠ UIScrollView의 childView로 CollectionView가 이용되는데 서로 충돌되는 점을 파고 들면 원인이 나오지 않을까 합니다..!

[thoonk]

tableView 로 바꾸기 직전 커밋(#294: 마이페이지 초기 진입할 때 2번 호출되는 이슈 처리 29cc826)에서 테스트 해보니

1. (드랍, 좋아요 중)한 쪽 탭에 데이터가 하나도 없을 경우(0개인경우)에 0개인 탭눌렀다가 돌아오면 안보이는 현상 데이터가 없을 때에도 최소 높이 1을 가지도록 하면 어떨까요 허허;; 동작은 합니다. 정확한 원인은 모르겠지만 0으로 높이를 업데이트하는 순간 contentView 를 날려버리는건지 데이터를 넣어도 contentSize 가 0을 리턴하네요 ,,

func updateCollectionViewHeight() {
     DispatchQueue.main.async { [weak self] in
         guard let self else { return }
         let contentHeight = self.musicListCollectionView.contentSize.height
         self.collectionViewHeightConstraint?.update(offset: max(contentHeight, 1))
     }
}

와..!! 지혜님 다 해서 확인해주시느라 고생 많으셨습니다ㅎㅎ 1번 이슈 해결 방법은 안 해본 시도였는데 공유 감사합니다..

2. 스크롤 다 내렸을 때 하단 부분 짤리는 현상 말씀하신대로 타이밍 이슈가 있어서 최종 contentSize height 를 정확하게 반영하지 못하는 이슈가 있네요! viewDidLayoutSubviews 에서 불러주도록 하면 해결은 되는데 탭 이동할때마다 6번정도 불리는 단점은 있습니다;

output.myMusicsSections
      .bind(with: self) { owner, sections in
     // owner.updateCollectionViewHeight()
     owner.displayMusicList(sections)
}

override func viewDidLayoutSubviews() {
     super.viewDidLayoutSubviews()
     updateCollectionViewHeight()
}

결론은 말씀하신대로 전체를 collectionView 로 바꾸는게 가장 좋은 방법일 거 같아요..! 나중에 들어갈 페이징을 대비하기에도 그렇고, 현재는 모든 셀을 첫 로드에 다 그리기 때문에 성능적으로도 이슈가 있을 듯 합니다~! 추후에 시간잡아서 개선해보면 좋을거같습니다!

2번 이슈도 같은 방법으로 시도는 했었는데 호출을 너무 많이 해서 넘겼습니다.. ScrollView의 childView로 쓰는 것보단 향후 유지보수를 생각했을 때도 CollectionView로만 구성하는게 좋을거 같습니다! 현재 단계에서는 기존 ScrollView의 UITableView에 DiffableDataSource를 적용한 것으로 마무리하겠습니다. 다시 한번 같이 확인해주셔서 감사합니다~~