feat: 관리함 페이지 No. 표시 UI 대폭 개선

🎨 관리함 UI 개선사항:

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

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

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

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

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

Expected Result:
 관리함에서 No.1, No.2... 가 세련되게 표시
 상태별 색상 구분으로 직관적 인식
 전체적으로 통일된 브랜드 경험
This commit is contained in:
Hyungi Ahn
2025-10-26 11:21:15 +09:00
parent 54032f6685
commit e059d3feec

View File

@@ -684,7 +684,10 @@
<!-- 카드 헤더 --> <!-- 카드 헤더 -->
<div class="flex items-center justify-between mb-4"> <div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-3"> <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> <h3 class="text-lg font-semibold text-gray-900">${project ? project.project_name : '프로젝트 미지정'}</h3>
</div> </div>
<div class="flex space-x-2"> <div class="flex space-x-2">
@@ -783,7 +786,12 @@
function createCompletedRow(issue, project) { function createCompletedRow(issue, project) {
return ` return `
<tr data-issue-id="${issue.id}" class="cursor-pointer hover:bg-blue-50" onclick="openIssueDetailModal(${issue.id})"> <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-project">${project ? project.project_name : '-'}</td>
<td class="col-content">${getStatusIcon(issue.final_description || issue.description)}</td> <td class="col-content">${getStatusIcon(issue.final_description || issue.description)}</td>
<td class="col-cause">${getStatusIcon(getCategoryText(issue.final_category || issue.category))}</td> <td class="col-cause">${getStatusIcon(getCategoryText(issue.final_category || issue.category))}</td>
@@ -824,7 +832,12 @@
if (currentTab === 'in_progress') { if (currentTab === 'in_progress') {
// 진행 중 탭 헤더 // 진행 중 탭 헤더
return ` 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-project">프로젝트</th>
<th class="col-content">내용</th> <th class="col-content">내용</th>
<th class="col-cause">원인</th> <th class="col-cause">원인</th>
@@ -839,7 +852,12 @@
} else { } else {
// 완료됨 탭 헤더 // 완료됨 탭 헤더
return ` 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-project">프로젝트</th>
<th class="col-content">내용</th> <th class="col-content">내용</th>
<th class="col-cause">원인</th> <th class="col-cause">원인</th>
@@ -1108,7 +1126,14 @@
const project = projects.find(p => p.id === issue.project_id); 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'); const modalContent = document.getElementById('modalContent');