개발자.. 너란놈..

framer-motion이라는 라이브러리를 이용하여 간단한 애니메이션을 구현 할 수 있다.

아래는 framer-motion을 설치하는 방법의 관련된 URL 입니다.

https://www.npmjs.com/package/framer-motion

framer-motion을 사용하면 초기시점 , 애니메이션 , 끝났을 때(사라질 때)를 선택하여 애니메이션을 만들 수 있습니다.

아래와 같이 지정하면 아코디언을 만들 수 있습니다.

주의 사항

꼭 변동이 되는 부분의 <AnimatePresence>로 감싸주어야지만 사라질 때 (exit) 동작 기능이 됩니다.

※ Debounce이란?

- 이벤트를 호출 시 연속적으로 여러번 호출 되는 것이 아닌 일정한 시간 동안 지연 시간을 주어 반복 횟수를 제어하는 것 입니다.

import { useRef, useState } from 'react';

export const useDebounce = (value) => {
	const [DebouncedVal, setDebouncedVal] = useState(value);
	const eventBlocker = useRef(null);

	//Timeout을 초기화 시켜줍니다.
	clearTimeout(eventBlocker.current);

	//일정 시간 동안 지연을 시켜줍니다.
	eventBlocker.current = setTimeout(() => {
		setDebouncedVal(value);
	}, 500);

	return DebouncedVal;
};

[2021.05.07][2021.05.07]
※2019년에 FullCalendar를 커스터마이징을 하였고 버전은 'v3' 버전을 이용하였습니다. 
현재 v5버전까지 나온것으로 확인되며, v3 버전은 아래 도메인에서 받을 수 있습니다. 

github.com/fullcalendar/fullcalendar/releases/tag/v3.10.2

먼저 FullCanlendar는 처음에 생성 될 때 옵션 값들을 넣어서 설정하는 것으로 달력을 html 해서 그려줍니다.

저는 Cell 클릭시 새로운 영역을 보여주기를 원했고, 설정에서는 어떻게 사용해야 되는지를 알 수 없어서 API를 뜯었습니다.

DayTableMixin.prototype.renderBgCellHtml로 api를 검색하여 Cell이 그려질 때 마다 Onclick 이벤트의 함수를 넣어서 사용 할 수 있게 하였습니다.

DayTableMixin.prototype.renderBgCellHtml = function (date, otherAttrs) {
        var t = this;
        var view = t.view;
        var isDateValid = t.dateProfile.activeUnzonedRange.containsDate(date); 
        var classes = t.getDayClasses(date);
        classes.unshift('fc-day', view.calendar.theme.getClass('widgetContent'));
        
        //※ td에 Onclick 이벤트를 주었습니다.
        return '<td class="' + classes.join(' ') + '" onclic="Test()"  ' + 
            (isDateValid ?
                ' data-date="' + date.format('YYYY-MM-DD') + '"' : 
                '') +
            (otherAttrs ?
                ' ' + otherAttrs :
                '') +
            '>' +         
			'</td>';
    };

td의 onclick 이벤트를 주어서 클릭 할 때마다 원하는 함수를 사용 할 수 있게 만들었습니다.

name이나 class로 데이터를 넣는다면 아래와 같이 이벤트를 할 수 있을 것 같습니다. (이것은 해보지는 않았습니다.)

※새롭게 생성되는 html일 경우 아래와 같이 사용 하여야 이벤트를 잡을 수 있습니다.

$(document).on("click","생성된 클래스 or 네임",function () {
	//소스 코딩
});

질문이 있으시면 댓글로 남겨주세요~