[Feat] #43 - CourseStorageVC UI 구현

[lsj8706]

🌱 작업한 내용

• 보관함 뷰에 필요한 ViewPager(PagingView) 구현
• ViewPager의 Indicator Bar에 애니메이션 부여
• CourseListCVC 구현
• emptyView를 콤포넌트로 구현

🌱 PR Point

• 보관함처럼 생긴 뷰를 다른 앱을 사용하면서 많이 보셨을 거 같아요! 이번에 구현 했으니 궁금하면 제가 쓴 코드를 잘 읽어보세요~!
• 엠티 뷰를 콤포넌트로 따로 빼서 구현하였고 엠티 뷰의 터치 액션을 받아오기 위해 Protocol-delegate 패턴을 사용했습니다. 컴바인으로도 가능하지만 여러분들이 더 친숙하고 훨씬 중요한 것이 Protocol-delegate 패턴이기 때문에 잘 공부하고 넘어가는 것이 좋아요~!

CourseListCVC를 구현하였습니다

• 해당 Cell은 다른 뷰에서도 계속 중복적으로 사용되고 있습니다! 하트 버튼의 유무라던지 조금씩 다르지만 이번에 싹 묶어서 구현을 했기 때문에 Cell의 Type만 지정하면 자동으로 UI가 바뀌도록 했습니다. 아래 코드를 주석 중심으로 봐주세요!
• CourseListCVC의 Type

@frozen
enum CourseListCVCType {
    case title   // 이미지 + 제목
    case titleWithLocation // 이미지 + 제목 + 위치라벨
    case all // 이미지 + 제목 + 위치라벨 + 하트 버튼

   // cell 높이 계산의 편의성을 위해 type과 넓이를 입력하면 높이를 리턴하는 함수를 만들었습니다.
    static func getCellHeight(type: CourseListCVCType, cellWidth: CGFloat) -> CGFloat {
            let imageHeight = cellWidth * (124/174)
            switch type {
            case .title:
                return imageHeight + 24
            case .titleWithLocation, .all:
                return imageHeight + 40
            }
        }
}

• CollectionView에서의 사용법

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: CourseListCVC.className,
                                                        for: indexPath)
            as? CourseListCVC else { return UICollectionViewCell() }
    cell.setCellType(type: .all)   // 이렇게 cell의 타입을 지정 (하트 버튼까지 필요한 상황이었기에 .all로 지정)
    return cell
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let cellWidth = (UIScreen.main.bounds.width - (self.itemSpacing + 2*self.collectionViewInset.left)) / 2
    let cellHeight = CourseListCVCType.getCellHeight(type: .all, cellWidth: cellWidth) // 이렇게 cell 타입과 넓이를 넣으면 적절한 높이를 쉽게 구할 수 있습니다. (기기 크기에 맞는 높이값)
    
    return CGSize(width: cellWidth, height: cellHeight)
}

📸 스크린샷

구현 내용	스크린샷
보관함 뷰
보관함 뷰 with EmptyView

📮 관련 이슈

• Resolved: [Feat] CourseStorageVC 구현 #43

[dlwogus0128]

코드가 너무 어려워요... 리뷰가 어려워요.. 리드 멋지다!!!!!!!!!

[dlwogus0128]

.scaleToFill을 하면 모가 다른가요?

[lsj8706]

https://sujinnaljin.medium.com/ios-%EC%82%AC%EC%A7%84%EC%9C%BC%EB%A1%9C-%EB%B3%B4%EB%8A%94-aspectfit-aspectfit-scaletofill-f41470d0191f
이거 한번 읽어보세요~! ImageView에는 다양한 contentMode가 있습니다!

[dlwogus0128]

이게 내가 그린 코스 / 스크랩 코스 전환하는 부분인가요?

[lsj8706]

맞습니다..! 상단의 버튼을 클릭했을 때 내가 그린 코스/ 스크랩 코스가 자연스럽게 스크롤하면서 전환되도록 했습니다!