🗓️ FullCalendar 사용

🗓️ 달력 라이브러리

📍 FullCalendar 이란?

: JavaScript로 만들어진 달력 라이브러리로써 month, week, day 별로 나누어 일정을 관리할 수 있다.

📍 내가 FullCalendar로 선택한 이유

1. 그냥 기본적인 달력 디자인이 나왔음 좋겠었고
2. 이전 달, 다음 달로 이동했을때 아무 문제 없었음 좋겠었고
3. 커스텀으로 CSS 수정이 가능했음 좋겠었다.
   ➡️ 3가지가 충족해서 fullcalendar를 사용했다.

📍 구현해보기

⭐️ 목표

1️⃣ 달력 띄우기
2️⃣ 이벤트 유무에 따라 생성/조회페이지로 이동
3️⃣ 이벤트 유무에 따라 hover 시 [+] 버튼 노출

📍 설치하기

npm install @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

• @fullcalendar/react : fullcalendar를 react에서 사용할 수 있도록 함
• @fullcalendar/core : 기본 기능을 제공
• @fullcalendar/daygrid : 달력 모양의 view를 제공
• @fullcalendar/interaction : fullcalendar 내 사용자 동작을 처리

1️⃣ 달력 띄우기

MyCalendar.jsx 컴포넌트 파일을 만들어서 app.jsx에서 선언해서 불러왔슴다
달력에는 일정이 있어야하니 더미 값을 입력해줬슴다

const events = [
	{ title: '😡', date: '2024-12-17', },
	{ title: '😁', date: '2024-12-19', },
	{ title: '😳', date: '2024-12-23', },
];

---

📍 dateClick, eventClick

<FullCalendar 
	defaultView="dayGridMonth" 
	plugins={[ dayGridPlugin, interactionPlugin]}
	events={events}
	dateClick={(info) => {
		alert(`날짜 클릭됨: ${info.dateStr}`);
	}}
	eventClick={(info) => {
		alert(`이벤트 클릭됨: ${info.event.startStr}`);
	}}
/>

• dateClick : 캘린더의 빈 날짜 셀을 클릭했을 때 호출됨 (주로 이벤트 생성에 사용됨)
  ➡️ info.dateStr : 선택한 날짜가 들어간다. (형식 : YYYY-MM-DD)
• eventClick : 사용자가 캘린더에 표시된 이벤트를 클릭했을 때 호출됨(이벤트 수정/삭제에 사용됨)
  ➡️ info.event.startStr : 선택한 이벤트 날짜가 들어간다. (형식 : YYYY-MM-DD)
  

---

2️⃣ 이벤트 유무에 따라 생성/조회페이지로 이동

App.jsx

<Router>
	<Routes>
		<Route path="/" element={<MyCalendar />} />
		<Route path="/diaries/create/:date" element={<CreateDiary />} />
		<Route path="/diaries/view/:date" element={<ViewDiary />} />
	</Routes>
</Router>

경로를 설정하기 위해서는 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' 선언이 필요하다

• path : 루트 경로를 지정해준다.
  ➡️ /:date : 이동하기전 페이지에서 date 값을 가져와서 경로에 보여준다.
• element : 지정해준 경로에 보여줄 페이지(컴포넌트)를 지정해준다.

MyCalendar.jsx

// 페이지 이동 함수
const navigate = useNavigate();

<FullCalendar 
	defaultView="dayGridMonth" 
	plugins={[ dayGridPlugin, interactionPlugin]}
	events={events}
	dateClick={(info) => {
		alert(`날짜 클릭됨: ${info.dateStr}`);
		navigate(`/diaries/create/${info.dateStr}`)
	}}
	eventClick={(info) => {
		alert(`이벤트 클릭됨: ${info.event.startStr}`);
		navigate(`/diaries/view/${info.event.startStr}`)
	}}
/>

dateClick을 했을 경우 이동할 컴포넌트와 eventClick을 했을 경우 이동할 컴포넌트를 지정해줬다.
➡️ 여기서 App.jsx에 경로에 있는 /:date에 ${info.dateStr}, ${info.event.startStr} 이 들어간다.

❗️여기서 문제 발생

이벤트가 있는 날짜의 윗부분을 클릭할 경우 dateClick이 된다 ➡️ 일기는 하루에 한번 작성해야하므로 dateClick이 되면 안됨

❗️해결방법

일정이 있는 날짜를 불러와서 내가 dateClick한 날짜와 비교했을 때 이벤트가 있으면 조회페이지를 없으면 생성페이지를 보여주면 된다.
const hasEvent = events.some((event) => event.start === info.dateStr);

• some 메서드 : 배열에서 조건에 맞는 요소가 하나라도 있으면 ture를 반환합니다.
  (근데 조건이 하나밖에 없어서 맞으면 맞고 틀리면 틀리겠네.....)

<FullCalendar 
	defaultView="dayGridMonth" 
	plugins={[ dayGridPlugin, interactionPlugin]}
	events={events}
	dateClick={(info) => {
		alert(`날짜 클릭됨: ${info.dateStr}`);
        
		const hasEvent = events.some((event) => event.start === info.dateStr);

		if(!hasEvent){
			navigate(`/diaries/create/${info.dateStr}`)
		}else{
			navigate(`/diaries/view/${info.dateStr}`)
		}
	}}
    
	eventClick={(info) => {
		alert(`이벤트 클릭됨: ${info.event.startStr}`);
		navigate(`/diaries/view/${info.event.startStr}`)
	}}
/>

---

3️⃣ 이벤트 유무에 따라 hover 시 [+] 버튼 노출

fullcalendar가 좋았던 이유는 내가 선택한 날짜 값을 자동으로 YYYY-MM-DD 형식으로 가공해줘서 좋았지만 dayCellDidMount 라는 사용자 동작에 내가 커스텀을 할 수 있어서 더 좋았던 것 같다.

1. 버튼 생성하기

: 이벤트가 없으면 [+]버튼 나오게 하고 있으면 안나오게해야하는데 일단 버튼부터 만들었다.

const createButton = document.createElement("button");
createButton.textContent = "+";

button이라는 태그가 생길 수 있도록 하고 이 태그 안에 '+' 텍스트를 넣었다.

2. dayCellDidMount로 hover 만들기

❗️dayCellDidMount 에는 사용할 수 있는 주요 요소

• info.date : 가공되지않은 날짜 ex) Tue Dec 17 2024 00:00:00 GMT+0000
• info.el: 날짜 셀의 DOM 요소

dateClick에는 가공된 date가 있지만 dayCellDidMount에 있는 date는 가공되어있지않아 먼저 YYYY-MM-DD 형식이 되도록 가공을 시켜준다.

const date = info.date.toLocaleDateString("en-CA");

dayCellDidMount에서 시간을 설정하는데 두가지 방법이 있다.

• toISOString().split("T")[0] : UTC 기준으로 불러와서 이벤트있는 하루보다 +1일 되어 보여진다.
• toLocaleDateString("en-CA") : 로컬 시간대 기준으로 불러와 원하는 날짜에 잘 보여진다.

둘다 YYYY-MM-DD 형식으로 가공된 상태이다.

❗️ 이제 중요한 hover 설정하기
: dayCellDidMount에서는 hover를 사용할 수 없고 addEventListener로 mouseenter, mouseleave 로 사용해야한다.

// 날짜 셀에 마우스가 올라갔을 때
info.el.addEventListener("mouseenter", () => {
	info.el.style.backgroundColor = "#ccc"; // 배경색 변경
    
	if (!hasEvent){
		info.el.appendChild(createButton);
	}});

// 날짜 셀에서 마우스가 떠났을 때
info.el.addEventListener("mouseleave", () => {
	info.el.style.backgroundColor = ""; // 원래 배경색으로 복구

	info.el.removeChild(createButton);
});

➡️ 이벤트가 없을 경우 mouseenter 시 createButton 컴포넌트를 추가하고 이벤트가 있든 없든 날짜 셀에서 벗어날 경우 mouseleave createButton 컴포넌트를 지운다.

❤️ 최종 결과물

<FullCalendar 
	defaultView="dayGridMonth" 
	plugins={[ dayGridPlugin, interactionPlugin]}
	events={events}
	dateClick={(info) => {
		alert(`날짜 클릭됨: ${info.dateStr}`);
                    
		const hasEvent = events.some((event) => event.start === info.dateStr);

	if(!hasEvent){
		navigate(`/diaries/create/${info.dateStr}`)
	}else{
		navigate(`/diaries/view/${info.dateStr}`)
	}
                    
}}
	eventClick={(info) => {
		alert(`이벤트 클릭됨: ${info.event.startStr}`);
		navigate(`/diaries/view/${info.event.startStr}`)
	}}

	// 각 날짜별로 이벤트 추가 가능한 기능 - 각 날짜 셀이 렌더링될 때마다 실행
	// dayCellDidMount 에서 사용할 수 있는 요소
	// info.date : 가공되지않은 날짜 ex) Tue Dec 17 2024 00:00:00 GMT+0000
	// info.el: 날짜 셀의 DOM 요소
	dayCellDidMount={(info)=>{
   
		// 가공되지않은 날짜 가공시키기
		const date = info.date.toLocaleDateString("en-CA");
		// 날짜와 이벤트가 있는 날짜 비교 -> 있을 경우 True, 없을 경우 Fasle
		const hasEvent = events.some((event) => event.start === date);

		// 날짜 셀에 마우스가 올라갔을 때
		info.el.addEventListener("mouseenter", () => {
		info.el.style.backgroundColor = "#ccc"; // 배경색 변경

			if (!hasEvent){
				info.el.appendChild(createButton);
			}
		});

	// 날짜 셀에서 마우스가 떠났을 때
		info.el.addEventListener("mouseleave", () => {
			info.el.style.backgroundColor = ""; // 원래 배경색으로 복구

			info.el.removeChild(createButton);
		});
	}}
/>

---

❌ 발생하는 오류 ❌

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at HTMLTableCellElement.<anonymous> (Calendar.jsx:81:29)

이벤트 있는 날짜에서 이벤트 없는 날짜로 마우스 지나가면 이 오류가 계속 뜨는데 이 오류가 쌓이면 안좋다그래서 없애고싶은데 없앨 방법을 모르겠다.. 일단 구현한 걸로 만족하지만 언젠간 고치고만다 ㅡㅅㅡ