feat: admin settings (accounts, system, notification, audit)
This commit is contained in:
pray4skylark
@@ -0,0 +1,474 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Users, Plus, Pencil, Trash2, X, Search, AlertTriangle } from 'lucide-react';
|
||||
import { useAuthStore } from '@/stores';
|
||||
import employeeService from '@/services/employeeService';
|
||||
import type { Employee, RoleCode, EmpStatus } from '@/types';
|
||||
|
||||
const roleLabels: Record<RoleCode, string> = {
|
||||
ADMIN: '최고관리자',
|
||||
MANAGER: '본사관리자',
|
||||
EMPLOYEE: '일반사용자',
|
||||
};
|
||||
|
||||
const roleBadgeColor: Record<RoleCode, string> = {
|
||||
ADMIN: 'bg-purple-100 text-purple-700',
|
||||
MANAGER: 'bg-indigo-100 text-indigo-700',
|
||||
EMPLOYEE: 'bg-gray-100 text-gray-700',
|
||||
};
|
||||
|
||||
const statusLabels: Record<EmpStatus, string> = {
|
||||
ACTIVE: '재직',
|
||||
ON_LEAVE: '휴직',
|
||||
RESIGNED: '퇴사',
|
||||
};
|
||||
|
||||
const statusBadgeColor: Record<EmpStatus, string> = {
|
||||
ACTIVE: 'bg-status-resolved-bg text-status-resolved-text',
|
||||
ON_LEAVE: 'bg-status-pending-bg text-status-pending-text',
|
||||
RESIGNED: 'bg-status-critical-bg text-status-critical-text',
|
||||
};
|
||||
|
||||
const initialColors = ['bg-indigo-500', 'bg-purple-500', 'bg-blue-500', 'bg-green-500', 'bg-orange-500', 'bg-pink-500'];
|
||||
|
||||
function getInitialColor(name: string, index: number) {
|
||||
return initialColors[index % initialColors.length];
|
||||
}
|
||||
|
||||
interface CreateForm {
|
||||
loginId: string;
|
||||
name: string;
|
||||
password: string;
|
||||
email: string;
|
||||
roleCode: RoleCode;
|
||||
empStatus: EmpStatus;
|
||||
}
|
||||
|
||||
interface EditForm {
|
||||
name: string;
|
||||
email: string;
|
||||
roleCode: RoleCode;
|
||||
empStatus: EmpStatus;
|
||||
}
|
||||
|
||||
export default function AccountsPage() {
|
||||
const user = useAuthStore((s) => s.user);
|
||||
const [employees, setEmployees] = useState<Employee[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchKeyword, setSearchKeyword] = useState('');
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
const [showEditModal, setShowEditModal] = useState(false);
|
||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||
const [targetEmployee, setTargetEmployee] = useState<Employee | null>(null);
|
||||
const [createForm, setCreateForm] = useState<CreateForm>({
|
||||
loginId: '', name: '', password: '', email: '', roleCode: 'EMPLOYEE', empStatus: 'ACTIVE',
|
||||
});
|
||||
const [editForm, setEditForm] = useState<EditForm>({
|
||||
name: '', email: '', roleCode: 'EMPLOYEE', empStatus: 'ACTIVE',
|
||||
});
|
||||
const [createError, setCreateError] = useState<string | null>(null);
|
||||
const [editError, setEditError] = useState<string | null>(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const fetchEmployees = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await employeeService.getAll({ size: 200 });
|
||||
setEmployees(res.data.content);
|
||||
} catch {
|
||||
// silent
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchEmployees();
|
||||
}, []);
|
||||
|
||||
if (user?.roleCode !== 'ADMIN') {
|
||||
return (
|
||||
<div className="p-4 sm:p-6 lg:p-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="bg-status-critical-bg border border-status-critical rounded-2xl p-8 text-center">
|
||||
<p className="text-status-critical-text font-medium">접근 거부. 관리자 권한이 필요합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const filtered = searchKeyword.trim()
|
||||
? employees.filter((e) => e.name.toLowerCase().includes(searchKeyword.toLowerCase()))
|
||||
: employees;
|
||||
|
||||
const openCreate = () => {
|
||||
setCreateForm({ loginId: '', name: '', password: '', email: '', roleCode: 'EMPLOYEE', empStatus: 'ACTIVE' });
|
||||
setCreateError(null);
|
||||
setShowCreateModal(true);
|
||||
};
|
||||
|
||||
const handleCreate = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!createForm.loginId.trim() || !createForm.name.trim() || !createForm.password.trim()) {
|
||||
setCreateError('로그인 ID, 이름, 비밀번호는 필수입니다.');
|
||||
return;
|
||||
}
|
||||
setIsSubmitting(true);
|
||||
setCreateError(null);
|
||||
try {
|
||||
await employeeService.create(createForm);
|
||||
setShowCreateModal(false);
|
||||
await fetchEmployees();
|
||||
} catch (err: any) {
|
||||
setCreateError(err.response?.data?.message || '계정 생성에 실패했습니다.');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const openEdit = (emp: Employee) => {
|
||||
setTargetEmployee(emp);
|
||||
setEditForm({ name: emp.name, email: emp.email, roleCode: emp.roleCode, empStatus: emp.empStatus });
|
||||
setEditError(null);
|
||||
setShowEditModal(true);
|
||||
};
|
||||
|
||||
const handleUpdate = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!editForm.name.trim() || !targetEmployee) return;
|
||||
setIsSubmitting(true);
|
||||
setEditError(null);
|
||||
try {
|
||||
await employeeService.update(targetEmployee.empId, editForm);
|
||||
setShowEditModal(false);
|
||||
await fetchEmployees();
|
||||
} catch (err: any) {
|
||||
setEditError(err.response?.data?.message || '수정에 실패했습니다.');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const openDelete = (emp: Employee) => {
|
||||
setTargetEmployee(emp);
|
||||
setShowDeleteDialog(true);
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!targetEmployee) return;
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await employeeService.delete(targetEmployee.empId);
|
||||
setShowDeleteDialog(false);
|
||||
await fetchEmployees();
|
||||
} catch (err: any) {
|
||||
alert(err.response?.data?.message || '삭제에 실패했습니다.');
|
||||
setShowDeleteDialog(false);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-4 sm:p-6 lg:p-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<Users className="w-6 h-6 text-primary" />
|
||||
<div>
|
||||
<h2 className="font-outfit text-2xl font-semibold text-text-main tracking-tight">계정 관리</h2>
|
||||
<p className="text-text-muted text-sm">직원 계정 생성, 수정, 삭제 (ADMIN 전용)</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={openCreate}
|
||||
className="bg-primary text-white px-4 py-2.5 rounded-xl text-sm font-semibold hover:bg-primary-hover transition-all flex items-center gap-1.5 shadow-soft"
|
||||
>
|
||||
<Plus className="w-4 h-4" /> 새 계정
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div className="relative w-full sm:w-72 mb-4">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" />
|
||||
<input
|
||||
value={searchKeyword}
|
||||
onChange={(e) => setSearchKeyword(e.target.value)}
|
||||
className="w-full pl-9 pr-3 py-2 rounded-xl bg-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary transition-all"
|
||||
placeholder="이름으로 검색..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
{loading ? (
|
||||
<div className="bg-surface rounded-2xl border border-border shadow-card p-12 text-center text-text-muted">로딩 중...</div>
|
||||
) : (
|
||||
<div className="bg-surface rounded-2xl border border-border shadow-card overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left">
|
||||
<thead>
|
||||
<tr className="bg-gray-50/50 border-b border-border text-[10px] font-bold text-text-muted uppercase tracking-widest">
|
||||
<th className="px-4 sm:px-6 py-3">이름</th>
|
||||
<th className="px-4 sm:px-6 py-3">이메일</th>
|
||||
<th className="px-4 sm:px-6 py-3">권한</th>
|
||||
<th className="px-4 sm:px-6 py-3">상태</th>
|
||||
<th className="px-4 sm:px-6 py-3 hidden sm:table-cell">가입일</th>
|
||||
<th className="px-4 sm:px-6 py-3 text-right">액션</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border text-sm">
|
||||
{filtered.map((emp, idx) => (
|
||||
<tr key={emp.empId} className="hover:bg-gray-50/30 transition-colors">
|
||||
<td className="px-4 sm:px-6 py-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-8 h-8 rounded-full ${getInitialColor(emp.name, idx)} flex items-center justify-center text-xs font-medium text-white flex-shrink-0`}>
|
||||
{emp.name[0]}
|
||||
</div>
|
||||
<span className="font-medium text-text-main">{emp.name}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-3 text-text-muted">{emp.email || '-'}</td>
|
||||
<td className="px-4 sm:px-6 py-3">
|
||||
<span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${roleBadgeColor[emp.roleCode]}`}>
|
||||
{roleLabels[emp.roleCode]}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-3">
|
||||
<span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${statusBadgeColor[emp.empStatus]}`}>
|
||||
{statusLabels[emp.empStatus]}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 sm:px-6 py-3 text-text-muted hidden sm:table-cell">{emp.joinedDate}</td>
|
||||
<td className="px-4 sm:px-6 py-3 text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<button onClick={() => openEdit(emp)} className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors" title="수정">
|
||||
<Pencil className="w-3.5 h-3.5 text-text-muted hover:text-primary" />
|
||||
</button>
|
||||
<button onClick={() => openDelete(emp)} className="p-1.5 hover:bg-red-50 rounded-lg transition-colors" title="삭제">
|
||||
<Trash2 className="w-3.5 h-3.5 text-text-muted hover:text-status-critical-text" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{filtered.length === 0 && (
|
||||
<div className="text-center py-12 text-text-muted">검색 결과가 없습니다.</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create Modal */}
|
||||
{showCreateModal && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" onClick={() => setShowCreateModal(false)}>
|
||||
<div className="bg-white rounded-2xl shadow-xl w-full max-w-md mx-4 p-6" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-bold text-text-main">새 계정 생성</h3>
|
||||
<button onClick={() => setShowCreateModal(false)} className="p-1.5 hover:bg-gray-100 rounded-lg">
|
||||
<X className="w-5 h-5 text-text-muted" />
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={handleCreate} className="space-y-3">
|
||||
<div>
|
||||
<label className="text-xs font-medium text-text-muted">로그인 ID *</label>
|
||||
<input
|
||||
value={createForm.loginId}
|
||||
onChange={(e) => setCreateForm((f) => ({ ...f, loginId: e.target.value }))}
|
||||
className="w-full px-3 py-2 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
placeholder="login_id"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-text-muted">이름 *</label>
|
||||
<input
|
||||
value={createForm.name}
|
||||
onChange={(e) => setCreateForm((f) => ({ ...f, name: e.target.value }))}
|
||||
className="w-full px-3 py-2 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
placeholder="홍길동"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-text-muted">비밀번호 *</label>
|
||||
<input
|
||||
type="password"
|
||||
value={createForm.password}
|
||||
onChange={(e) => setCreateForm((f) => ({ ...f, password: e.target.value }))}
|
||||
className="w-full px-3 py-2 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-text-muted">이메일</label>
|
||||
<input
|
||||
type="email"
|
||||
value={createForm.email}
|
||||
onChange={(e) => setCreateForm((f) => ({ ...f, email: e.target.value }))}
|
||||
className="w-full px-3 py-2 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs font-medium text-text-muted">권한</label>
|
||||
<select
|
||||
value={createForm.roleCode}
|
||||
onChange={(e) => setCreateForm((f) => ({ ...f, roleCode: e.target.value as RoleCode }))}
|
||||
className="w-full px-3 py-2 border border-border rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
>
|
||||
<option value="EMPLOYEE">일반사용자</option>
|
||||
<option value="MANAGER">본사관리자</option>
|
||||
<option value="ADMIN">최고관리자</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-text-muted">상태</label>
|
||||
<select
|
||||
value={createForm.empStatus}
|
||||
onChange={(e) => setCreateForm((f) => ({ ...f, empStatus: e.target.value as EmpStatus }))}
|
||||
className="w-full px-3 py-2 border border-border rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
>
|
||||
<option value="ACTIVE">재직</option>
|
||||
<option value="ON_LEAVE">휴직</option>
|
||||
<option value="RESIGNED">퇴사</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{createError && (
|
||||
<div className="bg-status-critical-bg border border-status-critical text-status-critical-text rounded-lg px-3 py-2 text-sm">
|
||||
{createError}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-end gap-3 pt-2">
|
||||
<button type="button" onClick={() => setShowCreateModal(false)} className="px-4 py-2 rounded-xl text-sm font-medium text-text-muted hover:bg-gray-100">
|
||||
취소
|
||||
</button>
|
||||
<button type="submit" disabled={isSubmitting} className="px-4 py-2 rounded-xl text-sm font-semibold bg-primary text-white hover:bg-primary-hover disabled:opacity-50">
|
||||
{isSubmitting ? '생성 중...' : '생성'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Edit Modal */}
|
||||
{showEditModal && targetEmployee && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" onClick={() => setShowEditModal(false)}>
|
||||
<div className="bg-white rounded-2xl shadow-xl w-full max-w-md mx-4 p-6" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-bold text-text-main">계정 수정 — {targetEmployee.name}</h3>
|
||||
<button onClick={() => setShowEditModal(false)} className="p-1.5 hover:bg-gray-100 rounded-lg">
|
||||
<X className="w-5 h-5 text-text-muted" />
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={handleUpdate} className="space-y-3">
|
||||
<div>
|
||||
<label className="text-xs font-medium text-text-muted">이름 *</label>
|
||||
<input
|
||||
value={editForm.name}
|
||||
onChange={(e) => setEditForm((f) => ({ ...f, name: e.target.value }))}
|
||||
className="w-full px-3 py-2 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-text-muted">이메일</label>
|
||||
<input
|
||||
type="email"
|
||||
value={editForm.email}
|
||||
onChange={(e) => setEditForm((f) => ({ ...f, email: e.target.value }))}
|
||||
className="w-full px-3 py-2 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs font-medium text-text-muted">권한</label>
|
||||
<select
|
||||
value={editForm.roleCode}
|
||||
onChange={(e) => setEditForm((f) => ({ ...f, roleCode: e.target.value as RoleCode }))}
|
||||
className="w-full px-3 py-2 border border-border rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
>
|
||||
<option value="EMPLOYEE">일반사용자</option>
|
||||
<option value="MANAGER">본사관리자</option>
|
||||
<option value="ADMIN">최고관리자</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-text-muted">상태</label>
|
||||
<select
|
||||
value={editForm.empStatus}
|
||||
onChange={(e) => setEditForm((f) => ({ ...f, empStatus: e.target.value as EmpStatus }))}
|
||||
className="w-full px-3 py-2 border border-border rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
>
|
||||
<option value="ACTIVE">재직</option>
|
||||
<option value="ON_LEAVE">휴직</option>
|
||||
<option value="RESIGNED">퇴사</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{editError && (
|
||||
<div className="bg-status-critical-bg border border-status-critical text-status-critical-text rounded-lg px-3 py-2 text-sm">
|
||||
{editError}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-end gap-3 pt-2">
|
||||
<button type="button" onClick={() => setShowEditModal(false)} className="px-4 py-2 rounded-xl text-sm font-medium text-text-muted hover:bg-gray-100">
|
||||
취소
|
||||
</button>
|
||||
<button type="submit" disabled={isSubmitting} className="px-4 py-2 rounded-xl text-sm font-semibold bg-primary text-white hover:bg-primary-hover disabled:opacity-50">
|
||||
{isSubmitting ? '저장 중...' : '저장'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delete Confirmation */}
|
||||
{showDeleteDialog && targetEmployee && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" onClick={() => setShowDeleteDialog(false)}>
|
||||
<div className="bg-white rounded-2xl shadow-xl w-full max-w-md mx-4 p-6" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 rounded-full bg-status-critical-bg flex items-center justify-center flex-shrink-0">
|
||||
<AlertTriangle className="w-5 h-5 text-status-critical-text" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-text-main">계정 삭제</h3>
|
||||
<p className="text-text-muted text-sm">이 작업은 되돌릴 수 없습니다</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-50 rounded-xl px-4 py-3 mb-6">
|
||||
<p className="text-sm text-text-main">
|
||||
<span className="font-semibold">{targetEmployee.name}</span> 계정을 삭제하시겠습니까?
|
||||
</p>
|
||||
<p className="text-xs text-text-muted mt-1">소프트 삭제 처리되며 시스템 접근이 차단됩니다.</p>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowDeleteDialog(false)}
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 px-4 py-2.5 rounded-xl border border-border text-text-main text-sm font-medium hover:bg-gray-100 transition-all disabled:opacity-50"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDelete}
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 px-4 py-2.5 rounded-xl bg-status-critical text-white text-sm font-semibold hover:bg-status-critical-hover transition-all disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting ? '삭제 중...' : '삭제'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user