From 069f58075b4bfc14d355897173b5bb57a193f469 Mon Sep 17 00:00:00 2001
From: geonhee-min <garett.min@truabutment.com>
Date: Wed, 3 Dec 2025 17:05:48 +0900
Subject: [PATCH] =?UTF-8?q?issue=20#52=20-=20=EC=82=AC=EC=9D=B4=EB=93=9C?=
 =?UTF-8?q?=EB=B0=94=20Sheet=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20-=20=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83?=
 =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/sidebar.tsx | 16 ++++++------
 src/layouts/Layout.tsx        |  5 ++--
 src/ui/component/Header.tsx   | 48 ++++++++++++++++++++++++++++++++---
 src/ui/component/SideBar.tsx  |  2 +-
 4 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index 30638ac..fb15502 100644
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -89,9 +89,7 @@ function SidebarProvider({
   )
 
   // Helper to toggle the sidebar.
-  const toggleSidebar = React.useCallback(() => {
-    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
-  }, [isMobile, setOpen, setOpenMobile])
+  const toggleSidebar = () => setOpen((open) => !open);
 
   // Adds a keyboard shortcut to toggle the sidebar.
   React.useEffect(() => {
@@ -157,13 +155,15 @@ function Sidebar({
   collapsible = "offcanvas",
   className,
   children,
+  forceSheet = false,
   ...props
 }: React.ComponentProps<"div"> & {
   side?: "left" | "right"
   variant?: "sidebar" | "floating" | "inset"
-  collapsible?: "offcanvas" | "icon" | "none"
+  collapsible?: "offcanvas" | "icon" | "none",
+  forceSheet?: boolean
 }) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+  const { isMobile, state, open, setOpen } = useSidebar()
 
   if (collapsible === "none") {
     return (
@@ -180,14 +180,14 @@ function Sidebar({
     )
   }
 
-  if (isMobile) {
+  if (isMobile || forceSheet) {
     return (
-      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+      <Sheet open={open} onOpenChange={setOpen} {...props}>
         <SheetContent
           data-sidebar="sidebar"
           data-slot="sidebar"
           data-mobile="true"
-          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          className="bg-sidebar text-sidebar-foreground rounded-br-2xl rounded-tr-2xl w-(--sidebar-width) p-0 [&>button]:hidden"
           style={
             {
               "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
diff --git a/src/layouts/Layout.tsx b/src/layouts/Layout.tsx
index 2c12f57..8bff8ae 100644
--- a/src/layouts/Layout.tsx
+++ b/src/layouts/Layout.tsx
@@ -33,8 +33,9 @@ export default function Layout() {
         <SideBar />
         <div className="flex flex-col w-full h-full">
           { authData ? <Header /> : null}
-          {/* <Header /> */}
-          <Outlet />
+          <div className="w-full h-full p-2.5">
+            <Outlet />
+          </div>
         </div>
       </SidebarProvider>
     </>
diff --git a/src/ui/component/Header.tsx b/src/ui/component/Header.tsx
index bcd0230..02b9e30 100644
--- a/src/ui/component/Header.tsx
+++ b/src/ui/component/Header.tsx
@@ -2,13 +2,53 @@ import { Label } from '@/components/ui/label';
 import { SidebarTrigger } from '@/components/ui/sidebar';
 import { Separator } from '@/components/ui/separator';
 import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { useAuthStore } from '@/store/authStore';
+import { LogOutIcon } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { PageRouting } from '@/const/PageRouting';
 
 export default function Header() {
+  const navigate = useNavigate();
+  const { logout } = useAuthStore();
+
+  const handleClickLogoutButton = () => {
+    logout();
+    navigate(PageRouting["LOGIN"].path);
+  }
+
   return (
-    <header className="flex shrink-0 items-center gap-2 border-b px-4 w-full h-12">
-      <SidebarTrigger className="-ml-1" />
-      <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
-      <Label>{import.meta.env.BASE_URL}</Label>
+    <header className="w-full flex shrink-0 flex-row justify-between items-center border-b px-4 h-12">
+      <div className="flex flex-row gap-2 items-center">
+        <SidebarTrigger className="-ml-1" />
+        <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
+        <Label>{import.meta.env.BASE_URL}</Label>
+      </div>
+<div>
+  <Button
+    className={`
+      group flex items-center justify-start 
+      pr-2 pl-2 border border-red-500 bg-white
+      transition-all duration-150
+      w-10 hover:w-25 hover:bg-red-500
+      overflow-hidden rounded-md
+    `}
+    type="button"
+    onClick={handleClickLogoutButton}
+  >
+    <LogOutIcon
+      className="text-red-500 transition-colors duration-150 group-hover:text-white"
+    />
+    <span className="
+    text-red-500 group-hover:text-white
+      opacity-0 scale-1
+      transition-all duration-150
+      group-hover:opacity-100 group-hover:scale-100
+      ">
+      로그아웃
+    </span>
+  </Button>
+</div>
     </header>
   );
 }
\ No newline at end of file
diff --git a/src/ui/component/SideBar.tsx b/src/ui/component/SideBar.tsx
index 4aace1d..2e91130 100644
--- a/src/ui/component/SideBar.tsx
+++ b/src/ui/component/SideBar.tsx
@@ -8,7 +8,7 @@ import {
 
 export default function SideBar() {
   return (
-    <Sidebar>
+    <Sidebar forceSheet={true}>
       
     </Sidebar>
   );