[#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;

package.json

@@ -51,6 +51,7 @@
     "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",
@@ -63,4 +64,4 @@
       "public"
     ]
   }
-}
+}

postcss.config.mjs → postcss.config.js

@@ -5,4 +5,4 @@ const config = {
   },
 };
 
-export default config;
+module.exports = config;

src/mocks/handlers/post.ts

@@ -1,19 +1,27 @@
 import { HttpResponse, http } from 'msw';
 
-const getPostList = http.get(`${process.env.NEXT_PUBLIC_URL}/posts`, () => {
-  return HttpResponse.json({
-    content: [
-      {
-        postId: '1',
-        nickname: 'testAccount',
-        title: '제목일세',
-        createAt: '2024-03-01T18:55:48.884Z',
-        viewCount: 30,
-        likeCount: 1,
-        hashtags: ['#해시태그'],
-      },
-    ],
-  });
+interface Post {
+  postId: string;
+  nickname: string;
+  title: string;
+  createAt: string;
+  viewCount: number;
+  likeCount: number;
+  hashtags: string[];
+}
+
+const getPostList = http.get(`posts`, () => {
+  return HttpResponse.json<Post[]>([
+    {
+      postId: '1',
+      nickname: 'testAccount',
+      title: '제목일세',
+      createAt: '2024-03-01T18:55:48.884Z',
+      viewCount: 30,
+      likeCount: 1,
+      hashtags: ['#해시태그'],
+    },
+  ]);
 });
 
 export const handlers = [getPostList];

src/stories/decorator.tsx

@@ -0,0 +1,9 @@
+import { type Decorator } from '@storybook/react';
+
+import '../style/globals.css';
+
+export const PageLayoutDecorator: Decorator = Story => (
+  <div className='relative flex h-[600px] w-[350px] shrink-0 flex-col'>
+    <Story />
+  </div>
+);

src/stories/msw-exmple/msw.mdx

@@ -0,0 +1,96 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as MswStories from './msw.stories';
+
+<Meta of={MswStories} />
+
+# msw 기본 예제
+
+## story 에서 msw 로 데이터 모킹하여 tsx 파일에서 출력하는 예제입니다.
+
+```ts
+// msw.tsx
+'use client';
+
+import { useEffect, useState } from 'react';
+
+const Msw = () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('posts')
+    .then(res => res.json())
+    .then(json => setData(json));
+  }, []);
+
+  return <div>{JSON.stringify(data)}</div>;
+};
+
+export default Msw;
+
+```
+
+```ts
+// msw.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { handlers } from '@/src/mocks/handlers';
+import { PageLayoutDecorator } from '@/src/stories/decorator';
+
+import Msw from './msw';
+
+export default {
+  title: 'mocks/msw',
+  component: Msw, // 원하는 페이지 컴포넌트
+  decorators: PageLayoutDecorator, // 모바일 뷰 레이아웃 적용
+} satisfies Meta<typeof Msw>;
+
+type Story = StoryObj<typeof Msw>;
+
+export const Default: Story = {
+  parameters: {
+    msw: {
+      handlers, // handers 설정
+    },
+  },
+};
+```
+
+## handlers 는 따로 정의 해주셔야합니다.
+
+### [handlers 정의 하는법](https://mswjs.io/docs/api/http)
+
+```ts
+// src/mocks/handlers/post.ts
+import { HttpResponse, http } from 'msw';
+
+interface Post {
+  postId: string;
+  nickname: string;
+  title: string;
+  createAt: string;
+  viewCount: number;
+  likeCount: number;
+  hashtags: string[];
+}
+
+const getPostList = http.get(`posts`, () => {
+  return HttpResponse.json<Post[]>([
+    {
+      postId: '1',
+      nickname: 'testAccount',
+      title: '제목일세',
+      createAt: '2024-03-01T18:55:48.884Z',
+      viewCount: 30,
+      likeCount: 1,
+      hashtags: ['#해시태그'],
+    },
+  ]);
+});
+
+export const handlers = [getPostList];
+```
+
+## 결과
+
+<Canvas />

src/stories/msw-exmple/msw.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { handlers } from '@/src/mocks/handlers';
+import { PageLayoutDecorator } from '@/src/stories/decorator';
+
+import Msw from './msw';
+
+export default {
+  title: 'mocks/msw',
+  component: Msw, // 원하는 페이지 컴포넌트
+  decorators: PageLayoutDecorator, // 모바일 뷰 레이아웃 적용
+} satisfies Meta<typeof Msw>;
+
+type Story = StoryObj<typeof Msw>;
+
+export const Default: Story = {
+  parameters: {
+    msw: {
+      handlers, // handers 설정
+    },
+  },
+};

src/stories/msw-exmple/msw.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+const Msw = () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('posts')
+      .then(res => res.json())
+      .then(json => setData(json));
+  }, []);
+
+  return <div>{JSON.stringify(data)}</div>;
+};
+
+export default Msw;