@leviosa-ai/detail-page-editor 0.1.0

package/components/detail-page/fill-control.tsx

@@ -0,0 +1,261 @@
+"use client";
+
+import { Plus, X } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { ColorInput } from "../cardnews/color-input";
+
+/**
+ * 단색/그라데이션 겸용 채우기 컨트롤.
+ *
+ * 스톡 편집기는 gradient를 별도 필드가 아니라 ``fill``(또는 page ``background``)에 CSS
+ * ``linear-gradient(...)`` 문자열로 담는다(``useColor``가 렌더 시 Konva의
+ * fillLinearGradient*로 자동 변환). 우리 기본 ``ColorInput``은 hex 전용이라 gradient를
+ * 검게 뭉갠다 → 여기서 단색/그라데이션을 토글하고, 그라데이션이면 색 stop들(2개 이상, 각
+ * stop은 색+위치%) + 각도로 문자열을 만들어 같은 ``onChange``로 넘긴다. 텍스트 fill, 도형
+ * fill, 페이지 배경 어디에나 재사용 가능.
+ *
+ * ⚠️스톡 편집기는 ``linear-gradient``만 지원한다(``utils/gradient.js`` isGradient가
+ * "linear-gradient"만 검사, radial은 이미지 URL로 오인돼 렌더가 깨진다). 그래서 radial은
+ * 노출하지 않는다. 대신 stop은 N개까지(colorStops 전부 매핑) 지원한다.
+ */
+
+export function isGradientValue(v: string): boolean {
+  return typeof v === "string" && v.indexOf("linear-gradient") >= 0;
+}
+
+export type GradientStop = { color: string; pos: number };
+export type ParsedStops = { angle: number; stops: GradientStop[] };
+export type ParsedGradient = { angle: number; from: string; to: string };
+
+const COLOR_RE = /#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)/;
+
+/** 최상위 콤마로만 자른다(rgb(...)/rgba(...) 안의 콤마는 보존). */
+function splitTopLevel(s: string): string[] {
+  const out: string[] = [];
+  let depth = 0;
+  let cur = "";
+  for (const ch of s) {
+    if (ch === "(") depth += 1;
+    else if (ch === ")") depth -= 1;
+    if (ch === "," && depth === 0) {
+      out.push(cur.trim());
+      cur = "";
+    } else {
+      cur += ch;
+    }
+  }
+  if (cur.trim()) out.push(cur.trim());
+  return out;
+}
+
+/**
+ * ``linear-gradient(90deg, #f00 0%, #00f 50%, #0f0 100%)`` → {angle, stops}. 각도가
+ * 없으면 180(CSS 기본). stop 위치가 없으면 균등 분배. stop이 2개 미만이면 보정한다.
+ */
+export function parseStops(v: string): ParsedStops | null {
+  if (!isGradientValue(v)) return null;
+  const open = v.indexOf("(");
+  const close = v.lastIndexOf(")");
+  if (open < 0 || close < 0) return null;
+  const segs = splitTopLevel(v.slice(open + 1, close));
+  if (segs.length === 0) return null;
+
+  let angle = 180;
+  let rest = segs;
+  // 첫 세그먼트에 색이 없으면 각도(또는 방향) 지정으로 본다.
+  if (!COLOR_RE.test(segs[0])) {
+    const m = segs[0].match(/(-?\d+(?:\.\d+)?)\s*deg/);
+    angle = m ? Number(m[1]) : 180;
+    rest = segs.slice(1);
+  }
+
+  const stops: GradientStop[] = [];
+  rest.forEach((seg, i) => {
+    const cm = seg.match(COLOR_RE);
+    if (!cm) return;
+    const color = cm[0];
+    const after = seg.slice((cm.index ?? 0) + color.length);
+    const pm = after.match(/(-?\d+(?:\.\d+)?)\s*%/);
+    const pos = pm
+      ? Number(pm[1])
+      : rest.length > 1
+        ? (i / (rest.length - 1)) * 100
+        : 0;
+    stops.push({ color, pos });
+  });
+
+  if (stops.length === 0) return null;
+  if (stops.length === 1) stops.push({ color: stops[0].color, pos: 100 });
+  return { angle, stops };
+}
+
+/** {angle, stops} → 스톡 편집기가 이해하는 ``linear-gradient`` 문자열. */
+export function buildStops(g: ParsedStops): string {
+  const parts = g.stops
+    .map((s) => `${s.color} ${Math.round(clampPos(s.pos))}%`)
+    .join(", ");
+  return `linear-gradient(${g.angle}deg, ${parts})`;
+}
+
+function clampPos(n: number): number {
+  if (Number.isNaN(n)) return 0;
+  return Math.max(0, Math.min(100, n));
+}
+
+// ── from/to 편의 래퍼(기존 호출부·테스트 호환) ────────────────────────────────
+
+/** 첫 stop과 끝 stop 색만 뽑는 2-stop 뷰. */
+export function parseGradient(v: string): ParsedGradient | null {
+  const g = parseStops(v);
+  if (!g) return null;
+  return { angle: g.angle, from: g.stops[0].color, to: g.stops[g.stops.length - 1].color };
+}
+
+/** 2-stop {angle, from, to} → 문자열(0%/100%). */
+export function buildGradient(g: ParsedGradient): string {
+  return `linear-gradient(${g.angle}deg, ${g.from} 0%, ${g.to} 100%)`;
+}
+
+export function FillControl({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  const { t } = useTranslation("branding");
+  const parsed = parseStops(value);
+  const isGradient = parsed != null;
+  // 단색일 때 표시/편집할 색. 그라데이션이면 첫 stop 색을 단색 후보로 쓴다.
+  const solid = isGradient ? parsed.stops[0].color : value || "#000000";
+  const g: ParsedStops = parsed ?? {
+    angle: 180,
+    stops: [
+      { color: solid, pos: 0 },
+      { color: "#ffffff", pos: 100 },
+    ],
+  };
+
+  const emit = (next: ParsedStops) => onChange(buildStops(next));
+  const setStop = (i: number, patch: Partial<GradientStop>) =>
+    emit({ ...g, stops: g.stops.map((s, idx) => (idx === i ? { ...s, ...patch } : s)) });
+  const addStop = () => {
+    // 마지막 두 stop 사이 중간에 새 stop을 끼운다.
+    const last = g.stops[g.stops.length - 1];
+    const prev = g.stops[g.stops.length - 2] ?? last;
+    const mid = Math.round((prev.pos + last.pos) / 2);
+    const stops = [
+      ...g.stops.slice(0, g.stops.length - 1),
+      { color: last.color, pos: mid },
+      last,
+    ];
+    emit({ ...g, stops });
+  };
+  const removeStop = (i: number) => {
+    if (g.stops.length <= 2) return;
+    emit({ ...g, stops: g.stops.filter((_, idx) => idx !== i) });
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* 단색 / 그라데이션 토글 */}
+      <div className="grid grid-cols-2 gap-1.5">
+        <button
+          type="button"
+          onClick={() => onChange(solid)}
+          className={
+            !isGradient
+              ? "h-8 rounded-md bg-neutral-900 text-xs font-semibold text-white"
+              : "h-8 rounded-md border border-neutral-200 text-xs font-medium text-neutral-600 hover:bg-neutral-50"
+          }
+        >
+          {t("detailPage.properties.fillSolid")}
+        </button>
+        <button
+          type="button"
+          onClick={() => emit(g)}
+          className={
+            isGradient
+              ? "h-8 rounded-md bg-neutral-900 text-xs font-semibold text-white"
+              : "h-8 rounded-md border border-neutral-200 text-xs font-medium text-neutral-600 hover:bg-neutral-50"
+          }
+        >
+          {t("detailPage.properties.fillGradient")}
+        </button>
+      </div>
+
+      {!isGradient ? (
+        <ColorInput value={solid} onChange={onChange} />
+      ) : (
+        <div className="flex flex-col gap-2">
+          {/* 미리보기 바 */}
+          <div
+            className="h-6 w-full rounded-md border border-neutral-200"
+            style={{ background: value }}
+            aria-hidden="true"
+          />
+
+          {/* stop 목록 */}
+          <div className="flex flex-col gap-1.5">
+            {g.stops.map((s, i) => (
+              <div key={i} className="flex items-center gap-2">
+                <ColorInput
+                  value={s.color}
+                  onChange={(c) => setStop(i, { color: c })}
+                />
+                <div className="flex min-w-0 flex-1 items-center gap-1">
+                  <input
+                    type="number"
+                    min={0}
+                    max={100}
+                    value={Math.round(clampPos(s.pos))}
+                    onChange={(e) => setStop(i, { pos: Number(e.target.value) })}
+                    aria-label={t("detailPage.properties.gradientStopPosition")}
+                    className="w-14 rounded-md border border-neutral-200 px-1.5 py-1 text-xs tabular-nums focus:border-neutral-400 focus:outline-none"
+                  />
+                  <span className="text-[11px] text-neutral-400">%</span>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => removeStop(i)}
+                  disabled={g.stops.length <= 2}
+                  aria-label={t("detailPage.properties.gradientRemoveStop")}
+                  className="rounded p-1 text-neutral-400 hover:text-neutral-700 disabled:cursor-not-allowed disabled:opacity-30"
+                >
+                  <X size={13} />
+                </button>
+              </div>
+            ))}
+            <button
+              type="button"
+              onClick={addStop}
+              className="flex items-center justify-center gap-1 rounded-md border border-dashed border-neutral-300 py-1.5 text-[11px] font-medium text-neutral-500 hover:border-neutral-400 hover:bg-neutral-50"
+            >
+              <Plus size={12} />
+              {t("detailPage.properties.gradientAddStop")}
+            </button>
+          </div>
+
+          {/* 각도 */}
+          <label className="flex items-center gap-3">
+            <span className="w-8 shrink-0 text-[11px] text-neutral-500">
+              {t("detailPage.properties.gradientAngle")}
+            </span>
+            <input
+              type="range"
+              min={0}
+              max={360}
+              value={g.angle}
+              onChange={(e) => emit({ ...g, angle: Number(e.target.value) })}
+              className="min-w-0 flex-1 accent-neutral-900"
+            />
+            <span className="w-10 text-right text-xs tabular-nums text-neutral-700">
+              {Math.round(g.angle)}°
+            </span>
+          </label>
+        </div>
+      )}
+    </div>
+  );
+}

package/components/detail-page/find-replace-panel.tsx

@@ -0,0 +1,252 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { observer } from "./canvas-observer";
+import { useTranslation } from "react-i18next";
+import { CaseSensitive, ChevronDown, ChevronUp, X } from "lucide-react";
+
+import {
+  collectTextMatches,
+  replaceInText,
+  stepIndex,
+  totalOccurrences,
+  type SearchPage,
+  type TextMatch,
+} from "../../lib/detail-page/find-replace";
+
+/**
+ * ⌘F로 뜨는 찾기·바꾸기 패널.
+ *
+ * 좌측 사이드바에 안 넣는다 — 탭이 이미 12개다. 캔버스 우상단에 떠 있는 편이
+ * "지금 문서를 훑는 중"이라는 상태와도 맞다.
+ *
+ * 훑기는 **요소 단위**다. Konva 캔버스에서 글자 일부만 하이라이트할 수가 없어서,
+ * 같은 요소 안 두 번째 등장으로 "이동"해 봐야 화면이 그대로다. 대신 전체 등장
+ * 횟수를 따로 보여 준다 — 그게 실제로 바뀔 자리 수다.
+ */
+
+type PanelElement = {
+  id: string;
+  text?: string;
+  set?: (props: Record<string, unknown>) => void;
+};
+
+type PanelStore = {
+  pages?: SearchPage[];
+  getElementById?: (id: string) => PanelElement | undefined;
+  selectElements?: (ids: string[]) => void;
+  selectPage?: (id: string) => void;
+  history?: { startTransaction?: () => void; endTransaction?: () => void };
+};
+
+/** 그 자리로 화면을 옮긴다. 섹션을 먼저 고르면 워크스페이스가 거기로 스크롤한다. */
+export function revealMatch(store: PanelStore, match: TextMatch): void {
+  store.selectPage?.(match.pageId);
+  store.selectElements?.([match.elementId]);
+}
+
+export const FindReplacePanel = observer(function FindReplacePanel({
+  store,
+}: {
+  store: unknown;
+}) {
+  const { t } = useTranslation("branding");
+  const s = store as PanelStore;
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [replacement, setReplacement] = useState("");
+  const [caseSensitive, setCaseSensitive] = useState(false);
+  const [cursor, setCursor] = useState(0);
+
+  const matches = useMemo(
+    () => (open ? collectTextMatches(s.pages ?? [], query, { caseSensitive }) : []),
+    // 관찰형이라 텍스트가 바뀌면 이 memo도 다시 돈다(pages는 mobx 배열).
+    [s, open, query, caseSensitive],
+  );
+  const total = totalOccurrences(matches);
+  const at = matches.length ? Math.min(cursor, matches.length - 1) : 0;
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (!(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== "f" || e.shiftKey) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      setOpen(true);
+    };
+    document.addEventListener("keydown", onKey, { capture: true });
+    return () => document.removeEventListener("keydown", onKey, { capture: true });
+  }, []);
+
+  const step = useCallback(
+    (direction: 1 | -1) => {
+      const next = stepIndex(at, matches.length, direction);
+      if (next == null) return;
+      setCursor(next);
+      revealMatch(s, matches[next]);
+    },
+    [at, matches, s],
+  );
+
+  const replaceOne = useCallback(() => {
+    const match = matches[at];
+    if (!match) return;
+    const el = s.getElementById?.(match.elementId);
+    if (typeof el?.text !== "string") return;
+    el.set?.({ text: replaceInText(el.text, query, replacement, { caseSensitive }) });
+    // 그 요소가 목록에서 빠지면 같은 자리에 다음 것이 올라온다 — cursor는 그대로 둔다.
+  }, [matches, at, s, query, replacement, caseSensitive]);
+
+  const replaceAll = useCallback(() => {
+    if (!matches.length) return;
+    // ⌘Z 한 번에 전부 되돌아가게 묶는다.
+    s.history?.startTransaction?.();
+    try {
+      for (const match of matches) {
+        const el = s.getElementById?.(match.elementId);
+        if (typeof el?.text !== "string") continue;
+        el.set?.({
+          text: replaceInText(el.text, query, replacement, { caseSensitive }),
+        });
+      }
+    } finally {
+      s.history?.endTransaction?.();
+    }
+    setCursor(0);
+  }, [matches, s, query, replacement, caseSensitive]);
+
+  if (!open) return null;
+
+  const field =
+    "h-8 w-full rounded-md border border-neutral-200 px-2 text-[13px] text-neutral-800 outline-none focus:border-neutral-400";
+  const button =
+    "flex h-8 items-center justify-center rounded-md border border-neutral-200 px-2.5 text-[12px] text-neutral-700 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-40";
+
+  return (
+    <div
+      data-dp-find-replace
+      className="absolute right-4 top-4 z-40 w-[292px] rounded-lg border border-neutral-200 bg-white p-3 shadow-lg"
+      onKeyDown={(e) => {
+        if (e.key === "Escape") setOpen(false);
+        if (e.key === "Enter") step(e.shiftKey ? -1 : 1);
+      }}
+    >
+      <div className="mb-2 flex items-center justify-between">
+        <span className="text-[12px] font-medium text-neutral-500">
+          {t("detailPage.findReplace.title")}
+        </span>
+        <button
+          type="button"
+          aria-label={t("detailPage.findReplace.close")}
+          data-dp-find-close
+          onClick={() => setOpen(false)}
+          className="rounded p-0.5 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-700"
+        >
+          <X size={14} />
+        </button>
+      </div>
+
+      <div className="flex items-center gap-1.5">
+        {/* eslint-disable-next-line jsx-a11y/no-autofocus -- ⌘F는 바로 타이핑을 기대한다 */}
+        <input
+          autoFocus
+          data-dp-find-query
+          value={query}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            setCursor(0);
+          }}
+          placeholder={t("detailPage.findReplace.findPlaceholder")}
+          className={field}
+        />
+        <button
+          type="button"
+          title={t("detailPage.findReplace.caseSensitive")}
+          aria-label={t("detailPage.findReplace.caseSensitive")}
+          aria-pressed={caseSensitive}
+          data-dp-find-case
+          onClick={() => setCaseSensitive((v) => !v)}
+          className={`${button} shrink-0 ${caseSensitive ? "bg-neutral-900 text-white hover:bg-neutral-900" : ""}`}
+        >
+          <CaseSensitive size={15} />
+        </button>
+      </div>
+
+      <div className="mt-1.5 flex items-center gap-1.5">
+        <input
+          data-dp-find-replacement
+          value={replacement}
+          onChange={(e) => setReplacement(e.target.value)}
+          placeholder={t("detailPage.findReplace.replacePlaceholder")}
+          className={field}
+        />
+      </div>
+
+      <div className="mt-2 flex items-center justify-between">
+        <span
+          data-dp-find-count
+          data-dp-find-current={matches.length ? at + 1 : 0}
+          data-dp-find-blocks={matches.length}
+          data-dp-find-total={total}
+          className="text-[12px] tabular-nums text-neutral-500"
+        >
+          {matches.length
+            ? t("detailPage.findReplace.count", {
+                current: at + 1,
+                blocks: matches.length,
+                total,
+              })
+            : t(query ? "detailPage.findReplace.none" : "detailPage.findReplace.idle")}
+        </span>
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            aria-label={t("detailPage.findReplace.previous")}
+            data-dp-find-prev
+            disabled={!matches.length}
+            onClick={() => step(-1)}
+            className={`${button} px-1.5`}
+          >
+            <ChevronUp size={14} />
+          </button>
+          <button
+            type="button"
+            aria-label={t("detailPage.findReplace.next")}
+            data-dp-find-next
+            disabled={!matches.length}
+            onClick={() => step(1)}
+            className={`${button} px-1.5`}
+          >
+            <ChevronDown size={14} />
+          </button>
+        </div>
+      </div>
+
+      <div className="mt-2 flex items-center gap-1.5">
+        <button
+          type="button"
+          data-dp-find-replace-one
+          disabled={!matches.length}
+          onClick={replaceOne}
+          className={`${button} flex-1`}
+        >
+          {t("detailPage.findReplace.replace")}
+        </button>
+        <button
+          type="button"
+          data-dp-find-replace-all
+          disabled={!matches.length}
+          onClick={replaceAll}
+          className={`${button} flex-1`}
+        >
+          {t("detailPage.findReplace.replaceAll")}
+        </button>
+      </div>
+
+      <p className="mt-2 text-[11px] leading-relaxed text-neutral-400">
+        {t("detailPage.findReplace.chartHint")}
+      </p>
+    </div>
+  );
+});

package/components/detail-page/generation-progress-fill.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+/**
+ * 어두운(bg-neutral-900) 생성 버튼 위에 얹는 가짜 프로그레스 오버레이.
+ *
+ * 진행 신호를 두 겹으로 준다: (1) 버튼 전체를 은은하게 채우는 반투명 면,
+ * (2) 하단의 또렷한 3px 바. 둘 다 왼→오로 자라며, 라벨(퍼센트 포함)은 버튼이
+ * 직접 그린다. 부모 버튼은 `relative overflow-hidden`이어야 한다.
+ *
+ * 진행률 계산은 {@link useFakeProgress}가, 표시는 이 컴포넌트가 담당한다.
+ */
+export function GenerationProgressFill({ progress }: { progress: number }) {
+  const pct = Math.max(0, Math.min(100, Math.round(progress * 100)));
+  return (
+    <>
+      <span
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-y-0 left-0 bg-white/10"
+        style={{ width: `${pct}%`, transition: "width 200ms ease-out" }}
+      />
+      <span
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-x-0 bottom-0 h-[3px] bg-white/25"
+      >
+        <span
+          className="block h-full bg-white"
+          style={{ width: `${pct}%`, transition: "width 200ms ease-out" }}
+        />
+      </span>
+    </>
+  );
+}
+
+/** 진행률(0~1)을 정수 퍼센트(0~100)로. 라벨에 "42%"처럼 붙일 때 사용. */
+export function progressPercent(progress: number): number {
+  return Math.max(0, Math.min(100, Math.round(progress * 100)));
+}
+
+/**
+ * 밝은 배경 패널(카피·SVG 프롬프트 편집)의 하단에 얹는 얇은 프로그레스 라인.
+ * 테마 토큰(primary) 기반이라 라이트/다크 모두 자연스럽다. 부모는 `relative`여야
+ * 하며, 이 요소는 컨테이너 하단에 절대배치된다.
+ */
+export function GenerationProgressLine({ progress }: { progress: number }) {
+  const pct = progressPercent(progress);
+  return (
+    <span
+      aria-hidden="true"
+      className="pointer-events-none absolute inset-x-0 bottom-0 h-[3px] bg-primary/15"
+    >
+      <span
+        className="block h-full bg-primary"
+        style={{ width: `${pct}%`, transition: "width 200ms ease-out" }}
+      />
+    </span>
+  );
+}