북마크바 배치 문의드립니다!

웹 프론트엔드를 위한 자바스크립트 첫걸음

북마크바 만들기

해결된 질문

작성

⚠질문 작성법

세션 7 5. 북마크바 만들기

북마크바 배치가 강의내용이랑 달라서 문의드립니다.

북마크바 열기와 닫기 버튼 활성화가 강의랑 다르게 열기 버튼, 닫기 버튼이 따로 실행되어 보여지고 있는데요, 열기랑 닫기를 하나로 북마크바 보여지게 할려면 어떻게 코드 수정해야하나요

<!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>
    <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>
  </body>
</html>

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

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);

javascript dom

답변 2

효빈 Hyobin

지식공유자

안녕하세요 🙂 질문 감사합니다.

css 코드까지 올려주시면 한 번 확인 해보겠습니다! 감사합니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 안연수님

북마크바 열기와 닫기 버튼을 하나로 통합하여 열고 닫기를 관리하고 싶으시군요. 현재 코드에서는 “북마크 닫기”와 “북마크 열기” 버튼이 각각 다른 위치에서 실행되고 있기에 버튼을 합쳐서 기능할 수 있도록 조금 수정을 해보겠습니다.

수정 제안

단일 버튼으로 동작하도록 설정: “북마크 열기/닫기” 기능을 하나의 버튼으로 통합합니다.
상태 관리를 개선: 기존의 localStorage를 활용한 상태 저장을 유지하며, 버튼을 통해 북마크바를 토글할 수 있도록 합니다.

코드 변경 사항

HTML 부분에서는 “북마크 열기”와 “북마크 닫기” 버튼을 하나의 요소로 통합합니다.

<!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-toggle" id="bookmark-toggle">
      <!-- 여기에 버튼 추가 -->
      <div id="bookmark-toggle-btn">북마크 열기</div>
    </div>
    <div class="bookmark-bar" id="bookmark-bar">
      <!-- 북마크 바 -->
    </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>
  </body>
</html>

JavaScript 코드에서 단일 버튼을 클릭할 때마다 북마크 바의 상태가 바뀌도록 수정합니다.

const bookmarkBar = document.getElementById("bookmark-bar");
const bookmarkToggleBtn = document.getElementById("bookmark-toggle-btn");

const bookmarkBarToggle = () => {
  const isBookMarkBarOpen = localStorage.getItem("isBookMarkBarOpen");

  if (isBookMarkBarOpen === "open") {
    localStorage.setItem("isBookMarkBarOpen", "close");
    bookmarkBar.style.display = "none";
    bookmarkToggleBtn.textContent = "북마크 열기";
  } else {
    localStorage.setItem("isBookMarkBarOpen", "open");
    bookmarkBar.style.display = "block";
    bookmarkToggleBtn.textContent = "북마크 닫기";
  }
};

// 초기 설정
if (localStorage.getItem("isBookMarkBarOpen") === "open") {
  bookmarkBar.style.display = "block";
  bookmarkToggleBtn.textContent = "북마크 닫기";
} else {
  bookmarkBar.style.display = "none";
  bookmarkToggleBtn.textContent = "북마크 열기";
}

bookmarkToggleBtn.addEventListener("click", bookmarkBarToggle);

이제 한 번의 클릭으로 북마크바가 열리거나 닫히게 되고, 버튼 텍스트도 현재 상태에 맞춰 자동으로 변경됩니다. 위 코드로 수정하면 원하시는 동작을 구현할 수 있을 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변