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

refactor: 관리함 통계 섹션 개선 및 불필요한 기능 제거

Browse Source 
📊 Statistics Section Redesign:
- 기존 5개 통계 카드에서 3개로 단순화
- 총 부적합 | 진행 중 | 완료됨 구조로 변경
- 프로젝트 선택 아래로 통계 섹션 이동
- 프로젝트별 필터링에 따른 동적 통계 업데이트

🗑️ Unnecessary Features Removal:
- 일괄 처리 버튼 제거 (다른 페이지에서 구현 예정)
- 엑셀 내보내기 버튼 제거 (다른 페이지에서 구현 예정)
- bulkAction, exportData 함수 제거

🎯 Enhanced User Experience:
- 프로젝트 선택 시 해당 프로젝트의 통계만 표시
- 탭 전환 시에도 통계 자동 업데이트
- 선택된 프로젝트 기준으로 정확한 카운트 제공

🔧 Technical Implementation:
- updateStatistics() 함수 추가
- filterIssues()에 통계 업데이트 로직 통합
- 프로젝트 필터와 탭 상태에 따른 조건부 카운팅
- 실시간 통계 반영으로 사용자 편의성 향상

💡 Logical Flow:
1. 프로젝트 선택 → 해당 프로젝트 통계 표시
2. 상태 탭 전환 → 선택된 프로젝트 내에서 상태별 필터링
3. 통계는 항상 선택된 프로젝트 기준으로 계산

Expected Result:
✅ 프로젝트별 정확한 통계 표시
✅ 총 부적합, 진행 중, 완료됨 3개 카드로 단순화
✅ 불필요한 버튼 제거로 깔끔한 UI
✅ 실시간 통계 업데이트로 향상된 UX
This commit is contained in:
Hyungi Ahn
2025-10-25 14:48:31 +09:00
parent 85ae1ef9e4
commit 045614dc5b
1 changed files with 67 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
frontend/issues-management.html
View File

@@ -154,66 +154,8 @@
</h1>
<p class="text-gray-600 mt-1">부적합 사항을 처리하고 상태를 관리하세요</p>
</div>
<div class="flex items-center space-x-3">
<button onclick="bulkAction()" class="px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors">
<i class="fas fa-tasks mr-2"></i>
일괄 처리
</button>
<button onclick="exportData()" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
<i class="fas fa-download mr-2"></i>
내보내기
</button>
</div>
</div>
<!-- 관리 통계 -->
<div class="grid grid-cols-1 md:grid-cols-5 gap-4">
<div class="bg-blue-50 p-4 rounded-lg">
<div class="flex items-center">
<i class="fas fa-exclamation-circle text-blue-500 text-xl mr-3"></i>
<div>
<p class="text-sm text-blue-600">처리 필요</p>
<p class="text-2xl font-bold text-blue-700" id="needActionCount">0</p>
</div>
</div>
</div>
<div class="bg-yellow-50 p-4 rounded-lg">
<div class="flex items-center">
<i class="fas fa-spinner text-yellow-500 text-xl mr-3"></i>
<div>
<p class="text-sm text-yellow-600">처리 중</p>
<p class="text-2xl font-bold text-yellow-700" id="processingCount">0</p>
</div>
</div>
</div>
<div class="bg-purple-50 p-4 rounded-lg">
<div class="flex items-center">
<i class="fas fa-pause-circle text-purple-500 text-xl mr-3"></i>
<div>
<p class="text-sm text-purple-600">대기 중</p>
<p class="text-2xl font-bold text-purple-700" id="pendingCount">0</p>
</div>
</div>
</div>
<div class="bg-green-50 p-4 rounded-lg">
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 text-xl mr-3"></i>
<div>
<p class="text-sm text-green-600">완료</p>
<p class="text-2xl font-bold text-green-700" id="completedCount">0</p>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-center">
<i class="fas fa-chart-pie text-gray-500 text-xl mr-3"></i>
<div>
<p class="text-sm text-gray-600">전체</p>
<p class="text-2xl font-bold text-gray-700" id="totalCount">0</p>
</div>
</div>
</div>
</div>
</div>
<!-- 프로젝트 필터 및 상태 탭 -->
@@ -240,6 +182,37 @@
<i class="fas fa-check-circle mr-2"></i>완료됨
</button>
</div>
<!-- 프로젝트별 통계 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-center">
<i class="fas fa-chart-bar text-gray-500 text-xl mr-3"></i>
<div>
<p class="text-sm text-gray-600">총 부적합</p>
<p class="text-2xl font-bold text-gray-700" id="totalCount">0</p>
</div>
</div>
</div>
<div class="bg-blue-50 p-4 rounded-lg">
<div class="flex items-center">
<i class="fas fa-cog text-blue-500 text-xl mr-3"></i>
<div>
<p class="text-sm text-blue-600">진행 중</p>
<p class="text-2xl font-bold text-blue-700" id="inProgressCount">0</p>
</div>
</div>
</div>
<div class="bg-green-50 p-4 rounded-lg">
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 text-xl mr-3"></i>
<div>
<p class="text-sm text-green-600">완료됨</p>
<p class="text-2xl font-bold text-green-700" id="completedCount">0</p>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -425,26 +398,47 @@
completedTab.className = 'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200 bg-green-500 text-white';
}
filterIssues();
filterIssues(); // 이미 updateStatistics()가 포함됨
}
// 필터링 및 표시 함수들
function filterIssues() {
const projectFilter = document.getElementById('projectFilter').value;
filteredIssues = issues.filter(issue => {
// 현재 탭에 따른 상태 필터링
if (issue.review_status !== currentTab) return false;
// 통계 업데이트 함수
function updateStatistics() {
const projectFilter = document.getElementById('projectFilter').value;
// 프로젝트 필터링
if (projectFilter && issue.project_id != projectFilter) return false;
// 선택된 프로젝트에 따른 이슈 필터링
const projectIssues = projectFilter
? issues.filter(issue => issue.project_id == projectFilter)
: issues;
return true;
});
// 상태별 카운트
const totalCount = projectIssues.length;
const inProgressCount = projectIssues.filter(issue => issue.review_status === 'in_progress').length;
const completedCount = projectIssues.filter(issue => issue.review_status === 'completed').length;
// 통계 업데이트
document.getElementById('totalCount').textContent = totalCount;
document.getElementById('inProgressCount').textContent = inProgressCount;
document.getElementById('completedCount').textContent = completedCount;
}
sortIssues();
displayIssues();
}
// 필터링 및 표시 함수들
function filterIssues() {
const projectFilter = document.getElementById('projectFilter').value;
filteredIssues = issues.filter(issue => {
// 현재 탭에 따른 상태 필터링
if (issue.review_status !== currentTab) return false;
// 프로젝트 필터링
if (projectFilter && issue.project_id != projectFilter) return false;
return true;
});
sortIssues();
displayIssues();
updateStatistics(); // 통계 업데이트 추가
}
function sortIssues() {
const sortOrder = document.getElementById('sortOrder').value;
@@ -729,19 +723,6 @@
}
// 기타 함수들
function bulkAction() {
if (selectedIssues.size === 0) {
alert('처리할 부적합을 선택해주세요.');
return;
}
// 일괄 처리 로직 구현
alert(`${selectedIssues.size}개의 부적합을 일괄 처리합니다.`);
}
function exportData() {
// 데이터 내보내기 로직 구현
alert('데이터를 내보냅니다.');
}
function viewIssueDetail(issueId) {
window.location.href = `/issue-view.html#detail-${issueId}`;