사이드바 토글 상태 로컬 저장

[sgoldenbird]

사이드바의 열림/닫힘 상태를 Zustand의 persist 미들웨어를 통해 로컬 스토리지에 저장하고, 새 창에서도 동일한 UI 상태가 유지되도록 구현했습니다. 이를 통해 사용자가 조작한 UI 환경을 기억하고, 일관된 경험을 제공합니다.

---

목적

• 사이드바 열림/닫힘 상태를 브라우저에 저장
• 새로고침 또는 새 창에서도 이전 상태를 그대로 유지
• 사용자 설정을 기억하여 UX를 개선

사용 기술

• Zustand – 글로벌 상태 관리
• persist middleware – 상태를 로컬 스토리지에 저장
• LocalStorage – 브라우저에 상태 보존

구현 구조

1. Zustand 설정 (src/stores/index.ts)

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

import createAuthSlice from './slices/authSlice';
import createSidebarSlice from './slices/sidebarSlice';
import createToastSlice from './slices/toastSlice';
import type { BoundState } from './types';

export const useKabanaStore = create<BoundState>()(
  persist(
    (...args) => ({
      ...createAuthSlice(...args),
      ...createSidebarSlice(...args),
    }),
    {
      name: 'kabana-storage',
      partialize: (state) => ({
        accessToken: state.accessToken,
        user: state.user,
        isLoggedIn: state.isLoggedIn,
        isSidebarOpen: state.isSidebarOpen, 
      }),
    },
  ),
);

2. 사이드바 슬라이스 (src/stores/slices/sidebarSlice.ts)

import type { StateCreator } from 'zustand';
import type { SidebarSlice } from '@/stores/types';

const createSidebarSlice: StateCreator<SidebarSlice, [], [], SidebarSlice> = (set) => ({
  isSidebarOpen: true,
  toggleSidebar: () => set((state) => ({ isSidebarOpen: !state.isSidebarOpen })),
});

export default createSidebarSlice;

성과

새 창을 열거나 새로고침해도 이전의 사이드바 상태를 유지함으로써 얻은 성과

UX 개선	설명
사용자 제어 강화	사용자의 UI 조작이 브라우저 세션 간에도 반영됨
지속적인 일관성 제공	여러 페이지에서 동일한 사이드바 상태를 공유함
UX 불쾌감 최소화	반복적인 UI 설정 조작 없이 작업 흐름 유지 가능