Merge pull request #26 from team-nabi/NABI-106

🐛 최초 접속 시 렌더링 문제
team-nabi · Nov 1, 2023 · 8dc20d4 · 8dc20d4
2 parents 3a6b64e + d59b56a
commit 8dc20d4
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 20 deletions.
diff --git a/src/app/(root)/not-found.tsx b/src/app/(root)/not-found.tsx
@@ -1,5 +1,12 @@
 import React from 'react'
+import Link from 'next/link'
+import AppPath from '@/config/appPath'
 
 export default function NotFound() {
-  return <div>NotFound</div>
+  return (
+    <div className="flex flex-row mx-auto my-10">
+      <span>Not Founded</span>
+      <Link href={AppPath.home()}>홈페이지로 돌아가기</Link>
+    </div>
+  )
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,5 @@
 import { Suspense } from 'react'
 import type { Metadata } from 'next'
-import Head from 'next/head'
 import Header from '@/components/domain/Header'
 import { FetchProvider } from '@/contexts/FetchContext'
 import MSWWrapper from '@/contexts/MSWWrapper'
@@ -11,36 +10,34 @@ import '@/styles/globals.css'
 export const metadata: Metadata = {
   title: '나비장터',
   description: '물물교환 플랫폼 나비장터입니다.',
+  viewport: 'width=device-width, initial-scale=1.0',
 }
 
 export default function RootLayout({
   children,
   authModal,
-}: {
+}: Readonly<{
   children: React.ReactNode
   authModal: React.ReactNode
-}) {
+}>) {
   return (
     <html lang="ko">
-      <Head>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      </Head>
       <body>
-        <FetchProvider>
-          <TanstackQueryContext>
-            <MSWWrapper>
+        <MSWWrapper>
+          <FetchProvider>
+            <TanstackQueryContext>
               <ThemeProviderContext>
-                <Suspense>
+                <Suspense fallback={<div>loading...</div>}>
                   <div className="centered-content">
                     <Header isLogin={false} />
                     {children}
                     {authModal}
                   </div>
                 </Suspense>
               </ThemeProviderContext>
-            </MSWWrapper>
-          </TanstackQueryContext>
-        </FetchProvider>
+            </TanstackQueryContext>
+          </FetchProvider>
+        </MSWWrapper>
       </body>
     </html>
   )

diff --git a/src/contexts/MSWWrapper.tsx b/src/contexts/MSWWrapper.tsx
@@ -24,9 +24,7 @@ const MSWComponent = ({ children }: PropsWithChildren) => {
     }
   }, [mswReady])
 
-  if (!mswReady) {
-    return null
-  }
+  if (!mswReady) return null
 
   return <>{children}</>
 }

diff --git a/src/contexts/ThemeProviderContext.tsx b/src/contexts/ThemeProviderContext.tsx
@@ -14,9 +14,9 @@ const ThemeProviderContext = ({ children }: ThemeProviderContextProps) => {
     setMounted(true)
   }, [])
 
-  return (
-    <ThemeProvider attribute="data-theme">{mounted && children}</ThemeProvider>
-  )
+  if (!mounted) return null
+
+  return <ThemeProvider attribute="data-theme">{children}</ThemeProvider>
 }
 
 export default ThemeProviderContext