import styled from "styled-components";
import { startOfMonth, endOfMonth, startOfWeek, endOfWeek } from "date-fns";
import {
  isSameMonth,
  isSameDay,
  addDays,
  parse,
  format,
  subDays,
} from "date-fns";
import { useState } from "react";

export default function RenderCells({
  currentMonth,
  selectedDate,
  onDateClick,
  workDay,
}) {
  const monthStart = startOfMonth(currentMonth);
  const monthEnd = endOfMonth(monthStart);
  const startDate = subDays(startOfWeek(monthStart), -1);
  const endDate = endOfWeek(monthEnd);

  const rows = [];
  let days = [];
  let day = startDate;
  let formattedDate = "";

  const [workDate, setWorkDate] = useState();
  const [workStatus, setWorkStatus] = useState();

  const dateArr = [];
  if (workDay.length > 1) {
    workDay.map((v) => {
      let dateDay = v.date.slice(-2);
      if (dateDay < 10) {
        dateDay = dateDay.slice(-1);
      }
      dateArr.push({
        date: dateDay,
        status: v.status,
      });
    });
    console.log(dateArr);
  }

  while (day <= endDate) {
    for (let i = 0; i < 7; i++) {
      formattedDate = format(day, "d");
      // for (let j = 0; j < dateArr.length; j++) {
      //   if(formattedDate = dateArr[j]) {
      //     dateArr.status = 
      //   }
      // }
      days.push(
        <div key={day} onClick={() => onDateClick()}>
          <span
            className={`${
              !isSameMonth(day, monthStart)
                ? "day-num"
                : isSameDay(day, selectedDate)
                ? "day-today"
                : format(currentMonth, "M") !== format(day, "M")
                ? "not-valid"
                : ""
            }`}
          >
            {formattedDate}
          </span>
        </div>
      );
      day = addDays(day, 1);
    }
    rows.push(<TableRow key={day}>{days}</TableRow>);
    days = [];
  }
  return (
    <TableBody>
      <div>{rows}</div>
      <WorkDays class="work-days">
        <DaysList class="days-list">
          <li>
            <span>근무</span>
            <br />
            <strong>12일</strong>
          </li>
          <li>
            <span>휴무</span>
            <br />
            <strong>3일</strong>
          </li>
          <li>
            <span>연차</span>
            <br />
            <strong>1일</strong>
          </li>
        </DaysList>
      </WorkDays>
    </TableBody>
  );
}

const TableBody = styled.div`
  height: calc(100% - 9rem);
  border-radius: 1.2rem 1.2rem 0.8rem 0.8rem;
  background-color: #f2f3f7;
  box-shadow: 0 -1rem 1.2rem rgba(0, 0, 0, 0.02);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
`;
const TableRow = styled.div`
  height: 16rem;
  background: url("../image/bg_calendar_week.png") repeat-y top 1rem center;
  background-size: 73rem 16rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 2.5rem 2.5rem 1rem;
  div {
    width: 3rem;
    span {
      position: relative;
      padding: 1.3rem 0 1.8rem;
      color: #bcbcbc;
      font-size: 3.8rem;
      text-align: center;
    }
    .day-num {
      font-size: 3rem;
      font-weight: 400;
    }
    .day-work {
      color: #000;
    }
    .day-today {
      color: #007473;
      ::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 4.4rem;
        height: 0.6rem;
        border-radius: 0.6rem;
        background-color: #007473;
      }
    }
    .day-off {
      color: #e12c03;
      .type-leave {
        ::after {
          content: "연차";
          position: absolute;
          bottom: -1.5rem;
          left: 50%;
          transform: translateX(-50%);
          color: #e12c03;
          font-size: 2.6rem;
          white-space: nowrap;
        }
      }
    }
  }
`;
const WorkDays = styled.div`
  width: 100%;
  max-width: 750px;
  height: 31.6rem;
  margin-top: 2rem;
  padding-top: 2.5rem;
  background: url("/image/bg_calendar_btm_jan.jpg") no-repeat top center/100%;
`;
const DaysList = styled.ul`
  display: flex;
  justify-content: space-between;
  width: 66.6rem;
  height: 13.4rem;
  margin: 0 auto;
  padding: 2.5rem 3.3rem;
  color: #fff;
  li {
    position: relative;
    width: 20rem;
    text-align: center;
    span {
      display: inline-block;
      padding-bottom: 1rem;
      font-size: 3.6rem;
      font-weight: 400;
    }
    strong {
      font-size: 3.8rem;
    }
  }
`;

date-fns를 이용해서 달력을 구현을 해주었습니다.

API 를 통신해서 받아온 데이터를 이용해

dateArr로 객체를 새로 만들어 주었습니다

여기서 date의 날짜와 달력상의 날차와 일치할때 status의 값을 클래스 네임으로 주고 싶은데 

도저히 어떻게 해야할지 for문속에 for문을 돌리는것은 너무 비효율적일것 같아 질문드립니다. ㅠㅠㅠ

어떻게 하면 될까요 ㅠㅠ