Spring Boot To do List 비동기_07 수정 팝업 레이어

1. 제목 클릭(상세 조회) 후 수정 버튼 누르면 수정 화면에서 해야할 일

main.html

    <div id="updateLayer" class="popup-hidden">
        <div class="popup-row">
          제목 : <input type="text" id="updateTitle">
        </div>

        <div class="popup-row">
            <textarea id="updateContent" cols="50" rows="5"></textarea>
        </div>

        <div class="btn-container">
            <button id="updateBtn">수정</button>     
            <button id="updateCancel">취소</button>     
        </div>
    </div>

1-1. 수정 팝업 레이어에 있는 요소 가져오기

const updateLayer = document.querySelector("#updateLayer");
const updateTitle = document.querySelector("#updateTitle");
const updateContent = document.querySelector("#updateContent");
const updateBtn = document.querySelector("#updateBtn");
const updateCancel = document.querySelector("#updateCancel");

1-2. 상세 조회에서 수정 버튼 (#updateView) 클릭 시 일어날 일 작성

updateView.addEventListener("click", () => {

    // 기존 팝업 레이어는 숨기고
    popupLayer.classList.add("popup-hidden");

    // 수정 팝업 레이어는 보이게
    updateLayer.classList.remove("popup-hidden");

    // 수정 팝업 레이어를 누르고 상세조회 누르면 두개 다 뜸
    // selectTodo() 에서 update Layer 숨기기 추가

selectTodo()

updateLayer.classList.add("popup-hidden");

다시 updateView 에서
수정 레이어 보일 때
팝업 레이어에 작성된 제목, 내용을 얻어와 수정 레이어에 세팅

    updateTitle.value = popupTodoTitle.innerText;
    updateContent.value = popupTodoContent.innerHTML.replaceAll("<br>", "\n");

.replaceAll()

html 화면에서는 줄바꿈이 <br>로 인식됨 (popupTodoContent.innerHTML로 가져온 값)
updateContent 는 textarea 줄 바꿈이 \n 이라서 popupTodoContent 에서 가져온 <br>을 줄바꿈으로 인식하지 못해서 <br> 을 \n 로 바꿔주는 함수 작성

setAttribute()

js 에서 가져온 태그에 속성 추가해주는 메서드

내용 수정 후 수정 버튼 누르면 값 넘어가는데 수정 레이어에 있는 수정 버튼에 data-todo-no 속성 추가해서 어떤 걸 수정했는지 알려줌 값 세팅

data-* 속성

• 데이터에 대한 확장성을 고려하여 설계된 속성
• js 에서 요소.dataset 을 이용해 해당 값을 얻어갈 수 있는 속성

    updateBtn.setAttribute("data-todo-no", popupTodoNo.innerText);
});

2. 수정 팝업 레이어 안에 있는 수정 버튼 클릭 시 메서드 추가

updateBtn.addEventListener("click", e => {

    // 서버로 전달해야되는 값을 객체로 묶어주기
    const obj = {
        "todoNo" : e.target.dataset.todoNo,
        "todoTitle" : updateTitle.value,
        "todoContent" : updateContent.value
    };
  
    // 비동기 요청
    fetch("/ajax/update", {
        method : "PUT",
        headers : {"Content-Type" : "application/json"},
        body : JSON.stringify(obj)
    })  

3. js 에서 넘긴 값 java 에서 받아서 service 요청 후 sql 수행, 다시 돌아와서 값 그대로 돌려줌

	@ResponseBody
	@PutMapping("update")
	public int todoUpdate(@RequestBody Todo todo) {
		return service.todoUpdate(todo);
	}

4. java 에서 넘어온 값 js 에서 가공

    .then(resp => resp.text())
    .then(result => {

        if(result > 0) {
            alert("수정 성공");

            // 수정 레이어 숨기기
            updateLayer.classList.add("popup-hidden");

업데이트에 성공해서 수정 팝업 레이어 안에 값은 바뀌는데 메인 페이지에서의 값은 바뀌지 않음
같이 값 바꿔줘야함
수정 성공 후에 alert 창 뜨고 상세 조회 페이지 보이게 설정
기존 상세 조회에 title, content 바꿔주기
(함수 호출하는 것보다 부하 줄이기 위해 안에 값만 바꿔주는 거)

            // 목록 다시 조회
            selectTodoList();

            popupTodoTitle.innerText = updateTitle.value;

            popupTodoContent.innerHTML = updateContent.value.replaceAll("\n", "<br>");

            popupLayer.classList.remove("popup-hidden");

            // 아까 추가해둔 속성도 제거해줘야함
            updateBtn.removeAttribute("data-todo-no");
        } else {
            alert("수정 실패");
        }
    })

수정 팝업 레이어에서 삭제 버튼 클릭시 얻어온 버튼에 이벤트 리스너 추가해서 수정 팝업 레이어 숨기고 상세조회 창만 보이게하기

// 수정 레이어에서 취소 버튼 (#updateCancel)이 클릭 되었을 때
updateCancel.addEventListener("click", () => {

    // 수정 팝업 레이어 숨기기
    updateLayer.classList.add("popup-hidden");
  
    // 팝업 레이어 보이기
    popupLayer.classList.remove("popup-hidden");
});