From f718e997e364833e77d2a16ddac57ae14fbfb907 Mon Sep 17 00:00:00 2001
From: Jeong Daseul <98886223+goodaseul@users.noreply.github.com>
Date: Sat, 28 Mar 2026 11:06:47 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20them=EC=9D=84=20=EC=8B=A4=EC=A0=9C?=
 =?UTF-8?q?=EB=A1=9C=20=EC=A0=81=EC=9A=A9=EB=90=9C=20=EA=B2=B0=EA=B3=BC=20?=
 =?UTF-8?q?=EA=B0=92=EC=9C=BC=EB=A1=9C=20=EB=B6=84=EA=B8=B0=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=EB=A6=AC=EB=93=9C=EB=AF=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(protected)/_components/layout/Header.tsx |  6 +++---
 src/app/(public)/_components/PublicHeader.tsx     | 15 +++------------
 .../Header => components/layout/header}/Logo.tsx  |  0
 .../{button => layout/header}/ThemeButton.tsx     | 13 ++++---------
 4 files changed, 10 insertions(+), 24 deletions(-)
 rename src/{app/(protected)/_components/layout/Header => components/layout/header}/Logo.tsx (100%)
 rename src/components/{button => layout/header}/ThemeButton.tsx (68%)

diff --git a/src/app/(protected)/_components/layout/Header.tsx b/src/app/(protected)/_components/layout/Header.tsx
index 6f69b04..1c59730 100644
--- a/src/app/(protected)/_components/layout/Header.tsx
+++ b/src/app/(protected)/_components/layout/Header.tsx
@@ -3,10 +3,10 @@
 import Button from "@/components/button/Button";
 import { RiLogoutBoxRLine } from "react-icons/ri";
 import { useLogout } from "@/hooks/auth/useLogout";
-import { ThemeToggle } from "@/components/button/ThemeButton";
+import { ThemeToggle } from "@/components/layout/header/ThemeButton";
 import MyMenu from "./Header/MyMenu";
 import NavBtn from "./Header/NavBtn";
-import Logo from "./Header/Logo";
+import Logo from "@/components/layout/header/Logo";
 
 export default function Header() {
   const { logout } = useLogout();
@@ -16,7 +16,7 @@ export default function Header() {
       <div className="mx-auto flex max-w-6xl items-center justify-between">
         <Logo />
 
-        <div className="relative flex items-center gap-1 text-gray-600">
+        <div className="relative flex items-center gap-">
           <ThemeToggle />
 
           <MyMenu />
diff --git a/src/app/(public)/_components/PublicHeader.tsx b/src/app/(public)/_components/PublicHeader.tsx
index 5427a55..8372587 100644
--- a/src/app/(public)/_components/PublicHeader.tsx
+++ b/src/app/(public)/_components/PublicHeader.tsx
@@ -1,21 +1,12 @@
 import Button from "@/components/button/Button";
-import { ThemeToggle } from "@/components/button/ThemeButton";
-import Link from "next/link";
+import Logo from "@/components/layout/header/Logo";
+import { ThemeToggle } from "@/components/layout/header/ThemeButton";
 
 export default function PublicHeader() {
   return (
     <header className="fixed top-0 left-0 z-20 w-full p-6 backdrop-blur-lg">
       <div className="mx-auto flex max-w-6xl items-center justify-between">
-        <Link
-          href="/"
-          className="font-sekuya text-xl text-foreground transition-colors hover:text-point group"
-        >
-          STACK
-          <span className="text-point transition-colors group-hover:text-foreground">
-            PLUS
-          </span>
-        </Link>
-
+        <Logo />
         <nav className="flex items-center gap-4">
           <ThemeToggle />
           <Button type="button" variant="text_underline" href="/dashboard">
diff --git a/src/app/(protected)/_components/layout/Header/Logo.tsx b/src/components/layout/header/Logo.tsx
similarity index 100%
rename from src/app/(protected)/_components/layout/Header/Logo.tsx
rename to src/components/layout/header/Logo.tsx
diff --git a/src/components/button/ThemeButton.tsx b/src/components/layout/header/ThemeButton.tsx
similarity index 68%
rename from src/components/button/ThemeButton.tsx
rename to src/components/layout/header/ThemeButton.tsx
index 9567acd..6c505db 100644
--- a/src/components/button/ThemeButton.tsx
+++ b/src/components/layout/header/ThemeButton.tsx
@@ -4,7 +4,7 @@ import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 
 export function ThemeToggle() {
-  const { theme, setTheme } = useTheme();
+  const { resolvedTheme, setTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
 
   const isMobile = useMobileSize();
@@ -13,19 +13,14 @@ export function ThemeToggle() {
   useEffect(() => setMounted(true), []);
   if (!mounted) return null;
 
+  const isDark = resolvedTheme === "dark";
   return (
     <button
       className={`
         font-sekuya text-sm md:text-md bg-whiterounded-sm px-2 py-1`}
-      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      onClick={() => setTheme(isDark ? "light" : "dark")}
     >
-      {theme === "dark"
-        ? isMobile
-          ? "☀️"
-          : "light"
-        : isMobile
-          ? "🌙"
-          : "dark"}
+      {isDark ? (isMobile ? "☀️" : "light") : isMobile ? "🌙" : "dark"}
     </button>
   );
 }