FIX: 스토리북 프로덕션 환경에서 Next.js Image 컴포넌트를 일반 img 태그로 대체

Author: Wonchang0314

.github/workflows/deploy-storybook.yml

@@ -59,17 +59,6 @@ jobs:
         env:
           CI: true
 
-      - name: Debug - List built files
-        run: |
-          echo "=== Storybook static files ==="
-          find storybook-static -name "*.svg" | head -10
-          echo "=== Directory structure ==="
-          ls -la storybook-static/
-          echo "=== HTML content check ==="
-          grep -n "chevron-down" storybook-static/index.html || echo "chevron-down not found in index.html"
-          echo "=== Check if base path is set ==="
-          grep -n "DDD-12-GROWIT-FE" storybook-static/index.html || echo "Base path not found in HTML"
-
       - name: Setup Pages
         uses: actions/configure-pages@v4
 

.storybook/main.js

@@ -6,12 +6,6 @@ const config = {
     name: '@storybook/nextjs',
     options: {},
   },
-  images: {
-    unoptimized: true,
-  },
   staticDirs: ['../public'],
-  ...(process.env.CI && {
-    base: '/DDD-12-GROWIT-FE/',
-  }),
 };
 export default config;

.storybook/preview.js

@@ -1,4 +1,22 @@
 import '../src/app/globals.css';
+import * as NextImage from 'next/image';
+
+// Next.js Image 컴포넌트를 일반 img 태그로 대체
+const OriginalNextImage = NextImage.default;
+
+Object.defineProperty(NextImage, 'default', {
+  configurable: true,
+  value: props => {
+    if (typeof props.src === 'string') {
+      // GitHub Pages 배포시 base path 추가
+      const basePath = process.env.NODE_ENV === 'production' ? '/DDD-12-GROWIT-FE' : '';
+      const src = props.src.startsWith('/') ? `${basePath}${props.src}` : props.src;
+
+      return <img {...props} src={src} alt={props.alt || ''} />;
+    }
+    return <OriginalNextImage {...props} />;
+  },
+});
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },