eomsangdonandClaude Sonnet 5.5
70786cef9e
- 개요 = 숫자 카드 넷 + CPU · 메모리 · 디스크 게이지(70 % 주황 · 90 % 빨강) + 7 일 SVG 그래프 - 회사 = 목록(찾기 · ⋯) → 상세(정보 · 사람 · 프로젝트 탭) · 사용자 = 회사 · 역할 · 찾기 거르기 · ⋯ - 설계 기본값 = 설정 카드를 묶음 제목 + 줄로 · 시스템 로그 = 동작 · 기간 · 찾기 거르기 + 이전 기록 더 보기 - 내 정보 = Linear 꼴 설정 줄(기본정보 · 비밀번호 · 테마 · 내 설계 기본값) - 옛 구역(리소스 패널 · 옛 내 정보 폼) 지움 · 지킴 시험 test_549 추가 · test_546 stub 맞춤 Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
73 lines
2.8 KiB
TypeScript
73 lines
2.8 KiB
TypeScript
/* =============================================================================
|
|
* B01_Dashboard_UI_View_Me.ts
|
|
* 내 정보(549-2) — Linear 설정 꼴: 묶음 제목 + 둥근 상자 안 「제목 · 설명 · 오른쪽 조작」 줄.
|
|
* 기본정보 · 보안(비밀번호) · 화면(밝음 · 어두움) · 내 설계 기본값(구조물 조합 개인 층).
|
|
* ========================================================================== */
|
|
|
|
import { THEME_STORAGE_KEY } from "@config/config_frontend";
|
|
import { createButton } from "@ui/ui_template_elements";
|
|
import { settingLinks } from "../A00_Common/m_settings_nav";
|
|
import { navigateTo } from "../A00_Common/router";
|
|
import { pageFrame, settingCard, settingRow } from "./B01_Dashboard_UI_PageKit";
|
|
import { buildPasswordCard, buildProfileCard } from "./B01_Dashboard_UI_Profile";
|
|
import { el, group } from "./B01_Dashboard_UI_View_Parts";
|
|
import type { ViewCtx } from "./B01_Dashboard_UI_Views";
|
|
|
|
type Theme = "light" | "dark";
|
|
|
|
const currentTheme = (): Theme =>
|
|
document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
|
|
|
|
function setTheme(theme: Theme): void {
|
|
document.documentElement.setAttribute("data-theme", theme);
|
|
localStorage.setItem(THEME_STORAGE_KEY, theme);
|
|
}
|
|
|
|
/** 밝음 · 어두움 두 칸 — 고르면 바로 바뀌고 이 브라우저에 기억 */
|
|
function themeSwitch(): HTMLElement {
|
|
const seg = el("div", "b01-sys-seg");
|
|
const options: [Theme, string][] = [
|
|
["light", "밝음"],
|
|
["dark", "어두움"],
|
|
];
|
|
const sync = (): void => {
|
|
for (const b of seg.querySelectorAll("button"))
|
|
b.setAttribute("aria-pressed", String(b.dataset.theme === currentTheme()));
|
|
};
|
|
for (const [theme, label] of options) {
|
|
const b = el("button", "", label);
|
|
b.type = "button";
|
|
b.dataset.theme = theme;
|
|
b.addEventListener("click", () => {
|
|
setTheme(theme);
|
|
sync();
|
|
});
|
|
seg.append(b);
|
|
}
|
|
sync();
|
|
return seg;
|
|
}
|
|
|
|
export function mountMe(host: HTMLElement, ctx: ViewCtx): void {
|
|
const page = pageFrame(host, "내 정보", "내 계정과 화면 설정을 관리합니다.");
|
|
const defaults = settingLinks(ctx.me, ctx.companyId)
|
|
.filter((link) => link.key === "구조물조합")
|
|
.map((link) =>
|
|
settingRow(
|
|
`${link.title} (내 것)`,
|
|
link.desc,
|
|
createButton({
|
|
label: "열기",
|
|
variant: "ghost",
|
|
onClick: () => navigateTo(link.route, link.query),
|
|
}),
|
|
),
|
|
);
|
|
page.body.append(
|
|
group("기본정보", buildProfileCard(ctx.me)),
|
|
group("보안", buildPasswordCard()),
|
|
group("화면", settingCard([settingRow("테마", "밝은 화면 · 어두운 화면", themeSwitch())])),
|
|
...(defaults.length ? [group("내 설계 기본값", settingCard(defaults))] : []),
|
|
);
|
|
}
|