Merge pull request #23 from team-nabi/NABI-77

🎉 Nabi 77 fetch 관련 설정
team-nabi · Nov 1, 2023 · 3a6b64e · 3a6b64e
2 parents 324665d + 23b787f
commit 3a6b64e
Show file tree

Hide file tree

Showing 14 changed files with 1,104 additions and 752 deletions.
diff --git a/.env.example b/.env.example
@@ -1,2 +1,3 @@
+NEXT_PUBLIC_API_ADDRESS=http://localhost:3000
 NEXT_PUBLIC_API_MOCKING=enabled # or disabled
 CHROMATIC_TOKEN=your-token
diff --git a/package.json b/package.json
@@ -52,7 +52,7 @@
     "@tanstack/eslint-plugin-query": "^5.0.0",
     "@trivago/prettier-plugin-sort-imports": "^4.2.0",
     "@types/node": "^20",
-    "@types/react": "^18",
+    "@types/react": "^18.2.33",
     "@types/react-dom": "^18",
     "@types/tailwindcss": "^3.1.0",
     "chromatic": "^7.5.4",
@@ -66,7 +66,7 @@
     "prettier": "^3.0.3",
     "storybook": "7.5.0",
     "storybook-dark-mode": "^3.0.1",
-    "typescript": "^5",
+    "typescript": "^5.2.2",
     "vitest": "^0.34.6"
   },
   "lint-staged": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/(root)/(routes)/(home)/components/TestBlock.tsx b/src/app/(root)/(routes)/(home)/components/TestBlock.tsx
@@ -0,0 +1,26 @@
+'use client'
+
+import React, { useEffect } from 'react'
+// import { useApiClient } from '@/contexts/FetchContext'
+import { getTest } from '@/services/test/test'
+
+// async function getTestValue() {
+//   const res = await getTest()
+//   const data = await res.json()
+//   return data
+// }
+
+export default function TestBlock() {
+  // const data = await getTestValue()
+  // console.log(data.message)
+
+  useEffect(() => {
+    async function fetchData() {
+      const data = await getTest()
+      console.log(await data.json())
+    }
+    fetchData()
+  }, [])
+
+  return <div>{'index '}</div>
+}
diff --git a/src/app/(root)/(routes)/(home)/page.tsx b/src/app/(root)/(routes)/(home)/page.tsx
@@ -1,9 +1,11 @@
 import { DarkModeButton } from '@/components/ui/DarkModeButton'
+import TestBlock from './components/TestBlock'
 
 export default function HomePage() {
   return (
     <main className="flex flex-col items-center justify-between min-h-screen p-24 text-4xl font-bold text-text-color bg-background-color">
       hi
+      <TestBlock />
       <DarkModeButton />
     </main>
   )

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,22 +2,17 @@ import { Suspense } from 'react'
 import type { Metadata } from 'next'
 import Head from 'next/head'
 import Header from '@/components/domain/Header'
-import { Environment } from '@/config/environment'
+import { FetchProvider } from '@/contexts/FetchContext'
+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 = {
   title: '나비장터',
   description: '물물교환 플랫폼 나비장터입니다.',
 }
 
-if (Environment.apiMocking() === 'enabled') {
-  console.log('Mocking enabled')
-  initMockApi()
-}
-
 export default function RootLayout({
   children,
   authModal,
@@ -31,17 +26,21 @@ export default function RootLayout({
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </Head>
       <body>
-        <TanstackQueryContext>
-          <ThemeProviderContext>
-            <Suspense>
-              <div className="centered-content">
-                <Header isLogin={false} />
-                {children}
-                {authModal}
-              </div>
-            </Suspense>
-          </ThemeProviderContext>
-        </TanstackQueryContext>
+        <FetchProvider>
+          <TanstackQueryContext>
+            <MSWWrapper>
+              <ThemeProviderContext>
+                <Suspense>
+                  <div className="centered-content">
+                    <Header isLogin={false} />
+                    {children}
+                    {authModal}
+                  </div>
+                </Suspense>
+              </ThemeProviderContext>
+            </MSWWrapper>
+          </TanstackQueryContext>
+        </FetchProvider>
       </body>
     </html>
   )

diff --git a/src/config/apiEndPoint.ts b/src/config/apiEndPoint.ts
@@ -0,0 +1,6 @@
+const ApiEndPoint = {
+  login: () => '/login',
+  test: () => '/test',
+} as const
+
+export default ApiEndPoint
diff --git a/src/config/environment.ts b/src/config/environment.ts
@@ -1,6 +1,5 @@
-import { assertValue } from '@/utils/assertValue'
-
 export const Environment = {
+  apiAddress: () => process.env.NEXT_PUBLIC_API_ADDRESS,
   apiMocking: () =>
     process.env.NEXT_PUBLIC_API_MOCKING === 'enabled' ? 'enabled' : 'disabled',
 }
diff --git a/src/contexts/FetchContext.tsx b/src/contexts/FetchContext.tsx
@@ -0,0 +1,26 @@
+'use client'
+
+import React, { ReactNode, createContext, useContext, useMemo } from 'react'
+import FetchAPI from '@/lib/fetchAPI'
+
+const FetchContext = createContext<{ api: FetchAPI }>({ api: {} as FetchAPI })
+
+export const FetchProvider = ({ children }: { children: ReactNode }) => {
+  const api = FetchAPI.getInstance()
+
+  const contextValue = useMemo(() => ({ api }), [api])
+
+  return (
+    <FetchContext.Provider value={contextValue}>
+      {children}
+    </FetchContext.Provider>
+  )
+}
+
+export const useApiClient = () => {
+  const context = useContext(FetchContext)
+  if (!context) {
+    throw new Error('useApiClient must be used within a FetchProvider')
+  }
+  return context
+}
diff --git a/src/contexts/MSWWrapper.tsx b/src/contexts/MSWWrapper.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import { useState, type PropsWithChildren, useEffect } from 'react'
+import { Environment } from '@/config/environment'
+
+const isMockingMode = Environment.apiMocking() === 'enabled'
+
+const MSWComponent = ({ children }: PropsWithChildren) => {
+  const [mswReady, setMSWReady] = useState(() => !isMockingMode)
+
+  useEffect(() => {
+    const init = async () => {
+      if (isMockingMode) {
+        const initMocks = await import('../lib/msw/initMockApi').then(
+          (res) => res.initMockApi,
+        )
+        await initMocks()
+        setMSWReady(true)
+      }
+    }
+
+    if (!mswReady) {
+      init()
+    }
+  }, [mswReady])
+
+  if (!mswReady) {
+    return null
+  }
+
+  return <>{children}</>
+}
+
+export default MSWComponent
diff --git a/src/lib/fetchAPI.tsx b/src/lib/fetchAPI.tsx
@@ -0,0 +1,88 @@
+import { Environment } from '@/config/environment'
+
+class FetchAPI {
+  private baseURL: string
+  private headers: { [key: string]: string }
+
+  private static instance: FetchAPI
+
+  private constructor() {
+    this.baseURL = Environment.apiAddress() ?? ''
+    this.headers = {
+      'Content-Type': 'application/json',
+    }
+  }
+
+  public static getInstance(): FetchAPI {
+    if (!FetchAPI.instance) {
+      FetchAPI.instance = new FetchAPI()
+    }
+    return FetchAPI.instance
+  }
+
+  public setBaseURL(url: string): void {
+    this.baseURL = url
+  }
+
+  public setDefaultHeader(key: string, value: string): void {
+    this.headers[key] = value
+  }
+
+  public async get(
+    endpoint: string,
+    nextInit: RequestInit = {},
+    customHeaders: { [key: string]: string } = {},
+  ): Promise<any> {
+    const response = await fetch(`${this.baseURL}${endpoint}`, {
+      method: 'GET',
+      headers: { ...this.headers, ...customHeaders },
+      ...nextInit,
+    })
+    return response
+  }
+
+  public async post(
+    endpoint: string,
+    body: any,
+    nextInit: RequestInit = {},
+    customHeaders: { [key: string]: string } = {},
+  ): Promise<any> {
+    const response = await fetch(`${this.baseURL}${endpoint}`, {
+      method: 'POST',
+      headers: { ...this.headers, ...customHeaders },
+      body: JSON.stringify(body),
+      ...nextInit,
+    })
+    return response
+  }
+
+  public async put(
+    endpoint: string,
+    body: any,
+    nextInit: RequestInit = {},
+    customHeaders: { [key: string]: string } = {},
+  ): Promise<any> {
+    const response = await fetch(`${this.baseURL}${endpoint}`, {
+      method: 'PUT',
+      headers: { ...this.headers, ...customHeaders },
+      body: JSON.stringify(body),
+      ...nextInit,
+    })
+    return response
+  }
+
+  public async delete(
+    endpoint: string,
+    nextInit: RequestInit = {},
+    customHeaders: { [key: string]: string } = {},
+  ): Promise<any> {
+    const response = await fetch(`${this.baseURL}${endpoint}`, {
+      method: 'DELETE',
+      headers: { ...this.headers, ...customHeaders },
+      ...nextInit,
+    })
+    return response
+  }
+}
+
+export default FetchAPI
diff --git a/src/lib/msw/mocks/testHandler.ts b/src/lib/msw/mocks/testHandler.ts
@@ -1,7 +1,10 @@
 import { rest } from 'msw'
+import { Environment } from '@/config/environment'
+
+const baseUrl = Environment.apiAddress()
 
 export const testHandlers = [
-  rest.get('/test', async (_req, res, ctx) => {
+  rest.get(`${baseUrl}/test`, async (_req, res, ctx) => {
     return res(
       ctx.status(200),
       ctx.json({

diff --git a/src/services/auth/auth.ts b/src/services/auth/auth.ts
@@ -0,0 +1,15 @@
+import ApiEndPoint from '@/config/apiEndPoint'
+import { Environment } from '@/config/environment'
+
+const postLogin = async () => {
+  const response = await fetch(Environment.apiAddress() + ApiEndPoint.login(), {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+  const data = await response.json()
+  return data
+}
+
+export { postLogin }
diff --git a/src/services/test/test.ts b/src/services/test/test.ts
@@ -0,0 +1,16 @@
+import ApiEndPoint from '@/config/apiEndPoint'
+import FetchAPI from '@/lib/fetchAPI'
+
+const getTest = async () => {
+  const api = FetchAPI.getInstance()
+  const response = await api.get(
+    ApiEndPoint.test(),
+    { next: { revalidate: 10 } },
+    {
+      'Content-Type': 'application/json',
+    },
+  )
+  return response
+}
+
+export { getTest }