# 予定詳細機能次にカレンダーの一つの予定をクリックした際に、予定詳細のモーダルを表示するようにします。 `feature/schedule-detail`にて作業します。 ```bash git switch -c feature/schedule-detail ``` `organisms`に`ScheduleDetailModal.tsx`を作成しましょう。propsとして、`selectedSchedule`を受け取れるようにし、`selectedSchedule`は`Schedule型`か`null`とします。また`Modal`に必要な`closeModal`を受け取ります。 `Modal`の`isOpen`は`!!selectedSchedule`とすることで、`selectedSchedule`が`null`以外の場合はtrueとなります。

import Modal from "react-modal";
import { Schedule } from "../../types/calendar";

type PropsType = {
  selectedSchedule: Schedule | null
  closeModal: () => void
};

const customStyles = {
  content: {
    top: "50%",
    left: "50%",
    width: "30%",
    transform: "translate(-50%, -50%)",
  },
}

export const ScheduleDetailModal = ({
  selectedSchedule,
  closeModal,
}: PropsType) => {
  return (
    <Modal
      isOpen={!!selectedSchedule}
      style={customStyles}
      onRequestClose={closeModal}
    >
    </Modal>
  )
}

表示する内容としては、`selectedSchedule`の内容を表示します。`selectedSchedule`を表示する際に`null`を許容しているので、`{selectedSchedule &&`として`null`チェックをする必要があります。日付に関しては、`format`を使用して表示します。

import Modal from "react-modal";
import { Schedule } from "../../types/calendar";
import { format } from "date-fns";

type PropsType = {
  selectedSchedule: Schedule | null;
  closeModal: () => void;
};

const customStyles = {
  content: {
    top: "50%",
    left: "50%",
    width: "30%",
    transform: "translate(-50%, -50%)",
  },
};

export const ScheduleDetailModal = ({ selectedSchedule, closeModal }: PropsType) => {
  return (
    <Modal
      isOpen={!!selectedSchedule}
      style={customStyles}
      onRequestClose={closeModal}
    >
      {selectedSchedule && (
        <div className="flex flex-col gap-8">
          <h3 className="text-center text-3xl text-lime-800 font-bold pb-5">
            {selectedSchedule.title}
          </h3>
          <p>{format(selectedSchedule.date, "yyyy年M月d日")}</p>
          <p>{selectedSchedule.description}</p>
        </div>
      )}
    </Modal>
  );
};

こちらを`CalendarBody.tsx`にて呼び出しましょう。`selectedSchedule`というstateを定義し、`closeModal`という関数も定義し、propsとして渡します。

import { useState } from "react"
import { getDate } from "date-fns"
import { dateColor } from "../../libs/date"
import { DateList, Schedule } from "../../types/calendar"
import { ScheduleBtn } from "../atoms/ScheduleBtn"
import { ScheduleDetailModal } from "./ScheduleDetailModal"

type PropsType = {
  currentDate: Date
  dateList: DateList
};

export const CalendarBody = ({ currentDate, dateList }: PropsType) => {
  const [selectedSchedule, setSelectedSchedule] = useState<Schedule | null>(
    null
  )
  const closeModal = () => setSelectedSchedule(null)

  return (
    <>
      <tbody>
        {dateList.map((oneWeek) => (
          <tr key={`week-${getDate(oneWeek[0].date)}`} className="mx-10">
            {oneWeek.map((item) => (
              <td
                key={`day-${getDate(oneWeek[0].date)}`}
                className="bg-white h-[10vh] border-2 border-solid border-lime-800"
              >
                <span
                  className={`inline-block w-[20px] leading-[20px] text-center ${dateColor(
                    item.date,
                    currentDate
                  )}`}
                >
                  {getDate(item.date)}
                </span>
                <div className="flex flex-col items-center gap-1 pb-2">
                  {item.schedules.map((schedule) => (
                    <ScheduleBtn key={schedule.id}>
                      {schedule.title}
                    </ScheduleBtn>
                  ))}
                </div>
              </td>
            ))}
          </tr>
        ))}
      </tbody>
      <ScheduleDetailModal selectedSchedule={selectedSchedule} closeModal={closeModal} />
    </>
  )
}

そして、対象の予定をクリックした際に、`selectedSchedule`に対象の`schedule`を格納するため、`ScheduleBtn`にて`onClick`を受け取れるようにして、関数を渡しましょう。

import { ReactNode } from "react";

type PropsType = {
  children: ReactNode;
  onClick: () => void
};

export const ScheduleBtn = ({ children, onClick }: PropsType) => {
  return (
    <button className="block bg-lime-800 text-white rounded-sm w-[94%] px-2" onClick={onClick}>
      {children}
    </button>
  );
};

...
                 {item.schedules.map((schedule) => (
                    <ScheduleBtn key={schedule.id} onClick={() => setSelectedSchedule(schedule)}>
                      {schedule.title}
                    </ScheduleBtn>
                  ))}
...

これで、予定をクリックした際に予定詳細のモーダルが表示されるようになったかと思います。

ここまでの作業をcommitしましょう。 ```bash git add . ``` ```bash git commit ``` commitメッセージは ``` feat: 予定詳細モーダルを作成 ``` としましょう。では予定詳細機能の実装が完了したので、GitHubにpushしましょう。 ```basic git push origin feature/schedule-detail ``` これでGitHubのリポジトリのページにいき、main <- feature/schedule-detailのPRを作成しましょう。 PRのタイトルは ``` feat: 予定詳細モーダルを作成 ``` としましょう。作成したら自身で`Merge pull request`を押してmergeしましょう。 mergeが完了したらWarpに戻り、mainをpullしましょう。 ```bash git switch main ``` ```bash git pull origin main ```