You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
// frontend/components/approvals/AutonomyCard.tsx — approve-page.jsx MODES 이식
|
|
"use client";
|
|
import { Icon } from "@/components/Icon";
|
|
import type { Autonomy } from "@/lib/types";
|
|
|
|
// 원본 approve-page.jsx MODES — id 만 백엔드 enum 으로 매핑(approve→approval_first, auto→full_auto)
|
|
export const MODES: { id: Autonomy; title: string; rec?: boolean; desc: string }[] = [
|
|
{
|
|
id: "approval_first",
|
|
title: "승인 우선",
|
|
desc: "모든 실행 전에 내 확인을 받아요. 아리를 알아가는 단계에 좋아요.",
|
|
},
|
|
{
|
|
id: "mixed",
|
|
title: "혼합",
|
|
rec: true,
|
|
desc: "되돌릴 수 있는 일(일정 이동·메일 정리)은 자동, 보내기·결제·위임은 승인 대기.",
|
|
},
|
|
{
|
|
id: "full_auto",
|
|
title: "완전 자율",
|
|
desc: "다 해두고 보고만 해요. 모든 실행은 탭 한 번으로 되돌릴 수 있어요.",
|
|
},
|
|
];
|
|
|
|
export function AutonomyCard({
|
|
autonomy,
|
|
onPick,
|
|
}: {
|
|
autonomy: string;
|
|
onPick: (id: Autonomy) => void;
|
|
}) {
|
|
return (
|
|
<section className="card auton">
|
|
<div className="ch">
|
|
<div className="ico">
|
|
<Icon name="shield" />
|
|
</div>
|
|
<div className="htext">
|
|
<h3>아리 자율성</h3>
|
|
<div className="sub">어디까지 맡길지 정해요</div>
|
|
</div>
|
|
</div>
|
|
<div className="auton-list">
|
|
{MODES.map((m) => (
|
|
<button
|
|
key={m.id}
|
|
className={"au-opt" + (autonomy === m.id ? " on" : "")}
|
|
onClick={() => onPick(m.id)}
|
|
aria-pressed={autonomy === m.id}
|
|
>
|
|
<span className="au-radio" />
|
|
<span className="au-body">
|
|
<span className="au-title">
|
|
{m.title}
|
|
{m.rec && <em className="au-rec">추천</em>}
|
|
</span>
|
|
<span className="au-desc">{m.desc}</span>
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="auton-note">
|
|
<Icon name="swap" />
|
|
어떤 모드든, 아리가 한 일은 전부 기록되고 되돌릴 수 있어요.
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|