Feat#5 hyein/calendar

[hae2ni]

🔥 Related Issues

• close [ Hyein ] 캘린더 구현 #5

💙 작업 내용

• ~요일 + 시간 데이터를 가지고 달력에 표기를 해주세요.
• ~ 학생마다 다른 색깔로 표기해주세요.
• ~시간순서대로 표기해주세요!
• ~(심화) 날짜를 클릭하면 날짜와 시간을 수정 or 추가할 수 있도록.

✅ PR Point

React 캘린더 관련 라이브러리를 사용하지 않고 구현해 보았습니다.
다만, js 날짜 라이브러리인 date fns는 사용했습니다

상단에 년, 월을 표기하고 넘기는 로직입니다.

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>
  );
}

상단 요일 로직입니다.

export default function Week() {
  const DATE: string[] = ["일", "월", "화", "수", "목", "금", "토", "일"];

  const dateList: JSX.Element[] = DATE.map((day, index) => <DayWrapper key={index}>{day}</DayWrapper>);
  return <WeekWrapper>{dateList}</WeekWrapper>;
}

날짜를 보여주고, 표기하는 로직입니다.

export default function Days({ currentMonth, selectedDate }: DaysProps) {
  const monthStart = startOfMonth(currentMonth); //date-fns method들로 가져왔습니다. 
  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())),
  })); //그냥 data로는 date를 읽기가 어려워서 `map`을 돌려서 바꾸었습니다.

  const sortedScheduleData = scheduleData.sort((a, b) => a.time.localeCompare(b.time));
//시간순으로 정렬하였습니다!
//참고로, 7월로 날짜 변경했습니당~

  const rows: React.ReactNode[] = [];
  let days: React.ReactNode[] = [];
  let day: Date = startDate;
  let formattedDate = "";

//그 주 마지막 날,,그니까 8월 5일까지 보이잖아여? 달력에서 흐리게, 그때까지 보이게 설정하였습니다.
  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>;
}

사실 아직, 심화부분은 못 해서,,,
아마 심화부분은 데이터를 더 가공해야 할 것 같아서 pwa 이후 시간 남으면 새로운 이슈 파서 진행할 것 같습니다!

😡 Trouble Shooting

• 커다란 trouble Shooting은 없었습니다 (아직 심화과제를 안 해서 인 것 같아요)
• 학생마다 고유한 색깔 어떻게 할 까하다가 데이터를 가공하지 않고, 그냥 styled-component의 switch문으로 해주었습니다. 나중에 서버에서 랜덤으로 학생마다 부여하는 게 좋을 것 같긴 하더라구요

${({ $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;
    }

• 사실, 시간 순으로 보여주기 위해 sort 메소드를 썼는데 이게 확실히 맞는 건지는 모르겠습니다. 일단 ui상으로는 시간상으로 보여집니다!

• 처음에 캘린더부분의 styled-component 의 props를 가공하는 과정이 쉽지 않았습니다ㅠㅠ(구글링,,챗피티 사랑해요 하하)

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%; " : ""}    
  `};
`;

👀 스크린샷 / GIF / 링크

• 아직 심화과제까지 가지 못해서,,, 스크린샷으로 첨부합니다.

📚 Reference

• date fns로 리액트 캘린더 구현
• date fns 캘린더 구현2
• date fns 알아보기
• date fns 공식문서