diff --git a/frontend/issues-dashboard.html b/frontend/issues-dashboard.html index c28465e..41fdf2c 100644 --- a/frontend/issues-dashboard.html +++ b/frontend/issues-dashboard.html @@ -68,6 +68,24 @@ .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } + + /* 날짜 그룹 스타일 */ + .date-group { + margin-bottom: 1.5rem; + } + + .date-header { + cursor: pointer; + transition: all 0.2s ease; + } + + .date-header:hover { + background-color: #f3f4f6 !important; + } + + .collapse-content { + transition: all 0.3s ease; + } .progress-bar { background: linear-gradient(90deg, #10b981 0%, #059669 100%); @@ -381,7 +399,7 @@ document.getElementById('activeProjects').textContent = activeProjectIds.size; } - // 이슈 카드 업데이트 (관리함 진행 중 카드 스타일) + // 이슈 카드 업데이트 (관리함 스타일 - 날짜별 그룹화) function updateProjectCards() { const container = document.getElementById('projectDashboard'); const emptyState = document.getElementById('emptyState'); @@ -394,14 +412,47 @@ emptyState.classList.add('hidden'); - // 카드 그리드 생성 - const cardsHTML = ` -
- ${filteredIssues.map(issue => createIssueCard(issue)).join('')} -
- `; - - container.innerHTML = cardsHTML; + // 날짜별로 그룹화 + const groupedByDate = {}; + filteredIssues.forEach(issue => { + const dateKey = new Date(issue.report_date).toLocaleDateString('ko-KR'); + if (!groupedByDate[dateKey]) { + groupedByDate[dateKey] = []; + } + groupedByDate[dateKey].push(issue); + }); + + // 날짜별 그룹 생성 + const dateGroups = Object.keys(groupedByDate) + .sort((a, b) => new Date(b) - new Date(a)) // 최신순 + .map(dateKey => { + const issues = groupedByDate[dateKey]; + const formattedDate = new Date(dateKey).toLocaleDateString('ko-KR', { + year: 'numeric', + month: '2-digit', + day: '2-digit' + }).replace(/\./g, '. ').trim(); + + return ` +
+
+
+ + ${formattedDate} + (${issues.length}건) + 업로드일 +
+
+
+
+ ${issues.map(issue => createIssueCard(issue)).join('')} +
+
+
+ `; + }).join(''); + + container.innerHTML = dateGroups; } // 이슈 카드 생성 (관리함 진행 중 스타일, 읽기 전용) @@ -456,83 +507,111 @@ }; return ` -
+
No.${issue.project_sequence_no || '-'} ${isUrgent() ? '긴급' : ''}
- ${formatKSTDate(issue.report_date)} +
+ + +
- -
-
- -
${projectName}
+ + ${issue.photo_path || issue.photo_path2 ? ` +
+ +
+ ${issue.photo_path ? ` +
+ +
+ ` : ` +
+ 사진 없음 +
+ `} + ${issue.photo_path2 ? ` +
+ +
+ ` : ` +
+ 사진 없음 +
+ `} +
- -
- -
${issue.final_description || issue.description || '-'}
-
- -
- -
${getCategoryText(issue.final_category || issue.category)}
+ ` : ` +
+ +
+
+ 사진 없음 +
+
+ 사진 없음 +
+
+ `} + + +
+ +
${issue.final_description || issue.description || '중복작업 신고용'}
+
+ + +
+ + ${getCategoryText(issue.final_category || issue.category)}
- -
${issue.solution || '-'}
+ +
- -
${getDepartmentText(issue.responsible_department)}
+ +
- -
${issue.responsible_person || '-'}
+ +
- -
${formatKSTDate(issue.expected_completion_date)}
+ +
-
${getDepartmentText(issue.cause_department)}
+
${getDepartmentText(issue.cause_department)}
- - ${issue.photo_path || issue.photo_path2 ? ` -
- -
- ${issue.photo_path ? ` -
- -
- ` : ''} - ${issue.photo_path2 ? ` -
- -
- ` : ''} -
-
- ` : ''} -
@@ -584,6 +663,22 @@ } }); + // 날짜 그룹 토글 기능 + function toggleDateGroup(dateKey) { + const content = document.getElementById(`content-${dateKey}`); + const chevron = document.getElementById(`chevron-${dateKey}`); + + if (content.style.display === 'none') { + content.style.display = 'block'; + chevron.classList.remove('fa-chevron-right'); + chevron.classList.add('fa-chevron-down'); + } else { + content.style.display = 'none'; + chevron.classList.remove('fa-chevron-down'); + chevron.classList.add('fa-chevron-right'); + } + } + // 필터 및 정렬 함수들 function filterByProject() { const projectId = document.getElementById('projectFilter').value;