From fd600126903cd9a973a7b9943db346081db4bdcd Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Mon, 23 Feb 2026 21:06:56 +0900
Subject: [PATCH 01/13] =?UTF-8?q?refactor:=20useSidebar=20hook=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sidebar/Sidebar.tsx | 38 ++++++++++++--------------
 src/hooks/sidebar/useSidebar.ts    | 43 ++++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 21 deletions(-)
 create mode 100644 src/hooks/sidebar/useSidebar.ts

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index f43788a..9e5a865 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -1,8 +1,9 @@
-import { useEffect, useState } from "react";
-import { NavLink, useLocation, useNavigate } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 
 import { footerNav, mainNav } from "@/constants/sidebarNav";
 
+import { useSidebar } from "@/hooks/sidebar/useSidebar";
+
 import ChevronIcon from "@/assets/icon/common/chevron-up.svg?react";
 import CollapseIcon from "@/assets/icon/sidebar/chevron-left.svg?react";
 import Logo from "@/assets/logo/symbol-color.svg?react";
@@ -26,19 +27,14 @@ function getFooterItemClass(isActive: boolean, isCollapsed: boolean) {
 }
 
 export default function Sidebar() {
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  const [openId, setOpenId] = useState<string | null>(null);
-  const [isCollapsed, setIsCollapsed] = useState(false);
-
-  useEffect(() => {
-    const activeParent = mainNav.find((item) =>
-      item.children?.some((c) => c.path === location.pathname),
-    );
-
-    if (activeParent) setOpenId(activeParent.id);
-  }, [location.pathname]);
+  const {
+    isCollapsed,
+    openId,
+    setOpenId,
+    toggleSidebar,
+    handleItemClick,
+    location,
+  } = useSidebar();
 
   return (
     <div
@@ -65,10 +61,7 @@ export default function Sidebar() {
         <button
           type="button"
           aria-label={isCollapsed ? "사이드바 펼치기" : "사이드바 접기"}
-          onClick={() => {
-            setIsCollapsed((prev) => !prev);
-            setOpenId(null);
-          }}
+          onClick={toggleSidebar}
           className="absolute -right-3 top-10 flex h-6 w-6 items-center justify-center rounded-md bg-white border border-[#F6F6F6] transition hover:bg-[#F6F6F6]"
         >
           <CollapseIcon
@@ -116,8 +109,11 @@ export default function Sidebar() {
                       aria-haspopup="true"
                       aria-expanded={isOpen}
                       onClick={() => {
-                        setOpenId(item.id);
-                        if (item.path) navigate(item.path);
+                        handleItemClick(
+                          item.id,
+                          !!item.children?.length,
+                          item.path,
+                        );
                       }}
                       className={[
                         "flex items-center",
diff --git a/src/hooks/sidebar/useSidebar.ts b/src/hooks/sidebar/useSidebar.ts
new file mode 100644
index 0000000..a04e250
--- /dev/null
+++ b/src/hooks/sidebar/useSidebar.ts
@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+
+import { mainNav } from "@/constants/sidebarNav";
+
+export const useSidebar = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [openId, setOpenId] = useState<string | null>(null);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  useEffect(() => {
+    if (isCollapsed) return;
+    const activeParent = mainNav.find((item) =>
+      item.children?.some((c) => c.path === location.pathname),
+    );
+    if (activeParent) setOpenId(activeParent.id);
+  }, [location.pathname, isCollapsed]);
+
+  const toggleSidebar = () => {
+    setIsCollapsed((prev) => !prev);
+    setOpenId(null);
+  };
+
+  const handleItemClick = (id: string, hasChildren: boolean, path?: string) => {
+    if (hasChildren) {
+      setOpenId((prev) => (prev === id ? null : id));
+      if (path) navigate(path);
+    } else if (path) {
+      navigate(path);
+      setOpenId(null);
+    }
+  };
+
+  return {
+    isCollapsed,
+    openId,
+    setOpenId,
+    location,
+    toggleSidebar,
+    handleItemClick,
+  };
+};

From 8a92dc4fbc055333b89d1ee4130f0169f57d8d4d Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Tue, 24 Feb 2026 03:41:55 +0900
Subject: [PATCH 02/13] =?UTF-8?q?refactor:=20SidebarItem,=20SubMenu=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sidebar/Sidebar.tsx     | 209 +++++--------------------
 src/components/Sidebar/SidebarItem.tsx |  80 ++++++++++
 src/components/Sidebar/SubMenu.tsx     |  38 +++++
 3 files changed, 154 insertions(+), 173 deletions(-)
 create mode 100644 src/components/Sidebar/SidebarItem.tsx
 create mode 100644 src/components/Sidebar/SubMenu.tsx

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 9e5a865..f93bd70 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -4,6 +4,9 @@ import { footerNav, mainNav } from "@/constants/sidebarNav";
 
 import { useSidebar } from "@/hooks/sidebar/useSidebar";
 
+import { SidebarItem } from "./SidebarItem";
+import { SubMenu } from "./SubMenu";
+
 import ChevronIcon from "@/assets/icon/common/chevron-up.svg?react";
 import CollapseIcon from "@/assets/icon/sidebar/chevron-left.svg?react";
 import Logo from "@/assets/logo/symbol-color.svg?react";
@@ -44,6 +47,7 @@ export default function Sidebar() {
       ].join(" ")}
     >
       <div className="mx-auto flex w-full max-w-[232px] flex-1 flex-col">
+        {/* Logo */}
         <NavLink
           to="/"
           aria-label="홈으로 이동"
@@ -75,12 +79,9 @@ export default function Sidebar() {
         {/* Main */}
         <nav className="flex flex-1 flex-col gap-1 px-2">
           {mainNav.map((item) => {
-            const Icon = item.icon;
-
             const isOpen = openId === item.id;
             const isChildActive =
               item.children?.some((c) => c.path === location.pathname) ?? false;
-
             const isParentActive =
               (item.path && location.pathname === item.path) || isChildActive;
             const showChevron =
@@ -88,188 +89,50 @@ export default function Sidebar() {
               !!item.children?.length &&
               (isOpen || isParentActive);
 
-            // children 있는 부모 메뉴
-            if (item.children?.length) {
-              return (
-                <div
-                  key={item.id}
-                  className="relative flex flex-col"
-                  onMouseEnter={() => {
-                    if (isCollapsed) setOpenId(item.id);
-                  }}
-                  onMouseLeave={() => {
-                    if (isCollapsed) setOpenId(null);
-                  }}
+            return (
+              <div
+                key={item.id}
+                className="relative flex flex-col"
+                onMouseEnter={() => isCollapsed && setOpenId(item.id)}
+                onMouseLeave={() => isCollapsed && setOpenId(null)}
+              >
+                <SidebarItem
+                  item={item}
+                  isCollapsed={isCollapsed}
+                  isOpen={isOpen}
+                  className={getMainItemClass(isParentActive, isCollapsed)}
+                  onClick={() =>
+                    handleItemClick(item.id, !!item.children?.length, item.path)
+                  }
                 >
-                  <div
-                    className={getMainItemClass(isParentActive, isCollapsed)}
-                  >
+                  {showChevron && (
                     <button
                       type="button"
-                      aria-haspopup="true"
-                      aria-expanded={isOpen}
-                      onClick={() => {
-                        handleItemClick(
-                          item.id,
-                          !!item.children?.length,
-                          item.path,
+                      aria-label={isOpen ? "하위 메뉴 닫기" : "하위 메뉴 열기"}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        setOpenId((prev) =>
+                          prev === item.id ? null : item.id,
                         );
                       }}
-                      className={[
-                        "flex items-center",
-                        isCollapsed ? "justify-center w-full" : "flex-1 gap-4",
-                      ].join(" ")}
+                      className="ml-auto p-2"
                     >
-                      {Icon && (
-                        <Icon
-                          className={[
-                            "h-6 w-6 shrink-0",
-                            isCollapsed ? "" : "ml-2",
-                          ].join(" ")}
-                        />
-                      )}
-                      <span
+                      <ChevronIcon
                         className={[
-                          "whitespace-nowrap transition-all duration-200",
-                          isCollapsed
-                            ? "opacity-0 w-0 overflow-hidden"
-                            : "opacity-100 ml-0",
+                          "h-3 w-3",
+                          isOpen ? "rotate-0" : "rotate-180",
                         ].join(" ")}
-                      >
-                        {item.label}
-                      </span>
+                      />
                     </button>
-
-                    {showChevron && (
-                      <button
-                        type="button"
-                        aria-label={
-                          isOpen ? "하위 메뉴 닫기" : "하위 메뉴 열기"
-                        }
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          setOpenId((prev) =>
-                            prev === item.id ? null : item.id,
-                          );
-                        }}
-                        className="ml-auto p-2"
-                      >
-                        <ChevronIcon
-                          className={[
-                            "h-3 w-3",
-                            isOpen ? "rotate-0" : "rotate-180",
-                          ].join(" ")}
-                        />
-                      </button>
-                    )}
-                  </div>
-
-                  {/* 하위 메뉴 */}
-                  {/* 확장 상태 */}
-                  {!isCollapsed && isOpen && (
-                    <div className="ml-11 mt-1 flex flex-col gap-1">
-                      {item.children.map((child) => (
-                        <NavLink
-                          key={child.id}
-                          to={child.path ?? "#"}
-                          end={child.path === item.path}
-                          className={({ isActive }) =>
-                            [
-                              "pl-4 flex h-10 items-center rounded-xl px-3 text-sm transition-colors",
-                              isActive
-                                ? "bg-chart-3 text-white"
-                                : "text-text-auth-sub hover:bg-[#F6F6F6]",
-                            ].join(" ")
-                          }
-                        >
-                          {child.label}
-                        </NavLink>
-                      ))}
-                    </div>
-                  )}
-                  {/* 축소 상태 */}
-                  {isCollapsed && isOpen && (
-                    <div className="absolute left-full top-0 ml-3 w-52 rounded-2xl bg-white p-2 shadow-lg">
-                      {item.children.map((child) => (
-                        <NavLink
-                          key={child.id}
-                          to={child.path ?? "#"}
-                          end={child.path === item.path}
-                          className={({ isActive }) =>
-                            [
-                              "flex h-10 items-center rounded-xl px-3 text-sm transition-colors",
-                              isActive
-                                ? "bg-chart-3 text-white"
-                                : "text-text-auth-sub hover:bg-[#F6F6F6]",
-                            ].join(" ")
-                          }
-                        >
-                          {child.label}
-                        </NavLink>
-                      ))}
-                    </div>
                   )}
-                </div>
-              );
-            }
+                </SidebarItem>
 
-            // path 있는 단일 메뉴
-            if (item.path) {
-              return (
-                <NavLink
-                  key={item.id}
-                  to={item.path}
-                  className={({ isActive }) =>
-                    getMainItemClass(isActive, isCollapsed)
-                  }
-                >
-                  {Icon && (
-                    <Icon
-                      className={[
-                        "h-6 w-6 shrink-0",
-                        isCollapsed ? "" : "ml-2",
-                      ].join(" ")}
-                    />
-                  )}
-                  <span
-                    className={[
-                      "whitespace-nowrap transition-all duration-200",
-                      isCollapsed
-                        ? "opacity-0 w-0 overflow-hidden"
-                        : "opacity-100 ml-0",
-                    ].join(" ")}
-                  >
-                    {item.label}
-                  </span>
-                </NavLink>
-              );
-            }
-            // path 없는 메뉴
-            return (
-              <button
-                key={item.id}
-                type="button"
-                className={getMainItemClass(false, isCollapsed)}
-              >
-                {Icon && (
-                  <Icon
-                    className={[
-                      "h-6 w-6 shrink-0",
-                      isCollapsed ? "" : "ml-2",
-                    ].join(" ")}
-                  />
+                {/* SubMenu */}
+                {isOpen && item.children && (
+                  <SubMenu items={item.children} isCollapsed={isCollapsed} />
                 )}
-                <span
-                  className={[
-                    "whitespace-nowrap transition-all duration-200",
-                    isCollapsed
-                      ? "opacity-0 w-0 overflow-hidden"
-                      : "opacity-100 ml-0",
-                  ].join(" ")}
-                >
-                  {item.label}
-                </span>
-              </button>
+              </div>
             );
           })}
         </nav>
diff --git a/src/components/Sidebar/SidebarItem.tsx b/src/components/Sidebar/SidebarItem.tsx
new file mode 100644
index 0000000..1943882
--- /dev/null
+++ b/src/components/Sidebar/SidebarItem.tsx
@@ -0,0 +1,80 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+import type { INavItem } from "@/types/navigation/navItem";
+
+interface ISidebarItemProps {
+  item: INavItem;
+  isCollapsed: boolean;
+  isOpen?: boolean;
+  className: string;
+  onClick: () => void;
+  children?: React.ReactNode;
+}
+
+export function SidebarItem({
+  item,
+  isCollapsed,
+  isOpen,
+  className,
+  onClick,
+  children,
+}: ISidebarItemProps) {
+  const Icon = item.icon;
+
+  const content = (
+    <div
+      className={[
+        "flex items-center w-full",
+        isCollapsed ? "justify-center" : "gap-4",
+      ].join(" ")}
+    >
+      {Icon && (
+        <Icon
+          className={["h-6 w-6 shrink-0", isCollapsed ? "" : "ml-2"].join(" ")}
+        />
+      )}
+      <span
+        className={[
+          "whitespace-nowrap transition-all duration-200",
+          isCollapsed ? "opacity-0 w-0 overflow-hidden" : "opacity-100 ml-0",
+        ].join(" ")}
+      >
+        {item.label}
+      </span>
+      {children}
+    </div>
+  );
+
+  // path 있는 단일 메뉴
+  if (item.path) {
+    return (
+      <NavLink
+        to={item.path}
+        className={() => className}
+        onClick={(e) => {
+          if (e.defaultPrevented) return;
+          onClick();
+        }}
+      >
+        <div className="flex w-full items-center">{content}</div>
+      </NavLink>
+    );
+  }
+
+  // path 없는 메뉴
+  return (
+    <button
+      type="button"
+      aria-haspopup="true"
+      aria-expanded={isOpen}
+      className={className}
+      onClick={(e) => {
+        if (e.defaultPrevented) return;
+        onClick();
+      }}
+    >
+      {content}
+    </button>
+  );
+}
diff --git a/src/components/Sidebar/SubMenu.tsx b/src/components/Sidebar/SubMenu.tsx
new file mode 100644
index 0000000..9d6c862
--- /dev/null
+++ b/src/components/Sidebar/SubMenu.tsx
@@ -0,0 +1,38 @@
+import { NavLink } from "react-router-dom";
+
+import type { INavItem } from "@/types/navigation/navItem";
+
+interface ISubMenuProps {
+  items: INavItem[];
+  isCollapsed: boolean;
+}
+
+export function SubMenu({ items, isCollapsed }: ISubMenuProps) {
+  const getSubItemClass = (isActive: boolean) =>
+    [
+      "flex h-10 items-center rounded-xl px-3 text-sm transition-colors",
+      isCollapsed ? "" : "pl-4",
+      isActive
+        ? "bg-chart-3 text-white"
+        : "text-text-auth-sub hover:bg-[#F6F6F6]",
+    ].join(" ");
+
+  const menuContainerClass = isCollapsed
+    ? "absolute left-full top-0 ml-3 w-52 rounded-2xl bg-white p-2 shadow-lg z-50"
+    : "ml-11 mt-1 flex flex-col gap-1";
+
+  return (
+    <div className={menuContainerClass}>
+      {items.map((child) => (
+        <NavLink
+          key={child.id}
+          to={child.path ?? "#"}
+          end
+          className={({ isActive }) => getSubItemClass(isActive)}
+        >
+          {child.label}
+        </NavLink>
+      ))}
+    </div>
+  );
+}

From 06fb413de29648d4b021670eced29576eb2769bd Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Tue, 24 Feb 2026 04:09:22 +0900
Subject: [PATCH 03/13] =?UTF-8?q?refactor:=20Footer=20SidebarItem=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sidebar/Sidebar.tsx | 68 +++++-------------------------
 1 file changed, 11 insertions(+), 57 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index f93bd70..5402d45 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -140,66 +140,20 @@ export default function Sidebar() {
         {/* Footer */}
         <div className={["py-2 mb-3", isCollapsed ? "" : "px-2"].join(" ")}>
           {footerNav.map((item) => {
-            const Icon = item.icon;
-
-            if (item.path) {
-              return (
-                <NavLink
-                  key={item.id}
-                  to={item.path}
-                  onClick={() => setOpenId(null)}
-                  className={({ isActive }) =>
-                    getFooterItemClass(isActive, isCollapsed)
-                  }
-                >
-                  {Icon && (
-                    <Icon
-                      className={[
-                        "h-6 w-6 shrink-0",
-                        isCollapsed ? "" : "ml-2",
-                      ].join(" ")}
-                    />
-                  )}
-                  <span
-                    className={[
-                      "whitespace-nowrap transition-all duration-200",
-                      isCollapsed
-                        ? "opacity-0 w-0 overflow-hidden"
-                        : "opacity-100 ml-0",
-                    ].join(" ")}
-                  >
-                    {item.label}
-                  </span>
-                </NavLink>
-              );
-            }
+            const isActive = item.path
+              ? location.pathname === item.path
+              : false;
 
             return (
-              <button
+              <SidebarItem
                 key={item.id}
-                type="button"
-                onClick={() => setOpenId(null)}
-                className={getFooterItemClass(false, isCollapsed)}
-              >
-                {Icon && (
-                  <Icon
-                    className={[
-                      "h-6 w-6 shrink-0",
-                      isCollapsed ? "" : "ml-2",
-                    ].join(" ")}
-                  />
-                )}
-                <span
-                  className={[
-                    "whitespace-nowrap transition-all duration-200",
-                    isCollapsed
-                      ? "opacity-0 w-0 overflow-hidden"
-                      : "opacity-100 ml-0",
-                  ].join(" ")}
-                >
-                  {item.label}
-                </span>
-              </button>
+                item={item}
+                isCollapsed={isCollapsed}
+                className={getFooterItemClass(isActive, isCollapsed)}
+                onClick={() => {
+                  setOpenId(null);
+                }}
+              />
             );
           })}
         </div>

From 743062f100a082dcc8e350cf108343ef935db65d Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Tue, 24 Feb 2026 04:44:24 +0900
Subject: [PATCH 04/13] =?UTF-8?q?fix:=20=EC=B6=95=EC=86=8C=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=20=ED=95=98=EC=9C=84=20=EB=A9=94=EB=89=B4=20=ED=98=B8?=
 =?UTF-8?q?=EB=B2=84=20=EB=81=8A=EA=B9=80=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sidebar/SubMenu.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Sidebar/SubMenu.tsx b/src/components/Sidebar/SubMenu.tsx
index 9d6c862..e2c134b 100644
--- a/src/components/Sidebar/SubMenu.tsx
+++ b/src/components/Sidebar/SubMenu.tsx
@@ -10,7 +10,7 @@ interface ISubMenuProps {
 export function SubMenu({ items, isCollapsed }: ISubMenuProps) {
   const getSubItemClass = (isActive: boolean) =>
     [
-      "flex h-10 items-center rounded-xl px-3 text-sm transition-colors",
+      "flex h-10 items-center rounded-xl pl-4 px-3 text-sm transition-colors",
       isCollapsed ? "" : "pl-4",
       isActive
         ? "bg-chart-3 text-white"
@@ -18,7 +18,7 @@ export function SubMenu({ items, isCollapsed }: ISubMenuProps) {
     ].join(" ");
 
   const menuContainerClass = isCollapsed
-    ? "absolute left-full top-0 ml-3 w-52 rounded-2xl bg-white p-2 shadow-lg z-50"
+    ? "absolute left-full top-0 pl-2 w-52 flex flex-col gap-1 rounded-2xl bg-white p-2 shadow-lg z-50"
     : "ml-11 mt-1 flex flex-col gap-1";
 
   return (

From 924f924720f788ad9dc7e5cba5b9a8a7285e2bec Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Tue, 24 Feb 2026 22:24:25 +0900
Subject: [PATCH 05/13] =?UTF-8?q?fix:=20=ED=99=95=EC=9E=A5/=EC=B6=95?=
 =?UTF-8?q?=EC=86=8C=20=EC=A0=84=ED=99=98=20=EC=95=A0=EB=8B=88=EB=A9=94?=
 =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sidebar/Sidebar.tsx     | 25 ++++++++++++++++---------
 src/components/Sidebar/SidebarItem.tsx |  9 ++++++---
 src/components/Sidebar/SubMenu.tsx     |  6 +++---
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 5402d45..84e862d 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -13,8 +13,10 @@ import Logo from "@/assets/logo/symbol-color.svg?react";
 
 function getMainItemClass(isActive: boolean, isCollapsed: boolean) {
   return [
-    "flex items-center rounded-xl px-3 text-sm cursor-pointer transition-colors",
-    isCollapsed ? "h-13 w-13 mx-auto justify-center" : "h-[55px] gap-4 px-3",
+    "flex items-center rounded-xl px-3 text-sm cursor-pointer transition-all duration-300",
+    isCollapsed
+      ? "h-[55px] w-[55px] mx-auto flex justify-center"
+      : "h-[55px] gap-4 px-3",
     isActive
       ? "bg-chart-3 text-white"
       : "text-text-auth-sub hover:bg-[#F6F6F6]",
@@ -23,7 +25,7 @@ function getMainItemClass(isActive: boolean, isCollapsed: boolean) {
 
 function getFooterItemClass(isActive: boolean, isCollapsed: boolean) {
   return [
-    "flex w-full h-[55px] items-center rounded-xl px-3 text-sm cursor-pointer transition-colors",
+    "flex w-full h-[55px] items-center rounded-xl px-3 text-sm cursor-pointer transition-all duration-300",
     isCollapsed ? "justify-center px-0" : "gap-4 px-3",
     isActive ? "text-chart-3" : "text-text-auth-sub hover:text-chart-3",
   ].join(" ");
@@ -42,7 +44,7 @@ export default function Sidebar() {
   return (
     <div
       className={[
-        "relative flex h-full flex-col bg-white rounded-3xl drop-shadow-md transition-all duration-300",
+        "relative flex h-full flex-col bg-white rounded-3xl drop-shadow-md transition-all duration-300 ease-in-out",
         isCollapsed ? "w-25" : "w-64",
       ].join(" ")}
     >
@@ -52,14 +54,19 @@ export default function Sidebar() {
           to="/"
           aria-label="홈으로 이동"
           className={[
-            "mt-5 mb-2 flex h-16 items-center",
+            "mt-5 mb-2 flex h-16 items-center transition-all duration-300",
             isCollapsed ? "justify-center" : "gap-3 px-4",
           ].join(" ")}
         >
-          <Logo className="h-12 w-12" />
-          {!isCollapsed && (
-            <span className="text-xl font-semibold">WhereYouAd</span>
-          )}
+          <Logo className="h-12 w-12 shrink-0" />
+          <span
+            className={[
+              "text-xl font-semibold whitespace-nowrap transition-all duration-300 ease-in-out overflow-hidden",
+              isCollapsed ? "w-0 opacity-0 invisible" : "w-auto opacity-100",
+            ].join(" ")}
+          >
+            WhereYouAd
+          </span>
         </NavLink>
 
         <button
diff --git a/src/components/Sidebar/SidebarItem.tsx b/src/components/Sidebar/SidebarItem.tsx
index 1943882..a3f32bb 100644
--- a/src/components/Sidebar/SidebarItem.tsx
+++ b/src/components/Sidebar/SidebarItem.tsx
@@ -31,13 +31,16 @@ export function SidebarItem({
     >
       {Icon && (
         <Icon
-          className={["h-6 w-6 shrink-0", isCollapsed ? "" : "ml-2"].join(" ")}
+          className={[
+            "h-6 w-6 shrink-0 transition-all duration-400",
+            isCollapsed ? "" : "ml-2",
+          ].join(" ")}
         />
       )}
       <span
         className={[
-          "whitespace-nowrap transition-all duration-200",
-          isCollapsed ? "opacity-0 w-0 overflow-hidden" : "opacity-100 ml-0",
+          "whitespace-nowrap transition-all duration-300 ease-in-out",
+          isCollapsed ? "opacity-0 w-0 invisible" : "opacity-100 ml-0",
         ].join(" ")}
       >
         {item.label}
diff --git a/src/components/Sidebar/SubMenu.tsx b/src/components/Sidebar/SubMenu.tsx
index e2c134b..3e94dc6 100644
--- a/src/components/Sidebar/SubMenu.tsx
+++ b/src/components/Sidebar/SubMenu.tsx
@@ -10,7 +10,7 @@ interface ISubMenuProps {
 export function SubMenu({ items, isCollapsed }: ISubMenuProps) {
   const getSubItemClass = (isActive: boolean) =>
     [
-      "flex h-10 items-center rounded-xl pl-4 px-3 text-sm transition-colors",
+      "flex h-10 items-center rounded-xl px-3 text-sm transition-all duration-300 whitespace-nowrap",
       isCollapsed ? "" : "pl-4",
       isActive
         ? "bg-chart-3 text-white"
@@ -18,8 +18,8 @@ export function SubMenu({ items, isCollapsed }: ISubMenuProps) {
     ].join(" ");
 
   const menuContainerClass = isCollapsed
-    ? "absolute left-full top-0 pl-2 w-52 flex flex-col gap-1 rounded-2xl bg-white p-2 shadow-lg z-50"
-    : "ml-11 mt-1 flex flex-col gap-1";
+    ? "absolute left-full top-0 pl-2 w-52 flex flex-col gap-1 rounded-2xl bg-white p-2 shadow-lg z-50 whitespace-nowrap"
+    : "ml-11 mt-1 flex flex-col gap-1 overflow-hidden transition-all duration-300";
 
   return (
     <div className={menuContainerClass}>

From cfd1c9f466cf398300b2db4bd56ba55b21200500 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Tue, 24 Feb 2026 22:29:59 +0900
Subject: [PATCH 06/13] =?UTF-8?q?fix:=20=EA=B2=BD=EB=A1=9C=20=EC=B6=94?=
 =?UTF-8?q?=EC=A0=81=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/sidebar/useSidebar.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/hooks/sidebar/useSidebar.ts b/src/hooks/sidebar/useSidebar.ts
index a04e250..641fbbd 100644
--- a/src/hooks/sidebar/useSidebar.ts
+++ b/src/hooks/sidebar/useSidebar.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 
 import { mainNav } from "@/constants/sidebarNav";
@@ -9,12 +9,18 @@ export const useSidebar = () => {
   const [openId, setOpenId] = useState<string | null>(null);
   const [isCollapsed, setIsCollapsed] = useState(false);
 
+  const lastPathRef = useRef("");
+
   useEffect(() => {
     if (isCollapsed) return;
     const activeParent = mainNav.find((item) =>
       item.children?.some((c) => c.path === location.pathname),
     );
-    if (activeParent) setOpenId(activeParent.id);
+
+    if (activeParent && location.pathname !== lastPathRef.current) {
+      setOpenId(activeParent.id);
+      lastPathRef.current = location.pathname;
+    }
   }, [location.pathname, isCollapsed]);
 
   const toggleSidebar = () => {

From 9b189a62627b9726e5d7c2f7aea77429debbbd0c Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Tue, 24 Feb 2026 22:41:27 +0900
Subject: [PATCH 07/13] =?UTF-8?q?style:=20=EB=A1=9C=EA=B3=A0=20=ED=85=8D?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20UI=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sidebar/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 84e862d..7813781 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -61,7 +61,7 @@ export default function Sidebar() {
           <Logo className="h-12 w-12 shrink-0" />
           <span
             className={[
-              "text-xl font-semibold whitespace-nowrap transition-all duration-300 ease-in-out overflow-hidden",
+              "text-[22px] font-semibold whitespace-nowrap bg-gradient-to-r from-logo-1 to-logo-2 bg-clip-text text-transparent transition-opacity duration-300 transition-all ease-in-out overflow-hidden",
               isCollapsed ? "w-0 opacity-0 invisible" : "w-auto opacity-100",
             ].join(" ")}
           >

From 3ca2f090ab94f48a649f6c46ef4e4cb0e4e5db3c Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Wed, 25 Feb 2026 02:57:03 +0900
Subject: [PATCH 08/13] =?UTF-8?q?fix:=20=EC=BD=94=EB=93=9C=EB=9E=98?=
 =?UTF-8?q?=EB=B9=97=20=EB=A6=AC=EB=B7=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sidebar/SidebarItem.tsx | 5 +++--
 src/hooks/sidebar/useSidebar.ts        | 6 +++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/Sidebar/SidebarItem.tsx b/src/components/Sidebar/SidebarItem.tsx
index a3f32bb..16e15e0 100644
--- a/src/components/Sidebar/SidebarItem.tsx
+++ b/src/components/Sidebar/SidebarItem.tsx
@@ -20,6 +20,7 @@ export function SidebarItem({
   onClick,
   children,
 }: ISidebarItemProps) {
+  const hasChildren = !!item.children?.length;
   const Icon = item.icon;
 
   const content = (
@@ -69,8 +70,8 @@ export function SidebarItem({
   return (
     <button
       type="button"
-      aria-haspopup="true"
-      aria-expanded={isOpen}
+      aria-haspopup={hasChildren ? "menu" : undefined}
+      aria-expanded={hasChildren ? isOpen : undefined}
       className={className}
       onClick={(e) => {
         if (e.defaultPrevented) return;
diff --git a/src/hooks/sidebar/useSidebar.ts b/src/hooks/sidebar/useSidebar.ts
index 641fbbd..44b09d5 100644
--- a/src/hooks/sidebar/useSidebar.ts
+++ b/src/hooks/sidebar/useSidebar.ts
@@ -24,7 +24,11 @@ export const useSidebar = () => {
   }, [location.pathname, isCollapsed]);
 
   const toggleSidebar = () => {
-    setIsCollapsed((prev) => !prev);
+    setIsCollapsed((prev) => {
+      const next = !prev;
+      if (next) lastPathRef.current = "";
+      return next;
+    });
     setOpenId(null);
   };
 

From 49cdb1b99ab4c8f968a0911067436c05319be000 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Wed, 25 Feb 2026 03:57:25 +0900
Subject: [PATCH 09/13] =?UTF-8?q?fix:=20=EC=A4=91=EB=B3=B5=20navigate=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sidebar/Sidebar.tsx     | 6 ++----
 src/components/Sidebar/SidebarItem.tsx | 6 +++---
 src/hooks/sidebar/useSidebar.ts        | 9 +++------
 3 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 7813781..8c99a70 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -109,7 +109,7 @@ export default function Sidebar() {
                   isOpen={isOpen}
                   className={getMainItemClass(isParentActive, isCollapsed)}
                   onClick={() =>
-                    handleItemClick(item.id, !!item.children?.length, item.path)
+                    handleItemClick(item.id, !!item.children?.length)
                   }
                 >
                   {showChevron && (
@@ -157,9 +157,7 @@ export default function Sidebar() {
                 item={item}
                 isCollapsed={isCollapsed}
                 className={getFooterItemClass(isActive, isCollapsed)}
-                onClick={() => {
-                  setOpenId(null);
-                }}
+                onClick={handleItemClick}
               />
             );
           })}
diff --git a/src/components/Sidebar/SidebarItem.tsx b/src/components/Sidebar/SidebarItem.tsx
index 16e15e0..308a518 100644
--- a/src/components/Sidebar/SidebarItem.tsx
+++ b/src/components/Sidebar/SidebarItem.tsx
@@ -8,7 +8,7 @@ interface ISidebarItemProps {
   isCollapsed: boolean;
   isOpen?: boolean;
   className: string;
-  onClick: () => void;
+  onClick: (id: string, hasChildren: boolean) => void;
   children?: React.ReactNode;
 }
 
@@ -58,7 +58,7 @@ export function SidebarItem({
         className={() => className}
         onClick={(e) => {
           if (e.defaultPrevented) return;
-          onClick();
+          onClick(item.id, hasChildren);
         }}
       >
         <div className="flex w-full items-center">{content}</div>
@@ -75,7 +75,7 @@ export function SidebarItem({
       className={className}
       onClick={(e) => {
         if (e.defaultPrevented) return;
-        onClick();
+        onClick(item.id, hasChildren);
       }}
     >
       {content}
diff --git a/src/hooks/sidebar/useSidebar.ts b/src/hooks/sidebar/useSidebar.ts
index 44b09d5..a6b0f35 100644
--- a/src/hooks/sidebar/useSidebar.ts
+++ b/src/hooks/sidebar/useSidebar.ts
@@ -1,11 +1,10 @@
 import { useEffect, useRef, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 
 import { mainNav } from "@/constants/sidebarNav";
 
 export const useSidebar = () => {
   const location = useLocation();
-  const navigate = useNavigate();
   const [openId, setOpenId] = useState<string | null>(null);
   const [isCollapsed, setIsCollapsed] = useState(false);
 
@@ -32,12 +31,10 @@ export const useSidebar = () => {
     setOpenId(null);
   };
 
-  const handleItemClick = (id: string, hasChildren: boolean, path?: string) => {
+  const handleItemClick = (id: string, hasChildren: boolean) => {
     if (hasChildren) {
       setOpenId((prev) => (prev === id ? null : id));
-      if (path) navigate(path);
-    } else if (path) {
-      navigate(path);
+    } else {
       setOpenId(null);
     }
   };

From 0dccd714771b6ac2e8632e88fd305e9927d5e717 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Wed, 25 Feb 2026 04:14:47 +0900
Subject: [PATCH 10/13] =?UTF-8?q?fix:=20=EC=BD=94=EB=93=9C=EB=9E=98?=
 =?UTF-8?q?=EB=B9=97=20=EB=A6=AC=EB=B7=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/sidebar/useSidebar.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/hooks/sidebar/useSidebar.ts b/src/hooks/sidebar/useSidebar.ts
index a6b0f35..0bf6d43 100644
--- a/src/hooks/sidebar/useSidebar.ts
+++ b/src/hooks/sidebar/useSidebar.ts
@@ -33,9 +33,17 @@ export const useSidebar = () => {
 
   const handleItemClick = (id: string, hasChildren: boolean) => {
     if (hasChildren) {
-      setOpenId((prev) => (prev === id ? null : id));
+      if (openId !== id) {
+        setOpenId(id);
+      }
     } else {
-      setOpenId(null);
+      const parentOfClicked = mainNav.find((item) =>
+        item.children?.some((child) => child.id === id),
+      );
+
+      if (!parentOfClicked || parentOfClicked.id !== openId) {
+        setOpenId(null);
+      }
     }
   };
 

From 292001592778b91e22610f2f71f30d73c4fbfb34 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Wed, 25 Feb 2026 04:39:18 +0900
Subject: [PATCH 11/13] =?UTF-8?q?fix:=20=EC=BD=94=EB=93=9C=EB=9E=98?=
 =?UTF-8?q?=EB=B9=97=20=EB=A6=AC=EB=B7=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sidebar/Sidebar.tsx     | 41 +++++++++++++++-----------
 src/components/Sidebar/SidebarItem.tsx | 17 ++++-------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 8c99a70..a3a3c95 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -13,7 +13,7 @@ import Logo from "@/assets/logo/symbol-color.svg?react";
 
 function getMainItemClass(isActive: boolean, isCollapsed: boolean) {
   return [
-    "flex items-center rounded-xl px-3 text-sm cursor-pointer transition-all duration-300",
+    "flex items-center rounded-xl px-3 text-sm cursor-pointer transition-colors duration-200",
     isCollapsed
       ? "h-[55px] w-[55px] mx-auto flex justify-center"
       : "h-[55px] gap-4 px-3",
@@ -103,15 +103,16 @@ export default function Sidebar() {
                 onMouseEnter={() => isCollapsed && setOpenId(item.id)}
                 onMouseLeave={() => isCollapsed && setOpenId(null)}
               >
-                <SidebarItem
-                  item={item}
-                  isCollapsed={isCollapsed}
-                  isOpen={isOpen}
-                  className={getMainItemClass(isParentActive, isCollapsed)}
-                  onClick={() =>
-                    handleItemClick(item.id, !!item.children?.length)
-                  }
-                >
+                <div className={getMainItemClass(isParentActive, isCollapsed)}>
+                  <SidebarItem
+                    item={item}
+                    isCollapsed={isCollapsed}
+                    isOpen={isOpen}
+                    className="flex-1 h-full"
+                    onClick={() =>
+                      handleItemClick(item.id, !!item.children?.length)
+                    }
+                  />
                   {showChevron && (
                     <button
                       type="button"
@@ -123,7 +124,7 @@ export default function Sidebar() {
                           prev === item.id ? null : item.id,
                         );
                       }}
-                      className="ml-auto p-2"
+                      className="ml-auto p-2 hover:bg-black/5 rounded-lg transition-colors"
                     >
                       <ChevronIcon
                         className={[
@@ -133,7 +134,7 @@ export default function Sidebar() {
                       />
                     </button>
                   )}
-                </SidebarItem>
+                </div>
 
                 {/* SubMenu */}
                 {isOpen && item.children && (
@@ -152,13 +153,19 @@ export default function Sidebar() {
               : false;
 
             return (
-              <SidebarItem
+              <div
                 key={item.id}
-                item={item}
-                isCollapsed={isCollapsed}
                 className={getFooterItemClass(isActive, isCollapsed)}
-                onClick={handleItemClick}
-              />
+              >
+                <SidebarItem
+                  item={item}
+                  isCollapsed={isCollapsed}
+                  className="w-full h-full"
+                  onClick={() =>
+                    handleItemClick(item.id, !!item.children?.length)
+                  }
+                />
+              </div>
             );
           })}
         </div>
diff --git a/src/components/Sidebar/SidebarItem.tsx b/src/components/Sidebar/SidebarItem.tsx
index 308a518..a597d96 100644
--- a/src/components/Sidebar/SidebarItem.tsx
+++ b/src/components/Sidebar/SidebarItem.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { NavLink } from "react-router-dom";
 
 import type { INavItem } from "@/types/navigation/navItem";
@@ -9,7 +8,6 @@ interface ISidebarItemProps {
   isOpen?: boolean;
   className: string;
   onClick: (id: string, hasChildren: boolean) => void;
-  children?: React.ReactNode;
 }
 
 export function SidebarItem({
@@ -18,7 +16,6 @@ export function SidebarItem({
   isOpen,
   className,
   onClick,
-  children,
 }: ISidebarItemProps) {
   const hasChildren = !!item.children?.length;
   const Icon = item.icon;
@@ -32,21 +29,17 @@ export function SidebarItem({
     >
       {Icon && (
         <Icon
-          className={[
-            "h-6 w-6 shrink-0 transition-all duration-400",
-            isCollapsed ? "" : "ml-2",
-          ].join(" ")}
+          className={["h-6 w-6 shrink-0", isCollapsed ? "" : "ml-2"].join(" ")}
         />
       )}
       <span
         className={[
-          "whitespace-nowrap transition-all duration-300 ease-in-out",
+          "whitespace-nowrap transition-opacity duration-200",
           isCollapsed ? "opacity-0 w-0 invisible" : "opacity-100 ml-0",
         ].join(" ")}
       >
         {item.label}
       </span>
-      {children}
     </div>
   );
 
@@ -55,13 +48,13 @@ export function SidebarItem({
     return (
       <NavLink
         to={item.path}
-        className={() => className}
+        className={[className, "flex items-center"].join(" ")}
         onClick={(e) => {
           if (e.defaultPrevented) return;
           onClick(item.id, hasChildren);
         }}
       >
-        <div className="flex w-full items-center">{content}</div>
+        {content}
       </NavLink>
     );
   }
@@ -72,7 +65,7 @@ export function SidebarItem({
       type="button"
       aria-haspopup={hasChildren ? "menu" : undefined}
       aria-expanded={hasChildren ? isOpen : undefined}
-      className={className}
+      className={[className, "flex items-center text-left"].join(" ")}
       onClick={(e) => {
         if (e.defaultPrevented) return;
         onClick(item.id, hasChildren);

From 24953af9d5f55a0e8833ac41fc1d08fbd6f97d8f Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Thu, 26 Feb 2026 14:10:35 +0900
Subject: [PATCH 12/13] =?UTF-8?q?fix:=20twMerge=EB=A1=9C=20=ED=86=B5?=
 =?UTF-8?q?=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sidebar/Sidebar.tsx     | 41 +++++++++++++-------------
 src/components/Sidebar/SidebarItem.tsx | 15 +++++-----
 src/components/Sidebar/SubMenu.tsx     |  9 +++---
 3 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index a3a3c95..469d464 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -1,4 +1,5 @@
 import { NavLink } from "react-router-dom";
+import { twMerge } from "tailwind-merge";
 
 import { footerNav, mainNav } from "@/constants/sidebarNav";
 
@@ -12,7 +13,7 @@ import CollapseIcon from "@/assets/icon/sidebar/chevron-left.svg?react";
 import Logo from "@/assets/logo/symbol-color.svg?react";
 
 function getMainItemClass(isActive: boolean, isCollapsed: boolean) {
-  return [
+  return twMerge(
     "flex items-center rounded-xl px-3 text-sm cursor-pointer transition-colors duration-200",
     isCollapsed
       ? "h-[55px] w-[55px] mx-auto flex justify-center"
@@ -20,15 +21,15 @@ function getMainItemClass(isActive: boolean, isCollapsed: boolean) {
     isActive
       ? "bg-chart-3 text-white"
       : "text-text-auth-sub hover:bg-[#F6F6F6]",
-  ].join(" ");
+  );
 }
 
 function getFooterItemClass(isActive: boolean, isCollapsed: boolean) {
-  return [
-    "flex w-full h-[55px] items-center rounded-xl px-3 text-sm cursor-pointer transition-all duration-300",
+  return twMerge(
+    "flex w-full h-[55px] items-center rounded-xl px-3 text-sm cursor-pointer transition-all duration-200",
     isCollapsed ? "justify-center px-0" : "gap-4 px-3",
     isActive ? "text-chart-3" : "text-text-auth-sub hover:text-chart-3",
-  ].join(" ");
+  );
 }
 
 export default function Sidebar() {
@@ -43,27 +44,27 @@ export default function Sidebar() {
 
   return (
     <div
-      className={[
-        "relative flex h-full flex-col bg-white rounded-3xl drop-shadow-md transition-all duration-300 ease-in-out",
+      className={twMerge(
+        "relative flex h-full flex-col bg-white rounded-3xl drop-shadow-md transition-all duration-200 ease-in-out",
         isCollapsed ? "w-25" : "w-64",
-      ].join(" ")}
+      )}
     >
       <div className="mx-auto flex w-full max-w-[232px] flex-1 flex-col">
         {/* Logo */}
         <NavLink
           to="/"
           aria-label="홈으로 이동"
-          className={[
-            "mt-5 mb-2 flex h-16 items-center transition-all duration-300",
+          className={twMerge(
+            "mt-5 mb-2 flex h-16 items-center transition-all duration-200",
             isCollapsed ? "justify-center" : "gap-3 px-4",
-          ].join(" ")}
+          )}
         >
           <Logo className="h-12 w-12 shrink-0" />
           <span
-            className={[
-              "text-[22px] font-semibold whitespace-nowrap bg-gradient-to-r from-logo-1 to-logo-2 bg-clip-text text-transparent transition-opacity duration-300 transition-all ease-in-out overflow-hidden",
+            className={twMerge(
+              "text-[22px] font-semibold whitespace-nowrap bg-gradient-to-r from-logo-1 to-logo-2 bg-clip-text text-transparent transition-opacity duration-200 transition-all ease-in-out overflow-hidden",
               isCollapsed ? "w-0 opacity-0 invisible" : "w-auto opacity-100",
-            ].join(" ")}
+            )}
           >
             WhereYouAd
           </span>
@@ -76,10 +77,10 @@ export default function Sidebar() {
           className="absolute -right-3 top-10 flex h-6 w-6 items-center justify-center rounded-md bg-white border border-[#F6F6F6] transition hover:bg-[#F6F6F6]"
         >
           <CollapseIcon
-            className={[
-              "h-2 w-2 transition-transform duration-300",
+            className={twMerge(
+              "h-2 w-2 transition-transform duration-200",
               isCollapsed ? "rotate-180" : "",
-            ].join(" ")}
+            )}
           />
         </button>
 
@@ -127,10 +128,10 @@ export default function Sidebar() {
                       className="ml-auto p-2 hover:bg-black/5 rounded-lg transition-colors"
                     >
                       <ChevronIcon
-                        className={[
+                        className={twMerge(
                           "h-3 w-3",
                           isOpen ? "rotate-0" : "rotate-180",
-                        ].join(" ")}
+                        )}
                       />
                     </button>
                   )}
@@ -146,7 +147,7 @@ export default function Sidebar() {
         </nav>
 
         {/* Footer */}
-        <div className={["py-2 mb-3", isCollapsed ? "" : "px-2"].join(" ")}>
+        <div className={twMerge("py-2 mb-3", isCollapsed ? "" : "px-2")}>
           {footerNav.map((item) => {
             const isActive = item.path
               ? location.pathname === item.path
diff --git a/src/components/Sidebar/SidebarItem.tsx b/src/components/Sidebar/SidebarItem.tsx
index a597d96..342c2c2 100644
--- a/src/components/Sidebar/SidebarItem.tsx
+++ b/src/components/Sidebar/SidebarItem.tsx
@@ -1,4 +1,5 @@
 import { NavLink } from "react-router-dom";
+import { twMerge } from "tailwind-merge";
 
 import type { INavItem } from "@/types/navigation/navItem";
 
@@ -22,21 +23,21 @@ export function SidebarItem({
 
   const content = (
     <div
-      className={[
+      className={twMerge(
         "flex items-center w-full",
         isCollapsed ? "justify-center" : "gap-4",
-      ].join(" ")}
+      )}
     >
       {Icon && (
         <Icon
-          className={["h-6 w-6 shrink-0", isCollapsed ? "" : "ml-2"].join(" ")}
+          className={twMerge("h-6 w-6 shrink-0", isCollapsed ? "" : "ml-2")}
         />
       )}
       <span
-        className={[
+        className={twMerge(
           "whitespace-nowrap transition-opacity duration-200",
           isCollapsed ? "opacity-0 w-0 invisible" : "opacity-100 ml-0",
-        ].join(" ")}
+        )}
       >
         {item.label}
       </span>
@@ -48,7 +49,7 @@ export function SidebarItem({
     return (
       <NavLink
         to={item.path}
-        className={[className, "flex items-center"].join(" ")}
+        className={twMerge(className, "flex items-center")}
         onClick={(e) => {
           if (e.defaultPrevented) return;
           onClick(item.id, hasChildren);
@@ -65,7 +66,7 @@ export function SidebarItem({
       type="button"
       aria-haspopup={hasChildren ? "menu" : undefined}
       aria-expanded={hasChildren ? isOpen : undefined}
-      className={[className, "flex items-center text-left"].join(" ")}
+      className={twMerge(className, "flex items-center text-left")}
       onClick={(e) => {
         if (e.defaultPrevented) return;
         onClick(item.id, hasChildren);
diff --git a/src/components/Sidebar/SubMenu.tsx b/src/components/Sidebar/SubMenu.tsx
index 3e94dc6..1af1c17 100644
--- a/src/components/Sidebar/SubMenu.tsx
+++ b/src/components/Sidebar/SubMenu.tsx
@@ -1,4 +1,5 @@
 import { NavLink } from "react-router-dom";
+import { twMerge } from "tailwind-merge";
 
 import type { INavItem } from "@/types/navigation/navItem";
 
@@ -9,17 +10,17 @@ interface ISubMenuProps {
 
 export function SubMenu({ items, isCollapsed }: ISubMenuProps) {
   const getSubItemClass = (isActive: boolean) =>
-    [
-      "flex h-10 items-center rounded-xl px-3 text-sm transition-all duration-300 whitespace-nowrap",
+    twMerge(
+      "flex h-10 items-center rounded-xl px-3 text-sm transition-all duration-200 whitespace-nowrap",
       isCollapsed ? "" : "pl-4",
       isActive
         ? "bg-chart-3 text-white"
         : "text-text-auth-sub hover:bg-[#F6F6F6]",
-    ].join(" ");
+    );
 
   const menuContainerClass = isCollapsed
     ? "absolute left-full top-0 pl-2 w-52 flex flex-col gap-1 rounded-2xl bg-white p-2 shadow-lg z-50 whitespace-nowrap"
-    : "ml-11 mt-1 flex flex-col gap-1 overflow-hidden transition-all duration-300";
+    : "ml-11 mt-1 flex flex-col gap-1 overflow-hidden transition-all duration-200";
 
   return (
     <div className={menuContainerClass}>

From d8341323c25c2ff34e804dfaaa151c8e68670860 Mon Sep 17 00:00:00 2001
From: YermIm <iyr7773@naver.com>
Date: Thu, 26 Feb 2026 22:03:11 +0900
Subject: [PATCH 13/13] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B3=A0=20=EC=98=81?=
 =?UTF-8?q?=EC=97=AD=20=EC=A3=BC=EC=84=9D=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sidebar/Sidebar.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 469d464..627a196 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { NavLink } from "react-router-dom";
+// import { NavLink } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
 
 import { footerNav, mainNav } from "@/constants/sidebarNav";
@@ -10,7 +10,7 @@ import { SubMenu } from "./SubMenu";
 
 import ChevronIcon from "@/assets/icon/common/chevron-up.svg?react";
 import CollapseIcon from "@/assets/icon/sidebar/chevron-left.svg?react";
-import Logo from "@/assets/logo/symbol-color.svg?react";
+// import Logo from "@/assets/logo/symbol-color.svg?react";
 
 function getMainItemClass(isActive: boolean, isCollapsed: boolean) {
   return twMerge(
@@ -49,9 +49,9 @@ export default function Sidebar() {
         isCollapsed ? "w-25" : "w-64",
       )}
     >
-      <div className="mx-auto flex w-full max-w-[232px] flex-1 flex-col">
+      <div className="mx-auto mt-10 flex w-full max-w-[232px] flex-1 flex-col">
         {/* Logo */}
-        <NavLink
+        {/* <NavLink
           to="/"
           aria-label="홈으로 이동"
           className={twMerge(
@@ -68,13 +68,13 @@ export default function Sidebar() {
           >
             WhereYouAd
           </span>
-        </NavLink>
+        </NavLink> */}
 
         <button
           type="button"
           aria-label={isCollapsed ? "사이드바 펼치기" : "사이드바 접기"}
           onClick={toggleSidebar}
-          className="absolute -right-3 top-10 flex h-6 w-6 items-center justify-center rounded-md bg-white border border-[#F6F6F6] transition hover:bg-[#F6F6F6]"
+          className="absolute -right-3 top-3 flex h-6 w-6 items-center justify-center rounded-md bg-white border border-[#F6F6F6] transition hover:bg-[#F6F6F6]"
         >
           <CollapseIcon
             className={twMerge(