⚙️ MSW setting (#11)

* feat: app/provider -> app/query * feat: mock server setting * feat: mock worker setting * feat: mock exam handler init * feat: MseProvier init * feat: mockServiceWorker setting * feat: getUser init in Home Component * feat: MSWProvider setting in Layout * feat: installation axios * fix: switch fetch to axios fetch를 사용할 경우 Next.js의 fetch caching으로 인해 오류가 발생하는 이슈 존재 * feat: graphQL 관련 예시 삭제 * chore: getUser 내 의미없는 console.log 제거 * chore: mockingEnabledPromise 내 불필요한 async/await 제거 --------- Co-authored-by: Uichan Lee <[email protected]>
CollaBu · Oct 26, 2024 · f5ccb3e · f5ccb3e
1 parent cdf4564
commit f5ccb3e
Show file tree

Hide file tree

Showing 12 changed files with 409 additions and 3 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,8 +1,15 @@
 import type { Metadata } from 'next';
 
-import { QueryProvider } from '@/app/provider';
+import { MSWProvider } from '@/app/mocks';
+import { QueryProvider } from '@/app/query';
 import './globals.css';
 
+if (process.env.NEXT_RUNTIME === 'nodejs') {
+  import('@/app/mocks').then(({ server }) => {
+    server.listen();
+  });
+}
+
 export const metadata: Metadata = {
   title: 'Pennyway',
   description: '💰 Pennyway : 지출 내역을 관리하고 공유하는 플랫폼',
@@ -16,7 +23,9 @@ export default function RootLayout({
   return (
     <html lang="ko">
       <body>
-        <QueryProvider>{children}</QueryProvider>
+        <MSWProvider>
+          <QueryProvider>{children}</QueryProvider>
+        </MSWProvider>
       </body>
     </html>
   );

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,7 +1,23 @@
+import axios from 'axios';
+
 import IconArrowFront from '/public/assets/icon/arrow-front.svg';
 
 import { PageContainer } from '@/widgets/pageContainer/ui/PageContainer';
-export default function Home() {
+
+type User = {
+  firstName: string;
+  lastName: string;
+};
+
+async function getUser() {
+  const result = await axios.get('https://api.example.com/user');
+  const user = result.data as User;
+  return user;
+}
+
+export default async function Home() {
+  const user = await getUser();
+
   return (
     <PageContainer
       headerProps={{
@@ -11,6 +27,7 @@ export default function Home() {
       }}
     >
       <div className="mt-[44px] flex flex-col justify-center gap-12 bg-[#666666]">
+        <p id="server-side-greeting">Hello, {user.firstName}!</p>
         <div className="w-72">
           <p className="bg-white text-black">White</p>
           <p className="bg-gray01 text-black">Gray 01</p>

diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.59.0",
+    "axios": "^1.7.7",
     "ky": "^1.7.2",
     "next": "14.2.14",
     "react": "^18",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml