✨ Highlights admin page

Author: Zeta611

app/actions/remove-featured.ts

@@ -0,0 +1,30 @@
+"use server";
+
+import { MUTATIONS } from "@/lib/supabase/repository";
+import { createClient } from "@/lib/supabase/server";
+
+export type RemoveFeaturedState = { ok: boolean; error: string };
+
+export async function removeFeatured(
+  translationId: string,
+): Promise<RemoveFeaturedState> {
+  const supabase = await createClient();
+
+  // Verify admin role
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) {
+    return { ok: false, error: "로그인이 필요해요" };
+  }
+  if (user.app_metadata?.userrole !== "admin") {
+    return { ok: false, error: "관리자 권한이 필요해요" };
+  }
+
+  const { error } = await MUTATIONS.removeFeatured(supabase, translationId);
+  if (error) {
+    return { ok: false, error: "하이라이트를 삭제하는 중 문제가 생겼어요" };
+  }
+
+  return { ok: true, error: "" };
+}

app/admin/highlights/page.tsx

@@ -0,0 +1,42 @@
+import { redirect } from "next/navigation";
+import { createClient } from "@/lib/supabase/server";
+import { QUERIES } from "@/lib/supabase/repository";
+import HighlightsManager, {
+  type FeaturedTranslation,
+} from "@/components/admin/highlights-manager";
+
+export default async function AdminHighlightsPage() {
+  const supabase = await createClient();
+
+  // Verify admin role
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user || user.app_metadata?.userrole !== "admin") {
+    redirect("/");
+  }
+
+  const { data, error } = await QUERIES.listAllFeaturedTranslations(supabase);
+  if (error) throw error;
+
+  const featuredTranslations: FeaturedTranslation[] = (data ?? []).map(
+    (item) => ({
+      id: item.id,
+      name: item.name,
+      featured: item.featured!,
+      jargonName: (item.jargon as { name: string })?.name ?? "",
+      jargonSlug: (item.jargon as { slug: string })?.slug ?? "",
+    }),
+  );
+
+  return (
+    <div className="mx-auto max-w-3xl py-8">
+      <h1 className="mb-6 text-2xl font-bold">하이라이트 관리</h1>
+      <p className="text-muted-foreground mb-8">
+        홈 화면에 표시될 하이라이트 번역어의 순서를 변경하거나 삭제할 수
+        있습니다. 드래그하여 순서를 변경하세요.
+      </p>
+      <HighlightsManager initialData={featuredTranslations} />
+    </div>
+  );
+}

bun.lock

@@ -0,0 +1,266 @@
+"use client";
+
+import { useState, useTransition, useSyncExternalStore } from "react";
+import Link from "next/link";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { GripVertical, Trash2, ExternalLink } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { updateFeaturedOrder } from "@/app/actions/update-featured-order";
+import { removeFeatured } from "@/app/actions/remove-featured";
+
+// Hook to detect if we're on the client (prevents hydration mismatch from dnd-kit)
+const emptySubscribe = () => () => {};
+function useIsClient() {
+  return useSyncExternalStore(
+    emptySubscribe,
+    () => true,
+    () => false,
+  );
+}
+
+export type FeaturedTranslation = {
+  id: string;
+  name: string;
+  featured: number;
+  jargonName: string;
+  jargonSlug: string;
+};
+
+function SortableItem({
+  item,
+  onRemove,
+  isRemoving,
+}: {
+  item: FeaturedTranslation;
+  onRemove: (id: string) => void;
+  isRemoving: boolean;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: item.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <Card
+      ref={setNodeRef}
+      style={style}
+      className={`flex flex-row items-center gap-3 p-4 ${isDragging ? "opacity-50 shadow-lg" : ""}`}
+    >
+      <button
+        className="text-muted-foreground hover:text-foreground cursor-grab touch-none active:cursor-grabbing"
+        {...attributes}
+        {...listeners}
+      >
+        <GripVertical className="size-5" />
+      </button>
+      <span className="bg-muted text-muted-foreground shrink-0 rounded px-2 py-0.5 text-xs font-medium">
+        #{item.featured}
+      </span>
+      <div className="flex min-w-0 flex-1 items-center gap-2">
+        <span className="truncate font-medium">{item.name}</span>
+        <span className="text-muted-foreground">—</span>
+        <Link
+          href={`/jargon/${item.jargonSlug}`}
+          className="text-muted-foreground hover:text-foreground flex shrink-0 items-center gap-1 text-sm"
+        >
+          {item.jargonName}
+          <ExternalLink className="size-3" />
+        </Link>
+      </div>
+      <AlertDialog>
+        <AlertDialogTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-muted-foreground hover:text-destructive shrink-0"
+            disabled={isRemoving}
+          >
+            <Trash2 className="size-4" />
+          </Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>하이라이트 삭제</AlertDialogTitle>
+            <AlertDialogDescription>
+              &quot;{item.name}&quot;을(를) 하이라이트에서 삭제하시겠어요?
+              번역어 자체는 삭제되지 않습니다.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>취소</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => onRemove(item.id)}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              삭제
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Card>
+  );
+}
+
+export default function HighlightsManager({
+  initialData,
+}: {
+  initialData: FeaturedTranslation[];
+}) {
+  const [items, setItems] = useState(initialData);
+  const [isPending, startTransition] = useTransition();
+  const isClient = useIsClient();
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      const oldIndex = items.findIndex((item) => item.id === active.id);
+      const newIndex = items.findIndex((item) => item.id === over.id);
+      const newItems = arrayMove(items, oldIndex, newIndex);
+
+      // Update featured ranks
+      const updatedItems = newItems.map((item, index) => ({
+        ...item,
+        featured: index + 1,
+      }));
+
+      // Optimistic update
+      setItems(updatedItems);
+
+      // Persist to server
+      startTransition(async () => {
+        const result = await updateFeaturedOrder(
+          updatedItems.map((item) => item.id),
+        );
+        if (!result.ok) {
+          // Revert on error
+          setItems(items);
+        }
+      });
+    }
+  }
+
+  function handleRemove(id: string) {
+    startTransition(async () => {
+      const result = await removeFeatured(id);
+      if (result.ok) {
+        setItems((prev) => {
+          const filtered = prev.filter((item) => item.id !== id);
+          // Re-number the remaining items
+          return filtered.map((item, index) => ({
+            ...item,
+            featured: index + 1,
+          }));
+        });
+        // Update the server with new order
+        const remaining = items
+          .filter((item) => item.id !== id)
+          .map((item) => item.id);
+        if (remaining.length > 0) {
+          await updateFeaturedOrder(remaining);
+        }
+      }
+    });
+  }
+
+  if (items.length === 0) {
+    return (
+      <div className="text-muted-foreground rounded-lg border border-dashed p-8 text-center">
+        하이라이트로 지정된 번역어가 없습니다.
+      </div>
+    );
+  }
+
+  // Render static list on server, interactive list on client
+  if (!isClient) {
+    return (
+      <div className="flex flex-col gap-2">
+        {items.map((item) => (
+          <Card key={item.id} className="flex flex-row items-center gap-3 p-4">
+            <GripVertical className="text-muted-foreground size-5" />
+            <span className="bg-muted text-muted-foreground shrink-0 rounded px-2 py-0.5 text-xs font-medium">
+              #{item.featured}
+            </span>
+            <div className="flex min-w-0 flex-1 items-center gap-2">
+              <span className="truncate font-medium">{item.name}</span>
+              <span className="text-muted-foreground">—</span>
+              <span className="text-muted-foreground text-sm">
+                {item.jargonName}
+              </span>
+            </div>
+          </Card>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragEnd={handleDragEnd}
+    >
+      <SortableContext items={items} strategy={verticalListSortingStrategy}>
+        <div className="flex flex-col gap-2">
+          {items.map((item) => (
+            <SortableItem
+              key={item.id}
+              item={item}
+              onRemove={handleRemove}
+              isRemoving={isPending}
+            />
+          ))}
+        </div>
+      </SortableContext>
+      {isPending && (
+        <div className="text-muted-foreground mt-4 text-center text-sm">
+          저장 중...
+        </div>
+      )}
+    </DndContext>
+  );
+}

components/admin/highlights-manager.tsx

@@ -10,7 +10,6 @@ import {
   Minus,
   PencilIcon,
   Plus,
-  TrashIcon,
 } from "lucide-react";
 import Form from "next/form";
 import { useQueryClient } from "@tanstack/react-query";

components/comment/comment-item.tsx

@@ -2,6 +2,7 @@
 
 import { useMemo } from "react";
 import { useQuery } from "@tanstack/react-query";
+import { MessagesSquareIcon } from "lucide-react";
 import { getClient } from "@/lib/supabase/client";
 import { QUERIES } from "@/lib/supabase/repository";
 import { Comment, CommentTree } from "@/types/comment";
@@ -11,7 +12,6 @@ import { useUserQuery } from "@/hooks/use-user-query";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useLoginDialog } from "@/components/auth/login-dialog-provider";
-import { MessagesSquareIcon } from "lucide-react";
 
 function buildCommentTree(comments: Omit<Comment, "replies">[]): CommentTree[] {
   const commentMap = new Map<string, CommentTree>();