Impl calendar component

[ChaeyeonAhn]

요약 *

It closes #42

아래 코드를 /app/page.tsx에 복사 붙여넣기 하셔서 테스트 해 보시면 됩니다.

"use client";

import Calendar from "../common/components/Calendar/Calendar";

const Home = () => (
  <>
    <div>Welcome to SPARCS Students!</div>
    <Calendar
      existDates={[new Date("2024-11-07"), new Date("2024-11-11")]}
      eventPeriods={[
        { start: new Date("2024-11-01"), end: new Date("2024-11-01") },
      ]}
      selectedDates={[new Date("2024-11-17")]}
      size="md"
      width={354}
    />
    <Calendar
      existDates={[new Date("2024-11-07"), new Date("2024-11-11")]}
      eventPeriods={[
        { start: new Date("2024-11-01"), end: new Date("2024-11-08") },
      ]}
      selectedDates={[new Date("2024-11-17")]}
      size="md"
      width={354}
    />
    <Calendar
      existDates={[new Date("2024-11-07"), new Date("2024-11-11")]}
      eventPeriods={[
        { start: new Date("2024-11-01"), end: new Date("2024-11-01") },
      ]}
      selectedDates={[new Date("2024-11-17")]}
      size="md"
      title="학사일정"
      width={354}
    />
    <Calendar
      existDates={[
        new Date("2024-11-04"),
        new Date("2024-11-07"),
        new Date("2024-11-11"),
        new Date("2024-11-24"),
        new Date("2024-11-29"),
        new Date("2024-11-30"),
        new Date("2024-12-01"),
      ]}
      eventPeriods={[
        { start: new Date("2024-11-01"), end: new Date("2024-11-01") },
      ]}
      selectedDates={[new Date("2024-11-17")]}
      size="md"
      title="학사일정"
      width={354}
    />
  </>
);

export default Home;

• 기존 Calendar component에 있던 event periods prop (기간을 선택해주면 range로 선택 띠? 같은 것이 둘러지는)을 optional 하게 바꾸었습니다. 앞으로 캘린더를 여러 군데 쓰게 될텐데 공지사항 같은 곳에는 안 쓸 것 같아서 그렇게 했습니다!
• 나머지 변경사항들은 피그마 디자인 반영입니다!

Update

- optional title 주면 캘린더에 제목 추가 가능 - optional width 주면 캘린더 너비 고정 가능 (main page에서 필요함)

스크린샷

이후 Task *

• 없음