▲ 그림 4-6 기본 화면 구성

➌ 연월 이동 영역

연월 이동 영역은 크게 구역 세 개로 구분되는데, 가운데 구역 ⓐ는 사용자가 현재 선택한 연도와 월이 표시됩니다. 사용자가 연월을 선택하지 않은 경우 현재 연월이 표시됩니다.

왼쪽과 오른쪽에 있는 둥근 요소 ⓑ와 ⓒ는 이전 달과 다음 달로 이동하는 버튼입니다. 이 버튼을 누르면 달력 영역이 해당 연월로 바뀌어 표시됩니다. 단 이전 달로 이동하는 버튼은 현재 기준으로 과거로 이동하지 못해야 해서 눌러도 동작하지 않습니다. 과거 일자에 약속을 잡을 수는 없으니까요.

이전 달과 다음 달로 이동하는 버튼은 달력 API를 호출합니다. 현재 2024년 12월 7일인 경우 이전 달을 누르면 /calendar/2024/11 API를 호출하고, 다음 달을 누르면 /calendar/2025/1 API를 호출하는 것이지요. API를 호출해서 응답받은 콘텐츠는 달력 영역에 표시하며, 현재 선택한 연월 구역도 이동한 연월로 변경합니다.