From e059d3feec606aee68c3d4e843770fbafe5988eb Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Sun, 26 Oct 2025 11:21:15 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B4=80=EB=A6=AC=ED=95=A8=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20No.=20=ED=91=9C=EC=8B=9C=20UI=20=EB=8C=80?=
 =?UTF-8?q?=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

🎨 관리함 UI 개선사항:

1️⃣ 진행중 카드 헤더:
- ❌ 단순한 파란색 배지 → ✅ 그라데이션 텍스트 + 애니메이션 점
- 현황판과 동일한 세련된 스타일 적용

2️⃣ 완료됨 테이블 No. 셀:
- ❌ 단순한 텍스트 → ✅ 녹색 그라데이션 + 상태 점
- 완료 상태를 시각적으로 강조

3️⃣ 테이블 헤더 개선:
- 진행중: 파란색 그라데이션 + 애니메이션 점
- 완료됨: 녹색 그라데이션 + 상태 점
- 각 탭의 성격에 맞는 색상 구분

4️⃣ 모달 제목 개선:
- ❌ 단순한 텍스트 → ✅ 그라데이션 No. + 상태 점
- '부적합 No.1 상세 정보' 형태로 시각적 강조

🎯 시각적 개선 효과:
- 프로젝트별 순번이 더욱 눈에 띄게 표시
- 진행중(파란색) vs 완료됨(녹색) 상태 구분
- 현황판과 일관된 디자인 언어
- 애니메이션 효과로 생동감 추가

Expected Result:
✅ 관리함에서 No.1, No.2... 가 세련되게 표시
✅ 상태별 색상 구분으로 직관적 인식
✅ 전체적으로 통일된 브랜드 경험
---
 frontend/issues-management.html | 35 ++++++++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/frontend/issues-management.html b/frontend/issues-management.html
index a4c4a6a..aa22894 100644
--- a/frontend/issues-management.html
+++ b/frontend/issues-management.html
@@ -684,7 +684,10 @@
                     <!-- 카드 헤더 -->
                     <div class="flex items-center justify-between mb-4">
                         <div class="flex items-center space-x-3">
-                            <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">No.${issue.project_sequence_no || '-'}</span>
+                            <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>
                             <h3 class="text-lg font-semibold text-gray-900">${project ? project.project_name : '프로젝트 미지정'}</h3>
                         </div>
                         <div class="flex space-x-2">
@@ -783,7 +786,12 @@
         function createCompletedRow(issue, project) {
             return `
                 <tr data-issue-id="${issue.id}" class="cursor-pointer hover:bg-blue-50" onclick="openIssueDetailModal(${issue.id})">
-                    <td class="col-no font-medium">${issue.project_sequence_no || '-'}</td>
+                    <td class="col-no font-medium">
+                        <span class="inline-flex items-center space-x-1">
+                            <span class="text-lg font-bold bg-gradient-to-r from-green-600 to-green-800 bg-clip-text text-transparent">No.${issue.project_sequence_no || '-'}</span>
+                            <div class="w-1.5 h-1.5 bg-green-500 rounded-full"></div>
+                        </span>
+                    </td>
                     <td class="col-project">${project ? project.project_name : '-'}</td>
                     <td class="col-content">${getStatusIcon(issue.final_description || issue.description)}</td>
                     <td class="col-cause">${getStatusIcon(getCategoryText(issue.final_category || issue.category))}</td>
@@ -824,7 +832,12 @@
             if (currentTab === 'in_progress') {
                 // 진행 중 탭 헤더
                 return `
-                    <th class="col-no">No.</th>
+                    <th class="col-no">
+                        <span class="inline-flex items-center space-x-1">
+                            <span class="font-bold bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent">No.</span>
+                            <div class="w-1.5 h-1.5 bg-blue-500 rounded-full"></div>
+                        </span>
+                    </th>
                     <th class="col-project">프로젝트</th>
                     <th class="col-content">내용</th>
                     <th class="col-cause">원인</th>
@@ -839,7 +852,12 @@
             } else {
                 // 완료됨 탭 헤더
                 return `
-                    <th class="col-no">No.</th>
+                    <th class="col-no">
+                        <span class="inline-flex items-center space-x-1">
+                            <span class="font-bold bg-gradient-to-r from-green-600 to-green-800 bg-clip-text text-transparent">No.</span>
+                            <div class="w-1.5 h-1.5 bg-green-500 rounded-full"></div>
+                        </span>
+                    </th>
                     <th class="col-project">프로젝트</th>
                     <th class="col-content">내용</th>
                     <th class="col-cause">원인</th>
@@ -1108,7 +1126,14 @@
             const project = projects.find(p => p.id === issue.project_id);
             
             // 모달 제목 설정
-            document.getElementById('modalTitle').textContent = `부적합 No.${issue.project_sequence_no} 상세 정보`;
+            document.getElementById('modalTitle').innerHTML = `
+                <span class="inline-flex items-center space-x-2">
+                    <span>부적합</span>
+                    <span class="text-xl font-bold bg-gradient-to-r from-green-600 to-green-800 bg-clip-text text-transparent">No.${issue.project_sequence_no || '-'}</span>
+                    <div class="w-2 h-2 bg-green-500 rounded-full"></div>
+                    <span>상세 정보</span>
+                </span>
+            `;
             
             // 모달 내용 생성
             const modalContent = document.getElementById('modalContent');