feat(msw): msw 기본 세팅 추가

백엔드 인터페이스를 참고하여 mock 데이터 환경 구축 후 개발을 위해 환경 세팅함
참고: https://github.com/vercel/next.js/tree/canary/examples/with-msw

ref #21

web/mocks/browser.ts

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

web/mocks/handlers.ts

@@ -0,0 +1,66 @@
+import { rest } from 'msw';
+import { API_URL } from '~/shared/constants/environments';
+
+export const handlers = [
+  rest.get(`${API_URL}/services/main_contents`, (req, res, ctx) => {
+    // const { keyword } = req.params;
+
+    return res(
+      ctx.status(200),
+      ctx.json({
+        status_code: 200,
+        msg: '응답 성공',
+        data: {
+          main_contents_list: [
+            {
+              contents_id: 20,
+              title: '장발장의 신나는 하루',
+              thumbnail: '그때 내가 왜그랬는지 도무지 이해할 수 없네',
+              introduction: '장발장의 하루를 담은 이야기',
+              writer: {
+                writer_name: '장발장',
+                writer_id: '10asff',
+              },
+              language: '영어',
+              is_translate: true,
+              original_id: 24,
+            },
+            {
+              contents_id: 21,
+              title: '장발장의 신나는 하루2',
+              thumbnail: '어제 내가 왜그랬는지 도무지 이해할 수 없네',
+              introduction: '장발장의 어제를 담은 이야기',
+              writer: {
+                writer_name: '어제의 나',
+                writer_id: '10asfg',
+              },
+              language: '한국어',
+              is_translate: false,
+              original_id: -1,
+            },
+          ],
+        },
+      }),
+    );
+  }),
+  rest.get(`${API_URL}/services/main_writers`, (req, res, ctx) => {
+    return res(
+      ctx.json({
+        status_code: 200,
+        msg: '응답 성공',
+        data: {
+          main_writer_list: [
+            {
+              writer_name: '장발장',
+              writer_id: '10asff',
+            },
+            {
+              writer_name: '어제의 나',
+              writer_id: '10asfg',
+            },
+          ],
+        },
+      }),
+    );
+  }),
+];

web/mocks/index.ts

@@ -0,0 +1,10 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+if (typeof window === 'undefined') {
+  const { server } = require('./server');
+  server.listen();
+} else {
+  const { worker } = require('./browser');
+  worker.start();
+}
+
+export {};

web/mocks/server.ts

@@ -0,0 +1,4 @@
+import { setupServer, SetupServerApi } from 'msw/node';
+import { handlers } from './handlers';
+
+export const server: SetupServerApi = setupServer(...handlers);

web/pages/_app.tsx

@@ -2,6 +2,11 @@ import '../styles/globals.css';
 import type { AppProps } from 'next/app';
 import { Hydrate, QueryClient, QueryClientProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
+import { APP_STAGE } from '~/shared/constants/environments';
+
+if (APP_STAGE !== 'prod') {
+  require('../mocks');
+}
 
 const queryClient = new QueryClient();
 queryClient.setDefaultOptions({
@@ -20,4 +25,5 @@ function MyApp({ Component, pageProps }: AppProps) {
     </QueryClientProvider>
   );
 }
+
 export default MyApp;