merge: 원격 변경사항과 병합 및 충돌 해결
- 임시 파일들 정리 (chart.html, daily-work.html 등) - localStorage 기반 프로젝트별 보고서 필터링 유지 - 공통 헤더 및 인증 시스템 적용
This commit is contained in:
hyungi
417
chart.html
417
chart.html
@@ -1,417 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>M-Project - 차트</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--sky-50: #f0f9ff;
|
||||
--sky-100: #e0f2fe;
|
||||
--sky-200: #bae6fd;
|
||||
--sky-300: #7dd3fc;
|
||||
--sky-400: #38bdf8;
|
||||
--sky-500: #0ea5e9;
|
||||
--gray-100: #f3f4f6;
|
||||
--gray-200: #e5e7eb;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(to bottom, #ffffff, #f0f9ff);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-left: 4px solid var(--sky-400);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.gallery-item:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal.show {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 헤더 -->
|
||||
<header class="glass sticky top-0 z-50 shadow-sm">
|
||||
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
|
||||
<h1 class="text-xl font-bold text-gray-800">
|
||||
<i class="fas fa-chart-bar text-sky-500 mr-2"></i>차트
|
||||
</h1>
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="index.html" class="text-sky-600 hover:text-sky-700">
|
||||
<i class="fas fa-camera text-xl"></i>
|
||||
</a>
|
||||
<span class="text-gray-600 text-sm" id="userName"></span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 메인 컨텐츠 -->
|
||||
<main class="container mx-auto px-4 py-6 max-w-6xl">
|
||||
<!-- 통계 카드 -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
||||
<div class="stat-card p-4 rounded-xl shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600">전체 사진</p>
|
||||
<p class="text-2xl font-bold text-gray-800" id="totalCount">0</p>
|
||||
</div>
|
||||
<i class="fas fa-images text-3xl text-sky-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card p-4 rounded-xl shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600">오늘</p>
|
||||
<p class="text-2xl font-bold text-gray-800" id="todayCount">0</p>
|
||||
</div>
|
||||
<i class="fas fa-calendar-day text-3xl text-sky-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card p-4 rounded-xl shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600">이번 주</p>
|
||||
<p class="text-2xl font-bold text-gray-800" id="weekCount">0</p>
|
||||
</div>
|
||||
<i class="fas fa-calendar-week text-3xl text-sky-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card p-4 rounded-xl shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600">가장 많은</p>
|
||||
<p class="text-lg font-bold text-gray-800" id="topCategory">-</p>
|
||||
</div>
|
||||
<i class="fas fa-trophy text-3xl text-sky-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 차트 영역 -->
|
||||
<div class="grid md:grid-cols-2 gap-6 mb-8">
|
||||
<!-- 카테고리별 차트 -->
|
||||
<div class="glass p-6 rounded-xl shadow-lg">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-4">카테고리별 분포</h3>
|
||||
<canvas id="categoryChart" width="400" height="300"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- 일별 추이 차트 -->
|
||||
<div class="glass p-6 rounded-xl shadow-lg">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-4">최근 7일 추이</h3>
|
||||
<canvas id="trendChart" width="400" height="300"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 갤러리 -->
|
||||
<div class="glass p-6 rounded-xl shadow-lg">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-semibold text-gray-800">전체 갤러리</h3>
|
||||
<select id="categoryFilter" class="px-4 py-2 rounded-lg border border-gray-300 focus:border-sky-400 focus:outline-none">
|
||||
<option value="all">전체 카테고리</option>
|
||||
<option value="food">음식</option>
|
||||
<option value="place">장소</option>
|
||||
<option value="people">사람</option>
|
||||
<option value="object">물건</option>
|
||||
<option value="event">행사</option>
|
||||
<option value="etc">기타</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="gallery" class="grid grid-cols-3 md:grid-cols-6 gap-3">
|
||||
<!-- 갤러리 아이템들이 여기에 표시됩니다 -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 이미지 모달 -->
|
||||
<div id="imageModal" class="modal" onclick="closeModal()">
|
||||
<div class="bg-white rounded-xl p-4 max-w-2xl mx-4" onclick="event.stopPropagation()">
|
||||
<img id="modalImage" class="w-full rounded-lg mb-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<p class="font-semibold text-lg" id="modalDescription"></p>
|
||||
<p class="text-sm text-gray-600 mt-1" id="modalInfo"></p>
|
||||
</div>
|
||||
<button onclick="closeModal()" class="text-gray-500 hover:text-gray-700">
|
||||
<i class="fas fa-times text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let allData = [];
|
||||
let currentUser = null;
|
||||
|
||||
// 초기화
|
||||
window.onload = () => {
|
||||
// 로그인 체크
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
currentUser = params.get('user');
|
||||
|
||||
if (!currentUser) {
|
||||
// 로컬스토리지에서 최근 사용자 확인
|
||||
const recentUser = localStorage.getItem('m-project-recent-user');
|
||||
if (recentUser) {
|
||||
currentUser = recentUser;
|
||||
} else {
|
||||
window.location.href = 'index.html';
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('userName').textContent = currentUser;
|
||||
loadData();
|
||||
};
|
||||
|
||||
// 데이터 로드
|
||||
function loadData() {
|
||||
const savedData = JSON.parse(localStorage.getItem('m-project-data') || '[]');
|
||||
allData = savedData.filter(item => item.user === currentUser);
|
||||
|
||||
updateStats();
|
||||
createCharts();
|
||||
displayGallery();
|
||||
}
|
||||
|
||||
// 통계 업데이트
|
||||
function updateStats() {
|
||||
const now = new Date();
|
||||
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||||
const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
|
||||
|
||||
document.getElementById('totalCount').textContent = allData.length;
|
||||
|
||||
// 오늘 카운트
|
||||
const todayCount = allData.filter(item => {
|
||||
const itemDate = new Date(item.timestamp);
|
||||
return itemDate >= today;
|
||||
}).length;
|
||||
document.getElementById('todayCount').textContent = todayCount;
|
||||
|
||||
// 이번 주 카운트
|
||||
const weekCount = allData.filter(item => {
|
||||
const itemDate = new Date(item.timestamp);
|
||||
return itemDate >= weekAgo;
|
||||
}).length;
|
||||
document.getElementById('weekCount').textContent = weekCount;
|
||||
|
||||
// 가장 많은 카테고리
|
||||
const categoryCounts = {};
|
||||
allData.forEach(item => {
|
||||
categoryCounts[item.category] = (categoryCounts[item.category] || 0) + 1;
|
||||
});
|
||||
|
||||
const categoryNames = {
|
||||
food: '음식',
|
||||
place: '장소',
|
||||
people: '사람',
|
||||
object: '물건',
|
||||
event: '행사',
|
||||
etc: '기타'
|
||||
};
|
||||
|
||||
if (Object.keys(categoryCounts).length > 0) {
|
||||
const topCat = Object.entries(categoryCounts)
|
||||
.sort((a, b) => b[1] - a[1])[0][0];
|
||||
document.getElementById('topCategory').textContent = categoryNames[topCat];
|
||||
}
|
||||
}
|
||||
|
||||
// 차트 생성
|
||||
function createCharts() {
|
||||
// 카테고리별 차트
|
||||
const categoryCounts = {};
|
||||
allData.forEach(item => {
|
||||
categoryCounts[item.category] = (categoryCounts[item.category] || 0) + 1;
|
||||
});
|
||||
|
||||
const categoryNames = {
|
||||
food: '음식',
|
||||
place: '장소',
|
||||
people: '사람',
|
||||
object: '물건',
|
||||
event: '행사',
|
||||
etc: '기타'
|
||||
};
|
||||
|
||||
const categoryCtx = document.getElementById('categoryChart').getContext('2d');
|
||||
new Chart(categoryCtx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: Object.keys(categoryCounts).map(key => categoryNames[key]),
|
||||
datasets: [{
|
||||
data: Object.values(categoryCounts),
|
||||
backgroundColor: [
|
||||
'#0ea5e9',
|
||||
'#38bdf8',
|
||||
'#7dd3fc',
|
||||
'#bae6fd',
|
||||
'#e0f2fe',
|
||||
'#f0f9ff'
|
||||
]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 일별 추이 차트
|
||||
const today = new Date();
|
||||
const dates = [];
|
||||
const counts = [];
|
||||
|
||||
for (let i = 6; i >= 0; i--) {
|
||||
const date = new Date(today);
|
||||
date.setDate(date.getDate() - i);
|
||||
date.setHours(0, 0, 0, 0);
|
||||
|
||||
const nextDate = new Date(date);
|
||||
nextDate.setDate(nextDate.getDate() + 1);
|
||||
|
||||
const count = allData.filter(item => {
|
||||
const itemDate = new Date(item.timestamp);
|
||||
return itemDate >= date && itemDate < nextDate;
|
||||
}).length;
|
||||
|
||||
dates.push(date.toLocaleDateString('ko-KR', { month: 'short', day: 'numeric' }));
|
||||
counts.push(count);
|
||||
}
|
||||
|
||||
const trendCtx = document.getElementById('trendChart').getContext('2d');
|
||||
new Chart(trendCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: dates,
|
||||
datasets: [{
|
||||
label: '업로드 수',
|
||||
data: counts,
|
||||
borderColor: '#0ea5e9',
|
||||
backgroundColor: 'rgba(14, 165, 233, 0.1)',
|
||||
tension: 0.4
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
stepSize: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 갤러리 표시
|
||||
function displayGallery(filter = 'all') {
|
||||
const gallery = document.getElementById('gallery');
|
||||
gallery.innerHTML = '';
|
||||
|
||||
const filteredData = filter === 'all'
|
||||
? allData
|
||||
: allData.filter(item => item.category === filter);
|
||||
|
||||
// 최신순으로 정렬
|
||||
filteredData.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
|
||||
|
||||
filteredData.forEach(item => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'gallery-item';
|
||||
div.innerHTML = `<img src="${item.image}" class="w-full h-24 object-cover rounded-lg shadow-sm">`;
|
||||
div.onclick = () => showModal(item);
|
||||
gallery.appendChild(div);
|
||||
});
|
||||
|
||||
if (filteredData.length === 0) {
|
||||
gallery.innerHTML = '<p class="col-span-full text-center text-gray-500 py-8">표시할 이미지가 없습니다.</p>';
|
||||
}
|
||||
}
|
||||
|
||||
// 필터 변경
|
||||
document.getElementById('categoryFilter').addEventListener('change', (e) => {
|
||||
displayGallery(e.target.value);
|
||||
});
|
||||
|
||||
// 모달 표시
|
||||
function showModal(item) {
|
||||
const categoryNames = {
|
||||
food: '음식',
|
||||
place: '장소',
|
||||
people: '사람',
|
||||
object: '물건',
|
||||
event: '행사',
|
||||
etc: '기타'
|
||||
};
|
||||
|
||||
document.getElementById('modalImage').src = item.image;
|
||||
document.getElementById('modalDescription').textContent = item.description;
|
||||
document.getElementById('modalInfo').textContent =
|
||||
`${categoryNames[item.category]} • ${new Date(item.timestamp).toLocaleString('ko-KR')}`;
|
||||
document.getElementById('imageModal').classList.add('show');
|
||||
}
|
||||
|
||||
// 모달 닫기
|
||||
function closeModal() {
|
||||
document.getElementById('imageModal').classList.remove('show');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
378
daily-work.html
378
daily-work.html
@@ -1,378 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>일일 공수 입력</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
:root {
|
||||
--primary: #3b82f6;
|
||||
--primary-dark: #2563eb;
|
||||
--success: #10b981;
|
||||
--gray-50: #f9fafb;
|
||||
--gray-100: #f3f4f6;
|
||||
--gray-200: #e5e7eb;
|
||||
--gray-300: #d1d5db;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--gray-50);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--primary-dark);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: var(--success);
|
||||
color: white;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background-color: #059669;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.input-field {
|
||||
border: 1px solid var(--gray-300);
|
||||
background: white;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.input-field:focus {
|
||||
border-color: var(--primary);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.work-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.work-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
background: linear-gradient(135deg, #3b82f6, #2563eb);
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<!-- 헤더 -->
|
||||
<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-calendar-check text-blue-500 mr-2"></i>일일 공수 입력
|
||||
</h1>
|
||||
<a href="index.html" class="text-gray-600 hover:text-gray-800">
|
||||
<i class="fas fa-arrow-left mr-2"></i>돌아가기
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 메인 컨텐츠 -->
|
||||
<main class="container mx-auto px-4 py-6 max-w-2xl">
|
||||
<!-- 입력 카드 -->
|
||||
<div class="work-card p-6 mb-6">
|
||||
<h2 class="text-lg font-semibold text-gray-800 mb-6">
|
||||
<i class="fas fa-edit text-blue-500 mr-2"></i>공수 입력
|
||||
</h2>
|
||||
|
||||
<form id="dailyWorkForm" class="space-y-6">
|
||||
<!-- 날짜 선택 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
<i class="fas fa-calendar mr-1"></i>날짜
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
id="workDate"
|
||||
class="input-field w-full px-4 py-3 rounded-lg text-lg"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 인원 입력 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
<i class="fas fa-users mr-1"></i>작업 인원
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="workerCount"
|
||||
min="1"
|
||||
class="input-field w-full px-4 py-3 rounded-lg text-lg"
|
||||
placeholder="예: 5"
|
||||
required
|
||||
>
|
||||
<p class="text-sm text-gray-500 mt-1">기본 근무시간: 8시간/인</p>
|
||||
</div>
|
||||
|
||||
<!-- 잔업 섹션 -->
|
||||
<div class="border-t pt-4">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<label class="text-sm font-medium text-gray-700">
|
||||
<i class="fas fa-clock mr-1"></i>잔업 여부
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
id="overtimeToggle"
|
||||
class="px-4 py-2 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors"
|
||||
onclick="toggleOvertime()"
|
||||
>
|
||||
<i class="fas fa-plus mr-2"></i>잔업 추가
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 잔업 입력 영역 -->
|
||||
<div id="overtimeSection" class="hidden space-y-3 bg-gray-50 p-4 rounded-lg">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">잔업 인원</label>
|
||||
<input
|
||||
type="number"
|
||||
id="overtimeWorkers"
|
||||
min="0"
|
||||
class="input-field w-full px-3 py-2 rounded"
|
||||
placeholder="명"
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">잔업 시간</label>
|
||||
<input
|
||||
type="number"
|
||||
id="overtimeHours"
|
||||
min="0"
|
||||
step="0.5"
|
||||
class="input-field w-full px-3 py-2 rounded"
|
||||
placeholder="시간"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 총 공수 표시 -->
|
||||
<div class="bg-blue-50 rounded-lg p-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-700 font-medium">예상 총 공수</span>
|
||||
<span class="text-2xl font-bold text-blue-600" id="totalHours">0시간</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 저장 버튼 -->
|
||||
<button type="submit" class="btn-primary w-full py-3 rounded-lg font-medium text-lg">
|
||||
<i class="fas fa-save mr-2"></i>저장하기
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- 최근 입력 내역 -->
|
||||
<div class="work-card p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-4">
|
||||
<i class="fas fa-history text-gray-500 mr-2"></i>최근 입력 내역
|
||||
</h3>
|
||||
<div id="recentEntries" class="space-y-3">
|
||||
<!-- 최근 입력 내역이 여기에 표시됩니다 -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 오늘 날짜로 초기화
|
||||
document.getElementById('workDate').valueAsDate = new Date();
|
||||
|
||||
// 잔업 토글
|
||||
function toggleOvertime() {
|
||||
const section = document.getElementById('overtimeSection');
|
||||
const button = document.getElementById('overtimeToggle');
|
||||
|
||||
if (section.classList.contains('hidden')) {
|
||||
section.classList.remove('hidden');
|
||||
button.innerHTML = '<i class="fas fa-minus mr-2"></i>잔업 취소';
|
||||
button.classList.add('bg-gray-100');
|
||||
} else {
|
||||
section.classList.add('hidden');
|
||||
button.innerHTML = '<i class="fas fa-plus mr-2"></i>잔업 추가';
|
||||
button.classList.remove('bg-gray-100');
|
||||
// 잔업 입력값 초기화
|
||||
document.getElementById('overtimeWorkers').value = '';
|
||||
document.getElementById('overtimeHours').value = '';
|
||||
}
|
||||
calculateTotal();
|
||||
}
|
||||
|
||||
// 총 공수 계산
|
||||
function calculateTotal() {
|
||||
const workerCount = parseInt(document.getElementById('workerCount').value) || 0;
|
||||
const regularHours = workerCount * 8; // 기본 8시간
|
||||
|
||||
let overtimeTotal = 0;
|
||||
if (!document.getElementById('overtimeSection').classList.contains('hidden')) {
|
||||
const overtimeWorkers = parseInt(document.getElementById('overtimeWorkers').value) || 0;
|
||||
const overtimeHours = parseFloat(document.getElementById('overtimeHours').value) || 0;
|
||||
overtimeTotal = overtimeWorkers * overtimeHours;
|
||||
}
|
||||
|
||||
const total = regularHours + overtimeTotal;
|
||||
document.getElementById('totalHours').textContent = `${total}시간`;
|
||||
}
|
||||
|
||||
// 입력값 변경 시 총 공수 재계산
|
||||
document.getElementById('workerCount').addEventListener('input', calculateTotal);
|
||||
document.getElementById('overtimeWorkers').addEventListener('input', calculateTotal);
|
||||
document.getElementById('overtimeHours').addEventListener('input', calculateTotal);
|
||||
|
||||
// 폼 제출
|
||||
document.getElementById('dailyWorkForm').addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const workDate = document.getElementById('workDate').value;
|
||||
const workerCount = parseInt(document.getElementById('workerCount').value);
|
||||
const regularHours = workerCount * 8;
|
||||
|
||||
let overtimeWorkers = 0;
|
||||
let overtimeHours = 0;
|
||||
let overtimeTotal = 0;
|
||||
|
||||
if (!document.getElementById('overtimeSection').classList.contains('hidden')) {
|
||||
overtimeWorkers = parseInt(document.getElementById('overtimeWorkers').value) || 0;
|
||||
overtimeHours = parseFloat(document.getElementById('overtimeHours').value) || 0;
|
||||
overtimeTotal = overtimeWorkers * overtimeHours;
|
||||
}
|
||||
|
||||
const totalHours = regularHours + overtimeTotal;
|
||||
|
||||
// 데이터 객체 생성
|
||||
const workData = {
|
||||
id: Date.now(),
|
||||
date: workDate,
|
||||
workerCount: workerCount,
|
||||
regularHours: regularHours,
|
||||
overtimeWorkers: overtimeWorkers,
|
||||
overtimeHours: overtimeHours,
|
||||
overtimeTotal: overtimeTotal,
|
||||
totalHours: totalHours,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
// 로컬 스토리지에 저장
|
||||
saveWorkData(workData);
|
||||
|
||||
// 성공 메시지
|
||||
showSuccessMessage();
|
||||
|
||||
// 폼 초기화
|
||||
resetForm();
|
||||
|
||||
// 최근 내역 갱신
|
||||
displayRecentEntries();
|
||||
});
|
||||
|
||||
// 데이터 저장
|
||||
function saveWorkData(data) {
|
||||
const savedData = JSON.parse(localStorage.getItem('daily-work-data') || '[]');
|
||||
|
||||
// 같은 날짜 데이터가 있으면 업데이트
|
||||
const existingIndex = savedData.findIndex(item => item.date === data.date);
|
||||
if (existingIndex > -1) {
|
||||
savedData[existingIndex] = data;
|
||||
} else {
|
||||
savedData.push(data);
|
||||
}
|
||||
|
||||
localStorage.setItem('daily-work-data', JSON.stringify(savedData));
|
||||
}
|
||||
|
||||
// 성공 메시지
|
||||
function showSuccessMessage() {
|
||||
const button = document.querySelector('button[type="submit"]');
|
||||
const originalHTML = button.innerHTML;
|
||||
button.innerHTML = '<i class="fas fa-check-circle mr-2"></i>저장 완료!';
|
||||
button.classList.remove('btn-primary');
|
||||
button.classList.add('btn-success');
|
||||
|
||||
setTimeout(() => {
|
||||
button.innerHTML = originalHTML;
|
||||
button.classList.remove('btn-success');
|
||||
button.classList.add('btn-primary');
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// 폼 초기화
|
||||
function resetForm() {
|
||||
document.getElementById('workerCount').value = '';
|
||||
document.getElementById('overtimeWorkers').value = '';
|
||||
document.getElementById('overtimeHours').value = '';
|
||||
document.getElementById('overtimeSection').classList.add('hidden');
|
||||
document.getElementById('overtimeToggle').innerHTML = '<i class="fas fa-plus mr-2"></i>잔업 추가';
|
||||
document.getElementById('overtimeToggle').classList.remove('bg-gray-100');
|
||||
document.getElementById('totalHours').textContent = '0시간';
|
||||
|
||||
// 날짜는 오늘로 유지
|
||||
document.getElementById('workDate').valueAsDate = new Date();
|
||||
}
|
||||
|
||||
// 최근 입력 내역 표시
|
||||
function displayRecentEntries() {
|
||||
const container = document.getElementById('recentEntries');
|
||||
const savedData = JSON.parse(localStorage.getItem('daily-work-data') || '[]');
|
||||
|
||||
// 최근 7개만 표시
|
||||
const recentData = savedData.slice(-7).reverse();
|
||||
|
||||
if (recentData.length === 0) {
|
||||
container.innerHTML = '<p class="text-gray-500 text-center py-4">입력된 내역이 없습니다.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = recentData.map(item => {
|
||||
const date = new Date(item.date);
|
||||
const dateStr = date.toLocaleDateString('ko-KR', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
weekday: 'short'
|
||||
});
|
||||
|
||||
return `
|
||||
<div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
|
||||
<div>
|
||||
<p class="font-medium text-gray-800">${dateStr}</p>
|
||||
<p class="text-sm text-gray-600">
|
||||
인원: ${item.workerCount}명
|
||||
${item.overtimeTotal > 0 ? `• 잔업: ${item.overtimeWorkers}명 × ${item.overtimeHours}시간` : ''}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-lg font-bold text-blue-600">${item.totalHours}시간</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// 페이지 로드 시 최근 내역 표시
|
||||
displayRecentEntries();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -305,10 +305,14 @@
|
||||
// 사용자 목록 로드
|
||||
async function loadUsers() {
|
||||
try {
|
||||
// 백엔드 API에서 사용자 목록 로드
|
||||
users = await AuthAPI.getUsers();
|
||||
displayUsers();
|
||||
} catch (error) {
|
||||
console.error('사용자 목록 로드 실패:', error);
|
||||
// API 실패 시 빈 배열로 초기화
|
||||
users = [];
|
||||
displayUsers();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -339,18 +343,53 @@
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
${user.username !== 'hyungi' ? `
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
onclick="deleteUser('${user.username}')"
|
||||
class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 transition-colors text-sm"
|
||||
onclick="resetPassword('${user.username}')"
|
||||
class="px-3 py-1 bg-yellow-500 text-white rounded hover:bg-yellow-600 transition-colors text-sm"
|
||||
>
|
||||
<i class="fas fa-trash mr-1"></i>삭제
|
||||
<i class="fas fa-key mr-1"></i>비밀번호 초기화
|
||||
</button>
|
||||
` : ''}
|
||||
${user.username !== 'hyungi' ? `
|
||||
<button
|
||||
onclick="deleteUser('${user.username}')"
|
||||
class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 transition-colors text-sm"
|
||||
>
|
||||
<i class="fas fa-trash mr-1"></i>삭제
|
||||
</button>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// 비밀번호 초기화
|
||||
async function resetPassword(username) {
|
||||
if (!confirm(`${username} 사용자의 비밀번호를 "000000"으로 초기화하시겠습니까?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 사용자 ID 찾기
|
||||
const user = users.find(u => u.username === username);
|
||||
if (!user) {
|
||||
alert('사용자를 찾을 수 없습니다.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 백엔드 API로 비밀번호 초기화
|
||||
await AuthAPI.resetPassword(user.id, '000000');
|
||||
|
||||
alert(`${username} 사용자의 비밀번호가 "000000"으로 초기화되었습니다.`);
|
||||
|
||||
// 목록 새로고침
|
||||
await loadUsers();
|
||||
|
||||
} catch (error) {
|
||||
alert('비밀번호 초기화에 실패했습니다: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 사용자 삭제
|
||||
async function deleteUser(username) {
|
||||
if (!confirm(`정말 ${username} 사용자를 삭제하시겠습니까?`)) {
|
||||
|
||||
@@ -1,417 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>M-Project - 차트</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--sky-50: #f0f9ff;
|
||||
--sky-100: #e0f2fe;
|
||||
--sky-200: #bae6fd;
|
||||
--sky-300: #7dd3fc;
|
||||
--sky-400: #38bdf8;
|
||||
--sky-500: #0ea5e9;
|
||||
--gray-100: #f3f4f6;
|
||||
--gray-200: #e5e7eb;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(to bottom, #ffffff, #f0f9ff);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-left: 4px solid var(--sky-400);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.gallery-item:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal.show {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 헤더 -->
|
||||
<header class="glass sticky top-0 z-50 shadow-sm">
|
||||
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
|
||||
<h1 class="text-xl font-bold text-gray-800">
|
||||
<i class="fas fa-chart-bar text-sky-500 mr-2"></i>차트
|
||||
</h1>
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="index.html" class="text-sky-600 hover:text-sky-700">
|
||||
<i class="fas fa-camera text-xl"></i>
|
||||
</a>
|
||||
<span class="text-gray-600 text-sm" id="userName"></span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 메인 컨텐츠 -->
|
||||
<main class="container mx-auto px-4 py-6 max-w-6xl">
|
||||
<!-- 통계 카드 -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
||||
<div class="stat-card p-4 rounded-xl shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600">전체 사진</p>
|
||||
<p class="text-2xl font-bold text-gray-800" id="totalCount">0</p>
|
||||
</div>
|
||||
<i class="fas fa-images text-3xl text-sky-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card p-4 rounded-xl shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600">오늘</p>
|
||||
<p class="text-2xl font-bold text-gray-800" id="todayCount">0</p>
|
||||
</div>
|
||||
<i class="fas fa-calendar-day text-3xl text-sky-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card p-4 rounded-xl shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600">이번 주</p>
|
||||
<p class="text-2xl font-bold text-gray-800" id="weekCount">0</p>
|
||||
</div>
|
||||
<i class="fas fa-calendar-week text-3xl text-sky-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card p-4 rounded-xl shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600">가장 많은</p>
|
||||
<p class="text-lg font-bold text-gray-800" id="topCategory">-</p>
|
||||
</div>
|
||||
<i class="fas fa-trophy text-3xl text-sky-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 차트 영역 -->
|
||||
<div class="grid md:grid-cols-2 gap-6 mb-8">
|
||||
<!-- 카테고리별 차트 -->
|
||||
<div class="glass p-6 rounded-xl shadow-lg">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-4">카테고리별 분포</h3>
|
||||
<canvas id="categoryChart" width="400" height="300"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- 일별 추이 차트 -->
|
||||
<div class="glass p-6 rounded-xl shadow-lg">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-4">최근 7일 추이</h3>
|
||||
<canvas id="trendChart" width="400" height="300"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 갤러리 -->
|
||||
<div class="glass p-6 rounded-xl shadow-lg">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-semibold text-gray-800">전체 갤러리</h3>
|
||||
<select id="categoryFilter" class="px-4 py-2 rounded-lg border border-gray-300 focus:border-sky-400 focus:outline-none">
|
||||
<option value="all">전체 카테고리</option>
|
||||
<option value="food">음식</option>
|
||||
<option value="place">장소</option>
|
||||
<option value="people">사람</option>
|
||||
<option value="object">물건</option>
|
||||
<option value="event">행사</option>
|
||||
<option value="etc">기타</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="gallery" class="grid grid-cols-3 md:grid-cols-6 gap-3">
|
||||
<!-- 갤러리 아이템들이 여기에 표시됩니다 -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 이미지 모달 -->
|
||||
<div id="imageModal" class="modal" onclick="closeModal()">
|
||||
<div class="bg-white rounded-xl p-4 max-w-2xl mx-4" onclick="event.stopPropagation()">
|
||||
<img id="modalImage" class="w-full rounded-lg mb-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<p class="font-semibold text-lg" id="modalDescription"></p>
|
||||
<p class="text-sm text-gray-600 mt-1" id="modalInfo"></p>
|
||||
</div>
|
||||
<button onclick="closeModal()" class="text-gray-500 hover:text-gray-700">
|
||||
<i class="fas fa-times text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let allData = [];
|
||||
let currentUser = null;
|
||||
|
||||
// 초기화
|
||||
window.onload = () => {
|
||||
// 로그인 체크
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
currentUser = params.get('user');
|
||||
|
||||
if (!currentUser) {
|
||||
// 로컬스토리지에서 최근 사용자 확인
|
||||
const recentUser = localStorage.getItem('m-project-recent-user');
|
||||
if (recentUser) {
|
||||
currentUser = recentUser;
|
||||
} else {
|
||||
window.location.href = 'index.html';
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('userName').textContent = currentUser;
|
||||
loadData();
|
||||
};
|
||||
|
||||
// 데이터 로드
|
||||
function loadData() {
|
||||
const savedData = JSON.parse(localStorage.getItem('m-project-data') || '[]');
|
||||
allData = savedData.filter(item => item.user === currentUser);
|
||||
|
||||
updateStats();
|
||||
createCharts();
|
||||
displayGallery();
|
||||
}
|
||||
|
||||
// 통계 업데이트
|
||||
function updateStats() {
|
||||
const now = new Date();
|
||||
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||||
const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
|
||||
|
||||
document.getElementById('totalCount').textContent = allData.length;
|
||||
|
||||
// 오늘 카운트
|
||||
const todayCount = allData.filter(item => {
|
||||
const itemDate = new Date(item.timestamp);
|
||||
return itemDate >= today;
|
||||
}).length;
|
||||
document.getElementById('todayCount').textContent = todayCount;
|
||||
|
||||
// 이번 주 카운트
|
||||
const weekCount = allData.filter(item => {
|
||||
const itemDate = new Date(item.timestamp);
|
||||
return itemDate >= weekAgo;
|
||||
}).length;
|
||||
document.getElementById('weekCount').textContent = weekCount;
|
||||
|
||||
// 가장 많은 카테고리
|
||||
const categoryCounts = {};
|
||||
allData.forEach(item => {
|
||||
categoryCounts[item.category] = (categoryCounts[item.category] || 0) + 1;
|
||||
});
|
||||
|
||||
const categoryNames = {
|
||||
food: '음식',
|
||||
place: '장소',
|
||||
people: '사람',
|
||||
object: '물건',
|
||||
event: '행사',
|
||||
etc: '기타'
|
||||
};
|
||||
|
||||
if (Object.keys(categoryCounts).length > 0) {
|
||||
const topCat = Object.entries(categoryCounts)
|
||||
.sort((a, b) => b[1] - a[1])[0][0];
|
||||
document.getElementById('topCategory').textContent = categoryNames[topCat];
|
||||
}
|
||||
}
|
||||
|
||||
// 차트 생성
|
||||
function createCharts() {
|
||||
// 카테고리별 차트
|
||||
const categoryCounts = {};
|
||||
allData.forEach(item => {
|
||||
categoryCounts[item.category] = (categoryCounts[item.category] || 0) + 1;
|
||||
});
|
||||
|
||||
const categoryNames = {
|
||||
food: '음식',
|
||||
place: '장소',
|
||||
people: '사람',
|
||||
object: '물건',
|
||||
event: '행사',
|
||||
etc: '기타'
|
||||
};
|
||||
|
||||
const categoryCtx = document.getElementById('categoryChart').getContext('2d');
|
||||
new Chart(categoryCtx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: Object.keys(categoryCounts).map(key => categoryNames[key]),
|
||||
datasets: [{
|
||||
data: Object.values(categoryCounts),
|
||||
backgroundColor: [
|
||||
'#0ea5e9',
|
||||
'#38bdf8',
|
||||
'#7dd3fc',
|
||||
'#bae6fd',
|
||||
'#e0f2fe',
|
||||
'#f0f9ff'
|
||||
]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 일별 추이 차트
|
||||
const today = new Date();
|
||||
const dates = [];
|
||||
const counts = [];
|
||||
|
||||
for (let i = 6; i >= 0; i--) {
|
||||
const date = new Date(today);
|
||||
date.setDate(date.getDate() - i);
|
||||
date.setHours(0, 0, 0, 0);
|
||||
|
||||
const nextDate = new Date(date);
|
||||
nextDate.setDate(nextDate.getDate() + 1);
|
||||
|
||||
const count = allData.filter(item => {
|
||||
const itemDate = new Date(item.timestamp);
|
||||
return itemDate >= date && itemDate < nextDate;
|
||||
}).length;
|
||||
|
||||
dates.push(date.toLocaleDateString('ko-KR', { month: 'short', day: 'numeric' }));
|
||||
counts.push(count);
|
||||
}
|
||||
|
||||
const trendCtx = document.getElementById('trendChart').getContext('2d');
|
||||
new Chart(trendCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: dates,
|
||||
datasets: [{
|
||||
label: '업로드 수',
|
||||
data: counts,
|
||||
borderColor: '#0ea5e9',
|
||||
backgroundColor: 'rgba(14, 165, 233, 0.1)',
|
||||
tension: 0.4
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
stepSize: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 갤러리 표시
|
||||
function displayGallery(filter = 'all') {
|
||||
const gallery = document.getElementById('gallery');
|
||||
gallery.innerHTML = '';
|
||||
|
||||
const filteredData = filter === 'all'
|
||||
? allData
|
||||
: allData.filter(item => item.category === filter);
|
||||
|
||||
// 최신순으로 정렬
|
||||
filteredData.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
|
||||
|
||||
filteredData.forEach(item => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'gallery-item';
|
||||
div.innerHTML = `<img src="${item.image}" class="w-full h-24 object-cover rounded-lg shadow-sm">`;
|
||||
div.onclick = () => showModal(item);
|
||||
gallery.appendChild(div);
|
||||
});
|
||||
|
||||
if (filteredData.length === 0) {
|
||||
gallery.innerHTML = '<p class="col-span-full text-center text-gray-500 py-8">표시할 이미지가 없습니다.</p>';
|
||||
}
|
||||
}
|
||||
|
||||
// 필터 변경
|
||||
document.getElementById('categoryFilter').addEventListener('change', (e) => {
|
||||
displayGallery(e.target.value);
|
||||
});
|
||||
|
||||
// 모달 표시
|
||||
function showModal(item) {
|
||||
const categoryNames = {
|
||||
food: '음식',
|
||||
place: '장소',
|
||||
people: '사람',
|
||||
object: '물건',
|
||||
event: '행사',
|
||||
etc: '기타'
|
||||
};
|
||||
|
||||
document.getElementById('modalImage').src = item.image;
|
||||
document.getElementById('modalDescription').textContent = item.description;
|
||||
document.getElementById('modalInfo').textContent =
|
||||
`${categoryNames[item.category]} • ${new Date(item.timestamp).toLocaleString('ko-KR')}`;
|
||||
document.getElementById('imageModal').classList.add('show');
|
||||
}
|
||||
|
||||
// 모달 닫기
|
||||
function closeModal() {
|
||||
document.getElementById('imageModal').classList.remove('show');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,193 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>API 프로젝트 생성 - M Project</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<script src="/static/js/api.js?v=20250917"></script>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<div class="container mx-auto px-4 py-8 max-w-2xl">
|
||||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||
<h1 class="text-2xl font-bold text-gray-800 mb-6">
|
||||
<i class="fas fa-plus text-green-500 mr-2"></i>API 프로젝트 생성
|
||||
</h1>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="p-4 bg-green-50 border border-green-200 rounded-lg">
|
||||
<h3 class="font-semibold text-green-800 mb-2">🎯 작업 내용</h3>
|
||||
<p class="text-green-700 text-sm">
|
||||
백엔드 API를 통해 TKR-25009R M Project를 생성합니다.<br>
|
||||
데이터베이스에 실제 프로젝트 레코드가 생성됩니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="status" class="space-y-2">
|
||||
<!-- 상태 메시지가 여기에 표시됩니다 -->
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="createBtn"
|
||||
onclick="createProject()"
|
||||
class="w-full bg-green-500 text-white py-3 px-4 rounded-lg hover:bg-green-600 transition-colors font-medium"
|
||||
>
|
||||
<i class="fas fa-plus mr-2"></i>TKR-25009R 프로젝트 생성
|
||||
</button>
|
||||
|
||||
<a href="fix-api-data.html" class="block text-center text-orange-600 hover:text-orange-800 mt-4">
|
||||
<i class="fas fa-wrench mr-1"></i>API 데이터 수정 도구로 이동
|
||||
</a>
|
||||
|
||||
<a href="debug-data.html" class="block text-center text-blue-600 hover:text-blue-800 mt-2">
|
||||
<i class="fas fa-bug mr-1"></i>디버그 도구로 이동
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentUser = null;
|
||||
|
||||
// 페이지 로드 시 사용자 확인
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const user = TokenManager.getUser();
|
||||
if (!user) {
|
||||
alert('로그인이 필요합니다.');
|
||||
window.location.href = 'index.html';
|
||||
return;
|
||||
}
|
||||
|
||||
currentUser = user;
|
||||
|
||||
if (currentUser.role !== 'admin') {
|
||||
alert('관리자만 접근 가능합니다.');
|
||||
window.location.href = 'index.html';
|
||||
return;
|
||||
}
|
||||
|
||||
addStatus('✅ 관리자 권한 확인됨', 'text-green-600');
|
||||
});
|
||||
|
||||
function addStatus(message, className = 'text-gray-600') {
|
||||
const statusDiv = document.getElementById('status');
|
||||
const p = document.createElement('p');
|
||||
p.className = `text-sm ${className}`;
|
||||
p.innerHTML = `<i class="fas fa-info-circle mr-2"></i>${message}`;
|
||||
statusDiv.appendChild(p);
|
||||
}
|
||||
|
||||
async function createProject() {
|
||||
const btn = document.getElementById('createBtn');
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>생성 중...';
|
||||
|
||||
try {
|
||||
// 1. 기존 프로젝트 확인
|
||||
addStatus('기존 프로젝트 확인 중...');
|
||||
|
||||
let existingProjects = [];
|
||||
try {
|
||||
existingProjects = await ProjectsAPI.getAll();
|
||||
addStatus(`기존 프로젝트 ${existingProjects.length}개 발견`, 'text-blue-600');
|
||||
} catch (error) {
|
||||
addStatus('기존 프로젝트 조회 실패, 새로 생성합니다.', 'text-yellow-600');
|
||||
}
|
||||
|
||||
// TKR-25009R 프로젝트가 이미 있는지 확인
|
||||
const existingMProject = existingProjects.find(p => p.job_no === 'TKR-25009R');
|
||||
if (existingMProject) {
|
||||
addStatus(`✅ TKR-25009R 프로젝트가 이미 존재합니다 (ID: ${existingMProject.id})`, 'text-green-600');
|
||||
|
||||
// localStorage 프로젝트 ID 업데이트
|
||||
updateLocalStorageProjectId(existingMProject.id);
|
||||
|
||||
btn.innerHTML = '<i class="fas fa-check mr-2"></i>이미 존재함';
|
||||
btn.className = 'w-full bg-blue-500 text-white py-3 px-4 rounded-lg font-medium';
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. 새 프로젝트 생성
|
||||
addStatus('TKR-25009R 프로젝트 생성 중...');
|
||||
|
||||
const projectData = {
|
||||
job_no: 'TKR-25009R',
|
||||
project_name: 'M Project'
|
||||
};
|
||||
|
||||
const newProject = await ProjectsAPI.create(projectData);
|
||||
addStatus(`✅ 프로젝트 생성 완료! ID: ${newProject.id}`, 'text-green-600');
|
||||
|
||||
// 3. localStorage 프로젝트 ID 업데이트
|
||||
updateLocalStorageProjectId(newProject.id);
|
||||
|
||||
// 완료
|
||||
addStatus('🎉 프로젝트 생성 및 동기화 완료!', 'text-green-600 font-bold');
|
||||
addStatus('이제 API 데이터 수정 도구를 실행하세요.', 'text-blue-600');
|
||||
|
||||
btn.innerHTML = '<i class="fas fa-check mr-2"></i>생성 완료';
|
||||
btn.className = 'w-full bg-green-500 text-white py-3 px-4 rounded-lg font-medium';
|
||||
|
||||
} catch (error) {
|
||||
addStatus(`❌ 오류 발생: ${error.message}`, 'text-red-600');
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = '<i class="fas fa-redo mr-2"></i>다시 시도';
|
||||
}
|
||||
}
|
||||
|
||||
function updateLocalStorageProjectId(apiProjectId) {
|
||||
try {
|
||||
// localStorage 프로젝트 데이터 업데이트
|
||||
const projects = JSON.parse(localStorage.getItem('work-report-projects') || '[]');
|
||||
const mProject = projects.find(p => p.jobNo === 'TKR-25009R');
|
||||
|
||||
if (mProject) {
|
||||
const oldId = mProject.id;
|
||||
mProject.id = apiProjectId;
|
||||
localStorage.setItem('work-report-projects', JSON.stringify(projects));
|
||||
addStatus(`localStorage 프로젝트 ID 업데이트: ${oldId} → ${apiProjectId}`, 'text-blue-600');
|
||||
|
||||
// 일일 공수 데이터도 업데이트
|
||||
const dailyWorkData = JSON.parse(localStorage.getItem('daily-work-data') || '[]');
|
||||
let updatedCount = 0;
|
||||
|
||||
dailyWorkData.forEach(dayData => {
|
||||
if (dayData.projects) {
|
||||
dayData.projects.forEach(project => {
|
||||
if (project.projectId == oldId || project.projectId == 1) {
|
||||
project.projectId = apiProjectId;
|
||||
project.projectName = 'TKR-25009R - M Project';
|
||||
updatedCount++;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
localStorage.setItem('daily-work-data', JSON.stringify(dailyWorkData));
|
||||
addStatus(`일일 공수 데이터 ${updatedCount}개 업데이트`, 'text-blue-600');
|
||||
|
||||
// localStorage 부적합 사항도 업데이트
|
||||
const localIssues = JSON.parse(localStorage.getItem('work-report-issues') || '[]');
|
||||
let issueUpdatedCount = 0;
|
||||
|
||||
localIssues.forEach(issue => {
|
||||
if (issue.projectId == oldId || issue.projectId == 1 || issue.project_id == oldId || issue.project_id == 1) {
|
||||
issue.projectId = apiProjectId;
|
||||
issue.project_id = apiProjectId;
|
||||
issue.projectName = 'TKR-25009R - M Project';
|
||||
issue.project_name = 'TKR-25009R - M Project';
|
||||
issueUpdatedCount++;
|
||||
}
|
||||
});
|
||||
|
||||
localStorage.setItem('work-report-issues', JSON.stringify(localIssues));
|
||||
addStatus(`localStorage 부적합 사항 ${issueUpdatedCount}개 업데이트`, 'text-blue-600');
|
||||
}
|
||||
} catch (error) {
|
||||
addStatus(`localStorage 업데이트 실패: ${error.message}`, 'text-red-600');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,158 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>데이터 디버그 - M Project</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<script src="/static/js/api.js?v=20250917"></script>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||
<h1 class="text-2xl font-bold text-gray-800 mb-6">
|
||||
<i class="fas fa-bug text-red-500 mr-2"></i>데이터 디버그
|
||||
</h1>
|
||||
|
||||
<div class="space-y-6">
|
||||
<button
|
||||
onclick="debugData()"
|
||||
class="w-full bg-blue-500 text-white py-3 px-4 rounded-lg hover:bg-blue-600 transition-colors font-medium"
|
||||
>
|
||||
<i class="fas fa-search mr-2"></i>데이터 상태 확인
|
||||
</button>
|
||||
|
||||
<div id="results" class="space-y-4">
|
||||
<!-- 결과가 여기에 표시됩니다 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
async function debugData() {
|
||||
const resultsDiv = document.getElementById('results');
|
||||
resultsDiv.innerHTML = '<div class="text-center py-4"><i class="fas fa-spinner fa-spin text-2xl"></i></div>';
|
||||
|
||||
try {
|
||||
// 1. 프로젝트 데이터 확인
|
||||
const projects = JSON.parse(localStorage.getItem('work-report-projects') || '[]');
|
||||
|
||||
// 2. 부적합 사항 데이터 확인 (API)
|
||||
let apiIssues = [];
|
||||
try {
|
||||
apiIssues = await IssuesAPI.getAll();
|
||||
} catch (error) {
|
||||
console.error('API 조회 실패:', error);
|
||||
}
|
||||
|
||||
// 3. 부적합 사항 데이터 확인 (localStorage)
|
||||
const localIssues = JSON.parse(localStorage.getItem('work-report-issues') || '[]');
|
||||
|
||||
// 4. 일일 공수 데이터 확인
|
||||
const dailyWork = JSON.parse(localStorage.getItem('daily-work-data') || '[]');
|
||||
|
||||
// 결과 표시
|
||||
resultsDiv.innerHTML = `
|
||||
<div class="space-y-6">
|
||||
<!-- 프로젝트 데이터 -->
|
||||
<div class="bg-blue-50 p-4 rounded-lg">
|
||||
<h3 class="font-bold text-blue-800 mb-3">📁 프로젝트 데이터 (${projects.length}개)</h3>
|
||||
<div class="space-y-2">
|
||||
${projects.map(p => `
|
||||
<div class="bg-white p-3 rounded border">
|
||||
<div class="font-medium">ID: ${p.id}</div>
|
||||
<div>Job No: ${p.jobNo}</div>
|
||||
<div>이름: ${p.projectName}</div>
|
||||
<div>활성: ${p.isActive ? '✅' : '❌'}</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- API 부적합 사항 -->
|
||||
<div class="bg-green-50 p-4 rounded-lg">
|
||||
<h3 class="font-bold text-green-800 mb-3">🔗 API 부적합 사항 (${apiIssues.length}개)</h3>
|
||||
<div class="space-y-2 max-h-60 overflow-y-auto">
|
||||
${apiIssues.map(issue => `
|
||||
<div class="bg-white p-3 rounded border text-sm">
|
||||
<div><strong>ID:</strong> ${issue.id}</div>
|
||||
<div><strong>project_id:</strong> ${issue.project_id || 'null'}</div>
|
||||
<div><strong>project_name:</strong> ${issue.project_name || 'null'}</div>
|
||||
<div><strong>설명:</strong> ${issue.description?.substring(0, 50)}...</div>
|
||||
<div><strong>카테고리:</strong> ${issue.category}</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- localStorage 부적합 사항 -->
|
||||
<div class="bg-yellow-50 p-4 rounded-lg">
|
||||
<h3 class="font-bold text-yellow-800 mb-3">💾 localStorage 부적합 사항 (${localIssues.length}개)</h3>
|
||||
<div class="space-y-2 max-h-60 overflow-y-auto">
|
||||
${localIssues.map(issue => `
|
||||
<div class="bg-white p-3 rounded border text-sm">
|
||||
<div><strong>ID:</strong> ${issue.id}</div>
|
||||
<div><strong>project_id:</strong> ${issue.project_id || 'null'}</div>
|
||||
<div><strong>projectId:</strong> ${issue.projectId || 'null'}</div>
|
||||
<div><strong>project_name:</strong> ${issue.project_name || 'null'}</div>
|
||||
<div><strong>projectName:</strong> ${issue.projectName || 'null'}</div>
|
||||
<div><strong>설명:</strong> ${issue.description?.substring(0, 50)}...</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 일일 공수 데이터 -->
|
||||
<div class="bg-purple-50 p-4 rounded-lg">
|
||||
<h3 class="font-bold text-purple-800 mb-3">⏰ 일일 공수 데이터 (${dailyWork.length}개)</h3>
|
||||
<div class="space-y-2 max-h-60 overflow-y-auto">
|
||||
${dailyWork.map(day => `
|
||||
<div class="bg-white p-3 rounded border text-sm">
|
||||
<div><strong>날짜:</strong> ${day.date}</div>
|
||||
<div><strong>총 시간:</strong> ${day.totalHours}시간</div>
|
||||
<div><strong>프로젝트들:</strong></div>
|
||||
${day.projects?.map(p => `
|
||||
<div class="ml-4 text-xs">
|
||||
- ID: ${p.projectId}, 이름: ${p.projectName}, 시간: ${p.hours}
|
||||
</div>
|
||||
`).join('') || '<div class="ml-4 text-xs text-red-500">프로젝트 데이터 없음</div>'}
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 필터링 테스트 -->
|
||||
<div class="bg-red-50 p-4 rounded-lg">
|
||||
<h3 class="font-bold text-red-800 mb-3">🔍 필터링 테스트</h3>
|
||||
<div class="space-y-2">
|
||||
${projects.map(project => {
|
||||
const matchingApiIssues = apiIssues.filter(issue => issue.project_id == project.id);
|
||||
const matchingLocalIssues = localIssues.filter(issue => issue.project_id == project.id || issue.projectId == project.id);
|
||||
|
||||
return `
|
||||
<div class="bg-white p-3 rounded border">
|
||||
<div class="font-medium">${project.jobNo} - ${project.projectName} (ID: ${project.id})</div>
|
||||
<div class="text-sm">API 매칭: ${matchingApiIssues.length}개</div>
|
||||
<div class="text-sm">localStorage 매칭: ${matchingLocalIssues.length}개</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
} catch (error) {
|
||||
resultsDiv.innerHTML = `
|
||||
<div class="bg-red-50 p-4 rounded-lg">
|
||||
<h3 class="font-bold text-red-800 mb-3">❌ 오류 발생</h3>
|
||||
<pre class="text-sm">${error.message}</pre>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,171 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>API 데이터 수정 - M Project</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<script src="/static/js/api.js?v=20250917"></script>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<div class="container mx-auto px-4 py-8 max-w-2xl">
|
||||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||
<h1 class="text-2xl font-bold text-gray-800 mb-6">
|
||||
<i class="fas fa-wrench text-orange-500 mr-2"></i>API 데이터 수정
|
||||
</h1>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
|
||||
<h3 class="font-semibold text-yellow-800 mb-2">⚠️ 주의사항</h3>
|
||||
<p class="text-yellow-700 text-sm">
|
||||
이 작업은 API 데이터베이스의 모든 부적합 사항에 TKR-25009R 프로젝트 정보를 추가합니다.<br>
|
||||
관리자(hyungi) 계정으로 로그인한 상태에서만 실행하세요.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="status" class="space-y-2">
|
||||
<!-- 상태 메시지가 여기에 표시됩니다 -->
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="fixBtn"
|
||||
onclick="fixApiData()"
|
||||
class="w-full bg-orange-500 text-white py-3 px-4 rounded-lg hover:bg-orange-600 transition-colors font-medium"
|
||||
>
|
||||
<i class="fas fa-tools mr-2"></i>API 데이터 수정 시작
|
||||
</button>
|
||||
|
||||
<a href="debug-data.html" class="block text-center text-blue-600 hover:text-blue-800 mt-4">
|
||||
<i class="fas fa-bug mr-1"></i>디버그 도구로 이동
|
||||
</a>
|
||||
|
||||
<a href="index.html" class="block text-center text-gray-600 hover:text-gray-800 mt-2">
|
||||
<i class="fas fa-arrow-left mr-1"></i>메인으로 돌아가기
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentUser = null;
|
||||
|
||||
// 페이지 로드 시 사용자 확인
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const user = TokenManager.getUser();
|
||||
if (!user) {
|
||||
alert('로그인이 필요합니다.');
|
||||
window.location.href = 'index.html';
|
||||
return;
|
||||
}
|
||||
|
||||
currentUser = user;
|
||||
|
||||
if (currentUser.role !== 'admin') {
|
||||
alert('관리자만 접근 가능합니다.');
|
||||
window.location.href = 'index.html';
|
||||
return;
|
||||
}
|
||||
|
||||
addStatus('✅ 관리자 권한 확인됨', 'text-green-600');
|
||||
});
|
||||
|
||||
function addStatus(message, className = 'text-gray-600') {
|
||||
const statusDiv = document.getElementById('status');
|
||||
const p = document.createElement('p');
|
||||
p.className = `text-sm ${className}`;
|
||||
p.innerHTML = `<i class="fas fa-info-circle mr-2"></i>${message}`;
|
||||
statusDiv.appendChild(p);
|
||||
}
|
||||
|
||||
async function fixApiData() {
|
||||
const btn = document.getElementById('fixBtn');
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>수정 중...';
|
||||
|
||||
try {
|
||||
// 1. TKR-25009R 프로젝트 찾기
|
||||
const projects = JSON.parse(localStorage.getItem('work-report-projects') || '[]');
|
||||
const mProject = projects.find(p => p.jobNo === 'TKR-25009R');
|
||||
|
||||
if (!mProject) {
|
||||
throw new Error('TKR-25009R 프로젝트를 찾을 수 없습니다. 먼저 마이그레이션을 실행하세요.');
|
||||
}
|
||||
|
||||
addStatus(`TKR-25009R 프로젝트 발견 (ID: ${mProject.id})`, 'text-blue-600');
|
||||
|
||||
// 2. API에서 모든 부적합 사항 가져오기
|
||||
addStatus('API에서 부적합 사항 조회 중...');
|
||||
const issues = await IssuesAPI.getAll();
|
||||
addStatus(`총 ${issues.length}개 부적합 사항 발견`, 'text-blue-600');
|
||||
|
||||
// 3. project_id가 null인 부적합 사항들 찾기
|
||||
const issuesWithoutProject = issues.filter(issue => !issue.project_id);
|
||||
addStatus(`프로젝트 정보가 없는 부적합 사항: ${issuesWithoutProject.length}개`, 'text-yellow-600');
|
||||
|
||||
if (issuesWithoutProject.length === 0) {
|
||||
addStatus('✅ 모든 부적합 사항에 이미 프로젝트 정보가 있습니다.', 'text-green-600');
|
||||
btn.innerHTML = '<i class="fas fa-check mr-2"></i>완료';
|
||||
btn.className = 'w-full bg-green-500 text-white py-3 px-4 rounded-lg font-medium';
|
||||
return;
|
||||
}
|
||||
|
||||
// 4. 각 부적합 사항 업데이트
|
||||
let successCount = 0;
|
||||
let errorCount = 0;
|
||||
|
||||
for (let i = 0; i < issuesWithoutProject.length; i++) {
|
||||
const issue = issuesWithoutProject[i];
|
||||
|
||||
try {
|
||||
addStatus(`${i + 1}/${issuesWithoutProject.length}: 부적합 사항 ID ${issue.id} 업데이트 중...`);
|
||||
|
||||
await IssuesAPI.update(issue.id, {
|
||||
project_id: mProject.id
|
||||
});
|
||||
|
||||
successCount++;
|
||||
|
||||
// UI 업데이트를 위한 짧은 대기
|
||||
if (i % 5 === 0) {
|
||||
await new Promise(resolve => setTimeout(resolve, 100));
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error(`부적합 사항 ID ${issue.id} 업데이트 실패:`, error);
|
||||
addStatus(`❌ 부적합 사항 ID ${issue.id} 업데이트 실패: ${error.message}`, 'text-red-600');
|
||||
errorCount++;
|
||||
}
|
||||
}
|
||||
|
||||
// 5. 결과 표시
|
||||
if (successCount > 0) {
|
||||
addStatus(`✅ ${successCount}개 부적합 사항 업데이트 완료!`, 'text-green-600 font-bold');
|
||||
}
|
||||
|
||||
if (errorCount > 0) {
|
||||
addStatus(`❌ ${errorCount}개 부적합 사항 업데이트 실패`, 'text-red-600');
|
||||
}
|
||||
|
||||
// 6. 완료 처리
|
||||
if (errorCount === 0) {
|
||||
btn.innerHTML = '<i class="fas fa-check mr-2"></i>모든 업데이트 완료';
|
||||
btn.className = 'w-full bg-green-500 text-white py-3 px-4 rounded-lg font-medium';
|
||||
|
||||
addStatus('🎉 모든 API 데이터 수정이 완료되었습니다!', 'text-green-600 font-bold');
|
||||
addStatus('이제 부적합 조회에서 프로젝트 필터가 정상 작동합니다.', 'text-blue-600');
|
||||
} else {
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = '<i class="fas fa-redo mr-2"></i>다시 시도';
|
||||
btn.className = 'w-full bg-orange-500 text-white py-3 px-4 rounded-lg hover:bg-orange-600 transition-colors font-medium';
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
addStatus(`❌ 오류 발생: ${error.message}`, 'text-red-600');
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = '<i class="fas fa-redo mr-2"></i>다시 시도';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,134 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>프로젝트 ID 수정 - M Project</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<div class="container mx-auto px-4 py-8 max-w-2xl">
|
||||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||
<h1 class="text-2xl font-bold text-gray-800 mb-6">
|
||||
<i class="fas fa-edit text-blue-500 mr-2"></i>프로젝트 ID 수정
|
||||
</h1>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
<h3 class="font-semibold text-blue-800 mb-2">📋 작업 내용</h3>
|
||||
<p class="text-blue-700 text-sm">
|
||||
큰 타임스탬프 ID를 작은 정수 ID로 변경합니다.<br>
|
||||
TKR-25009R 프로젝트 ID: <code>1761264279704</code> → <code>1</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="status" class="space-y-2">
|
||||
<!-- 상태 메시지가 여기에 표시됩니다 -->
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="fixBtn"
|
||||
onclick="fixProjectId()"
|
||||
class="w-full bg-blue-500 text-white py-3 px-4 rounded-lg hover:bg-blue-600 transition-colors font-medium"
|
||||
>
|
||||
<i class="fas fa-tools mr-2"></i>프로젝트 ID 수정 시작
|
||||
</button>
|
||||
|
||||
<a href="fix-api-data.html" class="block text-center text-orange-600 hover:text-orange-800 mt-4">
|
||||
<i class="fas fa-wrench mr-1"></i>API 데이터 수정 도구로 이동
|
||||
</a>
|
||||
|
||||
<a href="debug-data.html" class="block text-center text-blue-600 hover:text-blue-800 mt-2">
|
||||
<i class="fas fa-bug mr-1"></i>디버그 도구로 이동
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function addStatus(message, className = 'text-gray-600') {
|
||||
const statusDiv = document.getElementById('status');
|
||||
const p = document.createElement('p');
|
||||
p.className = `text-sm ${className}`;
|
||||
p.innerHTML = `<i class="fas fa-info-circle mr-2"></i>${message}`;
|
||||
statusDiv.appendChild(p);
|
||||
}
|
||||
|
||||
function fixProjectId() {
|
||||
const btn = document.getElementById('fixBtn');
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>수정 중...';
|
||||
|
||||
try {
|
||||
// 1. 프로젝트 데이터 수정
|
||||
const projects = JSON.parse(localStorage.getItem('work-report-projects') || '[]');
|
||||
const mProject = projects.find(p => p.jobNo === 'TKR-25009R');
|
||||
|
||||
if (!mProject) {
|
||||
throw new Error('TKR-25009R 프로젝트를 찾을 수 없습니다.');
|
||||
}
|
||||
|
||||
const oldId = mProject.id;
|
||||
const newId = 1;
|
||||
|
||||
addStatus(`기존 프로젝트 ID: ${oldId}`, 'text-blue-600');
|
||||
addStatus(`새로운 프로젝트 ID: ${newId}`, 'text-blue-600');
|
||||
|
||||
// 프로젝트 ID 변경
|
||||
mProject.id = newId;
|
||||
localStorage.setItem('work-report-projects', JSON.stringify(projects));
|
||||
addStatus('✅ 프로젝트 ID 변경 완료', 'text-green-600');
|
||||
|
||||
// 2. 일일 공수 데이터 수정
|
||||
const dailyWorkData = JSON.parse(localStorage.getItem('daily-work-data') || '[]');
|
||||
let updatedWorkDays = 0;
|
||||
|
||||
dailyWorkData.forEach(dayData => {
|
||||
if (dayData.projects) {
|
||||
dayData.projects.forEach(project => {
|
||||
if (project.projectId == oldId) {
|
||||
project.projectId = newId;
|
||||
project.projectName = 'TKR-25009R - M Project';
|
||||
updatedWorkDays++;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
localStorage.setItem('daily-work-data', JSON.stringify(dailyWorkData));
|
||||
addStatus(`✅ ${updatedWorkDays}개 일일 공수 데이터 업데이트 완료`, 'text-green-600');
|
||||
|
||||
// 3. localStorage 부적합 사항 수정
|
||||
const localIssues = JSON.parse(localStorage.getItem('work-report-issues') || '[]');
|
||||
let updatedIssues = 0;
|
||||
|
||||
localIssues.forEach(issue => {
|
||||
if (issue.projectId == oldId || issue.project_id == oldId) {
|
||||
issue.projectId = newId;
|
||||
issue.project_id = newId;
|
||||
issue.projectName = 'TKR-25009R - M Project';
|
||||
issue.project_name = 'TKR-25009R - M Project';
|
||||
updatedIssues++;
|
||||
}
|
||||
});
|
||||
|
||||
localStorage.setItem('work-report-issues', JSON.stringify(localIssues));
|
||||
addStatus(`✅ ${updatedIssues}개 localStorage 부적합 사항 업데이트 완료`, 'text-green-600');
|
||||
|
||||
// 완료
|
||||
addStatus('🎉 모든 데이터 ID 수정 완료!', 'text-green-600 font-bold');
|
||||
addStatus('이제 API 데이터 수정 도구를 실행하세요.', 'text-blue-600');
|
||||
|
||||
btn.innerHTML = '<i class="fas fa-check mr-2"></i>완료';
|
||||
btn.className = 'w-full bg-green-500 text-white py-3 px-4 rounded-lg font-medium';
|
||||
|
||||
} catch (error) {
|
||||
addStatus(`❌ 오류 발생: ${error.message}`, 'text-red-600');
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = '<i class="fas fa-redo mr-2"></i>다시 시도';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -214,9 +214,9 @@
|
||||
<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">
|
||||
<button class="nav-link" style="display:none;" id="adminBtn" onclick="handleAdminClick()">
|
||||
<i class="fas fa-users-cog mr-2"></i>관리
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -502,6 +502,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 관리 버튼 클릭 처리
|
||||
function handleAdminClick() {
|
||||
if (currentUser.role === 'admin') {
|
||||
// 관리자: 사용자 관리 페이지로 이동
|
||||
window.location.href = 'admin.html';
|
||||
} else {
|
||||
// 일반 사용자: 비밀번호 변경 모달 표시
|
||||
showPasswordChangeModal();
|
||||
}
|
||||
}
|
||||
|
||||
// 섹션 전환
|
||||
// URL 해시 처리
|
||||
function handleUrlHash() {
|
||||
@@ -593,8 +604,6 @@
|
||||
|
||||
// 원본 파일 크기 확인
|
||||
const originalSize = file.size;
|
||||
console.log(`원본 이미지 크기: ${ImageUtils.formatFileSize(originalSize)}`);
|
||||
|
||||
// 이미지 압축
|
||||
const compressedImage = await ImageUtils.compressImage(file, {
|
||||
maxWidth: 1280,
|
||||
@@ -602,11 +611,6 @@
|
||||
quality: 0.75
|
||||
});
|
||||
|
||||
// 압축된 크기 확인
|
||||
const compressedSize = ImageUtils.getBase64Size(compressedImage);
|
||||
console.log(`압축된 이미지 크기: ${ImageUtils.formatFileSize(compressedSize)}`);
|
||||
console.log(`압축률: ${Math.round((1 - compressedSize/originalSize) * 100)}%`);
|
||||
|
||||
currentPhotos.push(compressedImage);
|
||||
updatePhotoPreview();
|
||||
}
|
||||
@@ -824,7 +828,6 @@
|
||||
updateProgress(90);
|
||||
updateLoadingMessage('완료 처리 중...', '거의 다 되었습니다');
|
||||
|
||||
console.log(`업로드 완료: ${uploadTime}ms`);
|
||||
|
||||
updateProgress(100);
|
||||
|
||||
@@ -1453,6 +1456,125 @@
|
||||
document.body.appendChild(modal);
|
||||
}
|
||||
|
||||
// 비밀번호 변경 모달 표시
|
||||
function showPasswordChangeModal() {
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
|
||||
modal.onclick = (e) => {
|
||||
if (e.target === modal) modal.remove();
|
||||
};
|
||||
|
||||
modal.innerHTML = `
|
||||
<div class="bg-white rounded-lg p-6 w-96 max-w-md mx-4">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-semibold">비밀번호 변경</h3>
|
||||
<button onclick="this.closest('.fixed').remove()" class="text-gray-400 hover:text-gray-600">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form id="passwordChangeForm" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">현재 비밀번호</label>
|
||||
<input type="password" id="currentPassword" class="w-full px-3 py-2 border border-gray-300 rounded-lg" required>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">새 비밀번호</label>
|
||||
<input type="password" id="newPassword" class="w-full px-3 py-2 border border-gray-300 rounded-lg" required minlength="6">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">새 비밀번호 확인</label>
|
||||
<input type="password" id="confirmPassword" class="w-full px-3 py-2 border border-gray-300 rounded-lg" required>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 pt-4">
|
||||
<button type="button" onclick="this.closest('.fixed').remove()"
|
||||
class="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
|
||||
취소
|
||||
</button>
|
||||
<button type="submit" class="flex-1 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
|
||||
변경
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(modal);
|
||||
|
||||
// 폼 제출 이벤트 처리
|
||||
document.getElementById('passwordChangeForm').addEventListener('submit', handlePasswordChange);
|
||||
}
|
||||
|
||||
// 비밀번호 변경 처리
|
||||
async function handlePasswordChange(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const currentPassword = document.getElementById('currentPassword').value;
|
||||
const newPassword = document.getElementById('newPassword').value;
|
||||
const confirmPassword = document.getElementById('confirmPassword').value;
|
||||
|
||||
// 새 비밀번호 확인
|
||||
if (newPassword !== confirmPassword) {
|
||||
alert('새 비밀번호가 일치하지 않습니다.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 현재 비밀번호 확인 (localStorage 기반)
|
||||
let users = JSON.parse(localStorage.getItem('work-report-users') || '[]');
|
||||
|
||||
// 기본 사용자가 없으면 생성
|
||||
if (users.length === 0) {
|
||||
users = [
|
||||
{
|
||||
username: 'hyungi',
|
||||
full_name: '관리자',
|
||||
password: 'djg3-jj34-X3Q3',
|
||||
role: 'admin'
|
||||
}
|
||||
];
|
||||
localStorage.setItem('work-report-users', JSON.stringify(users));
|
||||
}
|
||||
|
||||
let user = users.find(u => u.username === currentUser.username);
|
||||
|
||||
// 사용자가 없으면 기본값으로 생성
|
||||
if (!user) {
|
||||
const username = currentUser.username;
|
||||
user = {
|
||||
username: username,
|
||||
full_name: username === 'hyungi' ? '관리자' : username,
|
||||
password: 'djg3-jj34-X3Q3',
|
||||
role: username === 'hyungi' ? 'admin' : 'user'
|
||||
};
|
||||
users.push(user);
|
||||
localStorage.setItem('work-report-users', JSON.stringify(users));
|
||||
}
|
||||
|
||||
if (user.password !== currentPassword) {
|
||||
alert('현재 비밀번호가 올바르지 않습니다.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 비밀번호 변경
|
||||
user.password = newPassword;
|
||||
localStorage.setItem('work-report-users', JSON.stringify(users));
|
||||
|
||||
// 현재 사용자 정보도 업데이트
|
||||
currentUser.password = newPassword;
|
||||
localStorage.setItem('currentUser', JSON.stringify(currentUser));
|
||||
|
||||
showToastMessage('비밀번호가 성공적으로 변경되었습니다.');
|
||||
document.querySelector('.fixed').remove(); // 모달 닫기
|
||||
|
||||
} catch (error) {
|
||||
alert('비밀번호 변경에 실패했습니다: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 토스트 메시지 표시
|
||||
function showToastMessage(message, type = 'success') {
|
||||
const toast = document.createElement('div');
|
||||
@@ -1517,7 +1639,6 @@
|
||||
|
||||
// localStorage의 프로젝트별 데이터 우선 사용 (프로젝트별 분리 지원)
|
||||
const dailyWorkData = JSON.parse(localStorage.getItem('daily-work-data') || '[]');
|
||||
|
||||
if (selectedProjectId) {
|
||||
// 선택된 프로젝트의 일일 공수만 합계
|
||||
dailyWorkData.forEach(dayWork => {
|
||||
|
||||
@@ -106,9 +106,9 @@
|
||||
<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">
|
||||
<button class="nav-link" style="display:none;" id="adminBtn" onclick="handleAdminClick()">
|
||||
<i class="fas fa-users-cog mr-2"></i>사용자 관리
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -317,8 +317,6 @@
|
||||
}
|
||||
|
||||
function filterIssues() {
|
||||
console.log('필터링 시작 - 전체 이슈:', issues.length);
|
||||
|
||||
// 필터 값 가져오기
|
||||
const selectedProjectId = document.getElementById('projectFilter').value;
|
||||
const reviewStatusFilter = document.getElementById('reviewStatusFilter').value;
|
||||
@@ -332,7 +330,6 @@
|
||||
const issueProjectId = issue.project_id || issue.projectId;
|
||||
return issueProjectId && (issueProjectId == selectedProjectId || issueProjectId.toString() === selectedProjectId.toString());
|
||||
});
|
||||
console.log('프로젝트 필터 후:', filteredIssues.length);
|
||||
}
|
||||
|
||||
// 검토 상태 필터 적용
|
||||
@@ -341,13 +338,11 @@
|
||||
const isCompleted = isReviewCompleted(issue);
|
||||
return reviewStatusFilter === 'completed' ? isCompleted : !isCompleted;
|
||||
});
|
||||
console.log('검토 상태 필터 후:', filteredIssues.length);
|
||||
}
|
||||
|
||||
// 날짜 필터 적용
|
||||
if (dateFilter) {
|
||||
filteredIssues = filterByDate(filteredIssues, dateFilter);
|
||||
console.log('날짜 필터 후:', filteredIssues.length);
|
||||
}
|
||||
|
||||
// 전역 변수에 필터링된 결과 저장
|
||||
@@ -599,6 +594,136 @@
|
||||
return div;
|
||||
}
|
||||
|
||||
// 관리 버튼 클릭 처리
|
||||
function handleAdminClick() {
|
||||
if (currentUser.role === 'admin') {
|
||||
// 관리자: 사용자 관리 페이지로 이동
|
||||
window.location.href = 'admin.html';
|
||||
} else {
|
||||
// 일반 사용자: 비밀번호 변경 모달 표시
|
||||
showPasswordChangeModal();
|
||||
}
|
||||
}
|
||||
|
||||
// 비밀번호 변경 모달 표시
|
||||
function showPasswordChangeModal() {
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
|
||||
modal.onclick = (e) => {
|
||||
if (e.target === modal) modal.remove();
|
||||
};
|
||||
|
||||
modal.innerHTML = `
|
||||
<div class="bg-white rounded-lg p-6 w-96 max-w-md mx-4">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-semibold">비밀번호 변경</h3>
|
||||
<button onclick="this.closest('.fixed').remove()" class="text-gray-400 hover:text-gray-600">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form id="passwordChangeForm" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">현재 비밀번호</label>
|
||||
<input type="password" id="currentPassword" class="w-full px-3 py-2 border border-gray-300 rounded-lg" required>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">새 비밀번호</label>
|
||||
<input type="password" id="newPassword" class="w-full px-3 py-2 border border-gray-300 rounded-lg" required minlength="6">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">새 비밀번호 확인</label>
|
||||
<input type="password" id="confirmPassword" class="w-full px-3 py-2 border border-gray-300 rounded-lg" required>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 pt-4">
|
||||
<button type="button" onclick="this.closest('.fixed').remove()"
|
||||
class="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
|
||||
취소
|
||||
</button>
|
||||
<button type="submit" class="flex-1 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
|
||||
변경
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(modal);
|
||||
|
||||
// 폼 제출 이벤트 처리
|
||||
document.getElementById('passwordChangeForm').addEventListener('submit', handlePasswordChange);
|
||||
}
|
||||
|
||||
// 비밀번호 변경 처리
|
||||
async function handlePasswordChange(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const currentPassword = document.getElementById('currentPassword').value;
|
||||
const newPassword = document.getElementById('newPassword').value;
|
||||
const confirmPassword = document.getElementById('confirmPassword').value;
|
||||
|
||||
// 새 비밀번호 확인
|
||||
if (newPassword !== confirmPassword) {
|
||||
alert('새 비밀번호가 일치하지 않습니다.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 현재 비밀번호 확인 (localStorage 기반)
|
||||
let users = JSON.parse(localStorage.getItem('work-report-users') || '[]');
|
||||
|
||||
// 기본 사용자가 없으면 생성
|
||||
if (users.length === 0) {
|
||||
users = [
|
||||
{
|
||||
username: 'hyungi',
|
||||
full_name: '관리자',
|
||||
password: 'djg3-jj34-X3Q3',
|
||||
role: 'admin'
|
||||
}
|
||||
];
|
||||
localStorage.setItem('work-report-users', JSON.stringify(users));
|
||||
}
|
||||
|
||||
let user = users.find(u => u.username === currentUser.username);
|
||||
|
||||
// 사용자가 없으면 기본값으로 생성
|
||||
if (!user) {
|
||||
const username = currentUser.username;
|
||||
user = {
|
||||
username: username,
|
||||
full_name: username === 'hyungi' ? '관리자' : username,
|
||||
password: 'djg3-jj34-X3Q3',
|
||||
role: username === 'hyungi' ? 'admin' : 'user'
|
||||
};
|
||||
users.push(user);
|
||||
localStorage.setItem('work-report-users', JSON.stringify(users));
|
||||
}
|
||||
|
||||
if (user.password !== currentPassword) {
|
||||
alert('현재 비밀번호가 올바르지 않습니다.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 비밀번호 변경
|
||||
user.password = newPassword;
|
||||
localStorage.setItem('work-report-users', JSON.stringify(users));
|
||||
|
||||
// 현재 사용자 정보도 업데이트
|
||||
currentUser.password = newPassword;
|
||||
localStorage.setItem('currentUser', JSON.stringify(currentUser));
|
||||
|
||||
alert('비밀번호가 성공적으로 변경되었습니다.');
|
||||
document.querySelector('.fixed').remove(); // 모달 닫기
|
||||
|
||||
} catch (error) {
|
||||
alert('비밀번호 변경에 실패했습니다: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 로그아웃 함수
|
||||
function logout() {
|
||||
localStorage.removeItem('currentUser');
|
||||
|
||||
@@ -1,307 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>데이터 마이그레이션 - M Project</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<script src="/static/js/api.js?v=20250917"></script>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<div class="container mx-auto px-4 py-8 max-w-2xl">
|
||||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||
<h1 class="text-2xl font-bold text-gray-800 mb-6">
|
||||
<i class="fas fa-database text-blue-500 mr-2"></i>데이터 마이그레이션
|
||||
</h1>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
|
||||
<h3 class="font-semibold text-yellow-800 mb-2">⚠️ 주의사항</h3>
|
||||
<p class="text-yellow-700 text-sm">
|
||||
이 작업은 기존 데이터를 "M Project"로 마이그레이션합니다.<br>
|
||||
관리자(hyungi) 계정으로 로그인한 상태에서만 실행하세요.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="status" class="space-y-2">
|
||||
<!-- 상태 메시지가 여기에 표시됩니다 -->
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="migrateBtn"
|
||||
onclick="startMigration()"
|
||||
class="w-full bg-blue-500 text-white py-3 px-4 rounded-lg hover:bg-blue-600 transition-colors font-medium"
|
||||
>
|
||||
<i class="fas fa-play mr-2"></i>마이그레이션 시작
|
||||
</button>
|
||||
|
||||
<a href="index.html" class="block text-center text-gray-600 hover:text-gray-800 mt-4">
|
||||
<i class="fas fa-arrow-left mr-1"></i>메인으로 돌아가기
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentUser = null;
|
||||
|
||||
// 페이지 로드 시 사용자 확인
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const userData = localStorage.getItem('currentUser');
|
||||
if (!userData) {
|
||||
alert('로그인이 필요합니다.');
|
||||
window.location.href = 'index.html';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
currentUser = JSON.parse(userData);
|
||||
} catch (e) {
|
||||
currentUser = { username: userData };
|
||||
}
|
||||
|
||||
const username = currentUser.username || currentUser;
|
||||
if (username !== 'hyungi' && currentUser.role !== 'admin') {
|
||||
alert('관리자만 접근 가능합니다.');
|
||||
window.location.href = 'index.html';
|
||||
return;
|
||||
}
|
||||
|
||||
addStatus('✅ 관리자 권한 확인됨', 'text-green-600');
|
||||
});
|
||||
|
||||
function addStatus(message, className = 'text-gray-600') {
|
||||
const statusDiv = document.getElementById('status');
|
||||
const p = document.createElement('p');
|
||||
p.className = `text-sm ${className}`;
|
||||
p.innerHTML = `<i class="fas fa-info-circle mr-2"></i>${message}`;
|
||||
statusDiv.appendChild(p);
|
||||
}
|
||||
|
||||
async function startMigration() {
|
||||
const btn = document.getElementById('migrateBtn');
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>마이그레이션 중...';
|
||||
|
||||
try {
|
||||
// 1. M Project 생성
|
||||
await createMProject();
|
||||
|
||||
// 2. 기존 부적합 사항 마이그레이션
|
||||
await migrateIssues();
|
||||
|
||||
// 3. 기존 368시간 데이터 생성
|
||||
await createSampleHours();
|
||||
|
||||
addStatus('🎉 모든 마이그레이션이 완료되었습니다!', 'text-green-600 font-bold');
|
||||
|
||||
btn.innerHTML = '<i class="fas fa-check mr-2"></i>완료';
|
||||
btn.className = 'w-full bg-green-500 text-white py-3 px-4 rounded-lg font-medium';
|
||||
|
||||
} catch (error) {
|
||||
addStatus(`❌ 오류 발생: ${error.message}`, 'text-red-600');
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = '<i class="fas fa-redo mr-2"></i>다시 시도';
|
||||
}
|
||||
}
|
||||
|
||||
async function createMProject() {
|
||||
addStatus('기존 M Project 확인 중...');
|
||||
|
||||
// 기존 프로젝트 확인
|
||||
let projects = [];
|
||||
const saved = localStorage.getItem('work-report-projects');
|
||||
if (saved) {
|
||||
projects = JSON.parse(saved);
|
||||
}
|
||||
|
||||
// 기존 TKR-25009R M Project 찾기
|
||||
let existingMProject = projects.find(p => p.jobNo === 'TKR-25009R');
|
||||
if (existingMProject) {
|
||||
addStatus('✅ 기존 TKR-25009R M Project 발견', 'text-green-600');
|
||||
return existingMProject.id;
|
||||
}
|
||||
|
||||
// M-2024-001로 생성된 잘못된 프로젝트 찾기
|
||||
const wrongProject = projects.find(p => p.jobNo === 'M-2024-001');
|
||||
if (wrongProject) {
|
||||
// 잘못된 프로젝트를 올바른 Job No.로 수정
|
||||
wrongProject.jobNo = 'TKR-25009R';
|
||||
wrongProject.projectName = 'M Project';
|
||||
addStatus('✅ 기존 프로젝트를 TKR-25009R로 수정 완료', 'text-green-600');
|
||||
localStorage.setItem('work-report-projects', JSON.stringify(projects));
|
||||
return wrongProject.id;
|
||||
}
|
||||
|
||||
// 새로 생성 (기존 프로젝트가 없는 경우)
|
||||
const mProject = {
|
||||
id: Date.now(),
|
||||
jobNo: 'TKR-25009R',
|
||||
projectName: 'M Project',
|
||||
createdBy: 'hyungi',
|
||||
createdByName: '관리자',
|
||||
createdAt: new Date().toISOString(),
|
||||
isActive: true
|
||||
};
|
||||
|
||||
projects.push(mProject);
|
||||
localStorage.setItem('work-report-projects', JSON.stringify(projects));
|
||||
|
||||
addStatus('✅ TKR-25009R M Project 생성 완료', 'text-green-600');
|
||||
return mProject.id;
|
||||
}
|
||||
|
||||
async function migrateIssues() {
|
||||
addStatus('기존 부적합 사항 마이그레이션 중...');
|
||||
|
||||
// 기존 부적합 사항 로드 (localStorage와 API 모두 확인)
|
||||
let issues = [];
|
||||
|
||||
// 먼저 localStorage에서 확인
|
||||
const savedLocal = localStorage.getItem('work-report-issues');
|
||||
if (savedLocal) {
|
||||
issues = JSON.parse(savedLocal);
|
||||
addStatus('localStorage에서 부적합 사항 발견', 'text-blue-600');
|
||||
}
|
||||
|
||||
// API에서도 확인 (현재 시스템이 API 기반이므로)
|
||||
try {
|
||||
if (typeof IssuesAPI !== 'undefined') {
|
||||
const apiIssues = await IssuesAPI.getAll();
|
||||
if (apiIssues && apiIssues.length > 0) {
|
||||
issues = apiIssues;
|
||||
addStatus('API에서 부적합 사항 발견', 'text-blue-600');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
addStatus('API 조회 실패, localStorage 데이터 사용', 'text-yellow-600');
|
||||
}
|
||||
|
||||
if (issues.length === 0) {
|
||||
addStatus('마이그레이션할 부적합 사항이 없습니다.', 'text-yellow-600');
|
||||
return;
|
||||
}
|
||||
|
||||
// TKR-25009R M Project ID 가져오기
|
||||
const projects = JSON.parse(localStorage.getItem('work-report-projects') || '[]');
|
||||
const mProject = projects.find(p => p.jobNo === 'TKR-25009R');
|
||||
|
||||
if (!mProject) {
|
||||
throw new Error('TKR-25009R M Project를 찾을 수 없습니다.');
|
||||
}
|
||||
|
||||
// 모든 부적합 사항에 프로젝트 ID 추가
|
||||
let migratedCount = 0;
|
||||
for (let issue of issues) {
|
||||
if (!issue.project_id && !issue.projectId) {
|
||||
// API 방식과 localStorage 방식 모두 지원
|
||||
issue.project_id = mProject.id;
|
||||
issue.projectId = mProject.id;
|
||||
issue.project_name = 'TKR-25009R - M Project';
|
||||
issue.projectName = 'TKR-25009R - M Project';
|
||||
migratedCount++;
|
||||
|
||||
// API로 업데이트 시도
|
||||
try {
|
||||
if (typeof IssuesAPI !== 'undefined' && issue.id) {
|
||||
await IssuesAPI.update(issue.id, {
|
||||
project_id: mProject.id,
|
||||
project_name: 'TKR-25009R - M Project'
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('API 업데이트 실패, localStorage만 업데이트');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// localStorage에도 저장
|
||||
localStorage.setItem('work-report-issues', JSON.stringify(issues));
|
||||
|
||||
addStatus(`✅ ${migratedCount}개 부적합 사항 마이그레이션 완료`, 'text-green-600');
|
||||
}
|
||||
|
||||
async function createSampleHours() {
|
||||
addStatus('368시간 샘플 데이터 생성 중...');
|
||||
|
||||
// TKR-25009R M Project ID 가져오기
|
||||
const projects = JSON.parse(localStorage.getItem('work-report-projects') || '[]');
|
||||
const mProject = projects.find(p => p.jobNo === 'TKR-25009R');
|
||||
|
||||
if (!mProject) {
|
||||
throw new Error('TKR-25009R M Project를 찾을 수 없습니다.');
|
||||
}
|
||||
|
||||
// 기존 일일 공수 데이터 로드
|
||||
let dailyWorkData = [];
|
||||
const saved = localStorage.getItem('daily-work-data');
|
||||
if (saved) {
|
||||
dailyWorkData = JSON.parse(saved);
|
||||
}
|
||||
|
||||
// 기존 데이터 중 잘못된 프로젝트로 등록된 것들 수정
|
||||
let updatedCount = 0;
|
||||
dailyWorkData.forEach(dayData => {
|
||||
if (dayData.projects) {
|
||||
dayData.projects.forEach(project => {
|
||||
if (project.projectName && project.projectName.includes('M-2024-001')) {
|
||||
project.projectId = mProject.id;
|
||||
project.projectName = 'TKR-25009R - M Project';
|
||||
updatedCount++;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (updatedCount > 0) {
|
||||
addStatus(`✅ 기존 ${updatedCount}개 프로젝트 데이터를 TKR-25009R로 수정`, 'text-green-600');
|
||||
}
|
||||
|
||||
// 368시간을 여러 날짜에 분산해서 생성 (기존 데이터가 없는 경우만)
|
||||
const workDays = [
|
||||
{ date: '2024-10-01', hours: 48 },
|
||||
{ date: '2024-10-02', hours: 52 },
|
||||
{ date: '2024-10-03', hours: 44 },
|
||||
{ date: '2024-10-04', hours: 40 },
|
||||
{ date: '2024-10-07', hours: 56 },
|
||||
{ date: '2024-10-08', hours: 48 },
|
||||
{ date: '2024-10-09', hours: 36 },
|
||||
{ date: '2024-10-10', hours: 44 }
|
||||
];
|
||||
|
||||
let addedDays = 0;
|
||||
workDays.forEach(workDay => {
|
||||
// 해당 날짜에 이미 데이터가 있는지 확인
|
||||
const existingData = dailyWorkData.find(d => d.date === workDay.date);
|
||||
if (!existingData) {
|
||||
const newData = {
|
||||
date: workDay.date,
|
||||
projects: [{
|
||||
projectId: mProject.id,
|
||||
projectName: 'TKR-25009R - M Project',
|
||||
hours: workDay.hours
|
||||
}],
|
||||
totalHours: workDay.hours,
|
||||
createdAt: new Date().toISOString(),
|
||||
createdBy: 'hyungi'
|
||||
};
|
||||
|
||||
dailyWorkData.push(newData);
|
||||
addedDays++;
|
||||
}
|
||||
});
|
||||
|
||||
// 저장
|
||||
localStorage.setItem('daily-work-data', JSON.stringify(dailyWorkData));
|
||||
|
||||
const totalCreatedHours = workDays.reduce((sum, day) => sum + day.hours, 0);
|
||||
if (addedDays > 0) {
|
||||
addStatus(`✅ ${addedDays}일간 총 ${totalCreatedHours}시간 데이터 생성 완료`, 'text-green-600');
|
||||
} else {
|
||||
addStatus('✅ 기존 시간 데이터 수정 완료', 'text-green-600');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -125,6 +125,13 @@ const AuthAPI = {
|
||||
current_password: currentPassword,
|
||||
new_password: newPassword
|
||||
})
|
||||
}),
|
||||
|
||||
resetPassword: (userId, newPassword = '000000') => apiRequest(`/auth/users/${userId}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({
|
||||
password: newPassword
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
671
index.html
671
index.html
@@ -1,671 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>작업보고서 시스템</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
:root {
|
||||
--primary: #3b82f6;
|
||||
--primary-dark: #2563eb;
|
||||
--success: #10b981;
|
||||
--warning: #f59e0b;
|
||||
--danger: #ef4444;
|
||||
--gray-50: #f9fafb;
|
||||
--gray-100: #f3f4f6;
|
||||
--gray-200: #e5e7eb;
|
||||
--gray-300: #d1d5db;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--gray-50);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--primary-dark);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.input-field {
|
||||
border: 1px solid var(--gray-300);
|
||||
background: white;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.input-field:focus {
|
||||
border-color: var(--primary);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-new {
|
||||
background-color: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.status-progress {
|
||||
background-color: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.status-complete {
|
||||
background-color: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: #6b7280;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background-color: var(--gray-100);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 로그인 화면 -->
|
||||
<div id="loginScreen" class="min-h-screen flex items-center justify-center p-4 bg-gray-50">
|
||||
<div class="bg-white rounded-xl shadow-lg p-8 w-full max-w-sm">
|
||||
<div class="text-center mb-6">
|
||||
<i class="fas fa-clipboard-check text-5xl text-blue-500 mb-4"></i>
|
||||
<h1 class="text-2xl font-bold text-gray-800">작업보고서 시스템</h1>
|
||||
<p class="text-gray-600 text-sm mt-2">부적합 사항 관리 및 공수 계산</p>
|
||||
</div>
|
||||
|
||||
<form id="loginForm" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">아이디</label>
|
||||
<input
|
||||
type="text"
|
||||
id="userId"
|
||||
class="input-field w-full px-4 py-2 rounded-lg"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">비밀번호</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
class="input-field w-full px-4 py-2 rounded-lg"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-primary w-full py-2 rounded-lg font-medium">
|
||||
로그인
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 메인 화면 -->
|
||||
<div id="mainScreen" class="hidden min-h-screen bg-gray-50">
|
||||
<!-- 헤더 -->
|
||||
<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>
|
||||
<button class="nav-link active" onclick="showSection('report')">
|
||||
<i class="fas fa-camera-retro mr-2"></i>부적합 등록
|
||||
</button>
|
||||
<button class="nav-link" onclick="showSection('list')">
|
||||
<i class="fas fa-list mr-2"></i>목록 관리
|
||||
</button>
|
||||
<button class="nav-link" onclick="showSection('summary')">
|
||||
<i class="fas fa-chart-bar mr-2"></i>보고서
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 부적합 등록 섹션 (모바일 최적화) -->
|
||||
<section id="reportSection" class="container mx-auto px-4 py-6 max-w-lg">
|
||||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-800 mb-4">
|
||||
<i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i>부적합 사항 등록
|
||||
</h2>
|
||||
|
||||
<form id="reportForm" class="space-y-4">
|
||||
<!-- 사진 업로드 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">사진</label>
|
||||
<div
|
||||
id="photoUpload"
|
||||
class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-blue-400 transition-colors"
|
||||
onclick="document.getElementById('photoInput').click()"
|
||||
>
|
||||
<div id="photoPreview" class="hidden mb-4">
|
||||
<img id="previewImg" class="max-h-48 mx-auto rounded-lg">
|
||||
</div>
|
||||
<div id="photoPlaceholder">
|
||||
<i class="fas fa-camera text-4xl text-gray-400 mb-2"></i>
|
||||
<p class="text-gray-600">사진 촬영 또는 선택</p>
|
||||
</div>
|
||||
</div>
|
||||
<input type="file" id="photoInput" accept="image/*" capture="camera" class="hidden">
|
||||
</div>
|
||||
|
||||
<!-- 카테고리 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">카테고리</label>
|
||||
<select id="category" class="input-field w-full px-4 py-2 rounded-lg" required>
|
||||
<option value="">선택하세요</option>
|
||||
<option value="material_missing">자재누락</option>
|
||||
<option value="dimension_defect">치수불량</option>
|
||||
<option value="incoming_defect">입고자재 불량</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 간단 설명 -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">간단 설명</label>
|
||||
<textarea
|
||||
id="description"
|
||||
rows="3"
|
||||
class="input-field w-full px-4 py-2 rounded-lg resize-none"
|
||||
placeholder="발견된 문제를 간단히 설명하세요"
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-primary w-full py-3 rounded-lg font-medium text-lg">
|
||||
<i class="fas fa-check mr-2"></i>등록하기
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 목록 관리 섹션 -->
|
||||
<section id="listSection" class="hidden container mx-auto px-4 py-6">
|
||||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-800 mb-4">부적합 사항 목록</h2>
|
||||
<div id="issueList" class="space-y-3">
|
||||
<!-- 목록이 여기에 표시됩니다 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 상세보기 모달 -->
|
||||
<div id="detailModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4" onclick="if(event.target === this) closeDetailModal()">
|
||||
<div class="bg-white rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto" onclick="event.stopPropagation()">
|
||||
<div class="sticky top-0 bg-white border-b p-4 flex justify-between items-center">
|
||||
<h3 class="text-lg font-semibold text-gray-800">부적합 사항 상세</h3>
|
||||
<button onclick="closeDetailModal()" class="text-gray-500 hover:text-gray-700">
|
||||
<i class="fas fa-times text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<!-- 사진 -->
|
||||
<div id="modalPhoto" class="mb-6"></div>
|
||||
|
||||
<!-- 수정 가능한 정보 -->
|
||||
<div class="mb-6 space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">카테고리</label>
|
||||
<select id="modalCategory" class="input-field w-full px-4 py-2 rounded-lg">
|
||||
<option value="material_missing">자재누락</option>
|
||||
<option value="dimension_defect">치수불량</option>
|
||||
<option value="incoming_defect">입고자재 불량</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">설명</label>
|
||||
<textarea
|
||||
id="modalDescription"
|
||||
rows="3"
|
||||
class="input-field w-full px-4 py-2 rounded-lg resize-none"
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-sm text-gray-500 pt-2">
|
||||
<span><i class="fas fa-user mr-1"></i><span id="modalReporter"></span></span>
|
||||
<span><i class="fas fa-calendar mr-1"></i><span id="modalDate"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 작업 시간 입력 -->
|
||||
<div class="border-t pt-6">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">해결하는데 걸린 총 시간</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
type="number"
|
||||
id="workHours"
|
||||
step="0.5"
|
||||
min="0"
|
||||
class="input-field flex-1 px-4 py-2 rounded-lg"
|
||||
placeholder="예: 2.5"
|
||||
>
|
||||
<span class="text-gray-600">시간</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onclick="saveIssueDetails()" class="btn-primary w-full py-2 rounded-lg font-medium">
|
||||
<i class="fas fa-save mr-2"></i>저장하기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 보고서 섹션 -->
|
||||
<section id="summarySection" class="hidden container mx-auto px-4 py-6">
|
||||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-lg font-semibold text-gray-800">작업 보고서</h2>
|
||||
<button onclick="printReport()" class="btn-primary px-4 py-2 rounded-lg text-sm">
|
||||
<i class="fas fa-print mr-2"></i>인쇄
|
||||
</button>
|
||||
</div>
|
||||
<div id="reportContent">
|
||||
<!-- 보고서 내용이 여기에 표시됩니다 -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 사용자 데이터
|
||||
const users = {
|
||||
'inspector1': { password: 'pass123', name: '검사자1' },
|
||||
'inspector2': { password: 'pass456', name: '검사자2' },
|
||||
'admin': { password: 'admin123', name: '관리자' }
|
||||
};
|
||||
|
||||
let currentUser = null;
|
||||
let currentPhoto = null;
|
||||
let issues = [];
|
||||
|
||||
// 로그인
|
||||
document.getElementById('loginForm').addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
const userId = document.getElementById('userId').value;
|
||||
const password = document.getElementById('password').value;
|
||||
|
||||
if (users[userId] && users[userId].password === password) {
|
||||
currentUser = { id: userId, ...users[userId] };
|
||||
document.getElementById('userDisplay').textContent = currentUser.name;
|
||||
document.getElementById('loginScreen').classList.add('hidden');
|
||||
document.getElementById('mainScreen').classList.remove('hidden');
|
||||
loadIssues();
|
||||
} else {
|
||||
alert('아이디 또는 비밀번호가 올바르지 않습니다.');
|
||||
}
|
||||
});
|
||||
|
||||
// 로그아웃
|
||||
function logout() {
|
||||
currentUser = null;
|
||||
document.getElementById('loginScreen').classList.remove('hidden');
|
||||
document.getElementById('mainScreen').classList.add('hidden');
|
||||
document.getElementById('loginForm').reset();
|
||||
}
|
||||
|
||||
// 섹션 전환
|
||||
function showSection(section) {
|
||||
// 모든 섹션 숨기기
|
||||
document.querySelectorAll('section').forEach(s => s.classList.add('hidden'));
|
||||
// 선택된 섹션 표시
|
||||
document.getElementById(section + 'Section').classList.remove('hidden');
|
||||
|
||||
// 네비게이션 활성화 상태 변경
|
||||
document.querySelectorAll('.nav-link').forEach(link => link.classList.remove('active'));
|
||||
event.target.closest('.nav-link').classList.add('active');
|
||||
|
||||
// 섹션별 초기화
|
||||
if (section === 'list') {
|
||||
displayIssueList();
|
||||
} else if (section === 'summary') {
|
||||
generateReport();
|
||||
}
|
||||
}
|
||||
|
||||
// 사진 업로드
|
||||
document.getElementById('photoInput').addEventListener('change', (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
currentPhoto = e.target.result;
|
||||
document.getElementById('previewImg').src = currentPhoto;
|
||||
document.getElementById('photoPreview').classList.remove('hidden');
|
||||
document.getElementById('photoPlaceholder').classList.add('hidden');
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
|
||||
// 부적합 사항 등록
|
||||
document.getElementById('reportForm').addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const issue = {
|
||||
id: Date.now(),
|
||||
photo: currentPhoto,
|
||||
category: document.getElementById('category').value,
|
||||
description: document.getElementById('description').value,
|
||||
status: 'new',
|
||||
reporter: currentUser.id,
|
||||
reporterName: currentUser.name,
|
||||
reportDate: new Date().toISOString(),
|
||||
workHours: 0,
|
||||
detailNotes: ''
|
||||
};
|
||||
|
||||
issues.push(issue);
|
||||
saveIssues();
|
||||
|
||||
// 성공 메시지
|
||||
alert('부적합 사항이 등록되었습니다.');
|
||||
|
||||
// 폼 초기화
|
||||
document.getElementById('reportForm').reset();
|
||||
currentPhoto = null;
|
||||
document.getElementById('photoPreview').classList.add('hidden');
|
||||
document.getElementById('photoPlaceholder').classList.remove('hidden');
|
||||
});
|
||||
|
||||
// 데이터 저장/로드
|
||||
function saveIssues() {
|
||||
localStorage.setItem('work-report-issues', JSON.stringify(issues));
|
||||
}
|
||||
|
||||
function loadIssues() {
|
||||
const saved = localStorage.getItem('work-report-issues');
|
||||
if (saved) {
|
||||
issues = JSON.parse(saved);
|
||||
}
|
||||
}
|
||||
|
||||
// 목록 표시
|
||||
function displayIssueList() {
|
||||
const container = document.getElementById('issueList');
|
||||
container.innerHTML = '';
|
||||
|
||||
if (issues.length === 0) {
|
||||
container.innerHTML = '<p class="text-gray-500 text-center py-8">등록된 부적합 사항이 없습니다.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
issues.forEach(issue => {
|
||||
const categoryNames = {
|
||||
material_missing: '자재누락',
|
||||
dimension_defect: '치수불량',
|
||||
incoming_defect: '입고자재 불량'
|
||||
};
|
||||
|
||||
const statusBadges = {
|
||||
new: 'status-new',
|
||||
progress: 'status-progress',
|
||||
complete: 'status-complete'
|
||||
};
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.className = 'border rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer';
|
||||
div.innerHTML = `
|
||||
<div class="flex items-start gap-4">
|
||||
${issue.photo ? `<img src="${issue.photo}" class="w-20 h-20 object-cover rounded-lg">` : ''}
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="font-medium text-gray-800">${categoryNames[issue.category] || issue.category}</h3>
|
||||
<span class="status-badge ${statusBadges[issue.status]}">${
|
||||
issue.status === 'new' ? '신규' :
|
||||
issue.status === 'progress' ? '진행중' : '완료'
|
||||
}</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 mb-2">${issue.description}</p>
|
||||
<div class="flex items-center gap-4 text-sm">
|
||||
<span class="text-gray-500">
|
||||
<i class="fas fa-calendar mr-1"></i>
|
||||
${new Date(issue.reportDate).toLocaleDateString()}
|
||||
</span>
|
||||
<span class="text-gray-500">
|
||||
<i class="fas fa-clock mr-1"></i>
|
||||
${issue.workHours}시간
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
div.onclick = () => showIssueDetail(issue.id);
|
||||
container.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
// 현재 편집 중인 이슈 ID
|
||||
let currentEditingIssueId = null;
|
||||
|
||||
// 부적합 사항 상세보기
|
||||
function showIssueDetail(issueId) {
|
||||
const issue = issues.find(i => i.id === issueId);
|
||||
if (!issue) return;
|
||||
|
||||
currentEditingIssueId = issueId;
|
||||
|
||||
const categoryNames = {
|
||||
material_missing: '자재누락',
|
||||
dimension_defect: '치수불량',
|
||||
incoming_defect: '입고자재 불량'
|
||||
};
|
||||
|
||||
// 사진 표시
|
||||
const photoContainer = document.getElementById('modalPhoto');
|
||||
if (issue.photo) {
|
||||
photoContainer.innerHTML = `<img src="${issue.photo}" class="w-full rounded-lg shadow-md">`;
|
||||
} else {
|
||||
photoContainer.innerHTML = '<div class="bg-gray-100 rounded-lg p-8 text-center text-gray-500">사진 없음</div>';
|
||||
}
|
||||
|
||||
// 정보 표시
|
||||
document.getElementById('modalCategory').value = issue.category;
|
||||
document.getElementById('modalDescription').value = issue.description;
|
||||
document.getElementById('modalReporter').textContent = issue.reporterName;
|
||||
document.getElementById('modalDate').textContent = new Date(issue.reportDate).toLocaleDateString();
|
||||
|
||||
// 작업 시간
|
||||
document.getElementById('workHours').value = issue.workHours || '';
|
||||
|
||||
// 모달 표시
|
||||
document.getElementById('detailModal').classList.remove('hidden');
|
||||
}
|
||||
|
||||
// 모달 닫기
|
||||
function closeDetailModal() {
|
||||
document.getElementById('detailModal').classList.add('hidden');
|
||||
currentEditingIssueId = null;
|
||||
}
|
||||
|
||||
// 상세 정보 저장
|
||||
function saveIssueDetails() {
|
||||
if (!currentEditingIssueId) return;
|
||||
|
||||
const issue = issues.find(i => i.id === currentEditingIssueId);
|
||||
if (!issue) return;
|
||||
|
||||
// 값 가져오기
|
||||
const category = document.getElementById('modalCategory').value;
|
||||
const description = document.getElementById('modalDescription').value.trim();
|
||||
const workHours = parseFloat(document.getElementById('workHours').value) || 0;
|
||||
|
||||
// 유효성 검사
|
||||
if (!description) {
|
||||
alert('설명을 입력해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 업데이트
|
||||
issue.category = category;
|
||||
issue.description = description;
|
||||
issue.workHours = workHours;
|
||||
|
||||
// 작업 시간이 입력되었으면 상태를 자동으로 '완료'로 변경
|
||||
if (workHours > 0 && issue.status === 'new') {
|
||||
issue.status = 'complete';
|
||||
}
|
||||
|
||||
// 저장
|
||||
saveIssues();
|
||||
|
||||
// UI 업데이트
|
||||
displayIssueList();
|
||||
closeDetailModal();
|
||||
|
||||
// 성공 메시지
|
||||
alert('저장되었습니다!');
|
||||
}
|
||||
|
||||
// 보고서 생성
|
||||
function generateReport() {
|
||||
const container = document.getElementById('reportContent');
|
||||
|
||||
// 통계 계산
|
||||
const totalHours = issues.reduce((sum, issue) => sum + issue.workHours, 0);
|
||||
const categoryCount = {};
|
||||
|
||||
issues.forEach(issue => {
|
||||
categoryCount[issue.category] = (categoryCount[issue.category] || 0) + 1;
|
||||
});
|
||||
|
||||
// 날짜 범위
|
||||
const dates = issues.map(i => new Date(i.reportDate));
|
||||
const startDate = dates.length > 0 ? new Date(Math.min(...dates)) : new Date();
|
||||
const endDate = new Date();
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="space-y-6">
|
||||
<!-- 요약 페이지 -->
|
||||
<div class="border-b pb-6">
|
||||
<h3 class="text-2xl font-bold text-center mb-6">작업 보고서</h3>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<h4 class="font-semibold text-gray-700 mb-3">작업 기간</h4>
|
||||
<p class="text-lg">${startDate.toLocaleDateString()} ~ ${endDate.toLocaleDateString()}</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-blue-50 rounded-lg p-4">
|
||||
<h4 class="font-semibold text-blue-700 mb-3">총 공수</h4>
|
||||
<p class="text-3xl font-bold text-blue-600">${totalHours}시간</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<h4 class="font-semibold text-gray-700 mb-3">카테고리별 분석</h4>
|
||||
<div class="grid md:grid-cols-3 gap-4">
|
||||
<div class="bg-blue-50 rounded-lg p-4 text-center">
|
||||
<p class="text-2xl font-bold text-blue-600">${categoryCount.material_missing || 0}</p>
|
||||
<p class="text-sm text-gray-600">자재누락</p>
|
||||
</div>
|
||||
<div class="bg-orange-50 rounded-lg p-4 text-center">
|
||||
<p class="text-2xl font-bold text-orange-600">${categoryCount.dimension_defect || 0}</p>
|
||||
<p class="text-sm text-gray-600">치수불량</p>
|
||||
</div>
|
||||
<div class="bg-purple-50 rounded-lg p-4 text-center">
|
||||
<p class="text-2xl font-bold text-purple-600">${categoryCount.incoming_defect || 0}</p>
|
||||
<p class="text-sm text-gray-600">입고자재 불량</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 상세 내역 -->
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-700 mb-4">부적합 사항 상세</h4>
|
||||
${issues.map(issue => {
|
||||
const categoryNames = {
|
||||
material_missing: '자재누락',
|
||||
dimension_defect: '치수불량',
|
||||
incoming_defect: '입고자재 불량'
|
||||
};
|
||||
return `
|
||||
<div class="border rounded-lg p-4 mb-4 break-inside-avoid">
|
||||
<div class="flex gap-4">
|
||||
${issue.photo ? `<img src="${issue.photo}" class="w-32 h-32 object-cover rounded-lg">` : ''}
|
||||
<div class="flex-1">
|
||||
<h5 class="font-semibold text-gray-800 mb-2">${categoryNames[issue.category] || issue.category}</h5>
|
||||
<p class="text-gray-600 mb-2">${issue.description}</p>
|
||||
<div class="grid grid-cols-2 gap-2 text-sm">
|
||||
<p><span class="font-medium">상태:</span> ${
|
||||
issue.status === 'new' ? '신규' :
|
||||
issue.status === 'progress' ? '진행중' : '완료'
|
||||
}</p>
|
||||
<p><span class="font-medium">작업시간:</span> ${issue.workHours}시간</p>
|
||||
<p><span class="font-medium">보고자:</span> ${issue.reporterName}</p>
|
||||
<p><span class="font-medium">보고일:</span> ${new Date(issue.reportDate).toLocaleDateString()}</p>
|
||||
</div>
|
||||
${issue.detailNotes ? `
|
||||
<div class="mt-2 p-2 bg-gray-50 rounded">
|
||||
<p class="text-sm text-gray-600">${issue.detailNotes}</p>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// 인쇄
|
||||
function printReport() {
|
||||
window.print();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user