ari_assistant/frontend/components/notify/GuardPanel.tsx

// frontend/components/notify/GuardPanel.tsx — 집중 보호 · 묶음 배달
"use client";
import { Icon } from "@/components/Icon";
import type { Digest, NotifyGuard } from "@/lib/types";

export function GuardPanel({
  guard,
  digests,
  onToggle,
}: {
  guard: NotifyGuard;
  digests: Digest[];
  onToggle: () => void;
}) {
  const on = guard.on;
  return (
    <div className="board">
      <section className="card sp2">
        <div className="ch">
          <div className="ico">
            <Icon name="shield" />
          </div>
          <div className="htext">
            <h3>집중 보호 · 묶음 배달</h3>
            <div className="sub">조용히, 그래도 놓치지 않게</div>
          </div>
        </div>
        <div className={"gd-hold" + (on ? "" : " off")}>
          <div className="gd-ic">
            <Icon name="target" />
          </div>
          <div className="gd-body">
            {on ? (
              <>
                <div className="gd-t">딥 워크 보호 중 — {guard.until}까지</div>
                <div className="gd-s">알림 {guard.held}건 보류 중 · 끝나면 한 번에 전달해요</div>
              </>
            ) : (
              <>
                <div className="gd-t">보호 꺼짐</div>
                <div className="gd-s">
                  모든 알림이 바로 도착해요 · 집중 모드를 켜면 다시 막아드려요
                </div>
              </>
            )}
          </div>
          <button
            className={"sw" + (on ? " on" : "")}
            onClick={onToggle}
            aria-label="집중 보호 켜기/끄기"
            aria-pressed={on}
          />
        </div>
        <div className="gd-quiet">
          <Icon name="moon" />
          <span>조용한 시간</span>
          <b>{guard.quiet}</b>
          <span className="hint">긴급·VIP만 통과</span>
        </div>
        <div className="gd-sec">묶음 배달 시간</div>
        <div className="dg2-list">
          {digests.map((d) => (
            <div className={"dg2-row" + (d.done ? " done" : "")} key={d.id}>
              <span className="dg2-time">{d.time}</span>
              <div className="dg2-body">
                <div className="dg2-name">
                  {d.name}
                  {d.done ? " — 전달됨" : ""}
                </div>
                <div className="dg2-desc">{d.desc}</div>
              </div>
              <span className="dg2-n">{d.count}건</span>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}