From fd0579805cb70894b5a848c58cb13b1677d7516a Mon Sep 17 00:00:00 2001 From: Hyungi Ahn Date: Sun, 26 Oct 2025 14:23:28 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B4=80=EB=A6=AC=ED=95=A8=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C=EB=90=A8=20=ED=83=AD=20UI=20=EA=B0=9C=EC=84=A0=20-=20?= =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=ED=98=95=EC=8B=9D=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✨ 새로운 기능: - 완료됨 탭을 테이블에서 카드 형식으로 완전 변경 - 완료 시 입력한 모든 정보를 포괄적으로 표시 - 3단 구조로 정보 체계화 (기본정보 | 관리정보 | 완료정보) 🎨 UI/UX 개선: - 진행 중 탭과 일관된 카드 디자인 적용 - 녹색 테마로 완료 상태 시각화 - 반응형 3단 그리드 레이아웃 - HEIC 완료 사진 다운로드 지원 📋 포함된 완료 정보: - 완료 사진 (HEIC 지원) - 완료 코멘트 - 완료 신청일 - 해결방안, 담당부서/담당자 - 원인부서, 관리 코멘트 - 원본 업로드 사진 🔧 기술적 개선: - getDepartmentText() 함수 추가 (부서 코드 한글 변환) - 레거시 테이블 헤더 함수 정리 - 카드 기반 통합 렌더링 시스템 --- frontend/issues-management.html | 218 ++++++++++++++++++++------------ 1 file changed, 135 insertions(+), 83 deletions(-) diff --git a/frontend/issues-management.html b/frontend/issues-management.html index d0c4100..bcda536 100644 --- a/frontend/issues-management.html +++ b/frontend/issues-management.html @@ -665,25 +665,9 @@
- ${currentTab === 'in_progress' ? - // 진행 중: 카드 형식 - `
- ${issues.map(issue => createIssueRow(issue)).join('')} -
` : - // 완료됨: 테이블 형식 - `
- - - - ${createTableHeader()} - - - - ${issues.map(issue => createIssueRow(issue)).join('')} - -
-
` - } +
+ ${issues.map(issue => createIssueRow(issue)).join('')} +
`; @@ -945,27 +929,124 @@ // 완료됨 행 생성 (입력 여부 표시) function createCompletedRow(issue, project) { + // 완료 날짜 포맷팅 + const completedDate = issue.completed_at ? new Date(issue.completed_at).toLocaleDateString('ko-KR') : '미완료'; + return ` - - - - No.${issue.project_sequence_no || '-'} -
- - - ${project ? project.project_name : '-'} - ${getStatusIcon(issue.final_description || issue.description)} - ${getStatusIcon(getCategoryText(issue.final_category || issue.category))} - ${getStatusIcon(issue.solution)} - ${getStatusIcon(issue.responsible_department)} - ${getStatusIcon(issue.responsible_person)} - ${getStatusIcon(issue.expected_completion_date)} - ${getReporterNames(issue)} - ${getStatusIcon(issue.cause_department)} - ${getStatusIcon(issue.management_comment)} - ${getPhotoStatusIcon(issue.photo_path, issue.photo_path2)} - ${getStatusIcon(issue.completion_photo_path)} - +
+ +
+
+
+
+ No.${issue.project_sequence_no || '-'} +
+
+ ${project ? project.project_name : '프로젝트 미지정'} + +
+
+ 완료됨 + +
+ 완료일: ${completedDate} +
+
+

${getIssueTitle(issue)}

+
+
+
+ +
+
+ + +
+ +
+

+ + 기본 정보 +

+
+
+

${getIssueDetail(issue)}

+
+
원인분류: ${getCategoryText(issue.final_category || issue.category) || '-'}
+
확인자: ${getReporterNames(issue) || '-'}
+
+
+ + +
+

+ + 관리 정보 +

+
+
해결방안: ${issue.solution || '-'}
+
담당부서: ${getDepartmentText(issue.responsible_department) || '-'}
+
담당자: ${issue.responsible_person || '-'}
+
원인부서: ${getDepartmentText(issue.cause_department) || '-'}
+
관리 코멘트: ${issue.management_comment || '-'}
+
+
+ + +
+

+ + 완료 정보 +

+
+ +
+ + ${issue.completion_photo_path ? + (issue.completion_photo_path.toLowerCase().endsWith('.heic') ? + `
+
+ +
+ HEIC 다운로드 +
` : + `
+ 완료 사진 +
` + ) : + '

완료 사진 없음

' + } +
+ +
+ +

${issue.completion_comment || '코멘트 없음'}

+
+ + ${issue.completion_requested_at ? ` +
+ +

${new Date(issue.completion_requested_at).toLocaleString('ko-KR')}

+
+ ` : ''} +
+
+
+ + +
+

+ + 업로드 사진 +

+
+ ${issue.photo_path ? `업로드 사진 1` : '
사진 없음
'} + ${issue.photo_path2 ? `업로드 사진 2` : '
사진 없음
'} +
+
+
`; } @@ -988,51 +1069,10 @@ } } - // 테이블 헤더 생성 함수 + // 테이블 헤더 생성 함수 (더 이상 사용하지 않음 - 모든 탭이 카드 형식으로 변경됨) function createTableHeader() { - if (currentTab === 'in_progress') { - // 진행 중 탭 헤더 - return ` - - - No. -
- - - 프로젝트 - 내용 - 원인 - 해결방안 - 담당부서 - 담당자 - 조치예상일 - 완료 확인 - 업로드 사진 - 작업 - `; - } else { - // 완료됨 탭 헤더 - return ` - - - No. -
- - - 프로젝트 - 내용 - 원인 - 해결방안 - 담당부서 - 담당자 - 조치예상일 - 확인자 - 원인부서 - 의견 - 업로드 사진 - 완료 사진 - `; - } + // 레거시 함수 - 더 이상 사용되지 않음 + return ''; } // 편집 가능한 필드 생성 함수 @@ -1076,6 +1116,18 @@ ]; } + // 부서 코드를 한글로 변환 + function getDepartmentText(departmentCode) { + const departments = { + 'production': '생산', + 'quality': '품질', + 'purchasing': '구매', + 'design': '설계', + 'sales': '영업' + }; + return departments[departmentCode] || departmentCode; + } + // 날짜 그룹 토글 함수 function toggleDateGroup(groupId) { const content = document.getElementById(groupId);