fix: 초기 렌더링 문제 해결

src/instrumentation.ts

@@ -6,9 +6,9 @@ export async function register() {
   );
 
   if (process.env.NEXT_RUNTIME === 'nodejs') {
-    console.log('MOCKING ENABLED FOR:', process.pid);
-
     const { server } = await import('@/src/mocks/node');
-    server.listen();
+    server.listen({
+      onUnhandledRequest: 'bypass',
+    });
   }
 }

src/mocks/MSWComponent.tsx

@@ -9,8 +9,7 @@ export const MSWComponent = ({ children }: { children: React.ReactNode }) => {
 
   useEffect(() => {
     if (!isInit) {
-      initMsw();
-      isSetInit(true);
+      initMsw().then(() => isSetInit(true));
     }
   }, [isInit]);
 

src/mocks/handlers/post.ts

@@ -1,6 +1,6 @@
 import { HttpResponse, http } from 'msw';
 
-const getPostList = http.get(`${process.env.NEXT_DOMAIN}/posts`, () => {
+const getPostList = http.get(`${process.env.NEXT_PUBLIC_URL}/posts`, () => {
   return HttpResponse.json({
     content: [
       {

src/mocks/initMsw.ts

@@ -1,19 +1,8 @@
-export const initMsw = () => {
-  if (process.env.NODE_ENV === 'development') {
-    if (process.env.NEXT_RUNTIME === 'nodejs') {
-      (async () => {
-        const { server } = await import('./node');
-        server.listen({
-          onUnhandledRequest: 'bypass',
-        });
-      })();
-    } else {
-      (async () => {
-        const { worker } = await import('./browser');
-        worker.start({
-          onUnhandledRequest: 'bypass',
-        });
-      })();
-    }
+export const initMsw = async () => {
+  if (process.env.NEXT_RUNTIME !== 'nodejs') {
+    const { worker } = await import('./browser');
+    await worker.start({
+      onUnhandledRequest: 'bypass',
+    });
   }
 };