새로운 기능 구현

이어서,
식단표를 만들고 있다!

새로 구현한 기능은 다음과 같다
1. 등록된 메뉴가 월별로 다르게 보일 수 있게 등록하기
2. 달력에서 오늘 날짜 표시하기
3. 현재 보이는 달력의 등록된 메뉴들을 초기화하기
4. 현재 보이는 달력의 이미지 저장하기

1. 등록된 메뉴가 월별로 다르게 보일 수 있게 등록하기

그동안은 최종 메뉴 리스트에서 일자만 관리를 해와서
2023년 4월 1일에 등록한 메뉴가 5월 1일에도 나오고, 6월 1일에도 나오고...
일자만 같으면 동일하게 나왔다.

      //   해당 달의 날짜가 아니면 date에 null, 맞다면 날짜 그대로 객체에 들어감
      format(currentMonth, "M") !== format(day, "M")
        ? days.push({ date: null })
        : days.push({ date: format(day, "d") });
     //    ㄴ 달력의 날짜에 일자만 push 시켰다. 
      day = addDays(day, 1);

그래서 push 되는 날짜를 년-월-일 모두 넣어 해당 년도, 해당 달, 해당 일자에 어떤 메뉴를 등록했는지 확인할 수 있도록 코드를 수정했다.

format(currentMonth, "M") !== format(day, "M")
        ? days.push({ date: null })
        : days.push({
            year: format(day, "yyyy"),
            month: format(currentMonth, "M"),
            day: formattedDay,
       // year, month, day 전부 push
          });
      day = addDays(day, 1);

 /* 달력 컴포넌트 */
onDropCapture={() =>
                  setMenuDate(
                    `${dayObject.year}-${dayObject.month}-${dayObject.day}`
              // 최종 메뉴리스트에 들어가는 date에 "yyyy-mm-dd" 형식으로 들어갈 수 있게 함
                  )
                }

메뉴리스트에 들어가는 날짜 형식이 달라져서,
달력에 보여지는 메뉴들의 조건(날짜 조건)도 조금씩 바뀌었다.

---

2. 달력에서 오늘 날짜 표시하기

위에서 바꿔줬던 날짜 형식의 도움을 받아 오늘 날짜와 달력 칸의 날짜를 비교해서
날짜가 같으면 달력 칸의 배경색이 변경되게 구현했다.

<BodyColCellBox
   calendarDate={`${dayObject.year}${dayObject.month}${dayObject.day}`}
   todayDate={todayDate}
(...)
>

css 라이브러리로 styled-component를 사용하고 있기 때문에 달력의 날짜와 현재 날짜를 prop으로 보내줬다.

const BodyColCellBox = styled.div<{
  calendarDate: string;
  todayDate: string;
}>`
  (...);

  background-color: ${({ calendarDate, todayDate }) =>
    calendarDate === todayDate ? "#ffc8f12e" : "null"};

  //(...)
`;

짠
오늘 날짜만 색상이 바뀌었다

---

3. 현재 보이는 달력의 등록된 메뉴들을 초기화하기

초기화 버튼을 누르면 현재 달력에 등록된 메뉴들을 없애는 기능을 만들었다.

export default function useResetMenu() {
  const { menuList, setMenuList } = mainMenuStore();
  // 전역 store에서 state 가져오기

  function resetMenu(currentMonth: Date) {
    let copyMenuList = [...menuList];

    copyMenuList = copyMenuList.filter(
      (menuList) => menuList.date.split("-")[1] !== format(currentMonth, "M")
    );
    // 기존 menuList의 '월'과 달력에 보이고 있는 '월'을 비교해서, 
    // 같지 않은 메뉴리스트만 모아 state를 변경시켰다. 

    setMenuList(copyMenuList);
  }

  return { resetMenu };
}

4. 현재 보이는 달력의 이미지 저장하기

html2canvas 이용해서 달력 부분만 이미지 파일로 저장될 수 있게 버튼을 만들었다.

저장시킨 이미지 중 일부. 근데?

초기화/이미지저장/달력 이동하는 버튼은 나오지 않게 하고 싶었다.

저 버튼들을 감싸고 있는 태그 안에 data-html2canvas-ignore="true" 넣어주면 그 태그는 무시되고 이미지 저장이 된다.

<HeaderColEnd className="col col-end" 👉 data-html2canvas-ignore="true" 👈>
        <button type="button" onClick={clickResetMenuButton}>
          초기화
        </button>
        <button
          onClick={() =>
            saveCalenderImage(
              "captureSection",
              format(currentMonth, "M"),
              format(currentMonth, "yyyy")
            )
          }
        >
          이미지 저장
        </button>

짠

---

식단표에 어울리는 디자인을 찾기가 참 힘들다

디자이너... 구합니다........