656 lines
25 KiB
TypeScript
656 lines
25 KiB
TypeScript
import { useState, useEffect, useMemo, useRef } from 'react';
|
||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||
import { apiClient } from '../lib/apiClient';
|
||
import { onDualMonitorEvent } from '../lib/dualMonitor';
|
||
import { ContextMenu } from '../components/common/ContextMenu';
|
||
import { StageModal, parseMilestoneLinks, type StageFormData } from '../components/detail/StageModal';
|
||
import type { Task, Milestone, FileRecord, TaskDetail } from '../types';
|
||
|
||
const STATUS_CONFIG: Record<string, { label: string }> = {
|
||
IN_PROGRESS: { label: '진행중' },
|
||
REVIEW: { label: '보류' },
|
||
TODO: { label: '대기' },
|
||
DONE: { label: '완료' },
|
||
CANCELLED: { label: '취소' },
|
||
};
|
||
|
||
type TaskWithRelations = Task & {
|
||
files: FileRecord[];
|
||
details: TaskDetail[];
|
||
milestones: Milestone[];
|
||
};
|
||
|
||
function fmtDate(iso: string | null | undefined) {
|
||
if (!iso) return '';
|
||
const d = new Date(iso);
|
||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||
}
|
||
|
||
function fmtShort(iso: string | null | undefined) {
|
||
if (!iso) return '';
|
||
const d = new Date(iso);
|
||
return `${String(d.getMonth() + 1).padStart(2, '0')}/${String(d.getDate()).padStart(2, '0')}`;
|
||
}
|
||
|
||
function fmtStageRange(m: Milestone) {
|
||
if (m.startDate && m.dueDate) return `${fmtShort(m.startDate)} ~ ${fmtShort(m.dueDate)}`;
|
||
if (m.dueDate) return fmtShort(m.dueDate);
|
||
return fmtShort(m.createdAt);
|
||
}
|
||
|
||
function fmtTimelineLabel(iso: string | null | undefined) {
|
||
if (!iso) return '';
|
||
const d = new Date(iso);
|
||
return `${d.getMonth() + 1}.${String(d.getDate()).padStart(2, '0')}`;
|
||
}
|
||
|
||
function sortByIsoDesc<T>(items: T[], pick: (item: T) => string) {
|
||
return [...items].sort((a, b) => new Date(pick(b)).getTime() - new Date(pick(a)).getTime());
|
||
}
|
||
|
||
function milestoneProgress(m: Milestone) {
|
||
return m.completedAt ? 100 : 0;
|
||
}
|
||
|
||
function parseContentLines(text: string | null | undefined) {
|
||
if (!text) return [];
|
||
return text.split('\n').map((l) => l.replace(/^[•·\-]\s*/, '').trim()).filter(Boolean);
|
||
}
|
||
|
||
interface TimelineBar {
|
||
id: string;
|
||
label: string;
|
||
left: number;
|
||
width: number;
|
||
progress: number;
|
||
title: string;
|
||
}
|
||
|
||
function buildTimeline(task: Task, milestones: Milestone[]): {
|
||
start: string;
|
||
end: string;
|
||
today: string;
|
||
todayLeft: number;
|
||
bars: TimelineBar[];
|
||
} | null {
|
||
if (!task.startDate || !task.dueDate) return null;
|
||
|
||
const startMs = new Date(task.startDate).getTime();
|
||
const endMs = new Date(task.dueDate).getTime();
|
||
const range = Math.max(endMs - startMs, 86400000);
|
||
const now = Date.now();
|
||
const todayLeft = Math.min(100, Math.max(0, ((now - startMs) / range) * 100));
|
||
const ordered = [...milestones].sort((a, b) => a.order - b.order);
|
||
|
||
const bars: TimelineBar[] = ordered.map((m, i) => {
|
||
const barStart = m.startDate
|
||
? new Date(m.startDate).getTime()
|
||
: i > 0 && ordered[i - 1].dueDate
|
||
? new Date(ordered[i - 1].dueDate!).getTime()
|
||
: startMs;
|
||
const barEnd = m.dueDate ? new Date(m.dueDate).getTime() : endMs;
|
||
const left = Math.max(0, ((barStart - startMs) / range) * 100);
|
||
const width = Math.max(4, ((barEnd - barStart) / range) * 100);
|
||
return {
|
||
id: m.id,
|
||
label: `${i + 1}`,
|
||
left,
|
||
width,
|
||
progress: milestoneProgress(m),
|
||
title: m.title,
|
||
};
|
||
});
|
||
|
||
const today = new Date();
|
||
return {
|
||
start: fmtTimelineLabel(task.startDate),
|
||
end: fmtTimelineLabel(task.dueDate),
|
||
today: `${today.getMonth() + 1}.${String(today.getDate()).padStart(2, '0')}`,
|
||
todayLeft,
|
||
bars,
|
||
};
|
||
}
|
||
|
||
function Badge({ children, className = '' }: { children: React.ReactNode; className?: string }) {
|
||
return (
|
||
<span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-bold ${className}`}>
|
||
{children}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
function PanelLabel({ children, sub }: { children: React.ReactNode; sub?: string }) {
|
||
return (
|
||
<div className="mb-2 flex shrink-0 items-baseline justify-between gap-2 border-b border-slate-200 pb-2">
|
||
<h3 className="text-sm font-black uppercase tracking-widest text-slate-500">{children}</h3>
|
||
{sub && <span className="truncate text-sm font-bold text-emerald-600">{sub}</span>}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function LeftSection({ children }: { children: React.ReactNode }) {
|
||
return (
|
||
<section className="flex min-h-0 flex-col overflow-hidden border-b border-slate-200 px-4 py-3 last:border-b-0">
|
||
{children}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function WaitingScreen() {
|
||
return (
|
||
<div className="flex h-full flex-col items-center justify-center gap-6 bg-[#eef2f5]">
|
||
<div className="flex h-20 w-20 animate-pulse items-center justify-center rounded-full bg-emerald-100 text-4xl">←</div>
|
||
<div className="text-center">
|
||
<p className="text-2xl font-black text-slate-700">카드를 선택하세요</p>
|
||
<p className="mt-2 text-lg font-medium text-slate-400">
|
||
대시보드에서 업무 카드를 클릭하면<br />이곳에 상세 내용이 표시됩니다.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function DetailHeader({ task }: { task: Task }) {
|
||
const status = STATUS_CONFIG[task.status] ?? STATUS_CONFIG.TODO;
|
||
const period =
|
||
task.startDate || task.dueDate
|
||
? `${fmtDate(task.startDate)} ~ ${fmtDate(task.dueDate)}`
|
||
: '—';
|
||
|
||
return (
|
||
<header className="relative flex h-12 shrink-0 items-center overflow-hidden bg-[linear-gradient(180deg,#37a184_0%,#29724f_20%,#07412e_100%)] px-5 text-white shadow-[0_2px_10px_rgba(0,0,0,0.20)]">
|
||
<div className="pointer-events-none absolute inset-x-0 top-0 h-[45%] bg-white/10" />
|
||
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-px bg-emerald-200/50" />
|
||
|
||
<h1 className="relative z-10 min-w-0 truncate text-[20px] font-bold leading-normal text-[#bad8ca]">
|
||
{task.title}
|
||
</h1>
|
||
|
||
<div className="relative z-10 ml-auto flex shrink-0 items-center gap-4 text-sm">
|
||
<span className="whitespace-nowrap">
|
||
<span className="font-semibold text-white/55">담당</span>{' '}
|
||
<span className="font-bold text-white/90">{task.assignee?.name ?? '—'}</span>
|
||
</span>
|
||
<span className="h-4 w-px bg-white/25" />
|
||
<span className="whitespace-nowrap">
|
||
<span className="font-semibold text-white/55">수행기간</span>{' '}
|
||
<span className="font-bold text-white/90">{period}</span>
|
||
</span>
|
||
<span className="h-4 w-px bg-white/25" />
|
||
<span className="whitespace-nowrap">
|
||
<span className="font-semibold text-white/55">부서</span>{' '}
|
||
<span className="font-bold text-white/90">{task.section ?? '—'}</span>
|
||
</span>
|
||
<Badge className="border border-white/20 bg-white/10 text-white/90">{status.label}</Badge>
|
||
</div>
|
||
</header>
|
||
);
|
||
}
|
||
|
||
function DetailView({ task }: { task: TaskWithRelations }) {
|
||
const qc = useQueryClient();
|
||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||
const [uploading, setUploading] = useState(false);
|
||
const [stageSaving, setStageSaving] = useState(false);
|
||
const [stageModal, setStageModal] = useState<{ mode: 'add' | 'edit'; milestone?: Milestone } | null>(null);
|
||
const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number; stageId: string } | null>(null);
|
||
|
||
const milestones = task.milestones ?? [];
|
||
const files = task.files ?? [];
|
||
const details = task.details ?? [];
|
||
|
||
const sortedStages = useMemo(
|
||
() => sortByIsoDesc(milestones, (m) => m.updatedAt),
|
||
[milestones],
|
||
);
|
||
|
||
const [selectedId, setSelectedId] = useState<string | null>(sortedStages[0]?.id ?? null);
|
||
|
||
useEffect(() => {
|
||
if (!selectedId || !sortedStages.some((s) => s.id === selectedId)) {
|
||
setSelectedId(sortedStages[0]?.id ?? null);
|
||
}
|
||
}, [task.id, sortedStages, selectedId]);
|
||
|
||
const selected = sortedStages.find((m) => m.id === selectedId) ?? sortedStages[0] ?? null;
|
||
|
||
const stageContents = useMemo(() => {
|
||
if (!selected?.description) return [];
|
||
return parseContentLines(selected.description).map((text) => ({
|
||
text,
|
||
date: selected.updatedAt,
|
||
}));
|
||
}, [selected]);
|
||
|
||
const sortedContents = useMemo(
|
||
() => sortByIsoDesc(stageContents, (c) => c.date),
|
||
[stageContents],
|
||
);
|
||
|
||
const stageDetails = useMemo(
|
||
() => (selectedId ? details.filter((d) => d.milestoneId === selectedId) : []),
|
||
[details, selectedId],
|
||
);
|
||
|
||
const sortedFeedbacks = useMemo(
|
||
() => sortByIsoDesc(stageDetails, (d) => d.createdAt),
|
||
[stageDetails],
|
||
);
|
||
|
||
const stageFiles = useMemo(
|
||
() => sortByIsoDesc(
|
||
selectedId ? files.filter((f) => f.milestoneId === selectedId) : [],
|
||
(f) => f.createdAt,
|
||
),
|
||
[files, selectedId],
|
||
);
|
||
|
||
const stageLinks = useMemo(
|
||
() => (selected ? parseMilestoneLinks(selected.links) : []),
|
||
[selected],
|
||
);
|
||
|
||
const [previewFileId, setPreviewFileId] = useState<string | null>(null);
|
||
const [previewLinkIndex, setPreviewLinkIndex] = useState(0);
|
||
|
||
useEffect(() => {
|
||
setPreviewFileId(stageFiles[0]?.id ?? null);
|
||
setPreviewLinkIndex(0);
|
||
}, [selectedId, stageFiles]);
|
||
|
||
const previewFile = stageFiles.find((f) => f.id === previewFileId) ?? stageFiles[0] ?? null;
|
||
const previewFileIndex = previewFile ? stageFiles.findIndex((f) => f.id === previewFile.id) : -1;
|
||
const previewLink = !previewFile && stageLinks.length > 0 ? stageLinks[previewLinkIndex] : null;
|
||
|
||
const timeline = useMemo(() => buildTimeline(task, milestones), [task, milestones]);
|
||
|
||
const deleteMs = useMutation({
|
||
mutationFn: (id: string) => apiClient.delete(`/milestones/item/${id}`),
|
||
onSuccess: () => qc.invalidateQueries({ queryKey: ['task', task.id] }),
|
||
});
|
||
|
||
const uploadFiles = async (milestoneId: string, fileList: File[]) => {
|
||
for (const file of fileList) {
|
||
const form = new FormData();
|
||
form.append('file', file);
|
||
form.append('milestoneId', milestoneId);
|
||
form.append('uploadedBy', task.creatorId);
|
||
await apiClient.post(`/files/upload/${task.id}`, form, {
|
||
headers: { 'Content-Type': 'multipart/form-data' },
|
||
});
|
||
}
|
||
};
|
||
|
||
const handleStageSave = async (data: StageFormData, fileList: File[]) => {
|
||
setStageSaving(true);
|
||
try {
|
||
const payload = {
|
||
title: data.title.trim(),
|
||
description: data.description.trim() || undefined,
|
||
startDate: data.startDate || undefined,
|
||
dueDate: data.dueDate || undefined,
|
||
feedback: data.feedback.trim() || undefined,
|
||
links: JSON.stringify(data.links),
|
||
};
|
||
|
||
if (stageModal?.mode === 'add') {
|
||
const { data: created } = await apiClient.post<Milestone>(`/milestones/${task.id}`, payload);
|
||
if (fileList.length) await uploadFiles(created.id, fileList);
|
||
setSelectedId(created.id);
|
||
} else if (stageModal?.milestone) {
|
||
await apiClient.patch(`/milestones/item/${stageModal.milestone.id}`, payload);
|
||
if (fileList.length) await uploadFiles(stageModal.milestone.id, fileList);
|
||
}
|
||
|
||
await qc.invalidateQueries({ queryKey: ['task', task.id] });
|
||
setStageModal(null);
|
||
} finally {
|
||
setStageSaving(false);
|
||
}
|
||
};
|
||
|
||
const handleQuickUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = e.target.files?.[0];
|
||
if (!file || !selectedId) return;
|
||
setUploading(true);
|
||
try {
|
||
await uploadFiles(selectedId, [file]);
|
||
await qc.invalidateQueries({ queryKey: ['task', task.id] });
|
||
} finally {
|
||
setUploading(false);
|
||
if (fileInputRef.current) fileInputRef.current.value = '';
|
||
}
|
||
};
|
||
|
||
const overview = task.description?.split('\n')[0]?.trim() || '등록된 개요가 없습니다.';
|
||
|
||
return (
|
||
<div className="grid h-full min-h-0 grid-cols-[1fr_3fr] grid-rows-1">
|
||
{/* 좌 1/4 — 1:2:2:1 세로 비율 */}
|
||
<aside className="grid h-full min-h-0 grid-rows-[1fr_2fr_2fr_1fr] overflow-hidden border-r border-slate-300 bg-white">
|
||
<LeftSection>
|
||
<PanelLabel>개요</PanelLabel>
|
||
<p className="line-clamp-4 min-h-0 flex-1 overflow-hidden text-xl leading-snug text-slate-600">
|
||
{overview}
|
||
</p>
|
||
{task.issueNote && (
|
||
<p className="mt-1 truncate text-sm font-bold text-red-500">▶ {task.issueNote}</p>
|
||
)}
|
||
</LeftSection>
|
||
|
||
<LeftSection>
|
||
<div className="mb-2 flex shrink-0 items-center justify-between gap-2 border-b border-slate-200 pb-2">
|
||
<h3 className="text-sm font-black uppercase tracking-widest text-slate-500">업무 단계</h3>
|
||
<button
|
||
type="button"
|
||
title="업무 단계 추가"
|
||
onClick={() => setStageModal({ mode: 'add' })}
|
||
className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-emerald-500 text-lg font-bold leading-none text-white hover:bg-emerald-600"
|
||
>
|
||
+
|
||
</button>
|
||
</div>
|
||
<div className="flex min-h-0 flex-1 flex-col gap-2 overflow-hidden">
|
||
{sortedStages.length === 0 && (
|
||
<p className="text-lg text-slate-400">+ 버튼으로 단계를 추가하세요.</p>
|
||
)}
|
||
{sortedStages.map((stage) => {
|
||
const isSelected = stage.id === selectedId;
|
||
const progress = milestoneProgress(stage);
|
||
return (
|
||
<button
|
||
key={stage.id}
|
||
type="button"
|
||
onClick={() => setSelectedId(stage.id)}
|
||
onContextMenu={(e) => {
|
||
e.preventDefault();
|
||
setCtxMenu({ x: e.clientX, y: e.clientY, stageId: stage.id });
|
||
}}
|
||
className={`shrink-0 rounded-lg border px-3 py-2 text-left transition-colors ${
|
||
isSelected
|
||
? 'border-emerald-400 bg-emerald-50 ring-1 ring-emerald-300'
|
||
: 'border-slate-200 bg-slate-50 hover:border-slate-300 hover:bg-white'
|
||
}`}
|
||
>
|
||
<div className="mb-1 flex items-center justify-between gap-2">
|
||
<span className="text-sm font-semibold text-slate-400">{fmtStageRange(stage)}</span>
|
||
<span
|
||
className={`text-lg font-black ${
|
||
progress >= 100 ? 'text-emerald-600' : progress > 0 ? 'text-blue-500' : 'text-slate-300'
|
||
}`}
|
||
>
|
||
{progress}%
|
||
</span>
|
||
</div>
|
||
<div className="mb-1.5 h-1.5 overflow-hidden rounded-full bg-slate-200">
|
||
<div className="h-full rounded-full bg-emerald-500" style={{ width: `${progress}%` }} />
|
||
</div>
|
||
<p className={`truncate text-2xl font-black leading-snug ${isSelected ? 'text-emerald-800' : 'text-slate-800'}`}>
|
||
{stage.title}
|
||
</p>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</LeftSection>
|
||
|
||
<LeftSection>
|
||
<PanelLabel sub={selected?.title ?? '전체'}>업무내용</PanelLabel>
|
||
<ul className="min-h-0 flex-1 space-y-2 overflow-hidden">
|
||
{sortedContents.length === 0 ? (
|
||
<li className="text-lg text-slate-400">내용 없음</li>
|
||
) : (
|
||
sortedContents.map((item) => (
|
||
<li key={item.text + item.date} className="flex gap-2">
|
||
<span className="shrink-0 text-lg text-blue-400">•</span>
|
||
<div className="min-w-0 flex-1">
|
||
<p className="truncate text-2xl font-black leading-snug text-slate-800">{item.text}</p>
|
||
<p className="text-sm font-semibold text-slate-400">{fmtShort(item.date)}</p>
|
||
</div>
|
||
</li>
|
||
))
|
||
)}
|
||
</ul>
|
||
</LeftSection>
|
||
|
||
<LeftSection>
|
||
<PanelLabel sub={selected?.title ?? '전체'}>피드백</PanelLabel>
|
||
<div className="flex min-h-0 flex-1 flex-col overflow-hidden">
|
||
{sortedFeedbacks.length === 0 ? (
|
||
<p className="text-lg text-slate-400">등록된 피드백이 없습니다.</p>
|
||
) : (
|
||
<div className="mb-2 min-h-0 flex-1 space-y-2 overflow-hidden">
|
||
{sortedFeedbacks.map((f) => (
|
||
<div key={f.id} className="rounded-lg bg-slate-50 px-3 py-2">
|
||
<p className="mb-0.5 text-sm font-semibold text-slate-400">{fmtShort(f.createdAt)}</p>
|
||
<p className="truncate text-2xl font-black leading-snug text-slate-700">{f.content}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</LeftSection>
|
||
</aside>
|
||
|
||
{/* 우 3/4 */}
|
||
<div className="flex h-full min-h-0 min-w-0 flex-col">
|
||
<main className="flex min-h-0 flex-1 flex-col overflow-hidden bg-[#0f1419]">
|
||
<div className="flex shrink-0 items-center justify-between border-b border-white/10 px-5 py-2">
|
||
<span className="text-lg font-bold text-white/75">
|
||
결과물 프리뷰
|
||
{previewFile && (
|
||
<span className="ml-2 text-base font-normal text-emerald-400/80">{previewFile.originalName}</span>
|
||
)}
|
||
</span>
|
||
<div className="flex items-center gap-2">
|
||
<input ref={fileInputRef} type="file" className="hidden" onChange={handleQuickUpload} />
|
||
<button
|
||
type="button"
|
||
onClick={() => fileInputRef.current?.click()}
|
||
disabled={uploading || !selectedId}
|
||
className="rounded bg-white/10 px-3 py-1 text-sm font-bold text-white/70 hover:bg-white/20 disabled:opacity-50"
|
||
>
|
||
{uploading ? '업로드 중…' : '+ 파일'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative flex min-h-0 flex-1 items-center justify-center">
|
||
{previewFile ? (
|
||
<>
|
||
{previewFile.mimetype.includes('image') ? (
|
||
<img
|
||
src={`/api/files/${previewFile.id}/view`}
|
||
alt={previewFile.originalName}
|
||
className="max-h-full max-w-full object-contain p-4"
|
||
/>
|
||
) : (
|
||
<iframe
|
||
src={`/api/files/${previewFile.id}/view`}
|
||
title={previewFile.originalName}
|
||
className="h-full w-full border-0"
|
||
/>
|
||
)}
|
||
{stageFiles.length > 1 && (
|
||
<>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const prev = previewFileIndex > 0 ? previewFileIndex - 1 : stageFiles.length - 1;
|
||
setPreviewFileId(stageFiles[prev].id);
|
||
}}
|
||
className="absolute left-4 flex h-10 w-10 items-center justify-center bg-black/40 text-xl text-white/70"
|
||
>
|
||
‹
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const next = previewFileIndex < stageFiles.length - 1 ? previewFileIndex + 1 : 0;
|
||
setPreviewFileId(stageFiles[next].id);
|
||
}}
|
||
className="absolute right-4 flex h-10 w-10 items-center justify-center bg-black/40 text-xl text-white/70"
|
||
>
|
||
›
|
||
</button>
|
||
</>
|
||
)}
|
||
</>
|
||
) : previewLink ? (
|
||
<iframe
|
||
src={previewLink.url}
|
||
title={previewLink.label}
|
||
className="h-full w-full border-0 bg-white"
|
||
/>
|
||
) : (
|
||
<p className="text-xl text-white/40">
|
||
{selectedId ? '첨부된 결과물이 없습니다' : '단계를 선택하세요'}
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
{(previewFile || previewLink) && (
|
||
<div className="shrink-0 border-t border-white/10 px-5 py-1.5 text-center text-sm text-white/40">
|
||
{previewFile
|
||
? `${previewFileIndex + 1} / ${stageFiles.length}`
|
||
: `${previewLinkIndex + 1} / ${stageLinks.length} 링크`}
|
||
</div>
|
||
)}
|
||
</main>
|
||
|
||
<footer className="shrink-0 border-t border-slate-300 bg-white px-5 py-4" style={{ height: '132px' }}>
|
||
<div className="mb-2 flex items-center justify-between">
|
||
<span className="text-lg font-black text-slate-700">업무별 타임라인</span>
|
||
<span className="truncate text-base font-bold text-emerald-600">{selected?.title ?? task.title}</span>
|
||
</div>
|
||
|
||
{timeline ? (
|
||
<>
|
||
<div className="mb-1.5 flex justify-between text-sm font-semibold text-slate-400">
|
||
<span>{timeline.start}</span>
|
||
<span>{timeline.end}</span>
|
||
</div>
|
||
<div className="relative h-10 bg-slate-100">
|
||
<div
|
||
className="pointer-events-none absolute top-0 z-10 flex h-full flex-col items-center"
|
||
style={{ left: `${timeline.todayLeft}%` }}
|
||
>
|
||
<span className="mb-0.5 bg-emerald-500 px-1.5 py-0.5 text-[10px] font-black text-white">
|
||
TODAY ({timeline.today})
|
||
</span>
|
||
<div className="h-full w-0.5 bg-emerald-500" />
|
||
</div>
|
||
{timeline.bars.map((bar) => {
|
||
const isSelected = bar.id === selectedId;
|
||
return (
|
||
<button
|
||
key={bar.id}
|
||
type="button"
|
||
onClick={() => setSelectedId(bar.id)}
|
||
className={`absolute top-1/2 h-5 -translate-y-1/2 overflow-hidden transition-all ${
|
||
isSelected ? 'z-20 ring-2 ring-emerald-400' : 'z-0 opacity-85 hover:opacity-100'
|
||
}`}
|
||
style={{ left: `${bar.left}%`, width: `${bar.width}%` }}
|
||
title={bar.title}
|
||
>
|
||
<div className="absolute inset-0 bg-slate-300" />
|
||
<div
|
||
className="absolute inset-y-0 left-0 bg-emerald-500"
|
||
style={{ width: `${bar.progress}%` }}
|
||
/>
|
||
<span className="relative flex h-full items-center justify-center truncate px-1 text-[10px] font-bold text-white">
|
||
{bar.label}
|
||
</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</>
|
||
) : (
|
||
<p className="text-sm text-slate-400">수행기간이 설정되면 타임라인이 표시됩니다.</p>
|
||
)}
|
||
</footer>
|
||
</div>
|
||
|
||
{stageModal && (
|
||
<StageModal
|
||
mode={stageModal.mode}
|
||
milestone={stageModal.milestone}
|
||
saving={stageSaving}
|
||
onClose={() => setStageModal(null)}
|
||
onSave={handleStageSave}
|
||
/>
|
||
)}
|
||
|
||
{ctxMenu && (
|
||
<ContextMenu
|
||
x={ctxMenu.x}
|
||
y={ctxMenu.y}
|
||
onClose={() => setCtxMenu(null)}
|
||
items={[
|
||
{
|
||
label: '단계 수정',
|
||
icon: '✏️',
|
||
onClick: () => {
|
||
const ms = milestones.find((m) => m.id === ctxMenu.stageId);
|
||
if (ms) setStageModal({ mode: 'edit', milestone: ms });
|
||
},
|
||
},
|
||
{
|
||
label: '단계 삭제',
|
||
icon: '🗑',
|
||
danger: true,
|
||
onClick: () => {
|
||
if (window.confirm('이 단계를 삭제하시겠습니까?')) {
|
||
deleteMs.mutate(ctxMenu.stageId);
|
||
if (selectedId === ctxMenu.stageId) setSelectedId(null);
|
||
}
|
||
},
|
||
},
|
||
]}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function DetailPage() {
|
||
const [taskId, setTaskId] = useState<string | null>(null);
|
||
|
||
useEffect(() => {
|
||
const unsub = onDualMonitorEvent((evt) => {
|
||
if (evt.type === 'TASK_SELECTED') setTaskId(evt.taskId);
|
||
if (evt.type === 'TASK_DESELECTED') setTaskId(null);
|
||
});
|
||
return unsub;
|
||
}, []);
|
||
|
||
const { data: task, isLoading } = useQuery({
|
||
queryKey: ['task', taskId],
|
||
queryFn: async () => {
|
||
const { data } = await apiClient.get<TaskWithRelations>(`/tasks/${taskId}`);
|
||
return data;
|
||
},
|
||
enabled: !!taskId,
|
||
staleTime: 10_000,
|
||
});
|
||
|
||
return (
|
||
<div className="flex h-screen flex-col overflow-hidden bg-[#eef2f5] text-slate-800" style={{ fontSize: '18px' }}>
|
||
{task && <DetailHeader task={task} />}
|
||
|
||
<div className="flex min-h-0 flex-1 flex-col overflow-hidden">
|
||
{isLoading ? (
|
||
<div className="flex h-full items-center justify-center text-xl text-slate-400">불러오는 중...</div>
|
||
) : !task ? (
|
||
<WaitingScreen />
|
||
) : (
|
||
<div className="h-full min-h-0 flex-1">
|
||
<DetailView task={task} />
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|