[배줄이] 개발일지 Day 3

휘·2024년 3월 15일

개발 진행 상황

메인 페이지 CollectionView Compositional Layout 구현

공수산정 결과

구분	예상 작업 시간	실제 작업 시간
메인 페이지 UI	3시간	5시간

공수산정에서 차이가 발생한 이유

메인페이지의 CollectionView Compositional Layout에서 첫번째 section의 cell에 calendar가 들어간다. 나는 scope를 week로 설정해주었는데, UI가 잘려보여서 이걸 해결하는데 오래 걸렸다.

기술적으로 어려웠던 부분 or 이슈

문제 1. FSCalendar의 scope를 week로 했을 때 UI 잘림

나는 다음과 같은 UI 때문에 달력의 scope를 week로 설정해주고, header의 높이를 0으로 잡아주었다.

근데, 실행해보니까 아래처럼 잘려보였다. 분명 높이도 충분히 줬는데도 불구하고...

예상하건데 FSCalendar Library에서 날짜를 표시하는 부분의 최소 높이 같은 게 설정되어 있는 것 같았다.
결론적으로는 방법 2를 통해 문제를 해결했다.

시도했던 방법 1. FSCalendar 내부 모듈 파일 코드 수정하기
-> 모듈 파일을 수정하면 다른 사람이 내 앱을 사용하기 어렵다는 얘기를 들어서 이 방법은 넘겼다.

시도했던 방법 2. Calendar의 경계(bounds)를 변경하기
-> FSCalendar에서 다음과 같은 함수를 제공해주는데, 이걸 이용했다.

func calendar(_ calendar: FSCalendar?, boundingRectWillChange bounds: CGRect, animated: Bool) {
    calendar?.frame = CGRect(origin: calendar?.frame.origin ?? CGPoint.zero, size: bounds.size)
    // Do other updates here
}

이 함수는 보통 캘린더의 크기가 동적으로 변화해야 하는 경우에 사용한다. 예를 들면 scope를 월에서 주로 바꾼다던가.. 그렇지만 FSCalendar 라이브러리에서 scope가 주일 때 고정 높이값을 업데이트 해줄 필요가 있으므로 사용했다.

일단 calendar의 높이는, 처음에 문제 없도록 150으로 크게 잡아주었다.

calendar.snp.makeConstraints {
    $0.top.leading.trailing.equalToSuperview()
    $0.height.equalTo(150)
}

그다음에 SnapKit의 remakeConstraints를 이용해서 다음과 같이 코드를 작성해주면, 원하던 대로 UI가 그려진다.

func calendar(_ calendar: FSCalendar, boundingRectWillChange bounds: CGRect, animated: Bool) {
    calendar.snp.remakeConstraints {
        $0.top.leading.trailing.equalTo(view.safeAreaLayoutGuide)
        $0.height.equalTo(bounds.height)
    }
    self.view.layoutIfNeeded()
}