[SCF-66] mock server init

- RSC에서 동작 여부 확인 필요

Author: osydoo

apps/commerce/app/(main)/book/page.tsx

@@ -9,7 +9,7 @@ import BiViewListIcon from "assets/svg/bi_view_list_icon.svg";
 import { Card } from "component/common/card";
 import { Pagination } from "component/common/pagination";
 import { BiView } from "component/common/biView";
-import { MOCK } from "../../../mock/constants";
+import { MOCK } from "../../../mocks/json/constants";
 import * as S from "./book.styles";
 import { ViewMode } from "./book.constants";
 

apps/commerce/instrumentation.ts

@@ -0,0 +1,7 @@
+export async function register() {
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    console.log("server instrucmenttation");
+    const { server } = await import("./mocks/server");
+    server.listen();
+  }
+}

apps/commerce/mocks/browser.ts

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

apps/commerce/mocks/handlers/index.ts

@@ -0,0 +1,3 @@
+import sign from "./sign";
+
+export const handlers = [...sign];

apps/commerce/mocks/handlers/sign.ts

@@ -0,0 +1,14 @@
+import { http, HttpResponse } from "msw";
+
+const signIn = [
+  http.post(`${process.env.NEXT_PUBLIC_API_KEY}/sign-in`, () => {
+    return HttpResponse.json({
+      accessToken: "123",
+    });
+  }),
+  http.post(`${process.env.NEXT_PUBLIC_API_KEY}/sign-up`, () => {
+    return HttpResponse.json();
+  }),
+];
+
+export default signIn;

apps/commerce/mock/constants.ts renamed to apps/commerce/mocks/json/constants.ts

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

apps/commerce/mocks/server.ts

@@ -5,8 +5,11 @@ module.exports = {
   compiler: {
     styledComponents: true,
   },
+  experimental: {
+    instrumentationHook: true,
+  },
   // svgr : https://react-svgr.com/docs/next/
-  webpack(config) {
+  webpack(config, { isServer }) {
     // Grab the existing rule that handles SVG imports
     const fileLoaderRule = config.module.rules.find((rule) =>
       rule.test?.test?.(".svg"),
@@ -31,6 +34,20 @@ module.exports = {
     // Modify the file loader rule to ignore *.svg, since we have it handled now.
     fileLoaderRule.exclude = /\.svg$/i;
 
+    if (isServer) {
+      if (Array.isArray(config.resolve.alias)) {
+        config.resolve.alias.push({ name: "msw/browser", alias: false });
+      } else {
+        config.resolve.alias["msw/browser"] = false;
+      }
+    } else {
+      if (Array.isArray(config.resolve.alias)) {
+        config.resolve.alias.push({ name: "msw/node", alias: false });
+      } else {
+        config.resolve.alias["msw/node"] = false;
+      }
+    }
+
     return config;
   },
 };

apps/commerce/next.config.js

@@ -31,8 +31,8 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "@sc-config/jest": "workspace:*",
     "@next/eslint-plugin-next": "^13.4.19",
+    "@sc-config/jest": "workspace:*",
     "@svgr/webpack": "^8.1.0",
     "@tanstack/eslint-plugin-query": "^5.17.7",
     "@testing-library/jest-dom": "^6.1.4",
@@ -43,7 +43,13 @@
     "eslint-config-sc": "workspace:*",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.6.4",
+    "msw": "^2.2.12",
     "tsconfig-sc": "workspace:*",
     "typescript": "^5.2.2"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
   }
-}
+}

apps/commerce/package.json

@@ -2,14 +2,17 @@ import type { ReactNode } from "react";
 import { ReactQueryProvider } from "./reactQuery";
 import StyledJsxProvider from "./emotion";
 import { ThemeProvider } from "./theme";
+import { MockProvider } from "./msw";
 
 const Providers = ({ children }: { children: ReactNode }) => {
   return (
-    <ReactQueryProvider>
-      <StyledJsxProvider>
-        <ThemeProvider>{children}</ThemeProvider>
-      </StyledJsxProvider>
-    </ReactQueryProvider>
+    <MockProvider>
+      <ReactQueryProvider>
+        <StyledJsxProvider>
+          <ThemeProvider>{children}</ThemeProvider>
+        </StyledJsxProvider>
+      </ReactQueryProvider>
+    </MockProvider>
   );
 };