diff --git a/package-lock.json b/package-lock.json index b8aa53d..4375e7f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,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", @@ -3802,6 +3803,11 @@ "version": "4.2.0", "license": "MIT" }, + "node_modules/powerglitch": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/powerglitch/-/powerglitch-2.3.4.tgz", + "integrity": "sha512-QVCs/scRcI9caxykt95civDyZ0L0TahFSP2BU/Mn/db4WweKcT8rUwVdp/O+pr9nF744mVMFoYsMh9Zx7nW3vQ==" + }, "node_modules/prelude-ls": { "version": "1.2.1", "dev": true, @@ -4008,6 +4014,18 @@ "version": "16.13.1", "license": "MIT" }, + "node_modules/react-powerglitch": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/react-powerglitch/-/react-powerglitch-1.0.3.tgz", + "integrity": "sha512-jYIcvZJQoRWKckOWfgc59Bju6tLiBl2sRkWIr8X8/8RYXd/e07H7k+jJXinlemM/IGGrcG0Iq0HmJbAP13FrVg==", + "dependencies": { + "powerglitch": "^2.3.2" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, "node_modules/react-router": { "version": "6.26.2", "license": "MIT", diff --git a/package.json b/package.json index 7b5d313..766766f 100644 --- a/package.json +++ b/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", diff --git a/src/pages/NotFound.jsx b/src/pages/NotFound.jsx index 69d205a..6ae2190 100644 --- a/src/pages/NotFound.jsx +++ b/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() { - +
+ +
찾을 수 없는 페이지 {message}