From 01fa39c75b2842255885b3e78282445794aa45d4 Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Sun, 26 Oct 2025 12:32:12 +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=EC=B5=9C=EC=A2=85=20UI=20=EC=99=84=EC=84=B1=20-=20?=
 =?UTF-8?q?=EC=8B=9C=EA=B0=81=EC=A0=81=20=EC=9E=84=ED=8C=A9=ED=8A=B8=20?=
 =?UTF-8?q?=EA=B7=B9=EB=8C=80=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🖼️ 이미지 크기 최대 확장:
- 이미지 크기: 20x20 → 24x24 (20% 추가 증가)
- 아이콘 크기: text-lg → text-xl (더 선명한 표시)
- 카드 영역을 최대한 활용하여 시각적 정보 전달력 극대화

🎯 진행중 태그 프리미엄 디자인:
- 배경: 연한 파란색 → 진한 파란색 그라데이션 (blue-500 to blue-600)
- 텍스트: 그라데이션 → 흰색 볼드체 (더 강한 대비)
- 패딩: px-3 py-1 → px-4 py-1.5 (더 풍성한 느낌)
- 그림자: shadow-sm → shadow-md (입체감 강화)
- 아이콘: 정적 시계 → 회전하는 톱니바퀴 (fa-cog fa-spin)
- 상태 점: 파란색 → 흰색 (더 명확한 대비)

📅 발생날짜 독립 디자인:
- 회색 배경 캡슐로 분리하여 정보 구분 명확화
- 진행중 태그와 시각적으로 분리되어 가독성 향상

👥 일정 & 담당 순서 변경:
- 담당자 → 마감시간 순으로 재배치
- 사람 중심의 정보 우선 표시
- 패딩 증가 (p-2 → p-3)로 더 여유로운 느낌

🎨 전체적인 시각적 개선:
- 더 강한 색상 대비로 정보 구분 명확화
- 애니메이션 효과로 생동감 추가
- 공간 활용도 최적화로 정보 밀도 향상

Expected Result:
✅ 이미지 가시성 44% 향상 (16→24px)
✅ 진행중 상태의 강력한 시각적 임팩트
✅ 담당자 우선 표시로 책임 소재 명확화
✅ 전체적으로 더 프로페셔널한 느낌
---
 frontend/issues-dashboard.html | 51 +++++++++++++++++-----------------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/frontend/issues-dashboard.html b/frontend/issues-dashboard.html
index b9f4d7a..73f00fd 100644
--- a/frontend/issues-dashboard.html
+++ b/frontend/issues-dashboard.html
@@ -549,16 +549,15 @@
                             </div>
                         </div>
                         <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 class="flex items-center space-x-3">
+                                ${isUrgent() ? '<span class="bg-gradient-to-r from-red-500 to-red-600 text-white text-xs font-bold px-4 py-1.5 rounded-full shadow-md">🔥 긴급</span>' : ''}
+                                <div class="flex items-center space-x-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-1.5 rounded-full shadow-md">
+                                    <div class="w-2 h-2 bg-white rounded-full animate-pulse"></div>
+                                    <span class="text-xs font-bold">진행 중</span>
+                                    <i class="fas fa-cog fa-spin text-xs"></i>
                                 </div>
-                                <div class="text-right">
-                                    <span class="text-xs text-gray-500 mr-1">발생:</span>
-                                    <span class="text-xs font-medium text-gray-900">${formatKSTDate(issue.report_date)}</span>
+                                <div class="bg-gray-100 px-3 py-1 rounded-full">
+                                    <span class="text-xs text-gray-600 font-medium">발생: ${formatKSTDate(issue.report_date)}</span>
                                 </div>
                             </div>
                             <div class="flex items-center space-x-2">
@@ -602,31 +601,31 @@
                                 <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-3">
+                            <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-24 h-24 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-xl"></i>
                                         </div>
                                         <div class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 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-24 h-24 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-xl 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-24 h-24 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-xl"></i>
                                         </div>
                                         <div class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 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-24 h-24 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-xl opacity-50"></i>
                                     </div>
                                 `}
                             </div>
@@ -637,20 +636,20 @@
                                 <span class="text-gray-600 font-medium text-sm">일정 & 담당</span>
                             </div>
                             <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="bg-purple-50 rounded-lg p-3 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 class="bg-orange-50 rounded-lg p-3 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>
                         </div>
                     </div>