From 81699a027029ec1524fcc89a6410e0b3d92cbb7d Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Sun, 26 Oct 2025 11:50:54 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=B6=80=EC=A0=81=ED=95=A9=EB=AA=85?=
 =?UTF-8?q?=EA=B3=BC=20=EC=83=81=EC=84=B8=20=EB=82=B4=EC=9A=A9=20UI=20?=
 =?UTF-8?q?=EC=B0=A8=EB=B3=84=ED=99=94=EB=A1=9C=20=EA=B0=80=EB=8F=85?=
 =?UTF-8?q?=EC=84=B1=20=ED=96=A5=EC=83=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎨 부적합명 강조 디자인:
- 파란색 배경 박스 (bg-blue-50)
- 왼쪽 파란색 보더 (border-l-4 border-blue-400)
- 진한 파란색 텍스트 (text-blue-900)
- 볼드 폰트로 중요도 강조

📝 상세 내용 보조 디자인:
- 회색 배경 (bg-gray-50)
- 얇은 회색 테두리 (border border-gray-200)
- 회색 이탤릭 텍스트 (text-gray-600 italic)
- 아이콘과 라벨로 구분 명확화

💡 시각적 계층 구조:
1️⃣ 부적합명: 눈에 띄는 파란색 강조 박스
2️⃣ 상세 내용: 차분한 회색 보조 정보

🔧 적용 범위:
- 현황판 카드 레이아웃
- 관리함 진행중 카드 레이아웃
- 일관된 디자인 언어 적용

Expected Result:
✅ 부적합명이 즉시 눈에 들어옴
✅ 상세 내용과 명확한 구분
✅ 정보 우선순위가 시각적으로 명확
✅ 전체적인 가독성 향상
---
 frontend/issues-dashboard.html  | 13 +++++++++----
 frontend/issues-management.html | 15 +++++++++++----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/frontend/issues-dashboard.html b/frontend/issues-dashboard.html
index e91c54b..98c5a13 100644
--- a/frontend/issues-dashboard.html
+++ b/frontend/issues-dashboard.html
@@ -550,7 +550,9 @@
                                     ${getCategoryText(issue.final_category || issue.category)}
                                 </span>
                             </div>
-                            <h3 class="text-lg font-semibold text-gray-900">${getIssueTitle(issue)}</h3>
+                            <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>' : ''}
@@ -566,9 +568,12 @@
                     <div class="grid grid-cols-2 gap-3 text-sm">
                         <!-- 첫 번째 행 -->
                         <div>
-                            <span class="text-gray-600 font-medium">상세 내용</span>
-                            <div class="mt-2 bg-gray-50 rounded-lg p-3 border-l-4 border-blue-200">
-                                <div class="text-gray-700 text-sm leading-relaxed">
+                            <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="text-gray-600 text-sm leading-relaxed italic">
                                     ${getIssueDetail(issue)}
                                 </div>
                             </div>
diff --git a/frontend/issues-management.html b/frontend/issues-management.html
index d35dcbe..b36877d 100644
--- a/frontend/issues-management.html
+++ b/frontend/issues-management.html
@@ -720,7 +720,9 @@
                                 </div>
                                 <span class="text-sm text-gray-600">${project ? project.project_name : '프로젝트 미지정'}</span>
                             </div>
-                            <h3 class="text-lg font-semibold text-gray-900">${getIssueTitle(issue)}</h3>
+                            <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 space-x-2">
                             <button onclick="saveIssueChanges(${issue.id})" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
@@ -737,9 +739,14 @@
                         <!-- 왼쪽: 기본 정보 -->
                         <div class="space-y-4">
                             <div>
-                                <label class="block text-sm font-medium text-gray-700 mb-2">상세 내용</label>
-                                <div class="p-3 bg-gray-50 rounded-lg text-gray-800 min-h-[80px]">
-                                    ${getIssueDetail(issue)}
+                                <div class="flex items-center mb-2">
+                                    <i class="fas fa-align-left text-gray-500 mr-2"></i>
+                                    <label class="text-sm font-medium text-gray-700">상세 내용</label>
+                                </div>
+                                <div class="p-3 bg-gray-50 rounded-lg border border-gray-200 min-h-[80px]">
+                                    <div class="text-gray-600 text-sm leading-relaxed italic">
+                                        ${getIssueDetail(issue)}
+                                    </div>
                                 </div>
                             </div>