feat: 댓글 삭제 구현

css/common.css

@@ -1,3 +1,12 @@
 body {
     background-color: #1b1b1b;
+}
+
+.blind {
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px 1px 1px 1px);
+    clip: rect(1px, 1px, 1px, 1px);
 }

css/review.css

@@ -1,4 +1,4 @@
-.review-wrap {
+#reviewContainer {
     --title-color0: #ffffff;
     --title-color1: #dee1e9;
     --title-color2: #84868d;
@@ -11,6 +11,8 @@
     font-size: 15px;
     gap: 16px;
     margin-bottom: 30px;
+    position: relative;
+    z-index: 0;
 }
 
 #reviews .name {
@@ -90,7 +92,7 @@
     outline: none;
 }
 
-.review-wrap {
+#reviewContainer {
     max-width: 1240px;
     margin: 0 auto;
     padding: 3%;
@@ -159,22 +161,136 @@
     flex-shrink: 0;
 }
 
-#writeReviewForm .text-input {
-    height: 38px;
-    background: none;
-    border: none;
-    color: var(--title-color1);
+#reviewList .empty-review {
+    color: var(--title-color2);
+    padding: 0 0 80px;
     font-size: 15px;
+    line-height: 1.6;
+    text-align: center;
+}
+
+.comment-util {
+    position: absolute;
+    top: 6px;
+    right: 0;
+    display: flex;
+    gap: 5px;
+    font-size: 12px;
+    z-index: 1;
+}
+
+#reviews li {
+    position: relative;
+}
+
+.comment-util li + li:before {
+    position: absolute;
+    top: 4px;
+    left: -3px;
+    content: "";
+    width: 1px;
+    height: 10px;
+    background-color: #2f2f2f;
+}
+
+.comment-util button {
+    color: inherit;
+    font-size: inherit;
+    padding: 2px 4px;
+}
+
+#reviewContainer #popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#reviewContainer #modalForm {
+    background: var(--title-color0);
+    border-radius: 12px;
+    padding: 36px 22px 30px;
+    width: 350px;
+    position: relative;
+}
+
+#reviewContainer #popup strong {
+    display: block;
+    margin-bottom: 20px;
+    font-size: 17px;
+    font-weight: 700;
+}
+
+#reviewContainer #popup .modal-button {
+    background: #000000;
+    width: 100%;
+    color: var(--title-color0);
+    height: 46px;
+    font-size: 15px;
+    border-radius: 4px;
+    margin-top: 10px;
+    display: block;
+    font-weight: 500;
+}
+
+button.close-button {
+    width: 35px;
+    height: 35px;
+    background: #eeeeee;
+    border-radius: 50%;
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    cursor: pointer;
+}
+
+button.close-button:before {
+    width: 14px;
+    height: 2px;
+    background: #555555;
+    border-radius: 2px;
+    position: absolute;
+    content: '';
+    top: 50%;
+    margin-top: -1px;
+    margin-left: -7px;
+    transform: rotate(45deg);
+}
+
+button.close-button:after {
+    width: 14px;
+    height: 2px;
+    background: #555555;
+    border-radius: 2px;
+    position: absolute;
+    content: '';
+    top: 50%;
+    margin-top: -1px;
+    margin-left: -7px;
+    transform: rotate(-45deg);
+}
+
+
+.text-input {
+    height: 45px;
+    background: none;
+    color: #000000;
     border-radius: 4px;
     padding: 10px;
     flex-grow: 2;
     outline: none;
+    width: 100%;
+    border: 1px solid var(--title-color1);
+    font-size: 15px;
 }
 
-#reviewContainer .empty-review {
-    color: var(--title-color2);
-    padding: 0 0 80px;
-    font-size: 15px;
-    line-height: 1.6;
-    text-align: center;
+.text-input:not(:placeholder-shown) {
+    font: small-caption;
+    font-size: 34px;
 }

js/review/index.js

@@ -1,9 +1,9 @@
-import reviewRatingClickHandler from './reviewForm/reviewRatingClickHandler.js';
-import reviewFormSubmitHandler from './reviewForm/reviewFormSubmitHandler.js';
+import starRatingHandler from './reviewForm/starRatingHandler.js';
+import writeReviewHandler from './reviewForm/writeReviewHandler.js';
 import renderMovieReviews from "./reviewList/renderMovieReviews.js";
-import getMovieReviews from "./reviewList/getMovieReviews.js";
+import deleteReviewHandler from "./reviewForm/deleteReviewHandler.js";
 
-const reviews = getMovieReviews();
-renderMovieReviews(reviews);
-reviewRatingClickHandler();
-reviewFormSubmitHandler();
+renderMovieReviews();
+starRatingHandler();
+writeReviewHandler();
+deleteReviewHandler();

js/review/reviewForm/deleteReviewHandler.js

@@ -0,0 +1,37 @@
+import {deleteReviewToLocalStorage} from "./utils.js";
+import {isValidPassword} from "./isValidReviewValues.js";
+import {notifyAndReload} from "../utils.js";
+import useDeleteModal from "./useDeleteModal.js";
+
+const POPUP_NAME = 'popup';
+
+const deleteReviewHandler = () => {
+  const onClick = (event) => {
+    const popup = document.getElementById(POPUP_NAME);
+    if (popup) return;
+
+    const index = parseInt(event.target.closest('.comment-util').dataset.index);
+
+    const modal = useDeleteModal({
+      name: POPUP_NAME,
+      onSubmit: () => onSubmit({passwordInput, index})
+    });
+
+    const passwordInput = modal.querySelector('.text-input[type=password]');
+
+    document.getElementById('reviewContainer').appendChild(modal);
+  };
+
+  document.querySelectorAll('.comment-util .delete-btn')
+    .forEach(btn => btn.addEventListener('click', onClick));
+};
+
+const onSubmit = ({passwordInput, index}) => {
+  const isValid = isValidPassword(passwordInput.value);
+  if (!isValid) return;
+
+  deleteReviewToLocalStorage(index);
+  notifyAndReload('삭제가 완료되었어요');
+};
+
+export default deleteReviewHandler;

js/review/reviewForm/isValidReviewValues.js

@@ -1,4 +1,6 @@
-const isValidReviewValues = ({rate, comment, password}) => {
+import {getUserInformation} from "../utils.js";
+
+export const isValidReviewValues = ({rate, comment}) => {
   if (isNaN(rate)) {
     window.alert('별을 눌러 이 영화의 별점을 매겨주세요');
     return;
@@ -12,4 +14,18 @@ const isValidReviewValues = ({rate, comment, password}) => {
   return true;
 };
 
-export default isValidReviewValues;
+export const isValidPassword = (value) => {
+  if (!value) {
+    window.alert('비밀번호를 입력해주세요');
+    return;
+  }
+
+  const {password} = getUserInformation();
+
+  if (value !== password) {
+    window.alert('비밀번호가 일치하지 않아요, 다시 한 번 확인해주세요');
+    return;
+  }
+
+  return true;
+}

js/review/reviewForm/reviewRatingClickHandler.js → js/review/reviewForm/starRatingHandler.js

@@ -1,6 +1,6 @@
 const thresholdsPercent = [10, 20, 30, 40, 50, 60, 70, 80, 90];
 
-const reviewRatingClickHandler = () => {
+const starRatingHandler = () => {
   document.querySelector('.write-rate-container .rate-box').addEventListener('click', function (e) {
     const rect = this.getBoundingClientRect();
     const x = e.clientX - rect.left;
@@ -18,4 +18,4 @@ const reviewRatingClickHandler = () => {
   });
 }
 
-export default reviewRatingClickHandler;
+export default starRatingHandler;

js/review/reviewForm/useDeleteModal.js

@@ -0,0 +1,32 @@
+const useDeleteModal = ({name, onSubmit}) => {
+  const modal = createModal(name);
+
+  modal.addEventListener('click', (event) => {
+    if (event.target.id === name || event.target.className === 'close-button') {
+      modal.parentNode.removeChild(modal);
+    }
+  });
+
+  modal.querySelector('#modalForm').addEventListener('submit',(event) => {
+    event.preventDefault();
+    onSubmit();
+  });
+
+  return modal;
+}
+
+const createModal = (id) => {
+  const modal = document.createElement('div');
+  modal.id = id;
+  modal.innerHTML = `
+    <form id="modalForm" class="delete-modal">
+        <strong>삭제하시겠어요?</strong>
+        <button class="close-button" type="button"><span class="blind">닫기</span></button>
+        <input class="text-input" type="password" placeholder="비밀번호를 입력해주세요" autocomplete="off"/>
+        <button class="modal-button" type="submit">삭제하기</button>
+    </form>
+    `;
+  return modal;
+};
+
+export default useDeleteModal;

js/review/reviewForm/addReviewToLocalStorage.js → js/review/reviewForm/utils.js

@@ -5,7 +5,7 @@ import {
   setDetailComments
 } from "../utils.js";
 
-const addReviewToLocalStorage = (values) => {
+export const addReviewToLocalStorage = (values) => {
   const movieId = getMovieIdFromURL();
   let comments = getDetailComments();
   const {index, isExistingComments} = getExistingDetailComments({comments, movieId});
@@ -17,7 +17,6 @@ const addReviewToLocalStorage = (values) => {
   }
 
   setDetailComments(comments);
-  window.alert('작성이 완료되었어요');
 };
 
 const addNewComment = ({comments, movieId, values}) => [...comments, { movieId, results: [values] }];
@@ -28,4 +27,14 @@ const addCommentToExisting = ({comments, index, values}) => {
   return updatedComments;
 };
 
-export default addReviewToLocalStorage;
+const deleteReview = ({reviews, deleteIndex}) => reviews.filter((_, i) => i !== deleteIndex);
+
+export const deleteReviewToLocalStorage = (deleteIndex) => {
+  const movieId = getMovieIdFromURL();
+  let comments = getDetailComments();
+  const {index: currentMovieIndex} = getExistingDetailComments({comments, movieId});
+
+  comments[currentMovieIndex].results = deleteReview({reviews: comments[currentMovieIndex].results, deleteIndex});
+
+  setDetailComments(comments);
+}

js/review/reviewForm/reviewFormSubmitHandler.js → js/review/reviewForm/writeReviewHandler.js

@@ -1,8 +1,8 @@
-import addReviewToLocalStorage from "./addReviewToLocalStorage.js";
-import isValidReviewValues from "./isValidReviewValues.js";
-import {getUserInformation} from "../utils.js";
+import {addReviewToLocalStorage} from "./utils.js";
+import {isValidReviewValues} from "./isValidReviewValues.js";
+import {getUserInformation, notifyAndReload} from "../utils.js";
 
-const reviewFormSubmitHandler = () => {
+const writeReviewHandler = () => {
   const form = document.querySelector('#writeReviewForm');
 
   form.addEventListener('submit', function (e) {
@@ -24,9 +24,8 @@ const reviewFormSubmitHandler = () => {
     if (!isValid) return;
 
     addReviewToLocalStorage(values);
-
-    window.location.reload();
+    notifyAndReload('작성이 완료되었어요');
   });
 };
 
-export default reviewFormSubmitHandler;
+export default writeReviewHandler;