44e2fb2e44
- 사진 2장까지 업로드 지원 - 카메라 촬영 + 갤러리 선택 분리 - 이미지 압축 및 최적화 (ImageUtils) - iPhone .mpo 파일 JPEG 변환 지원 - 카테고리 변경: 치수불량 → 설계미스, 검사미스 추가 - KST 시간대 설정 - URL 해시 처리로 목록관리 페이지 이동 개선 - 로그인 OAuth2 form-data 형식 수정 - 업로드 속도 개선 및 프로그레스바 추가
371 lines
15 KiB
HTML
371 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>관리자 페이지 - 작업보고서</title>
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<!-- Custom Styles -->
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0f9ff 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.glass-effect {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.nav-link {
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 0.5rem;
|
|
color: #4b5563;
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background-color: #f3f4f6;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.nav-link.active {
|
|
background-color: #3b82f6;
|
|
color: white;
|
|
}
|
|
|
|
.input-field {
|
|
background: white;
|
|
border: 1px solid #e5e7eb;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.input-field:focus {
|
|
outline: none;
|
|
border-color: #60a5fa;
|
|
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<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-list mr-2"></i>작업보고서 시스템 - 관리자
|
|
</h1>
|
|
<button onclick="AuthAPI.logout()" class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 transition-colors text-sm">
|
|
<i class="fas fa-sign-out-alt mr-1"></i>로그아웃
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="bg-white border-b">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex gap-2 py-2 overflow-x-auto">
|
|
<a href="daily-work.html" class="nav-link">
|
|
<i class="fas fa-calendar-check mr-2"></i>일일 공수
|
|
</a>
|
|
<a href="index.html" class="nav-link">
|
|
<i class="fas fa-camera-retro mr-2"></i>부적합 등록
|
|
</a>
|
|
<a href="issue-view.html" class="nav-link">
|
|
<i class="fas fa-search mr-2"></i>부적합 조회
|
|
</a>
|
|
<a href="index.html#list" class="nav-link">
|
|
<i class="fas fa-list mr-2"></i>목록 관리
|
|
</a>
|
|
<a href="index.html#summary" class="nav-link">
|
|
<i class="fas fa-chart-bar mr-2"></i>보고서
|
|
</a>
|
|
<a href="admin.html" class="nav-link active">
|
|
<i class="fas fa-users-cog mr-2"></i>사용자 관리
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main class="container mx-auto px-4 py-8 max-w-6xl">
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<!-- 사용자 추가 섹션 -->
|
|
<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-user-plus text-blue-500 mr-2"></i>사용자 추가
|
|
</h2>
|
|
|
|
<form id="addUserForm" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">사용자 ID</label>
|
|
<input
|
|
type="text"
|
|
id="newUsername"
|
|
class="input-field w-full px-3 py-2 rounded-lg"
|
|
placeholder="한글 가능 (예: 홍길동)"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">이름</label>
|
|
<input
|
|
type="text"
|
|
id="newFullName"
|
|
class="input-field w-full px-3 py-2 rounded-lg"
|
|
placeholder="실명 입력"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">비밀번호</label>
|
|
<input
|
|
type="password"
|
|
id="newPassword"
|
|
class="input-field w-full px-3 py-2 rounded-lg"
|
|
placeholder="초기 비밀번호"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">권한</label>
|
|
<select id="newRole" class="input-field w-full px-3 py-2 rounded-lg">
|
|
<option value="user">일반 사용자</option>
|
|
<option value="admin">관리자</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
|
|
>
|
|
<i class="fas fa-plus mr-2"></i>사용자 추가
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 사용자 목록 섹션 -->
|
|
<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-users text-green-500 mr-2"></i>사용자 목록
|
|
</h2>
|
|
|
|
<div id="userList" class="space-y-3">
|
|
<!-- 사용자 목록이 여기에 표시됩니다 -->
|
|
<div class="text-gray-500 text-center py-8">
|
|
<i class="fas fa-spinner fa-spin text-3xl"></i>
|
|
<p>로딩 중...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 비밀번호 변경 섹션 (사용자용) -->
|
|
<div id="passwordChangeSection" class="hidden mt-6">
|
|
<div class="bg-white rounded-xl shadow-sm p-6 max-w-md mx-auto">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4">
|
|
<i class="fas fa-key text-yellow-500 mr-2"></i>비밀번호 변경
|
|
</h2>
|
|
|
|
<form id="changePasswordForm" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">현재 비밀번호</label>
|
|
<input
|
|
type="password"
|
|
id="currentPassword"
|
|
class="input-field w-full px-3 py-2 rounded-lg"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">새 비밀번호</label>
|
|
<input
|
|
type="password"
|
|
id="newPasswordChange"
|
|
class="input-field w-full px-3 py-2 rounded-lg"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">새 비밀번호 확인</label>
|
|
<input
|
|
type="password"
|
|
id="confirmPassword"
|
|
class="input-field w-full px-3 py-2 rounded-lg"
|
|
required
|
|
>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="w-full px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors"
|
|
>
|
|
<i class="fas fa-save mr-2"></i>비밀번호 변경
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Scripts -->
|
|
<script src="/static/js/api.js?v=20250917"></script>
|
|
<script src="/static/js/date-utils.js?v=20250917"></script>
|
|
<script>
|
|
let currentUser = null;
|
|
let users = [];
|
|
|
|
// 페이지 로드 시
|
|
window.addEventListener('DOMContentLoaded', async () => {
|
|
const user = TokenManager.getUser();
|
|
if (!user) {
|
|
window.location.href = '/index.html';
|
|
return;
|
|
}
|
|
currentUser = user;
|
|
|
|
// 관리자가 아니면 비밀번호 변경만 표시
|
|
if (currentUser.role !== 'admin') {
|
|
document.querySelector('.grid').style.display = 'none';
|
|
document.getElementById('passwordChangeSection').classList.remove('hidden');
|
|
} else {
|
|
// 관리자면 사용자 목록 로드
|
|
await loadUsers();
|
|
}
|
|
});
|
|
|
|
// 사용자 추가
|
|
document.getElementById('addUserForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const userData = {
|
|
username: document.getElementById('newUsername').value.trim(),
|
|
full_name: document.getElementById('newFullName').value.trim(),
|
|
password: document.getElementById('newPassword').value,
|
|
role: document.getElementById('newRole').value
|
|
};
|
|
|
|
try {
|
|
await AuthAPI.createUser(userData);
|
|
|
|
// 성공
|
|
alert('사용자가 추가되었습니다.');
|
|
|
|
// 폼 초기화
|
|
document.getElementById('addUserForm').reset();
|
|
|
|
// 목록 새로고침
|
|
await loadUsers();
|
|
|
|
} catch (error) {
|
|
alert(error.message || '사용자 추가에 실패했습니다.');
|
|
}
|
|
});
|
|
|
|
// 비밀번호 변경
|
|
document.getElementById('changePasswordForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const currentPassword = document.getElementById('currentPassword').value;
|
|
const newPassword = document.getElementById('newPasswordChange').value;
|
|
const confirmPassword = document.getElementById('confirmPassword').value;
|
|
|
|
if (newPassword !== confirmPassword) {
|
|
alert('새 비밀번호가 일치하지 않습니다.');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await AuthAPI.changePassword(currentPassword, newPassword);
|
|
|
|
alert('비밀번호가 변경되었습니다. 다시 로그인해주세요.');
|
|
AuthAPI.logout();
|
|
|
|
} catch (error) {
|
|
alert(error.message || '비밀번호 변경에 실패했습니다.');
|
|
}
|
|
});
|
|
|
|
// 사용자 목록 로드
|
|
async function loadUsers() {
|
|
try {
|
|
users = await AuthAPI.getUsers();
|
|
displayUsers();
|
|
} catch (error) {
|
|
console.error('사용자 목록 로드 실패:', error);
|
|
}
|
|
}
|
|
|
|
// 사용자 목록 표시
|
|
function displayUsers() {
|
|
const container = document.getElementById('userList');
|
|
|
|
if (users.length === 0) {
|
|
container.innerHTML = '<p class="text-gray-500 text-center">등록된 사용자가 없습니다.</p>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = users.map(user => `
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
|
<div>
|
|
<div class="font-medium text-gray-800">
|
|
<i class="fas fa-user mr-2 text-gray-500"></i>
|
|
${user.full_name || user.username}
|
|
</div>
|
|
<div class="text-sm text-gray-600">
|
|
ID: ${user.username}
|
|
<span class="ml-2 px-2 py-0.5 rounded text-xs ${
|
|
user.role === 'admin'
|
|
? 'bg-red-100 text-red-700'
|
|
: 'bg-blue-100 text-blue-700'
|
|
}">
|
|
${user.role === 'admin' ? '관리자' : '사용자'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
${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>
|
|
`).join('');
|
|
}
|
|
|
|
// 사용자 삭제
|
|
async function deleteUser(username) {
|
|
if (!confirm(`정말 ${username} 사용자를 삭제하시겠습니까?`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await AuthAPI.deleteUser(username);
|
|
alert('사용자가 삭제되었습니다.');
|
|
await loadUsers();
|
|
} catch (error) {
|
|
alert(error.message || '삭제에 실패했습니다.');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|