|
|
// frontend/components/tasks/DetailPanel.tsx — 작업 상세 드로어 (포커스 드릴다운)
|
|
|
"use client";
|
|
|
import { Fragment, useEffect, useState } from "react";
|
|
|
import { Icon } from "@/components/Icon";
|
|
|
import { cx } from "@/lib/cx";
|
|
|
import { COLUMNS, STATUS_META, dueDay, findPath, flattenTasks, stat } from "@/lib/tasks/tree";
|
|
|
import type { Person, Project, Status, Task } from "@/lib/types";
|
|
|
import { Av, Tag } from "./bits";
|
|
|
import { Comments } from "./Comments";
|
|
|
import { RichNotes } from "./RichNotes";
|
|
|
import { ScaffoldPanel } from "./ScaffoldPanel";
|
|
|
import { SubRow } from "./SubRow";
|
|
|
|
|
|
/** 같은 프로젝트를 함께 하는 비-본인 담당자 중 최다 인원 제안 (원본 suggestCollaborator) */
|
|
|
function suggestCollaborator(tasks: Task[], projectId: string): string | null {
|
|
|
if (!projectId || projectId === "me") return null; // 개인 프로젝트 제외
|
|
|
const counts: Record<string, number> = {};
|
|
|
for (const n of flattenTasks(tasks)) {
|
|
|
if (n.assignee_id && n.assignee_id !== "jiwoo" && n.project_id === projectId) {
|
|
|
counts[n.assignee_id] = (counts[n.assignee_id] || 0) + 1;
|
|
|
}
|
|
|
}
|
|
|
const ppl = Object.keys(counts);
|
|
|
if (!ppl.length) return null;
|
|
|
ppl.sort((a, b) => counts[b] - counts[a]);
|
|
|
return ppl[0];
|
|
|
}
|
|
|
|
|
|
interface Props {
|
|
|
tasks: Task[];
|
|
|
focusId: string;
|
|
|
rootId: string | null;
|
|
|
people: Record<string, Person>;
|
|
|
projects: Record<string, Project>;
|
|
|
me: Person;
|
|
|
onFocus: (id: string) => void;
|
|
|
onClose: () => void;
|
|
|
onCheck: (id: string) => void;
|
|
|
onField: (id: string, patch: Partial<Task>) => void;
|
|
|
onAddChild: (parentId: string, title: string) => void;
|
|
|
onScaffolded: () => void;
|
|
|
onDelegate: (id: string, who: string) => void;
|
|
|
onDelete: (id: string) => void;
|
|
|
onNotes: (id: string, html: string) => void;
|
|
|
onAddComment: (id: string, text: string) => void;
|
|
|
}
|
|
|
|
|
|
export function DetailPanel(p: Props) {
|
|
|
const [menu, setMenu] = useState(false);
|
|
|
const [expanded, setExpanded] = useState<Record<string, boolean>>({});
|
|
|
const [adding, setAdding] = useState(false);
|
|
|
const [subText, setSubText] = useState("");
|
|
|
|
|
|
const path = findPath(p.tasks, p.focusId) ?? [];
|
|
|
const node = path[path.length - 1];
|
|
|
|
|
|
useEffect(() => {
|
|
|
setAdding(false);
|
|
|
setMenu(false);
|
|
|
}, [p.focusId]);
|
|
|
useEffect(() => {
|
|
|
const h = (e: KeyboardEvent) => {
|
|
|
if (e.key === "Escape") p.onClose();
|
|
|
};
|
|
|
window.addEventListener("keydown", h);
|
|
|
return () => window.removeEventListener("keydown", h);
|
|
|
}, [p]);
|
|
|
|
|
|
if (!node) return null;
|
|
|
|
|
|
const rootIdx = p.rootId ? path.findIndex((n) => n.id === p.rootId) : -1;
|
|
|
const crumbs = rootIdx >= 0 ? path.slice(rootIdx) : path;
|
|
|
const person = node.assignee_id ? p.people[node.assignee_id] : null;
|
|
|
const s = stat(node);
|
|
|
const sm = STATUS_META[node.status];
|
|
|
const proj = p.projects[node.project_id];
|
|
|
const comments = node.comments || [];
|
|
|
const onExpand = (id: string) => setExpanded((e) => ({ ...e, [id]: !e[id] }));
|
|
|
const submitSub = () => {
|
|
|
if (subText.trim()) p.onAddChild(node.id, subText.trim());
|
|
|
setSubText("");
|
|
|
setAdding(false);
|
|
|
};
|
|
|
const collabWho =
|
|
|
node.assignee_id === "jiwoo" && node.status !== "done"
|
|
|
? suggestCollaborator(p.tasks, node.project_id)
|
|
|
: null;
|
|
|
|
|
|
return (
|
|
|
<>
|
|
|
<div className="dp-backdrop" onClick={p.onClose} />
|
|
|
<aside className="dpanel" role="dialog" aria-label="작업 상세" aria-modal="true">
|
|
|
<div className="dp-head">
|
|
|
<button
|
|
|
className="dp-up"
|
|
|
onClick={() => (crumbs.length > 1 ? p.onFocus(crumbs[crumbs.length - 2].id) : p.onClose())}
|
|
|
aria-label="위로"
|
|
|
>
|
|
|
<Icon name="back" />
|
|
|
</button>
|
|
|
<div className="dp-crumbs">
|
|
|
{crumbs.map((c, i) => (
|
|
|
<Fragment key={c.id}>
|
|
|
{i > 0 && (
|
|
|
<span className="cz-sep">
|
|
|
<Icon name="chev" />
|
|
|
</span>
|
|
|
)}
|
|
|
{i === crumbs.length - 1 ? (
|
|
|
<span className="cz cur">{c.title}</span>
|
|
|
) : (
|
|
|
<button className="cz" onClick={() => p.onFocus(c.id)}>
|
|
|
{c.title}
|
|
|
</button>
|
|
|
)}
|
|
|
</Fragment>
|
|
|
))}
|
|
|
</div>
|
|
|
<Tag project={proj} />
|
|
|
<button className="dp-close" onClick={p.onClose} aria-label="닫기">
|
|
|
<Icon name="x" />
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
<div className="dp-grid">
|
|
|
{/* 좌측 — 본문 */}
|
|
|
<div className="dp-main">
|
|
|
<div className="dp-title-row">
|
|
|
<button
|
|
|
className={cx("dp-check", node.status === "done" && "done")}
|
|
|
onClick={() => p.onCheck(node.id)}
|
|
|
aria-label="완료 토글"
|
|
|
>
|
|
|
<Icon name="tick" w={3} />
|
|
|
</button>
|
|
|
<h2 className={cx("dp-title", node.status === "done" && "done")}>{node.title}</h2>
|
|
|
</div>
|
|
|
|
|
|
<div className="dp-label">
|
|
|
<Icon name="file" /> 노트
|
|
|
</div>
|
|
|
<RichNotes
|
|
|
taskId={node.id}
|
|
|
value={node.notes}
|
|
|
onChange={(html) => p.onNotes(node.id, html)}
|
|
|
/>
|
|
|
|
|
|
<div className="dp-label">
|
|
|
<Icon name="branch" /> 하위 작업{" "}
|
|
|
<span className="cnt">
|
|
|
{s.done}/{s.total}
|
|
|
</span>
|
|
|
</div>
|
|
|
<div className="subs">
|
|
|
<ScaffoldPanel
|
|
|
taskId={node.id}
|
|
|
show={node.status !== "done"}
|
|
|
onApplied={p.onScaffolded}
|
|
|
/>
|
|
|
{s.total > 0 ? (
|
|
|
node.children.map((c) => (
|
|
|
<SubRow
|
|
|
key={c.id}
|
|
|
node={c}
|
|
|
depth={0}
|
|
|
people={p.people}
|
|
|
expanded={expanded}
|
|
|
onExpand={onExpand}
|
|
|
onCheck={p.onCheck}
|
|
|
onFocus={p.onFocus}
|
|
|
/>
|
|
|
))
|
|
|
) : (
|
|
|
!adding && (
|
|
|
<div className="subempty">
|
|
|
<Icon name="branch" /> 아직 하위 작업이 없어요. 위 버튼으로 아리에게 맡기거나 직접
|
|
|
추가하세요.
|
|
|
</div>
|
|
|
)
|
|
|
)}
|
|
|
{adding ? (
|
|
|
<input
|
|
|
className="sub-input"
|
|
|
autoFocus
|
|
|
value={subText}
|
|
|
placeholder="하위 작업 입력 후 Enter…"
|
|
|
onChange={(e) => setSubText(e.target.value)}
|
|
|
onKeyDown={(e) => {
|
|
|
if (e.key === "Enter") submitSub();
|
|
|
if (e.key === "Escape") setAdding(false);
|
|
|
}}
|
|
|
onBlur={submitSub}
|
|
|
/>
|
|
|
) : (
|
|
|
<button className="sub-add" onClick={() => setAdding(true)}>
|
|
|
<Icon name="plus" /> 하위 작업 추가
|
|
|
</button>
|
|
|
)}
|
|
|
</div>
|
|
|
|
|
|
<div className="dp-label">
|
|
|
<Icon name="msg" /> 코멘트 <span className="cnt">{comments.length}</span>
|
|
|
</div>
|
|
|
<Comments
|
|
|
list={comments}
|
|
|
people={p.people}
|
|
|
me={p.me}
|
|
|
onAdd={(text) => p.onAddComment(node.id, text)}
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
{/* 우측 — 메타 */}
|
|
|
<div className="dp-rail">
|
|
|
<div className="dp-meta">
|
|
|
<div className="dp-mi">
|
|
|
<div className="ml">
|
|
|
<Icon name="user" /> 담당자
|
|
|
</div>
|
|
|
<div className="dp-mv">
|
|
|
<Av person={person} /> {person ? person.name : "미정"}
|
|
|
{person?.is_me ? " (나)" : ""}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="dp-mi">
|
|
|
<div className="ml">
|
|
|
<Icon name="cal" /> 마감일
|
|
|
</div>
|
|
|
<div className="dp-mv">{node.due ? `6월 ${dueDay(node.due)}일` : "미정"}</div>
|
|
|
</div>
|
|
|
<div className="dp-mi">
|
|
|
<div className="ml">
|
|
|
<Icon name="flag" /> 우선순위
|
|
|
</div>
|
|
|
<div className={cx("dp-mv", `prio-${node.prio}`)}>
|
|
|
<Icon name="flag" /> {node.prio}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="dp-mi">
|
|
|
<div className="ml">
|
|
|
<Icon name="list" /> 상태
|
|
|
</div>
|
|
|
<div className="status-wrap">
|
|
|
<button className="status-pill" onClick={() => setMenu((o) => !o)}>
|
|
|
<span className="pdot" style={{ background: sm.c }} /> {sm.label}{" "}
|
|
|
<Icon name="chev" />
|
|
|
</button>
|
|
|
{menu && (
|
|
|
<div className="status-menu">
|
|
|
{COLUMNS.map((c) => (
|
|
|
<button
|
|
|
key={c.id}
|
|
|
onClick={() => {
|
|
|
p.onField(node.id, { status: c.id as Status });
|
|
|
setMenu(false);
|
|
|
}}
|
|
|
>
|
|
|
<span className="pdot" style={{ background: STATUS_META[c.id].c }} />{" "}
|
|
|
{c.label}
|
|
|
</button>
|
|
|
))}
|
|
|
</div>
|
|
|
)}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{node.delegated ? (
|
|
|
<div className="delegated-note">
|
|
|
<Av person={person} />
|
|
|
<div className="dn-tx">
|
|
|
<b>{person ? person.name : ""}님께 위임됨</b>
|
|
|
<span>완료를 기다리는 중 · 끝나면 알려드릴게요</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
) : (
|
|
|
collabWho &&
|
|
|
p.people[collabWho] && (
|
|
|
<div className="delegate-sug">
|
|
|
<div className="ds-head">
|
|
|
<Icon name="spark" />
|
|
|
위임 & 추적
|
|
|
</div>
|
|
|
<p>
|
|
|
직접 하기 벅차다면 이 프로젝트를 함께 하는 <b>{p.people[collabWho].name}</b>님께
|
|
|
위임할 수 있어요. 넘긴 뒤엔 ‘대기 중’으로 바꿔 진행 상황을 추적해 드릴게요.
|
|
|
</p>
|
|
|
<button className="ds-btn" onClick={() => p.onDelegate(node.id, collabWho)}>
|
|
|
<Icon name="users" />
|
|
|
{p.people[collabWho].name}님께 위임하기
|
|
|
</button>
|
|
|
</div>
|
|
|
)
|
|
|
)}
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div className="dp-foot">
|
|
|
<button className="btn danger" onClick={() => p.onDelete(node.id)} aria-label="삭제">
|
|
|
<Icon name="trash" />
|
|
|
</button>
|
|
|
{crumbs.length > 1 && (
|
|
|
<button
|
|
|
className="btn ghost"
|
|
|
onClick={() => p.onFocus(crumbs[crumbs.length - 2].id)}
|
|
|
>
|
|
|
<Icon name="back" /> 상위로
|
|
|
</button>
|
|
|
)}
|
|
|
<button className="btn primary" onClick={p.onClose}>
|
|
|
<Icon name="check" /> 완료
|
|
|
</button>
|
|
|
</div>
|
|
|
</aside>
|
|
|
</>
|
|
|
);
|
|
|
}
|