[#18] Chore: storybook 에 msw 적용

[ienrum]

💬 Issue Number

closes #18

🤷‍♂️ Description

작업 내용에 대한 설명

storybook 에 msw 설정을 완료했습니다.

storybook 에 대한 msw addon을 의존성으로 추가했습니다.
추가적으로 데코레이터 를 구현하였습니다.

📷 Screenshots

작업 결과물

👻 Good Function

팀원에게 공유하고 싶은 함수나 코드 일부

📋 Check List

PR 전 체크해주세요.

• Merge 하는 브랜치가 올바른가?
• 코딩컨벤션을 준수하는가?
• PR과 관련없는 변경사항이 없는가?

📒 Remarks

팀원이 코드리뷰 시 주의할 점 또는 말하고 싶은 점 특이사항

다음과 같은 순서를 따라서 모킹데이터를 구성하고 사용하실수있습니다

page story 작성

원하는 페이지 폴더에서 stories.tsx 를 작성합니다.

// app/news/[page]/index.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import News from './page'; // 원하는 페이지 컴포넌트를 import 한다.

const meta = {
  title: 'app/News', 
  component: News,
} satisfies Meta<typeof News>;
export default meta;

type Story = StoryObj<typeof meta>;

export const Home: Story = {
  args: { params: { page: 1 } },
}

mock story 작성

모킹 데이터를 전달하기위해 msw handler 작성법과 동일하게 스토리에도 작성해주면 됩니다.

여기서 parameters.msw 필드에 handlers 에 지정해주면됩니다.

// app/news/[page]/index.stories.tsx
import { http, HttpResponse } from 'msw'

// ...existing meta/story

export const Mocked = {
  ...Home,
  parameters: {
   decorators: PageLayoutDecorator, // 해당 구문을 추가해주시면, 스크린샷 처럼 모바일뷰로 페이지를 볼수있습니다.
    msw: {
      handlers: [
        http.get('https://hacker-news.firebaseio.com/v0/topstories.json', () => {
          return HttpResponse.json([1]);
        }),
        http.get('https://hacker-news.firebaseio.com/v0/item/1.json', () => {
          return HttpResponse.json({
            id: 1,
            time: Date.now(),
            user: 'shilman',
            url: 'http://storybook.js.org',
            title: 'Storybook + Next.js = ❤️',
            score: 999,
          });
        }),
      ],
    },
  },
};

페이지 컴포넌트 작성

만약 다음과 같이 데이터를 fetch 하는 페이지 컴포넌트가 있다면 모킹 데이터를 받을수있습니다.

// app/news/page.tsx
'use client'

import {useState} from 'react';

// News.tsx
const News = () => {
  const [data,setData] = useState();
  fetch('https://hacker-news.firebaseio.com/v0/topstories.json')
  	.then(response => response.json())
  	.then(data => setData(data));
  
  return <div>{JSON.stringify(data)}</div>
}

server 사이드에서도 모킹됩니다.

[HoberMin]

고생하셨습니다 !!

[YunSukHyun]

자세한 설명 감사합니다

[hyeonjinan096]

수혁님 수고하셨습니다⭐