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

.env

@@ -4,7 +4,7 @@
 #API_KEY=
 
 #khu 
-#API_KEY="edcb42a7f18448528e7ecf60217720ed"
+API_KEY="edcb42a7f18448528e7ecf60217720ed"
 
 #google
-API_KEY="d5157c6ecf344d26a9456f096ea2bb26"
+#API_KEY="d5157c6ecf344d26a9456f096ea2bb26"

src/index.js

@@ -186,13 +186,14 @@ class App {
           }
         });
       });
-      this.createCommentSection(sectionElements);
     }
+    this.createCommentSection(sectionElements);
   }
 
   createCommentSection(sectionElements) {
     sectionElements.forEach((section) => {
       section.addEventListener("click", () => {
+        console.log(section);
         const commentSection = this.createElement("section");
         commentSection.classList.add("comment");
 
@@ -229,25 +230,82 @@ class App {
 
         const closeButton = this.createElement("button", "X");
         closeButton.classList.add("X");
-        closeButton.addEventListener("click", () => commentSection.remove());
 
         commentSection.appendChild(titleElement);
         commentSection.appendChild(descriptionElement);
         commentSection.appendChild(commentSection2);
         commentSection.appendChild(closeButton);
 
         this.appElement.appendChild(commentSection);
-
-        console.log(section);
+        this.closeComment(commentSection, closeButton);
+        this.loadExistingComments(commentSection2);
+        // this.resetLocalStorage(commentSection2);
       });
     });
   }
 
+  loadExistingComments(commentSection2) {
+    const storedComments = JSON.parse(localStorage.getItem("comments"));
+    if (storedComments && storedComments.length > 0) {
+      storedComments.forEach((commentText) => {
+        const commentElement = this.createElement("p", commentText);
+        commentSection2.appendChild(commentElement);
+
+        const deleteButton = this.createElement("button", "삭제");
+        commentSection2.appendChild(deleteButton);
+        deleteButton.addEventListener("click", () => {
+          this.deleteComment(commentElement, deleteButton);
+        });
+      });
+    }
+  }
+
+  deleteComment(commentElement, deleteButton) {
+    commentElement.remove();
+    deleteButton.remove();
+  }
+
   submitComment(commentText, commentSection2) {
+    const storedComments = JSON.parse(localStorage.getItem("comments")) || [];
+    this.countPeople = storedComments.length;
     this.countPeople++;
     const commentContent = `익명 ${this.countPeople}: ${commentText}`;
     const commentElement = this.createElement("p", commentContent);
     commentSection2.appendChild(commentElement);
+
+    const deleteButton = this.createElement("button", "삭제");
+    commentSection2.appendChild(deleteButton);
+    deleteButton.addEventListener("click", () => {
+      this.deleteComment(commentElement, deleteButton);
+    });
+
+    // 새 댓글을 배열에 추가
+    storedComments.push(commentContent);
+    // 배열을 다시 로컬 스토리지에 저장
+    localStorage.setItem("comments", JSON.stringify(storedComments));
+  }
+
+  resetLocalStorage(commentSection2) {
+    const resetButton = this.createElement("button", "전체댓글삭제");
+    commentSection2.appendChild(resetButton);
+
+    resetButton.addEventListener("click", () => {
+      localStorage.removeItem("comments");
+
+      // "p" 태그를 모두 찾아서 제거
+      const commentElements = commentSection2.getElementsByTagName("p");
+      Array.from(commentElements).forEach((commentElement) => {
+        commentElement.remove();
+      });
+    });
+  }
+
+  closeComment(commentSection, closeButton) {
+    closeButton.addEventListener("click", () => {
+      if (commentSection.parentNode) {
+        commentSection.parentNode.removeChild(commentSection);
+      }
+    });
   }
 }
 

src/styles/index.css

@@ -167,14 +167,17 @@ background: #CECECE;
   position: absolute;
   width: 400px;
   height: auto;
-  left: 508px;
-  top: 226px;
+  left: 150px; /* 수정된 값 */
+  top: 250px; /* 수정된 값 */
   background: #FFFFFF;
   border-radius: 20px;
   padding: 20px;
   box-sizing: border-box;
+  border-width: 100px;
+  border-color: #000000;
 }
 
+
 .comment2{
   /* Rectangle 45 */
 

src/test.js

@@ -0,0 +1,32 @@
+class BankAccount {
+  constructor() {
+    // 밑줄로 시작하는 네이밍 컨벤션을 통해 private 속성임을 나타냄
+    this._balance = 0;
+  }
+
+  // setter 메서드를 통해 _balance 속성에 접근
+  set balance(newBalance) {
+    if (newBalance >= 0) {
+      this._balance = newBalance;
+    } else {
+      console.log("잘못된 금액입니다.");
+    }
+  }
+
+  // getter 메서드를 통해 _balance 속성을 읽음
+  get balance() {
+    return this._balance;
+  }
+}
+
+const account = new BankAccount();
+
+// setter를 통한 값 변경
+account.balance = 1000;
+
+// getter를 통한 값 읽기
+console.log(account.balance); // 1000
+
+// 잘못된 값으로 setter 호출
+account.balance = -500; // "잘못된 금액입니다." 출력
+console.log(account.balance); // 1000 (이전 값 유지)