hyungi/M-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
🎨 관리함 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
1 changed files with 30 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/issues-management.html
View File

@@ -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');