ari_assistant/frontend/components/dashboard/TaskSummaryCard.tsx

// frontend/components/dashboard/TaskSummaryCard.tsx
"use client";
import Link from "next/link";
import { Icon } from "@/components/Icon";
import { cx } from "@/lib/cx";
import type { DashTaskSummary } from "@/lib/types";

const PRIO: Record<string, string> = { 높음: "high", 보통: "mid", 낮음: "low" };

export function TaskSummaryCard({ summary }: { summary: DashTaskSummary }) {
  return (
    <section className="card">
      <div className="ch">
        <div className="ico">
          <Icon name="check" />
        </div>
        <div className="htext">
          <h3>할 일</h3>
        </div>
        <span className="count">{summary.open_count}개 남음</span>
      </div>
      {summary.items.length === 0 ? (
        <div className="appr-empty">
          <span className="ae-tick">
            <Icon name="tick" w={3} />
          </span>
          할 일이 모두 끝났어요 🎉
        </div>
      ) : (
        <div className="tasks">
          {summary.items.map((t, idx) => {
            const focus = idx === 0;
            return (
              <Link key={t.id} href={`/tasks?task=${t.id}`} className={cx("task", focus && "focus")}>
                <div className="box">
                  <Icon name="tick" w={3} />
                </div>
                <div className="task-body">
                  <div className="task-title">{t.title}</div>
                  <div className="task-meta">{t.project}</div>
                </div>
                {focus ? (
                  <span className="focus-tag">지금</span>
                ) : (
                  <span className={"prio " + PRIO[t.prio]}>{t.prio}</span>
                )}
              </Link>
            );
          })}
        </div>
      )}
    </section>
  );
}