[1주차] 김류원 미션 제출합니다.

script.js

@@ -1,15 +1,33 @@
 const addBtn = document.querySelector('.addBtn');
 const TodoInput = document.querySelector('.TodoInput');
 const todoList = document.querySelector('.todoList');
-const todoForm = document.querySelector('.writeTodoForm');
+const todoForm = document.getElementById('todoForm');
+
+let todos = [];
+
+// localStorage에서 todos 불러오기
+function loadTodos() {
+    const savedTodos = localStorage.getItem('todos');
+    if (savedTodos) {
+        todos = JSON.parse(savedTodos);
+        todos.forEach(todo => createTodoElement(todo.text, todo.completed));
+    }
+}
+
+// localStorage에 todos 저장
+function saveTodos() {
+    localStorage.setItem('todos', JSON.stringify(todos));
+}
 
 function addTodo(e) {
     e.preventDefault();
 
     const Todo = TodoInput.value.trim();
 
     if (Todo) {
-        createTodoElement(Todo);
+        createTodoElement(Todo, false);
+        todos.push({ text: Todo, completed: false });
+        saveTodos();
         TodoInput.value = '';
     } else {
         alert('To Do를 입력하세요');
@@ -19,37 +37,57 @@ function addTodo(e) {
 todoForm.addEventListener('submit', addTodo);
 
 // 투두 추가 함수
-function createTodoElement(Todo) {
+function createTodoElement(Todo, isCompleted) {
     const listItem = document.createElement('li');
+    listItem.classList.add('animate-slide-down');
+    if (isCompleted) {
+        listItem.classList.add('completed');
+    }
 
     // 완료 토글 아이콘
     const toggleIcon = document.createElement('img');
-    toggleIcon.src = './icon/notCheck.svg';
-    toggleIcon.alt = 'Toggle unComplete';
+    toggleIcon.src = isCompleted ? './icon/checkComplete.svg' : './icon/notCheck.svg';
+    toggleIcon.alt = isCompleted ? 'Toggle Complete' : 'Toggle unComplete';
     toggleIcon.classList.add('toggle-icon');
 
     // 투두 텍스트
     const todoText = document.createElement('span');
     todoText.textContent = Todo;
+    if (isCompleted) {
+        todoText.classList.add('completed-text');
+    }
 
     toggleIcon.addEventListener('click', () => {
         listItem.classList.toggle('completed');
         todoText.classList.toggle('completed-text');
-        if (listItem.classList.contains('completed')) {
+        const isNowCompleted = listItem.classList.contains('completed');
+        if (isNowCompleted) {
             toggleIcon.src = './icon/checkComplete.svg';
             toggleIcon.alt = 'Toggle Complete';
         } else {
             toggleIcon.src = './icon/notCheck.svg';
             toggleIcon.alt = 'Toggle unComplete';
         }
+        // localStorage 업데이트
+        const index = todos.findIndex(item => item.text === Todo);
+        if (index !== -1) {
+            todos[index].completed = isNowCompleted;
+            saveTodos();
+        }
     });
 
     // 삭제 버튼
     const deleteBtn = document.createElement('button');
-    deleteBtn.textContent = '삭제';
+    deleteBtn.textContent = 'Del';
     deleteBtn.classList.add('delete-btn');
     deleteBtn.addEventListener('click', () => {
-        todoList.removeChild(listItem);
+        listItem.classList.add('animate-fade-out');
+        setTimeout(() => {
+            todoList.removeChild(listItem);
+            // localStorage에서 삭제
+            todos = todos.filter(item => item.text !== Todo);
+            saveTodos();
+        }, 300);
     });
 
     // HTML 구조에 맞게 요소 추가
@@ -71,9 +109,11 @@ function formatDateKorean(date) {
     return `${month} ${day}일 ${dayOfWeek}`;
 }
 
-// 페이지 로드 시 오늘 날짜 표시
+// 페이지 로드 시 실행
 document.addEventListener('DOMContentLoaded', () => {
     const todayDateElement = document.getElementById('todayDate');
     const today = new Date();
     todayDateElement.textContent = formatDateKorean(today);
+
+    loadTodos(); // localStorage에서 todos 불러오기
 });

style.css

@@ -1,4 +1,8 @@
 /*라이브러리*/
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css");
+html{
+    font-family: "Pretendard";
+}
 * {
     margin: 0;
     padding: 0;
@@ -56,35 +60,118 @@
     margin-top: 20px;
     display: flex;
     flex-direction: column;
-    background-color: #c3ccff;
+    background-color: #d6ddff;
 }
 .check_icon {
     width: 20px;
     height: 20px;
     margin: 0 15px 0 0px;
-    fill: #788bff;
-
-
+}
+.writeTodoForm {
+    width: 100%;
+    height: 52px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0 15px 0 15px;
+}
+.writeTodoForm > .TodoInput {
+    width: 100%;
+    height: 50px;
+    outline: none;
+    border: none;
+    color: #788bff;
+    background-color: transparent;
+    font-weight: 700;
+    font-size: 0.8rem;
+}
+.writeTodoForm > .TodoInput::placeholder{
+    color: #788bff;
+}
+.writeTodoForm > .addBtn, .delete-btn {
+    cursor: pointer;
+    background-color: #788bff;
+    width: 36px;
+    height: 22px;
+    border-radius: 10px;
+    font-size: 0.75rem;
+    color: white;
+    padding: 2px;
+    border: none;
+    transition: background-color .3s, color .3s;
+}
+.writeTodoForm > .addBtn:hover, .delete-btn:hover{
+    background-color: white;
+    color: #788bff;
+}   
+.todoList{
+    width:100%;
+}
+.todoList li {
+    width: 100%;
+    border-radius: 10px;
+    margin-top: 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: #d6ddff;
+    height: 50px;
+    padding: 0 15px 0 15px;
+    color: #788bff;
+    font-weight: 700;
+    font-size: 0.8rem;
+}
 
-.completed-text {
+.todoList .completed-text {
     text-decoration: line-through;
-    color: #888;
+    color: #7d808e;
 }
 
-.toggle-icon, .delete-icon {
+.todoList .toggle-icon, .delete-icon {
     width: 20px;
     height: 20px;
     cursor: pointer;
 }
 
-.toggle-icon {
+.todoList .toggle-icon {
     margin-right: 10px;
 }
 
-.delete-icon {
+.todoList .delete-icon {
     margin-left: auto;
 }
 
-span {
+.todoList span {
     flex-grow: 1;
-}
+}
+
+@keyframes slideDownFadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  .animate-slide-down {
+    animation: slideDownFadeIn 0.2s ease-out forwards;
+  }
+  /*  */
+
+  /* 할일 삭제 애니메이션 */
+  @keyframes fadeOutScaleDown {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.9);
+      transform: translateY(+10px);
+    }
+  }
+  .animate-fade-out {
+    animation: fadeOutScaleDown 0.2s ease-out forwards;
+  }