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.
64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
// frontend/components/journey/JourneyTable.tsx — 하단 작업 테이블 (원본 jtable)
|
|
import type { JourneyRow, JourneyPerson } from "@/lib/types";
|
|
|
|
const STAR_D = "M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 18l-6 3.4 1.4-6.8L2.3 9.9l6.9-.8z";
|
|
const FALLBACK: Pick<JourneyPerson, "name" | "initial" | "color"> = {
|
|
name: "",
|
|
initial: "?",
|
|
color: "var(--card-2)",
|
|
};
|
|
|
|
export function JourneyTable({ rows, people }: { rows: JourneyRow[]; people: JourneyPerson[] }) {
|
|
const by = Object.fromEntries(people.map((p) => [p.id, p]));
|
|
return (
|
|
<table className="jtable">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">작업</th>
|
|
<th scope="col">상태</th>
|
|
<th scope="col">시작</th>
|
|
<th scope="col">담당</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map((r) => {
|
|
const pe = by[r.who] ?? FALLBACK;
|
|
return (
|
|
<tr key={r.node}>
|
|
<td>
|
|
<div className="t-subj">
|
|
<svg
|
|
className={"ic star" + (r.star ? " on" : "")}
|
|
viewBox="0 0 24 24"
|
|
fill={r.star ? "currentColor" : "none"}
|
|
stroke="currentColor"
|
|
strokeWidth="1.7"
|
|
aria-hidden
|
|
>
|
|
<path d={STAR_D} />
|
|
</svg>
|
|
<span className="nm">{r.title}</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span className={"chip " + r.statusKey}>{r.statusLabel}</span>
|
|
</td>
|
|
<td>
|
|
<span className="t-date">{r.startTime}</span>
|
|
</td>
|
|
<td>
|
|
<div className="t-user">
|
|
<div className="ua" style={{ background: pe.color }}>
|
|
{pe.initial}
|
|
</div>
|
|
<span className="un">{pe.name}</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
);
|
|
}
|