Feat#1 eun bean/calendar

[eunbeann]

🔥 Related Issues

• [ EunBean ] - 캘린더 구현 #1

💙 작업 내용

• ~ 기능 구현
• ~ 페이지 구조화 및 스타일링

✅ PR Point

무슨 이유로 어떻게 코드를 변경했는지

• 툴바 : 년,월만 구성

export default function Toolbar(props: Date) {
  const { date } = props;
  return (
    <div className="rbc-toolbar">
      <span className="rbc-toolbar-label">{`${date.getFullYear()}년 ${date.getMonth() + 1}월`}</span>
    </div>
  );
}

• 일요일 색 바뀌는 컴포넌트

export default function DateHeader(props) {
  const { date, label } = props;
  const isSunday = new Date(date).getDay() === 0;

  function headerStyle() {
    return {
      color: isSunday ? "red" : "inherit",
    };
  }

  return (
    <div className="rbc-date-header" style={headerStyle()}>
      {label}
    </div>
  );
}

• 이벤트 묶음 색 바꾸는 로직인데 ...여긴 만약 이거 쓰면 거하게 수정해야할 듯 합니다.

  //  일정 등록 => 카테고리 마다 색 구분
  const components = {
    event: (props: any) => {
      // 시간 만들기
      const dateString = props.event.start;
      const dateObject = new Date(dateString);
      const timeString = dateObject.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false });
      const eventType = props?.event?.type;

      // 이벤트 색 주기
      switch (eventType) {
        case "토마토":
          return (
            <Event style={{ background: "yellow" }}>
              {props.title} {timeString}
            </Event>
          );
        case "키위":
          return (
            <Event style={{ background: "beige" }}>
              {props.title} {timeString}
            </Event>
          );
        case "바나나":
          return (
            <Event style={{ background: "lightgrey" }}>
              {props.title} {timeString}
            </Event>
          );
        case "체리":
          return (
            <Event style={{ background: "lightblue" }}>
              {props.title} {timeString}
            </Event>
          );
        case "복숭아":
          return (
            <Event style={{ background: "lightpink" }}>
              {props.title} {timeString}
            </Event>
          );
        default:
          return null;
      }
    },
  };

어떤 부분에 리뷰어가 집중해야 하는지

이런 라이브러리가 있고,, 이런 식으로 굴리는구나 정도 봐주시면 좋겠습니다..

⚡️⚡️⚡️⚡️ 타스 제대로 안한 거 많을텐데 개패주세요 진짜 제발 ⚡️⚡️⚡️⚡️

👀 스크린샷 / GIF / 링크

- 7월이 되어버려서 그냥 냅다 7월에 박았어여 ㅎ

📚 Reference

• 구현에 참고한 링크 (필요한 경우만 작성하고 없으면 지우기)
• https://www.notion.so/pretask-bean-b45b1a9fa13941e8b30c7f37d570e9cc?pvs=4
  => 이 쪽에 아카이빙 해뒀습니다