Feat#5 hyein/calendar

package.json

@@ -11,6 +11,7 @@
     "format": "prettier --write --cache ."
   },
   "dependencies": {
+    "date-fns": "^2.30.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
@@ -19,9 +20,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-query": "^3.39.3",
-    "react-router-dom": "^6.14.0",
+    "react-router-dom": "^6.14.1",
     "recoil": "^0.7.7",
-    "styled-components": "^6.0.0",
+    "styled-components": "^6.0.1",
     "vite-plugin-svgr": "^3.2.0",
     "vite-tsconfig-paths": "^4.2.0"
   },

src/components/hyein/Calendar.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import CalendarHeader from "./CalendarHeader";
+import { format, subMonths, addMonths } from "date-fns";
+import Week from "./Week";
+import Days from "./Days";
+
+export default function Calendar() {
+  const [currentMonth, setCurrentMonth] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
+
+  function prevMonth() {
+    setCurrentMonth(subMonths(currentMonth, 1));
+  }
+  function nextMonth() {
+    setCurrentMonth(addMonths(currentMonth, 1));
+  }
+
+  function onClickDate(day) {
+    setSelectedDate(day);
+  }
+
+  return (
+    <div>
+      <CalendarHeader prevMonth={prevMonth} nextMonth={nextMonth} currentMonth={currentMonth} />
+      <Week />
+      <Days currentMonth={currentMonth} selectedDate={selectedDate} onClickDate={onClickDate} />
+    </div>
+  );
+}

src/components/hyein/CalendarHeader.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import styled from "styled-components";
+import { format, add, subMonths } from "date-fns";
+
+interface CalendarHeaderProps {
+  currentMonth: Date;
+  prevMonth: Date;
+  nextMonth: Date;
+}
+
+export default function CalendarHeader({ currentMonth, prevMonth, nextMonth }: CalendarHeaderProps) {
+  return (
+    <HeaderWrapper>
+      <PrevMonthButton onClick={prevMonth}>{"<"}</PrevMonthButton>
+      <YearMonthWrapper>
+        {format(currentMonth, "yyyy")}년 {format(currentMonth, "MM")}월
+      </YearMonthWrapper>
+      <NextMonthButton onClick={nextMonth}> {">"}</NextMonthButton>
+    </HeaderWrapper>
+  );
+}
+
+const HeaderWrapper = styled.header`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.1rem;
+  gap: 1.6rem;
+`;
+
+const YearMonthWrapper = styled.span`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.1rem;
+`;
+
+const PrevMonthButton = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const NextMonthButton = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;

src/components/hyein/Days.tsx

@@ -0,0 +1,167 @@
+import React from "react";
+import styled from "styled-components";
+import {
+  parse,
+  format,
+  endOfMonth,
+  endOfWeek,
+  startOfMonth,
+  startOfWeek,
+  addDays,
+  isSameDay,
+  isSunday,
+} from "date-fns";
+
+import { SCHEDULE_DATA, COLOR_DATA } from "../../mocks/data";
+
+interface DaysProps {
+  currentMonth: Date;
+  selectedDate: Date;
+  // onClickDate: (date: Date) => void;
+}
+
+export default function Days({ currentMonth, selectedDate }: DaysProps) {
+  const monthStart = startOfMonth(currentMonth);
+  const monthEnd = endOfMonth(monthStart);
+  const startDate = startOfWeek(monthStart);
+  const endDate: Date = endOfWeek(monthEnd);
+  const scheduleData = SCHEDULE_DATA.map((item) => ({
+    ...item,
+    date: item.date.map((data) => parse(data, "yyyy.MM.dd", new Date())),
+  }));
+
+  const sortedScheduleData = scheduleData.sort((a, b) => a.time.localeCompare(b.time));
+
+  const rows: React.ReactNode[] = [];
+  let days: React.ReactNode[] = [];
+  let day: Date = startDate;
+  let formattedDate = "";
+
+  while (day <= endDate) {
+    for (let i = 0; i < 7; i++) {
+      formattedDate = format(day, "d");
+      const sunDay = isSunday(day);
+      const daySchedule = sortedScheduleData.filter((item) => item.date.some((date) => isSameDay(date, day)));
+
+      days.push(
+        <Day key={day.toString()} $issunday={sunDay}>
+          <DayText
+            $issameday={isSameDay(day, selectedDate)}
+            $isnotvalid={format(currentMonth, "M") !== format(day, "M")}>
+            {formattedDate}
+          </DayText>
+          {daySchedule.map((schedule) => (
+            <ScheduleWrapper key={schedule.id} $student={schedule.student}>
+              {schedule.student} {schedule.time.slice(0, 5)}
+            </ScheduleWrapper>
+          ))}
+        </Day>,
+      );
+      day = addDays(day, 1);
+    }
+    rows.push(<DaysWrapper key={day.toString()}>{days}</DaysWrapper>);
+    days = [];
+  }
+
+  return <Wrapper>{rows}</Wrapper>;
+}
+
+const Wrapper = styled.section`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 5rem;
+  gap: 2rem;
+  flex-direction: column;
+`;
+
+const DaysWrapper = styled.article`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2rem;
+  width: 48rem;
+  cursor: pointer;
+`;
+
+interface DayProp {
+  $issunday: boolean;
+}
+
+const Day = styled.article<DayProp>`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  height: 5rem;
+  width: 30rem;
+
+  ${({ $issunday }) => `
+    ${$issunday ? "color: #FCB3A6" : undefined}
+  `};
+`;
+
+interface DayTextProps {
+  $isnotvalid: boolean;
+  $issameday: boolean;
+}
+
+const DayText = styled.p<DayTextProps>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.2rem;
+  height: 1.2rem;
+
+  ${({ $isnotvalid, $issameday }) => `
+    ${$isnotvalid ? "color: #CED4DA" : ""}
+    ${$issameday ? "color: white; background-color: #0DA98E; border-radius: 50%; " : ""}    
+  `};
+`;
+
+interface ScheduleWrapper {
+  $student: string;
+}
+
+const ScheduleWrapper = styled.p<ScheduleWrapper>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  margin-top: 0.5rem;
+
+  padding: 0.2rem 0;
+
+  ${({ $student }) => {
+    switch ($student) {
+      case "지수":
+        return `
+          background-color: #FFD9F2
+        `;
+        break;
+
+      case "희정":
+        return `
+          background-color:#E3D2FA`;
+        break;
+
+      case "혜인":
+        return `
+            background-color:#D3F1C1`;
+        break;
+
+      case "성경":
+        return `
+          background-color: #CCF5ED
+        `;
+        break;
+
+      case "은빈":
+        return `
+          background-color:#EBDDD5 `;
+        break;
+
+      default:
+        return undefined;
+    }
+  }}
+`;

src/components/hyein/Week.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import styled from "styled-components";
+
+export default function Week() {
+  const DATE: string[] = ["일", "월", "화", "수", "목", "금", "토", "일"];
+
+  const dateList: JSX.Element[] = DATE.map((day, index) => <DayWrapper key={index}>{day}</DayWrapper>);
+  return <WeekWrapper>{dateList}</WeekWrapper>;
+}
+
+const WeekWrapper = styled.section`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1rem;
+  font-weight: 400;
+  margin-top: 1.8rem;
+`;
+
+const DayWrapper = styled.span`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: auto;
+  width: 6rem;
+`;

src/mocks/data.ts

@@ -0,0 +1,15 @@
+interface ScheduleData {
+  id: number;
+  student: string;
+  time: string;
+  date: string[];
+}
+[];
+
+export const SCHEDULE_DATA: ScheduleData[] = [
+  { id: 1, student: "지수", time: "13:00~14:00", date: ["2023.07.06", "2023.07.13", "2023.07.20", "2023.07.27"] },
+  { id: 2, student: "희정", time: "19:00~20:00", date: ["2023.07.06", "2023.07.16"] },
+  { id: 3, student: "혜인", time: "10:00~12:00", date: ["2023.07.06", "2023.07.16"] },
+  { id: 4, student: "은빈", time: "22:00~23:00", date: ["2023.07.03", "2023.07.27"] },
+  { id: 5, student: "성경", time: "21:00~22:30", date: ["2023.07.15"] },
+];

src/pages/Hyein.tsx

@@ -1,3 +1,5 @@
+import Calendar from "../components/hyein/Calendar";
+
 export default function Hyein() {
-  return <div>Hyein</div>;
+  return <Calendar />;
 }