📌 캘린더 데이터 뿌리는 법

🔹 페이지 타입

• 날짜 선택(메인) 페이지
• 월 선택 페이지
• 년도 선택 페이지

🔹 방식 요약

메인페이지에서 navi 버튼에서 년도(2022)를 선택하면 년도 선택 페이지로 월(May)을 선택하면 월 선택 페이지로 전환하며 그에 맞는 데이터로 변경하고 레이아웃도 변경한다.

• 페이지별 특징 분석 표

  	열 갯수	thead 유무	화살표 기준	navigation (type/data)
  일(main)	7	true	월	버튼 / 년월
  월	4	false	1년	텍스트 / 해당 년도
  연	4	false	10년	텍스트 / 해당 년도의 10년 주기

🔹 코드 일부

./src/components/BtnCalendar/function.js

import * as dayjs from 'dayjs'
import * as localeData from 'dayjs/plugin/localeData'
import 'dayjs/locale/bs'

dayjs.extend(localeData)

// 단축 월 리스트
export const MONTHS = dayjs.monthsShort()
// 단축 요일 리스트
export const WEEKDAY = dayjs.weekdaysMin()

// selectedDay: 선택한 시간을 담은 state

// 3가지의 캘린더 타입 중 선택한 타입을 반환하는 함수
export const calendarType = (selectedDay) => {
	// 매 月 보여줄 날짜 데이터 정리 ([TIL3](https://velog.io/@katej927/TIL-3) 참고)
  const blanks = Array(selectedDay.startOf('month').day()).fill('')
  const dates = Array.from({ length: selectedDay.daysInMonth() }, (v, i) => i + 1)
  const shownDates = [...blanks, ...dates]

  const fromYear = Number(`${selectedDay.year()}`.slice(0, -1) + 0)

	// 캘린더 타입 별로 설정
  return [
		// months를 보여주는 타입
    {
      id: 'months',
      isDisabled: true,
      column: 4,
      needThead: false, // 월화수목금토일 안보이도록
      arrowStandard: { unit: 'year', step: 1 }, // 화살표를 눌렀을 때, 데이터가 변동되는 단위
      navi: [selectedDay.year()], // 다른 캘린더 타입으로 넘어가도록 하는 navi의 데이터
      tbodyData: MONTHS, // 달력에 뿌려줄 정보
    },
		 // years를 보여주는 타입
    {
      id: 'years',
      isDisabled: true,
      column: 4,
      needThead: false,
      arrowStandard: { unit: 'year', step: 10 },
      navi: [`${fromYear}-${fromYear + 9}`],
      tbodyData: [...Array(10)].map((e, i) => fromYear + i),
    },
		// date를 보여주는 타입
    {
      id: 'main',
      isDisabled: false,
      column: 7,
      needThead: true,
      arrowStandard: { unit: 'month', step: 1 },
      navi: [selectedDay.format('MMMM'), selectedDay.year()],
      tbodyData: shownDates,
    },
  ]
}

잘 정리해서 올리고 싶은데.. 시간이 없다.. ㅠㅠ