# 1ヶ月カレンダーの作成3 次に、カレンダーページをリファクタします。まずカレンダーの曜日部分を切り出しましょう。 `organisms`配下に`CalendarHeader.tsx`を作成しましょう。その中にtheadタグの要素を移行しましょう。

import { DAYS_LIST } from "../../constants/calendar";

export const CalendarHeader = () => {
  return (
    <thead>
      <tr className="bg-lime-800 text-white rounded-tl-lg rounded-tr-lg py-10">
        {DAYS_LIST.map((day) => (
          <th key={day} className="text-center text-xl py-3">
            {day}
          </th>
        ))}
      </tr>
    </thead>
  );
}

次に日付部分を切り出しましょう。 `organisms`配下に`CalendarBody.tsx`を作成しましょう。その中にtbodyタグの要素を移行しましょう。propsとして、`currentDate`と`dateList`を受け取れるようにしましょう。

import { getDate, isSameMonth, isToday } from "date-fns";

type PropsType = {
  currentDate: Date
  dateList: Date[][]
}

export const CalendarBody = ({ currentDate, dateList }: PropsType) => {
  const dateColor = (targetDate: Date, currentDate: Date): string => {
    if (isToday(targetDate)) return "bg-lime-800 text-white rounded-full";
    return isSameMonth(targetDate, currentDate)
      ? "text-black"
      : "text-gray-300";
  };
  
  return (
    <tbody>
      {dateList.map((oneWeek) => (
        <tr key={`week-${getDate(oneWeek[0])}`} className="mx-10">
          {oneWeek.map((item) => (
            <td
              key={`day-${getDate(oneWeek[0])}`}
              className="bg-white h-[10vh] border-2 border-solid border-lime-800"
            >
              <span
                className={`inline-block w-[20px] leading-[20px] text-center ${dateColor(
                  item,
                  currentDate
                )}`}
              >
                {getDate(item)}
              </span>
            </td>
          ))}
        </tr>
      ))}
    </tbody>
  );
}

また、`dateColor`の関数に関しても切り出します。 `src`配下に`libs`ディレクトリを作成し、その中に`date.ts`を作成しましょう。 {% code title="src/libs/date.ts◎" %} ```typescript import { isSameMonth, isToday } from "date-fns" export const dateColor = (targetDate: Date, currentDate: Date): string => { if (isToday(targetDate)) return "bg-lime-800 text-white rounded-full" return isSameMonth(targetDate, currentDate) ? "text-black" : "text-gray-300" } ``` {% endcode %} こちらを`CalendarBody.tsx`にて呼び出します。

import { getDate } from "date-fns"
import { dateColor } from "../../libs/date"

type PropsType = {
  currentDate: Date
  dateList: Date[][]
}

export const CalendarBody = ({ currentDate, dateList }: PropsType) => {
  return (
    <tbody>
      {dateList.map((oneWeek) => (
        <tr key={`week-${getDate(oneWeek[0])}`} className="mx-10">
          {oneWeek.map((item) => (
            <td
              key={`day-${getDate(oneWeek[0])}`}
              className="bg-white h-[10vh] border-2 border-solid border-lime-800"
            >
              <span
                className={`inline-block w-[20px] leading-[20px] text-center ${dateColor(
                  item,
                  currentDate
                )}`}
              >
                {getDate(item)}
              </span>
            </td>
          ))}
        </tr>
      ))}
    </tbody>
  )
}

では、CalendarHeader.tsxとCalendarBody.tsxをCalendarPage.tsxにて呼び出しましょう。

import { eachDayOfInterval, eachWeekOfInterval, endOfMonth, endOfWeek, getMonth, startOfMonth } from "date-fns";
import { useEffect, useState } from "react";
import { CalendarHeader } from "../organisms/CalendarHeader";
import { CalendarBody } from "../organisms/CalendarBody";

export const CalendarPage = () => {
  const today = new Date()
  const [dateList, setDateList] = useState<Date[][]>([]);

  useEffect(() => {
    const monthOfSundayList = eachWeekOfInterval({
      start: startOfMonth(today),
      end: endOfMonth(today),
    })
    const newDateList: Date[][] = monthOfSundayList.map((date) => {
      return eachDayOfInterval({
        start: date,
        end: endOfWeek(date),
      })
    })
    setDateList(newDateList)
  }, [])

  return (
    <>
      <h1 className=" font-bold text-3xl mb-5">{`${getMonth(today) + 1}月`}</h1>
      <table className="w-[80%] border-collapse border-2 border-solid border-lime-800 table-fixed">
        <CalendarHeader />
        <CalendarBody currentDate={today} dateList={dateList} />
      </table>
    </>
  );
}

ここまでの作業をcommitしましょう。 ```bash git add . ``` ```bash git commit ``` commitメッセージは ``` refactor: カレンダーページをheaderとbodyのcomponentに切り出した ``` としましょう。では1ヶ月カレンダーの実装が完了したので、GitHubにpushしましょう。 ```basic git push origin feature/calendar-page ``` これでGitHubのリポジトリのページにいき、main <- feature/calendar-pageのPRを作成しましょう。 PRのタイトルは ``` feat: カレンダーページを作成 ``` としましょう。作成したら自身で`Merge pull request`を押してmergeしましょう。 mergeが完了したらWarpに戻り、mainをpullしましょう。 ```bash git switch main ``` ```bash git pull origin main ```