[Refactor] 메인 페이지 최적화

next.config.mjs

@@ -1,16 +1,41 @@
-/** @type {import('next').NextConfig} */
+import CompressionPlugin from 'compression-webpack-plugin';
+import withBundleAnalyzer from '@next/bundle-analyzer';
+import withPlaiceholder from '@plaiceholder/next';
+
+const bundleAnalyzer = withBundleAnalyzer({
+  enabled: process.env.ANALYZE === 'true',
+  openAnalyzer: true,
+});
+
 const nextConfig = {
   reactStrictMode: true,
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/,
       use: ['@svgr/webpack'],
     });
+
+    if (!config.mode.includes('development')) {
+      config.plugins.push(new CompressionPlugin());
+    }
+
     return config;
   },
   images: {
-    domains: ['manchui-bucket.s3.ap-northeast-2.amazonaws.com', 'ryungbucket.s3.ap-northeast-2.amazonaws.com'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'manchui-bucket.s3.ap-northeast-2.amazonaws.com',
+        pathname: '**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'ryungbucket.s3.ap-northeast-2.amazonaws.com',
+        pathname: '**',
+      },
+    ],
+    formats: ['image/avif', 'image/webp'],
   },
 };
 
-export default nextConfig;
+export default bundleAnalyzer(withPlaiceholder(nextConfig));

package.json

@@ -12,9 +12,12 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "npx chromatic --project-token=chpt_7c63d99a915fab5",
-    "dev:db": "json-server src/data/main.json --port=8888"
+    "dev:db": "json-server src/data/main.json --port=8888",
+    "analyze": "ANALYZE=true next build"
   },
   "dependencies": {
+    "@plaiceholder/next": "^3.0.0",
+    "@stomp/stompjs": "^7.0.0",
     "@svgr/webpack": "^8.1.0",
     "@tanstack/react-query": "^5.59.16",
     "@tanstack/react-query-devtools": "^5.59.16",
@@ -25,17 +28,20 @@
     "event-source-polyfill": "^1.0.31",
     "framer-motion": "^11.11.11",
     "json-server": "^1.0.0-beta.3",
-    "lottie-react": "^2.4.0",
+    "lottie-light-react": "^2.4.0",
     "next": "14.2.15",
+    "plaiceholder": "^3.0.0",
     "pretendard": "^1.3.9",
     "react": "^18",
     "react-dom": "^18",
     "react-toastify": "^10.0.6",
+    "sharp": "^0.33.5",
     "tailwind-merge": "^2.5.4",
     "zustand": "^5.0.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "1.9.0",
+    "@next/bundle-analyzer": "^15.1.5",
     "@storybook/addon-essentials": "8.3.5",
     "@storybook/addon-interactions": "8.3.5",
     "@storybook/addon-links": "8.3.5",
@@ -54,6 +60,7 @@
     "@typescript-eslint/parser": "^8.9.0",
     "autoprefixer": "^10.4.20",
     "chromatic": "^11.12.6",
+    "compression-webpack-plugin": "^11.1.0",
     "eslint": "^8",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-next": "14.2.15",
@@ -75,6 +82,7 @@
     "prettier": "3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "storybook": "8.3.5",
+    "svgo": "^3.3.2",
     "tailwindcss": "^3.4.1",
     "typescript": "5.4.4"
   },