Merge pull request #535 from woowacourse-teams/fix/496-storybook-boot…

…-fix

storybook이 켜지지 않는 오류 해결 및 msw 적용

client/.babelrc.js

@@ -0,0 +1,16 @@
+import ReactFreshBabelPlugin from 'react-refresh/babel';
+
+/** @type {import('@babel/core').TransformOptions} */
+export default {
+  presets: [
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+        development: process.env.NODE_ENV === 'development',
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+  plugins: [process.env.NODE_ENV === 'development' && false && ReactFreshBabelPlugin].filter(Boolean),
+};

client/.storybook/main.ts

@@ -1,11 +1,13 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-webpack5',
-    options: {},
+    options: {
+      fastRefresh: true,
+    },
   },
   docs: {
     autodocs: 'tag',

client/.storybook/preview.tsx

@@ -1,11 +1,17 @@
 import type { Preview } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { initialize, mswDecorator, mswLoader } from 'msw-storybook-addon';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
+import { AuthProvider } from '../src/context/AuthContext';
+import handlers from '../src/mocks/handlers';
 import GlobalStyle from '../src/styles/GlobalStyle';
 import ResetStyle from '../src/styles/ResetStyle';
 import theme from '../src/styles/theme';
 
+initialize();
+
 const customViewports = {
   Default: {
     name: 'Default',
@@ -16,6 +22,14 @@ const customViewports = {
   },
 };
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      suspense: true,
+    },
+  },
+});
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -29,19 +43,29 @@ const preview: Preview = {
       viewports: { ...customViewports },
       defaultViewport: 'Default',
     },
+    msw: {
+      handlers,
+    },
   },
 
   decorators: [
+    mswDecorator,
     (Story) => (
-      <MemoryRouter initialEntries={['/']}>
+      <QueryClientProvider client={queryClient}>
         <ThemeProvider theme={theme}>
           <ResetStyle />
           <GlobalStyle />
-          <Story />
+          <AuthProvider>
+            <MemoryRouter initialEntries={['/']}>
+              <Story />
+            </MemoryRouter>
+          </AuthProvider>
         </ThemeProvider>
-      </MemoryRouter>
+      </QueryClientProvider>
     ),
   ],
+
+  loaders: [mswLoader],
 };
 
 export default preview;

client/.storybook/webpack.config.js

@@ -1,5 +1,5 @@
 import { merge } from 'webpack-merge';
-import defaultConfig from '../webpack.config.js';
+import defaultConfig from '../webpack.development.js';
 
 export default function ({ config }) {
   return merge(defaultConfig, config);

client/package.json

@@ -33,14 +33,14 @@
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
-    "@storybook/addon-essentials": "7.0.25",
-    "@storybook/addon-interactions": "7.0.25",
-    "@storybook/addon-links": "7.0.25",
-    "@storybook/addon-styling": "^1.3.4",
-    "@storybook/blocks": "7.0.25",
-    "@storybook/react": "^7.0.25",
-    "@storybook/react-webpack5": "7.0.25",
-    "@storybook/testing-library": "0.0.14-next.2",
+    "@storybook/addon-essentials": "^7.4.5",
+    "@storybook/addon-interactions": "^7.4.5",
+    "@storybook/addon-links": "^7.4.5",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/blocks": "^7.4.5",
+    "@storybook/react": "^7.4.5",
+    "@storybook/react-webpack5": "^7.4.5",
+    "@storybook/testing-library": "0.2.1",
     "@types/google.maps": "^3.54.0",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
@@ -62,17 +62,18 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.14",
     "favicons": "^7.1.4",
     "favicons-webpack-plugin": "^6.0.1",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "html-webpack-plugin": "^5.5.3",
-    "msw": "^1.2.2",
+    "msw": "^1.3.1",
+    "msw-storybook-addon": "^1.8.0",
     "postcss-styled-syntax": "^0.4.0",
     "prettier": "^2.8.8",
     "react-refresh": "^0.14.0",
     "start-server-and-test": "^2.0.0",
-    "storybook": "7.0.25",
+    "storybook": "^7.4.5",
     "stylelint": "^15.9.0",
     "stylelint-config-clean-order": "^5.0.1",
     "stylelint-no-unsupported-browser-features": "^7.0.0",

client/public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.2.2).
+ * Mock Service Worker (1.3.1).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

client/src/index.tsx

@@ -18,7 +18,7 @@ Object.assign(document, { bodyRoot: document.getElementById('root') });
 
 const main = async () => {
   if (MSW) {
-    const { worker } = await import('./mocks/worker');
+    const { default: worker } = await import('./mocks/worker');
     await worker.start();
   }
 

client/src/mocks/handlers.ts

@@ -4,7 +4,7 @@ import type { CafeMapLocation, Identity, User } from '../types';
 
 let pageState = 1;
 
-export const handlers = [
+const handlers = [
   // 지도에 핀 꽂을 카페 정보
   rest.get('/api/cafes/location', async (req, res, ctx) => {
     const { searchParams } = new URL(req.url.toString());
@@ -46,6 +46,7 @@ export const handlers = [
 
     return res(ctx.status(200), ctx.json(foundCafes));
   }),
+
   // 카페 조회
   rest.get('/api/cafes', (req, res, ctx) => {
     const PAGINATE_UNIT = 5;
@@ -286,3 +287,5 @@ export const handlers = [
     return res(ctx.status(200));
   }),
 ];
+
+export default handlers;

client/src/mocks/worker.ts

@@ -1,4 +1,6 @@
 import { setupWorker } from 'msw';
-import { handlers } from './handlers';
+import handlers from './handlers';
 
-export const worker = setupWorker(...handlers);
+const worker = setupWorker(...handlers);
+
+export default worker;

client/webpack.common.js

@@ -4,21 +4,13 @@ import FaviconsWebpackPlugin from 'favicons-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { dirname } from 'path';
-import ReactFreshBabelPlugin from 'react-refresh/babel';
 import { fileURLToPath } from 'url';
 
-export const IS_DEV = process.env.NODE_ENV === 'development';
-
 /** @type {import('webpack').Configuration} */
 export default {
   // https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#installation
   context: dirname(fileURLToPath(import.meta.url)),
   entry: './src/index',
-  output: {
-    filename: '[name].[contenthash].js',
-    publicPath: '/',
-    clean: true,
-  },
   resolve: {
     extensions: ['.js', '.jsx', '.ts', '.tsx'],
   },
@@ -27,23 +19,7 @@ export default {
       {
         test: /\.[tj]sx?$/i,
         exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          /** @type {import('@babel/core').TransformOptions} */
-          options: {
-            presets: [
-              [
-                '@babel/preset-react',
-                {
-                  runtime: 'automatic',
-                  development: IS_DEV,
-                },
-              ],
-              '@babel/preset-typescript',
-            ],
-            plugins: [IS_DEV && ReactFreshBabelPlugin].filter(Boolean),
-          },
-        },
+        use: 'babel-loader',
       },
     ],
   },

client/webpack.production.js

@@ -5,6 +5,13 @@ import webpackCommonConfig from './webpack.common.js';
 /** @type {import('webpack').Configuration} */
 export default merge(webpackCommonConfig, {
   mode: 'production',
+  output: {
+    // 번들링된 파일명을 수정하는 것은 storybook 구동에 영향을 주기 때문에
+    // production 빌드 시에만 사용하여야 합니다
+    filename: '[name].[contenthash].js',
+    publicPath: '/',
+    clean: true,
+  },
   plugins: [
     // new BundleAnalyzerPlugin()
   ],