; defaultMainTypeId?: string | null; defaultListTypeId?: string | null }) {
const [edit, setEdit] = useState(b);
+ const effectiveMainTypeId = edit.mainPageViewTypeId ?? defaultMainTypeId ?? '';
+ const effectiveListTypeId = edit.listViewTypeId ?? defaultListTypeId ?? '';
return (
<>
| { const v = { ...edit, name: e.target.value }; setEdit(v); onDirty(b.id, v); }} /> |
{ const v = { ...edit, slug: e.target.value }; setEdit(v); onDirty(b.id, v); }} /> |
+
+
+ |
+
+
+ |
|
{ const v = { ...edit, isAdultOnly: e.target.checked }; setEdit(v); onDirty(b.id, v); }} /> |
-
+ {allowMove && categories && onMove ? (
+
+
+ |
+ ) : null}
+ { const v = { ...edit, status: e.target.checked ? 'active' : 'hidden' }; setEdit(v); onDirty(b.id, v); }} /> |
+
+
+ |
);
}
-function DraggableRow({ index, onMove, children }: { index: number; onMove: (from: number, to: number) => void; children: React.ReactNode }) {
+function DraggableRow({ catId, boardId, index, children, setRef, onStart, onEnd }: { catId: string; boardId: string; index: number; children: React.ReactNode; setRef: (el: HTMLTableRowElement | null) => void; onStart: () => void; onEnd: () => void }) {
return (
- {
- // 수직만 허용: 기본 동작만 유지하고 수평 제스처는 무시
- e.preventDefault();
- e.dataTransfer.dropEffect = 'move';
- const current = e.currentTarget as HTMLTableRowElement;
- const state = (window as any).__adminDnd || {};
- const ph: HTMLElement | undefined = state.placeholder;
- if (!ph || !current.parentElement) return;
- const r = current.getBoundingClientRect();
- const before = e.clientY < r.top + r.height / 2;
- // 목표만 저장하고 DOM 조작은 프레임당 1회 수행
- state.target = current;
- state.before = before;
- 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 = index;
- if (ph && ph.parentElement) {
- to = Array.from(ph.parentElement.children).indexOf(ph);
- ph.remove();
- }
- if (!Number.isNaN(from) && from !== to) onMove(from, to);
- }}
- 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);
+ e.dataTransfer.effectAllowed = 'move';
+ const img = document.createElement('canvas'); img.width = 1; img.height = 1; e.dataTransfer.setDragImage(img, 0, 0);
+ onStart();
}}
+ onDragEnd={() => { onEnd(); }}
>≡ |
{index + 1} |
{children}
diff --git a/src/app/admin/mainpage-settings/page.tsx b/src/app/admin/mainpage-settings/page.tsx
new file mode 100644
index 0000000..0aec83a
--- /dev/null
+++ b/src/app/admin/mainpage-settings/page.tsx
@@ -0,0 +1,190 @@
+"use client";
+import useSWR from "swr";
+import { useState, useEffect } from "react";
+import { useToast } from "@/app/components/ui/ToastProvider";
+import { Modal } from "@/app/components/ui/Modal";
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json());
+
+export default function MainPageSettingsPage() {
+ const { show } = useToast();
+ const { data: settingsResp, mutate: mutateSettings } = useSWR<{ settings: any }>("/api/admin/mainpage-settings", fetcher);
+ const { data: boardsResp } = useSWR<{ boards: any[] }>("/api/admin/boards", fetcher);
+ const { data: catsResp } = useSWR<{ categories: any[] }>("/api/admin/categories", fetcher);
+
+ const settings = settingsResp?.settings ?? {};
+ const boards = boardsResp?.boards ?? [];
+ const categories = catsResp?.categories ?? [];
+
+ const [saving, setSaving] = useState(false);
+ const [showBoardModal, setShowBoardModal] = useState(false);
+ const [draft, setDraft] = useState({
+ showBanner: settings.showBanner ?? true,
+ showPartnerShops: settings.showPartnerShops ?? true,
+ visibleBoardIds: settings.visibleBoardIds ?? [],
+ });
+
+ // settings가 로드되면 draft 동기화
+ useEffect(() => {
+ if (settingsResp?.settings) {
+ setDraft({
+ showBanner: settings.showBanner ?? true,
+ showPartnerShops: settings.showPartnerShops ?? true,
+ visibleBoardIds: settings.visibleBoardIds ?? [],
+ });
+ }
+ }, [settingsResp, settings]);
+
+ async function save() {
+ setSaving(true);
+ try {
+ const res = await fetch("/api/admin/mainpage-settings", {
+ method: "POST",
+ headers: { "content-type": "application/json" },
+ body: JSON.stringify(draft),
+ });
+ if (!res.ok) throw new Error("save_failed");
+ const data = await res.json();
+ // 저장된 설정으로 즉시 업데이트
+ await mutateSettings({ settings: data.settings }, { revalidate: false });
+ show("저장되었습니다.");
+ } catch (e) {
+ console.error(e);
+ show("저장 중 오류가 발생했습니다.");
+ } finally {
+ setSaving(false);
+ }
+ }
+
+ return (
+
+
+
메인페이지 설정
+
+
+
+
+ {/* 배너 표시 */}
+
+
+
+
+ {/* 제휴 샾 목록 표시 */}
+
+
+
+
+ {/* 보일 게시판 선택 */}
+
+
+
+
+
+
+ {draft.visibleBoardIds.length === 0 ? (
+
선택된 게시판이 없습니다.
+ ) : (
+ draft.visibleBoardIds.map((boardId: string) => {
+ const board = boards.find((b: any) => b.id === boardId);
+ if (!board) return null;
+ const category = categories.find((c: any) => c.id === board.categoryId);
+ return (
+
+
+ {board.name}
+ {category && (
+ ({category.name})
+ )}
+
+
+
+ );
+ })
+ )}
+
+
+
+
+ {/* 게시판 선택 모달 */}
+
setShowBoardModal(false)}>
+
+
+
게시판 선택
+
+ {boards
+ .filter((b: any) => !draft.visibleBoardIds.includes(b.id))
+ .map((b: any) => {
+ const category = categories.find((c: any) => c.id === b.categoryId);
+ return (
+
+ );
+ })}
+ {boards.filter((b: any) => !draft.visibleBoardIds.includes(b.id)).length === 0 && (
+
추가할 수 있는 게시판이 없습니다.
+ )}
+
+
+
+
+
+
+