[뉴스 뷰어 페이지 2단계] 이수진 미션 제출합니다.

index.html

@@ -16,7 +16,8 @@ <h1>LINKHU<span>-NEWS</span></h1>
     </div>
     <div id="modal" class="modal">
       <div class="modal-content">
-        <span class="close-modal">&times;</span>
+        <div class="close-modal">&times;</div>
+        <div id="modal-header" class="modal-header"></div>
         <h2>의견 남기기</h2>
         <div class="model-section">
           <form id="opinion-form">
@@ -29,7 +30,7 @@ <h2>의견 남기기</h2>
             <div>
               <label for="opinion-content">내용</label>
               <div>
-                <textarea id="opinion-content" name="opinion-content" rows="4%" cols="45%" required></textarea>
+                <textarea id="opinion-content" name="opinion-content" rows="20%" cols="45%" required></textarea>
               </div>
             </div>
             <button type="button" id="save-opinion">저장</button>

src/index.js

@@ -68,61 +68,92 @@ class App {
     const modal = document.getElementById("modal");
     const closeModal = document.querySelector(".close-modal");
     const opinionForm = document.getElementById("opinion-form");
-    const opinionTitleInput = document.getElementById("opinion-title");
-    const opinionContentTextArea = document.getElementById("opinion-content");
+    const opinionTitle = document.getElementById("opinion-title");
+    const opinionContent = document.getElementById("opinion-content");
 
     modal.style.display = "block";
 
-    const storedOpinion = localStorage.getItem(articleTitle);
-    if (storedOpinion) {
-      const parseOpinion = JSON.parse(storedOpinion);
-
-      opinionTitleInput.value = parseOpinion.title || "";
-      opinionContentTextArea.value = parseOpinion.content || "";
-    } else {
-      opinionTitleInput.value = "";
-      opinionContentTextArea.value = "";
-    }
     closeModal.addEventListener("click", () => {
       modal.style.display = "none";
     });
 
-    const saveOpinionButton = document.getElementById("save-opinion");
-    saveOpinionButton.addEventListener("click", () => {
-      const opinion = { title: opinionTitleInput.value, content: opinionContentTextArea.value };
-
-      localStorage.setItem(articleTitle, JSON.stringify(opinion));
-      modal.style.display = "none";
-
-    });
-
     window.addEventListener("click", (event) => {
       if (event.target === modal) {
         modal.style.display = "none";
       }
     });
+
+    const storedOpinion = localStorage.getItem(articleTitle);
+
+    if (storedOpinion) {
+      const parseOpinion = JSON.parse(storedOpinion);
 
-    const editOpinionButton = document.getElementById("edit-opinion");
-    if (editOpinionButton) {
-      editOpinionButton.remove();
-    }
+      const SavedOpinion = document.getElementById("modal-header");
+      SavedOpinion.innerHTML = `
+      <h3>${parseOpinion.title}</h3>
+      <p>${parseOpinion.content}</p>
+      `;
+
+      opinionTitle.value = parseOpinion.title;
+      opinionContent.value = parseOpinion.content;
+
+      const saveButton = document.getElementById("save-opinion");
+      let editButton = document.getElementById("edit-opinion");
+      let deleteButton = document.getElementById("delete-opinion");
 
-    const editButton = document.createElement("button");
-    editButton.textContent = "수정하기";
-    editButton.id = "edit-opinion";
+      if(saveButton) {
+        saveButton.remove();
+      }
 
-    editButton.addEventListener("click", () => {
-      editButton.remove();
+      if (!editButton) {
+        editButton = document.createElement("button");
+        editButton.textContent = "edit";
+        editButton.id = "edit-opinion";
+
+        editButton.addEventListener("click", () => {
+          const opinion = { title: opinionTitle.value, content: opinionContent.value };
+          localStorage.setItem(articleTitle, JSON.stringify(opinion));
+          modal.style.display = "none";
+        });
+
+        opinionForm.appendChild(editButton);
+      }
+
+      if (!deleteButton) {
+        deleteButton = document.createElement("button");
+        deleteButton.textContent = "delete";
+        deleteButton.id = "delete-opinion";
+
+        deleteButton.addEventListener("click", () => {
+          localStorage.removeItem(articleTitle);
+          modal.style.display = "none";
+        });
+
+        opinionForm.appendChild(deleteButton);
+      }
+    } else {
+      opinionTitle.value = "";
+      opinionContent.value = "";
 
-      opinionTitleInput.disabled = false;
-      opinionContentTextArea.disabled = false;
+      const saveButton = document.getElementById("save-opinion");
+      const editButton = document.getElementById("edit-opinion");
+      const deleteButton = document.getElementById("delete-opinion");
 
-      saveOpinionButton.textContent = "수정 완료";
-    });
+      saveButton.textContent = "save";
+      saveButton.addEventListener("click", () => {
+        const opinion = { title: opinionTitle.value, content: opinionContent.value };
+        localStorage.setItem(articleTitle, JSON.stringify(opinion));
+        modal.style.display = "none";
+      });
 
-    saveOpinionButton.textContent = "저장";
+      if (editButton) {
+        editButton.remove();
+      }
 
-    opinionForm.appendChild(editButton);
+      if (deleteButton) {
+        deleteButton.remove();
+      }
+    }
   }
 }
 

src/styles/index.css

@@ -153,11 +153,11 @@ section {
   background-color: #005fcc;
   color:#ffffff;
   border: none;
-  border-radius: 15px;
+  border-radius: 12px;
   padding: 10px;
   min-height:10px; 
   min-width: 60px;
-  width: 40%;
+  width: 100%;
 }
 
 #save-opinion:hover {
@@ -168,17 +168,32 @@ section {
   background-color: #005fcc;
   color:#ffffff;
   border: none;
-  border-radius: 15px;
+  border-radius: 12px;
   padding: 10px;
   min-height:10px; 
   min-width: 60px;
-  width: 40%;
+  width: 50%;
 }
 
 #edit-opinion:hover {
   background-color:#002ead;
 }
 
+#delete-opinion {
+  background-color: #b30000;
+  color:#ffffff;
+  border: none;
+  border-radius: 12px;
+  padding: 10px;
+  min-height:10px; 
+  min-width: 60px;
+  width: 50%;
+}
+
+#delete-opinion:hover {
+  background-color:#8a0000;
+}
+
 #opinion-title {
   margin-bottom: 30px;
 }