admin page
This commit is contained in:
koreacomp5
41
src/app/admin/AdminSidebar.tsx
Normal file
41
src/app/admin/AdminSidebar.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
const navItems = [
|
||||
{ href: "/admin/menus", label: "메뉴 관리" },
|
||||
{ href: "/admin/boards", label: "게시판" },
|
||||
{ href: "/admin/users", label: "사용자" },
|
||||
{ href: "/admin/logs", label: "로그" },
|
||||
{ href: "/admin/banners", label: "배너" },
|
||||
];
|
||||
|
||||
export default function AdminSidebar() {
|
||||
const pathname = usePathname();
|
||||
return (
|
||||
<aside className="w-56 shrink-0 border-r border-neutral-200 bg-white/80 backdrop-blur h-full">
|
||||
<div className="px-4 py-4 border-b border-neutral-200">
|
||||
<Link href="/admin" className="block text-lg font-bold text-neutral-900">관리자</Link>
|
||||
</div>
|
||||
<nav className="p-2 space-y-1">
|
||||
{navItems.map((it) => {
|
||||
const active = pathname === it.href;
|
||||
return (
|
||||
<Link
|
||||
key={it.href}
|
||||
href={it.href}
|
||||
className={`flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors ${
|
||||
active ? "bg-neutral-900 text-white" : "text-neutral-800 hover:bg-neutral-100"
|
||||
}`}
|
||||
>
|
||||
{it.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,84 +1,198 @@
|
||||
"use client";
|
||||
import useSWR from "swr";
|
||||
import { useState } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
|
||||
const fetcher = (url: string) => fetch(url).then((r) => r.json());
|
||||
|
||||
export default function AdminBoardsPage() {
|
||||
const { data, mutate } = useSWR<{ boards: any[] }>("/api/admin/boards", fetcher);
|
||||
const boards = data?.boards ?? [];
|
||||
const { data: boardsResp, mutate: mutateBoards } = useSWR<{ boards: any[] }>("/api/admin/boards", fetcher);
|
||||
const { data: catsResp, mutate: mutateCats } = useSWR<{ categories: any[] }>("/api/admin/categories", fetcher);
|
||||
const boards = boardsResp?.boards ?? [];
|
||||
const categories = (catsResp?.categories ?? []).sort((a: any, b: any) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
|
||||
const groups = useMemo(() => {
|
||||
const map: Record<string, any[]> = {};
|
||||
for (const b of boards) {
|
||||
const cid = b.categoryId ?? "uncat";
|
||||
if (!map[cid]) map[cid] = [];
|
||||
map[cid].push(b);
|
||||
}
|
||||
return categories.map((c: any) => ({ ...c, items: (map[c.id] ?? []).sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0)) }));
|
||||
}, [boards, categories]);
|
||||
|
||||
const [savingId, setSavingId] = useState<string | null>(null);
|
||||
async function save(b: any) {
|
||||
setSavingId(b.id);
|
||||
await fetch(`/api/admin/boards/${b.id}`, { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify(b) });
|
||||
setSavingId(null);
|
||||
mutate();
|
||||
mutateBoards();
|
||||
}
|
||||
|
||||
// DnD: 카테고리 순서 변경
|
||||
async function reorderCategories(next: any[]) {
|
||||
// optimistic update
|
||||
await Promise.all(next.map((c, idx) => fetch(`/api/admin/categories/${c.id}`, { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify({ sortOrder: idx + 1 }) })));
|
||||
mutateCats();
|
||||
}
|
||||
|
||||
// DnD: 보드 순서 변경 (카테고리 내부)
|
||||
async function reorderBoards(categoryId: string, nextItems: any[]) {
|
||||
await Promise.all(nextItems.map((b, idx) => fetch(`/api/admin/boards/${b.id}`, { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify({ sortOrder: idx + 1, categoryId }) })));
|
||||
mutateBoards();
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>게시판 설정</h1>
|
||||
<table style={{ width: "100%", borderCollapse: "collapse" }}>
|
||||
<thead>
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-xl md:text-2xl font-bold text-neutral-900">게시판 관리</h1>
|
||||
{/* 대분류 리스트 (드래그로 순서 변경) */}
|
||||
<div className="rounded-xl border border-neutral-200 overflow-hidden bg-white">
|
||||
<div className="px-4 py-2 border-b border-neutral-200 text-sm font-semibold">대분류</div>
|
||||
<ul className="divide-y divide-neutral-100">
|
||||
{groups.map((g, idx) => (
|
||||
<CategoryRow key={g.id} idx={idx} g={g} onMove={(from, to) => {
|
||||
const arr = [...groups];
|
||||
const [moved] = arr.splice(from, 1);
|
||||
arr.splice(to, 0, moved);
|
||||
reorderCategories(arr);
|
||||
}} onSave={async (payload) => {
|
||||
await fetch(`/api/admin/categories/${g.id}`, { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify(payload) });
|
||||
mutateCats();
|
||||
}} />
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{groups.map((g) => (
|
||||
<section key={g.id} className="rounded-xl border border-neutral-200 overflow-hidden bg-white">
|
||||
<div className="px-4 py-2 border-b border-neutral-200 flex items-center justify-between">
|
||||
<div className="text-sm font-semibold">대분류: {g.name}</div>
|
||||
<div className="text-xs text-neutral-500">slug: {g.slug}</div>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="text-xs text-neutral-500 border-b border-neutral-200">
|
||||
<tr>
|
||||
<th>이름</th>
|
||||
<th>slug</th>
|
||||
<th>읽기</th>
|
||||
<th>쓰기</th>
|
||||
<th>익명</th>
|
||||
<th>비밀댓</th>
|
||||
<th>승인</th>
|
||||
<th>유형</th>
|
||||
<th>성인</th>
|
||||
<th>정렬</th>
|
||||
<th></th>
|
||||
<th className="px-3 py-2 text-left">이름</th>
|
||||
<th className="px-3 py-2 text-left">slug</th>
|
||||
<th className="px-3 py-2">읽기</th>
|
||||
<th className="px-3 py-2">쓰기</th>
|
||||
<th className="px-3 py-2">익명</th>
|
||||
<th className="px-3 py-2">비밀댓</th>
|
||||
<th className="px-3 py-2">승인</th>
|
||||
<th className="px-3 py-2">유형</th>
|
||||
<th className="px-3 py-2">성인</th>
|
||||
<th className="px-3 py-2">정렬</th>
|
||||
<th className="px-3 py-2"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{boards.map((b) => (
|
||||
<Row key={b.id} b={b} onSave={save} saving={savingId === b.id} />
|
||||
<tbody className="divide-y divide-neutral-100">
|
||||
{g.items.map((b, i) => (
|
||||
<DraggableRow
|
||||
key={b.id}
|
||||
index={i}
|
||||
onMove={(from, to) => {
|
||||
const list = [...g.items];
|
||||
const [mv] = list.splice(from, 1);
|
||||
list.splice(to, 0, mv);
|
||||
reorderBoards(g.id, list);
|
||||
}}
|
||||
>
|
||||
<Row b={b} onSave={save} saving={savingId === b.id} />
|
||||
</DraggableRow>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Row({ b, onSave, saving }: { b: any; onSave: (b: any) => void; saving: boolean }) {
|
||||
const [edit, setEdit] = useState(b);
|
||||
return (
|
||||
<tr>
|
||||
<td><input value={edit.name} onChange={(e) => setEdit({ ...edit, name: e.target.value })} /></td>
|
||||
<td><input value={edit.slug} onChange={(e) => setEdit({ ...edit, slug: e.target.value })} /></td>
|
||||
<td>
|
||||
<select value={edit.readLevel} onChange={(e) => setEdit({ ...edit, readLevel: e.target.value })}>
|
||||
<tr className="align-middle">
|
||||
<td className="px-3 py-2"><input className="h-9 w-full rounded-md border border-neutral-300 px-2 text-sm" value={edit.name} onChange={(e) => setEdit({ ...edit, name: e.target.value })} /></td>
|
||||
<td className="px-3 py-2"><input className="h-9 w-full rounded-md border border-neutral-300 px-2 text-sm" value={edit.slug} onChange={(e) => setEdit({ ...edit, slug: e.target.value })} /></td>
|
||||
<td className="px-3 py-2 text-center">
|
||||
<select className="h-9 rounded-md border border-neutral-300 px-2 text-sm" value={edit.readLevel} onChange={(e) => setEdit({ ...edit, readLevel: e.target.value })}>
|
||||
<option value="public">public</option>
|
||||
<option value="member">member</option>
|
||||
<option value="moderator">moderator</option>
|
||||
<option value="admin">admin</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<select value={edit.writeLevel} onChange={(e) => setEdit({ ...edit, writeLevel: e.target.value })}>
|
||||
<td className="px-3 py-2 text-center">
|
||||
<select className="h-9 rounded-md border border-neutral-300 px-2 text-sm" value={edit.writeLevel} onChange={(e) => setEdit({ ...edit, writeLevel: e.target.value })}>
|
||||
<option value="public">public</option>
|
||||
<option value="member">member</option>
|
||||
<option value="moderator">moderator</option>
|
||||
<option value="admin">admin</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><input type="checkbox" checked={edit.allowAnonymousPost} onChange={(e) => setEdit({ ...edit, allowAnonymousPost: e.target.checked })} /></td>
|
||||
<td><input type="checkbox" checked={edit.allowSecretComment} onChange={(e) => setEdit({ ...edit, allowSecretComment: e.target.checked })} /></td>
|
||||
<td><input type="checkbox" checked={edit.requiresApproval} onChange={(e) => setEdit({ ...edit, requiresApproval: e.target.checked })} /></td>
|
||||
<td>
|
||||
<select value={edit.type} onChange={(e) => setEdit({ ...edit, type: e.target.value })}>
|
||||
<td className="px-3 py-2 text-center"><input type="checkbox" checked={edit.allowAnonymousPost} onChange={(e) => setEdit({ ...edit, allowAnonymousPost: e.target.checked })} /></td>
|
||||
<td className="px-3 py-2 text-center"><input type="checkbox" checked={edit.allowSecretComment} onChange={(e) => setEdit({ ...edit, allowSecretComment: e.target.checked })} /></td>
|
||||
<td className="px-3 py-2 text-center"><input type="checkbox" checked={edit.requiresApproval} onChange={(e) => setEdit({ ...edit, requiresApproval: e.target.checked })} /></td>
|
||||
<td className="px-3 py-2 text-center">
|
||||
<select className="h-9 rounded-md border border-neutral-300 px-2 text-sm" value={edit.type} onChange={(e) => setEdit({ ...edit, type: e.target.value })}>
|
||||
<option value="general">general</option>
|
||||
<option value="special">special</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><input type="checkbox" checked={!!edit.isAdultOnly} onChange={(e) => setEdit({ ...edit, isAdultOnly: e.target.checked })} /></td>
|
||||
<td><input type="number" value={edit.sortOrder} onChange={(e) => setEdit({ ...edit, sortOrder: Number(e.target.value) })} style={{ width: 80 }} /></td>
|
||||
<td><button onClick={() => onSave(edit)} disabled={saving}>{saving ? "저장중" : "저장"}</button></td>
|
||||
<td className="px-3 py-2 text-center"><input type="checkbox" checked={!!edit.isAdultOnly} onChange={(e) => setEdit({ ...edit, isAdultOnly: e.target.checked })} /></td>
|
||||
<td className="px-3 py-2 text-center"><input className="h-9 w-20 rounded-md border border-neutral-300 px-2 text-sm" type="number" value={edit.sortOrder} onChange={(e) => setEdit({ ...edit, sortOrder: Number(e.target.value) })} /></td>
|
||||
<td className="px-3 py-2 text-right"><button className="h-9 px-3 rounded-md bg-neutral-900 text-white text-sm disabled:opacity-60" onClick={() => onSave(edit)} disabled={saving}>{saving ? "저장중" : "저장"}</button></td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
function DraggableRow({ index, onMove, children }: { index: number; onMove: (from: number, to: number) => void; children: React.ReactNode }) {
|
||||
return (
|
||||
<tr
|
||||
draggable
|
||||
onDragStart={(e) => {
|
||||
e.dataTransfer.setData("text/plain", String(index));
|
||||
e.dataTransfer.effectAllowed = "move";
|
||||
}}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault();
|
||||
const from = Number(e.dataTransfer.getData("text/plain"));
|
||||
const to = index;
|
||||
if (!Number.isNaN(from) && from !== to) onMove(from, to);
|
||||
}}
|
||||
className="align-middle"
|
||||
>
|
||||
{children}
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
function CategoryRow({ idx, g, onMove, onSave }: { idx: number; g: any; onMove: (from: number, to: number) => void; onSave: (payload: any) => void }) {
|
||||
const [edit, setEdit] = useState({ name: g.name, slug: g.slug });
|
||||
return (
|
||||
<li
|
||||
className="px-4 py-3 flex items-center gap-3"
|
||||
draggable
|
||||
onDragStart={(e) => {
|
||||
e.dataTransfer.setData("text/plain", String(idx));
|
||||
e.dataTransfer.effectAllowed = "move";
|
||||
}}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault();
|
||||
const from = Number(e.dataTransfer.getData("text/plain"));
|
||||
const to = idx;
|
||||
if (!Number.isNaN(from) && from !== to) onMove(from, to);
|
||||
}}
|
||||
>
|
||||
<div className="w-6 text-xs text-neutral-500">≡</div>
|
||||
<input className="h-8 rounded-md border border-neutral-300 px-2 text-sm w-48" value={edit.name} onChange={(e) => setEdit({ ...edit, name: e.target.value })} />
|
||||
<input className="h-8 rounded-md border border-neutral-300 px-2 text-sm w-48" value={edit.slug} onChange={(e) => setEdit({ ...edit, slug: e.target.value })} />
|
||||
<div className="flex-1" />
|
||||
<button className="h-8 px-3 rounded-md border border-neutral-300 text-sm hover:bg-neutral-100" onClick={() => onSave(edit)}>수정</button>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
21
src/app/admin/layout.tsx
Normal file
21
src/app/admin/layout.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import type { Metadata } from "next";
|
||||
import AdminSidebar from "@/app/admin/AdminSidebar";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Admin | ASSM",
|
||||
};
|
||||
|
||||
export default function AdminLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="min-h-[calc(100vh-0px)] flex">
|
||||
<AdminSidebar />
|
||||
<main className="flex-1 min-w-0 bg-[#F7F7F7]">
|
||||
<div className="max-w-[1920px] mx-auto px-4 py-6">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
82
src/app/admin/menus/page.tsx
Normal file
82
src/app/admin/menus/page.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
type MenuItem = { id: string; label: string; path: string; visible: boolean; order: number };
|
||||
|
||||
const initialMenus: MenuItem[] = [
|
||||
{ id: "1", label: "홈", path: "/", visible: true, order: 1 },
|
||||
{ id: "2", label: "게시판", path: "/boards", visible: true, order: 2 },
|
||||
{ id: "3", label: "쿠폰", path: "/coupons", visible: false, order: 3 },
|
||||
];
|
||||
|
||||
export default function AdminMenusPage() {
|
||||
const [menus, setMenus] = useState<MenuItem[]>(initialMenus);
|
||||
const [form, setForm] = useState<{ label: string; path: string; visible: boolean }>({ label: "", path: "", visible: true });
|
||||
|
||||
function addMenu() {
|
||||
if (!form.label.trim() || !form.path.trim()) return;
|
||||
const next: MenuItem = { id: crypto.randomUUID(), label: form.label, path: form.path, visible: form.visible, order: menus.length + 1 };
|
||||
setMenus((m) => [...m, next]);
|
||||
setForm({ label: "", path: "", visible: true });
|
||||
}
|
||||
|
||||
function removeMenu(id: string) {
|
||||
setMenus((m) => m.filter((x) => x.id !== id));
|
||||
}
|
||||
|
||||
function toggleVisible(id: string) {
|
||||
setMenus((m) => m.map((x) => (x.id === id ? { ...x, visible: !x.visible } : x)));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<header className="flex items-center justify-between">
|
||||
<h1 className="text-xl md:text-2xl font-bold text-neutral-900">메뉴 관리</h1>
|
||||
</header>
|
||||
|
||||
{/* 추가 폼 */}
|
||||
<section className="rounded-xl bg-white border border-neutral-200 overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-neutral-200 text-sm font-medium">메뉴 추가</div>
|
||||
<div className="p-4 grid grid-cols-1 md:grid-cols-[240px_1fr_auto] gap-3 items-center">
|
||||
<input className="h-10 rounded-md border border-neutral-300 px-3 text-sm" placeholder="이름" value={form.label} onChange={(e) => setForm({ ...form, label: e.target.value })} />
|
||||
<input className="h-10 rounded-md border border-neutral-300 px-3 text-sm" placeholder="경로 (/path)" value={form.path} onChange={(e) => setForm({ ...form, path: e.target.value })} />
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="flex items-center gap-1 text-sm text-neutral-700">
|
||||
<input type="checkbox" checked={form.visible} onChange={(e) => setForm({ ...form, visible: e.target.checked })} /> 표시
|
||||
</label>
|
||||
<button className="h-10 px-4 rounded-md bg-neutral-900 text-white text-sm hover:bg-neutral-800" onClick={addMenu}>추가</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 목록 */}
|
||||
<section className="rounded-xl bg-white border border-neutral-200 overflow-hidden">
|
||||
<div className="px-4 py-2 text-xs text-neutral-500 border-b border-neutral-200 grid grid-cols-[60px_1fr_1fr_120px_120px]">
|
||||
<div>#</div>
|
||||
<div>이름</div>
|
||||
<div>경로</div>
|
||||
<div className="text-center">표시</div>
|
||||
<div className="text-right">관리</div>
|
||||
</div>
|
||||
<ul className="divide-y divide-neutral-100">
|
||||
{menus.sort((a, b) => a.order - b.order).map((m, idx) => (
|
||||
<li key={m.id} className="px-4 py-3 grid grid-cols-[60px_1fr_1fr_120px_120px] items-center">
|
||||
<div className="text-sm text-neutral-500">{idx + 1}</div>
|
||||
<div className="truncate text-sm">{m.label}</div>
|
||||
<div className="truncate text-sm text-neutral-700">{m.path}</div>
|
||||
<div className="text-center">
|
||||
<button onClick={() => toggleVisible(m.id)} className={`h-7 px-3 rounded-full text-xs border ${m.visible ? "bg-neutral-900 text-white border-neutral-900" : "bg-white text-neutral-700 border-neutral-300 hover:bg-neutral-100"}`}>{m.visible ? "표시" : "숨김"}</button>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<button onClick={() => removeMenu(m.id)} className="h-7 px-3 rounded-md border border-neutral-300 text-xs hover:bg-neutral-100">삭제</button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -7,9 +7,9 @@ export default function AdminDashboardPage() {
|
||||
const { data } = useSWR<{ users: number; posts: number; comments: number; reportsOpen: number; pendingReviews: number }>("/api/admin/dashboard", fetcher);
|
||||
const m = data ?? { users: 0, posts: 0, comments: 0, reportsOpen: 0, pendingReviews: 0 };
|
||||
return (
|
||||
<div>
|
||||
<h1>관리자 대시보드</h1>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(5, minmax(0,1fr))", gap: 12 }}>
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-xl md:text-2xl font-bold">관리자 대시보드</h1>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-3">
|
||||
<Card label="사용자" value={m.users} />
|
||||
<Card label="게시글" value={m.posts} />
|
||||
<Card label="댓글" value={m.comments} />
|
||||
@@ -22,9 +22,9 @@ export default function AdminDashboardPage() {
|
||||
|
||||
function Card({ label, value }: { label: string; value: number }) {
|
||||
return (
|
||||
<div style={{ border: "1px solid #eee", borderRadius: 8, padding: 16 }}>
|
||||
<div style={{ fontSize: 12, opacity: 0.7 }}>{label}</div>
|
||||
<div style={{ fontSize: 24, fontWeight: 700 }}>{value}</div>
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-4">
|
||||
<div className="text-xs text-neutral-500">{label}</div>
|
||||
<div className="text-2xl font-bold">{value}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -128,7 +128,7 @@ export function HeroBanner() {
|
||||
|
||||
{/* Pagination */}
|
||||
{numSlides > 1 && (
|
||||
<div className="absolute bottom-3 right-3 z-10 flex gap-2">
|
||||
<div className="absolute bottom-3 left-1/2 -translate-x-1/2 z-10 flex gap-2">
|
||||
{banners.map((_, i) => (
|
||||
<button
|
||||
key={i}
|
||||
|
||||
Reference in New Issue
Block a user