b024a178d0
- 목록 관리 페이지에 고급 필터링 시스템 추가 - 프로젝트별, 검토상태별, 날짜별 필터링 - 검토 완료/필요 항목 시각적 구분 및 정렬 - 해결 시간 입력 + 확인 버튼으로 검토 완료 처리 - 부적합 조회 페이지에 동일한 필터링 기능 적용 - 검토 상태에 따른 카드 스타일링 (음영 처리) - JavaScript 템플릿 리터럴 오류 수정 - 보고서 페이지 프로젝트별 분석 기능 추가 - 프로젝트 선택 드롭다운 추가 - 총 작업 공수를 프로젝트별 일일공수 데이터로 계산 - 부적합 처리 시간, 카테고리 분석, 상세 목록 모두 프로젝트별 필터링 - localStorage 키 이름 통일 (daily-work-data)
641 lines
29 KiB
HTML
641 lines
29 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">
|
|
|
|
<!-- Custom Styles -->
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0f9ff 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.glass-effect {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.input-field {
|
|
background: white;
|
|
border: 1px solid #e5e7eb;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.input-field:focus {
|
|
outline: none;
|
|
border-color: #60a5fa;
|
|
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
|
|
}
|
|
|
|
.line-clamp-2 {
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.nav-link {
|
|
color: #6b7280;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 0.5rem;
|
|
transition: all 0.2s;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background-color: #f3f4f6;
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.nav-link.active {
|
|
background-color: #3b82f6;
|
|
color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 헤더 -->
|
|
<header class="bg-white shadow-sm sticky top-0 z-50">
|
|
<div class="container mx-auto px-4 py-3">
|
|
<div class="flex justify-between items-center">
|
|
<h1 class="text-xl font-bold text-gray-800">
|
|
<i class="fas fa-clipboard-check text-blue-500 mr-2"></i>작업보고서
|
|
</h1>
|
|
<div class="flex items-center gap-4">
|
|
<span class="text-sm text-gray-600" id="userDisplay"></span>
|
|
<button onclick="logout()" class="text-gray-500 hover:text-gray-700">
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
<!-- 네비게이션 -->
|
|
<nav class="bg-white border-b">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex gap-2 py-2 overflow-x-auto">
|
|
<a href="daily-work.html" class="nav-link">
|
|
<i class="fas fa-calendar-check mr-2"></i>일일 공수
|
|
</a>
|
|
<a href="index.html" class="nav-link">
|
|
<i class="fas fa-camera-retro mr-2"></i>부적합 등록
|
|
</a>
|
|
<a href="issue-view.html" class="nav-link active">
|
|
<i class="fas fa-search mr-2"></i>부적합 조회
|
|
</a>
|
|
<a href="index.html#list" class="nav-link" style="display:none;" id="listBtn">
|
|
<i class="fas fa-list mr-2"></i>목록 관리
|
|
</a>
|
|
<a href="index.html#summary" class="nav-link" style="display:none;" id="summaryBtn">
|
|
<i class="fas fa-chart-bar mr-2"></i>보고서
|
|
</a>
|
|
<a href="project-management.html" class="nav-link" style="display:none;" id="projectBtn">
|
|
<i class="fas fa-folder-open mr-2"></i>프로젝트 관리
|
|
</a>
|
|
<a href="admin.html" class="nav-link" style="display:none;" id="adminBtn">
|
|
<i class="fas fa-users-cog mr-2"></i>사용자 관리
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main class="container mx-auto px-4 py-8">
|
|
<!-- 날짜 선택 섹션 (간소화) -->
|
|
<div class="bg-white rounded-xl shadow-sm p-4 mb-6">
|
|
<div class="flex flex-wrap gap-3 items-center">
|
|
<h2 class="text-lg font-semibold text-gray-800">
|
|
<i class="fas fa-list-alt text-blue-500 mr-2"></i>부적합 사항 목록
|
|
</h2>
|
|
|
|
<!-- 필터 섹션 -->
|
|
<div class="bg-gray-50 p-4 rounded-lg mb-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<!-- 프로젝트 필터 -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">프로젝트</label>
|
|
<select id="projectFilter" class="w-full px-3 py-2 border border-gray-300 rounded text-sm" onchange="filterIssues()">
|
|
<option value="">전체 프로젝트</option>
|
|
<!-- 프로젝트 옵션들이 여기에 로드됩니다 -->
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 검토 상태 필터 -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">검토 상태</label>
|
|
<select id="reviewStatusFilter" class="w-full px-3 py-2 border border-gray-300 rounded text-sm" onchange="filterIssues()">
|
|
<option value="">전체</option>
|
|
<option value="pending">검토 필요</option>
|
|
<option value="completed">검토 완료</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 날짜 필터 -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">날짜</label>
|
|
<select id="dateFilter" class="w-full px-3 py-2 border border-gray-300 rounded text-sm" onchange="filterIssues()">
|
|
<option value="">전체</option>
|
|
<option value="today">오늘</option>
|
|
<option value="week">이번 주</option>
|
|
<option value="month">이번 달</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1"></div>
|
|
|
|
<button onclick="setDateRange('today')" class="px-3 py-1.5 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors text-sm">
|
|
오늘
|
|
</button>
|
|
<button onclick="setDateRange('week')" class="px-3 py-1.5 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors text-sm">
|
|
이번 주
|
|
</button>
|
|
<button onclick="setDateRange('month')" class="px-3 py-1.5 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors text-sm">
|
|
이번 달
|
|
</button>
|
|
<button onclick="setDateRange('all')" class="px-3 py-1.5 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors text-sm">
|
|
전체
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 결과 섹션 -->
|
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
|
<div id="issueResults" class="space-y-3">
|
|
<!-- 결과가 여기에 표시됩니다 -->
|
|
<div class="text-gray-500 text-center py-8">
|
|
<i class="fas fa-spinner fa-spin text-3xl mb-3"></i>
|
|
<p>데이터를 불러오는 중...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Scripts -->
|
|
<script src="/static/js/api.js?v=20250917"></script>
|
|
<script src="/static/js/date-utils.js?v=20250917"></script>
|
|
<script>
|
|
let currentUser = null;
|
|
let issues = [];
|
|
let currentRange = 'week'; // 기본값: 이번 주
|
|
|
|
// 페이지 로드 시
|
|
window.addEventListener('DOMContentLoaded', async () => {
|
|
const user = TokenManager.getUser();
|
|
if (!user) {
|
|
window.location.href = '/index.html';
|
|
return;
|
|
}
|
|
currentUser = user;
|
|
|
|
// 네비게이션 권한 체크
|
|
updateNavigation();
|
|
|
|
// 프로젝트 로드
|
|
loadProjects();
|
|
|
|
// 기본값: 이번 주 데이터 로드
|
|
setDateRange('week');
|
|
});
|
|
|
|
// 이미지 모달 표시
|
|
function showImageModal(imagePath) {
|
|
if (!imagePath) return;
|
|
|
|
// 모달 HTML 생성
|
|
const modal = document.createElement('div');
|
|
modal.className = 'fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50';
|
|
modal.onclick = () => modal.remove();
|
|
|
|
modal.innerHTML = `
|
|
<div class="relative max-w-4xl max-h-[90vh]">
|
|
<img src="${imagePath}" class="max-w-full max-h-[90vh] object-contain rounded-lg">
|
|
<button
|
|
onclick="this.parentElement.parentElement.remove()"
|
|
class="absolute top-2 right-2 p-2 bg-red-500 text-white rounded-full hover:bg-red-600"
|
|
>
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(modal);
|
|
}
|
|
|
|
// 네비게이션 권한 업데이트
|
|
function updateNavigation() {
|
|
const listBtn = document.getElementById('listBtn');
|
|
const summaryBtn = document.getElementById('summaryBtn');
|
|
const adminBtn = document.getElementById('adminBtn');
|
|
const projectBtn = document.getElementById('projectBtn');
|
|
|
|
if (currentUser.role === 'admin') {
|
|
// 관리자는 모든 메뉴 표시
|
|
listBtn.style.display = '';
|
|
summaryBtn.style.display = '';
|
|
projectBtn.style.display = '';
|
|
adminBtn.style.display = '';
|
|
adminBtn.innerHTML = '<i class="fas fa-users-cog mr-1"></i>사용자 관리';
|
|
} else {
|
|
// 일반 사용자는 제한된 메뉴만 표시
|
|
listBtn.style.display = 'none';
|
|
summaryBtn.style.display = 'none';
|
|
projectBtn.style.display = 'none';
|
|
adminBtn.style.display = '';
|
|
adminBtn.innerHTML = '<i class="fas fa-key mr-1"></i>비밀번호 변경';
|
|
}
|
|
}
|
|
|
|
// 프로젝트 로드
|
|
function loadProjects() {
|
|
const saved = localStorage.getItem('work-report-projects');
|
|
if (saved) {
|
|
const projects = JSON.parse(saved);
|
|
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.jobNo} - ${project.projectName}${!project.isActive ? ' (비활성)' : ''}`;
|
|
projectFilter.appendChild(option);
|
|
});
|
|
}
|
|
}
|
|
|
|
// 이슈 필터링
|
|
// 검토 상태 확인 함수
|
|
function isReviewCompleted(issue) {
|
|
return issue.status === 'complete' && issue.work_hours && issue.work_hours > 0;
|
|
}
|
|
|
|
// 날짜 필터링 함수
|
|
function filterByDate(issues, dateFilter) {
|
|
const now = new Date();
|
|
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
|
|
|
switch (dateFilter) {
|
|
case 'today':
|
|
return issues.filter(issue => {
|
|
const issueDate = new Date(issue.report_date);
|
|
return issueDate >= today;
|
|
});
|
|
case 'week':
|
|
const weekStart = new Date(today);
|
|
weekStart.setDate(today.getDate() - today.getDay());
|
|
return issues.filter(issue => {
|
|
const issueDate = new Date(issue.report_date);
|
|
return issueDate >= weekStart;
|
|
});
|
|
case 'month':
|
|
const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
|
|
return issues.filter(issue => {
|
|
const issueDate = new Date(issue.report_date);
|
|
return issueDate >= monthStart;
|
|
});
|
|
default:
|
|
return issues;
|
|
}
|
|
}
|
|
|
|
function filterIssues() {
|
|
console.log('필터링 시작 - 전체 이슈:', issues.length);
|
|
|
|
// 필터 값 가져오기
|
|
const selectedProjectId = document.getElementById('projectFilter').value;
|
|
const reviewStatusFilter = document.getElementById('reviewStatusFilter').value;
|
|
const dateFilter = document.getElementById('dateFilter').value;
|
|
|
|
let filteredIssues = [...issues];
|
|
|
|
// 프로젝트 필터 적용
|
|
if (selectedProjectId) {
|
|
filteredIssues = filteredIssues.filter(issue => {
|
|
const issueProjectId = issue.project_id || issue.projectId;
|
|
return issueProjectId && (issueProjectId == selectedProjectId || issueProjectId.toString() === selectedProjectId.toString());
|
|
});
|
|
console.log('프로젝트 필터 후:', filteredIssues.length);
|
|
}
|
|
|
|
// 검토 상태 필터 적용
|
|
if (reviewStatusFilter) {
|
|
filteredIssues = filteredIssues.filter(issue => {
|
|
const isCompleted = isReviewCompleted(issue);
|
|
return reviewStatusFilter === 'completed' ? isCompleted : !isCompleted;
|
|
});
|
|
console.log('검토 상태 필터 후:', filteredIssues.length);
|
|
}
|
|
|
|
// 날짜 필터 적용
|
|
if (dateFilter) {
|
|
filteredIssues = filterByDate(filteredIssues, dateFilter);
|
|
console.log('날짜 필터 후:', filteredIssues.length);
|
|
}
|
|
|
|
// 전역 변수에 필터링된 결과 저장
|
|
window.filteredIssues = filteredIssues;
|
|
|
|
displayResults();
|
|
}
|
|
|
|
// 프로젝트 정보 표시용 함수
|
|
function getProjectInfo(projectId) {
|
|
if (!projectId) {
|
|
return '<span class="text-gray-500">프로젝트 미지정</span>';
|
|
}
|
|
|
|
const saved = localStorage.getItem('work-report-projects');
|
|
if (saved) {
|
|
const projects = JSON.parse(saved);
|
|
const project = projects.find(p => p.id == projectId);
|
|
if (project) {
|
|
return `${project.jobNo} - ${project.projectName}`;
|
|
}
|
|
}
|
|
|
|
return `<span class="text-red-500">프로젝트 ID: ${projectId} (정보 없음)</span>`;
|
|
}
|
|
|
|
// 날짜 범위 설정 및 자동 조회
|
|
async function setDateRange(range) {
|
|
currentRange = range;
|
|
|
|
// 버튼 스타일 업데이트
|
|
document.querySelectorAll('button[onclick^="setDateRange"]').forEach(btn => {
|
|
if (btn.textContent.includes('전체') && range === 'all') {
|
|
btn.className = 'px-3 py-1.5 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors text-sm';
|
|
} else if (btn.textContent.includes('오늘') && range === 'today') {
|
|
btn.className = 'px-3 py-1.5 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors text-sm';
|
|
} else if (btn.textContent.includes('이번 주') && range === 'week') {
|
|
btn.className = 'px-3 py-1.5 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors text-sm';
|
|
} else if (btn.textContent.includes('이번 달') && range === 'month') {
|
|
btn.className = 'px-3 py-1.5 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors text-sm';
|
|
} else {
|
|
btn.className = 'px-3 py-1.5 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors text-sm';
|
|
}
|
|
});
|
|
|
|
await loadIssues(range);
|
|
}
|
|
|
|
// 부적합 사항 로드
|
|
async function loadIssues(range) {
|
|
const container = document.getElementById('issueResults');
|
|
container.innerHTML = `
|
|
<div class="text-gray-500 text-center py-8">
|
|
<i class="fas fa-spinner fa-spin text-3xl mb-3"></i>
|
|
<p>데이터를 불러오는 중...</p>
|
|
</div>
|
|
`;
|
|
|
|
try {
|
|
// 모든 이슈 가져오기
|
|
const allIssues = await IssuesAPI.getAll();
|
|
|
|
// 날짜 필터링
|
|
const today = new Date();
|
|
today.setHours(23, 59, 59, 999);
|
|
let startDate = new Date();
|
|
|
|
switch(range) {
|
|
case 'today':
|
|
startDate = new Date();
|
|
startDate.setHours(0, 0, 0, 0);
|
|
break;
|
|
case 'week':
|
|
startDate.setDate(today.getDate() - 7);
|
|
startDate.setHours(0, 0, 0, 0);
|
|
break;
|
|
case 'month':
|
|
startDate.setMonth(today.getMonth() - 1);
|
|
startDate.setHours(0, 0, 0, 0);
|
|
break;
|
|
case 'all':
|
|
startDate = new Date(2020, 0, 1); // 충분히 과거 날짜
|
|
break;
|
|
}
|
|
|
|
// 필터링 및 정렬 (최신순)
|
|
issues = allIssues
|
|
.filter(issue => {
|
|
const issueDate = new Date(issue.report_date);
|
|
return issueDate >= startDate && issueDate <= today;
|
|
})
|
|
.sort((a, b) => new Date(b.report_date) - new Date(a.report_date));
|
|
|
|
// 결과 표시
|
|
displayResults();
|
|
|
|
} catch (error) {
|
|
console.error('조회 실패:', error);
|
|
container.innerHTML = `
|
|
<div class="text-red-500 text-center py-8">
|
|
<i class="fas fa-exclamation-circle text-3xl mb-3"></i>
|
|
<p>데이터를 불러오는데 실패했습니다.</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// 결과 표시 (시간순 나열)
|
|
function displayResults() {
|
|
const container = document.getElementById('issueResults');
|
|
|
|
// 필터링된 결과 사용 (filterIssues에서 설정됨)
|
|
const filteredIssues = window.filteredIssues || issues;
|
|
|
|
if (filteredIssues.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="text-gray-500 text-center py-8">
|
|
<i class="fas fa-inbox text-4xl mb-3"></i>
|
|
<p>조건에 맞는 부적합 사항이 없습니다.</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
// 검토 상태별로 분류 및 정렬
|
|
const pendingIssues = filteredIssues.filter(issue => !isReviewCompleted(issue));
|
|
const completedIssues = filteredIssues.filter(issue => isReviewCompleted(issue));
|
|
|
|
container.innerHTML = '';
|
|
|
|
// 검토 필요 항목을 먼저 표시
|
|
if (pendingIssues.length > 0) {
|
|
const pendingHeader = document.createElement('div');
|
|
pendingHeader.className = 'mb-4';
|
|
pendingHeader.innerHTML = `
|
|
<h3 class="text-md font-semibold text-orange-700 flex items-center">
|
|
<i class="fas fa-exclamation-triangle mr-2"></i>검토 필요 (${pendingIssues.length}건)
|
|
</h3>
|
|
`;
|
|
container.appendChild(pendingHeader);
|
|
|
|
pendingIssues.forEach(issue => {
|
|
container.appendChild(createIssueCard(issue, false));
|
|
});
|
|
}
|
|
|
|
// 검토 완료 항목을 아래에 표시
|
|
if (completedIssues.length > 0) {
|
|
const completedHeader = document.createElement('div');
|
|
completedHeader.className = 'mb-4 mt-8';
|
|
completedHeader.innerHTML = `
|
|
<h3 class="text-md font-semibold text-green-700 flex items-center">
|
|
<i class="fas fa-check-circle mr-2"></i>검토 완료 (${completedIssues.length}건)
|
|
</h3>
|
|
`;
|
|
container.appendChild(completedHeader);
|
|
|
|
completedIssues.forEach(issue => {
|
|
container.appendChild(createIssueCard(issue, true));
|
|
});
|
|
}
|
|
}
|
|
|
|
// 부적합 사항 카드 생성 함수 (조회용)
|
|
function createIssueCard(issue, isCompleted) {
|
|
const categoryNames = {
|
|
material_missing: '자재누락',
|
|
design_error: '설계미스',
|
|
incoming_defect: '입고자재 불량',
|
|
inspection_miss: '검사미스'
|
|
};
|
|
|
|
const categoryColors = {
|
|
material_missing: 'bg-yellow-100 text-yellow-700 border-yellow-300',
|
|
design_error: 'bg-blue-100 text-blue-700 border-blue-300',
|
|
incoming_defect: 'bg-red-100 text-red-700 border-red-300',
|
|
inspection_miss: 'bg-purple-100 text-purple-700 border-purple-300'
|
|
};
|
|
|
|
const div = document.createElement('div');
|
|
// 검토 완료 상태에 따른 스타일링
|
|
const baseClasses = 'rounded-lg transition-colors border-l-4 mb-4';
|
|
const statusClasses = isCompleted
|
|
? 'bg-gray-100 opacity-75'
|
|
: 'bg-gray-50 hover:bg-gray-100';
|
|
const borderColor = categoryColors[issue.category]?.split(' ')[2] || 'border-gray-300';
|
|
div.className = `${baseClasses} ${statusClasses} ${borderColor}`;
|
|
|
|
const dateStr = DateUtils.formatKST(issue.report_date, true);
|
|
const relativeTime = DateUtils.getRelativeTime(issue.report_date);
|
|
const projectInfo = getProjectInfo(issue.project_id || issue.projectId);
|
|
|
|
div.innerHTML = `
|
|
<!-- 프로젝트 정보 및 상태 (오른쪽 상단) -->
|
|
<div class="flex justify-between items-start p-2 pb-0">
|
|
<div class="flex items-center gap-2">
|
|
${isCompleted ?
|
|
'<div class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium"><i class="fas fa-check-circle mr-1"></i>검토완료</div>' :
|
|
'<div class="px-2 py-1 bg-orange-100 text-orange-800 rounded-full text-xs font-medium"><i class="fas fa-exclamation-triangle mr-1"></i>검토필요</div>'
|
|
}
|
|
</div>
|
|
<div class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">
|
|
<i class="fas fa-folder-open mr-1"></i>${projectInfo}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 기존 내용 -->
|
|
<div class="flex gap-3 p-3 pt-1">
|
|
<!-- 사진들 -->
|
|
<div class="flex gap-1 flex-shrink-0">
|
|
${issue.photo_path ?
|
|
`<img src="${issue.photo_path}" class="w-20 h-20 object-cover rounded shadow-sm cursor-pointer" onclick="showImageModal('${issue.photo_path}')">` : ''
|
|
}
|
|
${issue.photo_path2 ?
|
|
`<img src="${issue.photo_path2}" class="w-20 h-20 object-cover rounded shadow-sm cursor-pointer" onclick="showImageModal('${issue.photo_path2}')">` : ''
|
|
}
|
|
${!issue.photo_path && !issue.photo_path2 ?
|
|
`<div class="w-20 h-20 bg-gray-200 rounded flex items-center justify-center">
|
|
<i class="fas fa-image text-gray-400"></i>
|
|
</div>` : ''
|
|
}
|
|
</div>
|
|
|
|
<!-- 내용 -->
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-start justify-between mb-2">
|
|
<span class="px-2 py-1 rounded-full text-xs font-medium ${categoryColors[issue.category] || 'bg-gray-100 text-gray-700'}">
|
|
${categoryNames[issue.category] || issue.category}
|
|
</span>
|
|
${issue.work_hours ?
|
|
`<span class="text-sm text-green-600 font-medium">
|
|
<i class="fas fa-clock mr-1"></i>${issue.work_hours}시간
|
|
</span>` :
|
|
'<span class="text-sm text-gray-400">시간 미입력</span>'
|
|
}
|
|
</div>
|
|
|
|
<p class="text-gray-800 mb-2 line-clamp-2">${issue.description}</p>
|
|
|
|
<div class="flex items-center gap-4 text-sm text-gray-500">
|
|
<span><i class="fas fa-user mr-1"></i>${issue.reporter?.full_name || issue.reporter?.username || '알 수 없음'}</span>
|
|
<span><i class="fas fa-calendar mr-1"></i>${dateStr}</span>
|
|
<span class="text-xs text-gray-400">${relativeTime}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
return div;
|
|
}
|
|
|
|
// 로그아웃 함수
|
|
function logout() {
|
|
localStorage.removeItem('currentUser');
|
|
window.location.href = 'index.html';
|
|
}
|
|
|
|
// 페이지 로드 시 사용자 정보 확인 및 관리자 배너 표시
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
const currentUserData = localStorage.getItem('currentUser');
|
|
if (!currentUserData) {
|
|
window.location.href = 'index.html';
|
|
return;
|
|
}
|
|
|
|
let currentUser;
|
|
try {
|
|
// JSON 파싱 시도
|
|
currentUser = JSON.parse(currentUserData);
|
|
} catch (e) {
|
|
// JSON이 아니면 문자열로 처리 (기존 방식 호환)
|
|
currentUser = { username: currentUserData };
|
|
}
|
|
|
|
// 사용자 표시
|
|
const username = currentUser.username || currentUser;
|
|
const displayName = currentUser.full_name || (username === 'hyungi' ? '관리자' : username);
|
|
document.getElementById('userDisplay').textContent = `${displayName} (${username})`;
|
|
|
|
// 관리자인 경우 메뉴 표시
|
|
if (username === 'hyungi' || currentUser.role === 'admin') {
|
|
document.getElementById('listBtn').style.display = '';
|
|
document.getElementById('summaryBtn').style.display = '';
|
|
document.getElementById('projectBtn').style.display = '';
|
|
document.getElementById('adminBtn').style.display = '';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|