🔥 구현한 뷰

• 커리큘럼뷰

• 주차별 리스트뷰

저는 커리큘럼 메인뷰(왼쪽 사진)와 주차별 리스트뷰(오른쪽 사진)를 맡았습니다.

1. 커리큘럼뷰

커리큘럼뷰를 보면 API 네트워크 통신을 해서 유저의 주차, 일수, D-Day, 로띠(LottieAnimationView)의 progress 정보를 받아옵니다. 그리고 로띠 아래에 테이블 뷰가 있습니다. 그래서 처음 커리큘럼 뷰에 들어 왔을 때, 유저 주차에 해당하는 cell을 가장 상단에 보여주고 안에 있는 내용을 펼쳐서 보여주어야 했습니다. 받아온 유저의 해당 주차에 따라 scrollToRow를 사용해 상단에 위치하도록 했습니다. 또한 cell이 펼쳐져 있는 것을 구현하기 위해 cell의 정보들을 stackView안에 넣어서 stackView를 isHidden 시키면서 expandable cell을 구현했습니다. 또한 펼쳐져 있는 cell의 주차라벨을 빨갛게 해주었습니다. 또한 펼쳤을 때 이미지 위에 있는 버튼을 통해 ‘주차별 리스트’뷰로 이동시켰습니다. cell안에 있어서 delegate를 사용했습니다.

1. 주차별 리스트 뷰

커리큘럼뷰에서 원하는 주차를 선택해서 주차별 리스트뷰로 넘어옵니다. 이 뷰는 전체화면이 양 옆으로 넘어가야 되기 때문에 컬렉션뷰 안에 테이블뷰를 넣는 방식으로 했습니다. 헤더뷰를 따로 넣지 않고 헤더뷰를 row0에 넣는 방식으로 구현했습니다. 이 뷰에서는 API로 아티클 정보들을 가져와 테이블뷰 cell에 뿌려주었습니다. 또한 API 연결해서 북마크 버튼 기능도 구현했습니다. 또한 태그값들이 배열로 들어와서 각 태그 중간중간에 join으로 점을 넣어주었습니다. 또한 처음 주차별 리스트뷰에 처음 들어 왔을 때, 커리큘럼뷰에서 유저가 선택한 주차의 item으로 바로 넘어가야되기 때문에 scrollToItem을 사용했습니다.

🔥 Trouble Shooting

1. 기기 대응을 위해 snapkit을 사용할 때, multipliedBy 문제

이미지의 크기에 대한 기기 대응을 위해 가로,세로 비율을 계산할 때 multipliedBy안에서 연산이 되지 않아서 따로 빼주어서 계산해줬습니다.

private enum Size {
        static let contentImageView: CGFloat = 120 / 335
    }

contentImageView.snp.makeConstraints{
            $0.height.equalTo(contentImageView.snp.width).multipliedBy(Size.contentImageView)
        }

1. 커리큘럼뷰 Expandable Cell

func toggleButtonTapped(indexPath: IndexPath?) {
        self.isFirstPresented = false
        guard let indexPath  else { return }
        
        let previousWeekDatas = curriculumViewDatas[indexPath.section].weekDatas[indexPath.row]
        
        curriculumViewDatas[indexPath.section].weekDatas[indexPath.row].isExpanded = !previousWeekDatas.isExpanded
        curriculumTableView.reloadRows(at: [indexPath], with: .automatic)
    }

버튼이 cell에 있기 때문에 delegate로 빼주었습니다. 그리고 cell을 만들 때, indexPath를 넘겨주고, 토글버튼을 눌렀을 때, 그 해당 버튼이 있는 indexPAth를 같이 넘겨주었습니다. 또한 expand된 row를 리로드해주었습니다.

1. scrollToRow 구현

func scrollToUserWeek() {
        
        guard let userInfoData else { return }
        
        let userWeek = userInfoData.userWeekInfo
        
        if userWeek == 40 {
            let weekPerMonth = 4
            let desireSection = (userWeek / weekPerMonth) - 2
            let desireRow = (userWeek % weekPerMonth)
            let indexPath = IndexPath(row: desireRow, section: desireSection)
            
            curriculumViewDatas[desireSection].weekDatas[desireRow+4].isExpanded = true
            self.curriculumTableView.reloadData()
            self.curriculumTableView.scrollToRow(at: indexPath, at: .top, animated: false)
        } else {
            let weekPerMonth = 4
            let desireSection = (userWeek / weekPerMonth) - 1
            let desireRow = (userWeek % weekPerMonth)
            let indexPath = IndexPath(row: desireRow, section: desireSection)
            
            curriculumViewDatas[desireSection].weekDatas[desireRow].isExpanded = true
            self.curriculumTableView.reloadData()
            self.curriculumTableView.scrollToRow(at: indexPath, at: .top, animated: false)
        }
    }

계산된 유저의 주차로 어느 row로 가야될 지 알려줍니다. 우선 매달 4개의 주가 있어서 weekPerMonth를 4로 고정했고, desireSection은 받아온 유저의 주차 / 4를 한 후 -1을 해주었습니다. 그리고 Row는 나눈 값의 나머지로 가도록 구현했습니다. 근데 10개월 section에는 5개의 row가 있습니다. 즉 주차가 5개 있습니다. 그래서 40일때만 따로 분기처리를 해주었습니다. 하지만 이 메서들 viewDidLoad에서 실행시켰을 때, 제대로 scrollToRow가 실행되지 않았습니다. 데이터를 API로 받아오니 scrollToRow를 호출할 때는 데이터가 받아와지기 전(데이터를 받아오는데 시간이 걸리기 때문)이기 때문에 viewDidLoad에서 실행이 제대로 되지 않았던 것이였습니다. 그래서 viewDidLayoutSubviews에서 scrollToRow 메서드를 실행했습니다.