Toast Calendar 라이브러리 사용 이슈

[ 문제 사항 ]

달력 구현

정상

비정상

• 여러 달력 디자인을 봤는데 우리 홈페이지 디자인에 제일 맞고 깔끔하고 기능도 다양한 UI가 TOAST UI 의 달력이었음 . 그래서 React 에서 사용가능한 라이브러리 설치해서 사용하려고 했는데 ...
• 달력을 month 단위로 표현하는게 렌더링이 제대로 안됨 ( 주 단위 , 일 단위는 전부 잘됨) , (1,2,3 ... 날짜 나오는 부분이 안나옴 )
• 개발자 도구로 가서 확인해보면 저 부분 담당하는 html의 css를 직접 개발자 도구에서 조절해주면 잘 나옴 (직접 height : 100% 주기)
• 구글링 해봐도 해결방법을 찾지 못함

[해결 방안]

결론부터 말하면 아직 해결 못한 거 같음 내 손을 떠남 아무리 생각해봐도 난 모르겠음

시도한 1번째 방법

직접 document.query ..... 해서 문제 있는 부분 height를 직접 조절해봄 안됨

시도한 2번째 방법

이 방법은 Calendar 컴포넌트가 어떤 메소드를 실행하면 달력이 제대로 보인다는 거에 착안한 방법임. hook 폴더에 가면 내가 만든 커스텀 훅이 있음.

  const changeView = () => {
    calendarRef.current?.getInstance().changeView(view, true);
    calendarRef.current?.getInstance().prev();
  };

  useEffect(() => {
    changeView();
  }, [calendarRef.current]);

캘린더에 ref 달리면 메소드 실행해서 달력 제대로 보여주라고 짠거임

결과

개발자 도구 키고 새로고침 하면 제대로 나옴 개발자 도구 끄고 새로고침 하면 비어있음 ?????????????? ?????????????? 내 노트북이 이상할수도 있으니까 한 번 테스트 해보면 좋겠음 해결방법 생각나는 거 있으면 한 번 시도해보면 좋겠음