🎨 Design: Add Splash Component UI

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",

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 (
+    <div className="relative w-full min-h-dvh overflow-hidden">
+      {showIn && <SplashIn />}
+      {showOut && (
+        <SplashOut
+          onFinish={() => {
+            goTo('/home');
+          }}
+        />
+      )}
+    </div>
+  );
 };
 
 export default Splash;

src/components/Splash/SplashIn.tsx

@@ -0,0 +1,11 @@
+import Logo from '../../assets/icons/logo.png';
+
+const SplashIn = () => {
+  return (
+    <div className="w-full min-h-dvh flex justify-center items-center overflow-hidden">
+      <img src={Logo} alt="logo" className="w-[11.2rem] animate-logo-tilt" />
+    </div>
+  );
+};
+
+export default SplashIn;

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 (
+    <div className="absolute top-0 left-0 w-full min-h-dvh z-40 pointer-events-none">
+      <div
+        className={clsx(
+          'absolute top-0 left-0 w-full min-h-dvh bg-main opacity-0 transition-opacity duration-700',
+          show && !fadeOut && 'opacity-100',
+          fadeOut && 'opacity-0',
+        )}
+      />
+
+      <div className="relative w-full min-h-dvh flex items-center justify-center">
+        <div
+          className={clsx(
+            'flex items-center gap-[1.4rem] opacity-0',
+            show && !fadeOut && 'animate-splash-fade',
+            fadeOut && 'opacity-0',
+          )}
+        >
+          <img src={Logo2} alt="logo" className="w-20" />
+          <p className="text-white font-bold text-[5rem]">Cotatus</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SplashOut;

src/pages/home/Home.tsx

@@ -7,14 +7,14 @@ import Chart from './components/Chart/Chart';
 
 const Home = () => {
   return (
-    <>
+    <div className="px-[1.6rem]">
       <Navbar />
       <Banner />
       <ListFilter />
       <Chart />
       <ListSite />
       <Alert />
-    </>
+    </div>
   );
 };
 

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 = () => {

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 {

src/styles/fonts.css

@@ -1,7 +1 @@
-@font-face {
-  font-family: 'Pretendard-Regular';
-  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff')
-    format('woff');
-  font-weight: 400;
-  font-style: normal;
-}
+@import 'pretendard/dist/web/static/pretendard.css';