Refactor app structure and simplify team docs
This commit is contained in:
hyunho
16
frontend/apps/organization/README.md
Normal file
16
frontend/apps/organization/README.md
Normal file
@@ -0,0 +1,16 @@
|
||||
# Organization App
|
||||
|
||||
조직현황 탭 전용 소스 디렉터리다.
|
||||
|
||||
- 편집 원본:
|
||||
- `index.html`
|
||||
- `assets/common.css`
|
||||
- `assets/organization.css`
|
||||
- `assets/organization.js`
|
||||
- 실제 서빙 대상:
|
||||
- `DashBoard-organization.html`
|
||||
- `legacy/static/common.css`
|
||||
- `legacy/static/organization.css`
|
||||
- `legacy/static/organization.js`
|
||||
|
||||
수정 후에는 `scripts/publish_organization_app.sh`를 실행해 서빙 파일로 반영한다.
|
||||
110
frontend/apps/organization/assets/common.css
Normal file
110
frontend/apps/organization/assets/common.css
Normal file
@@ -0,0 +1,110 @@
|
||||
@import url("/design-tokens.css?v=20260401-01");
|
||||
@import url("/design-patterns.css?v=20260401-01");
|
||||
|
||||
:root {
|
||||
--font-sans: var(--ds-font-sans);
|
||||
|
||||
--color-bg: var(--ds-bg);
|
||||
--color-bg-soft: var(--ds-bg-soft);
|
||||
--color-surface: var(--ds-panel);
|
||||
--color-surface-soft: var(--ds-panel-soft);
|
||||
--color-surface-strong: var(--ds-panel-strong);
|
||||
--color-text: var(--ds-ink);
|
||||
--color-text-soft: var(--ds-text-soft);
|
||||
--color-text-muted: var(--ds-text-muted);
|
||||
--color-border: var(--ds-line);
|
||||
--color-border-soft: var(--ds-line-soft);
|
||||
--color-header: var(--ds-brand);
|
||||
--color-header-soft: var(--ds-brand-soft);
|
||||
--color-accent: var(--ds-accent);
|
||||
--color-accent-soft: var(--ds-accent-soft);
|
||||
--color-accent-strong: var(--ds-accent-strong);
|
||||
|
||||
--radius-sm: var(--ds-radius-sm);
|
||||
--radius-md: var(--ds-radius-md);
|
||||
--radius-lg: var(--ds-radius-lg);
|
||||
--radius-xl: var(--ds-radius-xl);
|
||||
--radius-pill: var(--ds-radius-pill);
|
||||
|
||||
--shadow-soft: var(--ds-shadow-soft);
|
||||
--shadow-card: var(--ds-shadow-card);
|
||||
--shadow-float: var(--ds-shadow-float);
|
||||
|
||||
--space-1: var(--ds-space-1);
|
||||
--space-2: var(--ds-space-2);
|
||||
--space-3: var(--ds-space-3);
|
||||
--space-4: var(--ds-space-4);
|
||||
--space-5: var(--ds-space-5);
|
||||
--space-6: var(--ds-space-6);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
font-family: var(--font-sans);
|
||||
color: var(--color-text);
|
||||
background: var(--ds-bg-gradient);
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
background: var(--ds-bg-gradient);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
a {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.ui-card {
|
||||
background: var(--color-surface-soft);
|
||||
border: 1px solid var(--color-border-soft);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-soft);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.ui-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 38px;
|
||||
padding: 0 14px;
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
|
||||
.ui-button-primary {
|
||||
border: none;
|
||||
color: #fff;
|
||||
background: var(--color-accent);
|
||||
box-shadow: var(--shadow-float);
|
||||
}
|
||||
|
||||
.ui-button-secondary {
|
||||
border: 1px solid var(--color-border-soft);
|
||||
color: var(--color-text);
|
||||
background: var(--ds-surface-tint);
|
||||
}
|
||||
|
||||
.ui-input {
|
||||
border: 1px solid var(--color-border-soft);
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--ds-surface-tint-strong);
|
||||
color: var(--color-text);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.ui-input:focus {
|
||||
border-color: rgba(47, 153, 115, 0.45);
|
||||
box-shadow: 0 0 0 4px rgba(47, 153, 115, 0.1);
|
||||
}
|
||||
1744
frontend/apps/organization/assets/organization.css
Normal file
1744
frontend/apps/organization/assets/organization.css
Normal file
File diff suppressed because it is too large
Load Diff
1979
frontend/apps/organization/assets/organization.js
Normal file
1979
frontend/apps/organization/assets/organization.js
Normal file
File diff suppressed because it is too large
Load Diff
65
frontend/apps/organization/index.html
Normal file
65
frontend/apps/organization/index.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>MH 조직현황 관리</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Pretendard:wght@400;600;700;900&display=swap" rel="stylesheet" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="/legacy/static/common.css?v=20260402-02" />
|
||||
<link rel="stylesheet" href="/legacy/static/organization.css?v=20260402-02" />
|
||||
</head>
|
||||
<body>
|
||||
<input type="file" id="upload-excel" class="hidden" accept=".xlsx, .csv" />
|
||||
|
||||
<div class="search-section">
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="relative flex items-center w-full">
|
||||
<span class="search-icon">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
||||
</span>
|
||||
<input type="text" id="search-input" placeholder="이름 또는 조직 검색" class="search-input" />
|
||||
</div>
|
||||
<div id="dept-tabs" class="dept-tabs-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="stats-area" class="stats-section" style="padding: 10px 15px;">
|
||||
<div class="flex justify-between items-center mb-0 cursor-pointer p-0" id="stats-header">
|
||||
<h2 class="stats-title text-xs font-black text-slate-800 flex items-center gap-2">인원 현황 통계 <span id="total-count-badge" class="bg-indigo-100 text-indigo-600 text-[10px] px-2 py-0.5 rounded-full">0명</span></h2>
|
||||
<span id="stats-toggle-icon" class="text-slate-400 text-xs transition-transform duration-200" style="transform: rotate(-90deg);">▼</span>
|
||||
</div>
|
||||
<div id="stats-table-container" class="mt-3 overflow-hidden transition-all duration-300" style="display: none;"></div>
|
||||
</div>
|
||||
|
||||
<div id="tree-root" class="org-canvas">
|
||||
<div class="text-slate-400 font-bold mt-20 text-xs text-center">서버에서 조직 데이터를 불러오는 중입니다.</div>
|
||||
</div>
|
||||
|
||||
<button id="admin-mode-btn" class="admin-mode-btn" data-label="관리자 모드 전환">🔐</button>
|
||||
|
||||
<div id="last-updated" class="fixed bottom-4 left-5 text-[10px] text-slate-400 font-bold z-[4000] pointer-events-none" style="letter-spacing: 0.02em; opacity: 0.8;"></div>
|
||||
|
||||
<div class="fab-container" id="fab-container">
|
||||
<button class="fab-main text-white" id="fab-main">+</button>
|
||||
<div class="fab-menu" id="fab-menu"></div>
|
||||
</div>
|
||||
|
||||
<div id="modal">
|
||||
<div class="modal-content">
|
||||
<div id="modal-header-area">
|
||||
<h2 id="modal-title" class="text-xl font-black mb-6 text-slate-800 border-b pb-4">구성원 정보 수정</h2>
|
||||
</div>
|
||||
<div id="modal-fields" class="grid grid-cols-2 gap-x-8 gap-y-5"></div>
|
||||
<div id="modal-footer-area" class="flex gap-4 mt-10">
|
||||
<button id="modal-cancel-btn" class="flex-1 bg-slate-100 py-3.5 rounded-xl font-bold text-sm">취소</button>
|
||||
<button id="btn-save" class="flex-1 bg-indigo-600 text-white py-3.5 rounded-xl font-bold text-sm">저장</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/legacy/static/organization.js?v=20260402-02"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user