Files
M-Project/frontend/issues-inbox.html
Hyungi Ahn d456ad1e15 feat: 목록 관리 3개 하위 페이지 실제 파일 생성
수신함, 관리함, 폐기함 페이지를 실제로 구현하여 완전한 목록 관리 시스템 완성

Pages Created:
- issues-inbox.html: 수신함 페이지
  * 새로 등록된 부적합 확인
  * 읽음/안읽음 상태 관리
  * 실시간 통계 대시보드
  * 필터링 및 정렬 기능

- issues-management.html: 관리함 페이지
  * 부적합 상태 변경 및 처리
  * 일괄 처리 기능
  * 담당자 배정 (향후 구현)
  * 우선순위 관리

- issues-archive.html: 폐기함 페이지
  * 완료/폐기된 부적합 보관
  * 통계 차트 및 분석
  * 기간별 필터링
  * 데이터 내보내기 기능

Common Features:
- 공통 헤더 및 권한 시스템 통합
- 반응형 모바일 최적화 디자인
- 실시간 데이터 로딩 및 필터링
- 프로젝트별 분류 및 검색
- 사용자 친화적 UI/UX

Technical:
- 각 페이지별 고유한 기능과 UI
- 권한 기반 접근 제어
- API 연동 및 에러 처리
- 로컬 스토리지 활용 (읽음 상태 등)
- 성능 최적화된 렌더링
2025-10-25 09:47:44 +09:00

568 lines
24 KiB
HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>수신함 - 작업보고서</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- 모바일 캘린더 스타일 -->
<link rel="stylesheet" href="/static/css/mobile-calendar.css">
<!-- Custom Styles -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.loading-overlay.active {
opacity: 1;
visibility: visible;
}
.issue-card {
transition: all 0.2s ease;
border-left: 4px solid transparent;
}
.issue-card.unread {
border-left-color: #3b82f6;
background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
}
.issue-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.priority-high { border-left-color: #ef4444; }
.priority-medium { border-left-color: #f59e0b; }
.priority-low { border-left-color: #10b981; }
.badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
}
.badge-new { background: #dbeafe; color: #1e40af; }
.badge-processing { background: #fef3c7; color: #92400e; }
.badge-completed { background: #d1fae5; color: #065f46; }
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<!-- 로딩 오버레이 -->
<div id="loadingOverlay" class="loading-overlay">
<div class="text-center">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
<p class="text-gray-600">데이터를 불러오는 중...</p>
</div>
</div>
<!-- 공통 헤더가 여기에 자동으로 삽입됩니다 -->
<!-- Main Content -->
<main class="container mx-auto px-4 py-8" style="padding-top: 120px;">
<!-- 페이지 헤더 -->
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
<div class="flex items-center justify-between mb-4">
<div>
<h1 class="text-2xl font-bold text-gray-900 flex items-center">
<i class="fas fa-inbox text-blue-500 mr-3"></i>
수신함
</h1>
<p class="text-gray-600 mt-1">새로 등록된 부적합 사항을 확인하고 처리하세요</p>
</div>
<div class="flex items-center space-x-3">
<button onclick="markAllAsRead()" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
<i class="fas fa-check-double mr-2"></i>
모두 읽음 처리
</button>
<button onclick="refreshInbox()" class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors">
<i class="fas fa-sync-alt mr-2"></i>
새로고침
</button>
</div>
</div>
<!-- 통계 카드 -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="bg-blue-50 p-4 rounded-lg">
<div class="flex items-center">
<i class="fas fa-envelope 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="newIssuesCount">0</p>
</div>
</div>
</div>
<div class="bg-yellow-50 p-4 rounded-lg">
<div class="flex items-center">
<i class="fas fa-clock 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="pendingIssuesCount">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="todayProcessedCount">0</p>
</div>
</div>
</div>
<div class="bg-purple-50 p-4 rounded-lg">
<div class="flex items-center">
<i class="fas fa-chart-line 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="totalIssuesCount">0</p>
</div>
</div>
</div>
</div>
</div>
<!-- 필터 및 검색 -->
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<!-- 프로젝트 필터 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">📁 프로젝트</label>
<select id="projectFilter" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" onchange="filterIssues()">
<option value="">전체 프로젝트</option>
</select>
</div>
<!-- 상태 필터 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">📋 상태</label>
<select id="statusFilter" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" onchange="filterIssues()">
<option value="">전체 상태</option>
<option value="new">새 부적합</option>
<option value="processing">처리 중</option>
<option value="pending">대기 중</option>
</select>
</div>
<!-- 읽음 상태 필터 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">👁️ 읽음 상태</label>
<select id="readStatusFilter" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" onchange="filterIssues()">
<option value="">전체</option>
<option value="unread">읽지 않음</option>
<option value="read">읽음</option>
</select>
</div>
<!-- 검색 -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">🔍 검색</label>
<input type="text" id="searchInput" placeholder="설명 또는 등록자 검색..."
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
onkeyup="filterIssues()">
</div>
</div>
</div>
<!-- 부적합 목록 -->
<div class="bg-white rounded-xl shadow-sm">
<div class="p-6 border-b border-gray-200">
<div class="flex items-center justify-between">
<h2 class="text-lg font-semibold text-gray-800">부적합 목록</h2>
<div class="flex items-center space-x-2">
<span class="text-sm text-gray-500">정렬:</span>
<select id="sortOrder" class="text-sm border border-gray-300 rounded px-2 py-1" onchange="sortIssues()">
<option value="newest">최신순</option>
<option value="oldest">오래된순</option>
<option value="priority">우선순위</option>
<option value="unread">읽지 않은 순</option>
</select>
</div>
</div>
</div>
<div id="issuesList" class="divide-y divide-gray-200">
<!-- 부적합 목록이 여기에 동적으로 생성됩니다 -->
</div>
<!-- 빈 상태 -->
<div id="emptyState" class="hidden p-12 text-center">
<i class="fas fa-inbox text-6xl text-gray-300 mb-4"></i>
<h3 class="text-lg font-medium text-gray-900 mb-2">수신함이 비어있습니다</h3>
<p class="text-gray-500">새로운 부적합이 등록되면 여기에 표시됩니다.</p>
</div>
</div>
</main>
<!-- Scripts -->
<script src="/static/js/date-utils.js?v=20250917"></script>
<script src="/static/js/core/permissions.js?v=20251025"></script>
<script src="/static/js/components/common-header.js?v=20251025"></script>
<script src="/static/js/core/page-manager.js?v=20251025"></script>
<script src="/static/js/components/mobile-calendar.js?v=20251025"></script>
<script>
let currentUser = null;
let issues = [];
let projects = [];
let filteredIssues = [];
let readStatus = new Set(); // 읽은 부적합 ID 저장
// API 로드 후 초기화 함수
async function initializeInbox() {
const token = localStorage.getItem('access_token');
if (!token) {
window.location.href = '/index.html';
return;
}
try {
const user = await AuthAPI.getCurrentUser();
currentUser = user;
localStorage.setItem('currentUser', JSON.stringify(user));
// 공통 헤더 초기화
await window.commonHeader.init(user, 'issues_inbox');
// 페이지 접근 권한 체크
setTimeout(() => {
if (!canAccessPage('issues_inbox')) {
alert('수신함 페이지에 접근할 권한이 없습니다.');
window.location.href = '/index.html';
return;
}
}, 500);
// 데이터 로드
await loadProjects();
await loadIssues();
updateStatistics();
} catch (error) {
console.error('인증 실패:', error);
localStorage.removeItem('access_token');
localStorage.removeItem('currentUser');
window.location.href = '/index.html';
}
}
// 프로젝트 로드
async function loadProjects() {
try {
const response = await fetch('/api/projects/', {
headers: {
'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
'Content-Type': 'application/json'
}
});
if (response.ok) {
projects = await response.json();
updateProjectFilter();
}
} catch (error) {
console.error('프로젝트 로드 실패:', error);
}
}
// 프로젝트 필터 업데이트
function updateProjectFilter() {
const projectFilter = document.getElementById('projectFilter');
projectFilter.innerHTML = '<option value="">전체 프로젝트</option>';
projects.forEach(project => {
const option = document.createElement('option');
option.value = project.id;
option.textContent = project.name;
projectFilter.appendChild(option);
});
}
// 부적합 목록 로드
async function loadIssues() {
showLoading(true);
try {
const response = await fetch('/api/issues/', {
headers: {
'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
'Content-Type': 'application/json'
}
});
if (response.ok) {
issues = await response.json();
// 읽음 상태 로드 (localStorage에서)
const savedReadStatus = localStorage.getItem('issues_read_status');
if (savedReadStatus) {
readStatus = new Set(JSON.parse(savedReadStatus));
}
filterIssues();
updateStatistics();
} else {
throw new Error('부적합 목록을 불러올 수 없습니다.');
}
} catch (error) {
console.error('부적합 로드 실패:', error);
showError('부적합 목록을 불러오는데 실패했습니다.');
} finally {
showLoading(false);
}
}
// 부적합 필터링
function filterIssues() {
const projectFilter = document.getElementById('projectFilter').value;
const statusFilter = document.getElementById('statusFilter').value;
const readStatusFilter = document.getElementById('readStatusFilter').value;
const searchInput = document.getElementById('searchInput').value.toLowerCase();
filteredIssues = issues.filter(issue => {
// 프로젝트 필터
if (projectFilter && issue.project_id != projectFilter) return false;
// 상태 필터
if (statusFilter && issue.status !== statusFilter) return false;
// 읽음 상태 필터
if (readStatusFilter === 'read' && !readStatus.has(issue.id)) return false;
if (readStatusFilter === 'unread' && readStatus.has(issue.id)) return false;
// 검색 필터
if (searchInput) {
const searchText = `${issue.description} ${issue.reporter?.username || ''}`.toLowerCase();
if (!searchText.includes(searchInput)) return false;
}
return true;
});
sortIssues();
displayIssues();
}
// 부적합 정렬
function sortIssues() {
const sortOrder = document.getElementById('sortOrder').value;
filteredIssues.sort((a, b) => {
switch (sortOrder) {
case 'newest':
return new Date(b.created_at) - new Date(a.created_at);
case 'oldest':
return new Date(a.created_at) - new Date(b.created_at);
case 'priority':
const priorityOrder = { 'high': 3, 'medium': 2, 'low': 1 };
return (priorityOrder[b.priority] || 1) - (priorityOrder[a.priority] || 1);
case 'unread':
const aRead = readStatus.has(a.id) ? 1 : 0;
const bRead = readStatus.has(b.id) ? 1 : 0;
return aRead - bRead;
default:
return new Date(b.created_at) - new Date(a.created_at);
}
});
}
// 부적합 목록 표시
function displayIssues() {
const container = document.getElementById('issuesList');
const emptyState = document.getElementById('emptyState');
if (filteredIssues.length === 0) {
container.innerHTML = '';
emptyState.classList.remove('hidden');
return;
}
emptyState.classList.add('hidden');
container.innerHTML = filteredIssues.map(issue => {
const isUnread = !readStatus.has(issue.id);
const project = projects.find(p => p.id === issue.project_id);
const createdDate = new Date(issue.created_at).toLocaleDateString('ko-KR');
const timeAgo = getTimeAgo(new Date(issue.created_at));
return `
<div class="issue-card p-6 hover:bg-gray-50 cursor-pointer ${isUnread ? 'unread' : ''}"
onclick="viewIssueDetail(${issue.id})">
<div class="flex items-start justify-between">
<div class="flex-1">
<div class="flex items-center space-x-3 mb-2">
${isUnread ? '<div class="w-2 h-2 bg-blue-500 rounded-full"></div>' : '<div class="w-2 h-2"></div>'}
<span class="badge badge-${getStatusBadgeClass(issue.status)}">${getStatusText(issue.status)}</span>
${project ? `<span class="text-sm text-gray-500">${project.name}</span>` : ''}
<span class="text-sm text-gray-400">${timeAgo}</span>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">${issue.description}</h3>
<div class="flex items-center text-sm text-gray-500 space-x-4">
<span><i class="fas fa-user mr-1"></i>${issue.reporter?.username || '알 수 없음'}</span>
<span><i class="fas fa-calendar mr-1"></i>${createdDate}</span>
${issue.category ? `<span><i class="fas fa-tag mr-1"></i>${getCategoryText(issue.category)}</span>` : ''}
</div>
</div>
<div class="flex items-center space-x-2 ml-4">
${issue.photo_path ? '<i class="fas fa-camera text-gray-400"></i>' : ''}
<button onclick="event.stopPropagation(); markAsRead(${issue.id})"
class="p-2 text-gray-400 hover:text-blue-600 transition-colors"
title="${isUnread ? '읽음 처리' : '읽음'}">
<i class="fas fa-${isUnread ? 'envelope' : 'envelope-open'}"></i>
</button>
</div>
</div>
</div>
`;
}).join('');
}
// 통계 업데이트
function updateStatistics() {
const newIssues = issues.filter(issue => issue.status === 'new').length;
const pendingIssues = issues.filter(issue => ['pending', 'processing'].includes(issue.status)).length;
const todayProcessed = issues.filter(issue => {
const today = new Date().toDateString();
return issue.updated_at && new Date(issue.updated_at).toDateString() === today;
}).length;
document.getElementById('newIssuesCount').textContent = newIssues;
document.getElementById('pendingIssuesCount').textContent = pendingIssues;
document.getElementById('todayProcessedCount').textContent = todayProcessed;
document.getElementById('totalIssuesCount').textContent = issues.length;
}
// 읽음 처리
function markAsRead(issueId) {
readStatus.add(issueId);
localStorage.setItem('issues_read_status', JSON.stringify([...readStatus]));
displayIssues();
}
// 모두 읽음 처리
function markAllAsRead() {
filteredIssues.forEach(issue => readStatus.add(issue.id));
localStorage.setItem('issues_read_status', JSON.stringify([...readStatus]));
displayIssues();
}
// 새로고침
function refreshInbox() {
loadIssues();
}
// 부적합 상세 보기
function viewIssueDetail(issueId) {
markAsRead(issueId);
// 상세 페이지로 이동 또는 모달 표시
window.location.href = `/issue-view.html#detail-${issueId}`;
}
// 유틸리티 함수들
function getStatusBadgeClass(status) {
const statusMap = {
'new': 'new',
'processing': 'processing',
'completed': 'completed',
'pending': 'processing'
};
return statusMap[status] || 'new';
}
function getStatusText(status) {
const statusMap = {
'new': '새 부적합',
'processing': '처리 중',
'completed': '완료',
'pending': '대기 중'
};
return statusMap[status] || status;
}
function getCategoryText(category) {
const categoryMap = {
'material_missing': '자재 누락',
'design_error': '설계 오류',
'incoming_defect': '반입 불량',
'inspection_miss': '검사 누락',
'etc': '기타'
};
return categoryMap[category] || category;
}
function getTimeAgo(date) {
const now = new Date();
const diffMs = now - date;
const diffMins = Math.floor(diffMs / 60000);
const diffHours = Math.floor(diffMs / 3600000);
const diffDays = Math.floor(diffMs / 86400000);
if (diffMins < 1) return '방금 전';
if (diffMins < 60) return `${diffMins}분 전`;
if (diffHours < 24) return `${diffHours}시간 전`;
if (diffDays < 7) return `${diffDays}일 전`;
return date.toLocaleDateString('ko-KR');
}
function showLoading(show) {
const overlay = document.getElementById('loadingOverlay');
if (show) {
overlay.classList.add('active');
} else {
overlay.classList.remove('active');
}
}
function showError(message) {
alert(message);
}
// API 스크립트 동적 로딩
const cacheBuster = Date.now() + Math.random() + Math.floor(Math.random() * 1000000);
const script = document.createElement('script');
script.src = `/static/js/api.js?v=20251025-2&cb=${cacheBuster}&t=${Date.now()}&r=${Math.random()}`;
script.setAttribute('cache-control', 'no-cache');
script.setAttribute('pragma', 'no-cache');
script.onload = function() {
console.log('✅ API 스크립트 로드 완료 (issues-inbox.html)');
initializeInbox();
};
script.onerror = function() {
console.error('❌ API 스크립트 로드 실패');
};
document.head.appendChild(script);
</script>
</body>
</html>