4 featurecreate document delete button

index.html

@@ -53,14 +53,16 @@
             id="sideBar__hamburger"
           >
             <img
-              src="./src/asset/sideBar-item-hide.svg"
-              alt="sidebar-button"
+              src="./src/asset/menu-burger.svg"
+              alt=""
               class="sidebar__icon"
             />
           </button>
           <li id="breadCrumb" class="breadCrumb">bread crumb..</li>
         </div>
-        <button>삭제</button>
+        <button class="delete__button" id="delete__button">
+          <img src="./src/asset/trash-can.svg" alt="" />
+        </button>
       </ul>
       <section class="editor">
         <div id="editor__body" class="editor__body">
@@ -75,5 +77,6 @@ <h1 id="editor__body--title">
     </main>
     <script type="module" src="./src/main.js"></script>
     <script type="module" src="./src/components/Sidebar.js"></script>
+    <script type="module" src="./src/components/Deletebutton.js"></script>
   </body>
 </html>

src/components/Deletebutton.js

@@ -0,0 +1,30 @@
+import { BASE_URL, x_username } from "../constants/urls.js";
+
+// 삭제버튼
+const docsDeleteButton = document.getElementById("delete__button");
+
+// 삭제 API 요청 함수
+async function documentDelete(docId) {
+  try {
+    const response = await fetch(`${BASE_URL}/${docId}`, {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+        "x-username": x_username,
+      },
+    });
+    if (!response.ok) {
+      throw new Error("페이지 삭제 요청이 실패했습니다.");
+    }
+    const result = await response.json();
+    console.log("페이지 삭제 성공", result);
+    // 삭제 성공 후 필요한 작업 수행 (예: 페이지 리로드 또는 UI 업데이트)
+  } catch (error) {
+    console.error("페이지 삭제 중 오류 발생", error);
+  }
+}
+
+docsDeleteButton.addEventListener("click", function () {
+  const documentId = `${docId}`;
+  documentDelete(documentId);
+});

src/components/DocumentManager.js

@@ -6,7 +6,6 @@ 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 () => {
@@ -54,7 +53,15 @@ export const createDocumentItem = async (doc, parentElement = null) => {
   newDocumentItem.classList.add("sidebar__menuWrapper--document");
   newDocumentItem.id = `document-container-${doc.id}`;
 
-  newDocumentItem.innerHTML = sidebarButton(doc.id, doc.title);
+  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>
+  `;
 
   // 부모 요소가 있으면 그 안에, 없으면 document-list에 추가
   if (parentElement) {
@@ -76,14 +83,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) => {
@@ -95,7 +102,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,32 +1,6 @@
 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,21 +1,15 @@
-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) => {
-    // 버튼을 직접 클릭했거나, 버튼 내부의 이미지를 클릭했을 경우를 모두 처리
-    const addButton = event.target.classList.contains("add-subdoc-btn")
-      ? event.target
-      : event.target.closest(".add-subdoc-btn");
-
-    if (addButton) {
-      const parentId = addButton.dataset.parentId;
+    if (event.target.classList.contains("add-subdoc-btn")) {
+      const parentId = event.target.getAttribute("data-parent-id");
       addDoc(parentId);
     }
   });
-};
+
+}

styles/reset.css

@@ -177,11 +177,4 @@ 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("./variables.css");
+@import url("/styles/variables.css");
 
 .screen__sidebar {
   box-sizing: border-box;
@@ -10,7 +10,6 @@
   flex-direction: column;
   gap: 1.2rem;
 }
-
 .screen_miniSidebar {
   position: absolute;
   left: 12px;
@@ -47,6 +46,7 @@
 .sub-document-list {
   padding-left: 1.42rem;
   list-style-type: none;
+  display: none;
 }
 .sidebar__menuWrapper--documet {
   height: 30px;
@@ -61,6 +61,7 @@
 .sidebar__menuWrapper--document {
   border-radius: 4px;
   display: block;
+  padding: 5px 8px;
   position: relative;
 }
 .add-subdoc-btn {
@@ -111,7 +112,7 @@
 }
 
 /* 사이드바 아이콘 */
-.sideBar__hideButton {
+.sideBar__button {
   box-sizing: border-box;
   width: 20px;
   height: 20px;
@@ -121,58 +122,25 @@
   background: none;
   cursor: pointer;
 }
-
-.sideBar__hideButton:hover {
+.sideBar__button: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);
-}
-
-/* 사이드바 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 {
+  display: none;
 }