From b45cfd96bc1f4dbb9ee17982e5157c7e5fb35f0b Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Sun, 26 Oct 2025 11:25:08 +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=8B=A4=EC=9A=A9?=
 =?UTF-8?q?=EC=84=B1=EA=B3=BC=20=EB=AF=B8=EA=B4=80=20=ED=96=A5=EC=83=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎨 현황판 카드 레이아웃 개선사항:

1️⃣ 헤더 레이아웃 재구성:
- ❌ 단순한 좌우 배치 → ✅ 좌측: No. + 원인분류 태그, 우측: 긴급 + 진행중 상태
- 원인분류를 No. 옆으로 이동하여 한눈에 파악 가능
- 진행중 상태를 우측 상단으로 이동하여 시각적 균형 개선

2️⃣ 이미지 미리보기 기능 추가:
- ❌ 아이콘만 표시 → ✅ 실제 이미지 미리보기
- 크기 확대: 16x16px → 20x20px (25% 증가)
- 실제 이미지 로드 실패시 fallback 아이콘 표시
- object-cover로 이미지 비율 유지하며 완전 채움

3️⃣ 레이아웃 최적화:
- 불필요한 '원인 분류' 섹션 삭제 (헤더로 이동)
- 하단 '진행 중' 상태 표시 제거 (헤더로 이동)
- 해결방안을 col-span-2로 확장하여 공간 효율성 증대
- 전체적으로 더 깔끔하고 정보 밀도 높은 레이아웃

4️⃣ 시각적 개선:
- 이미지 hover 효과: 그림자 + 확대 애니메이션
- 상태 표시 아이콘 추가 (시계 아이콘)
- 그라데이션과 그림자 효과로 현대적 느낌
- 정보 계층 구조 명확화

🎯 사용성 개선 효과:
- 이미지 내용을 바로 확인 가능 (클릭 전 미리보기)
- 중요 정보(No., 원인분류, 상태)가 상단에 집중
- 공간 활용도 증가로 더 많은 정보 표시
- 시각적 노이즈 감소로 가독성 향상

🔧 기술적 개선:
- img 태그 onerror 핸들링으로 안정성 확보
- CSS object-cover로 이미지 왜곡 방지
- 반응형 레이아웃 유지
- 접근성 개선 (alt 텍스트 추가)

Expected Result:
✅ 실제 이미지 미리보기로 내용 파악 용이
✅ 정보 배치 최적화로 스캔 효율성 증대
✅ 깔끔하고 현대적인 카드 디자인
✅ 공간 효율성과 정보 밀도 향상
---
 frontend/issues-dashboard.html | 76 ++++++++++++++++++++--------------
 1 file changed, 44 insertions(+), 32 deletions(-)

diff --git a/frontend/issues-dashboard.html b/frontend/issues-dashboard.html
index e8d237b..72cd989 100644
--- a/frontend/issues-dashboard.html
+++ b/frontend/issues-dashboard.html
@@ -158,7 +158,10 @@
                 <div class="dashboard-card text-white p-6 rounded-xl">
                     <div class="flex items-center justify-between">
                         <div>
-                            <p class="text-blue-100 text-sm">전체 진행 중</p>
+                            <p class="text-blue-100 text-sm flex items-center space-x-1">
+                                <span>전체 진행 중</span>
+                                <div class="w-1.5 h-1.5 bg-blue-200 rounded-full animate-pulse"></div>
+                            </p>
                             <p class="text-3xl font-bold" id="totalInProgress">0</p>
                         </div>
                         <i class="fas fa-tasks text-4xl text-blue-200"></i>
@@ -168,7 +171,10 @@
                 <div class="bg-gradient-to-br from-green-400 to-green-600 text-white p-6 rounded-xl dashboard-card">
                     <div class="flex items-center justify-between">
                         <div>
-                            <p class="text-green-100 text-sm">오늘 신규</p>
+                            <p class="text-green-100 text-sm flex items-center space-x-1">
+                                <span>오늘 신규</span>
+                                <div class="w-1.5 h-1.5 bg-green-200 rounded-full animate-pulse"></div>
+                            </p>
                             <p class="text-3xl font-bold" id="todayNew">0</p>
                         </div>
                         <i class="fas fa-plus-circle text-4xl text-green-200"></i>
@@ -178,7 +184,10 @@
                 <div class="bg-gradient-to-br from-yellow-400 to-orange-500 text-white p-6 rounded-xl dashboard-card">
                     <div class="flex items-center justify-between">
                         <div>
-                            <p class="text-yellow-100 text-sm">지연 위험</p>
+                            <p class="text-yellow-100 text-sm flex items-center space-x-1">
+                                <span>지연 위험</span>
+                                <div class="w-1.5 h-1.5 bg-yellow-200 rounded-full animate-pulse"></div>
+                            </p>
                             <p class="text-3xl font-bold" id="delayRisk">0</p>
                         </div>
                         <i class="fas fa-exclamation-triangle text-4xl text-yellow-200"></i>
@@ -188,7 +197,10 @@
                 <div class="bg-gradient-to-br from-purple-400 to-purple-600 text-white p-6 rounded-xl dashboard-card">
                     <div class="flex items-center justify-between">
                         <div>
-                            <p class="text-purple-100 text-sm">활성 프로젝트</p>
+                            <p class="text-purple-100 text-sm flex items-center space-x-1">
+                                <span>활성 프로젝트</span>
+                                <div class="w-1.5 h-1.5 bg-purple-200 rounded-full animate-pulse"></div>
+                            </p>
                             <p class="text-3xl font-bold" id="activeProjects">0</p>
                         </div>
                         <i class="fas fa-project-diagram text-4xl text-purple-200"></i>
@@ -513,12 +525,23 @@
             return `
                 <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-center mb-4">
+                    <div class="flex justify-between items-start mb-4">
                         <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"></div>
+                            <div class="w-2 h-2 bg-blue-500 rounded-full animate-pulse shadow-sm"></div>
+                            <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="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>
-                        ${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>
 
                     <!-- 2x3 그리드 -->
@@ -545,22 +568,28 @@
                             <span class="text-gray-600 font-medium">이미지</span>
                             <div class="flex space-x-2 mt-2">
                                 ${issue.photo_path ? `
-                                    <div class="relative w-16 h-16 bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg border-2 border-blue-200 flex items-center justify-center cursor-pointer hover:shadow-lg hover:scale-105 transition-all duration-200" onclick="openPhotoModal('${issue.photo_path}')">
-                                        <i class="fas fa-image text-blue-500 text-lg"></i>
+                                    <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}')">
+                                        <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>
+                                        </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-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">
+                                    <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>
                                 `}
                                 ${issue.photo_path2 ? `
-                                    <div class="relative w-16 h-16 bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg border-2 border-blue-200 flex items-center justify-center cursor-pointer hover:shadow-lg hover:scale-105 transition-all duration-200" onclick="openPhotoModal('${issue.photo_path2}')">
-                                        <i class="fas fa-image text-blue-500 text-lg"></i>
+                                    <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}')">
+                                        <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>
+                                        </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-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">
+                                    <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>
                                 `}
@@ -580,30 +609,13 @@
                         </div>
 
                         <!-- 세 번째 행 -->
-                        <div>
-                            <span class="text-gray-600 font-medium">원인 분류</span>
-                            <div class="mt-2">
-                                <span class="inline-flex items-center bg-gradient-to-r from-yellow-400 to-orange-400 text-white px-3 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>
-                        <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-2 min-h-[2.5rem] flex items-center">
+                            <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>
                         </div>
                     </div>
-
-                    <!-- 상태 -->
-                    <div class="flex items-center justify-center mt-4 pt-4 border-t border-gray-100">
-                        <div class="flex items-center space-x-2 bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-2 rounded-full border border-blue-200">
-                            <div class="w-2 h-2 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full animate-pulse"></div>
-                            <span class="text-sm font-semibold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">진행 중</span>
-                        </div>
-                    </div>
                 </div>
             `;
         }