Merge pull request #44 from KERT-core/addition/404-glitch

Addition/404 Glitch 효과 추가

package.json

@@ -20,6 +20,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
+    "react-powerglitch": "^1.0.3",
     "react-router-dom": "^6.25.1",
     "react-transition-group": "^4.4.5",
     "styled-components": "^6.1.12",

src/pages/NotFound.jsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import styled from 'styled-components';
+import { useGlitch } from 'react-powerglitch';
 
 import { Span } from '../components/typograph/Text';
 
@@ -85,6 +86,15 @@ const Background = styled.div`
 `;
 
 export default function NotFound() {
+  const glitch = useGlitch({
+    timing: {
+      easing: 'ease-in-out',
+    },
+    slice: {
+      hueRotate: false,
+    },
+  });
+
   const example = [
     '해킹 시도는 아니시죠?',
     'URL 오타라고 생각할게요',
@@ -102,10 +112,12 @@ export default function NotFound() {
         <Square fill="var(--primary-text-color)" />
         <Square fill="var(--primary-text-color)" />
       </Background>
-      <NotFoundIcon
-        fill="var(--primary-text-color)"
-        style={{ width: '200px', opacity: '0.5' }}
-      />
+      <div ref={glitch.ref}>
+        <NotFoundIcon
+          fill="var(--primary-text-color)"
+          style={{ width: '200px', opacity: '0.5' }}
+        />
+      </div>
       <div>
         <Title>찾을 수 없는 페이지</Title>
         <Subtitle>{message}</Subtitle>