feat: 관리자 페이지 추가 (공지사항, 다운로드, 유저 관리)
- /admin 라우트 추가 (admin 권한 전용) - 공지사항 CRUD, 다운로드 정보 수정, 유저 권한/삭제 관리 - AuthContext에 role 추가 및 localStorage 저장 - 홈 헤더에 admin 링크 표시 (admin만 노출) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
200
src/components/admin/AdminCommon.css
Normal file
200
src/components/admin/AdminCommon.css
Normal file
@@ -0,0 +1,200 @@
|
||||
.admin-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.admin-section-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin: 0;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid rgba(186, 205, 176, 0.12);
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.admin-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 20px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(186, 205, 176, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.admin-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.admin-label {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.admin-input {
|
||||
padding: 10px 14px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(186, 205, 176, 0.15);
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.admin-input:focus {
|
||||
border-color: rgba(186, 205, 176, 0.5);
|
||||
}
|
||||
|
||||
.admin-textarea {
|
||||
padding: 10px 14px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(186, 205, 176, 0.15);
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
transition: border-color 0.2s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.admin-textarea:focus {
|
||||
border-color: rgba(186, 205, 176, 0.5);
|
||||
}
|
||||
|
||||
.admin-form-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn-admin-primary {
|
||||
padding: 10px 24px;
|
||||
background: #BACDB0;
|
||||
color: #2E2C2F;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.btn-admin-primary:hover { opacity: 0.9; }
|
||||
.btn-admin-primary:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.btn-admin-secondary {
|
||||
padding: 10px 20px;
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-admin-secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* List */
|
||||
.admin-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.admin-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.admin-list-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-list-title {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.admin-list-date {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.admin-list-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-admin-edit {
|
||||
padding: 6px 14px;
|
||||
background: transparent;
|
||||
color: rgba(186, 205, 176, 0.8);
|
||||
border: 1px solid rgba(186, 205, 176, 0.25);
|
||||
border-radius: 5px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-admin-edit:hover {
|
||||
background: rgba(186, 205, 176, 0.08);
|
||||
}
|
||||
|
||||
.btn-admin-delete {
|
||||
padding: 6px 14px;
|
||||
background: transparent;
|
||||
color: rgba(229, 115, 115, 0.8);
|
||||
border: 1px solid rgba(229, 115, 115, 0.25);
|
||||
border-radius: 5px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-admin-delete:hover {
|
||||
background: rgba(229, 115, 115, 0.08);
|
||||
}
|
||||
|
||||
/* Role badge */
|
||||
.admin-role-badge {
|
||||
font-size: 0.7rem;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.admin-role-badge.admin {
|
||||
background: rgba(186, 205, 176, 0.15);
|
||||
color: #BACDB0;
|
||||
}
|
||||
|
||||
.admin-role-badge.user {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
101
src/components/admin/AnnouncementAdmin.jsx
Normal file
101
src/components/admin/AnnouncementAdmin.jsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { getAnnouncements } from '../../api/announcements';
|
||||
import { apiFetch } from '../../api/client';
|
||||
import './AdminCommon.css';
|
||||
|
||||
export default function AnnouncementAdmin() {
|
||||
const [list, setList] = useState([]);
|
||||
const [form, setForm] = useState({ title: '', content: '' });
|
||||
const [editingId, setEditingId] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const load = () => getAnnouncements().then(setList);
|
||||
useEffect(() => { load(); }, []);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
if (!form.title || !form.content) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
if (editingId) {
|
||||
await apiFetch(`/api/announcements/${editingId}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(form),
|
||||
});
|
||||
} else {
|
||||
await apiFetch('/api/announcements', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(form),
|
||||
});
|
||||
}
|
||||
setForm({ title: '', content: '' });
|
||||
setEditingId(null);
|
||||
load();
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = (item) => {
|
||||
setEditingId(item.id);
|
||||
setForm({ title: item.title, content: item.content });
|
||||
};
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
if (!confirm('삭제하시겠습니까?')) return;
|
||||
await apiFetch(`/api/announcements/${id}`, { method: 'DELETE' });
|
||||
load();
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setEditingId(null);
|
||||
setForm({ title: '', content: '' });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="admin-section">
|
||||
<h2 className="admin-section-title">공지사항 관리</h2>
|
||||
|
||||
<form className="admin-form" onSubmit={handleSubmit}>
|
||||
<input
|
||||
className="admin-input"
|
||||
placeholder="제목"
|
||||
value={form.title}
|
||||
onChange={(e) => setForm({ ...form, title: e.target.value })}
|
||||
/>
|
||||
<textarea
|
||||
className="admin-textarea"
|
||||
placeholder="내용"
|
||||
rows={4}
|
||||
value={form.content}
|
||||
onChange={(e) => setForm({ ...form, content: e.target.value })}
|
||||
/>
|
||||
<div className="admin-form-actions">
|
||||
<button className="btn-admin-primary" type="submit" disabled={loading}>
|
||||
{editingId ? '수정 완료' : '공지 등록'}
|
||||
</button>
|
||||
{editingId && (
|
||||
<button className="btn-admin-secondary" type="button" onClick={handleCancel}>
|
||||
취소
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<ul className="admin-list">
|
||||
{list.map((item) => (
|
||||
<li key={item.id} className="admin-list-item">
|
||||
<div className="admin-list-info">
|
||||
<span className="admin-list-title">{item.title}</span>
|
||||
<span className="admin-list-date">{item.createdAt?.slice(0, 10)}</span>
|
||||
</div>
|
||||
<div className="admin-list-actions">
|
||||
<button className="btn-admin-edit" onClick={() => handleEdit(item)}>수정</button>
|
||||
<button className="btn-admin-delete" onClick={() => handleDelete(item.id)}>삭제</button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
65
src/components/admin/DownloadAdmin.jsx
Normal file
65
src/components/admin/DownloadAdmin.jsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { getDownloadInfo } from '../../api/download';
|
||||
import { apiFetch } from '../../api/client';
|
||||
import './AdminCommon.css';
|
||||
|
||||
export default function DownloadAdmin() {
|
||||
const [form, setForm] = useState({ url: '', version: '', fileName: '', fileSize: '' });
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [saved, setSaved] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
getDownloadInfo()
|
||||
.then((data) => setForm({
|
||||
url: data.url,
|
||||
version: data.version,
|
||||
fileName: data.fileName,
|
||||
fileSize: data.fileSize,
|
||||
}))
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
try {
|
||||
await apiFetch('/api/download/info', {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(form),
|
||||
});
|
||||
setSaved(true);
|
||||
setTimeout(() => setSaved(false), 2000);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const field = (label, key, placeholder) => (
|
||||
<div className="admin-field">
|
||||
<label className="admin-label">{label}</label>
|
||||
<input
|
||||
className="admin-input"
|
||||
placeholder={placeholder}
|
||||
value={form[key]}
|
||||
onChange={(e) => setForm({ ...form, [key]: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="admin-section">
|
||||
<h2 className="admin-section-title">다운로드 정보 관리</h2>
|
||||
<form className="admin-form" onSubmit={handleSubmit}>
|
||||
{field('다운로드 URL', 'url', 'https://...')}
|
||||
{field('버전', 'version', 'v1.0.0')}
|
||||
{field('파일명', 'fileName', 'A301_Launcher.exe')}
|
||||
{field('파일 크기', 'fileSize', '1.2 GB')}
|
||||
<div className="admin-form-actions">
|
||||
<button className="btn-admin-primary" type="submit" disabled={loading}>
|
||||
{saved ? '저장됨 ✓' : '저장'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
49
src/components/admin/UserAdmin.jsx
Normal file
49
src/components/admin/UserAdmin.jsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { getUsers, updateUserRole, deleteUser } from '../../api/users';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
import './AdminCommon.css';
|
||||
|
||||
export default function UserAdmin() {
|
||||
const [users, setUsers] = useState([]);
|
||||
const { user: me } = useAuth();
|
||||
|
||||
const load = () => getUsers().then(setUsers);
|
||||
useEffect(() => { load(); }, []);
|
||||
|
||||
const handleRoleToggle = async (u) => {
|
||||
const newRole = u.role === 'admin' ? 'user' : 'admin';
|
||||
if (!confirm(`${u.username}의 권한을 ${newRole}로 변경하시겠습니까?`)) return;
|
||||
await updateUserRole(u.id, newRole);
|
||||
load();
|
||||
};
|
||||
|
||||
const handleDelete = async (u) => {
|
||||
if (!confirm(`${u.username} 계정을 삭제하시겠습니까?`)) return;
|
||||
await deleteUser(u.id);
|
||||
load();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="admin-section">
|
||||
<h2 className="admin-section-title">유저 관리</h2>
|
||||
<ul className="admin-list">
|
||||
{users.map((u) => (
|
||||
<li key={u.id} className="admin-list-item">
|
||||
<div className="admin-list-info">
|
||||
<span className="admin-list-title">{u.username}</span>
|
||||
<span className={`admin-role-badge ${u.role}`}>{u.role}</span>
|
||||
</div>
|
||||
{u.username !== me?.username && (
|
||||
<div className="admin-list-actions">
|
||||
<button className="btn-admin-edit" onClick={() => handleRoleToggle(u)}>
|
||||
{u.role === 'admin' ? '일반으로' : '관리자로'}
|
||||
</button>
|
||||
<button className="btn-admin-delete" onClick={() => handleDelete(u)}>삭제</button>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user