From ea216501368aa4e9a0f317a861826b567a58aafb Mon Sep 17 00:00:00 2001 From: gykwak03 <110815273+gykwak03@users.noreply.github.com> Date: Sat, 3 Feb 2024 16:26:04 +0900 Subject: [PATCH 1/2] =?UTF-8?q?{=EB=A1=9C=EC=BB=AC=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=EC=A7=80=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20=EA=B5=AC=ED=98=84}?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.js | 44 ++++++++++++++++++++++++++++++++++++++++---- src/styles/index.css | 2 +- src/test.js | 32 ++++++++++++++++++++++++++++++++ 3 files changed, 73 insertions(+), 5 deletions(-) create mode 100644 src/test.js diff --git a/src/index.js b/src/index.js index 98f8761..126cc80 100644 --- a/src/index.js +++ b/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,7 +230,6 @@ class App { const closeButton = this.createElement("button", "X"); closeButton.classList.add("X"); - closeButton.addEventListener("click", () => commentSection.remove()); commentSection.appendChild(titleElement); commentSection.appendChild(descriptionElement); @@ -237,17 +237,53 @@ class App { 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); + }); + } + } + submitComment(commentText, commentSection2) { this.countPeople++; const commentContent = `익명 ${this.countPeople}: ${commentText}`; const commentElement = this.createElement("p", commentContent); commentSection2.appendChild(commentElement); + + const storedComments = JSON.parse(localStorage.getItem("comments")) || []; + // 새 댓글을 배열에 추가 + 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"); + // 여기에서 commentSection2 등에 대한 추가적인 처리를 수행할 수 있습니다. + // 예: commentSection2.innerHTML = ""; // 모든 댓글 섹션을 비움 + }); + } + + closeComment(commentSection, closeButton) { + closeButton.addEventListener("click", () => { + if (commentSection.parentNode) { + commentSection.parentNode.removeChild(commentSection); + } + }); } } diff --git a/src/styles/index.css b/src/styles/index.css index 1b5934d..e159a28 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -169,7 +169,7 @@ background: #CECECE; height: auto; left: 508px; top: 226px; - background: #FFFFFF; + background: #693737; border-radius: 20px; padding: 20px; box-sizing: border-box; diff --git a/src/test.js b/src/test.js new file mode 100644 index 0000000..a67028d --- /dev/null +++ b/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 (이전 값 유지) From 4cddf638c2c6a51855a032bb7522a86569799d07 Mon Sep 17 00:00:00 2001 From: gykwak03 <110815273+gykwak03@users.noreply.github.com> Date: Sun, 4 Feb 2024 04:32:11 +0900 Subject: [PATCH 2/2] =?UTF-8?q?{=EB=8C=93=EA=B8=80=20=EC=82=AD=EC=A0=9C=20?= =?UTF-8?q?=EB=B0=8F=20=EC=A0=84=EC=B2=B4=EC=82=AD=EC=A0=9C=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84}?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 4 ++-- src/index.js | 28 +++++++++++++++++++++++++--- src/styles/index.css | 9 ++++++--- 3 files changed, 33 insertions(+), 8 deletions(-) diff --git a/.env b/.env index 163f30b..b3d65c4 100644 --- a/.env +++ b/.env @@ -4,7 +4,7 @@ #API_KEY= #khu -#API_KEY="edcb42a7f18448528e7ecf60217720ed" +API_KEY="edcb42a7f18448528e7ecf60217720ed" #google -API_KEY="d5157c6ecf344d26a9456f096ea2bb26" \ No newline at end of file +#API_KEY="d5157c6ecf344d26a9456f096ea2bb26" \ No newline at end of file diff --git a/src/index.js b/src/index.js index 126cc80..63739a8 100644 --- a/src/index.js +++ b/src/index.js @@ -250,17 +250,35 @@ class App { 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 storedComments = JSON.parse(localStorage.getItem("comments")) || []; + const deleteButton = this.createElement("button", "삭제"); + commentSection2.appendChild(deleteButton); + deleteButton.addEventListener("click", () => { + this.deleteComment(commentElement, deleteButton); + }); + // 새 댓글을 배열에 추가 storedComments.push(commentContent); // 배열을 다시 로컬 스토리지에 저장 @@ -273,8 +291,12 @@ class App { resetButton.addEventListener("click", () => { localStorage.removeItem("comments"); - // 여기에서 commentSection2 등에 대한 추가적인 처리를 수행할 수 있습니다. - // 예: commentSection2.innerHTML = ""; // 모든 댓글 섹션을 비움 + + // "p" 태그를 모두 찾아서 제거 + const commentElements = commentSection2.getElementsByTagName("p"); + Array.from(commentElements).forEach((commentElement) => { + commentElement.remove(); + }); }); } diff --git a/src/styles/index.css b/src/styles/index.css index e159a28..20f5090 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -167,14 +167,17 @@ background: #CECECE; position: absolute; width: 400px; height: auto; - left: 508px; - top: 226px; - background: #693737; + left: 150px; /* 수정된 값 */ + top: 250px; /* 수정된 값 */ + background: #FFFFFF; border-radius: 20px; padding: 20px; box-sizing: border-box; + border-width: 100px; + border-color: #000000; } + .comment2{ /* Rectangle 45 */