Feat/32 drag and drop

[SangHyun01]

Feat: 노드 관계 수정 기능 구현 (복사+삭제 방식)

주요 변경 사항 (Key Changes)

1. '관계 수정' 모드 (State Machine) 도입

• useQuestionTree 훅에 modifyMode라는 새로운 상태(IDLE, SELECT_CHILD, SELECT_PARENT)를 추가하여, 앱의 현재 모드를 관리합니다.

• FocusViewHeader에 "관계 수정" / "수정 취소" 버튼을 추가했습니다.

• handleGraphNodeClick 함수가 modifyMode 상태에 따라 switch 문으로 분기하여, '노드 상세보기', '이동할 노드 선택', '새 부모 노드 선택' 등 각기 다른 동작을 수행하도록 수정했습니다.

2. 노드 이동 (Copy + Delete) 로직 구현

• 사용자가 '이동'을 실행하는 구체적인 흐름을 구현했습니다.

• 유효성 검사: 사용자가 '새 부모'를 선택할 때, (1) 자기 자신을 선택하거나 (2) 자신의 하위 노드를 선택하는 '순환 참조'를 방지하는 유효성 검사 로직을 추가했습니다.

• 사용자 확인: 유효성 검사 통과 시, shadcn/ui의 AlertDialog를 띄워 사용자에게 최종 '이동' 의사를 확인받습니다.

• API 연동: "이동" 버튼 클릭 시 confirmReparenting 함수가 다음 두 API를 순차적으로 호출하여 '이동'을 구현합니다.

• getAllIdsFromNode 헬퍼 함수로 선택한 노드와 그 하위 줄기 전체의 ID를 수집합니다.

• POST /api/questions/partial-copy: 수집된 ID 목록을 새 부모 노드 밑에 **'복사'**합니다.

• DELETE /api/questions/batch: **'원본 줄기'**의 ID 목록을 전달하여 한 번에 **'삭제'**합니다.

• refreshViewData()를 호출하여 변경된 그래프를 새로고침합니다.

3. 그래프 깜빡임 (성능) 버그 수정

• '관계 수정' 버튼을 누를 때마다(modifyMode 변경) 그래프가 깜빡이는 문제를 해결했습니다.

• 원인: modifyMode가 변경되면 handleGraphNodeClick 함수가 새로 생성되었고, 이 함수가 InteractiveD3Graph의 useEffect 의존성 배열에 포함되어 불필요한 D3 리렌더링을 유발했습니다.

• 해결: useRef(onNodeClickRef)를 사용해 onNodeClick 핸들러를 래핑하고, D3가 항상 최신의 핸들러를 참조하도록 수정했습니다. InteractiveD3Graph의 메인 useEffect 의존성 배열에서 onNodeClick을 제거하여, data가 변경될 때만 그래프가 다시 그려지도록 최적화했습니다.