[Spring project] Spring Boot Todo 리스트 관리: 삭제 기능 구현 및 Task 입력 기능

이번 포스팅에서는 Todo 리스트 관리 애플리케이션에서 Task 삭제 기능과 Task 입력 기능을 구현한 과정을 정리하려고 한다. 이를 통해 Spring Boot와 Thymeleaf, MySQL을 연동하여 CRUD 기능을 어떻게 처리했는지 자세히 설명하겠다.

삭제 기능 구현

---

1. Task 삭제 기능 구현

Todo 리스트에서 특정 Task를 삭제하는 기능을 먼저 구현했다. Task 엔티티는 taskNo와 totoNo로 복합 키를 구성하고 있어, 이를 고려한 코드를 작성해야 했다.

1.1 TaskController - 삭제 기능 추가

삭제 요청을 처리하기 위해 컨트롤러에 DELETE 요청을 매핑하여 처리하는 메서드를 추가했다.

 

// TaskController.java
@GetMapping("/totos/{totoNo}/tasks/delete/{taskNo}")
public String deleteTask(@PathVariable int totoNo, @PathVariable int taskNo, RedirectAttributes redirectAttributes) {
    taskService.deleteTask(totoNo, taskNo);
    redirectAttributes.addFlashAttribute("message", "Task 삭제가 완료되었습니다.");
    return "redirect:/totos/" + totoNo + "/tasks";  // 리스트로 리다이렉트
}

 

1.3 TaskRepository 설정

Task는 복합키를 사용하므로, TaskId 클래스를 사용해 JpaRepository를 설정했다.

// TaskService.java
public void deleteTask(int totoNo, int taskNo) {
    TaskId taskId = new TaskId(taskNo, totoNo);
    taskRepository.deleteById(taskId);
}

 

1.3 TaskRepository 설정

Task는 복합키를 사용하므로, TaskId 클래스를 사용해 JpaRepository를 설정했다.

 

// TaskRepository.java
public interface TaskRepository extends JpaRepository<Task, TaskId> {
}

이렇게 삭제 기능을 구현한 후, 사용자가 특정 Task를 클릭하여 삭제할 수 있도록 만들었다.

 

2. Task 입력 기능 구현

Task 삭제 기능을 완료한 후, 새로운 Task를 추가할 수 있는 입력 기능을 구현했다. 입력 화면을 구성하고, 사용자가 데이터를 입력해 서버로 전송해 저장할 수 있도록 작업했다.

2.1 Task 입력 화면 표시 - TaskController

입력 폼을 표시하기 위해 GET 요청을 처리하는 메서드를 추가했다. 이 메서드는 빈 Task 객체를 생성해 화면에 전달한다.

// TaskController.java
@GetMapping("/totos/{totoNo}/tasks/new")
public String showTaskForm(@PathVariable int totoNo, Model model) {
    model.addAttribute("task", new Task());
    model.addAttribute("totoNo", totoNo);  // 현재의 todoNo도 함께 전달
    return "task/inputForm";  // 입력 폼을 렌더링
}

2.2 입력 폼 구성 (Thymeleaf)

입력 폼에서는 Task의 이름과 상태를 입력할 수 있도록 구성했다. 아래는 Task 입력 폼에 해당하는 Thymeleaf 코드다.

 

<form action="#" th:action="@{/totos/{totoNo}/tasks/save(totoNo=${totoNo})}" method="post" th:object="${task}">
    <input type="text" th:field="*{taskNm}" placeholder="Task 이름 입력">
    <select th:field="*{status}">
        <option value="Y">완료</option>
        <option value="N">미완료</option>
    </select>
    <button type="submit">저장</button>
</form>

 

2.3 Task 저장 로직 - TaskController

Task 저장은 POST 요청을 통해 처리되며, 해당 Task를 저장한 후 다시 Task 목록 페이지로 리다이렉트되도록 구현했다.

 

@PostMapping("/totos/{totoNo}/tasks/save")
public String saveTask(@PathVariable int totoNo, @ModelAttribute Task task, RedirectAttributes redirectAttributes) {
    taskService.saveTask(totoNo, task);
    redirectAttributes.addFlashAttribute("message", "Task 저장이 완료되었습니다.");
    return "redirect:/totos/" + totoNo + "/tasks";
}

 

2.4 TaskService - 저장 로직 구현

Task를 저장하는 로직에서는 totoNo와 연관된 Todo 엔티티를 조회한 후, 이를 Task에 설정해 저장했다.

 

public void saveTask(int totoNo, Task task) {
    Toto toto = totoRepository.findById(totoNo)
                   .orElseThrow(() -> new IllegalArgumentException("잘못된 todo 번호: " + totoNo));
    task.setToto(toto);
    taskRepository.save(task);
}

 

 

화면

---

 

 

결론

---

 

이번 포스팅에서는 삭제 기능과 Task 입력 기능을 구현하며, 사용자가 Todo 리스트에서 Task를 삭제하거나 새로운 Task를 추가할 수 있도록 기능을 확장했다. Task를 저장하고 삭제하는 과정을 통해 복합키를 어떻게 처리하는지 배울 수 있었고, JavaScript로 서버와 비동기 통신을 하는 방식도 확인했다.

다음에는 Task 수정 기능과 Task 상태 변경 기능을 구현해볼 계획이다.