우선, init() 함수에서 만약 로컬스토리지에 저장된 todos가 있다면 그것을 파싱 해오는데, 그것을 페이지 내에서 조작하기 위해서 사용하는 글로벌 변수 todos에 넣는 과정이 없습니다. 그렇기 때문에 로컬스토리지에는 있고, 글로벌 변수에는 없어서, 마치 제대로 저장되고 복원 되는 것처럼 보이지만, 조작하면 (조작하는 대상은 글로벌 변수 todos 이므로) 문제가 생기게 됩니다.

// 페이지 내에서 조작하는 todos는 글로벌 변수인 todos 입니다.
let todos = [];

const init = () => {
  // 이 친구는 어디로?
  const userTodos = JSON.parse(localStorage.getItem('todos'));

  if (userTodos) {
    userTodos.forEach((todo) => {
      addItem(todo);
    });

    // 아래 부분을 추가해 주어야 합니다.
    todos = userTodos;
  }
};

또한 init() 함수에서 로컬스토리지에 저장된 항목이 있음에도 불구하고 todoCount.textContent를 0으로 초기화 하고 있습니다. 추측컨데, 이 기능이 올바르게 작동하려면 0으로 초기화 하는 것이 아니라, 저장된 개수를 세서 넣어줘야 할 것으로 보입니다.

const init = () => {
  const userTodos = JSON.parse(localStorage.getItem('todos'));

  if (userTodos) {
    userTodos.forEach((todo) => {
      addItem(todo);
    });

    todos = userTodos;

    // 다음과 같이 수정되어야 합니다.
    updateTodoCount();
  }
};

추가로, 더 정확히는, 이 기능은 저장된 배열이 있던 없던 저장된 항목의 개수를 세어 표기하는 기능으로 보이기 때문에, 다음과 같이 if문 밖에 작성되어야 할 것 같습니다. 그래야 저장된 항목이 없어도 0 task 라고 표기됩니다.

const init = () => {
  const userTodos = JSON.parse(localStorage.getItem('todos'));

  if (userTodos) {
    userTodos.forEach((todo) => {
      addItem(todo);
    });

    todos = userTodos;
  }

  updateTodoCount();
};

세 번째로, 전체 삭제 함수에서 임의로 테스크 개수를 0이라고 덮어씌울 필요없이, 이미 글로벌 변수 todos의 모든 내용을 지웠기 때문에 그냥 개수를 세는 함수를 호출하시면 됩니다.

clearAll.addEventListener('click', () => {
  ul.innerHTML = '';
  todos = [];
  localStorage.removeItem('todos');
  updateTodoCount();
});

네 번째로, 이미 이벤트 핸들러에서 input.value !== ''임을 체크하고 공백이 아닌 것들만 addItem() 함수를 실행하고 있기 때문에, 중복으로 검증하실 필요는 없습니다. 따라서 if문을 핸들러 안에 두신다면 다음과 같이 수정하셔도 됩니다.

const addItem = (todo) => {
  const li = document.createElement('li');
  const span = document.createElement('span');
  const icon = document.createElement('i');
d
  icon.classList.add('fa-solid', 'fa-trash-can');
  span.innerText = todo.text;
  icon.addEventListener('click', delItem);

  ul.appendChild(li);
  li.appendChild(span);
  li.appendChild(icon);
  li.id = todo.id;

  updateTodoCount();
};

수정된 전체 코드

const form = document.querySelector('form');
const input = document.querySelector('input');
const ul = document.querySelector('ul');
const todoCount = document.querySelector('.todo-count');
const clearAll = document.querySelector('.clear-all');

let todos = [];

const save = () => {
  localStorage.setItem('todos', JSON.stringify(todos));
};

const updateTodoCount = () => {
  todoCount.textContent = todos.length;
};

const clearItems = () => {
  ul.innerHTML = '';
  todos = [];
  localStorage.removeItem('todos');
  updateTodoCount();
};

const delItem = (event) => {
  const target = event.target.parentElement;

  todos = todos.filter((todo) => todo.id !== parseInt(target.id));

  save();
  target.remove();
  updateTodoCount();
};

const addItem = (todo) => {
  const li = document.createElement('li');
  const span = document.createElement('span');
  const icon = document.createElement('i');

  icon.classList.add('fa-solid', 'fa-trash-can');
  span.innerText = todo.text;
  icon.addEventListener('click', delItem);

  ul.appendChild(li);
  li.appendChild(span);
  li.appendChild(icon);
  li.id = todo.id;

  updateTodoCount();
};

const handler = (event) => {
  event.preventDefault();

  const todo = {
    id: Date.now(),
    text: input.value,
  };

  if (input.value !== '') {
    todos.push(todo);
    addItem(todo);
    save();
    input.value = '';
  }
};

const init = () => {
  const userTodos = JSON.parse(localStorage.getItem('todos'));

  if (userTodos) {
    userTodos.forEach((todo) => addItem(todo));
    todos = userTodos;
  }

  updateTodoCount();
};

init();
form.addEventListener('submit', handler);
clearAll.addEventListener('click', clearItems);