이제 과제 상세 보기가 있는지 확인하고, 없으면 생성해야 합니다. 과제 목록 클릭 시 상세 페이지로 이동하는지 확인해보겠습니다:

과제 상세 페이지가 /roadmap/[id] 경로에 있습니다. 이것을 /actions/tasks/[id]로 복사하고, 간트 차트와 관계 캔버스 기능을 추가하겠습니다:

이제 구조를 이해했습니다. 먼저 상세 페이지를 /actions/tasks/[id]로 복사하고, 라우터 경로를 수정하고, 간트 차트와 관계 캔버스를 추가하겠습니다.

이제 간트 차트 컴포넌트를 만들겠습니다:

이제 상세 페이지에 간트 차트와 관계 캔버스 탭을 추가하겠습니다:

이제 상세 페이지에 import와 탭을 추가하겠습니다:

이제 상태 변수를 추가하겠습니다:

이제 탭을 확장하여 간트 차트와 관계 캔버스 탭을 추가하겠습니다:

이제 간트 차트와 관계 캔버스 탭 콘텐츠를 추가하겠습니다. 마일스톤 탭 다음에 추가:

이제 마일스톤 탭 종료 후에 간트 차트와 관계 캔버스 탭 콘텐츠를 추가하겠습니다:

이제 기존 roadmap/[id] 페이지도 /actions/tasks/[id]로 리디렉션하도록 수정하겠습니다:

두 가지 기능을 추가했습니다:

1. 이벤트 관계 캔버스: 과제 상세 페이지에서 연결된 이벤트가 2개 이상일 때 "관계 캔버스" 탭이 나타납니다. 노드를 드래그하여 위치를 조정하고, 연결 버튼을 드래그하여 "모-자 관계"(상위→하위)와 "전-후 관계"(시간 순서) 두 가지 유형의 관계를 설정할 수 있습니다.
2. 간트 차트: 마일스톤이 있는 과제에서 "간트 차트" 탭이 나타납니다. 마일스톤별 진행 상황을 시각적으로 표시하며, 오늘 날짜 라인, 각 마일스톤의 상태(완료/진행중/대기/차단), 연결된 이벤트 수를 함께 보여줍니다.

Looking at the screenshot, I can see the event relation canvas with 4 events (HCR 1st Reactor Inl..., VDU Overhead Tem..., VDU P-301 펌프 진..., HCR Feed/Effluent...) displayed as draggable nodes with ID and status badges.

I'll add Due Date functionality to each event in the canvas and connect it to the Gantt chart:

Now let me update the EventRelationCanvas to include Due Date for each event, and create an event-based Gantt chart. First, I'll update the canvas:

Now let me add a function to update due dates:

Now let me update the node rendering to include Due Date display and edit:

Now let me update the event node UI to show Due Date:

Now let me update the GanttChart to support events with due dates:

Now I need to add an event-based row rendering section after the milestones. Let me read the current structure:

Now let me update the task detail page to pass event due dates between the canvas and the Gantt chart:

Now let me update the GanttChart call in the tab to pass eventDueDates:

이제 tasks list page에서도 동일하게 업데이트하겠습니다:

두 가지 기능을 완료했습니다:

1. 이벤트 관계 캔버스에 Due Date 추가: 각 이벤트 노드에 달력 아이콘과 날짜 입력 필드가 추가되어 직접 Due Date를 설정할 수 있습니다. 설정된 날짜가 오늘보다 이전이면 "(지남)" 표시가 나타납니다.
2. 간트 차트에 이벤트 Due Date 연동: 간트 차트가 마일스톤뿐만 아니라 연결된 이벤트의 Due Date도 표시합니다. 이벤트별로 진행 바가 표시되며, 완료/지연/진행중 상태에 따라 색상이 달라집니다 (완료=녹색, 지연=빨간색, 진행중=파란색). Due Date가 미설정된 이벤트는 "Due Date 미설정" 메시지가 표시됩니다.