[Feat] 외출플래너 - 사용자 컨트롤 및 편집 기능

[garlatonic]

📖 설명

자동 생성된 이동 정보를 사용자가 직접 편집할 수 있는 기능을 제공합니다. 이동 수단 변경, 시간 조정, 삭제 등 사용자의 통제감을 유지하면서도 편의성을 제공합니다.

목표

• 자동화 + 사용자 통제감 균형
• 직관적인 편집 UI
• 드래그 앤 드롭으로 순서 변경

---

✅ 해야 할 일

이동 블록 편집 모달

• 타임라인에서 이동 블록 클릭 시 편집 모달 열기
• 편집 모달 UI 구현
  • 출발지/도착지 표시 (읽기 전용)
  • 이동 수단 선택 (도보/대중교통/자동차)
  • 소요 시간 직접 수정 가능
  • 거리 표시
  • 예상 비용 표시 (택시/대중교통)
• 이동 수단 변경 시 자동 재계산 옵션
  • "🔄 새로운 이동 수단으로 재계산" 버튼
• 삭제 기능 (경우에 따라 이동 없이 바로 다음 장소 가능)

시간 조정 기능

• 이동 소요 시간 직접 입력 가능
• 시간 변경 시 다음 일정 시작 시간 자동 조정
• 조정된 시간이 비현실적일 경우 경고 표시
• "자동 추천 시간으로 되돌리기" 버튼

일정 순서 변경 (드래그 앤 드롭)

• 타임라인 항목 드래그 앤 드롭 라이브러리 적용
  • react-beautiful-dnd 또는 dnd-kit
• 순서 변경 시 이동 경로 자동 재계산
  • A → B → C 에서 A → C → B로 변경 시
  • A→C, C→B 이동 재계산
• 드래그 중 시각적 피드백
• 드롭 후 "경로가 변경되었습니다" 안내

이동 블록 삭제

• 이동 블록 삭제 기능
• 삭제 확인 모달 ("이동 시간 없이 바로 다음 일정으로 이동합니다")
• 삭제 후 타임라인 재정렬

수동 이동 추가 (옵션)

• 특별한 경우 사용자가 직접 이동 추가 가능
  • 예: 중간에 숙소 체크인 등
• "+ 이동 추가" 버튼 (선택적)

---

📚 참고 자료

• react-beautiful-dnd
• dnd-kit
• Notion의 블록 드래그 앤 드롭 UX

---

🎯 완료 조건

• 이동 블록 클릭 시 편집 모달이 열림
• 이동 수단을 변경할 수 있음
• 소요 시간을 직접 수정할 수 있음
• 이동 블록을 삭제할 수 있음
• 일정 순서를 드래그 앤 드롭으로 변경 시 이동 경로가 자동 재계산됨
• 자동화의 편의성 + 사용자 통제감 균형 유지