feat(org-chart): add core cards and fixed-layout integration

2026-10-12 17:58:30 +09:00
1 parent d18e3c3380
commit 61c6f8d1f1
@@ -0,0 +1,76 @@
+/** Presentation-only colors measured from Workdesk organization headers.
+ *  Header measurements do not verify employee card edges/fills. Standalone
+ *  OrgChart defaults and employee JSON remain separate from this local config. */
+const status = 'WORKDESK_COMPUTED' as const;
+const source = 'https://workdesk.hmac.kr/' as const;
+const observedOn = '2026-10-12' as const;
+const version = 'v1.2610.9c5e' as const;
+const foregroundVariable = '--hm-orgchart-resolved-on-action-primary' as const;
+const cardBackground = 'var(--hm-orgchart-resolved-bg-surface)' as const;
+const departmentColor = '#ffffff' as const;
+const cardStyleStatus = 'DESIGN_ADAPTATION' as const;
+const verificationScope = 'Organization header background only; employee card edges/fills NOT VERIFIED' as const;
+
+export const organizationStylePresets = [
+  {
+    id: 0, label: '사업관리', accentColor: '#194d82',
+    organizationId: 'business-management', variablePrefix: '--hm-orgchart-business-management',
+    cardBackground, departmentColor, borderColor: '#194d82', cardStyleStatus,
+    backgroundImage: 'linear-gradient(180deg, #194d82 0%, #1d395c 100%)',
+    foregroundVariable, status, source, observedOn, version, selector: '.h33', verificationScope,
+  },
+  {
+    id: 1, label: '경영기획', accentColor: '#2164a8',
+    organizationId: 'business-planning', variablePrefix: '--hm-orgchart-business-planning',
+    cardBackground, departmentColor, borderColor: '#2164a8', cardStyleStatus,
+    backgroundImage: 'linear-gradient(180deg, #2164a8 0%, #254975 100%)',
+    foregroundVariable, status, source, observedOn, version, selector: '.h33.org-team-link', verificationScope,
+  },
+  {
+    id: 2, label: '인재성장', accentColor: '#0f6ace',
+    organizationId: 'talent-growth', variablePrefix: '--hm-orgchart-talent-growth',
+    cardBackground, departmentColor, borderColor: '#0f6ace', cardStyleStatus,
+    backgroundImage: 'linear-gradient(180deg, #0f6ace 0%, #044a94 100%)',
+    foregroundVariable, status, source, observedOn, version, selector: '.h38.org-team-link', verificationScope,
+  },
+  {
+    id: 3, label: '통합시스템 Div', accentColor: '#8c67b6',
+    organizationId: 'integrated-system', variablePrefix: '--hm-orgchart-integrated-system',
+    cardBackground, departmentColor, borderColor: '#8c67b6', cardStyleStatus,
+    backgroundImage: 'linear-gradient(180deg, #8c67b6 0%, #5d3494 100%)',
+    foregroundVariable, status, source, observedOn, version, selector: '.h310.org-team-link', verificationScope,
+  },
+  {
+    id: 4, label: '디자인기획', accentColor: '#09a7a2',
+    organizationId: 'design-planning', variablePrefix: '--hm-orgchart-design-planning',
+    cardBackground, departmentColor, borderColor: '#09a7a2', cardStyleStatus,
+    backgroundImage: 'linear-gradient(180deg, #09a7a2 0%, #00847f 100%)',
+    foregroundVariable, status, source, observedOn, version, selector: '.h312.org-team-link', verificationScope,
+  },
+  {
+    id: 5, label: '솔루션영업', accentColor: '#5a963c',
+    organizationId: 'solution-sales', variablePrefix: '--hm-orgchart-solution-sales',
+    cardBackground, departmentColor, borderColor: '#5a963c', cardStyleStatus,
+    backgroundImage: 'linear-gradient(180deg, #5a963c 0%, #3f7629 100%)',
+    foregroundVariable, status, source, observedOn, version, selector: '.h36.org-team-link', verificationScope,
+  },
+] as const;
+
+export function applyOrganizationStyle(element: HTMLElement, variant: number): void {
+  const preset = organizationStylePresets[variant] ?? organizationStylePresets[0];
+  element.dataset.groupVariant = String(preset.id);
+  const prefix = preset.variablePrefix;
+  element.style.setProperty('--hm-orgchart-current-card-background',
+    `var(${prefix}-card-background, var(--hm-orgchart-card-background, ${preset.cardBackground}))`);
+  element.style.setProperty('--hm-orgchart-current-card-color',
+    `var(${prefix}-card-color, var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary)))`);
+  element.style.setProperty('--hm-orgchart-current-department-color',
+    `var(${prefix}-department-color, var(--hm-orgchart-department-color, ${preset.departmentColor}))`);
+  element.style.setProperty('--hm-orgchart-current-border',
+    `var(${prefix}-border, var(--hm-orgchart-border, ${preset.borderColor}))`);
+  element.style.setProperty('--hm-orgchart-current-gradient',
+    `var(${prefix}-gradient, var(--hm-orgchart-gradient, ${preset.backgroundImage}))`);
+  // Compatibility aliases remain local to this presentation element.
+  element.style.setProperty('--hm-orgchart-accent', 'var(--hm-orgchart-current-border)');
+  element.style.setProperty('--hm-orgchart-group-background', 'var(--hm-orgchart-current-gradient)');
+}