[Java Script] Java Script만 사용하여 영화 검색 사이트 제작하기 [3]

1) 영화 overview 일정 글자 넘길 시 ...(더보기)로구현
2) localStorage 활용하여 작성자, 리뷰, 확인비밀번호 저장하기
3) 리뷰 작성 후 수정 / 삭제 기능 구현

사용자가 리뷰를 작성 후 작성한 리뷰를 수정 혹은 삭제하고 싶은 경우를 위해 이 기능도 구현하기로 하였다.

우리가 보통 수정 버튼을 누르면 바로 수정이 가능하기도 하지만, 우리 팀 같은 경우 수정 혹은 삭제 버튼을 누를 시 본인이 작성한 리뷰가 맞는지 리뷰 등록 시 작성하였던 비밀번호를 통하여 Validation Check까지 진행하며 기능을 구현하도록 만들어 봤다..!

<script>
      const editButton = document.createElement("button");
      editButton.className = "editButton";
      editButton.textContent = "수정";
      editButton.addEventListener("click", () => editReview(index));

      comment.appendChild(editButton);

      const deleteButton = document.createElement("button");
      deleteButton.className = "deleteButton";
      deleteButton.textContent = "삭제";
      deleteButton.addEventListener("click", () => deleteReview(index));
      comment.appendChild(deleteButton);

      reviewBox.appendChild(comment);
    });
  }
}
</script>

위 코드로 만들어진 수정 및 삭제 버튼을 클릭 시 우리는 사용자가 등록한 비밀번호를 다시 한번 띄워야 하니

<script>
    const reviewPassword = reviewData[index].password;
    const inputPassword = prompt("비밀번호를 입력하세요:");
        if (inputPassword === reviewPassword) {
 
 	// 수정할 리뷰를 편집할 수 있는 입력 필드로 교체
      const reviewBox = document.querySelector(".review-box");
      const comment = reviewBox.children[index];
	
      const reviewText = comment.querySelector(".review").textContent;
      comment.querySelector(".review").innerHTML = `
        <input class="edit-review-input" type="text" value="${reviewText}" />
        <button class="save-edit-button">저장</button>
      `;

      const saveButton = comment.querySelector(".save-edit-button");
      saveButton.addEventListener("click", () => saveEditedReview(index));
    } else {
      alert("비밀번호가 일치하지 않습니다.");
    }
  }
}
</script>

비밀번호를 입력해주고 사용자가 등록한 비밀번호가 일치하다면 리뷰를 수정할 수 있게 만들어주고, 입력한 비밀번호와 리뷰 등록 시 작성하였던 비밀번호가 일치 하지 않을 경우 Alert을 띄우며 수정이 불가능 하도록 만들었다.

리뷰 삭제 같은 경우도 비밀번호가 일치하여야만 삭제하도록 구현하였으며, 수정과 똑같이 등록한 비밀번호가 틀릴 시 Alert이 노출되도록 구현하였다.

<script>
function deleteReview(index) {
  const movieTitle = document.querySelector(".moduleTitle").textContent;
  const reviews = localStorage.getItem(movieTitle);
  if (reviews) {
    const reviewData = JSON.parse(reviews);

    // 비밀번호 확인
    const reviewPassword = reviewData[index].password;
    const inputPassword = prompt("비밀번호를 입력하세요:");

    if (inputPassword === reviewPassword) {
      // 비밀번호가 일치하면 리뷰 삭제
      reviewData.splice(index, 1);
      localStorage.setItem(movieTitle, JSON.stringify(reviewData));
      updateReviewList();
    } else {
      alert("비밀번호가 일치하지 않습니다. 삭제할 수 없습니다.");
    }
  }
}
</script>

이렇게 내가 하기로하였던 상세페이지 기능 구현들을 전부 작성해봤다ㅠㅠㅠㅠㅠㅠㅠ

이번 팀 과제는 순수 Java script만 사용하여 웹 서비스를 만들어야하기때문에 어느때보다 질문을 많이한거같다.. 구글링또한..

중간 중간 내가 작성한 코드들이 기능을 제대로 구현하지 못할때 이게 왜 기능 실행이 안되고있고, 필요없는 코드를 작성했거나... 이번 팀과제는 진짜 너무 힘들었다 ㅜㅜㅜㅜ