블랙커피스터디 level1 - 3주차 정리3

mainLiItem.js

import {
  getUserIdAndDeleteTodolist,
  putServerIsCompleted,
  addMemberItem,
  contentsModify,
} from "../server/AppServer.js";
import { $label } from "../content/shape.js";
import { countContainer } from "./todoAppCountContainer.js";

function clickEraseButton(todoApp, name, teamId, memberId, itemId) {
  const liAll = todoApp.querySelectorAll(
    ".main > .todo-list > .todo-list-item"
  );
  const realLiTag = liAll[liAll.length - 1];
  const realDestory = realLiTag.querySelector(".view > .destroy");
  realDestory.addEventListener("click", (e) => {
    clickEraseHanlder(todoApp, e, teamId, memberId, itemId);
  });
}

function clickEraseHanlder(todoApp, event, teamId, memberId, itemId) {
  event.target.closest("li").remove();
  getUserIdAndDeleteTodolist(todoApp, teamId, memberId, itemId);
}

function clickCheckboxButton(todoApp, teamId, memberId, itemId) {
  const liAll = todoApp.querySelectorAll(
    ".main > .todo-list > .todo-list-item"
  );
  const realLiTag = liAll[liAll.length - 1];
  const realCheckBox = realLiTag.querySelector(".view > .toggle");
  realCheckBox.addEventListener("click", (e) => {
    clickCheckboxHandler(e, teamId, memberId, itemId);
  });
}

function clickCheckboxHandler({ target }, teamId, memberId, itemId) {
  let $liTarget = target.closest("li");
  if (target.checked === true) {
    $liTarget.classList.add("completed");
    $liTarget.classList.remove("active");
    putServerIsCompleted(teamId, memberId, itemId, target.checked);
  } else {
    $liTarget.classList.add("active");
    $liTarget.classList.remove("completed");
    putServerIsCompleted(teamId, memberId, itemId, target.checked);
  }
}

function clickInput(todoApp, ulTag, teamId, memberId) {
  let newTodo = todoApp.querySelector(".input-container > .new-todo");
  newTodo.addEventListener("keyup", (e) =>
    clickEnter(e, newTodo, ulTag, teamId, memberId)
  );
}

function clickEnter(event, newTodo, ulTag, teamId, memberId) {
  if (event.key === "Enter" && /[\S]/gi.test(newTodo.value) !== true) {
    alert("공백을 입력했습니다.");
  } else if (event.key === "Enter" && /[\S]/gi.test(newTodo.value) == true) {
    {
      addMemberItem(newTodo.value, teamId, memberId);
    }
    //입력한 할일 추가시 할일 공백으로 만들기
    newTodo.value = "";
  }
}

function clickLabel(todoApp, teamId, memberId, itemId) {
  const liAll = todoApp.querySelectorAll(
    ".main > .todo-list > .todo-list-item"
  );
  const realLiTag = liAll[liAll.length - 1];
  const realLabel = realLiTag.querySelector(".view > .label");
  const realEdit = realLiTag.querySelector(".edit");
  realLabel.addEventListener("dblclick", (e) => {
    clickLabelHandler(e, realEdit, teamId, memberId, itemId);
  });
}

function clickLabelHandler(event, realEdit, teamId, memberId, itemId) {
  let liClass = event.target.closest("li").getAttribute("class");
  event.target.closest("li").setAttribute("class", "editing");
  realEdit.addEventListener("keydown", (e) => {
    keydownCheck(e, event, realEdit, liClass, teamId, memberId, itemId);
  });
}

function keydownCheck(e, event, realEdit, liClass, teamId, memberId, itemId) {
  if (e.key === "Enter" && /[\S]/gi.test(realEdit.value) == true) {
    event.target.closest("label").innerHTML = $label(realEdit.value);
    event.target.closest("li").setAttribute("class", "active");
    event.target.closest("div").children[0].removeAttribute("checked");
    contentsModify(realEdit.value, teamId, memberId, itemId);
  } else if (e.key === "Escape") {
    event.target.closest("li").setAttribute("class", liClass); //기존의 class로 바꾸기
  } else if (e.key === "Enter" && /[\S]/gi.test(realEdit.value) == false) {
    alert("공백 입력 금지");
  }
}

export { clickEraseButton, clickInput, clickCheckboxButton, clickLabel };

크게 체크박스 삭제버튼 더블클릭수정 할일추가 4가지로 구성되어있다.

function clickEraseButton(todoApp, name, teamId, memberId, itemId) {
  const liAll = todoApp.querySelectorAll(
    ".main > .todo-list > .todo-list-item"
  );
  const realLiTag = liAll[liAll.length - 1];
  const realDestory = realLiTag.querySelector(".view > .destroy");
  realDestory.addEventListener("click", (e) => {
    clickEraseHanlder(todoApp, e, teamId, memberId, itemId);
  });
}

realLiTag는 반복할때마다 맨앞에있는 li태그가 아닌 진짜 li태그를 가져와 주는 역할을 한다.
리터럴 템플릿에 의해 해당 li틀을 추가하고 그 틀의 추가된 부분( liAll[liAll.length - 1]) 에 핸들러를 추가하는 방식히다.

다른 내용도 전부 진짜 li를 찾아서 핸들러를 추가해주는 역할을 한다.