Perf: 라이트하우스 개선

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "prisma.pinToPrisma6": true
+}

next.config.ts

@@ -1,7 +1,58 @@
 import type { NextConfig } from "next";
+import bundleAnalyzer from "@next/bundle-analyzer";
+
+// Bundle Analyzer 설정
+const withBundleAnalyzer = bundleAnalyzer({
+  enabled: process.env.ANALYZE === "true",
+  openAnalyzer: true,
+});
 
 const nextConfig: NextConfig = {
+  serverExternalPackages: ["jsdom"],
+  webpack: (config, { dev }) => {
+    if (!dev) {
+      config.resolve.alias["@hono/swagger-ui"] = false;
+
+      config.resolve.alias["swagger-ui-dist"] = false;
+
+      config.resolve.alias["swagger-ui-react"] = false;
+
+      config.optimization = {
+        ...config.optimization,
+        splitChunks: {
+          ...config.optimization?.splitChunks,
+          cacheGroups: {
+            ...config.optimization?.splitChunks?.cacheGroups,
+            swiper: {
+              test: /[\\/]node_modules[\\/]swiper[\\/]/,
+              name: "swiper",
+              priority: 20,
+              reuseExistingChunk: true,
+            },
+            ckeditor: {
+              test: /[\\/]node_modules[\\/](@?ckeditor|ckeditor5)[\\/]/,
+              name: "ckeditor",
+              priority: 20,
+              reuseExistingChunk: true,
+            },
+          },
+        },
+      };
+    }
+    return config;
+  },
+  modularizeImports: {
+    "lucide-react": {
+      transform: "lucide-react/dist/esm/icons/{{member}}",
+    },
+  },
   images: {
+    deviceSizes: [640, 750, 828, 1080, 1200],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 340, 384, 680],
+    formats: ["image/webp"],
+    minimumCacheTTL: 31536000,
+    dangerouslyAllowSVG: true,
+    contentDispositionType: "inline",
     remotePatterns: [
       {
         protocol: "https",
@@ -34,6 +85,80 @@ const nextConfig: NextConfig = {
       },
     ],
   },
+  compiler: {
+    removeConsole: process.env.NODE_ENV === "production",
+  },
+  experimental: {
+    optimizePackageImports: [
+      "react-hook-form",
+      "zustand",
+      "swiper",
+      "chart.js",
+      "react-chartjs-2",
+      "ckeditor5",
+      "@ckeditor/ckeditor5-react",
+    ],
+  },
+  async headers() {
+    return [
+      {
+        source: "/:path*",
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "public, max-age=3600, must-revalidate",
+          },
+          {
+            key: "X-Content-Type-Options",
+            value: "nosniff",
+          },
+          {
+            key: "X-Frame-Options",
+            value: "DENY",
+          },
+          {
+            key: "X-XSS-Protection",
+            value: "1; mode=block",
+          },
+          {
+            key: "Referrer-Policy",
+            value: "strict-origin-when-cross-origin",
+          },
+          {
+            key: "Permissions-Policy",
+            value: "camera=(), microphone=(), geolocation=()",
+          },
+        ],
+      },
+      {
+        source: "/api/:path*",
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "public, max-age=300, stale-while-revalidate=299",
+          },
+        ],
+      },
+      {
+        source: "/_next/static/:path*",
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "public, max-age=31536000, immutable",
+          },
+        ],
+      },
+      {
+        source: "/_next/image:path*",
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "public, max-age=31536000, immutable",
+          },
+        ],
+      },
+    ];
+  },
 };
 
-export default nextConfig;
+export default withBundleAnalyzer(nextConfig);

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "prisma generate && next build",
+    "build:analyze": "cross-env ANALYZE=true prisma generate && cross-env ANALYZE=true next build",
     "start": "next start",
     "lint": "next lint",
     "test": "vitest",
@@ -36,9 +37,10 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
-    "dompurify": "^3.2.6",
+    "dompurify": "^3.3.1",
     "hono": "^4.8.3",
     "hono-openapi": "^0.4.8",
+    "jsdom": "^28.1.0",
     "lucide-react": "^0.462.0",
     "next": "15.0.5",
     "next-auth": "^5.0.0-beta.25",
@@ -61,21 +63,25 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.4",
+    "@next/bundle-analyzer": "15.0.5",
     "@storybook/addon-essentials": "^8.5.8",
     "@storybook/addon-interactions": "^8.5.8",
     "@storybook/addon-onboarding": "^8.5.8",
     "@storybook/blocks": "^8.5.8",
     "@storybook/nextjs": "^8.5.8",
     "@storybook/react": "^8.5.8",
     "@storybook/test": "^8.5.8",
+    "@svgr/webpack": "^8.1.0",
     "@types/dompurify": "^3.2.0",
+    "@types/jsdom": "^27.0.0",
     "@types/navermaps": "^3.9.1",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/swagger-ui-react": "^5.18.0",
     "@vitejs/plugin-react": "^5.1.1",
     "@vitest/ui": "^4.0.9",
+    "cross-env": "^10.1.0",
     "eslint": "^8",
     "eslint-config-next": "15.0.3",
     "eslint-plugin-storybook": "^0.11.3",
@@ -90,7 +96,14 @@
     "zod-prisma-types": "^3.2.4"
   },
   "resolutions": {
-    "sharp": "0.33.5"
+    "sharp": "0.33.5",
+    "jsdom": "25.0.1"
   },
+  "browserslist": [
+    "chrome >= 90",
+    "firefox >= 90",
+    "safari >= 15",
+    "edge >= 90"
+  ],
   "packageManager": "yarn@4.10.3"
 }

public/icons/bottomNavBar/index.ts

@@ -0,0 +1,19 @@
+import Home from "./Home.svg";
+import HomeActive from "./HomeActive.svg";
+import Search from "./Search.svg";
+import SearchActive from "./SearchActive.svg";
+import Writing from "./Writing.svg";
+import WritingActive from "./WritingActive.svg";
+import Mypage from "./Mypage.svg";
+import MypageActive from "./MypageActive.svg";
+
+export {
+  Home,
+  HomeActive,
+  Search,
+  SearchActive,
+  Writing,
+  WritingActive,
+  Mypage,
+  MypageActive,
+};

public/icons/index.ts

@@ -45,11 +45,6 @@ import RadioPrimary from "./review/RadioPrimary.svg";
 import SwiperLeftButton from "./SwiperLeftButton.svg";
 import SwiperRightButton from "./SwiperRightButton.svg";
 
-import BottmNavBarHome from "./bottomNavBar/Home.svg";
-import BottmNavBarSearch from "./bottomNavBar/Search.svg";
-import BottmNavBarWriting from "./bottomNavBar/Writing.svg";
-import BottmNavBarMypage from "./bottomNavBar/Mypage.svg";
-
 export {
   ArrowDownGray,
   ArrowDownPrimary,
@@ -89,8 +84,4 @@ export {
   RadioPrimary,
   SwiperLeftButton,
   SwiperRightButton,
-  BottmNavBarHome,
-  BottmNavBarSearch,
-  BottmNavBarWriting,
-  BottmNavBarMypage,
 };

public/images/index.ts

@@ -0,0 +1,22 @@
+import Logo from "./Logo.svg";
+
+import Google from "./Google.svg";
+import Naver from "./Naver.svg";
+import Kakao from "./Kakao.svg";
+
+import Profile from "./Profile.svg";
+
+import Community from "./Community.webp";
+import PerfumeSearch from "./PerfumeSearch.webp";
+import PlaceHolder from "./Placeholder.webp";
+
+export {
+  Logo,
+  Google,
+  Naver,
+  Kakao,
+  Profile,
+  Community,
+  PerfumeSearch,
+  PlaceHolder,
+};

src/app/(main)/page.tsx

@@ -3,11 +3,10 @@ import { MainContent } from "@/components/domains/main/mainContent/MainContent";
 import { MainLogo } from "@/components/domains/main/MainLogo";
 import { MainSearchBar } from "@/components/domains/main/MainSearchBar";
 
-export const dynamic = "force-dynamic";
-
 export default function Home() {
   return (
     <>
+      <h1 className="sr-only">ChickChick - 나만의 향수 컬렉션</h1>
       <MainLogo />
       <MainBanner />
       <MainSearchBar />

src/app/api-doc/layout.tsx

@@ -1,4 +1,3 @@
-import { notFound } from "next/navigation";
 import React from "react";
 
 export default function ApiDocLayout({
@@ -7,8 +6,7 @@ export default function ApiDocLayout({
   children: React.ReactNode;
 }) {
   if (process.env.NODE_ENV === "production") {
-    notFound();
+    return null;
   }
-
   return <>{children}</>;
 }

src/app/api-doc/page.tsx

@@ -1,20 +1,13 @@
-"use client";
+import SwaggerUI from "swagger-ui-react";
 
-import { lazy, Suspense } from "react";
-import "swagger-ui-react/swagger-ui.css";
-
-const SwaggerUI = lazy(() => import("swagger-ui-react"));
-
-function SwaggerDocs() {
+export default function Page() {
   return (
-    <section style={{ backgroundColor: "#fff", padding: "1rem" }}>
-      <Suspense fallback={<div>Loading API Documentation...</div>}>
-        <SwaggerUI url="/api/doc" />
-      </Suspense>
-    </section>
+    <div className="h-screen">
+      <SwaggerUI
+        url="/api/doc"
+        deepLinking={true}
+        displayRequestDuration={true}
+      />
+    </div>
   );
 }
-
-export default function Page() {
-  return <SwaggerDocs />;
-}

src/app/api/[[...route]]/route.ts

@@ -3,6 +3,18 @@ import { handle } from "hono/vercel";
 
 // export const runtime = "edge";
 
+if (process.env.NODE_ENV !== "production") {
+  try {
+    const { swaggerUI } = await import("@hono/swagger-ui");
+    app.get("/swagger-ui", swaggerUI({ url: "/api/doc" }));
+  } catch (_) {
+    console.warn(
+      "Swagger UI dependencies not found in production environment.",
+      _,
+    );
+  }
+}
+
 export const GET = handle(app);
 export const POST = handle(app);
 export const PUT = handle(app);