feat: error cat

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@ladle/react": "^2.13.0",
+    "@react-spring/web": "^9.7.3",
     "@sentry/react": "^7.53.0",
     "@sentry/tracing": "^7.53.0",
     "@testing-library/jest-dom": "^5.16.5",

src/asset/css/NotFound.css

@@ -6,3 +6,23 @@
   background-color: #2d2d2d;
   padding: 25rem 0 10rem 0;
 }
+
+#error_cat {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  z-index: 1;
+  object-fit: cover;
+  object-position: center;
+}
+
+#error_cat__paw {
+  width: 12vw;
+  height: 12vw;
+  position: absolute;
+  z-index: 2;
+  object-fit: cover;
+  object-position: center;
+  background: url("paw.png") no-repeat;
+  background-size: 100% 100%;
+}

src/component/utils/NotFound.jsx

@@ -1,13 +1,54 @@
+import { useSpring, animated } from '@react-spring/web';
 import "../../asset/css/NotFound.css";
-
 const NotFound = () => {
+  const [springs, api] = useSpring(() => ({
+    from: { opacity: 0, transform: 'translate3d(0px, 0px, 0px)' },
+    config: { duration: 500 } // 애니메이션 지속 시간 설정
+  }));
+
+  const froms = [
+    { x: 0, y: 0 },
+    { x: window.innerWidth, y: 0 },
+    { x: 0, y: window.innerHeight },
+    { x: window.innerWidth, y: window.innerHeight },
+  ];
+
+  const getRandomFromIndex = (from, to) => {
+    const min = Math.ceil(from);
+    const max = Math.floor(to);
+    return Math.floor(Math.random() * (max - min)) + min;
+  }
+
+  const handleClick = (event) => {
+    api.start({
+      to: {
+        opacity: 1, // 불투명도를 1로 설정
+        transform: `translate3d(${event.clientX}px, ${event.clientY}px, 0px)` // 위치 업데이트
+      },
+      // 애니메이션 시작시 불투명도를 0으로 설정 및 위치 설정 froms 배열에서 랜덤으로 from 선택되도록 수정
+      from: {
+        opacity: 0,
+        transform: `translate3d(${froms[getRandomFromIndex(0, froms.length)].x}px, ${froms[getRandomFromIndex(0, froms.length)].y}px, 0px)`
+      },
+      reset: true // 매 클릭마다 애니메이션 리셋
+    });
+  };
+
   return (
-    <div>
+    <>
+      <div onClick={handleClick} id="error_cat">
+        <animated.div id="error_cat__paw"
+          style={{
+            ...springs,
+          }
+          }
+        />
+      </div>
       <div className="not-found__text color-ff">
         <div className="font-48-bold">404</div>
         <div className="font-40-bold">Not Found</div>
       </div>
-    </div>
+    </>
   );
 };