Calendar

Info

• 달력 데이터.
• class 형태로 구현
• MONTHLY/WEEKLY/DAILY/LIST로 type이 구분됨.

type	description
MONTHLY	월간
WEEKLY	주간
DAILY	일간
LIST	리스트

Calendar

• day.js 라이브러리를 사용하여 local 환경에서 생성하는 달력 데이터.
• 달력 페이지와 생명주기가 같음.

Structure

• 기본 생성 시점에서는 날짜 객체들을 가지고 있지 않으며, 각 서비스 로직에서 따로 주입해줘야함.
• 이러한 형태로 구현된 이유
  • 공휴일과 일정을 처리하는 로직을 한 flow에 묶어 반복을 줄이기 위함.
  • 공휴일 정보와 날짜에 해당하는 일정을 가져오는 과정이 async로 동작하기 때문.

Calendar.ts

import { calendarDateType, CalendarDateType } from '@typings/constants/CalendarDateType'  
import { DateOfCalendar } from '@typings/DateOfCalendar'  
  
export class Calendar {  
  year: number  
  month: number | null  
  day: number | null  
  type: CalendarDateType = calendarDateType.MONTHLY  
  dates: DateOfCalendar[]  
  
  constructor(date: { year: number; month?: number; day?: number; type?: CalendarDateType }) {  
    const { year, month = null, day = null, type } = date  
  
    this.year = year  
    this.month = month  
    this.day = day  
    this.type = type ? type : this.parseType(month, day)  
  }  
  
  private parseType(month: number, day: number) {  
    if (day) return calendarDateType.DAILY  
    if (month) return calendarDateType.MONTHLY  
  }  
}

DateOfCalendar

• 달력을 구성하는 날짜 데이터.
  • Calendar type에 따라 갯수가 달라짐.
  • 연/월/일 데이터를 기준으로 하루 날짜 데이터를 지칭.
  • 0(일요일) ~ 6(토요일) 요일을 가짐.
  • 다수의 Schedule을 가짐.
  • 공휴일인 경우, holiday 값을 가짐.

DateOfCalendar.ts

import { getWeekdayByCode, weekday, Weekday } from '@typings/constants/Weekday'  
import dayjs from 'dayjs'  
import { ScheduleOfDate } from '@typings/ScheduleOfDate'  
import dateFormatUtil from '@utils/date/dateFormatUtil'  
  
export class DateOfCalendar {  
  year: number  
  month: number  
  day: number  
  weekday: Weekday  
  schedules: Array<ScheduleOfDate | null>  
  holiday: null | string = null  
  
  constructor(  
    date: {  
      year?: number  
      month?: number  
      day?: number  
      schedules?: Array<ScheduleOfDate | null>  
      holiday?: null | string  
    } = {},  
  ) {  
    const now = dateFormatUtil.getDate()  
  
    const {  
      year = now.year(),  
      month = now.month() + 1,  
      day = now.date(),  
      schedules = [],  
      holiday = null,  
    } = date  
  
    const targetDate = date ? dayjs(`${year}-${month}-${day}`) : now  
  
    this.year = targetDate.year()  
    this.month = targetDate.month() + 1  
    this.day = targetDate.date()  
    this.weekday = getWeekdayByCode(targetDate.day())  
    this.schedules = schedules  
    this.holiday = holiday  
  }  
  
  get isSaturday() {  
    return this.weekday.code == weekday.SATURDAY.code  
  }  
  
  get isSunday() {  
    return this.weekday.code == weekday.SUNDAY.code || this.holiday  
  }  
  
  isSameWeekday = (weekday: Weekday) => this.weekday.code == weekday.code  
  isToday = (now: dayjs.Dayjs) =>  
    now.year() == this.year && now.month() + 1 == this.month && now.date() == this.day  
}