diff --git a/frontend/issues-dashboard.html b/frontend/issues-dashboard.html index 2452f04..0ecc823 100644 --- a/frontend/issues-dashboard.html +++ b/frontend/issues-dashboard.html @@ -27,24 +27,31 @@ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } - .project-card { + /* 이슈 카드 스타일 (관리함 진행 중 스타일) */ + .issue-card { transition: all 0.2s ease; border-left: 4px solid transparent; } - .project-card:hover { - transform: translateX(5px); + .issue-card:hover { + transform: translateY(-2px); border-left-color: #3b82f6; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } - .issue-mini-card { + .issue-card label { + font-weight: 600; + color: #374151; + } + + .issue-card .bg-gray-50 { + background-color: #f9fafb; + border: 1px solid #e5e7eb; transition: all 0.2s ease; } - .issue-mini-card:hover { - transform: scale(1.02); - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + .issue-card .bg-gray-50:hover { + background-color: #f3f4f6; } .progress-bar { @@ -359,7 +366,7 @@ document.getElementById('activeProjects').textContent = activeProjectIds.size; } - // 프로젝트 카드 업데이트 + // 이슈 카드 업데이트 (관리함 진행 중 스타일) function updateProjectCards() { const container = document.getElementById('projectDashboard'); const emptyState = document.getElementById('emptyState'); @@ -372,101 +379,182 @@ emptyState.classList.add('hidden'); - // 프로젝트별 그룹화 - const projectGroups = {}; - filteredIssues.forEach(issue => { - const projectId = issue.project_id || 'unassigned'; - if (!projectGroups[projectId]) { - projectGroups[projectId] = []; - } - projectGroups[projectId].push(issue); - }); - - // 프로젝트 카드 생성 - const projectCards = Object.keys(projectGroups).map(projectId => { - const issues = projectGroups[projectId]; - const project = projects.find(p => p.id == projectId); - const projectName = project ? project.project_name : '프로젝트 미지정'; - - return createProjectCard(projectName, issues); - }).join(''); - - container.innerHTML = projectCards; + // 이슈 카드들을 생성 (관리함 진행 중 스타일) + const issueCards = filteredIssues.map(issue => createIssueCard(issue)).join(''); + container.innerHTML = `
${issueCards}
`; } - // 프로젝트 카드 생성 - function createProjectCard(projectName, issues) { - const urgentCount = issues.filter(issue => { + // 이슈 카드 생성 (관리함 진행 중 스타일, 읽기 전용) + function createIssueCard(issue) { + const project = projects.find(p => p.id === issue.project_id); + const projectName = project ? project.project_name : '미지정'; + + // 부서 텍스트 변환 + const getDepartmentText = (dept) => { + const deptMap = { + 'production': '생산', + 'quality': '품질', + 'purchasing': '구매', + 'design': '설계', + 'sales': '영업' + }; + return dept ? deptMap[dept] || dept : '-'; + }; + + // 카테고리 텍스트 변환 + const getCategoryText = (category) => { + const categoryMap = { + 'quality': '품질', + 'safety': '안전', + 'environment': '환경', + 'process': '공정', + 'equipment': '장비', + 'material': '자재', + 'etc': '기타' + }; + return category ? categoryMap[category] || category : '-'; + }; + + // 날짜 포맷팅 + const formatKSTDate = (dateStr) => { + if (!dateStr) return '-'; + const date = new Date(dateStr); + return date.toLocaleDateString('ko-KR', { + year: 'numeric', + month: '2-digit', + day: '2-digit' + }); + }; + + // 긴급도 체크 (예상완료일 기준) + const isUrgent = () => { if (!issue.expected_completion_date) return false; const expectedDate = new Date(issue.expected_completion_date); const now = new Date(); const diffDays = (expectedDate - now) / (1000 * 60 * 60 * 24); - return diffDays <= 3; - }).length; + return diffDays <= 3; // 3일 이내 또는 지연 + }; return ` -
-
-

${projectName}

+
+ +
- - ${issues.length}건 - - ${urgentCount > 0 ? ` - 긴급 ${urgentCount}건 - ` : ''} + No.${issue.project_sequence_no || '-'} + ${isUrgent() ? '긴급' : ''} +
+ ${formatKSTDate(issue.report_date)} +
+ + +
+
+ +
${projectName}
+
+ +
+ +
${issue.final_description || issue.description || '-'}
+
+ +
+ +
${getCategoryText(issue.final_category || issue.category)}
-
- ${issues.map(issue => createIssueMiniCard(issue)).join('')} + +
+
+
+ +
${issue.solution || '-'}
+
+
+ +
${getDepartmentText(issue.responsible_department)}
+
+
+ +
+
+ +
${issue.responsible_person || '-'}
+
+
+ +
${formatKSTDate(issue.expected_completion_date)}
+
+
+ +
+ +
${getDepartmentText(issue.cause_department)}
+
+ + + ${issue.photo_path || issue.photo_path2 ? ` +
+ +
+ ${issue.photo_path ? ` +
+ +
+ ` : ''} + ${issue.photo_path2 ? ` +
+ +
+ ` : ''} +
+
+ ` : ''}
`; } - // 이슈 미니 카드 생성 - function createIssueMiniCard(issue) { - const isUrgent = issue.expected_completion_date && - (new Date(issue.expected_completion_date) - new Date()) / (1000 * 60 * 60 * 24) <= 3; + // 사진 모달 열기 + function openPhotoModal(photoPath) { + let modal = document.getElementById('photoModal'); - const urgentClass = isUrgent ? 'border-red-200 bg-red-50' : 'border-gray-200 bg-white'; + if (!modal) { + // 모달이 없으면 생성 + const modalHTML = ` + + `; + document.body.insertAdjacentHTML('beforeend', modalHTML); + modal = document.getElementById('photoModal'); + } - return ` -
-
- - No.${issue.project_sequence_no || '-'} - - ${isUrgent ? '' : ''} -
- -

- ${issue.final_description || issue.description} -

- -
- ${new Date(issue.report_date).toLocaleDateString('ko-KR')} - ${issue.expected_completion_date ? - ` - 마감: ${new Date(issue.expected_completion_date).toLocaleDateString('ko-KR')} - ` : - '마감일 미정' - } -
- - ${issue.responsible_department ? - `
- - ${getDepartmentText(issue.responsible_department)} - -
` : '' - } -
- `; + document.getElementById('modalPhoto').src = photoPath; + modal.classList.remove('hidden'); } + // 사진 모달 닫기 + function closePhotoModal() { + const modal = document.getElementById('photoModal'); + if (modal) { + modal.classList.add('hidden'); + } + } + + // ESC 키로 모달 닫기 + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape') { + closePhotoModal(); + } + }); + // 필터 및 정렬 함수들 function filterByProject() { const projectId = document.getElementById('projectFilter').value;