240108 react-canvas-confetti

사용이유, 선정이유

지금 하는 프로젝트의 메인은 달력페이지라고 생각한다.
그래서 글 추가 했을 때 달력페이지로 이동되는데, 그게 뭔가 약간 심심해보였다.

뭔가 글을 작성하고 달력페이지로 오면 옛날에 운동회 때 박 깨면 우수수 쏟아지던 그런 느낌을 내고 싶었다.

그러다 찾아보니 색종이가 흩날리는 효과를 나타낼 수 있는 라이브러리는 많았다

그 중에서 react-canvas-confetti를 고른 이유는, Typescript가 지원되기 때문이다.

---

사용법

yarn add react-canvas-confetti

npm을 가보면, 아주 기본적인 사용법을 알려준다

Base API 같은 경우는 style을 설정하는 곳이고
Advanced API는 custom 하는 영역이다.

Base API 만으로도 충분히 내가 원하는 기능을 하기에 충분했다

import Fireworks from 'react-canvas-confetti/dist/presets/fireworks';

const canvasStyles: React.CSSProperties = {
  position: 'fixed',
  width: '430px',
  height: '100%',
  marginRight: '400px',
  marginTop: '500px',
  zIndex: '3',
};

const decorateOptions = (originalOptions: any) => {
  return {
    ...originalOptions,
    particleCount: 100, // 조각 개수 설정
    spread: 160, // 퍼짐 정도 설정
    startVelocity: 50, // 초기 속도 설정
    ticks: 200, // 애니메이션 지속 시간 설정
    origin: { x: 0.5, y: 0.7 }, // 발사 위치 설정
    shapes: ['circle', 'circle', 'square'], // 이미지 배열을 shapes로 설정
    gravity: 2, // 중력 설정
  };
};

return (

 <Fireworks
   autorun={{ speed: 0.5, duration: 3 }}
   style={canvasStyles}
   decorateOptions={decorateOptions} // 함수 실행을 위해 괄호를 추가
 />
)

그러나 만약, custom을 하겠다면, 위 코드 처럼 decorateOptions라는 속성에 값을 넣어줘야 한다.
아쉽게도 이미지 shapes 쪽이 한 시간동안 뒤적 거렸는데 적용이 안 된다. 인생..

어쨋든, 이렇게 커스텀도 되게 간단하다.
커스텀에 대한 옵션 설명은 아래의 귀인분이 작성해주신 블로그를 참고하자.

https://velog.io/@tinubee/React-%EC%83%89%EC%A2%85%EC%9D%B4-%EC%A1%B0%EA%B0%81-%EB%82%A0%EB%A6%BC-%ED%9A%A8%EA%B3%BC-feat.-Canvas-Confetti

---

트러블

이게 post를 작성하고 나서 적용이 돼야 해서, Recoil을 이용해 boolean 값을 가지는 state를 만들고 포스트 등록하는 모달창과 달력을 서로 연결 시켰는데, 문제는 저 폭죽이 나오는 순간 끝나는 게 아니라 폭죽이 사라져도 공간을 <Fireworks.> 이 태그가 차지하고 있다. 그래서 달력에 hover기능이 작동을 안 했다.

---

해결

  useEffect(() => {
    if (isAcriveFireWork) {
      // Fireworks가 끝난 후에 isFireWork를 false로 변경
      const timeoutId = setTimeout(() => {
        setIsActiveFireWork(false);
      }, 1200); // duration 값에 맞춰서 설정 (여기서는 4초로 설정)

      // 컴포넌트가 언마운트되거나 다시 렌더링될 때 clearTimeout
      return () => clearTimeout(timeoutId);
    }
  }, [isAcriveFireWork]);

useEffect를 사용해, 몇 초뒤에 바로 true 값을 false로 바꾸게끔 설정했다.

---

결과