라이브러리 없이 자바스크립트로 달력 만들기 4 - Navigation 기능 추가하기

이전 챕터에서 shift Month Button를 통해 이전과 다음 달로 이동할 수 있게 되었습니다. 그렇다면 다음과 같은 경우엔 어떻게 해야 할까요?

오늘이 2023년 10월 31일인데 2020년 10월의 달력을 보고 싶다.

버튼을 36번 클릭하여 3년 전으로 이동해야 합니다. 너무나 많은 버튼 클릭입니다. 사용성도 많이 떨어집니다. 사용자는 간단하게 자신이 원하는 년(year), 월(month)로 이동하는 것을 바라고 있습니다. 이를 이번 챕터에서 Navigation 기능을 추가하면서 해결합니다.

---

1.  Calendar class에 기능 추가하기

이전 챕터에서는 shiftMonth 메서드를 추가하여 월(month)을 이동할 수 있게 했습니다. 하지만 매개변수로 next, prev, today를 받기 때문에 특정 월로 이동할 수 없습니다. 예를 들어 1월에서 10월로 한 번에 이동할 순 없습니다. 어떻게 해결할 수 있을까요? navigation 기능을 추가하면 됩니다.

 

navigation 기능은 특정 년(year), 월(month)로 이동할 수 있는 기능이라고 생각하면 됩니다. 글로만 설명하니 부족한 느낌이 듭니다. 실제 사진을 보면서 설명을 드리겠습니다.

하루스터디의 navigation 기능

위 사진에서 빨간색 선으로 둘러싼 부분이 Calendar의 navigation입니다. 화살표를 사용하여 빠르게 연도(year)를 변경할 수 있고 1월부터 12월까지 원하는 월(month)을 한 번의 클릭으로 변경할 수 있습니다. 

 

이와 같은 기능을 추가하기 위해 Calendar class에 변수와 메서드를 추가하고 기존 메서드에 기능을 추가 해보도록 합시다.

1-1. #navigationYear, #navigationMonth 추가

// Calendar.ts

class Calendar {
    // ...
    #navigationYear;
    #navigationMonth;
    // ...
    
    constructor(year: number, month: number) {
        this.#year = year;
        this.#month = month;
        this.#navigationYear = year;
        this.#navigationMonth = month;
    }
}

 

navigation에 필요한 private filed인 #navigationYear, #navigationMonth를 추가합니다. 이 변수는 앞으로 변경하게 될 실제 년(year), 월(month)가 됩니다.

 

왜 따로 변수를 만들고 저장을 한 뒤, 나중에 적용을 하는걸까요? 만약 navigation의 년(year)이 계속 변경될 때마다 뒤의 달력이 바뀌게 된다면 깔끔한 느낌의 UI이 사라지고 어지러운 느낌이 들 수 있다고 생각하기 때문입니다. 그래서 저는 사용자가 원하는 년(year), 월(month)을 선택하게 되면 그때, 한 번 달력이 변경될 수 있도록 했습니다. 만약 이 부분에 대해서 다른 생각을 가지고 있다면 원하는 결과가 나타나도록 로직을 수정하시면 됩니다. 이런 경우 기존 shiftMonth 메서드만 조금 수정하면 더 수월하게 navigation 기능을 추가할 수 있겠네요.

1-2. 메서드 추가하기

navigation에 필요한 여러 메서드를 다음과 같이 추가합니다.

// Calendar.ts

class Calendar {
    // ...
    navigateYear = (year: number) => (this.#navigationYear = year);

    navigateMonth = (month: number) => (this.#navigationMonth = month);

    navigate = () => {
    this.#year = this.#navigationYear;
    this.#month = this.#navigationMonth;
    };

    getNavigationYear = () => this.#navigationYear;

    getNavigationMonth = () => this.#navigationMonth;
    // ...
}

 

여러 메서드들이 추가되었는데, 하나씩 살펴보면 어렵지 않는 로직으로 이루어져 있습니다.

 

먼저 navigateYear 메서드와 navigateMonth 메서드입니다. 이 두 메서드는 각각 변수 #navigationYear과 #navigationMonth를 변경하는 역할을 합니다.

 

다음은 navigate 메서드입니다. 이 메서드를 호출하게 되면 달력의 년(year)과 월(month)이 업데이트됩니다.

 

마지막은 getNavigationYear 메서드와 getNavigationMonth 메서드입니다. 이는 변수 #navigationYear과 #navigationMonth의 값을 반환하는 역할을 합니다.

1-3. shiftMonth 메서드에 기능 추가하기

shiftMonth 메서드는 달력의 월을 이동할 때 사용하는 메서드입니다. 이러한 메서드에 다음과 같은 기능을 추가할 것입니다.

 

1. #month가 변경되면 #navigationMonth도 함께 변경된다.

2. #year가 변경되면 #navigationYear도 함께 변경된다.

 

이러한 이유는 아래의 상황을 생각해 보면 됩니다.

현재 내가 보고 있는 달력은 2024년 1월인데, 내비게이션을 하기 위해 네이게이션 UI를 열어 봤더니 2023년이 나타난다

이상합니다. 현재 내가 있는 년도(year)(위 예시에서는 2024년)에서부터 네이게이션을 시작하고 싶습니다. 위와 같은 상황황이 나타나지 않도록 shiftMonth 메서드에 다음과 같이 로직을 추가하고 리팩터링 합니다.

  shiftMonth = (type: 'next' | 'prev' | 'today') => {
    let newYear = this.#year;
    let newMonth = this.#month;

    if (type === 'today') {
      const today = new Date();

      newYear = today.getFullYear();
      newMonth = today.getMonth() + 1;
    }

    const changedMonth = this.#month + (type === 'next' ? +1 : -1);

    if (type !== 'today' && changedMonth === 0) {
      newYear -= 1;
      newMonth = 12;
    }

    if (type !== 'today' && changedMonth === 13) {
      newYear += 1;
      newMonth = 1;
    }

    if (type !== 'today' && changedMonth > 0 && changedMonth < 13) {
      newMonth = changedMonth;
    }

    this.#year = newYear;
    this.#navigationYear = newYear;
    this.#month = newMonth;
    this.#navigationMonth = newMonth;
  };

 

newYear, newMonth 변수를 만들었습니다. 이후 type과 changedMonth에 따라 newYear, newMonth에 새로운 값을 할당합니다.

 

모든 연산이 마무리되면 #year, #navigationYear에 newYear 값을 할당하고 #month, #navigationMonth에 newMonth 값을 할당합니다. 

1-4. 마무리

navigation 기능을 추가하기 위해 Calendar class에 새로운 변수와 메서드를 추가했습니다. 또한 기존 shiftMonth 메서드도 수정했습니다. 다음은 이번 작업에 대한 commit입니다.

feat: 라이브러리 없이 자바스크립트로 달력 만들기 4 - Calendar class에 기능 추가하기 · nlom0218/vanill

---

2. Schedule에서 Navigation 하기

실제 Navigation 기능을 Schedule 달력에 추가해 봅시다. UI부터 생각을 해보면 다음과 같은 것들이 필요합니다.(이해를 위해 하루스터디의 UI와 함께 설명합니다.)

 

1. navigation 달력: 아래의 사진에서 빨간색 사각형인 부분으로 월(month)까지 나오는 달력입니다.

2. navigation 달력을 열고 닫는 버튼: 버튼(초록색 원) 클릭 통해 navigation 달력을 열고 닫을 수 있습니다.

하루스터디의 navigation 기능

 

UI를 먼저 만들고 navigation 기능을 추가하도록 합시다.

2-1. 버튼 만들기

우선 버튼(위 사진 기준 초록색 원)을 추가하도록 하겠습니다. 이를 위해선 yearMonthTemplate을 수정해야 합니다.

// template/yearMonthTemplate

const yearMonthTemplate = (
  calendar: 'schedule' | 'datePicker',
  year: number,
  month: number
) => `
    <div class=${
      calendar === 'schedule' ? 'schedule-year-month' : 'date-picker-year-month'
    }>
        <div>
          <span>${year}년 ${month}월</span>
          ${
            calendar === 'schedule' &&
            `<button class="schedule-navigation-button">▼</button>`
          }
        </div>
        <div class="shift-month-button-container">
            <button class="shift-month-button shift-mont-today-button" data-type="today">TODAY</button>
            <button class="shift-month-button shift-mont-arrow-button" data-type="prev">◀︎</button>
            <button class="shift-month-button shift-mont-arrow-button" data-type="next">▶︎</button>
        </div>
    </div>
`;

export default yearMonthTemplate;

 

shift-month-button-container는 기존과 동일합니다. 

 

schedule-navigation-button을 추가하여 년(year), 월(month) 다음에 ▼ 버튼을 생성합니다.

2-2. navigation 달력 추가하기

앞서 살펴본 사진에서 빨간색 사각형 부분을 navigation을 할 수 있도록 도와주는 달력이라고 하여 navigation 달력이라고 하겠습니다.

 

navigation 달력을 렌더링을 하기 위해 Schedule class에 메서드를 추가합니다.

// Schedule.ts

private renderNavigation = () => {
    const navigationYear = this.#calendar.getNavigationYear();
    const year = this.#calendar.getYear();

    const isScheduleMonth = (month: number) => {
      if (navigationYear !== year) return false;

      return this.#calendar.getNavigationMonth() === month;
    };

    const navigationTemplate = `
      <div class="schedule-navigation">
        <div class="schedule-navigation-year">
          <span>${navigationYear}</span>
          <div class="schedule-navigation-year-buttons">
            <button class="schedule-navigation-year-button" data-type="prev">◀︎</button>
            <button class="schedule-navigation-year-button" data-type="next">▶︎</button>
          </div>
        </div>
        <ul class="schedule-navigation-month-list">
          ${Array.from({ length: 12 })
            .map(
              (_, index) =>
                `<li class="schedule-navigation-month-item ${
                  isScheduleMonth(index + 1) ? 'schedule-month' : ''
                }" data-month="${index + 1}">${index + 1}월</li>`
            )
            .join('')}
        </ul>
      </div>
    `;

    $('.schedule-year-month').insertAdjacentHTML(
      'beforeend',
      navigationTemplate
    );

    this.registerNavigationEventListener();
  };

 

메서드 이름은 renderNavigation입니다. 이 메서드의 로직을 간단히 살펴보겠습니다.

 

먼저 navigationYear변수, year변수입니다. 이 변수들은 isScheduleMonth 함수에서 서로 비교할 때 사용됩니다. navigationYear은 navigationTemplate를 만들 때에도 사용됩니다.

 

다음은 isScheduleMonth함수입니다. 이 함수는 현재 머물러 있는 년(year), 월(month)을 navigation 달력에서 확인할 수 있도록 도와주는 역할을 합니다. 첫 번째로 navigationYear과 year이 서로 같은지 확인합니다. 서로 같지 않는다면 false를 return 합니다. 그다음은 calendar 인스턴스의 getNavigationMonth 메서드를 통해 가져온 navigationMonth가 매개변수로 받은 month와 같은지를 판단하고 이 결과를 return 합니다.

 

다음은 navigationTemplate입니다. 이는 실제로 화면에 보여지는 UI를 그리는 역할을 합니다. UI에 대한 스타일은 다음과 같습니다. 

/* css/schedule.css */

.schedule-year-month {
  position: relative;

  padding: 20px 20px 40px;

  font-size: 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.schedule-navigation-button {
  font-size: 16px;

  background-color: transparent;
  border: none;

  cursor: pointer;
}

.schedule-navigation {
  position: absolute;

  top: 50px;
  width: 300px;

  padding: 20px;
  border-radius: 8px;

  background-color: #ffffff;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

  font-size: 18px;

  z-index: 5;
}

.schedule-navigation-year {
  display: flex;
  justify-content: space-between;

  margin-bottom: 20px;
}

.schedule-navigation-year-button {
  font-size: 16px;
  border: none;
  background-color: transparent;

  cursor: pointer;
}

.schedule-navigation-month-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;

  font-size: 16px;
  font-weight: 500;
  color: rgb(100, 100, 100);
}

.schedule-month {
  color: #3b82f6;
}

.schedule-navigation-month-item {
  text-align: center;

  padding: 10px 5px;
  border-radius: 4px;
  cursor: pointer;

  transition: background-color 0.2s ease;
}

.schedule-navigation-month-item:hover {
  background-color: #d7e6ff;
}

 

스타일 코드가 깁니다. 각자의 기호에 맞게 수정하여 사용하면 됩니다. navigationTemplate은 insertAdjacentHTML 메서드를 사용하여 schedule-year-month의 마지막 자식으로 추가합니다.

 

마지막은 registerNavigationEventListener 메서드를 호출합니다. 이는 navigation 기능을 위한 이벤트를 등록하는 메서드이며 아직 구현하지 않았습니다. 이에 대해서는 2-4에서 더 자세한 설명이 이어집니다.

2-3. navigation 달력 열고 닫기

schedule-navigation-button을 클릭하면 navigation 달력이 나타나도록 이벤트 리스너를 추가해 봅시다. 이를 위해선 기존 registerEventListener에 새로운 이벤트를 추가해야 합니다.

  private registerEventListener = () => {
    // ...

    $('.schedule-navigation-button').addEventListener(
      'click',
      this.handleOpenNavigation
    );
  };

 

이제, schedule-navigation-button을 클릭하면 handleOpenNavigation 메서드가 실행됩니다. handleOpenNavigation 메서드는 다음과 같습니다.

class Schedule {
  #isOpenNavigation = false;
  
  // ...

  private handleOpenNavigation = () => {
    if (this.#isOpenNavigation) {
      this.#isOpenNavigation = false;
      $('.schedule-navigation').remove();

      return;
    }

    this.#isOpenNavigation = true;
    this.renderNavigation();
  };
}

 

#isOpenNavigation이라는 private filed을 만들고 이 변수의 상태에 따라 다른 로직이 handleOpenNavigation에서 실행됩니다. 

 

#isOpenNavigation이 true라면 이미 navigation 달력이 열려있는 것이기 때문에 이를 닫기 위해 remove 메서드를 사용합니다. 반대로 #isOpenNavigation이 false라면 renderNavigation 메서드를 실행시켜 navigation 달력을 엽니다.

2-4. navigation 기능 추가하기

navigation 기능을 구현하기 위한 준비단계가 모두 끝났습니다. 이제 원하는 년(year), 월(month)로 자유롭게 이동할 수 있는 navigation 기능을 추가할 수 있습니다.

 

다음 사진을 보면 년(year)을 이동시킬 수 있는 화살표 버튼과 월(month)을 선택할 수 있는 1~12의 버튼이 있습니다.

navigation 달력

때문에 두 개의 기능을 추가해야 합니다. 저는 이렇게 하고 싶습니다.

 

1. 년(year)을 이동시킬 수 있는 화살표를 누르면 navigation year이 변한다.

2. 월(month)을 선택할 수 있는 1~12의 버튼을 누르면 해당 월로 이동하고 navigation 달력이 닫힌다.

 

이를 위해 먼저 다음과 같이 이벤트를 추가합니다.

  private registerNavigationEventListener = () => {
    $('.schedule-navigation-year-buttons').addEventListener('click', (event) =>
      this.handleNavigateYear(event)
    );

    $('.schedule-navigation-month-list').addEventListener('click', (event) =>
      this.handleNavigateCalendar(event)
    );
  };

 

하나는 schedule-navigation-year-buttons을 클릭할 때 발생하는 이벤트이고 다른 하나는 schedule-navigation-month-list을 클릭할 때 발생하는 이벤트입니다. 하나씩 살펴봅시다.

 

먼저 handleNavigateYear 메서드입니다.

  private handleNavigateYear: EventListener = (event) => {
    const button = event.target;

    if (!(button instanceof HTMLButtonElement)) return;

    const type = button.dataset.type as 'next' | 'prev';
    const newNavigationYear =
      this.#calendar.getNavigationYear() + (type === 'next' ? +1 : -1);

    this.#calendar.navigateYear(newNavigationYear);

    $('.schedule-navigation').remove();
    this.renderNavigation();
  };

 

이 메서드에서는 button의 타입이 next인지 아니면 prev인지 확인하고 그에 따라 navigationYear을 변경시킵니다. 이후 schedule-navigation 즉, navigation 달력을 제거하고 renderNavigation 메서드를 호출하여 새롭게 그립니다.

 

다음은 handleNavigateCalendar 메서드입니다.

  private handleNavigateCalendar: EventListener = (event) => {
    const monthElement = event.target;

    if (!(monthElement instanceof HTMLLIElement)) return;

    const month = monthElement.dataset.month as string;

    this.#calendar.navigateMonth(Number(month));
    this.#calendar.navigate();

    $('.schedule-navigation').remove();
    this.renderCalendar();
  };

 

이 메서드는 1~12 버튼을 클릭하면 실행되는 메서드입니다. 우선 숫자에 해당하는 값을 가져와 month 변수에 할당합니다. 이후 calendar.navigateMonth 메서드를 호출하여 navigationMonth를 업데이트하고 이어서 calendar.navigate 메서드를 호출하여 year, month을 업데이트합니다. 

 

이후 schedule 달력을 닫고 renderCalendar 메서드를 호출하여 새로운 달력을 그립니다.

2-5. 최종결과

navigation 기능 추가

성공적으로 navigation 기능을 추가했습니다.

 

다음은 이번 작업에 대한 commit입니다.

feat: 라이브러리 없이 자바스크립트로 달력 만들기 4 - Schedule에서 Navigation하기 · nlom0218/vanilla-cale

---

3. Date Picker에서의 navigation?

이 글에서는 Date Picker에서의 navigation 기능을 다루지 않습니다. 하지만 어떤 컨셉인지만 확인합니다. Date Picker에서의 navigation 기능은 Schedule에서의 navigation 기능과 조금 다르다고 생각합니다.

 

Schedule에서의 navigationYear과 navigationMonth는 함께 선택되어 반영되지만 Date Picker에서는 그렇지 않습니다. navigationYear과 navigationMonth가 각각 선택되어 달력에 반영되는 형식이죠.

 

다음의 영상은 하루스터디에서의 Date Picker의 navigation 기능입니다. 년(year)과 월(month)을 각각 select를 할 수 있습니다.

하루스터디 Date Picker의 navigation 기능

하루스터디엔 Select 컴포넌트가 있습니다. 이를 활용하였습니다. 간단하게 만들기 위해선 select tag를 사용하면 됩니다. 컨셉정도를 소개하는 것을 끝으로 이번 챕터를 마무리하겠습니다.

---

4. 라이브러리 없이 자바스크립트로 달력 만들기를 끝내며

2년 전, 티처캔에서 달력을 구현하기 위해 많은 레퍼런스를 찾았었습니다. 어찌어찌 완성은 했습니다. 하지만 깔끔하게 만들지 못해 아쉬움이 남아있었고 리팩터링 또한 쉽게 하지 못해 언젠가는 한 번 다시 정리를 하고 달력을 만들어야겠다고 다짐했습니다. 진짜 옛날 코드를 보면 무슨 생각으로 로직을 작성했는지 모르겠습니다...

 

2년 전에는 라이브러리의 힘을 받아 달력을 만들었습니다. 하지만 이번엔 라이브러리 없이 Date 객체를 사용하여 만들었습니다. 이 과정에서 Date 객체와 이전보다 친해진 느낌을 받았습니다. 여전히 헷갈리는 면이 있지만 한 번 사용을 했으니 다음번엔 더욱 익숙하게 사용할 수 있을 겁니다.

 

이번에 정리한 글을 바탕으로 하루스터디의 달력 로직을 한 번 리팩터링을 하려고 합니다. 다시 보니 급하게 구현하느라 코드가 많이 어지러운데 얼른 리팩터링 하고 npm 배포까지 도전해봐겠습니다. 이 배포한 것을 티처캔 ver2에 적용도 하면 굉장히 재밌는 시간이 될 것 같네요.