feat(z01·b01): 마스터 데이터 화면 — 대시보드 「시스템 설정」 칸의 [마스터 데이터] 단추 · 좌 트리(갈래→파일→표) / 우 표 줄(쪽 나누기 · 검색) · 한글 이름은 API label 그대로(화면 사전 없음) · 단위 붙은 열 제목 · hidden 열 기본 숨김 · 시스템 관리자만 · 읽기 전용(브레인 Z01)

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016VBGFXB9AbJBwXP19z75Qq
2026-09-15 18:56:10 +09:00
parent 1395ae6d34
commit 7150fd8289
12 changed files with 679 additions and 3 deletions
@@ -0,0 +1,167 @@
+/* Z01 마스터 데이터 — 좌 트리 / 우 표 */
+.z01-master [hidden] {
+  display: none !important;
+}
+
+.z01-master__content {
+  display: grid;
+  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
+  gap: var(--spacing-24);
+  align-items: start;
+}
+
+.z01-master__tree {
+  position: sticky;
+  top: var(--spacing-16);
+  max-height: calc(100vh - 160px);
+  overflow-y: auto;
+  padding: var(--spacing-8);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-cards);
+  background: var(--color-surface);
+  font-size: var(--text-body-sm);
+}
+
+.z01-master__tree summary {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-8);
+  padding: var(--spacing-4) var(--spacing-8);
+  cursor: pointer;
+  color: var(--color-text-body);
+}
+
+.z01-master__group > summary {
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text);
+}
+
+.z01-master__file {
+  margin-left: var(--spacing-12);
+}
+
+.z01-master__key {
+  margin-left: var(--spacing-4);
+  color: var(--color-text-muted);
+  font-size: var(--text-caption);
+  font-weight: var(--font-weight-regular);
+}
+
+.z01-master__note {
+  margin: 0 var(--spacing-8) var(--spacing-4);
+  color: var(--color-text-muted);
+  font-size: var(--text-caption);
+}
+
+.z01-master__table {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-8);
+  width: 100%;
+  padding: var(--spacing-4) var(--spacing-8) var(--spacing-4) var(--spacing-24);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-body);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.z01-master__table:hover {
+  background: var(--color-surface-raised);
+}
+
+.z01-master__table.is-active {
+  background: var(--color-mist-violet);
+  color: var(--color-accent);
+}
+
+.z01-master__panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  min-width: 0;
+}
+
+.z01-master__title {
+  display: inline;
+  color: var(--color-text);
+  font-size: var(--text-body);
+}
+
+.z01-master__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-16);
+}
+
+.z01-master__check {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  color: var(--color-text-secondary);
+  font-size: var(--text-body-sm);
+}
+
+.z01-master__grid-wrap {
+  max-height: calc(100vh - 300px);
+  overflow: auto;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-cards);
+}
+
+.z01-master__grid-wrap.is-loading {
+  opacity: 0.5;
+}
+
+.z01-master__grid {
+  border-collapse: collapse;
+  font-size: var(--text-body-sm);
+}
+
+.z01-master__grid th,
+.z01-master__grid td {
+  max-width: 320px;
+  padding: var(--spacing-8) var(--spacing-12);
+  overflow: hidden;
+  border-bottom: 1px solid var(--color-border);
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.z01-master__grid th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--color-surface);
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
+}
+
+.z01-master__grid th .z01-master__key {
+  display: block;
+  margin-left: 0;
+}
+
+.z01-master__pager {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-12);
+  color: var(--color-text-secondary);
+  font-size: var(--text-body-sm);
+}
+
+@media (max-width: 860px) {
+  .z01-master__content {
+    display: block;
+  }
+
+  .z01-master__tree {
+    position: static;
+    margin-bottom: var(--spacing-24);
+  }
+}