test

Author: skyt852-create

index.html

@@ -30,7 +30,7 @@ <h2 class="sidebar-title">전공무관</h2>
                         <div>검색</div>
                     </div>
                     <div class="sidebar-feature">
-                        <a href="./">홈</a>
+                        <a href="/">홈</a>
                     </div>
                 </div>
                 <h3 class="myPage">내 페이지</h3>

src/components/Sidebar.js

@@ -129,10 +129,6 @@ function renderTree(documents, parentElement = sidebarTree, depth = 0) {
         const toggleBtn = document.createElement("button")
         toggleBtn.className = "toggle-btn"
         toggleBtn.type = "button"
-        toggleBtn.style.backgroundImage = "url(/src/img/toggle.svg)"
-        toggleBtn.style.backgroundRepeat = "no-repeat"
-        toggleBtn.style.backgroundSize = "cover"
-        toggleBtn.style.backgroundPosition = "center"
         toggleBtn.style.marginRight = "6px"
         toggleBtn.style.fontSize = "0.8rem"
         toggleBtn.style.lineHeight = "1"

src/router.js

@@ -2,6 +2,8 @@ import { EditPage } from "./components/Editor.js"
 
 const $content = document.getElementById("content")
 
+let BASE_PATH = ""
+
 // 라우팅 처리 함수
 function matchRoute(path) {
     if (path === "/") return routes["/"]
@@ -25,7 +27,7 @@ const routes = {
         $content.innerHTML = "<h1>문서 목록</h1>"
         // 예시: 목록을 클릭하면 특정 id 문서로 이동
         const link = document.createElement("a")
-        link.href = "/documents/123"
+        link.href = `${BASE_PATH}/documents/123`
         link.textContent = "문서 123 보기"
         link.addEventListener("click", (e) => {
             e.preventDefault()
@@ -44,7 +46,7 @@ const routes = {
 }
 
 export function navigateTo(path) {
-    history.pushState({ path }, "", path)
+    history.pushState({ path }, "", `${BASE_PATH}${path}`)
     loadContent(path)
 }
 
@@ -61,5 +63,27 @@ window.addEventListener("popstate", (e) => {
 
 // 첫 로딩
 window.addEventListener("DOMContentLoaded", () => {
-    loadContent(location.pathname)
+    const pathSegments = location.pathname.split("/").filter(Boolean)
+    if (location.hostname.endsWith("github.io") && pathSegments.length > 0) {
+        BASE_PATH = `/${pathSegments[0]}`
+    } else {
+        BASE_PATH = ""
+    }
+
+    let initialBrowserPath = location.pathname
+    let pathForRouter = "/"
+
+    if (initialBrowserPath.startsWith(BASE_PATH)) {
+        pathForRouter = initialBrowserPath.substring(BASE_PATH.length)
+        if (pathForRouter === "") {
+            pathForRouter = "/"
+        }
+    }
+    const restoredPath = history.state?.path
+    const finalPathToLoad =
+        restoredPath && restoredPath.startsWith(BASE_PATH)
+            ? restoredPath.substring(BASE_PATH.length) || "/"
+            : pathForRouter
+
+    loadContent(finalPathToLoad)
 })

src/styles/main.css

@@ -7,14 +7,14 @@
 /* 사이드바 오픈 버튼 */
 .open-btn {
     display: none;
-    background: url(/src/img/sidemenu.svg) no-repeat center/cover;
+    background: url(../img/sidemenu.svg) no-repeat center/cover;
     width: 30px;
     height: 30px;
     margin: 10px;
 }
 
 .open-btn:hover {
-    background: url(/src/img/arrowopen.svg) no-repeat center/cover;
+    background: url(../img/arrowopen.svg) no-repeat center/cover;
     transition: all 0.2s;
 }
 
@@ -61,7 +61,7 @@
 }
 
 .create-root-btn {
-    background: url(/src/img/headercreate.svg) no-repeat center/cover;
+    background: url(../img/headercreate.svg) no-repeat center/cover;
 }
 
 .create-root-btn:hover,
@@ -70,7 +70,7 @@
 }
 
 .hide-btn {
-    background: url(/src/img/arrowhide.svg) no-repeat center/cover;
+    background: url(../img/arrowhide.svg) no-repeat center/cover;
 }
 
 .sidebar-features {
@@ -101,7 +101,7 @@
     width: 21px;
     height: 21px;
     margin-right: 6px;
-    background: url("/src/img/search.svg") no-repeat center/cover;
+    background: url(../img/search.svg) no-repeat center/cover;
 }
 
 /* 두 번째 sidebar-feature (홈 아이콘) */
@@ -111,7 +111,7 @@
     position: absolute;
     width: 21px;
     height: 21px;
-    background: url("/src/img/home.svg") no-repeat center/cover;
+    background: url(../img/home.svg) no-repeat center/cover;
 }
 
 .sidebar-feature a {
@@ -211,11 +211,11 @@ textarea {
 
 /* delete btn */
 .delete-btn {
-    background: url(/src/img/delete.svg) no-repeat center/cover;
+    background: url(../img/delete.svg) no-repeat center/cover;
 }
 
 .add-btn {
-    background: url(/src/img/plus.svg) no-repeat center/cover;
+    background: url(../img/plus.svg) no-repeat center/cover;
 }
 
 .delete-btn:hover,
@@ -258,6 +258,7 @@ textarea {
 /* toggle 버튼 hover */
 .toggle-btn {
     transition: all 0.15s ease;
+    background: url(../img/toggle.svg) no-repeat center/cover;
 }
 
 .toggle-btn:hover {