🐛 msw가 ssr에서 정상작동하지 않는 문제 처리

.github/workflows/pull-request.yml

@@ -32,15 +32,17 @@ jobs:
         run: npm install
 
       # 아래 단계에서 .env 파일을 생성하고 시크릿 값을 설정합니다.
-      # - name: Set Environment Variables
-      #   env:
-      #     NEXT_PUBLIC_API_ADDRESS: ${{ secrets.NEXT_PUBLIC_API_ADDRESS }}
-      #     NEXT_PUBLIC_CHANNEL_ID: ${{ secrets.NEXT_PUBLIC_CHANNEL_ID }}
-      #     NEXT_PUBLIC_DISLIKE_CHANNEL_ID: ${{ secrets.NEXT_PUBLIC_DISLIKE_CHANNEL_ID }}
-      #   run: |
-      #     echo "NEXT_PUBLIC_API_ADDRESS=$NEXT_PUBLIC_API_ADDRESS" >> .env
-      #     echo "NEXT_PUBLIC_CHANNEL_ID=$NEXT_PUBLIC_CHANNEL_ID" >> .env
-      #     echo "NEXT_PUBLIC_DISLIKE_CHANNEL_ID=$NEXT_PUBLIC_DISLIKE_CHANNEL_ID" >> .env
+      - name: Set Environment Variables
+        env:
+          NEXT_PUBLIC_API_ADDRESS: ${{ secrets.NEXT_PUBLIC_API_ADDRESS }}
+          NEXT_PUBLIC_API_MOCKING: ${{ secrets.NEXT_PUBLIC_API_MOCKING }}
+          NEXT_PUBLIC_API_MOCKING_ADDRESS: ${{ secrets.NEXT_PUBLIC_API_MOCKING_ADDRESS }}
+          CHROMATIC_TOKEN: ${{ secrets.CHROMATIC_TOKEN }}
+        run: |
+          echo "NEXT_PUBLIC_API_ADDRESS=$NEXT_PUBLIC_API_ADDRESS" >> .env
+          echo "NEXT_PUBLIC_API_MOCKING=$NEXT_PUBLIC_API_MOCKING" >> .env
+          echo "NEXT_PUBLIC_API_MOCKING_ADDRESS=$NEXT_PUBLIC_API_MOCKING_ADDRESS" >> .env
+          echo "CHROMATIC_TOKEN=$CHROMATIC_TOKEN" >> .env
 
       # 빌드를 수행합니다.
       - name: Build
@@ -61,12 +63,7 @@ jobs:
             await github.pulls.createReview({
               ...context.repo,
               pull_number,
-              body : "테스트코드를 다시 확인해주세요. ",
+              body : "actions 결과를 다시 확인해주세요. -자동으로 작성됨-",
               event : "REQUEST_CHANGES"
             })
-            await github.pulls.update({
-              ...context.repo,
-              pull_number,
-              state: "closed"
-            })
         if: failure()

src/app/(root)/(routes)/(home)/components/TestBlock.tsx

@@ -1,25 +1,28 @@
-'use client'
-
-import React, { useEffect } from 'react'
+// 'use client'
+import React from 'react'
 import { getTest } from '@/services/test/test'
 
-// async function getTestValue() {
-//   const res = await getTest()
-//   const data = await res.json()
-//   return data
-// }
+async function getTestValue(): Promise<{ message: string } | null> {
+  try {
+    const res = await getTest()
+    const data = await res.json()
+    return data
+  } catch (e) {
+    console.log(e)
+    return null
+  }
+}
 
-export default function TestBlock() {
-  // const data = await getTestValue()
-  // console.log(data.message)
+export default async function TestBlock() {
+  const data = await getTestValue()
 
-  useEffect(() => {
-    async function fetchData() {
-      const data = await getTest()
-      console.log(await data.json())
-    }
-    fetchData()
-  }, [])
+  // useEffect(() => {
+  //   async function fetchData() {
+  //     const data = await getTest()
+  //     console.log(await data.json())
+  //   }
+  //   fetchData()
+  // }, [])
 
-  return <div>{'index '}</div>
+  return <div>{'index ' + data?.message}</div>
 }

src/app/layout.tsx

@@ -1,9 +1,11 @@
 import { Suspense } from 'react'
 import type { Metadata } from 'next'
 import Header from '@/components/domain/Header'
+import { Environment } from '@/config/environment'
 import MSWWrapper from '@/contexts/MSWWrapper'
 import TanstackQueryContext from '@/contexts/TanstackQueryContext'
 import ThemeProviderContext from '@/contexts/ThemeProviderContext'
+import { initMockApi } from '@/lib/msw/initMockApi'
 import '@/styles/globals.css'
 
 export const metadata: Metadata = {
@@ -12,6 +14,11 @@ export const metadata: Metadata = {
   viewport: 'width=device-width, initial-scale=1.0',
 }
 
+if (Environment.apiMocking() === 'enabled') {
+  console.log('Mocking enabled')
+  initMockApi()
+}
+
 export default function RootLayout({
   children,
   authModal,

src/config/environment.ts

@@ -1,5 +1,8 @@
 export const Environment = {
-  apiAddress: () => process.env.NEXT_PUBLIC_API_ADDRESS,
+  apiAddress: () =>
+    process.env.NEXT_PUBLIC_API_MOCKING === 'enabled'
+      ? process.env.NEXT_PUBLIC_API_MOCKING_ADDRESS
+      : process.env.NEXT_PUBLIC_API_ADDRESS,
   apiMocking: () =>
     process.env.NEXT_PUBLIC_API_MOCKING === 'enabled' ? 'enabled' : 'disabled',
 }