hyunho/MH-DashBoard-organization
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

backup: save fixed office seatmap snapshot

Browse Source
This commit is contained in:
hyunho
2026-03-26 09:42:25 +09:00
parent e62a6a5458
commit 6f5e61ca1a
15 changed files with 2042 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
legacy/static/organization.css
View File

@@ -262,7 +262,7 @@ body {
background: white;
width: 100%;
max-width: 650px;
padding: 35px;
padding: 24px 24px 20px;
border-radius: 20px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
position: relative;
@@ -318,6 +318,262 @@ body {
max-width: 1200px;
}
.member-photo-field {
display: flex;
flex-direction: column;
gap: 8px;
height: 100%;
}
.member-basic-top-row {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 12px;
align-items: stretch;
}
.member-detail-top-row {
width: 100%;
display: grid;
grid-template-columns: 140px minmax(0, 1fr);
gap: 20px;
align-items: start;
}
.member-detail-summary {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.member-name-field {
min-width: 0;
}
.member-inline-info-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 10px;
}
.member-inline-info-grid-edit {
margin-top: 10px;
}
.member-inline-info-card {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #f8fafc;
}
.member-inline-info-card label {
display: block;
font-size: 10px;
font-weight: 900;
color: #64748b;
}
.member-inline-info-card strong {
display: block;
font-size: 13px;
font-weight: 900;
color: #1e293b;
word-break: break-word;
}
.member-inline-info-card-full {
grid-column: 1 / -1;
}
.modal-form-grid {
align-items: start;
}
.modal-form-grid > .col-span-1,
.modal-form-grid > .col-span-2 {
min-width: 0;
}
.member-photo-upload-card {
display: flex;
gap: 16px;
align-items: center;
justify-content: center;
padding: 12px;
border: 1px solid #e2e8f0;
border-radius: 16px;
background: #f8fafc;
height: 100%;
min-height: 100%;
box-sizing: border-box;
}
.member-photo-upload-card-compact {
flex-direction: column;
align-items: center;
text-align: center;
justify-content: space-between;
}
.member-photo-preview-wrap {
flex: 0 0 auto;
}
.member-photo-preview {
width: 84px;
height: 84px;
border-radius: 9999px;
object-fit: cover;
border: 3px solid #e0e7ff;
background: #ffffff;
}
.member-photo-upload-controls {
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.member-photo-file-label {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
padding: 10px 14px;
border-radius: 10px;
background: #4f46e5;
color: #ffffff;
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
.member-photo-file-label input {
display: none;
}
.member-photo-file-name {
font-size: 11px;
color: #334155;
word-break: break-all;
}
.seat-preview-card {
border: 1px solid #e2e8f0;
border-radius: 18px;
background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
overflow: hidden;
}
.seat-preview-head {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 12px 14px 8px;
align-items: flex-start;
}
.seat-preview-head strong {
display: block;
font-size: 13px;
font-weight: 900;
color: #1e293b;
}
.seat-preview-head p {
margin: 4px 0 0;
font-size: 11px;
line-height: 1.5;
color: #64748b;
font-weight: 700;
}
.seat-preview-badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
padding: 6px 10px;
border-radius: 9999px;
background: #dbeafe;
color: #1d4ed8;
font-size: 11px;
font-weight: 900;
}
.seat-preview-badge-muted {
background: #e2e8f0;
color: #64748b;
}
.seat-preview-canvas {
margin: 0 14px 14px;
min-height: 220px;
border-radius: 16px;
border: 1px dashed #94a3b8;
background:
linear-gradient(135deg, rgba(255,255,255,0.9), rgba(224,231,255,0.95)),
repeating-linear-gradient(
0deg,
rgba(148,163,184,0.12),
rgba(148,163,184,0.12) 1px,
transparent 1px,
transparent 24px
),
repeating-linear-gradient(
90deg,
rgba(148,163,184,0.12),
rgba(148,163,184,0.12) 1px,
transparent 1px,
transparent 24px
);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.seat-preview-placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: #475569;
font-size: 12px;
font-weight: 900;
}
.seat-preview-placeholder-icon {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
background: rgba(79, 70, 229, 0.1);
color: #4338ca;
font-size: 24px;
}
@media (max-width: 720px) {
.member-basic-top-row {
grid-template-columns: 1fr;
}
.member-detail-top-row,
.member-inline-info-grid {
grid-template-columns: 1fr;
}
}
.list-table {
width: 100%;
border-collapse: collapse;

199
legacy/static/organization.js
View File

@@ -5,6 +5,7 @@ let editingMembers = [];
let collapsedUnits = new Set();
let isListMode = false;
let emptyStateMessage = '서버에 조직 데이터가 없습니다. 상단의 업로드 버튼으로 초기 데이터를 넣어주세요.';
let photoPreviewObjectUrl = null;
const levelOrder = ['부서', '그룹', '디비전', '팀', '셀'];
const dropdownFields = ['소속회사', '직급', '직책', ...levelOrder];
@@ -31,6 +32,26 @@ function cloneMembers(items) {
return JSON.parse(JSON.stringify(items));
}
function getPhotoPlaceholder(name = '') {
return `https://via.placeholder.com/160?text=${encodeURIComponent(name || 'Profile')}`;
}
function escapeHtml(value) {
return String(value ?? '')
.replaceAll('&', '&')
.replaceAll('<', '&lt;')
.replaceAll('>', '&gt;')
.replaceAll('"', '&quot;')
.replaceAll("'", '&#39;');
}
function resetPhotoPreviewObjectUrl() {
if (photoPreviewObjectUrl) {
URL.revokeObjectURL(photoPreviewObjectUrl);
photoPreviewObjectUrl = null;
}
}
function toLegacyMember(item) {
return rebuildMemberPath({
_id: String(item.id),
@@ -94,6 +115,17 @@ async function apiFetch(url, options = {}) {
return payload;
}
async function uploadProfilePhoto(file, memberName) {
const formData = new FormData();
formData.append('file', file);
formData.append('member_name', memberName || '');
const payload = await apiFetch('/api/uploads/profile-photo', {
method: 'POST',
body: formData,
});
return payload.url || '';
}
function setMembers(items) {
members = items.map(toLegacyMember);
if (selectedDept !== '전체' && !members.some((member) => member['부서'] === selectedDept)) {
@@ -779,6 +811,66 @@ function toggleFlexibleTime(value) {
document.getElementById('flexible-time-area').classList.toggle('hidden', value !== '유연근무제');
}
function updatePhotoPreview(src, fallbackName) {
const preview = document.getElementById('m-photo-preview');
if (!preview) {
return;
}
preview.src = src || getPhotoPlaceholder(fallbackName);
}
function syncPhotoPreviewFromUrl() {
const name = document.getElementById('m-name')?.value?.trim() || '';
const url = document.getElementById('m-photo-hidden')?.value?.trim() || '';
updatePhotoPreview(url, name);
}
function handlePhotoFileChange(event) {
const file = event.target.files?.[0];
const fileName = document.getElementById('m-photo-file-name');
const name = document.getElementById('m-name')?.value?.trim() || '';
resetPhotoPreviewObjectUrl();
if (!file) {
if (fileName) {
fileName.textContent = '선택된 파일 없음';
}
syncPhotoPreviewFromUrl();
return;
}
if (fileName) {
fileName.textContent = file.name;
}
photoPreviewObjectUrl = URL.createObjectURL(file);
updatePhotoPreview(photoPreviewObjectUrl, name);
}
function renderSeatPreviewCard(seatLabel) {
const safeLabel = escapeHtml(seatLabel || '');
const badge = safeLabel
? `<span class="seat-preview-badge">${safeLabel}</span>`
: '<span class="seat-preview-badge seat-preview-badge-muted">미배치</span>';
return `
<div class="seat-preview-card">
<div class="seat-preview-head">
<div>
<strong>재석위치</strong>
<p>향후 해당 인원의 좌석 영역을 크롭해 표시하고, 스크롤 확대/축소를 지원할 예정입니다.</p>
</div>
${badge}
</div>
<div class="seat-preview-canvas">
<div class="seat-preview-placeholder">
<span class="seat-preview-placeholder-icon">⌖</span>
<span>좌석 이미지 연동 예정</span>
</div>
</div>
</div>
`;
}
function switchModalTab(tab) {
const isBasic = tab === 'basic';
document.getElementById('modal-sec-basic').classList.toggle('hidden', !isBasic);
@@ -804,29 +896,30 @@ function openModal(id) {
fieldsArea.className = 'flex flex-col items-center gap-6 py-4';
fieldsArea.style.maxHeight = 'none';
fieldsArea.innerHTML = `
<div class="relative w-32 h-32 rounded-full overflow-hidden border-4 border-indigo-100 shadow-lg">
<img src="${member['사진'] || 'https://via.placeholder.com/120?text=Profile'}" class="w-full h-full object-cover">
</div>
<div class="text-center">
<h2 class="text-2xl font-black text-slate-800">${member['이름'] || ''}</h2>
<p class="text-indigo-600 font-bold">${member['직급'] || '-'} / ${member['직책'] || '팀원'}</p>
<p class="text-slate-400 text-xs mt-1 font-medium">${(member._path || []).map((path) => path.name).join(' > ')}</p>
</div>
<div class="w-full grid grid-cols-2 gap-3 mt-4">
<div class="bg-indigo-50 p-4 rounded-2xl border border-indigo-100 col-span-2 flex items-center gap-4">
<div class="flex-1">
<label class="text-[10px] text-indigo-400 font-bold block mb-1">연락처</label>
<span class="text-sm font-black text-indigo-700">${member['전화번호'] || '정보 없음'}</span>
<div class="member-detail-top-row">
<div class="relative w-32 h-32 rounded-full overflow-hidden border-4 border-indigo-100 shadow-lg">
<img src="${member['사진'] || 'https://via.placeholder.com/120?text=Profile'}" class="w-full h-full object-cover">
</div>
<div class="member-detail-summary">
<div>
<h2 class="text-2xl font-black text-slate-800">${member['이름'] || ''}</h2>
<p class="text-indigo-600 font-bold">${member['직급'] || '-'} / ${member['직책'] || '팀원'}</p>
<p class="text-slate-400 text-xs mt-1 font-medium">${(member._path || []).map((path) => path.name).join(' > ')}</p>
</div>
<div class="flex-1">
<label class="text-[10px] text-indigo-400 font-bold block mb-1">이메일</label>
<span class="text-sm font-black text-indigo-700">${member['이메일'] || '정보 없음'}</span>
<div class="member-inline-info-grid">
<div class="member-inline-info-card">
<label>전화번호</label>
<strong>${member['전화번호'] || '정보 없음'}</strong>
</div>
<div class="member-inline-info-card">
<label>이메일</label>
<strong>${member['이메일'] || '정보 없음'}</strong>
</div>
</div>
</div>
<div class="bg-slate-50 p-4 rounded-2xl border border-slate-100 col-span-2">
<label class="text-[10px] text-slate-400 font-bold block mb-1">사무실 위치</label>
<span class="text-sm font-black text-slate-700">${member['자리위치'] || '정보 없음'}</span>
</div>
</div>
<div class="w-full mt-2">
${renderSeatPreviewCard(member['자리위치'] || '')}
</div>
`;
footer.innerHTML = '<button onclick="closeModal()" class="w-full bg-slate-800 text-white py-4 rounded-xl font-bold text-sm shadow-lg">닫기</button>';
@@ -836,11 +929,11 @@ function openModal(id) {
document.getElementById('modal-title').innerText = id ? '구성원 정보 수정' : '신규 구성원 추가';
fieldsArea.className = 'flex flex-col w-full';
fieldsArea.style.maxHeight = '75vh';
fieldsArea.style.overflowY = 'auto';
fieldsArea.style.maxHeight = 'none';
fieldsArea.style.overflowY = 'visible';
const sourceValues = isListMode ? editingMembers : members;
let orgFields = '<div id="modal-sec-org" class="hidden grid grid-cols-2 gap-4">';
let orgFields = '<div id="modal-sec-org" class="hidden grid grid-cols-2 gap-3 modal-form-grid">';
dropdownFields.forEach((field) => {
const uniqueValues = Array.from(new Set(sourceValues.map((item) => item[field]).filter(Boolean))).sort();
const currentValue = member[field] || '';
@@ -886,18 +979,55 @@ function openModal(id) {
<button id="modal-tab-basic" onclick="switchModalTab('basic')" class="flex-1 py-3 font-bold border-b-2 border-indigo-600 text-indigo-600 text-sm transition-all">기본 정보</button>
<button id="modal-tab-org" onclick="switchModalTab('org')" class="flex-1 py-3 font-bold border-b-2 border-transparent text-slate-400 text-sm transition-all">조직 및 근무</button>
</div>
<div id="modal-sec-basic" class="grid grid-cols-2 gap-4">
<div id="modal-sec-basic" class="grid grid-cols-2 gap-3 modal-form-grid">
<input type="hidden" id="m-id" value="${id || ''}">
<div class="col-span-2"><label class="text-[11px] font-black text-slate-600 block">이름 (필수)</label><input id="m-name" value="${member['이름'] || ''}" class="w-full bg-slate-50 p-3 rounded-xl border font-bold text-sm outline-none"></div>
<div class="col-span-2"><label class="text-[11px] font-black text-slate-600 block">사번</label><input id="m-employee-id" value="${member['사번'] || ''}" class="w-full bg-white p-3 rounded-xl border font-bold text-sm outline-none"></div>
<div class="col-span-1"><label class="text-[11px] font-black text-slate-600 block">전화번호</label><input id="m-phone" value="${member['전화번호'] || ''}" class="w-full bg-white p-3 rounded-xl border font-bold text-sm outline-none"></div>
<div class="col-span-1"><label class="text-[11px] font-black text-slate-600 block">이메일</label><input id="m-email" value="${member['이메일'] || ''}" class="w-full bg-white p-3 rounded-xl border font-bold text-sm outline-none"></div>
<div class="col-span-2"><label class="text-[11px] font-black text-slate-600 block">자리 위치</label><input id="m-seat" value="${member['자리위치'] || ''}" class="w-full bg-white p-3 rounded-xl border font-bold text-sm outline-none"></div>
<div class="col-span-2"><label class="text-[11px] font-black text-slate-600 block">사진 URL</label><input id="m-photo" value="${member['사진'] || ''}" class="w-full bg-white p-3 rounded-xl border font-bold text-sm outline-none text-xs"></div>
<input type="hidden" id="m-photo-hidden" value="${member['사진'] || ''}">
<input type="hidden" id="m-seat-hidden" value="${member['자리위치'] || ''}">
<div class="col-span-2 member-basic-top-row">
<div class="member-photo-field">
<label class="text-[11px] font-black text-slate-600 block">프로필 사진</label>
<div class="member-photo-upload-card member-photo-upload-card-compact">
<div class="member-photo-preview-wrap">
<img id="m-photo-preview" src="${member['사진'] || getPhotoPlaceholder(member['이름'] || '')}" alt="프로필 미리보기" class="member-photo-preview">
</div>
<div class="member-photo-upload-controls">
<label class="member-photo-file-label" for="m-photo-file">
<input id="m-photo-file" type="file" accept="image/png,image/jpeg,image/webp,image/gif" onchange="handlePhotoFileChange(event)">
<span>사진 파일 선택</span>
</label>
<strong id="m-photo-file-name" class="member-photo-file-name">선택된 파일 없음</strong>
</div>
</div>
</div>
<div class="member-name-field">
<label class="text-[11px] font-black text-slate-600 block">이름 (필수)</label>
<input id="m-name" value="${member['이름'] || ''}" oninput="syncPhotoPreviewFromUrl()" class="w-full bg-slate-50 p-3 rounded-xl border font-bold text-sm outline-none">
<div class="member-inline-info-grid member-inline-info-grid-edit">
<div class="member-inline-info-card">
<label>사번</label>
<input id="m-employee-id" value="${member['사번'] || ''}" class="w-full bg-white p-3 rounded-xl border font-bold text-sm outline-none">
</div>
<div class="member-inline-info-card">
<label>전화번호</label>
<input id="m-phone" value="${member['전화번호'] || ''}" class="w-full bg-white p-3 rounded-xl border font-bold text-sm outline-none">
</div>
<div class="member-inline-info-card member-inline-info-card-full">
<label>이메일</label>
<input id="m-email" value="${member['이메일'] || ''}" class="w-full bg-white p-3 rounded-xl border font-bold text-sm outline-none">
</div>
</div>
</div>
</div>
<div class="col-span-2">
<label class="text-[11px] font-black text-slate-600 block mb-2">자리 위치</label>
${renderSeatPreviewCard(member['자리위치'] || '')}
</div>
</div>
${orgFields}
`;
resetPhotoPreviewObjectUrl();
const deleteBtn = id ? `<button onclick="deleteMember('${id}')" class="bg-red-50 text-red-600 py-3.5 px-6 rounded-xl font-bold text-sm border border-red-100 hover:bg-red-100 transition-colors">삭제</button>` : '';
footer.innerHTML = `
${deleteBtn}
@@ -908,6 +1038,7 @@ function openModal(id) {
}
function closeModal() {
resetPhotoPreviewObjectUrl();
document.getElementById('modal').style.display = 'none';
document.getElementById('modal-fields').className = 'grid grid-cols-2 gap-x-8 gap-y-5';
document.getElementById('modal-fields').style.maxHeight = 'none';
@@ -946,8 +1077,12 @@ async function saveMember() {
member['근무시간'] = document.getElementById('m-worktime').value;
member['전화번호'] = document.getElementById('m-phone').value.trim();
member['이메일'] = document.getElementById('m-email').value.trim();
member['자리위치'] = document.getElementById('m-seat').value.trim();
member['사진'] = document.getElementById('m-photo').value.trim();
member['자리위치'] = document.getElementById('m-seat-hidden').value.trim();
member['사진'] = document.getElementById('m-photo-hidden').value.trim();
const photoFile = document.getElementById('m-photo-file')?.files?.[0];
if (photoFile) {
member['사진'] = await uploadProfilePhoto(photoFile, member['이름']);
}
if (member['근무시간'] === '유연근무제') {
member['유연근무_시작'] = document.getElementById('m-work-start').value;
member['유연근무_종료'] = document.getElementById('m-work-end').value;