fix: error 및 not found 페이지의 애니메이션 요소를 비동기적으로 불러오도록 변경

Author: DreamPaste

next.config.js

@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
     unoptimized: true,

package-lock.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "analyze": "npx @next/bundle-analyzer .next/static/chunks/",
     "start": "next start",
     "lint": "next lint",
     "prepare": "husky",
@@ -74,6 +75,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@next/bundle-analyzer": "^15.5.3",
     "@storybook/addon-essentials": "7.6.20",
     "@storybook/addon-interactions": "7.6.20",
     "@storybook/addon-links": "7.6.20",

package.json

@@ -32,7 +32,6 @@ export default function ActivityClient({ activityId, blurImage }: ActivityClient
   const { user } = useUserStore();
   const queryClient = useQueryClient();
 
-  // Intersection Observer for performance optimization
   const [mapRef, isMapVisible] = useIntersectionObserver({
     rootMargin: '100px',
     triggerOnce: true,
@@ -58,7 +57,7 @@ export default function ActivityClient({ activityId, blurImage }: ActivityClient
     gcTime: 60 * 60 * 1000, // 1시간 메모리 보관
   });
 
-  // 2. 동적 데이터 (가격, 스케줄, 평점) - 짧은 캐시, 캐시 재사용 최적화
+  // 2. 동적 데이터 (가격, 스케줄, 평점) - 짧은 캐시, 재사용 최적화
   const { data: dynamicInfo } = useSuspenseQuery({
     queryKey: [...activityQueryKeys.detail(activityId), 'dynamic'],
     queryFn: (): Promise<ActivityDetail> => {
@@ -72,7 +71,7 @@ export default function ActivityClient({ activityId, blurImage }: ActivityClient
         'static',
       ]);
 
-      // static 캐시가 fresh하면(2분 이내) 재사용
+      // static 캐시가 fresh하면 재사용
       if (
         cachedData &&
         cachedState?.dataUpdatedAt &&
@@ -148,7 +147,6 @@ export default function ActivityClient({ activityId, blurImage }: ActivityClient
                   </NaverMap>
                 ) : (
                   <div className='h-64 bg-gray-100 rounded-lg animate-pulse flex items-center justify-center'>
-                    {/* MapPinned 아이콘 하나가 중앙에서 콩콩 뛰는 애니메이션 */}
                     <motion.div
                       animate={{
                         y: [0, -20, 0],

src/app/activities/[activityId]/ActivityClientPage.tsx

@@ -1,14 +1,32 @@
 'use client';
 
-import Lottie from 'lottie-react';
-import loadingLottie from '@/assets/lottie/404 Error - Doodle animation.json';
 import Link from 'next/link';
+import { lazy, Suspense, useState, useEffect } from 'react';
+
+const Lottie = lazy(() => import('lottie-react'));
 
 export default function ActivityNotFound() {
+  const [animationData, setAnimationData] = useState<object | null>(null);
+
+  useEffect(() => {
+    // 404 애니메이션 동적 로드 (305KB)
+    import('@/assets/lottie/404 Error - Doodle animation.json')
+      .then((module) => setAnimationData(module.default))
+      .catch(() => setAnimationData(null));
+  }, []);
+
   return (
     <div className='flex flex-col items-center min-h-screen text-title overflow-hidden'>
       <div className='w-100 h-100'>
-        <Lottie animationData={loadingLottie} />
+        {animationData ? (
+          <Suspense
+            fallback={<div className='animate-pulse bg-gray-100 rounded-2xl w-100 h-100'></div>}
+          >
+            <Lottie animationData={animationData} />
+          </Suspense>
+        ) : (
+          <div className='animate-pulse bg-gray-100 rounded-2xl w-100 h-100'></div>
+        )}
       </div>
 
       <div className='flex mt-8 text-24-regular text-subtitle'>체험을 찾을 수 없습니다.</div>