From 711c758b4563bebabbc05d8b5d8455e2deb647f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9C=84=EC=98=81=EB=AF=BC?= <youngminieo1005@gmail.com>
Date: Sat, 25 Jan 2025 21:47:55 +0900
Subject: [PATCH 1/4] =?UTF-8?q?chore:=20next-theme=20=EC=9D=98=EC=A1=B4?=
 =?UTF-8?q?=EC=84=B1=20=ED=8C=A8=ED=82=A4=EC=A7=80=20=EC=84=A4=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 11 +++++++++++
 package.json      |  1 +
 2 files changed, 12 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 72812cd..b727eec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "next": "15.1.4",
+        "next-themes": "^0.4.4",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
       },
@@ -4112,6 +4113,16 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.4.tgz",
+      "integrity": "sha512-LDQ2qIOJF0VnuVrrMSMLrWGjRMkq+0mpgl6e0juCLqdJ+oo8Q84JRWT6Wh11VDQKkMMe+dVzDKLWs5n87T+PkQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
diff --git a/package.json b/package.json
index ee2139e..fd12091 100644
--- 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"
   },

From 6a6ab9db9497399d4a99cafcc720c0c08970e060 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9C=84=EC=98=81=EB=AF=BC?= <youngminieo1005@gmail.com>
Date: Sat, 25 Jan 2025 21:48:51 +0900
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=EC=BB=AC=EB=9F=AC,=20=ED=8F=B0?=
 =?UTF-8?q?=ED=8A=B8,=20=EA=B7=B8=EB=A6=BC=EC=9E=90=20=ED=9A=A8=EA=B3=BC?=
 =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=97=90=EC=85=8B=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/globals.css |  74 +++++++++++
 tailwind.config.js  | 300 +++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 373 insertions(+), 1 deletion(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index b5c61c9..25eaf0c 100644
--- 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/tailwind.config.js b/tailwind.config.js
index 54331dc..8d8551b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,306 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: "class",
   content: ["./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        mobile: { max: "759px" },
+        tablet: { min: "760px", max: "1023px" },
+        desktop: { min: "1024px" },
+      },
+      colors: {
+        "gray-100": "var(--color-gray-100)",
+        "gray-200": "var(--color-gray-200)",
+        "gray-300": "var(--color-gray-300)",
+        "gray-400": "var(--color-gray-400)",
+        "gray-500": "var(--color-gray-500)",
+        "gray-600": "var(--color-gray-600)",
+        "gray-700": "var(--color-gray-700)",
+        "gray-800": "var(--color-gray-800)",
+        "gray-900": "var(--color-gray-900)",
+        "yellow-100": "var(--color-yellow-100)",
+        "yellow-200": "var(--color-yellow-200)",
+        "yellow-300": "var(--color-yellow-300)",
+        "yellow-400": "var(--color-yellow-400)",
+        "yellow-500": "var(--color-yellow-500)",
+        "yellow-600": "var(--color-yellow-600)",
+        "yellow-700": "var(--color-yellow-700)",
+        "yellow-800": "var(--color-yellow-800)",
+        "yellow-900": "var(--color-yellow-900)",
+        "blue-100": "var(--color-blue-100)",
+        "blue-200": "var(--color-blue-200)",
+        "blue-300": "var(--color-blue-300)",
+        "blue-400": "var(--color-blue-400)",
+        "blue-500": "var(--color-blue-500)",
+        "blue-600": "var(--color-blue-600)",
+        "blue-700": "var(--color-blue-700)",
+        "blue-800": "var(--color-blue-800)",
+        "blue-900": "var(--color-blue-900)",
+        "system-red": "var(--color-system-red)",
+        "system-green": "var(--color-system-green)",
+        white: "#FFFFFF",
+        dark: "#0E0E0E",
+      },
+      fontSize: {
+        // headline
+        "headline-1-bold": [
+          "40px",
+          {
+            fontWeight: "700",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.4",
+          },
+        ],
+        "headline-1-regular": [
+          "40px",
+          {
+            fontWeight: "400",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.4",
+          },
+        ],
+        "headline-2-bold": [
+          "36px",
+          {
+            fontWeight: "700",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.34",
+          },
+        ],
+        "headline-2-regular": [
+          "36px",
+          {
+            fontWeight: "400",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.34",
+          },
+        ],
+        "headline-3-bold": [
+          "32px",
+          {
+            fontWeight: "700",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.36",
+          },
+        ],
+        "headline-3-regular": [
+          "32px",
+          {
+            fontWeight: "400",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.36",
+          },
+        ],
+        "headline-4-bold": [
+          "28px",
+          {
+            fontWeight: "700",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.36",
+          },
+        ],
+        "headline-4-semibold": [
+          "28px",
+          {
+            fontWeight: "600",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.36",
+          },
+        ],
+        "headline-4-medium": [
+          "28px",
+          {
+            fontWeight: "500",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.36",
+          },
+        ],
+        "headline-4-regular": [
+          "28px",
+          {
+            fontWeight: "400",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.36",
+          },
+        ],
+        // title
+        "title-1-bold": [
+          "24px",
+          {
+            fontWeight: "700",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.4",
+          },
+        ],
+        "title-1-semibold": [
+          "24px",
+          {
+            fontWeight: "600",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.4",
+          },
+        ],
+        "title-1-medium": [
+          "24px",
+          {
+            fontWeight: "500",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.4",
+          },
+        ],
+        "title-1-regular": [
+          "24px",
+          {
+            fontWeight: "400",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.4",
+          },
+        ],
+        "title-2-semibold": [
+          "20px",
+          {
+            fontWeight: "600",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.4",
+          },
+        ],
+        "title-2-medium": [
+          "20px",
+          {
+            fontWeight: "500",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.4",
+          },
+        ],
+        "title-2-regular": [
+          "20px",
+          {
+            fontWeight: "400",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.4",
+          },
+        ],
+        "title-3-semibold": [
+          "18px",
+          {
+            fontWeight: "600",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.445",
+          },
+        ],
+        "title-3-medium": [
+          "18px",
+          {
+            fontWeight: "500",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.445",
+          },
+        ],
+        "title-3-regular": [
+          "18px",
+          {
+            fontWeight: "400",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.445",
+          },
+        ],
+        // body
+        "body-1-semibold": [
+          "16px",
+          {
+            fontWeight: "600",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.5",
+          },
+        ],
+        "body-1-medium": [
+          "16px",
+          {
+            fontWeight: "500",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.5",
+          },
+        ],
+        "body-1-regular": [
+          "16px",
+          {
+            fontWeight: "400",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.5",
+          },
+        ],
+        "body-2-semibold": [
+          "14px",
+          {
+            fontWeight: "600",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.6",
+          },
+        ],
+        "body-2-medium": [
+          "14px",
+          {
+            fontWeight: "500",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.6",
+          },
+        ],
+        "body-2-regular": [
+          "14px",
+          {
+            fontWeight: "400",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.6",
+          },
+        ],
+        "body-3-semibold": [
+          "12px",
+          {
+            fontWeight: "600",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.5",
+          },
+        ],
+        "body-3-medium": [
+          "12px",
+          {
+            fontWeight: "500",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.5",
+          },
+        ],
+        "body-3-regular": [
+          "12px",
+          {
+            fontWeight: "400",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.5",
+          },
+        ],
+        // caption
+        "caption-1-semibold": [
+          "10px",
+          {
+            fontWeight: "600",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.6",
+          },
+        ],
+        "caption-1-regular": [
+          "10px",
+          {
+            fontWeight: "400",
+            letterSpacing: "-1.1px",
+            lineHeight: "1.6",
+          },
+        ],
+      },
+      boxShadow: {
+        normal: "var(--shadow-normal)",
+        emphasize: "var(--shadow-emphasize)",
+      },
+    },
   },
   plugins: [],
 };

From 32cd73d3dd3387dc0629ff5452cee87a5db0c863 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9C=84=EC=98=81=EB=AF=BC?= <youngminieo1005@gmail.com>
Date: Sat, 25 Jan 2025 21:49:21 +0900
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=EB=8B=A4=ED=81=AC=20=EB=AA=A8?=
 =?UTF-8?q?=EB=93=9C=20=EA=B8=B0=EB=B3=B8=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/layout.tsx             |   5 +-
 src/app/page.tsx               | 104 ++++++++++++++++++++++++++++++++-
 src/components/ThemeSwitch.tsx |  27 +++++++++
 3 files changed, 133 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ThemeSwitch.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 42fc323..9e25e2e 100644
--- 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
index dce9725..dc6dc90 100644
--- 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
new file mode 100644
index 0000000..1ae4f80
--- /dev/null
+++ 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;

From ae25887b09cfb05ab84ce9aea6d21a6170e422dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9C=84=EC=98=81=EB=AF=BC?= <youngminieo1005@gmail.com>
Date: Sun, 26 Jan 2025 17:39:44 +0900
Subject: [PATCH 4/4] =?UTF-8?q?fix:=20Breakpoint=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tailwind.config.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 8d8551b..adb6a21 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,9 +5,9 @@ module.exports = {
   theme: {
     extend: {
       screens: {
-        mobile: { max: "759px" },
-        tablet: { min: "760px", max: "1023px" },
-        desktop: { min: "1024px" },
+        mobile: { max: "767px" },
+        tablet: { min: "768px", max: "1439px" },
+        desktop: { min: "1440px" },
       },
       colors: {
         "gray-100": "var(--color-gray-100)",