[#18] Chore: storybook 에 msw 적용

.storybook/main.ts

@@ -17,5 +17,6 @@ const config: StorybookConfig = {
     autodocs: 'tag',
   },
   staticDirs: ['../public'],
+  features: { experimentalRSC: true },
 };
 export default config;

.storybook/preview.ts → .storybook/preview.tsx

@@ -1,5 +1,7 @@
 import type { Preview } from '@storybook/react';
+import { initialize, mswLoader } from 'msw-storybook-addon';
 
+initialize({ onUnhandledRequest: 'bypass' });
 const preview: Preview = {
   parameters: {
     controls: {
@@ -9,6 +11,7 @@ const preview: Preview = {
       },
     },
   },
+  loaders: [mswLoader],
 };
 
 export default preview;

next.config.mjs

@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  experimental: {
+    instrumentationHook: true,
+  },
+};
 
 export default nextConfig;

package.json

@@ -37,6 +37,7 @@
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
     "autoprefixer": "^10.0.1",
+    "axios": "^1.6.8",
     "chromatic": "^11.3.0",
     "eslint": "^8.57.0",
     "eslint-config-next": "14.2.1",
@@ -49,11 +50,18 @@
     "eslint-plugin-unused-imports": "^3.1.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
+    "msw": "^2.2.14",
+    "msw-storybook-addon": "^2.0.0",
     "postcss": "^8",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.14",
     "storybook": "^8.0.8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
   }
-}
+}