Merge pull request 'refactor: integrate side navigation state management into Header component for improved navigation control' (#21) from feature/pub-yoo into dev

Reviewed-on: #21

src/components/ui/common/Header.tsx

@@ -10,6 +10,7 @@ import { Swiper, SwiperSlide } from 'swiper/react'
 import type { HeaderProps } from '@/types/Header'
 
 import 'swiper/css'
+import { useSideNavState } from '@/store/sideNavState'
 
 // type HeaderProps = {
 //   name: string //header 이름
@@ -19,7 +20,7 @@ import 'swiper/css'
 export default function Header({ name }: HeaderProps) {
   const router = useRouter()
   const pathname = usePathname()
-  const [headerAct, setHeaderAct] = useState<boolean>(false)
+  const { sideNavIsOpen, setSideNavIsOpen, reset } = useSideNavState()
   const [isShowBackBtn, setIsShowBackBtn] = useState<boolean>(false)
 
   if (pathname === '/login') {
@@ -30,6 +31,8 @@ export default function Header({ name }: HeaderProps) {
     if (pathname !== '/') {
       setIsShowBackBtn(true)
     }
+    //사이드바 초기화
+    reset()
   }, [pathname])
 
   return (
@@ -43,13 +46,13 @@ export default function Header({ name }: HeaderProps) {
               </div>
             )}
             <h2 className="logo">
-              <Link href={'#'}>{name}</Link>
+              <Link href={'/'}>{name}</Link>
             </h2>
             <div className="side-button-wrap">
-              <button className="side-button" onClick={() => setHeaderAct(true)}></button>
+              <button className="side-button" onClick={() => setSideNavIsOpen(true)}></button>
             </div>
           </div>
-          <div className={`side-nav ${headerAct ? 'active' : ''}`}>
+          <div className={`side-nav ${sideNavIsOpen ? 'active' : ''}`}>
             <div className="side-nav-inner">
               <div className="side-nav-header">
                 <div className="side-header-profile">
@@ -62,7 +65,7 @@ export default function Header({ name }: HeaderProps) {
                   </div>
                 </div>
                 <div className="side-close-wrap">
-                  <button className="side-close-btn" onClick={() => setHeaderAct(false)}></button>
+                  <button className="side-close-btn" onClick={() => setSideNavIsOpen(false)}></button>
                 </div>
               </div>
               <div className="side-swiper-wrap">

src/store/sideNavState.ts

@@ -0,0 +1,21 @@
+import { create } from 'zustand'
+
+type SideNavState = {
+  sideNavIsOpen: boolean
+  setSideNavIsOpen: (value: boolean) => void
+  reset: () => void
+}
+
+type InitialState = {
+  sideNavIsOpen: boolean
+}
+
+const initialState: InitialState = {
+  sideNavIsOpen: false,
+}
+
+export const useSideNavState = create<SideNavState>((set) => ({
+  ...initialState,
+  setSideNavIsOpen: (value: boolean) => set((state) => ({ ...state, sideNavIsOpen: value })),
+  reset: () => set(initialState),
+}))