splash

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;