Merge pull request #3 from Nexters/feature/ym

다크모드 & 스타일링 에셋 작업
Nexters · Jan 26, 2025 · 5921ecf · 5921ecf
2 parents 174fcae + ae25887
commit 5921ecf
Show file tree

Hide file tree

Showing 7 changed files with 518 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "next": "15.1.4",
+    "next-themes": "^0.4.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,3 +1,77 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+  --color-gray-100: #f8fafb;
+  --color-gray-200: #f2f4f5;
+  --color-gray-300: #eaeced;
+  --color-gray-400: #dbddde;
+  --color-gray-500: #b7b9bb;
+  --color-gray-600: #989a9b;
+  --color-gray-700: #6f7172;
+  --color-gray-800: #3d3f40;
+  --color-gray-900: #1d1d1d;
+  --color-yellow-100: #fdfce9;
+  --color-yellow-200: #fbf7c8;
+  --color-yellow-300: #f9f2a5;
+  --color-yellow-400: #fffa95;
+  --color-yellow-500: #f5e96a;
+  --color-yellow-600: #f3e34e;
+  --color-yellow-700: #f2d44b;
+  --color-yellow-800: #efbd43;
+  --color-yellow-900: #eba73a;
+  --color-blue-100: #e7ebff;
+  --color-blue-200: #c3cdfe;
+  --color-blue-300: #97adfe;
+  --color-blue-400: #638dff;
+  --color-blue-500: #4f6df1;
+  --color-blue-600: #3456ec;
+  --color-blue-700: #013dd4;
+  --color-blue-800: #0131c9;
+  --color-blue-900: #001bb1;
+  --color-system-red: #ff4242;
+  --color-system-green: #03bf40;
+  --shadow-normal: 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
+    0px 0px 1px 0px rgba(0, 0, 0, 0.08), 0px 0px 1px 0px rgba(0, 0, 0, 0.08);
+  --shadow-emphasize: 0px 2px 8px 0px rgba(183, 185, 187, 0.5),
+    0px 1px 4px 0px rgba(152, 154, 155, 0.3),
+    0px 0px 2px 0px rgba(152, 154, 155, 0.2);
+}
+
+.dark {
+  --color-gray-100: #1d1d1d;
+  --color-gray-200: #28292a;
+  --color-gray-300: #464848;
+  --color-gray-400: #5f6162;
+  --color-gray-500: #7e8081;
+  --color-gray-600: #9aa0a2;
+  --color-gray-700: #c8cdd0;
+  --color-gray-800: #dce2e4;
+  --color-gray-900: #ecf1f4;
+  --color-yellow-100: #dba34a;
+  --color-yellow-200: #e3b844;
+  --color-yellow-300: #eec14b;
+  --color-yellow-400: #f5cc55;
+  --color-yellow-500: #f7d46a;
+  --color-yellow-600: #fce08c;
+  --color-yellow-700: #fde9a4;
+  --color-yellow-800: #f6f3cd;
+  --color-yellow-900: #fbfaeb;
+  --color-blue-100: #293365;
+  --color-blue-200: #253eae;
+  --color-blue-300: #2f4ebf;
+  --color-blue-400: #3a5fd9;
+  --color-blue-500: #466be0;
+  --color-blue-600: #5278f5;
+  --color-blue-700: #9eb1f7;
+  --color-blue-800: #c7cffa;
+  --color-blue-900: #e9ecfd;
+  --color-system-red: #ff6363;
+  --color-system-green: #1ed45a;
+  --shadow-normal: 0px 1px 2px 0px rgba(0, 0, 0, 0.12),
+    0px 0px 2px 0px rgba(0, 0, 0, 0.12);
+  --shadow-emphasize: 0px 0px 0px 0px rgba(183, 185, 187, 0.5),
+    0px 1px 4px 0px rgba(152, 154, 155, 0.3),
+    0px 0px 2px 0px rgba(152, 154, 155, 0.2);
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { ThemeProvider } from "next-themes";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
@@ -23,9 +24,9 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html suppressHydrationWarning>
       <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        {children}
+        <ThemeProvider attribute="class">{children}</ThemeProvider>
       </body>
     </html>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,3 +1,105 @@
+import ThemeSwitch from "@/components/ThemeSwitch";
+
 export default function Home() {
-  return <div className="text-red-600">보도 블록 가보자구우</div>;
+  return (
+    <div>
+      <ThemeSwitch />
+
+      <div className="flex">
+        <div className="flex-1">
+          <p className="text-headline-1-bold text-blue-900">
+            text-headline-1-bold
+          </p>
+          <p className="text-headline-1-regular text-blue-800">
+            text-headline-1-regular
+          </p>
+          <p className="text-headline-2-bold text-blue-700">
+            text-headline-2-bold
+          </p>
+          <p className="text-headline-2-regular text-blue-600">
+            text-headline-2-regular
+          </p>
+          <p className="text-headline-3-bold text-blue-500">
+            text-headline-3-bold
+          </p>
+          <p className="text-headline-3-regular text-blue-400">
+            text-headline-3-regular
+          </p>
+          <p className="text-headline-4-bold text-blue-300">
+            text-headline-4-bold
+          </p>
+          <p className="text-headline-4-semibold text-blue-200">
+            text-headline-4-semibold
+          </p>
+          <p className="text-headline-4-medium text-blue-100">
+            text-headline-4-medium
+          </p>
+
+          <p className="text-title-1-bold text-yellow-900">text-title-1-bold</p>
+          <p className="text-title-1-semibold text-yellow-800">
+            text-title-1-semibold
+          </p>
+          <p className="text-title-1-medium text-yellow-700">
+            text-title-1-medium
+          </p>
+          <p className="text-title-1-regular text-yellow-600">
+            text-title-1-regular
+          </p>
+          <p className="text-title-2-semibold text-yellow-500">
+            text-title-2-semibold
+          </p>
+          <p className="text-title-2-medium text-yellow-400">
+            text-title-2-medium
+          </p>
+          <p className="text-title-2-regular text-yellow-300">
+            text-title-2-regular
+          </p>
+          <p className="text-title-3-semibold text-yellow-200">
+            text-title-3-semibold
+          </p>
+          <p className="text-title-3-medium text-yellow-100">
+            text-title-3-medium
+          </p>
+
+          <p className="text-body-1-semibold text-gray-900">
+            text-body-1-semibold
+          </p>
+          <p className="text-body-1-medium text-gray-800">text-body-1-medium</p>
+          <p className="text-body-1-regular text-gray-700">
+            text-body-1-regular
+          </p>
+          <p className="text-body-2-semibold text-gray-600">
+            text-body-2-semibold
+          </p>
+          <p className="text-body-2-medium text-gray-500">text-body-2-medium</p>
+          <p className="text-body-2-regular text-gray-400">
+            text-body-2-regular
+          </p>
+          <p className="text-body-3-semibold text-gray-300">
+            text-body-3-semibold
+          </p>
+          <p className="text-body-3-medium text-gray-200">text-body-3-medium</p>
+          <p className="text-body-3-regular text-gray-100">
+            text-body-3-regular
+          </p>
+
+          <p className="text-caption-1-semibold text-system-red">
+            text-caption-1-semibold
+          </p>
+          <p className="text-caption-1-regular text-system-green">
+            text-caption-1-regular
+          </p>
+        </div>
+
+        <div className="flex-1 flex gap-8">
+          <div className="w-[10rem] h-[10rem] shadow-normal flex items-center justify-center">
+            shadow-normal
+          </div>
+          <div className="w-[10rem] h-[10rem] shadow-emphasize flex items-center justify-center">
+            shadow-emphasize
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/src/components/ThemeSwitch.tsx b/src/components/ThemeSwitch.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+const ThemeSwitch = () => {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
+      <option value="system">System</option>
+      <option value="dark">Dark</option>
+      <option value="light">Light</option>
+    </select>
+  );
+};
+
+export default ThemeSwitch;