import { useState, useCallback, useRef } from "react"; /** * 설정 패널 접기/펼치기 상태를 sessionStorage로 기억하는 훅 * * - 초기 상태: 모든 섹션 접힘 * - 사용자가 펼친 섹션은 같은 탭 세션 내에서 기억 * - 탭 닫으면 초기화 * * @param storageKey sessionStorage 키 (예: "pop-card-list") */ export function useCollapsibleSections(storageKey: string) { const fullKey = `pop-config-sections-${storageKey}`; const [openSections, setOpenSections] = useState>(() => { if (typeof window === "undefined") return new Set(); try { const saved = sessionStorage.getItem(fullKey); if (saved) return new Set(JSON.parse(saved)); } catch {} return new Set(); }); const openSectionsRef = useRef(openSections); openSectionsRef.current = openSections; const persist = useCallback( (next: Set) => { try { sessionStorage.setItem(fullKey, JSON.stringify([...next])); } catch {} }, [fullKey], ); const isOpen = useCallback( (key: string) => openSectionsRef.current.has(key), [], ); const toggle = useCallback( (key: string) => { setOpenSections((prev) => { const next = new Set(prev); if (next.has(key)) { next.delete(key); } else { next.add(key); } persist(next); return next; }); }, [persist], ); return { isOpen, toggle }; }