diff --git a/package-lock.json b/package-lock.json index 3a0d4b0..c99a842 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "axios": "^1.13.2", "clsx": "^2.1.1", "framer-motion": "^12.23.26", + "pretendard": "^1.3.9", "react": "^19.2.0", "react-dom": "^19.2.0", "react-router-dom": "^7.11.0", @@ -70,6 +71,7 @@ "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -3227,6 +3229,7 @@ "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.12.tgz", "integrity": "sha512-graRZspg7EoEaw0a8faiUASCyJrqjKPdqJ9EwuDRUF9mEYJ1YPczI9H+/agJ0mOJkPCJDk0lsz5QTrLZ/jQ2rg==", "license": "MIT", + "peer": true, "dependencies": { "@tanstack/query-core": "5.90.12" }, @@ -3337,6 +3340,7 @@ "integrity": "sha512-vnDVpYPMzs4wunl27jHrfmwojOGKya0xyM3sH+UE5iv5uPS6vX7UIoh6m+vQc5LGBq52HBKPIn/zcSZVzeDEZg==", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -3347,6 +3351,7 @@ "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -3426,6 +3431,7 @@ "integrity": "sha512-6/cmF2piao+f6wSxUsJLZjck7OQsYyRtcOZS02k7XINSNlz93v6emM8WutDQSXnroG2xwYlEVHJI+cPA7CPM3Q==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.50.0", "@typescript-eslint/types": "8.50.0", @@ -3673,6 +3679,7 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "devOptional": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -3932,6 +3939,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -4727,6 +4735,7 @@ "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -6884,6 +6893,12 @@ "node": ">= 0.8.0" } }, + "node_modules/pretendard": { + "version": "1.3.9", + "resolved": "https://registry.npmjs.org/pretendard/-/pretendard-1.3.9.tgz", + "integrity": "sha512-PaQAADyLY5v4kYFwkpSJHbSSYIkiriY/1xXw75TKoZ9UQQqeU+tvP05yTdZAWibiIYoo8ZKtRv8PM7w0IaywSw==", + "license": "OFL-1.1" + }, "node_modules/prettier": { "version": "3.7.4", "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.7.4.tgz", @@ -6944,6 +6959,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz", "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -6953,6 +6969,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz", "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -6972,6 +6989,7 @@ "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz", "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==", "license": "MIT", + "peer": true, "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" @@ -7072,7 +7090,8 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/redux-thunk": { "version": "3.1.0", @@ -7924,6 +7943,7 @@ "integrity": "sha512-t/R3R/n0MSwnnazuPpPNVO60LX0SKL45pyl9YlvxIdkH0Of7D5qM2EVe+yASRIlY5pZ73nclYJfNANGWPwFDZw==", "devOptional": true, "license": "BSD-2-Clause", + "peer": true, "dependencies": { "@jridgewell/source-map": "^0.3.3", "acorn": "^8.15.0", @@ -8098,6 +8118,7 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -8311,6 +8332,7 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz", "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==", "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", @@ -8702,6 +8724,7 @@ "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -8759,6 +8782,7 @@ "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==", "dev": true, "license": "MIT", + "peer": true, "bin": { "rollup": "dist/bin/rollup" }, @@ -9027,6 +9051,7 @@ "integrity": "sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==", "dev": true, "license": "MIT", + "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/package.json b/package.json index 819030e..55530a3 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "axios": "^1.13.2", "clsx": "^2.1.1", "framer-motion": "^12.23.26", + "pretendard": "^1.3.9", "react": "^19.2.0", "react-dom": "^19.2.0", "react-router-dom": "^7.11.0", diff --git a/src/assets/icons/logo.png b/src/assets/icons/logo.png new file mode 100644 index 0000000..e894aae Binary files /dev/null and b/src/assets/icons/logo.png differ diff --git a/src/assets/icons/logo.svg b/src/assets/icons/logo.svg deleted file mode 100644 index 8c7e182..0000000 --- a/src/assets/icons/logo.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/icons/logo2.png b/src/assets/icons/logo2.png new file mode 100644 index 0000000..9c57350 Binary files /dev/null and b/src/assets/icons/logo2.png differ diff --git a/src/components/Splash/Splash.tsx b/src/components/Splash/Splash.tsx index fe9addf..0beacd0 100644 --- a/src/components/Splash/Splash.tsx +++ b/src/components/Splash/Splash.tsx @@ -1,5 +1,34 @@ +import { useEffect, useState } from 'react'; +import SplashIn from './SplashIn'; +import SplashOut from './SplashOut'; +import useNavigation from '../../hooks/useNavigation'; + const Splash = () => { - return <>; + const [showIn, setShowIn] = useState(true); + const [showOut, setShowOut] = useState(false); + const { goTo } = useNavigation(); + + useEffect(() => { + const timers: number[] = []; + + timers.push(setTimeout(() => setShowOut(true), 350)); + timers.push(setTimeout(() => setShowIn(false), 1200)); + + return () => timers.forEach(clearTimeout); + }, []); + + return ( +
+ {showIn && } + {showOut && ( + { + goTo('/home'); + }} + /> + )} +
+ ); }; export default Splash; diff --git a/src/components/Splash/SplashIn.tsx b/src/components/Splash/SplashIn.tsx new file mode 100644 index 0000000..4569087 --- /dev/null +++ b/src/components/Splash/SplashIn.tsx @@ -0,0 +1,11 @@ +import Logo from '../../assets/icons/logo.png'; + +const SplashIn = () => { + return ( +
+ logo +
+ ); +}; + +export default SplashIn; diff --git a/src/components/Splash/SplashOut.tsx b/src/components/Splash/SplashOut.tsx new file mode 100644 index 0000000..e3433dc --- /dev/null +++ b/src/components/Splash/SplashOut.tsx @@ -0,0 +1,52 @@ +import { useEffect, useState } from 'react'; +import clsx from 'clsx'; +import Logo2 from '../../assets/icons/logo2.png'; + +const SplashOut = ({ onFinish }: { onFinish: () => void }) => { + const [show, setShow] = useState(false); + const [fadeOut, setFadeOut] = useState(false); + + useEffect(() => { + requestAnimationFrame(() => setShow(true)); + + const fadeTimer = setTimeout(() => { + setFadeOut(true); + }, 800); + + const endTimer = setTimeout(() => { + onFinish(); + }, 1200); + + return () => { + clearTimeout(fadeTimer); + clearTimeout(endTimer); + }; + }, [onFinish]); + + return ( +
+
+ +
+
+ logo +

Cotatus

+
+
+
+ ); +}; + +export default SplashOut; diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index 324e851..56b4eea 100644 --- a/src/pages/home/Home.tsx +++ b/src/pages/home/Home.tsx @@ -7,14 +7,14 @@ import Chart from './components/Chart/Chart'; const Home = () => { return ( - <> +
- +
); }; diff --git a/src/pages/notFound/NotFound.tsx b/src/pages/notFound/NotFound.tsx index acf77d5..c0ac35e 100644 --- a/src/pages/notFound/NotFound.tsx +++ b/src/pages/notFound/NotFound.tsx @@ -1,4 +1,4 @@ -import Logo from '../../assets/icons/logo.svg'; +import Logo from '../../assets/icons/logo.png'; import useNavigation from '../../hooks/useNavigation'; const NotFound = () => { diff --git a/src/styles/base.css b/src/styles/base.css index 4117eba..cfb6a43 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -1,7 +1,9 @@ @layer base { :root { --vh: 100%; - --font-family: 'Pretendard-Regular'; + --font-family: + 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Apple SD Gothic Neo', 'Noto Sans KR', Arial, sans-serif; } html { @@ -67,6 +69,7 @@ button { @apply cursor-pointer p-0; + font-family: inherit; } textarea { diff --git a/src/styles/fonts.css b/src/styles/fonts.css index 247140a..a5c219a 100644 --- a/src/styles/fonts.css +++ b/src/styles/fonts.css @@ -1,7 +1 @@ -@font-face { - font-family: 'Pretendard-Regular'; - src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') - format('woff'); - font-weight: 400; - font-style: normal; -} +@import 'pretendard/dist/web/static/pretendard.css'; diff --git a/src/styles/utilities.css b/src/styles/utilities.css index 2f33e55..d697a15 100644 --- a/src/styles/utilities.css +++ b/src/styles/utilities.css @@ -13,6 +13,45 @@ } .pageContainer { - @apply w-full max-w-[430px] min-h-screen mx-auto bg-background px-[1.6rem]; + @apply w-full max-w-[430px] min-h-screen mx-auto bg-background; } } + +@keyframes logoTiltOut { + 0% { + transform: rotate(0deg) translateX(0) scale(1); + opacity: 1; + } + + 15% { + transform: rotate(35deg) translateX(0) scale(1); + opacity: 1; + } + + 25% { + transform: rotate(0deg) translateX(-8px) scale(0.98); + opacity: 0.95; + } + + 100% { + transform: rotate(0deg) translateX(-80px) scale(0.4); + opacity: 0.15; + } +} + +.animate-logo-tilt { + animation: logoTiltOut 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; +} + +@keyframes splashFadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.animate-splash-fade { + animation: splashFadeIn 0.7s ease-out forwards; +}