From ae41338adeff0c35c3764ef75733ec3353d7b060 Mon Sep 17 00:00:00 2001
From: Yohan Park <88149844+yohan9569@users.noreply.github.com>
Date: Tue, 10 Dec 2024 18:58:09 +0900
Subject: [PATCH 1/3] =?UTF-8?q?FEAT:=20=EB=B2=84=ED=8A=BC=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=20=EC=9D=B4=EB=B2=A4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 simple.html |  6 +++---
 simple.js   | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 simple.js

diff --git a/simple.html b/simple.html
index 2887e44..03fde04 100644
--- a/simple.html
+++ b/simple.html
@@ -9,8 +9,8 @@
     <section id="container">
       <h1 class="title">TODO</h1>
       <div class="input-container">
-        <input type="text" class="todo-input" />
-        <input type="button" value="저장" />
+        <input type="text" id="item" class="todo-input" />
+        <input type="button" id="submit-btn" value="저장" />
       </div>
       <div class="list-container">
         <ul id="todo-list" class="todo-list">
@@ -19,6 +19,6 @@ <h1 class="title">TODO</h1>
         </ul>
       </div>
     </section>
-    <script></script>
+    <script src="/simple.js"></script>
   </body>
 </html>
diff --git a/simple.js b/simple.js
new file mode 100644
index 0000000..b6a237b
--- /dev/null
+++ b/simple.js
@@ -0,0 +1,17 @@
+const list = document.getElementById('todo-list');
+const submitBtn = document.getElementById('submit-btn');
+submitBtn.addEventListener('click', appendList);
+
+function appendList() {
+    const item = document.getElementById('item');
+    if (confirm(item.value + ' 저장하시겠습니까?') != true) {
+        item.value = null;
+        return;
+    }
+    
+    const node = document.createElement('li');
+    const textnode = document.createTextNode(item.value);
+    node.appendChild(textnode);
+    list.appendChild(node);
+    item.value = null;
+}
\ No newline at end of file

From 4d9421ec6a062b82c76f1c75de024e3725e22fd7 Mon Sep 17 00:00:00 2001
From: Yohan Park <88149844+yohan9569@users.noreply.github.com>
Date: Thu, 12 Dec 2024 01:06:00 +0900
Subject: [PATCH 2/3] =?UTF-8?q?FEAT:=20=EC=A4=91=EA=B8=89=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=99=84=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 detail.html |   4 +-
 detail.js   | 109 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 111 insertions(+), 2 deletions(-)
 create mode 100644 detail.js

diff --git a/detail.html b/detail.html
index 160571b..04170d8 100644
--- a/detail.html
+++ b/detail.html
@@ -9,7 +9,7 @@
     <section id="container">
       <h1 class="title">TODO LIST</h1>
       <div class="input-container">
-        <input type="text" class="todo-input" />
+        <input type="text" class="todo-input" onkeyup="enterKey(event)"/>
       </div>
       <div class="filter-container">
         <select id="todo-filter">
@@ -23,5 +23,5 @@ <h1 class="title">TODO LIST</h1>
       </div>
     </section>
   </body>
-  <script></script>
+  <script src="/detail.js"></script>
 </html>
diff --git a/detail.js b/detail.js
new file mode 100644
index 0000000..4a1c892
--- /dev/null
+++ b/detail.js
@@ -0,0 +1,109 @@
+// 많이 어거지 스럽지만, 돌아는 갑니다.. 
+// map 대신 객체로 저장하는 게 더 바람직할 것 같습니다.
+
+
+const todoList = document.getElementById('todo-list');
+const input = document.querySelector('.todo-input');
+const filter = document.getElementById('todo-filter');
+const items = new Map();
+
+filter.onchange = () => {showFilteredList()};
+
+function enterKey(e) {
+    if (e.key === 'Enter') {
+        insertItem();
+    }
+}
+
+// 추가 기능
+function insertItem() {
+    const inputText = input.value.trim();
+    if (inputText === '') {
+        alert('값을 입력해주세요!');
+        return;
+    }
+    items.set(inputText, false);
+
+    showFilteredList();
+    input.value = '';
+}
+
+// 조회 기능 - 필터
+function showFilteredList() {
+    const filtered = new Map(items);
+    if (filter.value === 'todo') {
+        filtered.forEach((value, key,map)=> {
+            if (value) map.delete(key);
+        })
+    } else if (filter.value === 'done') {
+        filtered.forEach((value, key,map)=> {
+            if (!value) map.delete(key);
+        })
+    }
+
+    showList(filtered);
+}
+
+// 조회 기능 - 화면에 표시
+function showList(list) {
+    todoList.innerHTML = '';
+
+    for (const [key, value] of list) {
+        const item = document.createElement('li');
+        const box = document.createElement('input');
+        box.setAttribute('type', 'checkbox');
+        box.checked = value;
+        // 완료 기능
+        box.addEventListener('click', () => {
+            items.set(key,
+                (items.get(key)) ? false : true
+            );
+        });
+        const text = document.createElement('span');
+        text.textContent = key;
+        const editButton = document.createElement('button');
+        editButton.textContent = 'Edit';
+        editButton.addEventListener('click', () => {
+            editItem(item)
+        });
+        const removeButton = document.createElement('button');
+        removeButton.textContent = 'X';
+        // 삭제 기능
+        removeButton.addEventListener('click', () => {
+            items.delete(key);
+            showFilteredList();
+        });
+        
+        item.appendChild(box);
+        item.appendChild(text);
+        item.appendChild(editButton);
+        item.appendChild(removeButton);
+        todoList.appendChild(item);
+    }
+}
+
+// 수정 기능
+function editItem(item) {
+    const oldText = item.querySelector('span').textContent;
+    item.innerHTML = '';
+    const input = document.createElement('input');
+    input.setAttribute('type', 'text');
+    input.value = oldText;
+    const saveButton = document.createElement('button');
+    saveButton.textContent = 'Save';
+    saveButton.addEventListener('click', ()=>{
+        const newText = input.value.trim();
+        if (newText === '') {
+            alert('값을 입력해주세요!');
+            return;
+        } else if (newText === oldText) {
+            showFilteredList();
+            return;
+        }
+        items.set(newText, items.get(oldText));
+        items.delete(oldText);
+        showFilteredList();
+    });
+    item.appendChild(input);
+    item.appendChild(saveButton);
+}
\ No newline at end of file

From 0114834d40f15b7cc966707b1e618baf4ce45bd9 Mon Sep 17 00:00:00 2001
From: Yohan Park <88149844+yohan9569@users.noreply.github.com>
Date: Thu, 12 Dec 2024 18:08:46 +0900
Subject: [PATCH 3/3] =?UTF-8?q?COMMENT:=20=EC=BD=94=EB=93=9C=20=EB=A6=AC?=
 =?UTF-8?q?=EB=B7=B0=20w=EC=9B=90=EC=A7=80=EB=8B=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 detail.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/detail.js b/detail.js
index 4a1c892..09e791b 100644
--- a/detail.js
+++ b/detail.js
@@ -1,5 +1,6 @@
 // 많이 어거지 스럽지만, 돌아는 갑니다.. 
-// map 대신 객체로 저장하는 게 더 바람직할 것 같습니다.
+// map 대신 객체로 저장하는 게 더 바람직할 것 같습니다. 
+// - 키의 특성 때문에 1. 중복값(할일) 입력시 value 변경. 2. 할일 변경 시 새로운 key 생성으로 처리해서 맨 밑 순서로 변경.
 
 
 const todoList = document.getElementById('todo-list');
@@ -7,7 +8,7 @@ const input = document.querySelector('.todo-input');
 const filter = document.getElementById('todo-filter');
 const items = new Map();
 
-filter.onchange = () => {showFilteredList()};
+filter.onchange = () => {showFilteredList()}; // 원지: 화살표 함수를 사용한 이유는? 답: 인자를 넘기려다가 그랬던 것 같다.
 
 function enterKey(e) {
     if (e.key === 'Enter') {
@@ -29,7 +30,7 @@ function insertItem() {
 }
 
 // 조회 기능 - 필터
-function showFilteredList() {
+function showFilteredList() { // 원지: 함수명 변경 제안. 둘 다 show 동사라 불명확.
     const filtered = new Map(items);
     if (filter.value === 'todo') {
         filtered.forEach((value, key,map)=> {
@@ -85,7 +86,7 @@ function showList(list) {
 // 수정 기능
 function editItem(item) {
     const oldText = item.querySelector('span').textContent;
-    item.innerHTML = '';
+    item.innerHTML = ''; // 원지: innerHTML로 바로 새 요소 넣는 것도 가능할 듯.
     const input = document.createElement('input');
     input.setAttribute('type', 'text');
     input.value = oldText;