eomsangdonandClaude Sonnet 5.5
d69686a0a8
- 공용 좌측 패널(createWorkflowOverlays · ui-sidebar-list) · 항목 = 권한별 기존 컨테이너 그대로(내 정보 = 기본정보 + 보안) - 고른 항목 해시 ?tab= 에 남김(hashchange 없이) · 저장 뒤 다시 그려도 유지 · 좁은 화면은 고르면 접음 - 시험 test_b01_side_panel 신규 · test_b01_settings_cards 고침 Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MgChuAcyBqUkhHMTXomQC7
48 lines
1.9 KiB
TypeScript
48 lines
1.9 KiB
TypeScript
import { ROUTES } from "@config/config_frontend";
|
|
import { currentQuery } from "../A00_Common/router";
|
|
|
|
/** 좌측 패널 항목 하나 — 누르면 우측 상세에 `build()` 결과만 보임 */
|
|
export interface PanelItem {
|
|
key: string;
|
|
label: string;
|
|
build: () => HTMLElement[];
|
|
}
|
|
|
|
/** 해시 `?tab=` 에 남은 항목 — 없거나 이 권한에 없는 항목이면 첫 항목 */
|
|
export function pickActiveKey(items: readonly PanelItem[]): string {
|
|
const saved = currentQuery().get("tab");
|
|
return items.find((item) => item.key === saved)?.key ?? items[0].key;
|
|
}
|
|
|
|
/** 고른 항목을 해시에 남김 — hashchange 를 일으키지 않음(다시 그리면 같은 항목으로 돌아옴) */
|
|
export function rememberActiveKey(key: string): void {
|
|
history.replaceState(null, "", `#/${ROUTES.B01_ACCOUNT}?tab=${encodeURIComponent(key)}`);
|
|
}
|
|
|
|
/** B 그룹 공용 좌측 패널 목록 모양(`ui-sidebar-*`) — 줄 하나 = 항목 하나 */
|
|
export function buildSidePanel(
|
|
items: readonly PanelItem[],
|
|
activeKey: string,
|
|
onPick: (key: string) => void,
|
|
): { root: HTMLElement; setActive: (key: string) => void } {
|
|
const list = document.createElement("div");
|
|
list.className = "ui-sidebar-list b01-dashboard__panel-list";
|
|
const rows = new Map<string, HTMLButtonElement>();
|
|
for (const item of items) {
|
|
const row = document.createElement("button");
|
|
row.type = "button";
|
|
row.className = "ui-sidebar-row b01-dashboard__panel-row";
|
|
row.textContent = item.label;
|
|
row.addEventListener("click", () => onPick(item.key));
|
|
rows.set(item.key, row);
|
|
list.append(row);
|
|
}
|
|
const setActive = (key: string): void =>
|
|
rows.forEach((row, rowKey) => row.classList.toggle("is-active", rowKey === key));
|
|
setActive(activeKey);
|
|
const root = document.createElement("div");
|
|
root.className = "ui-sidebar-panel b01-dashboard__panel";
|
|
root.append(list);
|
|
return { root, setActive };
|
|
}
|