team-nabi · oaoong · Oct 24, 2023 · Oct 24, 2023
diff --git a/package.json b/package.json
@@ -20,12 +20,14 @@
     "classnames": "^2.3.2",
     "clsx": "^2.0.0",
     "next": "13.5.6",
+    "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.47.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.3",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
+    "tw-colors": "^3.1.2",
     "zod": "^3.22.4"
   },
   "devDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/(root)/(routes)/(home)/page.tsx b/src/app/(root)/(routes)/(home)/page.tsx
@@ -1,9 +1,11 @@
 import Link from 'next/link'
+import { DarkModeButton } from '@/components/ui/DarkModeButton'
 
 export default function HomePage() {
   return (
-    <main className="flex flex-col items-center justify-between min-h-screen p-24 text-4xl font-bold text-red-500">
+    <main className="flex flex-col items-center justify-between min-h-screen p-24 text-4xl font-bold text-background-color bg-primary-color">
       hi
+      <DarkModeButton />
       <Link href={'/login'}>로긴</Link>
     </main>
   )

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,8 @@
+import { Suspense } from 'react'
 import type { Metadata } from 'next'
 import { Environment } from '@/config/environment'
 import TanstackQueryContext from '@/contexts/TanstackQueryContext'
+import ThemeProviderContext from '@/contexts/ThemeProviderContext'
 import { initMockApi } from '@/lib/msw/initMockApi'
 import '@/styles/globals.css'
 
@@ -22,13 +24,17 @@ export default function RootLayout({
   authModal: React.ReactNode
 }) {
   return (
-    <html lang="en">
-      <TanstackQueryContext>
-        <body>
-          {children}
-          {authModal}
-        </body>
-      </TanstackQueryContext>
+    <html lang="ko">
+      <body>
+        <TanstackQueryContext>
+          <ThemeProviderContext>
+            <Suspense>
+              {children}
+              {authModal}
+            </Suspense>
+          </ThemeProviderContext>
+        </TanstackQueryContext>
+      </body>
     </html>
   )
 }
diff --git a/src/components/ui/DarkModeButton/DarkModeButton.tsx b/src/components/ui/DarkModeButton/DarkModeButton.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import React from 'react'
+import { useTheme } from 'next-themes'
+
+const DarkModeButton = () => {
+  const { theme, setTheme } = useTheme()
+
+  return (
+    <div className="fixed flex justify-center w-10 h-10 align-middle rounded-lg bg-primary-color bottom-7 left-7">
+      <button
+        type="button"
+        onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+        className="text-background-color"
+      >
+        {theme === 'light' ? (
+          <svg
+            className="w-8 h-8"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+          </svg>
+        ) : (
+          <svg
+            className="w-8 h-8"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+              fillRule="evenodd"
+              clipRule="evenodd"
+            ></path>
+          </svg>
+        )}
+      </button>
+    </div>
+  )
+}
+
+export default DarkModeButton
diff --git a/src/components/ui/DarkModeButton/index.tsx b/src/components/ui/DarkModeButton/index.tsx
@@ -0,0 +1,3 @@
+import { default as DarkModeButton } from './DarkModeButton'
+
+export { DarkModeButton }
diff --git a/src/contexts/TanstackQueryContext.tsx b/src/contexts/TanstackQueryContext.tsx
@@ -3,16 +3,16 @@
 import { useState } from 'react'
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
 
-interface TanstackQueryContextProps {
+type TanstackQueryContextProps = {
   children: React.ReactNode
 }
 
-export default function TanstackQueryContext({
-  children,
-}: TanstackQueryContextProps) {
+function TanstackQueryContext({ children }: TanstackQueryContextProps) {
   const [queryClient] = useState(() => new QueryClient())
 
   return (
     <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   )
 }
+
+export default TanstackQueryContext
diff --git a/src/contexts/ThemeProviderContext.tsx b/src/contexts/ThemeProviderContext.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { ThemeProvider } from 'next-themes'
+
+type ThemeProviderContextProps = {
+  children: React.ReactNode
+}
+
+const ThemeProviderContext = ({ children }: ThemeProviderContextProps) => {
+  const [mounted, setMounted] = useState<boolean>(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return (
+    <ThemeProvider attribute="data-theme">{mounted && children}</ThemeProvider>
+  )
+}
+
+export default ThemeProviderContext
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,3 +1,5 @@
+const { createThemes } = require('tw-colors')
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
@@ -8,8 +10,24 @@ module.exports = {
     // Or if using `src` directory:
     './src/**/*.{js,ts,jsx,tsx,mdx}',
   ],
+  darkMode: ['class'],
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    createThemes({
+      light: {
+        'background-color': '#e5e5e5',
+        'primary-color': '#404040',
+        'card-background-color': '#d4d4d4',
+        'secondary-color': '#d4d4d4',
+      },
+      dark: {
+        'background-color': '#404040',
+        'primary-color': '#e5e5e5',
+        'card-background-color': '#525252',
+        'secondary-color': '#525252',
+      },
+    }),
+  ],
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { default as DarkModeButton } from './DarkModeButton'

		export { DarkModeButton }