1. constants/path.js에서 API_PATH 추가

const API_PATH = {
  FAVORITE_TRAVELS: `${BASE_PATH.TRAVELS}/favorite`,
  SIGNATURE_PREVIEW: `${BASE_PATH.SIGNATURE}/preview`,
};

1. api/request 가서 파일 만들고 아까 만든 경로 넣어주기

import { axios, axiosWithToken } from '../api';
import { API_PATH } from '@/constants/path';

// 토큰이 필요없는 경우 axios를 쓰면됩니다.
const getSignaturePreview = () => {
  return axios.get(API_PATH.SIGNATURE_PREVIEW);
};

// 토큰이 필요한 경우 axios대신, axiosWithToken을 사용하면 됩니다.

export { getSignaturePreview };

1. handler 만들어서 mockData 넣어주기

import { HttpResponse, http } from 'msw';

import { baseURL } from '@/apis/api';
import { API_PATH } from '@/constants/path';

export const PreveiewHandlers = [
  http.get(`${baseURL}${API_PATH.SIGNATURE_PREVIEW}`, (req, res, ctx) => {
    const previewData = [
      {
        id: 1,
        userImgUrl: '<https://i.ibb.co/JdGMYqf/Group-1000000912.png>',
        date: '23 / 10 / 11',
        previewUrl:
          '<https://i.ibb.co/D1bwz3j/Kakao-Talk-20231203-204945606.png>" alt="Kakao-Talk-20231203-204945606',
        title: '우리 동글이와 함꼐한, 강릉 1박 2일',
        heart: 3012,
      },
      {
        id: 2,
        userImgUrl: '<https://i.ibb.co/JdGMYqf/Group-1000000912.png>',
        date: '23 / 10 / 11',
        previewUrl:
          '<https://i.ibb.co/D1bwz3j/Kakao-Talk-20231203-204945606.png>" alt="Kakao-Talk-20231203-204945606',
        title: '우리 동글이와 함꼐한, 강릉 1박 2일',
        heart: 3012,
      },
      {
        id: 3,
        userImgUrl: '<https://i.ibb.co/JdGMYqf/Group-1000000912.png>',
        date: '23 / 10 / 11',
        previewUrl:
          '<https://i.ibb.co/D1bwz3j/Kakao-Talk-20231203-204945606.png>" alt="Kakao-Talk-20231203-204945606',
        title: '우리 동글이와 함꼐한, 강릉 1박 2일',
        heart: 3012,
      },
      {
        id: 4,
        userImgUrl: '<https://i.ibb.co/JdGMYqf/Group-1000000912.png>',
        date: '23 / 10 / 11',
        previewUrl:
          '<https://i.ibb.co/D1bwz3j/Kakao-Talk-20231203-204945606.png>" alt="Kakao-Talk-20231203-204945606',
        title: '우리 동글이와 함꼐한, 강릉 1박 2일',
        heart: 3012,
      },
    ];
    return HttpResponse.json(previewData);
  }),
];

1. mocks>index.js 에서 아까 만든 핸들러 import 해주고 뒤에 스프레드 연산자로 이어주기

import { PreveiewHandlers } from './previewHandler';
import { travelHandlers } from './travel-place';

export const handlers = [...travelHandlers, ...PreveiewHandlers];

데이터 가져오기

사용할 컴포넌트 가서 만든 api/request import 해주고 데이터 쓰면 됨

import { getSignaturePreview } from '@/apis/request/preview';

const [data, setData] = useState([]);
  const getData = async () => {
    try {
      const res = await getSignaturePreview();
      const mockData = res.data;
      setData(mockData);
      console.log(data);
    } catch (e) {
      console.log(e);
    }
  };

  useEffect(() => {
    getData();
  }, []);