issue #52

- 사이드바 Sheet 스타일로 변경
- 로그아웃 버튼 구현

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,

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>
     </>

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>
   );
 }

src/ui/component/SideBar.tsx

@@ -8,7 +8,7 @@ import {
 
 export default function SideBar() {
   return (
-    <Sidebar>
+    <Sidebar forceSheet={true}>
       
     </Sidebar>
   );