북마크 추가 버튼 활성화 오류 문의드립니... - Inflearn

세션 7 6.북마크 아이템 추가하기

북마크 추가 버튼을 클릭해도 이름, 주소, 취소, 추가 활성화되지 않고 있습니다.
어떠한 코드 오류가 있는 지 오류 코드 체크해주세요!

const newBookmarkForm = document.getElementById("bookmark-item-input-form");

let bookmarkList = [];
if (localStorage.getItem("bookmarkList")) {
  bookmarkList = JSON.parse(localStorage.getItem("bookmarkList"));
} else {
  localStorage.setItem("bookmarkList", JSON.stringify(bookmarkList));
}

const addBookmarkItem = () => {
  let bookmarkList = [];
  if (localStorage.getItem("bookmarkList")) {
    bookmarkList = JSON.parse(localStorage.getItem("bookmarkList"));
  }
  let name = document.getElementById("new-bookmark-name-input").value;
  let url = document.getElementById("new-bookmark-url-input").value;
  let createAt = Date.now();
  bookmarkList.push({ name: name, url: url, createAt: createAt });
  localStorage.setItem("bookmarkList", JSON.stringify(bookmarkList));
  document.getElementById("new-bookmark-name-input").value = "";
  document.getElementById("new-bookmark-url-input").value = "";
  newBookmarkToggle();
};

let isAddBtnClick = false;
newBookmarkForm.style.display = "none";

const newBookmarkToggle = () => {
  isAddBtnClick = !isAddBtnClick;
  isAddBtnClick
    ? (newBookmarkForm.style.display = "block")
    : (newBookmarkForm.style.display = "none");
};

document
  .getElementById("bookmark-item-add-btn")
  .addEventListener("click", newBookmarkToggle);

document.getElementById("add-btn").addEventListener("click", addBookmarkItem);
document
  .getElementById("cancel-btn")
  .addEventListener("click", newBookmarkToggle);

(function () {
  const bookmarkBar = document.getElementById("bookmark-bar");
  const bookmarkOpen = document.getElementById("bookmark-open");
  const bookmarkClose = document.getElementById("bookmark-close");

  const isBookMarkBarOpen = localStorage.getItem("isBookMarkBarOpen");
  if (isBookMarkBarOpen === "close") {
    bookmarkBar.style.display = "none";
    bookmarkOpen.style.display = "none";
    bookmarkClose.style.display = "flex";
  } else {
    bookmarkBar.style.display = "block";
    bookmarkOpen.style.display = "flex";
    bookmarkClose.style.display = "none";
  }

  const bookmarkBarToggle = () => {
    const isBookMarkBarOpen = localStorage.getItem("isBookMarkBarOpen");
    if (isBookMarkBarOpen === "close") {
      localStorage.setItem("isBookMarkBarOpen", "open");
      bookmarkBar.style.display = "block";
      bookmarkOpen.style.display = "flex";
      bookmarkClose.style.display = "none";
      return;
    }
    localStorage.setItem("isBookMarkBarOpen", "close");
    bookmarkBar.style.display = "none";
    bookmarkOpen.style.display = "none";
    bookmarkClose.style.display = "flex";
  };

  document
    .getElementById("bookmark-open-btn")
    .addEventListener("click", bookmarkBarToggle);
  document
    .getElementById("bookmark-close-btn")
    .addEventListener("click", bookmarkBarToggle);
})();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap"
      rel="stylesheet"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>newtab</title>
    <link rel="stylesheet" href="./css/main.css" />
  </head>
  <body>
    <div class="main-container">
      <div class="main-wrapper">
        <div class="today-info">
          <div class="date" id="date">
            <!-- 날짜&요일 -->
          </div>
          <div class="time" id="time">
            <!-- 현재 시간 -->
          </div>
        </div>
        <div class="search">
          <input
            id="search-input"
            autocomplete="off"
            placeholder="검색어를 입력하세요"
          />
        </div>
      </div>
      <div class="quote" id="quote">
        <!-- 명언 -->
      </div>
    </div>
    <div class="bookmark-open" id="bookmark-open">
      <div id="bookmark-open-btn">북마크 닫기</div>
    </div>
    <div class="bookmark-close" id="bookmark-close">
      <div id="bookmark-close-btn">북마크 열기</div>
    </div>
    <div class="bookmark-bar" id="bookmark-bar">
      <!-- 북마크바 -->
      <div class="bookmark-item-add-btn">+ 북마크 추가</div>
      <div class="bookmark-item-input-form" id="bookmark-item-input-form">
        <div class="bookmark-input">
          <div class="new-bookmark-name">
            <div class="label">이름</div>
            <input id="new-bookmark-name-input" />
          </div>
          <div class="new-bookmark-url">
            <div class="label">주소</div>
            <input id="new-bookmark-url-input" />
          </div>
        </div>
        <div class="bookmark-item-input-btn">
          <div class="cancel-btn" id="cancel-btn">취소</div>
          <div class="add-btn" id="add-btn">추가</div>
        </div>
      </div>
    </div>
    <script src="./js/clock.js"></script>
    <script src="./js/search.js"></script>
    <script src="./js/quote.js"></script>
    <script src="./js/bookmark-toggle.js"></script>
    <script src="./js/bookmark.js"></script>
  </body>
</html>

Cộng đồng Hỏi & Đáp của Inflearn

북마크 추가 버튼 활성화 오류 문의드립니다!