BusinessProfileViewController 개발일지
🌿 구현해야하는 UI 🌿
🌿 환경 및 고려사항 🌿
iOS 13.0 이상
1. 최상단에 위의 이미지가 나타날 것
2. 네이버 웹툰처럼 헤더를 클릭하거나, 셀을 좌우로 스와이프 해서 싱크를 맞출 것
3. 셀은 4개고 서로 다른 UI가 보여질 것
4. 작품 보기를 통해 아래로 쭉 내렸다가, 다른 헤더를 클릭하고 돌아왔을 때 스크롤이 유지될 것
5. 위의 헤더가 상단에 붙을 것
🌿 구현 아이디어 (최종) 🌿
색으로 컬렉션 뷰를 구분함.
컴포지셔널 레이아웃을 활용하여 검정색 컬렉션 뷰의 section1을 4개의 셀로 구성하여 좌우 스크롤로 변경.
그리고 각 셀마다 다른 UI를 보여줘야 하므로 각 셀 내부에 IndexPath에 맞게 컬렉션 뷰를 집어 넣는 전략
ReactorKit + CompositinalLayout이 가장 주요한 부분이며,
이벤트를 처리하는데 있어서는 multicast 패턴을 적용 (ReactorKit의 transform 사용 X)
-> 이유는 하단에 따로 기술
CompositinalLayout을 도입한 이유는 section0에 애니메이션 등 UI등 구현해야하는데, 이게 가장 편해 보였음
[구현 아이디어를 최종 선택하기까지 고민했던 것들]
[고려사항 1]
section1 자리에 하나의 셀이 위치하고 탭바를 넣은 후 탭바를 히든 처리
헤더뷰를 구성한 후, 헤더뷰 클릭시 탭바의 이벤트를 전달하여 뷰를 교체하는 방식
✅ 장점
손쉽게 구현 가능할 것 같았으며, 스크롤이 그대로 유지될 수 있고, 탭바에 뷰를 넣는 방식이라 전체적으로 깔끔하게 구성 가능
또한 이벤트 처리가 매우 간단할 것 같음
🚨 사용하지 못한 이유
네이버 웹툰처럼 헤더뷰를 클릭하거나 스와이프 시, 뒤의 뷰가 보여야 하는데 애니메이션을 적용해서 구현하기가 매우 어려워 보임.
[고려사항 2]
최종 아이디어와 동일하나 multicast 패턴대신 mediator 패턴 혹은 ReactorKit에서 제공하는 transform 등 여러가지 경우의 수를 고려
✅ 처리해야 하는 이벤트
1. 헤더뷰를 클릭했을 시, 셀의 indexPath 변화
2. 셀이 스와이프 될 시, 헤더뷰의 상태 변화
3. section1 cell 내에 들어있는 색이 있는 collectionView의 스크롤의 이벤트를 통해 검정색 컬렉션 뷰의 section0을 위로 밀어올리기 위한 이벤트
🚨 ReactorKit에서 제공하는 transform를 사용하지 않은 이유
헤더뷰와 셀이 서로가 서로에게 이벤트를 전달해야 하기 때문에 서로의 리액터를 알고 있어야 해서 구조적으로 단방향이 아니라고 판단되어 다른 방법 고민
🚨 mediator를 사용하지 않은 이유
처음에는 이를 통해 시도. headerView의 UIButton을 mediator를 사용할 수 있게 래핑하고, 도전했으나, 여러 이벤트를 분기하여 처리하는 것이 매우 까다로웠음
🚨 notificationCenter를 사용하지 않은 이유
구현에서 가장 간단할 것으로 생각되나, 이전 사용에서 점차 유지보수가 힘들어지는 문제가 있어서 추후 확장성을 고려하여 패스
✅ 최종적으로 multicast를 선택한 이유
간단해 보이지만 구현해야할 것들이 너무 많음. 또한 서로 다른 개발자가 색이 있는 컬렉션 뷰 하나씩을 담당한다고 가정했을 시, 이 이벤트들을 효과적으로 처리할 수 있는 무언가가 또 필요함.
또한 추후에 확장을 하면서 서로에게 알려야 하는 이벤트가 발생한다면 이 방법이 가장 효율적이라고 판단.
✅ 이렇게 하면 더욱 좋아요.
현재는 multicast pattern을 이용해서 이벤트를 전달하고 정상적으로 기능을 구현하는데 초점을 맞추고 있으나, 추후에는 Rx Extension을 활용해 더 Rx코드로 묶으면 어떨까 싶음.
🌿 UI 구현된 예시 🌿
해당 UI는 연습을 위해 작성된 UI입니다.
'Archive > 타투(proejct-ios)' 카테고리의 다른 글
| [BlackCat] FilterView 개발일지 (CI - Github Action) (1) | 2022.10.31 |
|---|