From ae45b6f05145c1c8e17aef2f6e36709f381371a4 Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Sun, 26 Oct 2025 11:55:20 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=98=84=ED=99=A9=ED=8C=90=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EB=8C=80?=
 =?UTF-8?q?=ED=8F=AD=20=EA=B0=9C=EC=84=A0=20-=20=EC=A0=95=EB=B3=B4=20?=
 =?UTF-8?q?=EB=B0=B0=EC=B9=98=20=EC=B5=9C=EC=A0=81=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎨 헤더 레이아웃 재구성:
- 원인 태그를 오른쪽으로 이동하여 균형감 향상
- 발생 날짜를 오른쪽 상단에 배치하여 시간 정보 강조
- 카테고리 한글 표시 (자재 누락, 설계 오류, 반입 불량, 검사 누락, 기타)

📊 콘텐츠 영역 2x2 그리드 재구성:
- 상세 내용 | 해결 방안 (상단 나란히 배치)
- 이미지 | 일정 & 담당 (하단 배치)

🎯 해결 방안 섹션 강화:
- 녹색 테마로 해결책 강조 (bg-green-50, border-green-200)
- 전구 아이콘으로 아이디어 시각화
- 상세 내용과 동등한 비중으로 배치

💼 일정 & 담당 UI 개선:
- 마감시간: 오렌지 테마 카드 (긴급성 표현)
- 담당자: 보라색 테마 카드 (책임감 표현)
- 각각 아이콘과 색상으로 구분
- 컴팩트한 카드 형태로 가독성 향상

🖼️ 이미지 섹션 최적화:
- 크기를 16x16으로 조정하여 공간 효율성 증대
- 상태 표시 점 크기 축소로 깔끔함 유지

🏷️ 카테고리 태그 개선:
- 영어 → 한글 표시로 직관성 향상
- 오른쪽 배치로 시각적 균형 개선

Expected Result:
✅ 정보 우선순위에 따른 배치 최적화
✅ 상세 내용과 해결 방안의 동등한 비중
✅ 색상 코딩으로 정보 구분 명확화
✅ 컴팩트하면서도 가독성 높은 레이아웃
---
 frontend/issues-dashboard.html | 122 +++++++++++++++++++--------------
 1 file changed, 70 insertions(+), 52 deletions(-)

diff --git a/frontend/issues-dashboard.html b/frontend/issues-dashboard.html
index 98c5a13..886ea4a 100644
--- a/frontend/issues-dashboard.html
+++ b/frontend/issues-dashboard.html
@@ -505,12 +505,10 @@
             // 카테고리 텍스트 변환
             const getCategoryText = (category) => {
                 const categoryMap = {
-                    'quality': '품질',
-                    'safety': '안전',
-                    'environment': '환경',
-                    'process': '공정',
-                    'equipment': '장비',
-                    'material': '자재',
+                    'material_missing': '자재 누락',
+                    'design_error': '설계 오류', 
+                    'incoming_defect': '반입 불량',
+                    'inspection_miss': '검사 누락',
                     'etc': '기타'
                 };
                 return category ? categoryMap[category] || category : '-';
@@ -540,99 +538,119 @@
                 <div class="issue-card bg-white rounded-xl border border-gray-200 p-5 hover:shadow-xl hover:border-blue-300 transition-all duration-300 transform hover:-translate-y-1">
                     <!-- 헤더 -->
                     <div class="flex justify-between items-start mb-4">
-                        <div class="flex flex-col space-y-2">
+                        <div class="flex flex-col space-y-2 flex-1">
                             <div class="flex items-center space-x-2">
                                 <span class="text-xl font-bold bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent">No.${issue.project_sequence_no || '-'}</span>
                                 <div class="w-2 h-2 bg-blue-500 rounded-full animate-pulse shadow-sm"></div>
                                 <span class="text-sm text-gray-600">${projectName}</span>
-                                <span class="inline-flex items-center bg-gradient-to-r from-yellow-400 to-orange-400 text-white px-2 py-1 rounded-full text-xs font-medium shadow-sm">
-                                    <i class="fas fa-tag mr-1"></i>
-                                    ${getCategoryText(issue.final_category || issue.category)}
-                                </span>
                             </div>
                             <div class="bg-blue-50 px-3 py-2 rounded-lg border-l-4 border-blue-400">
                                 <h3 class="text-lg font-bold text-blue-900">${getIssueTitle(issue)}</h3>
                             </div>
                         </div>
-                        <div class="flex items-center space-x-2">
-                            ${isUrgent() ? '<span class="bg-gradient-to-r from-red-500 to-red-600 text-white text-xs font-medium px-3 py-1 rounded-full shadow-sm">🔥 긴급</span>' : ''}
-                            <div class="flex items-center space-x-1 bg-gradient-to-r from-blue-50 to-blue-100 px-3 py-1 rounded-full border border-blue-200 shadow-sm">
-                                <div class="w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse"></div>
-                                <span class="text-xs font-semibold bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent">진행 중</span>
-                                <i class="fas fa-clock text-blue-500 text-xs"></i>
+                        <div class="flex flex-col items-end space-y-2 ml-4">
+                            <div class="flex items-center space-x-2">
+                                ${isUrgent() ? '<span class="bg-gradient-to-r from-red-500 to-red-600 text-white text-xs font-medium px-3 py-1 rounded-full shadow-sm">🔥 긴급</span>' : ''}
+                                <div class="flex items-center space-x-1 bg-gradient-to-r from-blue-50 to-blue-100 px-3 py-1 rounded-full border border-blue-200 shadow-sm">
+                                    <div class="w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse"></div>
+                                    <span class="text-xs font-semibold bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent">진행 중</span>
+                                    <i class="fas fa-clock text-blue-500 text-xs"></i>
+                                </div>
+                            </div>
+                            <div class="flex items-center space-x-2">
+                                <span class="inline-flex items-center bg-gradient-to-r from-yellow-400 to-orange-400 text-white px-2 py-1 rounded-full text-xs font-medium shadow-sm">
+                                    <i class="fas fa-tag mr-1"></i>
+                                    ${getCategoryText(issue.final_category || issue.category)}
+                                </span>
+                                <div class="text-right">
+                                    <div class="text-xs text-gray-500">발생 날짜</div>
+                                    <div class="text-sm font-medium text-gray-900">${formatKSTDate(issue.report_date)}</div>
+                                </div>
                             </div>
                         </div>
                     </div>
 
-                    <!-- 2x3 그리드 -->
-                    <div class="grid grid-cols-2 gap-3 text-sm">
-                        <!-- 첫 번째 행 -->
+                    <!-- 2x2 그리드 -->
+                    <div class="grid grid-cols-2 gap-4 text-sm">
+                        <!-- 첫 번째 행: 상세 내용 | 해결 방안 -->
                         <div>
                             <div class="flex items-center mb-2">
                                 <i class="fas fa-align-left text-gray-500 mr-2"></i>
                                 <span class="text-gray-600 font-medium text-sm">상세 내용</span>
                             </div>
-                            <div class="bg-gray-50 rounded-lg p-3 border border-gray-200">
+                            <div class="bg-gray-50 rounded-lg p-3 border border-gray-200 min-h-[80px]">
                                 <div class="text-gray-600 text-sm leading-relaxed italic">
                                     ${getIssueDetail(issue)}
                                 </div>
                             </div>
                         </div>
                         <div>
-                            <span class="text-gray-600 font-medium">발생 날짜</span>
-                            <div class="text-gray-900 mt-1">${formatKSTDate(issue.report_date)}</div>
+                            <div class="flex items-center mb-2">
+                                <i class="fas fa-lightbulb text-green-500 mr-2"></i>
+                                <span class="text-gray-600 font-medium text-sm">해결 방안</span>
+                            </div>
+                            <div class="bg-green-50 rounded-lg p-3 border border-green-200 min-h-[80px]">
+                                <div class="text-green-700 text-sm leading-relaxed">
+                                    ${issue.solution || '<span class="text-gray-400 italic">미정</span>'}
+                                </div>
+                            </div>
                         </div>
 
-                        <!-- 두 번째 행 -->
+                        <!-- 두 번째 행: 이미지 | 마감시간/담당자 -->
                         <div>
-                            <span class="text-gray-600 font-medium">이미지</span>
-                            <div class="flex space-x-2 mt-2">
+                            <div class="flex items-center mb-2">
+                                <i class="fas fa-camera text-blue-500 mr-2"></i>
+                                <span class="text-gray-600 font-medium text-sm">이미지</span>
+                            </div>
+                            <div class="flex space-x-2">
                                 ${issue.photo_path ? `
-                                    <div class="relative w-20 h-20 rounded-lg border-2 border-blue-200 overflow-hidden cursor-pointer hover:shadow-lg hover:scale-105 transition-all duration-200" onclick="openPhotoModal('${issue.photo_path}')">
+                                    <div class="relative w-16 h-16 rounded-lg border-2 border-blue-200 overflow-hidden cursor-pointer hover:shadow-lg hover:scale-105 transition-all duration-200" onclick="openPhotoModal('${issue.photo_path}')">
                                         <img src="${issue.photo_path}" alt="부적합 사진 1" class="w-full h-full object-cover" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                         <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center" style="display: none;">
-                                            <i class="fas fa-image text-blue-500 text-lg"></i>
+                                            <i class="fas fa-image text-blue-500 text-sm"></i>
                                         </div>
-                                        <div class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
+                                        <div class="absolute -top-1 -right-1 w-2 h-2 bg-green-500 rounded-full border border-white"></div>
                                     </div>
                                 ` : `
-                                    <div class="w-20 h-20 bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg border-2 border-gray-200 flex items-center justify-center">
-                                        <i class="fas fa-image text-gray-400 text-lg opacity-50"></i>
+                                    <div class="w-16 h-16 bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg border-2 border-gray-200 flex items-center justify-center">
+                                        <i class="fas fa-image text-gray-400 text-sm opacity-50"></i>
                                     </div>
                                 `}
                                 ${issue.photo_path2 ? `
-                                    <div class="relative w-20 h-20 rounded-lg border-2 border-blue-200 overflow-hidden cursor-pointer hover:shadow-lg hover:scale-105 transition-all duration-200" onclick="openPhotoModal('${issue.photo_path2}')">
+                                    <div class="relative w-16 h-16 rounded-lg border-2 border-blue-200 overflow-hidden cursor-pointer hover:shadow-lg hover:scale-105 transition-all duration-200" onclick="openPhotoModal('${issue.photo_path2}')">
                                         <img src="${issue.photo_path2}" alt="부적합 사진 2" class="w-full h-full object-cover" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                         <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center" style="display: none;">
-                                            <i class="fas fa-image text-blue-500 text-lg"></i>
+                                            <i class="fas fa-image text-blue-500 text-sm"></i>
                                         </div>
-                                        <div class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
+                                        <div class="absolute -top-1 -right-1 w-2 h-2 bg-green-500 rounded-full border border-white"></div>
                                     </div>
                                 ` : `
-                                    <div class="w-20 h-20 bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg border-2 border-gray-200 flex items-center justify-center">
-                                        <i class="fas fa-image text-gray-400 text-lg opacity-50"></i>
+                                    <div class="w-16 h-16 bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg border-2 border-gray-200 flex items-center justify-center">
+                                        <i class="fas fa-image text-gray-400 text-sm opacity-50"></i>
                                     </div>
                                 `}
                             </div>
                         </div>
                         <div>
-                            <div class="space-y-2">
-                                <div>
-                                    <span class="text-gray-500 text-xs">마감시간:</span>
-                                    <div class="text-gray-900 font-medium">${formatKSTDate(issue.expected_completion_date)}</div>
-                                </div>
-                                <div>
-                                    <span class="text-gray-500 text-xs">담당자:</span>
-                                    <div class="text-gray-900 font-medium">${issue.responsible_person || '-'}</div>
-                                </div>
+                            <div class="flex items-center mb-2">
+                                <i class="fas fa-user-clock text-purple-500 mr-2"></i>
+                                <span class="text-gray-600 font-medium text-sm">일정 & 담당</span>
                             </div>
-                        </div>
-
-                        <!-- 세 번째 행 -->
-                        <div class="col-span-2">
-                            <span class="text-gray-600 font-medium">해결 방안</span>
-                            <div class="text-gray-900 mt-1 bg-gray-50 rounded-lg p-3 min-h-[3rem] flex items-center">
-                                ${issue.solution || '<span class="text-gray-400 italic">미정</span>'}
+                            <div class="space-y-3">
+                                <div class="bg-orange-50 rounded-lg p-2 border border-orange-200">
+                                    <div class="flex items-center justify-between">
+                                        <span class="text-orange-600 text-xs font-medium">마감시간</span>
+                                        <i class="fas fa-calendar-alt text-orange-500 text-xs"></i>
+                                    </div>
+                                    <div class="text-orange-800 font-semibold text-sm mt-1">${formatKSTDate(issue.expected_completion_date)}</div>
+                                </div>
+                                <div class="bg-purple-50 rounded-lg p-2 border border-purple-200">
+                                    <div class="flex items-center justify-between">
+                                        <span class="text-purple-600 text-xs font-medium">담당자</span>
+                                        <i class="fas fa-user text-purple-500 text-xs"></i>
+                                    </div>
+                                    <div class="text-purple-800 font-semibold text-sm mt-1">${issue.responsible_person || '-'}</div>
+                                </div>
                             </div>
                         </div>
                     </div>