feat: 관리자 페이지 추가 (공지사항, 다운로드, 유저 관리)

- /admin 라우트 추가 (admin 권한 전용)
- 공지사항 CRUD, 다운로드 정보 수정, 유저 권한/삭제 관리
- AuthContext에 role 추가 및 localStorage 저장
- 홈 헤더에 admin 링크 표시 (admin만 노출)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/App.jsx

@@ -2,16 +2,29 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { AuthProvider, useAuth } from './context/AuthContext';
 import LoginPage from './pages/LoginPage';
 import HomePage from './pages/HomePage';
+import AdminPage from './pages/AdminPage';
+
+function AdminRoute({ children }) {
+  const { user } = useAuth();
+  if (!user) return <Navigate to="/login" replace />;
+  if (user.role !== 'admin') return <Navigate to="/" replace />;
+  return children;
+}
 
 function AppRoutes() {
   const { user } = useAuth();
   return (
     <Routes>
-      <Route
-        path="/login"
-        element={user ? <Navigate to="/" replace /> : <LoginPage />}
-      />
+      <Route path="/login" element={user ? <Navigate to="/" replace /> : <LoginPage />} />
       <Route path="/" element={<HomePage />} />
+      <Route
+        path="/admin"
+        element={
+          <AdminRoute>
+            <AdminPage />
+          </AdminRoute>
+        }
+      />
     </Routes>
   );
 }

src/api/users.js

@@ -0,0 +1,16 @@
+import { apiFetch } from './client';
+
+export function getUsers() {
+  return apiFetch('/api/users');
+}
+
+export function updateUserRole(id, role) {
+  return apiFetch(`/api/users/${id}/role`, {
+    method: 'PATCH',
+    body: JSON.stringify({ role }),
+  });
+}
+
+export function deleteUser(id) {
+  return apiFetch(`/api/users/${id}`, { method: 'DELETE' });
+}

src/components/admin/AdminCommon.css

@@ -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);
+}

src/components/admin/AnnouncementAdmin.jsx

@@ -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>
+  );
+}

src/components/admin/DownloadAdmin.jsx

@@ -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>
+  );
+}

src/components/admin/UserAdmin.jsx

@@ -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>
+  );
+}

src/context/AuthContext.jsx

@@ -7,19 +7,22 @@ export function AuthProvider({ children }) {
   const [user, setUser] = useState(() => {
     const token = localStorage.getItem('token');
     const username = localStorage.getItem('username');
-    return token ? { token, username } : null;
+    const role = localStorage.getItem('role');
+    return token ? { token, username, role } : null;
   });
 
   const login = useCallback(async (username, password) => {
     const data = await apiLogin(username, password);
     localStorage.setItem('token', data.token);
     localStorage.setItem('username', data.username);
-    setUser({ token: data.token, username: data.username });
+    localStorage.setItem('role', data.role);
+    setUser({ token: data.token, username: data.username, role: data.role });
   }, []);
 
   const logout = useCallback(() => {
     localStorage.removeItem('token');
     localStorage.removeItem('username');
+    localStorage.removeItem('role');
     setUser(null);
   }, []);
 

src/pages/AdminPage.css

@@ -0,0 +1,97 @@
+.admin-page {
+  min-height: 100vh;
+  background-color: #2E2C2F;
+}
+
+.admin-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 32px;
+  border-bottom: 1px solid rgba(186, 205, 176, 0.1);
+}
+
+.admin-header-left {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.admin-home-link {
+  font-size: 0.85rem;
+  color: rgba(186, 205, 176, 0.6);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.admin-home-link:hover {
+  color: #BACDB0;
+}
+
+.admin-title {
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: #BACDB0;
+  margin: 0;
+}
+
+.admin-header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.admin-username {
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.btn-admin-logout {
+  padding: 8px 16px;
+  background: transparent;
+  color: rgba(186, 205, 176, 0.7);
+  border: 1px solid rgba(186, 205, 176, 0.25);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.btn-admin-logout:hover {
+  background: rgba(186, 205, 176, 0.08);
+}
+
+.admin-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 16px 32px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.admin-tab {
+  padding: 10px 24px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.45);
+  border: none;
+  border-bottom: 2px solid transparent;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.2s, border-color 0.2s;
+  margin-bottom: -1px;
+}
+
+.admin-tab:hover {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.admin-tab.active {
+  color: #BACDB0;
+  border-bottom-color: #BACDB0;
+}
+
+.admin-main {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 32px 24px 80px;
+}

src/pages/AdminPage.jsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import AnnouncementAdmin from '../components/admin/AnnouncementAdmin';
+import DownloadAdmin from '../components/admin/DownloadAdmin';
+import UserAdmin from '../components/admin/UserAdmin';
+import './AdminPage.css';
+
+const TABS = [
+  { key: 'announcement', label: '공지사항' },
+  { key: 'download', label: '다운로드 정보' },
+  { key: 'user', label: '유저 관리' },
+];
+
+export default function AdminPage() {
+  const { user, logout } = useAuth();
+  const [tab, setTab] = useState('announcement');
+
+  return (
+    <div className="admin-page">
+      <header className="admin-header">
+        <div className="admin-header-left">
+          <Link to="/" className="admin-home-link">← 메인으로</Link>
+          <h1 className="admin-title">관리자 페이지</h1>
+        </div>
+        <div className="admin-header-right">
+          <span className="admin-username">{user?.username}</span>
+          <button className="btn-admin-logout" onClick={logout}>로그아웃</button>
+        </div>
+      </header>
+
+      <div className="admin-tabs">
+        {TABS.map((t) => (
+          <button
+            key={t.key}
+            className={`admin-tab${tab === t.key ? ' active' : ''}`}
+            onClick={() => setTab(t.key)}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      <main className="admin-main">
+        {tab === 'announcement' && <AnnouncementAdmin />}
+        {tab === 'download' && <DownloadAdmin />}
+        {tab === 'user' && <UserAdmin />}
+      </main>
+    </div>
+  );
+}

src/pages/HomePage.css

@@ -47,6 +47,21 @@
   border-color: rgba(186, 205, 176, 0.45);
 }
 
+.btn-admin-link {
+  padding: 8px 16px;
+  background: transparent;
+  color: rgba(186, 205, 176, 0.7);
+  border: 1px solid rgba(186, 205, 176, 0.25);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  text-decoration: none;
+  transition: background 0.2s;
+}
+
+.btn-admin-link:hover {
+  background: rgba(186, 205, 176, 0.08);
+}
+
 .btn-header-login {
   padding: 8px 20px;
   background: #BACDB0;

src/pages/HomePage.jsx

@@ -15,6 +15,9 @@ export default function HomePage() {
           {user ? (
             <>
               <span className="home-username">{user.username}</span>
+              {user.role === 'admin' && (
+                <Link to="/admin" className="btn-admin-link">관리자</Link>
+              )}
               <button className="btn-logout" onClick={logout}>로그아웃</button>
             </>
           ) : (