@leviosa-ai/detail-page-editor 0.11.1 → 0.11.3

package/components/detail-page/detail-page-page-toolbar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useSyncExternalStore } from "react";
+import { useRef, useState, useSyncExternalStore } from "react";
 import { observer } from "./canvas-observer";
 import { useTranslation } from "react-i18next";
 import { Wand2 } from "lucide-react";
@@ -17,9 +17,19 @@ import {
  * 예전에는 세로 띠에 AI·위·아래·복제·추가·삭제가 줄줄이 붙어 있었다. 화면을 가리는
  * 데 비해 쓰는 것은 하나뿐이었고, 나머지 넷은 페이지를 다루는 일이라 페이지 목록과
  * 오른쪽 페이지 패널로 옮겼다.
+ *
+ * 붙박이가 아니라 끌어서 옮길 수 있다. 옮긴 자리는 편집기가 열려 있는 동안 유지된다
+ * (화면을 바꿀 때마다 다시 붙는 위치로 튀면 옮긴 의미가 없다).
  */
 
 type PageLike = { id: string };
+type Offset = { x: number; y: number };
+
+/** 이 편집기 세션 동안 기억한다 — 화면을 바꿔도 버튼이 제자리에 있게. */
+let keptOffset: Offset = { x: 0, y: 0 };
+
+/** 이만큼도 못 움직였으면 끈 것이 아니라 누른 것이다. */
+const DRAG_SLOP = 4;
 
 export const DetailPagePageToolbar = observer(function DetailPagePageToolbar({
   store,
@@ -36,6 +46,30 @@ export const DetailPagePageToolbar = observer(function DetailPagePageToolbar({
     () => false,
   );
   const p = page as PageLike;
+  const [offset, setOffset] = useState<Offset>(keptOffset);
+  const drag = useRef<{ x: number; y: number; from: Offset } | null>(null);
+  const dragged = useRef(false);
+
+  const move = (event: React.PointerEvent<HTMLButtonElement>) => {
+    const start = drag.current;
+    if (!start) return;
+    const dx = event.clientX - start.x;
+    const dy = event.clientY - start.y;
+    if (Math.abs(dx) > DRAG_SLOP || Math.abs(dy) > DRAG_SLOP)
+      dragged.current = true;
+    if (!dragged.current) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    // 화면 밖으로 던져 놓으면 다시 잡을 수가 없다 — 창 안으로 묶는다.
+    const next = { x: start.from.x + dx, y: start.from.y + dy };
+    const left = rect.left - offset.x + next.x;
+    const top = rect.top - offset.y + next.y;
+    const maxX = window.innerWidth - rect.width - 8;
+    const maxY = window.innerHeight - rect.height - 8;
+    next.x += Math.min(0, maxX - left) + Math.max(0, 8 - left);
+    next.y += Math.min(0, maxY - top) + Math.max(0, 8 - top);
+    keptOffset = next;
+    setOffset(next);
+  };
 
   // 다시 만들기를 못 꽂은 화면에서는 띠 자체가 없다 — 버튼이 하나뿐이라 그것이
   // 빠지면 빈 껍데기만 남는다.
@@ -50,11 +84,25 @@ export const DetailPagePageToolbar = observer(function DetailPagePageToolbar({
       aria-label={t("detailPage.pageToolbar.reauthor", {
         defaultValue: "이 화면 다시 만들기",
       })}
+      onPointerDown={(e) => {
+        if (e.button !== 0) return;
+        dragged.current = false;
+        drag.current = { x: e.clientX, y: e.clientY, from: offset };
+        e.currentTarget.setPointerCapture?.(e.pointerId);
+      }}
+      onPointerMove={move}
+      onPointerUp={(e) => {
+        drag.current = null;
+        e.currentTarget.releasePointerCapture?.(e.pointerId);
+      }}
       onClick={(e) => {
         e.stopPropagation();
+        // 끌어다 놓은 것이 다시 만들기로 이어지면 크레딧이 그냥 나간다.
+        if (dragged.current) return;
         requestSectionReauthor(p.id);
       }}
-      className="flex h-10 w-10 items-center justify-center rounded-full border border-dpe-ink-200 bg-dpe-surface/95 shadow-md backdrop-blur-sm transition-colors hover:bg-dpe-ink-100"
+      style={{ transform: `translate(${offset.x}px, ${offset.y}px)` }}
+      className="flex h-10 w-10 cursor-grab touch-none items-center justify-center rounded-full border border-dpe-ink-200 bg-dpe-surface/95 shadow-md backdrop-blur-sm transition-colors hover:bg-dpe-ink-100 active:cursor-grabbing"
     >
       <Wand2 size={17} className="text-dpe-ai-alt" />
     </button>

package/components/detail-page/section-height-handle.tsx

@@ -26,6 +26,7 @@ import {
 import { useTranslation } from "react-i18next";
 
 import { observer } from "./canvas-observer";
+import { detailPageEditorProfile } from "../../lib/detail-page/editor-profile";
 import {
   applySectionHeight,
   type SectionHeightPage,
@@ -56,7 +57,9 @@ export const SectionHeightHandle = observer(function SectionHeightHandle({
   history?: HistoryLike;
 }) {
   const { t } = useTranslation("branding");
-  const drag = useRef<{ pointerId: number; y: number; base: number } | null>(null);
+  const drag = useRef<{ pointerId: number; y: number; base: number } | null>(
+    null,
+  );
   const [dragging, setDragging] = useState(false);
   const height = Math.round(Number(page.computedHeight) || 0);
 
@@ -115,15 +118,33 @@ export const SectionHeightHandle = observer(function SectionHeightHandle({
         pointerEvents: "auto",
       }}
     >
+      {/* 흰 알약 + 테두리. 예전에는 반투명 회색 막대 하나였는데, 사진이나 어두운
+          배경으로 끝나는 장 밑에서는 배경에 묻혀 «없어진» 것처럼 보였다. */}
       <div
         style={{
-          width: dragging ? 64 : 44,
-          height: 5,
+          width: dragging ? 64 : 48,
+          height: 10,
           borderRadius: 999,
-          background: dragging ? "rgb(139, 92, 246)" : "rgba(23,23,23,0.28)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: dragging ? "rgb(139, 92, 246)" : "rgba(255,255,255,0.96)",
+          border: dragging ? "none" : "1px solid rgba(23,23,23,0.18)",
+          boxShadow: "0 1px 3px rgba(0,0,0,0.18)",
           transition: "width 120ms ease, background 120ms ease",
         }}
-      />
+      >
+        <div
+          style={{
+            width: 22,
+            height: 2,
+            borderRadius: 999,
+            background: dragging
+              ? "rgba(255,255,255,0.9)"
+              : "rgba(23,23,23,0.45)",
+          }}
+        />
+      </div>
       {dragging ? (
         <span
           style={{
@@ -196,7 +217,9 @@ export const CanvasSectionHeightHandle = observer(
     const measure = () => {
       const host = containerRef.current;
       const node = pageId
-        ? host?.querySelector<HTMLElement>(`[data-lc-page="${CSS.escape(pageId)}"]`)
+        ? host?.querySelector<HTMLElement>(
+            `[data-lc-page="${CSS.escape(pageId)}"]`,
+          )
         : null;
       const next: Box | null =
         host && node
@@ -249,6 +272,8 @@ export const CanvasSectionHeightHandle = observer(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [pageId, scrollRef]);
 
+    // 캐러셀 판은 1080×1350 고정이다 — 끌 수 있는 손잡이를 두면 안 된다.
+    if (detailPageEditorProfile().page.fixed) return null;
     if (!page || !box) return null;
 
     return (
@@ -264,11 +289,7 @@ export const CanvasSectionHeightHandle = observer(
           zIndex: 21,
         }}
       >
-        <SectionHeightHandle
-          page={page}
-          scale={scale}
-          history={s.history}
-        />
+        <SectionHeightHandle page={page} scale={scale} history={s.history} />
       </div>
     );
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leviosa-ai/detail-page-editor",
-  "version": "0.11.1",
+  "version": "0.11.3",
   "description": "Leviosa detail-page editor shell. Source-only: consumers compile it through Next transpilePackages. Every app coupling (sourcing server, brand store, cache keys, toast) arrives through the DetailPageHost interface, and every URL it fetches comes from configureDetailPageEditor.",
   "type": "module",
   "license": "UNLICENSED",