// Create Grid of Dates

this.tbodyNode.innerHTML = '';
for (var i = 0; i < 6; i++) {
  var row = this.tbodyNode.insertRow(i);
  this.lastRowNode = row;
  for (var j = 0; j < 7; j++) {
    var cell = document.createElement('td');

    cell.tabIndex = -1;
    cell.addEventListener('click', this.handleDayClick.bind(this));
    cell.addEventListener('keydown', this.handleDayKeyDown.bind(this));
    cell.addEventListener('focus', this.handleDayFocus.bind(this));

    cell.textContent = '-1';

    row.appendChild(cell);
    this.days.push(cell);
  }
}

validate Layer
	- 날짜 형식 이상
	- ...

input = (date) => {
	date controll Layer
		- 초기 값을 셋팅하며, props으로 받은 format을 이용하여 input에 표시한다.
	dialog controll Layer
		- input 혹은 아이콘을 클릭할 경우에 dialog를 open = true
}

dialog = (value) => {
		load data Layer
			- 날짜 정보 로드 (value에 해당하는 월 혹은 현재 날짜에 대한 데이터 로드)
		data converting Layer
			- prop으로 설정한 선택 불가능한 날짜가 disalbled 되도록 설정
			- load data Layer에서 불러온 날짜 데이터를 table에 뿌려주기 위해서 데이터를 가공
		data controll Layer
			- data converting Layer에서 변환된 데이터를 실제 화면에 보여주기 위해 set state해줌
}

<input />
<dialog open={open}>

const DEFAULT_WEEKDAYS = [
  {
    key: 0,
    ko: '일',
  },
  {
    key: 1,
    ko: '월',
  },
  {
    key: 2,
    ko: '화',
  },
  {
    key: 3,
    ko: '수',
  },
  {
    key: 4,
    ko: '목',
  },
  {
    key: 5,
    ko: '금',
  },
  {
    key: 6,
    ko: '토',
  },
];

const value = 선택한_값;

const currentDays = dayjs(value);

const startDayOfMonth = currentDays.startOf('M');
const endDayOfMonth = currentDays.endOf('M');
const daysInMonthLength = currentDays.daysInMonth();

const startDayIndex = startDayOfMonth.day();
const endDayIndex = endDayOfMonth.day();

/** 2중 Array로 날짜 테이블을 만듭니다. */
const dateTable: Dayjs[][] = [];

/** 현재 선택된 월의 일자를 셋팅한다. */
const daysInMonthArray = new Array(daysInMonthLength)
  .fill(null)
  .map((_, index) => endDayOfMonth.set('D', daysInMonthLength - index));

/** 캘린더의 행 갯수 */
const rowCount = Math.ceil((daysInMonthArray.length + startDayIndex) / 7);

/** 현재 선택된 월의 공간을 만든다. */
for (let week = 0; week < rowCount; week++) {
  dateTable.push([]);

  for (let weekday = 0; weekday < 7; weekday++) {
    /** 첫 주 */
    if (week === 0) {
      /**
       * * 이전 달의ㅈ 일자를 표시
       * * 선택된 달의 일자를 표시
       */
      const date =
        weekday < startDayIndex
          ? startDayOfMonth.add(weekday - startDayIndex, 'days')
          : daysInMonthArray.pop();

      dateTable[week].push(date);
      continue;
    }

    /**
     * * 첫 주가 아닌 다른 주
     * * 선택된 달의 일자를 표시
     * * 다음 달의 일자를 표시
     */
    dateTable[week].push(
      daysInMonthArray.pop() ?? endDayOfMonth.add(weekday - endDayIndex, 'days')
    );
  }
}

<dialog open={open}>
	<div role="grid">
	  <div role="row" style={{ display: 'flex' }}>
	    {DEFAULT_WEEKDAYS.map((weekDayTitle) => (
	      <div key={weekDayTitle.key} role="gridcell" style={{ display: 'flex' }}>
	        {/** 한국어 요일을 일요일 부터 월요일  */}
	        {weekDayTitle.ko}
	      </div>
	    ))}
	  </div>

	  {dateTable.map((weekdays) => {
	    return (
	      <div key={weekdays.at(0).toString()} role="row" style={{ display: 'flex' }}>
	        {weekdays.map((day) => (
	          <span key={day.toString()} role="gridcell" style={{ display: 'flex', }}>
	            <button
	              aria-label={day.format('YYYY년MM월DD일')}
	              disabled={disableDayCallback(day)}
                aria-selected={day.isSame(value, 'D')}
	              onClick={() => {
	                onClick(day);
	              }}
	            >
	              {day.get('D')}
	            </button>
	          </span>
	        ))}
	      </div>
	    );
	  })}
	</div>
</dialog>