feat/메인 페이지 스플래시 화면 완성

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 (
+    <div
+      className={`fixed inset-0 z-[99999] flex items-center justify-center bg-white transition-opacity duration-700 ${
+        fadeOut ? 'opacity-0' : 'opacity-100'
+      }`}
+    >
+      <div
+        className={`w-[160px] h-[143px] transition-opacity duration-500 ${
+          fadeSvg ? 'opacity-0' : 'opacity-100'
+        }`}
+      >
+        {/* SVG 로고 */}
+        <svg
+          width='160'
+          height='143'
+          viewBox='0 0 220 162'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className='animate-fadeIn'
+        >
+          <path
+            d='M131.003 78.277L125.142 74.8242V56.5928C125.142 55.9371 124.61 55.4056 123.955 55.4056C123.299 55.4056 122.768 55.9371 122.768 56.5928V74.8242L116.907 78.277C116.738 78.3767 116.808 78.636 117.005 78.636H130.905C131.101 78.636 131.172 78.3767 131.003 78.277Z'
+            fill='white'
+          />
+          <path
+            d='M99.3119 21.4762V1.09598C99.3119 0.490702 98.8212 0 98.2159 0H92.3369C91.7316 0 91.2409 0.490702 91.2409 1.09598V21.4762C91.2409 22.6187 90.8605 23.7286 90.1595 24.6309L87.5434 27.9987C85.8948 30.1208 85 32.7316 85 35.4187V76.3902C85 77.6301 86.0051 78.6352 87.2449 78.6352H103.308C104.548 78.6352 105.553 77.6301 105.553 76.3902V35.4187C105.553 32.7314 104.658 30.1208 103.009 27.9987L100.393 24.6309C99.6923 23.7286 99.3119 22.6187 99.3119 21.4762Z'
+            fill='#6A42DB'
+          />
+          <path
+            d='M132.407 34.0588H115.505C115.505 34.0588 111.557 43.8126 113.404 50.0467C114.942 55.2387 119.516 57.4626 122.109 58.3274C123.308 58.7273 124.604 58.7273 125.803 58.3274C128.396 57.4626 132.97 55.2387 134.508 50.0467C136.355 43.8126 132.407 34.0588 132.407 34.0588Z'
+            fill='white'
+          />
+          <path
+            d='M112.99 44.4129C112.827 46.3733 112.899 48.3421 113.404 50.0475C114.942 55.2394 119.516 57.4633 122.109 58.3281C123.308 58.728 124.604 58.728 125.803 58.3281C128.396 57.4633 132.97 55.2394 134.508 50.0475C135.013 48.3421 135.085 46.3733 134.922 44.4129H112.99Z'
+            fill='#6A42DB'
+          />
+          <path
+            d='M105.552 59.3543H94.6565C93.5739 59.3543 92.6963 58.4768 92.6963 57.3942V43.5048C92.6963 42.4221 93.5739 41.5446 94.6565 41.5446H105.552V59.3543Z'
+            fill='#9170EE'
+          />
+          <path
+            d='M98.2153 0H92.3362C91.7309 0 91.2402 0.490702 91.2402 1.09598V19.0391H99.3114C99.3114 19.0391 99.3114 5.14661 99.3114 1.09598C99.3112 0.490702 98.8205 0 98.2153 0Z'
+            fill='#5732BF'
+          />
+          <path
+            d='M99.5181 7.46664H91.036C90.7886 7.46664 90.5879 7.26606 90.5879 7.01849V3.96354C90.5879 3.71612 90.7885 3.51538 91.036 3.51538H99.5181C99.7655 3.51538 99.9662 3.71596 99.9662 3.96354V7.01849C99.9661 7.26606 99.7655 7.46664 99.5181 7.46664Z'
+            fill='#5732BF'
+          />
+          <path
+            d='M66.4873 142.046C66.4873 144.794 65.9614 147.386 64.9098 149.825C63.889 152.232 62.4662 154.347 60.6412 156.168C58.8472 157.958 56.7284 159.378 54.2848 160.427C51.8721 161.446 49.2894 161.955 46.5364 161.955C44.0619 161.955 41.6802 161.523 39.3913 160.659C37.1333 159.794 35.0918 158.529 33.2668 156.862C31.4419 158.529 29.3849 159.794 27.096 160.659C24.8071 161.523 22.4253 161.955 19.9508 161.955C17.1979 161.955 14.5997 161.446 12.1561 160.427C9.74342 159.378 7.62462 157.958 5.79966 156.168C4.00563 154.347 2.58278 152.232 1.53111 149.825C0.51037 147.386 0 144.794 0 142.046V94.636H13.316V142.046C13.316 142.972 13.4861 143.852 13.8264 144.685C14.1666 145.488 14.6306 146.198 15.2183 146.815C15.8369 147.402 16.5484 147.865 17.3526 148.204C18.1568 148.544 19.0229 148.714 19.9508 148.714C20.8788 148.714 21.7448 148.544 22.5491 148.204C23.3533 147.865 24.0492 147.402 24.6369 146.815C25.2556 146.198 25.735 145.488 26.0753 144.685C26.4155 143.852 26.5856 142.972 26.5856 142.046V94.636H39.9016V142.046C39.9016 142.972 40.0718 143.852 40.412 144.685C40.7523 145.488 41.2162 146.198 41.8039 146.815C42.4226 147.402 43.134 147.865 43.9382 148.204C44.7424 148.544 45.6085 148.714 46.5364 148.714C47.4644 148.714 48.3305 148.544 49.1347 148.204C49.9389 147.865 50.6349 147.402 51.2226 146.815C51.8412 146.198 52.3206 145.488 52.6609 144.685C53.0321 143.852 53.2177 142.972 53.2177 142.046V94.636H66.4873V142.046Z'
+            fill='#101318'
+          />
+          <path d='M94.2467 94.636H79.9502V161.955H94.2467V94.636Z' fill='#101318' />
+          <path
+            d='M160.928 161.492H146.684L121.026 117.786V161.492H107.71V95.0989H121.954L147.612 138.852V95.0989H160.928V161.492Z'
+            fill='#101318'
+          />
+          <path
+            d='M220 161.492H174.392V95.0989H220V108.387H187.708V121.675H209.561V134.963H187.708V148.204H220V161.492Z'
+            fill='#101318'
+          />
+        </svg>
+      </div>
+    </div>
+  );
+}

src/pages/_app.tsx

@@ -1,6 +1,6 @@
 import '@/styles/globals.css';
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { HydrationBoundary, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { SpeedInsights } from '@vercel/speed-insights/next';
@@ -12,6 +12,7 @@ import { Toaster } from 'sonner';
 import ErrorBoundary from '@/components/common/ErrorBoundary';
 import Gnb from '@/components/common/Gnb';
 import { LoadingOverlay } from '@/components/common/LoadingOverlay';
+import Splash from '@/components/Splash';
 import { useInitUser } from '@/hooks/useInitUser';
 
 import type { AppProps } from 'next/app';
@@ -34,6 +35,15 @@ export default function App({ Component, pageProps }: AppProps) {
   const isLanding = pathname === '/';
   const is404 = pathname === '/404';
 
+  const [showSplash, setShowSplash] = useState(isLanding);
+
+  useEffect(() => {
+    if (isLanding) {
+      const timer = setTimeout(() => setShowSplash(false), 2500); // 2초 보여주기
+      return () => clearTimeout(timer);
+    }
+  }, [isLanding]);
+
   return (
     <>
       <Head>
@@ -51,6 +61,7 @@ export default function App({ Component, pageProps }: AppProps) {
             },
           }}
         />
+        {showSplash && <Splash />}
         <LoadingOverlay />
         <HydrationBoundary state={pageProps.dehydratedState}>
           {!hideHeader && <Gnb />}

src/styles/globals.css

@@ -180,3 +180,20 @@
     font-weight: 400;
   }
 }
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 0.8s ease-out forwards;
+}
+
+html {
+  scrollbar-gutter: stable;
+}