12a8290873
설정 패널을 열 때 섹션이 일부는 펼쳐져 있고 일부는 접혀 있어 일관성이 없던 UX를 개선하고, 사용자가 펼친 섹션을 탭 세션 내에서 기억한다. - useCollapsibleSections 커스텀 훅 생성 (sessionStorage 기반, 초기 모두 접힘) - PopCardListConfig: CollapsibleSection에 sectionKey/sections prop 패턴 적용 - PopFieldConfig: SaveTabContent 5개 고정 섹션 훅 적용, SectionEditor 초기값 접힘으로 변경 - PopDashboardConfig: PageEditor 초기값 접힘으로 변경
59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
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<Set<string>>(() => {
|
|
if (typeof window === "undefined") return new Set<string>();
|
|
try {
|
|
const saved = sessionStorage.getItem(fullKey);
|
|
if (saved) return new Set<string>(JSON.parse(saved));
|
|
} catch {}
|
|
return new Set<string>();
|
|
});
|
|
|
|
const openSectionsRef = useRef(openSections);
|
|
openSectionsRef.current = openSections;
|
|
|
|
const persist = useCallback(
|
|
(next: Set<string>) => {
|
|
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 };
|
|
}
|