From f373a16086744fb7120a3d96e35165757daf2da1 Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Sun, 26 Oct 2025 11:03: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=94=94=EC=9E=90=EC=9D=B8=EC=9D=84=20=EC=84=B8?=
 =?UTF-8?q?=EB=A0=A8=EB=90=9C=20=EB=AA=A8=EB=8D=98=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=EB=A1=9C=20=EB=8C=80=ED=8F=AD=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎨 Modern Card Design:
- ❌ 촌스러운 작은 이미지 → ✅ 세련된 큰 이미지 (16x16px)
- 그라데이션 배경과 테두리로 고급스러운 느낌
- 이미지 있을 때 초록색 상태 점 표시

🖼️ Enhanced Image Display:
- 크기: 8x8px → 16x16px (2배 확대)
- 그라데이션 배경 (파란색 계열)
- hover 효과: 그림자 + 확대 애니메이션
- 상태 표시: 우상단 초록색 점으로 이미지 존재 표시

🎯 Visual Improvements:
- No. 텍스트: 그라데이션 텍스트 효과
- 긴급 배지: 🔥 이모지 + 그라데이션 배경
- 원인 분류: 태그 아이콘 + 노란-주황 그라데이션
- 해결방안: 회색 배경 박스로 구분
- 진행 중 상태: 파란색 그라데이션 배경 + 테두리

🚀 Advanced Hover Effects:
- 카드 전체: 위로 이동 + 살짝 확대
- 고급 그림자 효과 (3단계 레이어)
- 파란색 글로우 효과
- 부드러운 cubic-bezier 애니메이션

🎨 Color Scheme:
- 배경: 미묘한 그라데이션 (흰색 → 연한 회색)
- 이미지: 파란색 계열 그라데이션
- 원인분류: 노란-주황 그라데이션
- 상태: 파란-인디고 그라데이션

Expected Result:
✅ 훨씬 세련되고 모던한 디자인
✅ 이미지 가독성 대폭 향상
✅ 고급스러운 hover 애니메이션
✅ 직관적인 시각적 피드백
---
 frontend/issues-dashboard.html | 62 +++++++++++++++++++++-------------
 1 file changed, 38 insertions(+), 24 deletions(-)

diff --git a/frontend/issues-dashboard.html b/frontend/issues-dashboard.html
index 9c38845..7f47c3a 100644
--- a/frontend/issues-dashboard.html
+++ b/frontend/issues-dashboard.html
@@ -27,16 +27,20 @@
             box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
         }
         
-        /* 이슈 카드 스타일 (관리함 진행 중 스타일) */
+        /* 이슈 카드 스타일 (세련된 모던 스타일) */
         .issue-card {
-            transition: all 0.3s ease;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             border-left: 4px solid transparent;
+            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
         }
         
         .issue-card:hover {
-            transform: translateY(-4px);
+            transform: translateY(-8px) scale(1.02);
             border-left-color: #3b82f6;
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            box-shadow: 
+                0 25px 50px -12px rgba(0, 0, 0, 0.15),
+                0 0 0 1px rgba(59, 130, 246, 0.1),
+                0 0 20px rgba(59, 130, 246, 0.1);
         }
         
         .issue-card label {
@@ -507,11 +511,14 @@
             };
 
             return `
-                <div class="issue-card bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md transition-all duration-200">
+                <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-3">
-                        <span class="text-lg font-bold text-blue-600">No.${issue.project_sequence_no || '-'}</span>
-                        ${isUrgent() ? '<span class="bg-red-100 text-red-800 text-xs font-medium px-2 py-1 rounded">긴급</span>' : ''}
+                    <div class="flex justify-between items-center 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>
+                        ${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 그리드 -->
@@ -529,23 +536,25 @@
                         <!-- 두 번째 행 -->
                         <div>
                             <span class="text-gray-600 font-medium">이미지</span>
-                            <div class="flex space-x-1 mt-1">
+                            <div class="flex space-x-2 mt-2">
                                 ${issue.photo_path ? `
-                                    <div class="w-8 h-8 bg-gray-100 rounded border flex items-center justify-center cursor-pointer hover:bg-gray-200 transition-colors" onclick="openPhotoModal('${issue.photo_path}')">
-                                        <i class="fas fa-image text-gray-400 text-xs"></i>
+                                    <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="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
                                     </div>
                                 ` : `
-                                    <div class="w-8 h-8 bg-gray-100 rounded border flex items-center justify-center">
-                                        <i class="fas fa-image text-gray-300 text-xs"></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-lg opacity-50"></i>
                                     </div>
                                 `}
                                 ${issue.photo_path2 ? `
-                                    <div class="w-8 h-8 bg-gray-100 rounded border flex items-center justify-center cursor-pointer hover:bg-gray-200 transition-colors" onclick="openPhotoModal('${issue.photo_path2}')">
-                                        <i class="fas fa-image text-gray-400 text-xs"></i>
+                                    <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="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
                                     </div>
                                 ` : `
-                                    <div class="w-8 h-8 bg-gray-100 rounded border flex items-center justify-center">
-                                        <i class="fas fa-image text-gray-300 text-xs"></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-lg opacity-50"></i>
                                     </div>
                                 `}
                             </div>
@@ -561,21 +570,26 @@
                         <!-- 세 번째 행 -->
                         <div>
                             <span class="text-gray-600 font-medium">원인 분류</span>
-                            <div class="mt-1">
-                                <span class="inline-block bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs">${getCategoryText(issue.final_category || issue.category)}</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>
                             <span class="text-gray-600 font-medium">해결 방안</span>
-                            <div class="text-gray-900 mt-1">${issue.solution || '-'}</div>
+                            <div class="text-gray-900 mt-1 bg-gray-50 rounded-lg p-2 min-h-[2.5rem] flex items-center">
+                                ${issue.solution || '<span class="text-gray-400 italic">미정</span>'}
+                            </div>
                         </div>
                     </div>
 
                     <!-- 상태 -->
-                    <div class="flex items-center justify-center mt-3 pt-3 border-t">
-                        <div class="flex items-center space-x-2">
-                            <div class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
-                            <span class="text-sm font-medium text-blue-600">진행 중</span>
+                    <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>