[캘린더] 캘린더 탭

dev-Lena commented 3 years ago

캘린더 탭 만들기

UI

[x] 전체 캘린더 (화면 전체 캘린더)
[x] 날짜를 누르면 전체 캘린더의 높이가 축소되고 하단에 선택 날짜에 대한 정보가 보이는 화면이 등장 (Swipe Gesture)
[x] 오늘 날짜 표시
[x] 선택 날짜 표시
[x] 각 날짜 밑에 예약률에 따른 색상 표시

Process

Storyboard

[x] tableView
[x] calendar

FSCalendarScopeMonth -> 당일 방 예약 현황 목록 화면으로 연결 FSCalendarScopeWeek -> 당일 게스트하우스 서비스 이용 목록 화면으로 연결 하단 테이블뷰 위에 static cell이 아닌 버튼으로 두어도 괜찮을 듯

하단 테이블 뷰 -> 당일 예약 게스트 목록 화면으로 연결

하단 화면 구성

Segmented Control - 당일 예약 게스트 목록 & 당일 게스트하우스 서비스 이용 목록 & 당일 방 예약 현황 목록

dev-Lena commented 3 years ago

객체

UIViewController:
- [x] calendar.scope 설정
- [x] UIPanGestureRecognizer 정의 및 설정 - tableView의 PanGestureRecognizer로 등록
UITableViewDataSource:
- [x] numberOfSections(in tableView:): section 수
- [x] tableView(_:, numberOfRowsInSection section:): 한 section에 row 수
- [x] tableView(_:, cellForRowAt indexPath:): Cell 구성
UITableViewDelegate:
- [x] tableView(_:, didSelectRowAt indexPath:): static cell 선택. (당일 방 예약 현황 목록 보기 + 당일 게스트하우스 서비스 이용 목록 보기)
- [x] tableView(_:, heightForHeaderInSection section:): section 높이
UIGestureRecognizerDelegate
- [x] gestureRecognizerShouldBegingesture(_:): 제스쳐가 시작됐을 때 모션에 따라서 calendar의 scope가 month인지 week인지 결정해 변경 하는 메소드
- [x] calendar(_, boundingRectWillChange bounds:, animated:): Scope을 month/week로 변경할 때 호출되며 변경될 때 마다 calendar의 높이를 조정
- [x] calendar(_:, didSelect date:, at monthPosition:): 셀이 선택되었을 때 호출되며 선택된 날짜를 calendar.selectedDates에 저장할 수 있음. 이곳에서 선택한 날짜가 이전 월이거나 다음 월이면 현재 페이지를 알맞게 이동하도록 처리
FSCalendarDataSource
FSCalendarDelegate

TableView에 PanGesture를 등록해 UITableViewDelegate에서 didSelect 처리하지 않고 UIGestureRecognizerDelegate에서 처리 UITableViewDelegate의 didSelect 메소드는 static cell 선택 시 호출

정리하기

PanGestureRecognizer.require(toFail:) 메소드 self.tableView.contentOffset.y <= -self.tableView.contentInset.top 의 의미

dev-Lena commented 3 years ago

변경 전

변경 후

[x] 배경색 옅은 회색으로 바꾸기
[x] 하나의 셀에 -> 객실 예약 현황 / 게스트하우스 서비스 이용 현황 Button
[x] Button corner Radius 설정
[x] DailyTableView row 11개로 바꾸기
[x] DailyTableView 마지막 row에 더보기 버튼 생성(당일 예약자가 10명 이 넘을 경우 보이도록) -> 더보기 버튼을 누르면 당일 예약자 목록이 모달 화면에 표시

두 버튼

각 화면은 추후 재사용을 위해 xib로 만들기 -> 일단 화면을 띄우는 것 까지. 화면 구현은 이후 (참고할 강의: Demystifying Views in iOS - raywenderlich)

[x] 객실 예약 현황 Button -> 객실 예약 현황 목록을 보여주는 화면으로 이동 (모달)
- 추후 구현 방식 메모: 방 예약 현황 화면: TableView를 이용해 구현
[x] 게스트하우스 서비스 이용 현황 Button -> 게스트 하우스 서비스에 대한 목록(누가, 무엇을, 얼마나, 언제 등)
- 추후 구현 방식 메모: 서비스 이용 현황 화면: StackView 안에 서비스 개수만큼 View가 들어감 / View는 재활용을 위해 Xib로 만들기 / View 상단 서비스 이름(이용 인원에 대한 정보) 하단에 서비스 이용자 표시 / View 상단 서비스 이름을 터치하면 펼쳐지고 한번 더 누르면 접히는 기능

-> 일단 여기까지 구현 + 구조 설계해서 이슈로 남겨놓고 예약 CRUD 화면 구현시작하기

dev-Lena commented 3 years ago

를 참고하여서 Delegate를 만들어 처리하려고 시도하였음.

protocol DailyTableViewCellDelegate {
     presentViewController(_ tableViewCell: UITableViewCell, viewController: UIViewController)
}

class TransitionButtonsRowTableViewCell: UITableViewCell {
    weak var delegate: DailyTableViewCellDelegate!

    @IBAction func bookingStatusButtonTapped(_ sender: Any) {
        let roomBookingStatusViewController = RoomBookingStatusViewController.loadFromNib()
        self.delegate?.presentViewController(self, viewController: roomBookingStatusViewController)
    }

    @IBAction func serviceStatusButtonTapped(_ sender: Any) {
       let serviceUsingStatusViewController = ServiceUsingStatusViewController.loadFromNib()
        self.delegate?.presentViewController(self, viewController: serviceUsingStatusViewController)
    }
}

extension CalendarViewController: DailyTableViewCellDelegate {
    presentViewController(_ tableViewCell: UITableViewCell, viewController: UIViewController) {
        self.present(viewController, animated: true, completion: nil)
    }

class DailyTableViewDataSource: NSObject, UITableViewDataSource {

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if indexPath.section == TableViewIndexPath.firstSection {
            let cell = tableView.dequeueReusableCell(withIdentifier: CalendarCellName.BookingStatusButtonsCell)!
            //TODO: 이곳에서 cell의 delegate로 CalendarViewController를 지정해주어야 함
            return cell
        } 
        // ... 이하 생략
        }
    }

위와 같은 방법으로 TabelViewCell 안에있는 Button이 눌렸을 때 두 개의 버튼 중 어떤 버튼이 눌리냐에 따라서 CalendarViewController에서 알맞는 화면이 present하도록 해주고 싶었으나

TableViewDataSource에 TODO에 적어놓았다시피 이곳에서 delegate를 지정해줘야 하는데 TableViewDataSource가 ViewController를 알고 있는 것은 부자연스러움. 적절하지 않음.

-> 그래서 NotificationCenter로 post를 보내는 방법으로 수정함.

4INCENSE / geha-sajang-iOS