@wipco/sdui 0.25.0 → 0.26.0

package/dist/chunk-DIVN4TBW.js

@@ -0,0 +1,904 @@
+import { useSduiDispatch, useSduiCan, SduiDialog } from './chunk-QU7YVMFA.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DVOPZFQS.js';
+import { Card, Input, Button, Icon, Badge, IconButton } from './chunk-WIDDHR7L.js';
+import { boxed } from './chunk-SAN4IX6N.js';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var PAGE_LIMIT = 500;
+var MAX_PAGES = 10;
+function toJobPosition(row) {
+  if (typeof row !== "object" || row === null) return [];
+  const record = row;
+  const { id, name } = record;
+  if (typeof id !== "string" || typeof name !== "string") return [];
+  const num = (a, b) => typeof a === "number" ? a : typeof b === "number" ? b : 0;
+  const active = record.is_active ?? record.isActive;
+  return [
+    {
+      id,
+      name,
+      rankOrder: num(record.rank_order, record.rankOrder),
+      sortOrder: num(record.sort_order, record.sortOrder),
+      isActive: typeof active === "boolean" ? active : true
+    }
+  ];
+}
+async function fetchAllPositions(api, endpoint) {
+  const all = [];
+  for (let page = 0; page < MAX_PAGES; page += 1) {
+    const body = await api(`${endpoint}?limit=${PAGE_LIMIT}&offset=${page * PAGE_LIMIT}`, {
+      method: "GET"
+    });
+    const rows = Array.isArray(body?.data) ? body.data : [];
+    all.push(...rows.flatMap(toJobPosition));
+    const total = typeof body?.total === "number" ? body.total : null;
+    if (rows.length === 0 || total === null || all.length >= total) break;
+  }
+  return all;
+}
+function groupByRank(positions) {
+  const map = /* @__PURE__ */ new Map();
+  for (const position of positions) {
+    const group = map.get(position.rankOrder);
+    if (group) group.push(position);
+    else map.set(position.rankOrder, [position]);
+  }
+  return [...map.entries()].sort(([left], [right]) => left - right).map(
+    ([, group]) => [...group].sort(
+      (left, right) => left.sortOrder - right.sortOrder || left.name.localeCompare(right.name, "ko")
+    )
+  );
+}
+function rankSignature(ranks) {
+  return JSON.stringify(ranks.map((rank) => rank.map((p) => p.id)));
+}
+var chipStyle = (inactive, dragEnabled, dragging) => ({
+  position: "relative",
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "var(--wp-space-1)",
+  borderRadius: "var(--wp-radius-pill)",
+  border: inactive ? "var(--wp-border-w) dashed var(--wp-border-default)" : "var(--wp-border-w) solid var(--wp-border-default)",
+  background: "var(--wp-surface-card)",
+  padding: "2px 6px 2px 12px",
+  color: inactive ? "var(--wp-text-muted)" : "var(--wp-text-default)",
+  cursor: dragEnabled ? "grab" : void 0,
+  opacity: dragging ? 0.5 : 1
+});
+var menuItemStyle = (disabled, danger = false) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--wp-space-2)",
+  width: "100%",
+  padding: "var(--wp-space-1) var(--wp-space-2)",
+  border: "none",
+  borderRadius: "var(--wp-radius-sm)",
+  background: "transparent",
+  textAlign: "left",
+  cursor: disabled ? "not-allowed" : "pointer",
+  color: disabled ? "var(--wp-text-disabled)" : danger ? "var(--wp-text-danger)" : "var(--wp-text-default)"
+});
+function MenuItem({
+  icon,
+  label,
+  disabled,
+  danger,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "wp-body-sm",
+      style: menuItemStyle(!!disabled, !!danger),
+      disabled,
+      onClick: onSelect,
+      onMouseEnter: (e) => {
+        if (!disabled) e.currentTarget.style.background = "var(--wp-surface-hover)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "transparent";
+      },
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: icon, size: 14 }),
+        label
+      ]
+    }
+  );
+}
+function RankBoardImpl({
+  endpoint = "/job-positions",
+  entity = "job_position",
+  canCreate: canCreateProp,
+  canUpdate: canUpdateProp,
+  canDelete: canDeleteProp
+}) {
+  const dispatch = useSduiDispatch();
+  const can = useSduiCan();
+  const adapter = useSduiAdapter();
+  const api = hostFetchOf(adapter) ?? defaultAdapter.fetch;
+  const canCreate = canCreateProp ?? can({ entity, action: "create" });
+  const canUpdate = canUpdateProp ?? can({ entity, action: "update" });
+  const canDelete = canDeleteProp ?? can({ entity, action: "delete" });
+  const [positions, setPositions] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [ranks, setRanks] = useState([]);
+  const [saving, setSaving] = useState(false);
+  const [drag, setDrag] = useState(null);
+  const [dragOver, setDragOver] = useState(null);
+  const [newName, setNewName] = useState("");
+  const [renameTarget, setRenameTarget] = useState(null);
+  const [renameValue, setRenameValue] = useState("");
+  const [addTarget, setAddTarget] = useState(null);
+  const [addName, setAddName] = useState("");
+  const [menuFor, setMenuFor] = useState(null);
+  useEffect(() => {
+    setRanks(groupByRank(positions));
+  }, [positions]);
+  const reload = useCallback(async () => {
+    try {
+      const next = await fetchAllPositions(api, endpoint);
+      setPositions(next);
+      setError(null);
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : "\uC9C1\uC704 \uBAA9\uB85D\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4.");
+    }
+  }, [endpoint]);
+  useEffect(() => {
+    let cancelled = false;
+    setIsLoading(true);
+    setError(null);
+    fetchAllPositions(api, endpoint).then((next) => {
+      if (cancelled) return;
+      setPositions(next);
+      setError(null);
+    }).catch((caught) => {
+      if (cancelled) return;
+      setError(
+        caught instanceof Error ? caught.message : "\uC9C1\uC704 \uBAA9\uB85D\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4."
+      );
+    }).finally(() => {
+      if (!cancelled) setIsLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [endpoint]);
+  useEffect(() => {
+    if (menuFor === null) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (!target?.closest?.("[data-rb-menu]")) setMenuFor(null);
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setMenuFor(null);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [menuFor]);
+  const allPositions = useMemo(() => ranks.flat(), [ranks]);
+  const toast = useCallback(
+    (tone, message, title) => {
+      dispatch({ action: "toast", tone, title, message });
+    },
+    [dispatch]
+  );
+  const runMutation = useCallback(
+    async (mutate, failTitle) => {
+      setSaving(true);
+      let ok = true;
+      try {
+        await mutate();
+      } catch (caught) {
+        ok = false;
+        toast(
+          "danger",
+          caught instanceof Error ? caught.message : "\uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4.",
+          failTitle
+        );
+      }
+      dispatch({ action: "invalidate", prefix: endpoint });
+      await reload();
+      setSaving(false);
+      return ok;
+    },
+    [dispatch, endpoint, reload, toast]
+  );
+  const persistOrder = useCallback(
+    (next) => {
+      if (saving) return;
+      const cleaned = next.filter((rank) => rank.length > 0);
+      if (rankSignature(cleaned) === rankSignature(ranks)) return;
+      setRanks(cleaned);
+      void runMutation(
+        () => api(`${endpoint}/order`, {
+          method: "PUT",
+          body: { ranks: cleaned.map((rank) => rank.map((p) => p.id)) }
+        }).then(() => void 0),
+        "\uC21C\uC11C \uC800\uC7A5 \uC2E4\uD328"
+      );
+    },
+    [endpoint, ranks, runMutation, saving]
+  );
+  const moveRank = (index, delta) => {
+    const target = index + delta;
+    if (target < 0 || target >= ranks.length) return;
+    const copy = ranks.map((rank) => [...rank]);
+    [copy[index], copy[target]] = [copy[target], copy[index]];
+    persistOrder(copy);
+  };
+  const moveRankToBoundary = (from, boundary) => {
+    if (from < 0 || from >= ranks.length) return;
+    const copy = ranks.map((rank) => [...rank]);
+    const [row] = copy.splice(from, 1);
+    const target = boundary > from ? boundary - 1 : boundary;
+    copy.splice(target, 0, row);
+    persistOrder(copy);
+  };
+  const moveChipToRank = (id, targetIndex) => {
+    const chip = allPositions.find((position) => position.id === id);
+    const target = ranks[targetIndex];
+    if (!chip || !target) return;
+    if (target.some((position) => position.id === id)) return;
+    const copy = ranks.map((rank) => rank.filter((position) => position.id !== id));
+    copy[targetIndex] = [...copy[targetIndex], chip];
+    persistOrder(copy);
+  };
+  const moveChipToNewRank = (id, boundary) => {
+    const chip = allPositions.find((position) => position.id === id);
+    if (!chip) return;
+    const copy = ranks.map((rank) => rank.filter((position) => position.id !== id));
+    copy.splice(boundary, 0, [chip]);
+    persistOrder(copy);
+  };
+  const endDrag = useCallback(() => {
+    setDrag(null);
+    setDragOver(null);
+  }, []);
+  const updateDragOver = useCallback((next) => {
+    setDragOver(
+      (prev) => prev && prev.kind === next.kind && prev.index === next.index ? prev : next
+    );
+  }, []);
+  const handleRowDrop = (event, index) => {
+    event.preventDefault();
+    setDragOver(null);
+    if (!drag) return;
+    setDrag(null);
+    if (saving) return;
+    if (drag.kind === "chip") {
+      moveChipToRank(drag.id, index);
+      return;
+    }
+    if (drag.index === index || drag.index >= ranks.length) return;
+    const copy = ranks.map((rank) => [...rank]);
+    const [row] = copy.splice(drag.index, 1);
+    copy.splice(index, 0, row);
+    persistOrder(copy);
+  };
+  const handleGapDrop = (event, boundary) => {
+    event.preventDefault();
+    setDragOver(null);
+    if (!drag) return;
+    setDrag(null);
+    if (saving) return;
+    if (drag.kind === "chip") moveChipToNewRank(drag.id, boundary);
+    else moveRankToBoundary(drag.index, boundary);
+  };
+  const duplicateName = (name, exceptId) => allPositions.some((position) => position.id !== exceptId && position.name === name);
+  const createPosition = (input) => api(endpoint, { method: "POST", body: input }).then(() => void 0);
+  const handleCreate = async () => {
+    const name = newName.trim();
+    if (!name) {
+      toast("danger", "\uC9C1\uC704 \uC774\uB984\uC744 \uC785\uB825\uD558\uC138\uC694.", "\uC785\uB825 \uC624\uB958");
+      return;
+    }
+    if (duplicateName(name)) {
+      toast("danger", "\uC774\uBBF8 \uB4F1\uB85D\uB41C \uC9C1\uC704\uC785\uB2C8\uB2E4.", "\uC785\uB825 \uC624\uB958");
+      return;
+    }
+    const nextRank = allPositions.length > 0 ? Math.max(...allPositions.map((p) => p.rankOrder)) + 1 : 1;
+    const ok = await runMutation(
+      () => createPosition({ name, rankOrder: nextRank, sortOrder: 1 }),
+      "\uC9C1\uC704 \uB4F1\uB85D \uC2E4\uD328"
+    );
+    if (ok) {
+      setNewName("");
+      toast("success", `'${name}' \uC9C1\uC704\uB97C \uB9E8 \uC544\uB798 \uC0C8 \uAE09\uC73C\uB85C \uB4F1\uB85D\uD588\uC2B5\uB2C8\uB2E4.`);
+    }
+  };
+  const handleAddToRank = async () => {
+    if (addTarget === null) return;
+    const rank = ranks[addTarget];
+    if (!rank || rank.length === 0) return;
+    const name = addName.trim();
+    if (!name) {
+      toast("danger", "\uC9C1\uC704 \uC774\uB984\uC744 \uC785\uB825\uD558\uC138\uC694.", "\uC785\uB825 \uC624\uB958");
+      return;
+    }
+    if (duplicateName(name)) {
+      toast("danger", "\uC774\uBBF8 \uB4F1\uB85D\uB41C \uC9C1\uC704\uC785\uB2C8\uB2E4.", "\uC785\uB825 \uC624\uB958");
+      return;
+    }
+    const ok = await runMutation(
+      () => createPosition({
+        name,
+        rankOrder: rank[0].rankOrder,
+        sortOrder: Math.max(...rank.map((p) => p.sortOrder)) + 1
+      }),
+      "\uC9C1\uC704 \uB4F1\uB85D \uC2E4\uD328"
+    );
+    if (ok) {
+      setAddTarget(null);
+      setAddName("");
+      toast("success", `'${name}' \uC9C1\uC704\uB97C \uAC19\uC740 \uAE09\uC5D0 \uCD94\uAC00\uD588\uC2B5\uB2C8\uB2E4.`);
+    }
+  };
+  const handleRename = async () => {
+    if (!renameTarget) return;
+    const name = renameValue.trim();
+    if (!name) {
+      toast("danger", "\uC9C1\uC704 \uC774\uB984\uC744 \uC785\uB825\uD558\uC138\uC694.", "\uC785\uB825 \uC624\uB958");
+      return;
+    }
+    if (name === renameTarget.name) {
+      setRenameTarget(null);
+      return;
+    }
+    if (duplicateName(name, renameTarget.id)) {
+      toast("danger", "\uC774\uBBF8 \uB4F1\uB85D\uB41C \uC9C1\uC704\uC785\uB2C8\uB2E4.", "\uC785\uB825 \uC624\uB958");
+      return;
+    }
+    const ok = await runMutation(
+      () => api(`${endpoint}/${encodeURIComponent(renameTarget.id)}`, {
+        method: "PATCH",
+        body: { name }
+      }).then(() => void 0),
+      "\uC774\uB984 \uBCC0\uACBD \uC2E4\uD328"
+    );
+    if (ok) {
+      setRenameTarget(null);
+      toast("success", `\uC9C1\uC704 \uC774\uB984\uC744 '${name}'(\uC73C)\uB85C \uBCC0\uACBD\uD588\uC2B5\uB2C8\uB2E4.`);
+    }
+  };
+  const toggleActive = (position) => {
+    void runMutation(
+      () => api(`${endpoint}/${encodeURIComponent(position.id)}`, {
+        method: "PATCH",
+        body: { isActive: !position.isActive }
+      }).then(() => void 0),
+      "\uC0AC\uC6A9 \uC5EC\uBD80 \uBCC0\uACBD \uC2E4\uD328"
+    );
+  };
+  const handleDelete = (position) => {
+    if (!window.confirm(
+      `'${position.name}' \uC9C1\uC704\uB97C \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C? \uC0AD\uC81C\uB41C \uC9C1\uC704\uB294 \uC124\uC815 > \uD734\uC9C0\uD1B5\uC5D0\uC11C \uBCF5\uAD6C\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`
+    ))
+      return;
+    void runMutation(
+      () => api(`${endpoint}/${encodeURIComponent(position.id)}`, {
+        method: "DELETE"
+      }).then(() => void 0),
+      "\uC9C1\uC704 \uC0AD\uC81C \uC2E4\uD328"
+    );
+  };
+  const dragEnabled = canUpdate && !saving;
+  const gap = (boundary) => {
+    const hot = drag && dragOver?.kind === "gap" && dragOver.index === boundary;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          height: hot ? 40 : drag ? 20 : 8,
+          borderRadius: "var(--wp-radius-md)",
+          border: hot ? "var(--wp-border-w) dashed var(--wp-border-brand)" : "var(--wp-border-w) dashed transparent",
+          background: hot ? "var(--wp-accent-soft)" : "transparent",
+          transition: "height .12s ease, background .12s ease"
+        },
+        onDragOver: (event) => {
+          event.preventDefault();
+          event.dataTransfer.dropEffect = "move";
+          updateDragOver({ kind: "gap", index: boundary });
+        },
+        onDragLeave: (event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) setDragOver(null);
+        },
+        onDrop: (event) => handleGapDrop(event, boundary)
+      },
+      `gap-${boundary}`
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-4)" }, children: [
+    canCreate ? /* @__PURE__ */ jsx(Card, { padding: "tight", children: /* @__PURE__ */ jsxs(
+      "form",
+      {
+        style: {
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          gap: "var(--wp-space-2)"
+        },
+        onSubmit: (event) => {
+          event.preventDefault();
+          void handleCreate();
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              style: { width: 256 },
+              value: newName,
+              disabled: saving,
+              placeholder: "\uC0C8 \uC9C1\uC704 \uC774\uB984 (\uC608: \uC120\uC784\uC5F0\uAD6C\uC6D0)",
+              "aria-label": "\uC0C8 \uC9C1\uC704 \uC774\uB984",
+              onChange: (event) => setNewName(event.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", icon: "plus", disabled: saving || !newName.trim(), children: "\uB4F1\uB85D" }),
+          /* @__PURE__ */ jsx("span", { className: "wp-caption", style: { color: "var(--wp-text-muted)" }, children: "\uB9E8 \uC544\uB798 \uC0C8 \uAE09\uC73C\uB85C \uB4F1\uB85D\uB429\uB2C8\uB2E4. \uAE30\uC874 \uAE09\uC5D0 \uB123\uC73C\uB824\uBA74 \uAC01 \uC904\uC758 '\uC774 \uAE09\uC5D0 \uCD94\uAC00'\uB97C \uC4F0\uAC70\uB098 \uCE69\uC744 \uB4DC\uB798\uADF8\uD558\uC138\uC694." })
+        ]
+      }
+    ) }) : null,
+    error ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "wp-body-sm",
+        style: {
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          gap: "var(--wp-space-3)",
+          border: "var(--wp-border-w) solid var(--wp-status-danger-border)",
+          background: "var(--wp-status-danger-bg)",
+          color: "var(--wp-status-danger-fg)",
+          borderRadius: "var(--wp-radius-md)",
+          padding: "var(--wp-space-3)"
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { children: error }),
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: () => void reload(), children: "\uB2E4\uC2DC \uC2DC\uB3C4" })
+        ]
+      }
+    ) : null,
+    isLoading && ranks.length === 0 ? /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "wp-body-sm",
+        style: {
+          padding: "var(--wp-space-8) 0",
+          textAlign: "center",
+          color: "var(--wp-text-muted)",
+          margin: 0
+        },
+        children: "\uC9C1\uC704 \uBAA9\uB85D\uC744 \uBD88\uB7EC\uC624\uB294 \uC911..."
+      }
+    ) : ranks.length === 0 ? !error && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "wp-body-sm",
+        style: {
+          border: "2px dashed var(--wp-border-default)",
+          borderRadius: "var(--wp-radius-lg)",
+          padding: "var(--wp-space-10) 0",
+          textAlign: "center",
+          color: "var(--wp-text-muted)"
+        },
+        children: "\uB4F1\uB85D\uB41C \uC9C1\uC704\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4. \uC704\uC5D0\uC11C \uCCAB \uC9C1\uC704\uB97C \uB4F1\uB85D\uD558\uC138\uC694."
+      }
+    ) : /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: 0 }, children: [
+      ranks.map((rank, rowIndex) => {
+        const rowDragging = drag?.kind === "rank" && drag.index === rowIndex;
+        const rowHot = drag && !rowDragging && dragOver?.kind === "row" && dragOver.index === rowIndex;
+        return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          gap(rowIndex),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "var(--wp-space-3)",
+                border: rowHot ? "var(--wp-border-w) solid var(--wp-border-brand)" : "var(--wp-border-w) solid var(--wp-border-default)",
+                background: rowHot ? "var(--wp-accent-soft)" : "var(--wp-surface-card)",
+                borderRadius: "var(--wp-radius-lg)",
+                padding: "var(--wp-space-3)",
+                opacity: rowDragging ? 0.5 : 1,
+                transition: "background .12s ease, border-color .12s ease"
+              },
+              onDragOver: (event) => {
+                event.preventDefault();
+                event.dataTransfer.dropEffect = "move";
+                updateDragOver({ kind: "row", index: rowIndex });
+              },
+              onDragLeave: (event) => {
+                if (!event.currentTarget.contains(event.relatedTarget))
+                  setDragOver(null);
+              },
+              onDrop: (event) => handleRowDrop(event, rowIndex),
+              children: [
+                canUpdate ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      flex: "none",
+                      cursor: "grab",
+                      color: "var(--wp-text-muted)",
+                      pointerEvents: saving ? "none" : void 0,
+                      opacity: saving ? 0.5 : 1,
+                      display: "inline-flex"
+                    },
+                    draggable: dragEnabled,
+                    onDragStart: (event) => {
+                      event.dataTransfer.effectAllowed = "move";
+                      event.dataTransfer.setData("text/plain", `rank-${rowIndex}`);
+                      setDrag({ kind: "rank", index: rowIndex });
+                    },
+                    onDragEnd: endDrag,
+                    title: "\uB4DC\uB798\uADF8\uD574\uC11C \uAE09 \uC21C\uC11C \uBCC0\uACBD",
+                    children: /* @__PURE__ */ jsx(Icon, { name: "move", size: 16 })
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "wp-label",
+                    style: {
+                      flex: "none",
+                      width: 32,
+                      height: 32,
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      borderRadius: "var(--wp-radius-pill)",
+                      background: "var(--wp-accent-soft)",
+                      color: "var(--wp-text-brand)"
+                    },
+                    children: rowIndex + 1
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      flex: 1,
+                      flexWrap: "wrap",
+                      alignItems: "center",
+                      gap: "var(--wp-space-2)"
+                    },
+                    children: [
+                      rank.map((position) => /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          className: "wp-body-sm",
+                          draggable: dragEnabled,
+                          onDragStart: (event) => {
+                            event.dataTransfer.effectAllowed = "move";
+                            event.dataTransfer.setData("text/plain", position.id);
+                            setDrag({ kind: "chip", id: position.id });
+                          },
+                          onDragEnd: endDrag,
+                          style: chipStyle(
+                            !position.isActive,
+                            dragEnabled,
+                            drag?.kind === "chip" && drag.id === position.id
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: position.name }),
+                            !position.isActive ? /* @__PURE__ */ jsx(Badge, { tone: "neutral", children: "\uBBF8\uC0AC\uC6A9" }) : null,
+                            canUpdate || canDelete ? /* @__PURE__ */ jsxs("span", { "data-rb-menu": true, style: { position: "relative", display: "inline-flex" }, children: [
+                              /* @__PURE__ */ jsx(
+                                IconButton,
+                                {
+                                  icon: "ellipsis-vertical",
+                                  size: "xs",
+                                  label: `${position.name} \uC9C1\uC704 \uBA54\uB274`,
+                                  disabled: saving,
+                                  onClick: () => setMenuFor((cur) => cur === position.id ? null : position.id)
+                                }
+                              ),
+                              menuFor === position.id ? /* @__PURE__ */ jsxs(
+                                "div",
+                                {
+                                  className: "wp-col",
+                                  style: {
+                                    position: "absolute",
+                                    top: "calc(100% + 4px)",
+                                    left: 0,
+                                    zIndex: "var(--wp-z-dropdown)",
+                                    minWidth: 172,
+                                    gap: 2,
+                                    padding: "var(--wp-space-1)",
+                                    border: "var(--wp-border-w) solid var(--wp-border-default)",
+                                    borderRadius: "var(--wp-radius-md)",
+                                    background: "var(--wp-surface-card)",
+                                    boxShadow: "var(--wp-shadow-md)"
+                                  },
+                                  children: [
+                                    canUpdate ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                                      /* @__PURE__ */ jsx(
+                                        MenuItem,
+                                        {
+                                          icon: "chevron-up",
+                                          label: "\uC704 \uAE09\uC73C\uB85C \uC774\uB3D9",
+                                          disabled: rowIndex === 0,
+                                          onSelect: () => {
+                                            setMenuFor(null);
+                                            moveChipToRank(position.id, rowIndex - 1);
+                                          }
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsx(
+                                        MenuItem,
+                                        {
+                                          icon: "chevron-down",
+                                          label: "\uC544\uB798 \uAE09\uC73C\uB85C \uC774\uB3D9",
+                                          disabled: rowIndex === ranks.length - 1,
+                                          onSelect: () => {
+                                            setMenuFor(null);
+                                            moveChipToRank(position.id, rowIndex + 1);
+                                          }
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsx(
+                                        MenuItem,
+                                        {
+                                          icon: "split",
+                                          label: "\uC0C8 \uAE09\uC73C\uB85C \uBD84\uB9AC",
+                                          disabled: rank.length < 2,
+                                          onSelect: () => {
+                                            setMenuFor(null);
+                                            moveChipToNewRank(position.id, rowIndex + 1);
+                                          }
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsx(
+                                        "div",
+                                        {
+                                          style: {
+                                            height: 1,
+                                            background: "var(--wp-divider)",
+                                            margin: "2px 0"
+                                          }
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsx(
+                                        MenuItem,
+                                        {
+                                          icon: "pencil",
+                                          label: "\uC774\uB984 \uBCC0\uACBD",
+                                          onSelect: () => {
+                                            setMenuFor(null);
+                                            setRenameTarget(position);
+                                            setRenameValue(position.name);
+                                          }
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsx(
+                                        MenuItem,
+                                        {
+                                          icon: position.isActive ? "eye-off" : "eye",
+                                          label: position.isActive ? "\uBBF8\uC0AC\uC6A9\uC73C\uB85C \uC804\uD658" : "\uC0AC\uC6A9\uC73C\uB85C \uC804\uD658",
+                                          onSelect: () => {
+                                            setMenuFor(null);
+                                            toggleActive(position);
+                                          }
+                                        }
+                                      )
+                                    ] }) : null,
+                                    canDelete ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                                      canUpdate ? /* @__PURE__ */ jsx(
+                                        "div",
+                                        {
+                                          style: {
+                                            height: 1,
+                                            background: "var(--wp-divider)",
+                                            margin: "2px 0"
+                                          }
+                                        }
+                                      ) : null,
+                                      /* @__PURE__ */ jsx(
+                                        MenuItem,
+                                        {
+                                          icon: "trash-2",
+                                          label: "\uC0AD\uC81C",
+                                          danger: true,
+                                          onSelect: () => {
+                                            setMenuFor(null);
+                                            handleDelete(position);
+                                          }
+                                        }
+                                      )
+                                    ] }) : null
+                                  ]
+                                }
+                              ) : null
+                            ] }) : null
+                          ]
+                        },
+                        position.id
+                      )),
+                      canCreate ? /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          type: "button",
+                          variant: "ghost",
+                          size: "sm",
+                          icon: "plus",
+                          style: { color: "var(--wp-text-muted)" },
+                          disabled: saving,
+                          onClick: () => {
+                            setAddTarget(rowIndex);
+                            setAddName("");
+                          },
+                          children: "\uC774 \uAE09\uC5D0 \uCD94\uAC00"
+                        }
+                      ) : null
+                    ]
+                  }
+                ),
+                canUpdate ? /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      marginLeft: "auto",
+                      flex: "none",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 2
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          icon: "chevron-up",
+                          size: "sm",
+                          label: "\uAE09 \uC704\uB85C \uC774\uB3D9",
+                          disabled: saving || rowIndex === 0,
+                          onClick: () => moveRank(rowIndex, -1)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          icon: "chevron-down",
+                          size: "sm",
+                          label: "\uAE09 \uC544\uB798\uB85C \uC774\uB3D9",
+                          disabled: saving || rowIndex === ranks.length - 1,
+                          onClick: () => moveRank(rowIndex, 1)
+                        }
+                      )
+                    ]
+                  }
+                ) : null
+              ]
+            }
+          )
+        ] }, rank[0]?.id ?? `rank-${rowIndex}`);
+      }),
+      gap(ranks.length),
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "wp-caption",
+          style: { marginTop: "var(--wp-space-2)", color: "var(--wp-text-muted)" },
+          children: "\uC904\uC744 \uB4DC\uB798\uADF8\uD558\uAC70\uB098 \u25B2\u25BC\uB85C \uAE09 \uC11C\uC5F4\uC744 \uBC14\uAFB8\uACE0, \uC9C1\uC704 \uCE69\uC744 \uB2E4\uB978 \uC904\uC5D0 \uB4DC\uB798\uADF8\uD558\uBA74 \uADF8 \uAE09\uC73C\uB85C \uC774\uB3D9\uD569\uB2C8\uB2E4. \uC904 \uC0AC\uC774\uC5D0 \uCE69\uC744 \uB193\uC73C\uBA74 \uC0C8 \uAE09\uC73C\uB85C \uB07C\uC6CC\uB123\uC2B5\uB2C8\uB2E4."
+        }
+      )
+    ] }),
+    renameTarget ? /* @__PURE__ */ jsx(
+      SduiDialog,
+      {
+        title: "\uC9C1\uC704 \uC774\uB984 \uBCC0\uACBD",
+        subtitle: "\uC774\uB984 \uBCC0\uACBD\uC740 \uC9C1\uC704 \uB9C8\uC2A4\uD130\uC5D0\uB9CC \uC801\uC6A9\uB429\uB2C8\uB2E4. \uC0AC\uC6D0\uC5D0\uAC8C \uC774\uBBF8 \uC800\uC7A5\uB41C \uC9C1\uC704 \uBB38\uC790\uC5F4\uC740 \uBC14\uB00C\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.",
+        size: "sm",
+        onClose: () => {
+          if (!saving) setRenameTarget(null);
+        },
+        footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "secondary",
+              disabled: saving,
+              onClick: () => setRenameTarget(null),
+              children: "\uCDE8\uC18C"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "primary",
+              disabled: saving || !renameValue.trim(),
+              onClick: () => void handleRename(),
+              children: "\uC800\uC7A5"
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          "form",
+          {
+            onSubmit: (event) => {
+              event.preventDefault();
+              void handleRename();
+            },
+            children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: renameValue,
+                disabled: saving,
+                "aria-label": "\uC9C1\uC704 \uC774\uB984",
+                autoFocus: true,
+                onChange: (event) => setRenameValue(event.target.value)
+              }
+            )
+          }
+        )
+      }
+    ) : null,
+    addTarget !== null ? /* @__PURE__ */ jsx(
+      SduiDialog,
+      {
+        title: `\uC11C\uC5F4 ${addTarget + 1}\uAE09\uC5D0 \uC9C1\uC704 \uCD94\uAC00`,
+        subtitle: ranks[addTarget] ? `${ranks[addTarget].map((p) => p.name).join("\xB7")}\uC640(\uACFC) \uAC19\uC740 \uAE09\uC73C\uB85C \uB4F1\uB85D\uB429\uB2C8\uB2E4.` : "",
+        size: "sm",
+        onClose: () => {
+          if (!saving) setAddTarget(null);
+        },
+        footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "secondary",
+              disabled: saving,
+              onClick: () => setAddTarget(null),
+              children: "\uCDE8\uC18C"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "primary",
+              disabled: saving || !addName.trim(),
+              onClick: () => void handleAddToRank(),
+              children: "\uCD94\uAC00"
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          "form",
+          {
+            onSubmit: (event) => {
+              event.preventDefault();
+              void handleAddToRank();
+            },
+            children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: addName,
+                disabled: saving,
+                placeholder: "\uC9C1\uC704 \uC774\uB984",
+                "aria-label": "\uC9C1\uC704 \uC774\uB984",
+                autoFocus: true,
+                onChange: (event) => setAddName(event.target.value)
+              }
+            )
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+var RankBoard = boxed(RankBoardImpl, "RankBoard");
+
+export { RankBoard };