diff --git a/src/components/Splash.tsx b/src/components/Splash.tsx
new file mode 100644
index 00000000..4dc73d74
--- /dev/null
+++ b/src/components/Splash.tsx
@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+
+export default function Splash() {
+ const [fadeSvg, setFadeSvg] = useState(false);
+ const [fadeOut, setFadeOut] = useState(false);
+ const [hide, setHide] = useState(false);
+
+ useEffect(() => {
+ document.body.style.overflow = 'hidden';
+
+ const svgTimer = setTimeout(() => setFadeSvg(true), 1500); // SVG 먼저 페이드아웃
+ const splashTimer = setTimeout(() => setFadeOut(true), 2000); // 배경은 그다음
+ const hideTimer = setTimeout(() => {
+ setHide(true);
+ document.body.style.overflow = '';
+ }, 2500); // 전체 컴포넌트 제거
+
+ return () => {
+ clearTimeout(svgTimer);
+ clearTimeout(splashTimer);
+ clearTimeout(hideTimer);
+ document.body.style.overflow = '';
+ };
+ }, []);
+
+ if (hide) return null;
+
+ return (
+
+
+ {/* SVG 로고 */}
+
+
+