63 lines
2.8 KiB
TypeScript
63 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* 게이트 ①·③ 자동 승인 — (a) 시작 화면 옵션으로 확정(2026-08-28).
|
|
* <AutoApprovePanel /> /playreel 시작 화면: 스위치 2개 + 잠긴 2·4·5단계 안내. 되돌리는 자리도 여기.
|
|
* 아이콘은 SVG만(이모지 금지).
|
|
*/
|
|
|
|
import { GATE_META, type GateKey } from "@/lib/playreel";
|
|
import { AUTO_APPROVABLE, setAutoApprove, useAutoApprove, type AutoApprovable } from "@/lib/prefs";
|
|
|
|
export const isAutoApprovable = (g: GateKey | null | undefined): g is AutoApprovable =>
|
|
!!g && (AUTO_APPROVABLE as readonly string[]).includes(g);
|
|
|
|
const AUTO_COPY: Record<AutoApprovable, string> = {
|
|
fetch_confirm: "상세페이지에서 읽은 정보와 기본 섹션을 그대로 사용",
|
|
narration_confirm: "자동 생성 문장과 기본 목소리로 바로 진행",
|
|
};
|
|
|
|
const Lock = () => (
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden style={{ flexShrink: 0 }}>
|
|
<rect x="4" y="11" width="16" height="10" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" />
|
|
</svg>
|
|
);
|
|
|
|
function Switch({ on, onChange, label }: { on: boolean; onChange: (v: boolean) => void; label: string }) {
|
|
return (
|
|
<button type="button" role="switch" aria-checked={on} aria-label={label} className={`switch${on ? " on" : ""}`} onClick={() => onChange(!on)}>
|
|
<span className="switch-knob" />
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export function AutoApprovePanel() {
|
|
const prefs = useAutoApprove();
|
|
return (
|
|
<div>
|
|
<p className="field-label" style={{ margin: "0 0 0.75rem" }}>자동화 승인 단계 설정</p>
|
|
<div className="card" style={{ padding: "0.5rem 1rem" }}>
|
|
{AUTO_APPROVABLE.map((g) => {
|
|
const m = GATE_META[g];
|
|
return (
|
|
<div key={g} className="pref-row">
|
|
<div style={{ minWidth: 0 }}>
|
|
<p style={{ margin: 0, fontSize: "var(--text-sm)", fontWeight: 600 }}>{m.step}단계 · {m.name}</p>
|
|
<p style={{ margin: "2px 0 0", fontSize: "var(--text-xs)", color: "var(--color-text-gray-500)" }}>{AUTO_COPY[g]}</p>
|
|
</div>
|
|
<Switch on={!!prefs[g]} onChange={(v) => setAutoApprove(g, v)} label={`${m.name} 자동 승인`} />
|
|
</div>
|
|
);
|
|
})}
|
|
<div className="pref-row" style={{ opacity: 0.55 }}>
|
|
<div style={{ minWidth: 0 }}>
|
|
<p style={{ margin: 0, fontSize: "var(--text-sm)", fontWeight: 600 }}>2 · 4 · 5단계</p>
|
|
<p style={{ margin: "2px 0 0", fontSize: "var(--text-xs)", color: "var(--color-text-gray-500)" }}>되돌릴 수 없는 단계라 항상 확인합니다</p>
|
|
</div>
|
|
<span style={{ color: "var(--color-text-gray-500)" }}><Lock /></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|