05 Todo 수정 및 삭제 화면 | ✅저자: 이유정(박사)

✅ 5. Todo 수정 및 삭제 화면 설명

1️⃣ 수정 뷰: TodoUpdateView

todo/views.py

class TodoUpdateView(LoginRequiredMixin, UpdateView):
    model = Todo
    form_class = TodoForm
    template_name = "todo/todo_form.html"
    success_url = reverse_lazy("todo:todo_list")

    def get_queryset(self):
        return Todo.objects.filter(author=self.request.user)  # 본인 소유만 수정 가능

🔍 기능 요약

• 기존 Todo 데이터를 수정할 수 있음
• form_class는 TodoForm 재사용
• get_queryset()으로 로그인 사용자의 Todo만 필터링

2️⃣ 수정 템플릿: todo_form.html

등록 화면과 같은 템플릿 재사용 (title 블록만 다름)

{% block title %}할일 수정{% endblock %}

<form method="post" class="...">
  {% csrf_token %}

  <input type="text" name="name" value="{{ form.name.value }}" ...>
  <textarea name="description">{{ form.description.value }}</textarea>
  <input type="checkbox" name="complete" {% if form.complete.value %}checked{% endif %}>
  <input type="number" name="exp" value="{{ form.exp.value|default:0 }}">

  <button type="submit">수정</button>
  <a href="{% url 'todo:todo_list' %}">취소</a>
</form>

💡 UI 특징

• 등록 화면과 동일한 Tailwind 스타일 구성
• 필드 값은 기존 값이 자동 입력됨 (form.value)
• 수정 후 목록으로 이동

3️⃣ 삭제 처리: TodoDeleteView

todo/views.py

class TodoDeleteView(LoginRequiredMixin, DeleteView):
    model = Todo
    success_url = reverse_lazy("todo:todo_list")

    def get_queryset(self):
        return Todo.objects.filter(author=self.request.user)

별도 템플릿 없이 POST 요청만 처리하는 삭제 뷰

4️⃣ 삭제 UI 및 모달 처리: todo_list.html

삭제 버튼 및 폼

<button onclick="openDeleteModal({{ todo.id }})">삭제</button>
<form id="delete-form-{{ todo.id }}" method="post" action="{% url 'todo:todo_delete' todo.id %}">
  {% csrf_token %}
</form>

삭제 모달

<div id="delete-modal" class="hidden fixed ...">
  <h2>정말 삭제하시겠습니까?</h2>
  <button onclick="confirmDelete()">삭제</button>
  <button onclick="closeDeleteModal()">취소</button>
</div>

JS 모달 제어

let currentDeleteId = null;
function openDeleteModal(id) {
  currentDeleteId = id;
  document.getElementById("delete-modal").classList.remove("hidden");
}
function closeDeleteModal() {
  document.getElementById("delete-modal").classList.add("hidden");
  currentDeleteId = null;
}
function confirmDelete() {
  if (currentDeleteId) {
    document.getElementById(`delete-form-${currentDeleteId}`).submit();
  }
}

✅ URL 연결

# todo/urls.py
path("<int:pk>/update/", TodoUpdateView.as_view(), name="todo_update"),
path("<int:pk>/delete/", TodoDeleteView.as_view(), name="todo_delete"),

✅ 전체 흐름 요약

1. 사용자가 상세 페이지에서 수정 클릭 → 수정 폼 이동
2. 수정 완료 후 TodoListView로 이동
3. 목록에서 삭제 버튼 클릭 시 삭제 모달 노출
4. 삭제 확인 시 TodoDeleteView에 POST 요청으로 삭제
5. 삭제 후 목록으로 자동 이동