feat: 애니메이션 조건부 딜레이추가

src/components/home/HeroSection.tsx

@@ -1,19 +1,25 @@
 import { motion } from 'framer-motion';
 import Image from 'next/image';
 
+import useNavigationStore from '@/stores/routerStore';
+
 import HeroSectionLayout from './HeroSectionLayout';
 import { ImageCard } from '../common/card/ImageCard';
 import AverageStar from '../wineDetail/AverageStar';
 
 export const HeroSection = () => {
+  const isFirstPageLoad = useNavigationStore((state) => state.isFirstPageLoad);
+
+  const animationDelay = isFirstPageLoad ? 2 : 0.3;
+  const smallCardDelay = isFirstPageLoad ? 2.2 : 0.2;
   return (
     <header>
       <motion.div
         className='relative h-[403px] md:h-[394px] xl:h-[535px] bg-[#171A21] flex items-center justify-center overflow-hidden rounded-lg'
         initial={{ opacity: 0, y: -100 }}
         whileInView={{ opacity: 1, y: 0 }}
         viewport={{ once: true, amount: 0.3 }}
-        transition={{ duration: 0.6, delay: 0.7, ease: 'easeOut' }}
+        transition={{ duration: 0.6, delay: animationDelay, ease: 'easeOut' }}
       >
         <div className='flex flex-col items-center h-full'>
           <div>
@@ -35,7 +41,7 @@ export const HeroSection = () => {
               <motion.div
                 initial={{ opacity: 1, y: 200 }}
                 animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.6, delay: 0.2, ease: 'easeOut' }}
+                transition={{ duration: 0.6, delay: smallCardDelay, ease: 'easeOut' }}
               >
                 <ImageCard
                   imageSrc='/assets/lendingwine3.png'
@@ -57,7 +63,7 @@ export const HeroSection = () => {
               <motion.div
                 initial={{ opacity: 1, y: 200 }}
                 animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.6, delay: 0.2, ease: 'easeOut' }}
+                transition={{ duration: 0.6, delay: smallCardDelay, ease: 'easeOut' }}
               >
                 <ImageCard
                   imageSrc='/assets/lendingwine1.png'
@@ -77,7 +83,7 @@ export const HeroSection = () => {
               <motion.div
                 initial={{ opacity: 1, y: 200 }}
                 animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.6, delay: 0.2, ease: 'easeOut' }}
+                transition={{ duration: 0.6, delay: smallCardDelay, ease: 'easeOut' }}
               >
                 <ImageCard
                   imageSrc='/assets/lendingwine2.png'
@@ -97,7 +103,7 @@ export const HeroSection = () => {
               <motion.div
                 initial={{ opacity: 1, y: 200 }}
                 animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.6, delay: 0.2, ease: 'easeOut' }}
+                transition={{ duration: 0.6, delay: smallCardDelay, ease: 'easeOut' }}
               >
                 <ImageCard
                   imageSrc='/assets/lendingwine4.png'
@@ -117,7 +123,7 @@ export const HeroSection = () => {
               <motion.div
                 initial={{ opacity: 1, y: 200 }}
                 animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.6, delay: 0.2, ease: 'easeOut' }}
+                transition={{ duration: 0.6, delay: smallCardDelay, ease: 'easeOut' }}
               >
                 <ImageCard
                   imageSrc='/assets/lendingwine1.png'

src/hooks/useIsInitialLoad.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+import { useRouter } from 'next/router';
+
+import useNavigationStore from '@/stores/routerStore';
+
+export const useSetupNavigationListener = () => {
+  const router = useRouter();
+  const setNavigated = useNavigationStore((state) => state.setNavigated);
+
+  useEffect(() => {
+    const handleRouteChangeComplete = () => {
+      setNavigated();
+    };
+
+    router.events.on('routeChangeComplete', handleRouteChangeComplete);
+
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChangeComplete);
+    };
+  }, [router.events, setNavigated]);
+};

src/pages/_app.tsx

@@ -14,6 +14,7 @@ import Gnb from '@/components/common/Gnb';
 import { LoadingOverlay } from '@/components/common/LoadingOverlay';
 import Splash from '@/components/Splash';
 import { useInitUser } from '@/hooks/useInitUser';
+import { useSetupNavigationListener } from '@/hooks/useIsInitialLoad';
 
 import type { AppProps } from 'next/app';
 
@@ -26,6 +27,7 @@ const queryClient = new QueryClient({
 });
 
 export default function App({ Component, pageProps }: AppProps) {
+  useSetupNavigationListener();
   useInitUser();
   const router = useRouter();
 

src/stores/routerStore.ts

@@ -0,0 +1,14 @@
+import { create } from 'zustand';
+
+interface NavigationState {
+  isFirstPageLoad: boolean;
+  setNavigated: () => void; // 네비게이션이 발생했음을 기록하는 액션
+}
+
+// 스토어 생성
+const useNavigationStore = create<NavigationState>()((set) => ({
+  isFirstPageLoad: true,
+  setNavigated: () => set({ isFirstPageLoad: false }),
+}));
+
+export default useNavigationStore;