splash test

src/app/layout.tsx

@@ -9,6 +9,7 @@ import Header from "@/shared/Header";
 import Footer from "@/shared/Footer";
 import SideBar from "@/shared/SideBar";
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { Splash } from "@/components/Splash";
 
 import QueryProvider from "@/config/QueryProvider";
 import ToastContainer from "@/components/Toast";
@@ -44,6 +45,7 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <QueryProvider>
+          <Splash />
           <div className="font-irancell xl:p-16 p-4">
             <SideBar />
             <Header />

src/components/Splash.module.css

@@ -0,0 +1,53 @@
+.splashContainer {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
+  will-change: opacity;
+  animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.splashContainer.fadeOut {
+  will-change: opacity;
+  animation: fadeOut 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.logoContainer {
+  position: relative;
+  width: 8rem;
+  height: 8rem;
+  will-change: transform;
+  animation: scaleUp 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes scaleUp {
+  0% {
+    transform: translateZ(0) scale(0.5);
+  }
+  100% {
+    transform: translateZ(0) scale(1.5);
+  }
+}

src/components/Splash.tsx

@@ -1,36 +1,50 @@
 'use client';
 import { useEffect, useState } from 'react';
-import LogoAnimation from './LogoAnimation';
+import Image from 'next/image';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
+import styles from './Splash.module.css';
 
-const Splash = () => {
+export const Splash = () => {
-    const [fadeOut, setFadeOut] = useState(false);
+    const [isVisible, setIsVisible] = useState(true);
-    const [mounted, setMounted] = useState(false);
+    const [isFading, setIsFading] = useState(false);
+    const isMobile = useMediaQuery('(max-width: 768px)');
 
     useEffect(() => {
-        setMounted(true);
+        const hasShown = sessionStorage.getItem('splashShown');
-        const timer = setTimeout(() => {
-            setFadeOut(true);
-        }, 2000);
-        return () => clearTimeout(timer);
-    }, []);
 
-    useEffect(() => {
+        if (isMobile && !hasShown) {
-        if (fadeOut) {
+            // Show splash immediately
-            document.body.style.overflow = 'auto';
+            requestAnimationFrame(() => {
+                setIsVisible(true);
+                const delayTimer = setTimeout(() => {
+                    setIsFading(true);
+                    const fadeTimer = setTimeout(() => {
+                        setIsVisible(false);
+                        sessionStorage.setItem('splashShown', 'true');
+                    }, 800);
+                    return () => clearTimeout(fadeTimer);
+                }, 6000);
+
+                return () => clearTimeout(delayTimer);
+            });
         } else {
-            document.body.style.overflow = 'hidden';
+            setIsVisible(false);
         }
-    }, [fadeOut]);
+    }, [isMobile]);
 
-    if (!mounted) return null;
+    if (!isVisible) 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={`${styles.splashContainer} ${isFading ? styles.fadeOut : ''}`}>
-            <div className="w-[80px]">
+            <div className={styles.logoContainer}>
-                <LogoAnimation />
+                <Image
+                    src="/images/logo.svg"
+                    alt="Logo"
+                    fill
+                    className="object-contain"
+                    priority
+                />
             </div>
         </div>
     );
-};
+};
-
-export default Splash;

src/hooks/useMediaQuery.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+export const useMediaQuery = (query: string): boolean => {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+
+    // Set initial value
+    setMatches(media.matches);
+
+    // Create event listener
+    const listener = (e: MediaQueryListEvent) => setMatches(e.matches);
+
+    // Add listener
+    media.addEventListener("change", listener);
+
+    // Clean up
+    return () => media.removeEventListener("change", listener);
+  }, [query]);
+
+  return matches;
+};

tailwind.config.js

@@ -0,0 +1,33 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+        './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+        './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+        './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    ],
+    theme: {
+        extend: {
+            keyframes: {
+                fadeIn: {
+                    '0%': { opacity: '0' },
+                    '100%': { opacity: '1' },
+                },
+                fadeOut: {
+                    '0%': { opacity: '1' },
+                    '100%': { opacity: '0' },
+                },
+                scaleUp: {
+                    '0%': { transform: 'scale(0.5)' },
+                    '50%': { transform: 'scale(1.2)' },
+                    '100%': { transform: 'scale(1)' },
+                },
+            },
+            animation: {
+                fadeIn: 'fadeIn 0.5s ease-in-out',
+                fadeOut: 'fadeOut 0.5s ease-in-out',
+                scaleUp: 'scaleUp 1s ease-out',
+            },
+        },
+    },
+    plugins: [],
+};