feat: sideber 코드 분리, 이벤트 기능 버그 수정

index.html

@@ -53,8 +53,8 @@
             id="sideBar__hamburger"
           >
             <img
-              src="./src/asset/menu-burger.svg"
-              alt=""
+              src="./src/asset/sideBar-item-hide.svg"
+              alt="sidebar-button"
               class="sidebar__icon"
             />
           </button>

src/components/DocumentManager.js

@@ -6,6 +6,7 @@ import {
 } from "../api/api.js";
 import { navigate, routes } from "../router/router.js";
 import { updateBreadcrumb } from "./breadcrumb.js";
+import { sidebarButton } from "./Sidebar.js";
 
 // 문서 목록을 가져와 동적 링크 생성
 export const createDocumentsList = async () => {
@@ -53,15 +54,7 @@ export const createDocumentItem = async (doc, parentElement = null) => {
   newDocumentItem.classList.add("sidebar__menuWrapper--document");
   newDocumentItem.id = `document-container-${doc.id}`;
 
-  newDocumentItem.innerHTML = `
-    <div class="document-content">
-      <a href="#" class="document-link" data-url="doc${doc.id}">
-        ${doc.title}
-      </a>
-      <button class="add-subdoc-btn" data-parent-id="${doc.id}">+</button>
-    </div>
-    <ul class="sub-document-list" style="display: none;"></ul>
-  `;
+  newDocumentItem.innerHTML = sidebarButton(doc.id, doc.title);
 
   // 부모 요소가 있으면 그 안에, 없으면 document-list에 추가
   if (parentElement) {
@@ -83,14 +76,14 @@ export const createDocumentItem = async (doc, parentElement = null) => {
     });
   }
 
-  // hover 이벤트 추가
-  newDocumentItem.addEventListener("mouseenter", () => {
-    newDocumentItem.classList.add("hover__document-item");
-  });
+  // // hover 이벤트 추가
+  // newDocumentItem.addEventListener("mouseenter", () => {
+  //   newDocumentItem.classList.add("hover__document-item");
+  // });
 
-  newDocumentItem.addEventListener("mouseleave", () => {
-    newDocumentItem.classList.remove("hover__document-item");
-  });
+  // newDocumentItem.addEventListener("mouseleave", () => {
+  //   newDocumentItem.classList.remove("hover__document-item");
+  // });
 
   // 문서 클릭 이벤트
   newDocumentItem.addEventListener("click", async (event) => {
@@ -102,7 +95,7 @@ export const createDocumentItem = async (doc, parentElement = null) => {
     removeAllActiveClasses();
 
     // 현재 클릭된 항목에 active 클래스 추가
-    newDocumentItem.classList.add("acitve__document-item");
+    // newDocumentItem.classList.add("acitve__document-item");
 
     navigate(path);
 

src/components/Sidebar.js

@@ -1,6 +1,32 @@
 const hamburger = document.getElementById("sideBar__hamburger");
 const sideBar = document.getElementById("sidebar");
 
+export const sidebarButton = (id, title) => {
+  return `
+    <div class="sidebar_item" id="documentBlock-div-sidebar-${id}">
+      <div class="sidebar_item_left_btn" >
+        <button class="document-spread sidebar_item-btn">
+          <img
+          src="./src/asset/sideBar-item-hide.svg"
+          alt="sidebar-button"
+          class="sidebar__icon"
+          />
+        </button>
+        <a href="#" class="document-link " data-url="doc${id}">
+        ${title}
+        </a>
+      </div>
+      <button class="add-subdoc-btn sidebar_item-btn" data-parent-id="${id}">
+        <img
+          src="./src/asset/plus.svg"
+          alt="sidebar-button"
+          class="sidebar__icon"
+        />
+      </button>
+    </div>
+    <ul class="sub-document-list" style="display: none;"></ul> <!-- 기본적으로 숨기기 -->`;
+};
+
 // 사이드바 숨기는 함수
 const onclickSideBarHide = () => {
   const hideButton = document.getElementById("sideBar__hideButton");

src/listeners/CreateNewDocListener.js

@@ -1,15 +1,21 @@
-import { addRootDoc, addDoc } from "../components/DocumentManager.js"
+import { addRootDoc, addDoc } from "../components/DocumentManager.js";
 
 export const setEventListener = (documentList, createDocumentButton) => {
   // 새 문서 생성
-  createDocumentButton.addEventListener("click", () => addRootDoc(documentList));
-
+  createDocumentButton.addEventListener("click", () =>
+    addRootDoc(documentList)
+  );
+
   // 하위 문서 생성
   documentList.addEventListener("click", (event) => {
-    if (event.target.classList.contains("add-subdoc-btn")) {
-      const parentId = event.target.getAttribute("data-parent-id");
+    // 버튼을 직접 클릭했거나, 버튼 내부의 이미지를 클릭했을 경우를 모두 처리
+    const addButton = event.target.classList.contains("add-subdoc-btn")
+      ? event.target
+      : event.target.closest(".add-subdoc-btn");
+
+    if (addButton) {
+      const parentId = addButton.dataset.parentId;
       addDoc(parentId);
     }
   });
-
-}
+};

styles/reset.css

@@ -177,4 +177,11 @@ input:focus {
   outline: none;
   box-shadow: none;
   border: none;
-}
+}
+button {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background-color: inherit;
+  cursor: pointer;
+}

styles/sideBar.css

@@ -1,4 +1,4 @@
-@import url("/styles/variables.css");
+@import url("./variables.css");
 
 .screen__sidebar {
   box-sizing: border-box;
@@ -10,6 +10,7 @@
   flex-direction: column;
   gap: 1.2rem;
 }
+
 .screen_miniSidebar {
   position: absolute;
   left: 12px;
@@ -46,7 +47,6 @@
 .sub-document-list {
   padding-left: 1.42rem;
   list-style-type: none;
-  display: none;
 }
 .sidebar__menuWrapper--documet {
   height: 30px;
@@ -61,7 +61,6 @@
 .sidebar__menuWrapper--document {
   border-radius: 4px;
   display: block;
-  padding: 5px 8px;
   position: relative;
 }
 .add-subdoc-btn {
@@ -112,7 +111,7 @@
 }
 
 /* 사이드바 아이콘 */
-.sideBar__button {
+.sideBar__hideButton {
   box-sizing: border-box;
   width: 20px;
   height: 20px;
@@ -122,25 +121,58 @@
   background: none;
   cursor: pointer;
 }
-.sideBar__button:hover {
+
+.sideBar__hideButton:hover {
   background-color: var(--bg100);
   border-radius: 4px;
 }
+
 .sidebar__icon {
   box-sizing: border-box;
   width: fit-content;
   height: fit-content;
 }
+
 .sidebar__iconWrap {
   display: flex;
   align-items: center;
   gap: 8px;
 }
+
 /* 사이드바 숨기기 css */
 .sidebar__hide {
   min-width: 0px;
   width: 0px;
   padding: 0px;
   transform: translateX(-250px);
-  display: none;
+}
+
+/* 사이드바 Item 스타일 */
+.sidebar_item {
+  position: relative;
+  width: 100%;
+  display: flex;
+  padding: 5px 8px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sidebar_item .sidebar_item_left_btn {
+  flex: 1;
+
+  display: flex;
+  align-items: center;
+}
+
+.sidebar_item:hover {
+  background-color: var(--bg100);
+  color: var(--black200);
+  transition: background-color 0.2s ease;
+}
+
+.sidebar_item-btn {
+  display: inline-flex;
+}
+
+.sidebar_item .add-subdoc-btn {
 }