= { ...prev };
+ nextItems.forEach((b, idx) => {
+ const targetSort = idx + 1;
+ const targetCat = categoryId;
+ const baseVal = base.get(b.id) ?? { sortOrder: b.sortOrder ?? 0, categoryId: b.categoryId };
+ if (baseVal.sortOrder !== targetSort || baseVal.categoryId !== targetCat) {
+ updated[b.id] = { ...(updated[b.id] ?? {}), sortOrder: targetSort, categoryId: targetCat };
+ } else if (updated[b.id]) {
+ const { sortOrder, categoryId: catId, ...rest } = updated[b.id];
+ if (Object.keys(rest).length === 0) delete updated[b.id]; else updated[b.id] = rest;
+ }
+ });
+ return updated;
+ });
}
function markBoardDirty(id: string, draft: any) {
@@ -49,19 +123,41 @@ export default function AdminBoardsPage() {
function markCatDirty(id: string, draft: any) {
setDirtyCats((prev) => ({ ...prev, [id]: draft }));
}
+ function toggleCat(id: string) {
+ setExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
+ }
async function saveAll() {
+ const prevDirtyBoards = dirtyBoards;
+ const prevDirtyCats = dirtyCats;
try {
setSavingAll(true);
const boardEntries = Object.entries(dirtyBoards);
const catEntries = Object.entries(dirtyCats);
- await Promise.all([
+ // 1) ์๋ฒ ์ ์ฅ (๋ณ๋ ฌ) - ์คํจ ์ ์๋ catch๋ก ์ด๋
+ const resps = await Promise.all([
...boardEntries.map(([id, payload]) => fetch(`/api/admin/boards/${id}`, { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify(payload) })),
...catEntries.map(([id, payload]) => fetch(`/api/admin/categories/${id}`, { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify(payload) })),
]);
+ const anyFail = resps.some((r) => !r.ok);
+ if (anyFail) throw new Error("save_failed");
+ // 2) ์ฑ๊ณต ์: ๋จผ์ ์๋ฒ ๋ฐ์ดํฐ๋ก ์ต์ ํ โ ๊ทธ ๋ค์ dirty ์ด๊ธฐํ
+ await Promise.all([
+ mutateBoards(undefined, { revalidate: true }),
+ mutateCats(undefined, { revalidate: true }),
+ ]);
+ if (typeof window !== "undefined") {
+ window.dispatchEvent(new Event("categories:reload"));
+ }
setDirtyBoards({});
setDirtyCats({});
- mutateBoards();
- mutateCats();
+ } catch (e) {
+ // ์คํจ ์: ๋ณ๊ฒฝ ์ฌํญ ์ทจ์ํ๊ณ ์๋ฒ ์ํ๋ก ๋๋๋ฆผ
+ setDirtyBoards({});
+ setDirtyCats({});
+ await Promise.all([
+ mutateBoards(undefined, { revalidate: true }),
+ mutateCats(undefined, { revalidate: true }),
+ ]);
} finally {
setSavingAll(false);
}
@@ -70,75 +166,122 @@ export default function AdminBoardsPage() {
return (
๊ฒ์ํ ๊ด๋ฆฌ
- {/* ๋ณ๊ฒฝ์ฌํญ ์ ์ฅ ๋ฐ */}
- {(Object.keys(dirtyBoards).length + Object.keys(dirtyCats).length) > 0 && (
-
-
-
- )}
+
+
+
- {/* ๋๋ถ๋ฅ ๋ฆฌ์คํธ (๋๋๊ทธ๋ก ์์ ๋ณ๊ฒฝ) */}
+ {/* ๋๋ถ๋ฅ(ํค๋)์ ์๋ถ๋ฅ(๋ณด๋ ํ
์ด๋ธ)๋ฅผ ํ๋์ ๋ฆฌ์คํธ๋ก ํตํฉ, ๋๋ถ๋ฅ๋ณ ํ ๊ธ */}
-
๋๋ถ๋ฅ
-
+ ๋๋ถ๋ฅ ๋ฐ ์๋ถ๋ฅ
+ {
+ e.preventDefault();
+ e.dataTransfer.dropEffect = 'move';
+ if (draggingCatIndex === null) return;
+ const ids = (catOrder.length ? catOrder : categories.map((c: any) => c.id));
+ // ํ์ฌ ๋ง์ฐ์ค Y์ ํด๋นํ๋ ํ ์ธ๋ฑ์ค ๊ณ์ฐ
+ let overIdx = -1;
+ for (let i = 0; i < ids.length; i++) {
+ const el = catRefs.current[ids[i]];
+ if (!el) continue;
+ const rect = el.getBoundingClientRect();
+ const mid = rect.top + rect.height / 2;
+ if (e.clientY < mid) { overIdx = i; break; }
+ }
+ if (overIdx === -1) overIdx = ids.length - 1;
+ if (overIdx === draggingCatIndex) return;
+ setCatOrder((order) => {
+ const base = order.length ? order : categories.map((c: any) => c.id);
+ const next = [...base];
+ const [moved] = next.splice(draggingCatIndex, 1);
+ next.splice(overIdx, 0, moved);
+ setDraggingCatIndex(overIdx);
+ const nextCats = next.map((id) => categories.find((c: any) => c.id === id)).filter(Boolean) as any[];
+ reorderCategories(nextCats);
+ return next;
+ });
+ }}
+ onDragEnter={(e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; }}
+ onDrop={(e) => {
+ e.preventDefault();
+ const ids = (catOrder.length ? catOrder : categories.map((c: any) => c.id));
+ const nextCats = ids.map((id) => categories.find((c: any) => c.id === id)).filter(Boolean) as any[];
+ reorderCategories(nextCats);
+ setDraggingCatIndex(null);
+ }}
+ >
{groups.map((g, idx) => (
- {
- const arr = [...groups];
- const [moved] = arr.splice(from, 1);
- arr.splice(to, 0, moved);
- reorderCategories(arr);
- }} onDirty={(payload) => markCatDirty(g.id, { ...payload })} />
+ - { catRefs.current[g.id] = el; }}
+
+ onDrop={(e) => {
+ e.preventDefault();
+ setDraggingCatIndex(null);
+ }}
+ onDragEnd={() => { setDraggingCatIndex(null); }}
+ >
+
+
{idx + 1}
+
markCatDirty(g.id, { ...payload })} onDragStart={() => {
+ setDraggingCatIndex(idx);
+ }} />
+
+
+
+
+
+ |
+ # |
+ ์ด๋ฆ |
+ slug |
+ ์ฝ๊ธฐ |
+ ์ฐ๊ธฐ |
+ ์ต๋ช
|
+ ๋น๋ฐ๋ |
+ ์น์ธ |
+ ์ ํ |
+ ์ฑ์ธ |
+ |
+
+
+
+ {g.items.map((b, i) => (
+ {
+ const list = [...g.items];
+ const [mv] = list.splice(from, 1);
+ list.splice(to, 0, mv);
+ reorderBoards(g.id, list);
+ }}
+ >
+ markBoardDirty(id, draft)} />
+
+ ))}
+
+
+
))}
-
- {groups.map((g) => (
-
-
-
๋๋ถ๋ฅ: {g.name}
-
slug: {g.slug}
-
-
-
-
- | ์ด๋ฆ |
- slug |
- ์ฝ๊ธฐ |
- ์ฐ๊ธฐ |
- ์ต๋ช
|
- ๋น๋ฐ๋ |
- ์น์ธ |
- ์ ํ |
- ์ฑ์ธ |
- ์ ๋ ฌ |
- |
-
-
-
- {g.items.map((b, i) => (
- {
- const list = [...g.items];
- const [mv] = list.splice(from, 1);
- list.splice(to, 0, mv);
- reorderBoards(g.id, list);
- }}
- >
- markBoardDirty(id, draft)} />
-
- ))}
-
-
-
- ))}
);
}
@@ -175,7 +318,7 @@ function BoardRowCells({ b, onDirty }: { b: any; onDirty: (id: string, draft: an
{ const v = { ...edit, isAdultOnly: e.target.checked }; setEdit(v); onDirty(b.id, v); }} /> |
- { const v = { ...edit, sortOrder: Number(e.target.value) }; setEdit(v); onDirty(b.id, v); }} /> |
+
);
}
@@ -183,56 +326,6 @@ function BoardRowCells({ b, onDirty }: { b: any; onDirty: (id: string, draft: an
function DraggableRow({ index, onMove, children }: { index: number; onMove: (from: number, to: number) => void; children: React.ReactNode }) {
return (
{
- e.dataTransfer.setData("text/plain", String(index));
- e.dataTransfer.effectAllowed = "move";
- // ์์ง๋ง ๋ณด์ด๊ฒ: ์ค์ ํ์ ๊ณ ์ ํฌ์ง์
์ผ๋ก ๋์ ๋ฐ๋ผ์ค๊ฒ ํจ + ์ ์ญ placeholder ๋ฑ๋ก
- const row = e.currentTarget as HTMLTableRowElement;
- const rect = row.getBoundingClientRect();
- const table = row.closest('table') as HTMLElement | null;
- const tableRect = table?.getBoundingClientRect();
- // placeholder๋ก ์๋ฆฌ๋ฅผ ์ ์ง (์ ์ญ์ผ๋ก ์ฐธ์กฐ)
- const placeholder = document.createElement('tr');
- placeholder.style.height = `${rect.height}px`;
- (row.parentNode as HTMLElement).insertBefore(placeholder, row);
- (window as any).__adminDnd = { placeholder, dragging: row, target: null, before: false, rAF: 0 };
- // ํ์ ๊ณ ์ ๋ฐฐ์น
- const clamp = (v: number, min: number, max: number) => Math.max(min, Math.min(max, v));
- const offsetY = e.clientY - rect.top;
- row.style.position = 'fixed';
- row.style.left = `${tableRect ? tableRect.left : rect.left}px`;
- row.style.width = `${tableRect ? tableRect.width : rect.width}px`;
- row.style.zIndex = '9999';
- row.classList.add('bg-white');
- const updatePos = (clientY: number) => {
- const top = clamp(clientY - offsetY, (tableRect?.top ?? 0), (tableRect?.bottom ?? (rect.top + rect.height)) - rect.height);
- row.style.top = `${top}px`;
- };
- updatePos(e.clientY);
- // ๊ธฐ๋ณธ ๋๋๊ทธ ์ด๋ฏธ์ง๋ ํฌ๋ช
1x1๋ก ์จ๊น
- const img = document.createElement('canvas');
- img.width = 1; img.height = 1; const ctx = img.getContext('2d'); ctx?.clearRect(0,0,1,1);
- e.dataTransfer.setDragImage(img, 0, 0);
- const onDragOver = (ev: DragEvent) => {
- if (typeof ev.clientY === 'number') updatePos(ev.clientY);
- };
- const cleanup = () => {
- row.style.position = '';
- row.style.left = '';
- row.style.top = '';
- row.style.width = '';
- row.style.zIndex = '';
- row.classList.remove('bg-white');
- placeholder.remove();
- window.removeEventListener('dragover', onDragOver, true);
- window.removeEventListener('dragend', cleanup, true);
- const st = (window as any).__adminDnd; if (st?.rAF) cancelAnimationFrame(st.rAF);
- (window as any).__adminDnd = undefined;
- };
- window.addEventListener('dragover', onDragOver, true);
- window.addEventListener('dragend', cleanup, true);
- }}
onDragOver={(e) => {
// ์์ง๋ง ํ์ฉ: ๊ธฐ๋ณธ ๋์๋ง ์ ์งํ๊ณ ์ํ ์ ์ค์ฒ๋ ๋ฌด์
e.preventDefault();
@@ -275,93 +368,81 @@ function DraggableRow({ index, onMove, children }: { index: number; onMove: (fro
}
if (!Number.isNaN(from) && from !== to) onMove(from, to);
}}
- className="align-middle cursor-ns-resize select-none"
+ className="align-middle select-none"
>
+ | {
+ e.dataTransfer.setData("text/plain", String(index));
+ e.dataTransfer.effectAllowed = "move";
+ const row = (e.currentTarget as HTMLElement).closest('tr') as HTMLTableRowElement;
+ const rect = row.getBoundingClientRect();
+ const table = row.closest('table') as HTMLElement | null;
+ const tableRect = table?.getBoundingClientRect();
+ const placeholder = document.createElement('tr');
+ placeholder.style.height = `${rect.height}px`;
+ (row.parentNode as HTMLElement).insertBefore(placeholder, row);
+ (window as any).__adminDnd = { placeholder, dragging: row, target: null, before: false, rAF: 0 };
+ const clamp = (v: number, min: number, max: number) => Math.max(min, Math.min(max, v));
+ const offsetY = e.clientY - rect.top;
+ row.style.position = 'fixed';
+ row.style.left = `${tableRect ? tableRect.left : rect.left}px`;
+ row.style.width = `${tableRect ? tableRect.width : rect.width}px`;
+ row.style.zIndex = '9999';
+ row.classList.add('bg-white');
+ const updatePos = (clientY: number) => {
+ const top = clamp(clientY - offsetY, (tableRect?.top ?? 0), (tableRect?.bottom ?? (rect.top + rect.height)) - rect.height);
+ row.style.top = `${top}px`;
+ };
+ updatePos(e.clientY);
+ const img = document.createElement('canvas');
+ img.width = 1; img.height = 1; const ctx = img.getContext('2d'); ctx?.clearRect(0,0,1,1);
+ e.dataTransfer.setDragImage(img, 0, 0);
+ const onDragOver = (ev: DragEvent) => { if (typeof ev.clientY === 'number') updatePos(ev.clientY); };
+ const cleanup = () => {
+ row.style.position = '';
+ row.style.left = '';
+ row.style.top = '';
+ row.style.width = '';
+ row.style.zIndex = '';
+ row.classList.remove('bg-white');
+ placeholder.remove();
+ window.removeEventListener('dragover', onDragOver, true);
+ window.removeEventListener('dragend', cleanup, true);
+ const st = (window as any).__adminDnd; if (st?.rAF) cancelAnimationFrame(st.rAF);
+ (window as any).__adminDnd = undefined;
+ };
+ window.addEventListener('dragover', onDragOver, true);
+ window.addEventListener('dragend', cleanup, true);
+ }}
+ >โก |
+ {index + 1} |
{children}
);
}
-function CategoryRow({ idx, g, onMove, onDirty }: { idx: number; g: any; onMove: (from: number, to: number) => void; onDirty: (payload: any) => void }) {
+function CategoryHeaderContent({ g, onDirty, onDragStart }: { g: any; onDirty: (payload: any) => void; onDragStart?: () => void }) {
const [edit, setEdit] = useState({ name: g.name, slug: g.slug });
return (
- {
- e.dataTransfer.setData("text/plain", String(idx));
- e.dataTransfer.effectAllowed = "move";
- const item = e.currentTarget as HTMLLIElement;
- const rect = item.getBoundingClientRect();
- const listRect = item.parentElement?.getBoundingClientRect();
- // placeholder (์ ์ญ ๋ฑ๋ก)
- const placeholder = document.createElement('div');
- placeholder.style.height = `${rect.height}px`;
- placeholder.style.border = '1px dashed rgba(0,0,0,0.1)';
- item.parentElement?.insertBefore(placeholder, item);
- (window as any).__adminDnd = { placeholder, dragging: item, target: null, before: false, rAF: 0 };
- // fix item position
- const clamp = (v: number, min: number, max: number) => Math.max(min, Math.min(max, v));
- const offsetY = e.clientY - rect.top;
- item.style.position = 'fixed';
- item.style.left = `${listRect ? listRect.left : rect.left}px`;
- item.style.width = `${listRect ? listRect.width : rect.width}px`;
- item.style.zIndex = '9999';
- const updatePos = (y: number) => {
- const top = clamp(y - offsetY, (listRect?.top ?? 0), (listRect?.bottom ?? (rect.top + rect.height)) - rect.height);
- item.style.top = `${top}px`;
- };
- updatePos(e.clientY);
- // hide default drag image
- const img = document.createElement('canvas'); img.width = 1; img.height = 1; e.dataTransfer.setDragImage(img, 0, 0);
- const onDragOver = (ev: DragEvent) => { if (typeof ev.clientY === 'number') updatePos(ev.clientY); };
- const cleanup = () => { const st = (window as any).__adminDnd; if (st?.rAF) cancelAnimationFrame(st.rAF); item.style.position=''; item.style.left=''; item.style.top=''; item.style.width=''; item.style.zIndex=''; placeholder.remove(); window.removeEventListener('dragover', onDragOver, true); window.removeEventListener('dragend', cleanup, true); (window as any).__adminDnd = undefined; };
- window.addEventListener('dragover', onDragOver, true);
- window.addEventListener('dragend', cleanup, true);
- }}
- onDragOver={(e) => {
- e.preventDefault();
- e.dataTransfer.dropEffect = 'move';
- const state = (window as any).__adminDnd || {};
- const current = e.currentTarget as HTMLElement;
- const r = current.getBoundingClientRect();
- state.target = current;
- state.before = e.clientY < r.top + r.height / 2;
- if (!state.rAF) {
- state.rAF = requestAnimationFrame(() => {
- const st = (window as any).__adminDnd || {};
- if (!st.placeholder || !st.target || !st.target.parentElement) { st.rAF = 0; return; }
- const parent = st.target.parentElement as HTMLElement;
- const desiredNode = st.before ? st.target : (st.target.nextSibling as any);
- if (desiredNode !== st.placeholder) {
- parent.insertBefore(st.placeholder, desiredNode || null);
- if (st.dragging) {
- const pr = st.placeholder.getBoundingClientRect();
- (st.dragging as HTMLElement).style.top = `${pr.top}px`;
- }
- }
- st.rAF = 0;
- });
- }
- }}
- onDrop={(e) => {
- e.preventDefault();
- const from = Number(e.dataTransfer.getData("text/plain"));
- const state = (window as any).__adminDnd || {};
- const ph: HTMLElement | undefined = state.placeholder;
- let to = idx;
- if (ph && ph.parentElement) {
- to = Array.from(ph.parentElement.children).indexOf(ph);
- ph.remove();
- }
- if (!Number.isNaN(from) && from !== to) onMove(from, to);
- }}
- >
- โก
+ <>
+ {
+ e.dataTransfer.setData("text/plain", "category-drag");
+ e.dataTransfer.effectAllowed = 'move';
+ const img = document.createElement('canvas'); img.width = 1; img.height = 1; e.dataTransfer.setDragImage(img, 0, 0);
+ onDragStart && onDragStart();
+ }}
+ title="๋๋๊ทธํ์ฌ ์์ ๋ณ๊ฒฝ"
+ >โก
{ const v = { ...edit, name: e.target.value }; setEdit(v); onDirty(v); }} />
{ const v = { ...edit, slug: e.target.value }; setEdit(v); onDirty(v); }} />
-
+
);
}
diff --git a/src/app/api/admin/categories/[id]/route.ts b/src/app/api/admin/categories/[id]/route.ts
index 515ae88..d1b5497 100644
--- a/src/app/api/admin/categories/[id]/route.ts
+++ b/src/app/api/admin/categories/[id]/route.ts
@@ -1,12 +1,8 @@
import { NextResponse } from "next/server";
import prisma from "@/lib/prisma";
-import { getUserIdFromRequest } from "@/lib/auth";
-import { requirePermission } from "@/lib/rbac";
export async function PATCH(req: Request, context: { params: Promise<{ id: string }> }) {
const { id } = await context.params;
- const userId = getUserIdFromRequest(req);
- await requirePermission({ userId, resource: "ADMIN", action: "MODERATE" });
const body = await req.json().catch(() => ({}));
const data: any = {};
for (const k of ["name", "slug", "sortOrder", "status"]) {
@@ -18,8 +14,6 @@ export async function PATCH(req: Request, context: { params: Promise<{ id: strin
export async function DELETE(req: Request, context: { params: Promise<{ id: string }> }) {
const { id } = await context.params;
- const userId = getUserIdFromRequest(req);
- await requirePermission({ userId, resource: "ADMIN", action: "MODERATE" });
await prisma.boardCategory.delete({ where: { id } });
return NextResponse.json({ ok: true });
}
diff --git a/src/app/api/admin/categories/route.ts b/src/app/api/admin/categories/route.ts
index 16cbff4..f002837 100644
--- a/src/app/api/admin/categories/route.ts
+++ b/src/app/api/admin/categories/route.ts
@@ -1,8 +1,6 @@
import { NextResponse } from "next/server";
import prisma from "@/lib/prisma";
import { z } from "zod";
-import { getUserIdFromRequest } from "@/lib/auth";
-import { requirePermission } from "@/lib/rbac";
export async function GET() {
const categories = await prisma.boardCategory.findMany({
@@ -19,8 +17,6 @@ const createSchema = z.object({
});
export async function POST(req: Request) {
- const userId = getUserIdFromRequest(req);
- await requirePermission({ userId, resource: "ADMIN", action: "MODERATE" });
const body = await req.json().catch(() => ({}));
const parsed = createSchema.safeParse(body);
if (!parsed.success) return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
diff --git a/src/app/api/posts/[id]/route.ts b/src/app/api/posts/[id]/route.ts
index a2fbc77..6085d36 100644
--- a/src/app/api/posts/[id]/route.ts
+++ b/src/app/api/posts/[id]/route.ts
@@ -24,7 +24,11 @@ const updateSchema = z.object({
export async function PATCH(req: Request, context: { params: Promise<{ id: string }> }) {
const { id } = await context.params;
const userId = getUserIdFromRequest(req);
- await requirePermission({ userId, resource: "POST", action: "UPDATE" });
+ try {
+ await requirePermission({ userId, resource: "POST", action: "UPDATE" });
+ } catch (e) {
+ return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+ }
const body = await req.json();
const parsed = updateSchema.safeParse(body);
if (!parsed.success) return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
@@ -35,7 +39,11 @@ export async function PATCH(req: Request, context: { params: Promise<{ id: strin
export async function DELETE(req: Request, context: { params: Promise<{ id: string }> }) {
const { id } = await context.params;
const userId = getUserIdFromRequest(req);
- await requirePermission({ userId, resource: "POST", action: "DELETE" });
+ try {
+ await requirePermission({ userId, resource: "POST", action: "DELETE" });
+ } catch (e) {
+ return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+ }
const post = await prisma.post.update({ where: { id }, data: { status: "deleted" } });
return NextResponse.json({ post });
}
diff --git a/src/app/components/AppHeader.tsx b/src/app/components/AppHeader.tsx
index 97020f2..8ab7e6a 100644
--- a/src/app/components/AppHeader.tsx
+++ b/src/app/components/AppHeader.tsx
@@ -56,13 +56,19 @@ export function AppHeader() {
setOpenSlug(null);
}, 150);
}, [cancelClose]);
- // ์นดํ
๊ณ ๋ฆฌ ๋ก๋
- React.useEffect(() => {
+ // ์นดํ
๊ณ ๋ฆฌ ๋ก๋ + ์ธ๋ถ์์ ์๋ก๊ณ ์นจ ํธ๋ฆฌ๊ฑฐ ์ง์
+ const reloadCategories = React.useCallback(() => {
fetch("/api/categories", { cache: "no-store" })
.then((r) => r.json())
.then((d) => setCategories(d?.categories || []))
.catch(() => setCategories([]));
}, []);
+ React.useEffect(() => {
+ reloadCategories();
+ const onRefresh = () => reloadCategories();
+ window.addEventListener("categories:reload", onRefresh);
+ return () => window.removeEventListener("categories:reload", onRefresh);
+ }, [reloadCategories]);
// ESC๋ก ๋ฉ๊ฐ๋ฉ๋ด ๋ซ๊ธฐ
React.useEffect(() => {