splash

public/images/logo-small.svg

@@ -0,0 +1,13 @@
+<svg width="39" height="54" viewBox="0 0 39 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.1559 34.8412C31.1559 34.8412 24.6651 41.094 19.2416 46.3804V53.5924C18.6935 54.0179 38.4905 34.8845 38.4905 34.8845L19.2416 14.6909V22.3573L31.1559 34.8412Z" fill="#1D1D1B"/>
+<path d="M19.1479 39.0818L0 18.643L0.237992 18.405L19.3931 38.8583L19.1479 39.0818Z" fill="#1D1D1B"/>
+<path d="M19.1407 37.1635L1.75977 18.6719L1.99776 18.4412L19.3787 36.9399L19.1407 37.1635Z" fill="#1D1D1B"/>
+<path d="M19.1334 35.2523L3.52661 18.708L3.7574 18.47L19.3786 35.0215L19.1334 35.2523Z" fill="#1D1D1B"/>
+<path d="M19.1262 33.3337L5.28638 18.7366L5.50995 18.5059L19.3714 33.1029L19.1262 33.3337Z" fill="#1D1D1B"/>
+<path d="M19.1191 31.4155L7.05347 18.7729L7.26982 18.5349L19.3571 31.1848L19.1191 31.4155Z" fill="#1D1D1B"/>
+<path d="M0.375071 18.7368L0.144287 18.4988L19.1407 0L19.3715 0.237996L0.375071 18.7368Z" fill="#1D1D1B"/>
+<path d="M2.15645 18.7442L1.91846 18.5134L19.1263 1.73828L19.3571 1.97628L2.15645 18.7442Z" fill="#1D1D1B"/>
+<path d="M3.93049 18.7587L3.69971 18.5279L19.1117 3.48364L19.3425 3.71443L3.93049 18.7587Z" fill="#1D1D1B"/>
+<path d="M5.71187 18.7658L5.47388 18.5422L19.0973 5.22168L19.3281 5.45968L5.71187 18.7658Z" fill="#1D1D1B"/>
+<path d="M7.49326 18.7799L7.24805 18.5564L19.0901 6.95947L19.3137 7.19747L7.49326 18.7799Z" fill="#1D1D1B"/>
+</svg>

src/app/globals.css

@@ -127,3 +127,29 @@ tbody tr {
 .overflowX::-webkit-scrollbar {
   display: none;
 }
+
+@keyframes slideDown {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.animate-slide-down {
+  animation: slideDown 1s ease-out forwards;
+}
+
+.animate-slide-up {
+  animation: slideUp 1s ease-out forwards;
+}

src/app/layout.tsx

@@ -12,6 +12,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
 import QueryProvider from "@/config/QueryProvider";
 import ToastContainer from "@/components/Toast";
+// import Splash from "@/components/Splash";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -51,7 +52,7 @@ export default function RootLayout({
           <ReactQueryDevtools initialIsOpen={false} />
           {/* <ToastContainer /> */}
           <ToastContainer />
-
+          {/* <Splash /> */}
         </QueryProvider>
       </body>
     </html>

src/components/LogoAnimation.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
+
+const LogoAnimation: React.FC = () => {
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    if (!mounted) return null;
+
+    return (
+        <div className="relative right-6 h-[80px] mx-auto">
+            <div className="absolute top-0 right-4 w-full h-full animate-slide-down">
+                <Image
+                    src="/images/logo_left.png"
+                    alt="Logo Left Part"
+                    width={35}
+                    height={50}
+                    className="object-contain h-auto"
+                />
+            </div>
+            <div className="absolute -bottom-6 left-4 w-full h-full animate-slide-up">
+                <Image
+                    src="/images/logo_right.png"
+                    alt="Logo Right Part"
+                    width={35}
+                    height={50}
+                    className="object-contain h-auto"
+                />
+            </div>
+        </div>
+    );
+};
+
+export default LogoAnimation; 

src/components/Splash.tsx

@@ -0,0 +1,36 @@
+'use client';
+import { useEffect, useState } from 'react';
+import LogoAnimation from './LogoAnimation';
+
+const Splash = () => {
+    const [fadeOut, setFadeOut] = useState(false);
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+        const timer = setTimeout(() => {
+            setFadeOut(true);
+        }, 2000);
+        return () => clearTimeout(timer);
+    }, []);
+
+    useEffect(() => {
+        if (fadeOut) {
+            document.body.style.overflow = 'auto';
+        } else {
+            document.body.style.overflow = 'hidden';
+        }
+    }, [fadeOut]);
+
+    if (!mounted) return null;
+
+    return (
+        <div className={`w-screen h-screen fixed top-0 right-0 bg-white flex items-center justify-center overflow-hidden z-50 transition-opacity duration-500 ${fadeOut ? 'opacity-0' : 'opacity-100'}`}>
+            <div className="w-[80px]">
+                <LogoAnimation />
+            </div>
+        </div>
+    );
+};
+
+export default Splash;