fix: sync work content with selected milestone stage

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/pages/DetailPage.tsx

@@ -243,9 +243,10 @@ function DetailView({ task }: { task: TaskWithRelations }) {
   const selected = sortedStages.find((m) => m.id === selectedId) ?? sortedStages[0] ?? null;
 
   const stageContents = useMemo(() => {
-    if (!selected?.description) return [];
+    const stage = sortedStages.find((m) => m.id === selectedId);
-    return parseContentLines(selected.description);
+    if (!stage?.description) return [];
-  }, [selected]);
+    return parseContentLines(stage.description);
+  }, [sortedStages, selectedId]);
 
   const stageDetails = useMemo(
     () => (selectedId ? details.filter((d) => d.milestoneId === selectedId) : []),
@@ -314,6 +315,7 @@ function DetailView({ task }: { task: TaskWithRelations }) {
           payload,
         );
         milestoneId = updated.id;
+        setSelectedId(updated.id);
       } else {
         return;
       }
@@ -432,6 +434,7 @@ function DetailView({ task }: { task: TaskWithRelations }) {
                   onClick={() => setSelectedId(stage.id)}
                   onContextMenu={(e) => {
                     e.preventDefault();
+                    setSelectedId(stage.id);
                     setCtxMenu({ x: e.clientX, y: e.clientY, stageId: stage.id });
                   }}
                   className={`shrink-0 rounded-lg border px-3 py-2 text-left transition-colors ${
@@ -462,7 +465,7 @@ function DetailView({ task }: { task: TaskWithRelations }) {
         </LeftSection>
 
         <LeftSection>
-          <PanelLabel>업무내용</PanelLabel>
+          <PanelLabel sub={selected?.title}>업무내용</PanelLabel>
           <ul
             className="min-h-0 flex-1 space-y-2 overflow-y-auto pr-1"
             onContextMenu={(e) => {
@@ -476,9 +479,9 @@ function DetailView({ task }: { task: TaskWithRelations }) {
                 {selected ? '우클릭으로 업무내용을 수정하세요.' : '단계를 선택하세요.'}
               </li>
             ) : (
-              stageContents.map((text) => (
+              stageContents.map((text, index) => (
                 <li
-                  key={text}
+                  key={`${selectedId}-${index}`}
                   className="flex gap-2"
                   onContextMenu={(e) => {
                     if (!selected) return;
@@ -488,7 +491,7 @@ function DetailView({ task }: { task: TaskWithRelations }) {
                   }}
                 >
                   <span className="shrink-0 text-lg text-blue-400">•</span>
-                  <p className="min-w-0 flex-1 truncate text-2xl font-black leading-snug text-slate-800">{text}</p>
+                  <p className="min-w-0 flex-1 whitespace-pre-wrap break-words text-2xl font-black leading-snug text-slate-800">{text}</p>
                 </li>
               ))
             )}
@@ -634,7 +637,10 @@ function DetailView({ task }: { task: TaskWithRelations }) {
               icon: '✏️',
               onClick: () => {
                 const ms = milestones.find((m) => m.id === ctxMenu.stageId);
-                if (ms) setStageModal({ mode: 'edit', milestone: ms });
+                if (ms) {
+                  setSelectedId(ms.id);
+                  setStageModal({ mode: 'edit', milestone: ms });
+                }
               },
             },
             {