[두리번] 프로젝트 4~8일차 회고

한상진·2021년 7월 5일
0

두리번

목록 보기
3/8



🛫FSCalendar 연습

테이블뷰+컬렉션뷰로 캘린더를 만들던 도전을 멈춰둔 후 FSCalendar 라이브러리를 사용해봤습니다.
라이브러리 덕분에 이전에 해결을 못했던 텍스트 변경문제, 셀 연결문제를 해결할 수 있었습니다.

시작일과 종료일을 선택하면 버튼의 텍스트를 변경할 수 있었고, 시작-종료 사이의 셀들의 컬러를 변경할 수 있었습니다.

이제 캘린더를 저희 디자이너분들의 디자인대로 예쁘게 수정해주는 일만 남았는데..
FSCalendar 깃헙 문서에 사용법이 자세히 안나와있더라구요..
사용법을 알아야 이것저것 바꿀텐데 레퍼런스들을 많이 찾아봐도 디자인 자체가 커스터마이징이 많이 필요한 부분이라 해결할 수 없었습니다 ㅠㅠ

그래서 혜진누나에게 도움을 요청했더니 FSCalendar 라이브러리 자체를 Object-C를 사용해 수정해서 저희 두리번만의 라이브러리를 만들어주셨습니다... 진짜 너무 깜짝 놀랬고 신기했습니다.

디자인 커스터마이징을 전부 적용한 라이브러리를 만들어주셨고, 코드 예시와 함께 위와 같은 라이브러리 적용 예시까지 첨부해주셨습니다..
저번과 마찬가지로 나도 빨리 잘해지고 싶다는 생각을 수십 수백번 하게 되었습니다 ㅠㅠ

이전에 잘못 구성한 코드들을 수정하고, 만들어주신 라이브러리를 바탕으로 제대로 된 캘린더 뷰를 완성할 예정입니다!

🛫여행 추가 뷰 구현

위의 캘린더와 연결되는 뷰인 '여행 추가 뷰'를 완성했습니다.
이 뷰에서 '날짜 추가하기'버튼을 클릭하면 위의 캘린더 뷰로 넘어가는 구조입니다.

어려웠던 점
1. 뷰 상단과 하단에 특정 요소를 고정시키는 것
2. TextField가 채워지고, '대표 사진'이 선택되었을 때 버튼을 활성화시키는 것
3. CollectionViewCell이 클릭되면 Cell 이미지 수정하기

🛬상단, 하단에 특정 요소 고정해두기

뷰가 스크롤 되어도 상단의 '뒤로가기' 버튼과 하단의 버튼이 고정되어있어야 했습니다.

저는 처음에 ScrollView에 모든 요소들을 넣어두고, 뷰가 스크롤 될 때마다 상단과 하단 아이템의 y값을 같이 변경해주는 식으로 작업을 했는데 실패했습니다.
테이블뷰의 헤더, 푸터같은 개념을 생각했던 건데, 그럴 필요 없이 아주 간단한 문제였습니다.
그냥 상단 하단의 아이템들과 스크롤뷰를 다른 계층으로 두게 되면, 스크롤이 되어도 아이템들은 그대로 있게 되는 것이었습니다.
너무 어렵게 생각했던게 문제였던 것 같습니다.

🛬버튼 활성화 시키기

'새로운 여행 시작하기' 버튼은 TextField가 다 채워지고, '대표 사진'이 선택 되었을 때 활성화되게 설정해야했습니다.

저는 처음에 단순히 뷰의 생명주기만 생각하고 뷰 컨트롤러가 변경되지 않는 상황에서 어떻게 처리 해야할지 답을 못찾았습니다.

태현이형에게 질문하니, Observer 패턴을 활용해서 이벤트를 관찰하는 방법으로 해결할 수 있다는 피드백을 받았습니다.
세미나시간에 배웠던 NotificationCenter-Observer를 활용하면 해결할 수 있는 것이었습니다.
그리고 이전에 공부했던 RxSwift를 이 작업에 적용하면 편하게 해결할 수 있다고 합니다.

func notificationSet() {
	NotificationCenter.default.addObserver(self, selector: #selector(checking), name: UITextField.textDidChangeNotification, object: nil)
 }

TextField 자체가 notification을 갖고 있다는 것을 처음 알게 되었고, 프로토콜도 갖고 있다는 것을 알게 되었습니다.
TextField의 값이 변경될 때 마다 관찰을 할 수 있고, 이를 활용해서 값이 공백이 아닌 경우를 판별할 수 있었습니다.

🛬CollectionViewCell 클릭 이벤트

'대표 사진'이 선택되면 셀의 이미지를 수정해줘야했습니다.
처음엔 collectionView의 프로토콜 중 didSelectItemAt 메소드를 사용하면 될 줄 알았는데, ViewController 클래스에서 CollectionViewCell 클래스로 접근해서 수정할 수가 없어 당황스러웠습니다.
이건 구글링을 통해 해결했는데, CollectionViewCell 클래스에서도 isSelect를 override 해서 사용할 수 있다는 것을 알게 됐습니다.

override var isSelected: Bool {
	if isSelected && !selectCheck {
    checkImage.isHidden = false
    shadeView.alpha = 0.7
    selectCheck = true
}

이런식으로 활용해서 해결했습니다 !

🛫일정 추가 뷰 구현

일정 추가 뷰도 작업을 진행했습니다.

아직 완성은 하지 못했고, 단순 작업들만 끝냈는데 '시간 추가하기' 버튼이 디자인이 커스텀되어있고 기능 자체도 난이도가 좀 있어서 난관이 예상됩니다..

어려웠던 점
1. 텍스트필드에 포커스가 잡히면 테두리에 색을 입혀줘야 하는 것

이것도 Notification-Observer 패턴으로 해결 해야할 줄 알았는데, TextField 프로토콜에 textFieldDidBeginEditing() 이라는 메소드가 있어서 쉽게 구현할 수 있었습니다.

🛫내일의 목표

캘린더 뷰를 수정해서 완성까지 할 예정입니다!
일정 추가 뷰에서 '시간 추가하기' 버튼의 난관을 잘 헤쳐나가서 완성하고 싶은데.. 솔직히 자신은 없어서 90% 이상 완성하는 것이 목표입니다.

profile
공부방

0개의 댓글