theme: 홈 피드·사이드바·유저 메뉴 동작 보정

Made-with: Cursor

assets/built/screen.css

@@ -108,6 +108,36 @@ menu {
     background: var(--bg);
 }
 
+@media (min-width: 1024px) {
+    html,
+    body {
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .site-shell-wrap {
+        height: calc(100vh - var(--topbar-height));
+    }
+
+    .site-shell {
+        height: 100%;
+        min-height: 0;
+    }
+
+    .site-main {
+        height: 100%;
+        min-height: 0;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+    }
+
+    .sidebar--left,
+    .sidebar--right {
+        height: 100%;
+        overflow: hidden;
+    }
+}
+
 .sidebar,
 .site-main {
     min-width: 0;
@@ -731,6 +761,10 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
     padding-inline: 14px;
 }
 
+[data-featured-track]::-webkit-scrollbar {
+    display: none;
+}
+
 .icon-button {
     display: inline-flex;
     justify-content: center;
@@ -1450,7 +1484,7 @@ body:not(.left-sidebar-collapsed) .topbar__sidebar-toggle-icon--close {
 
 .kg-content .kg-width-wide {
     position: relative;
-    width: min(100vw - 48px, 820px);
+    width: min(100vw - 48px, 680px);
     max-width: none;
     margin-left: 50%;
     transform: translateX(-50%);

assets/built/theme.js

@@ -153,6 +153,28 @@
 
     syncLeftSidebarState();
 
+    var siteMain = document.querySelector(".site-main");
+    var sidebarNodes = document.querySelectorAll(".sidebar--left, .sidebar--right");
+
+    function shouldProxySidebarWheel() {
+        return !tabletMedia.matches && !!siteMain;
+    }
+
+    sidebarNodes.forEach(function (sidebar) {
+        sidebar.addEventListener("wheel", function (event) {
+            if (!shouldProxySidebarWheel()) {
+                return;
+            }
+
+            event.preventDefault();
+            siteMain.scrollBy({
+                top: event.deltaY,
+                left: 0,
+                behavior: "auto"
+            });
+        }, { passive: false });
+    });
+
     var tabRoot = document.querySelector("[data-tabs]");
     if (tabRoot) {
         var triggers = tabRoot.querySelectorAll("[data-tab-trigger]");
@@ -259,6 +281,96 @@
         }
     });
 
+    var userMenuToggle = document.querySelector("[data-user-menu-toggle]");
+    var userMenu = document.querySelector("[data-user-menu]");
+    var userThemeToggle = document.querySelector("[data-user-theme-toggle]");
+    var userMenuStateToggle = document.querySelector("[data-user-menu-state-toggle]");
+    var userThemeTrack = document.querySelector("[data-user-theme-track]");
+    var userThemeThumb = document.querySelector("[data-user-theme-thumb]");
+    var userMenuTrack = document.querySelector("[data-user-menu-track]");
+    var userMenuThumb = document.querySelector("[data-user-menu-thumb]");
+
+    function syncUserMenuToggles() {
+        var isDark = body.classList.contains("theme-dark");
+        var menuOpen = tabletMedia.matches ? body.classList.contains("left-sidebar-open") : !body.classList.contains("left-sidebar-collapsed");
+
+        if (userThemeTrack) {
+            userThemeTrack.classList.toggle("bg-accent", isDark);
+            userThemeTrack.classList.toggle("bg-brd", !isDark);
+        }
+        if (userThemeThumb) {
+            userThemeThumb.classList.toggle("translate-x-3.5", isDark);
+            userThemeThumb.classList.toggle("translate-x-0", !isDark);
+        }
+
+        if (userMenuTrack) {
+            userMenuTrack.classList.toggle("bg-accent", menuOpen);
+            userMenuTrack.classList.toggle("bg-brd", !menuOpen);
+        }
+        if (userMenuThumb) {
+            userMenuThumb.classList.toggle("translate-x-3.5", menuOpen);
+            userMenuThumb.classList.toggle("translate-x-0", !menuOpen);
+        }
+    }
+
+    function setUserMenu(open) {
+        if (!userMenu) {
+            return;
+        }
+
+        userMenu.classList.toggle("translate-y-0", open);
+        userMenu.classList.toggle("opacity-100", open);
+        userMenu.classList.toggle("visible", open);
+        userMenu.classList.toggle("scale-100", open);
+        userMenu.classList.toggle("pointer-events-auto", open);
+        userMenu.classList.toggle("-translate-y-4", !open);
+        userMenu.classList.toggle("opacity-0", !open);
+        userMenu.classList.toggle("invisible", !open);
+        userMenu.classList.toggle("scale-95", !open);
+        userMenu.classList.toggle("pointer-events-none", !open);
+    }
+
+    if (userMenuToggle && userMenu) {
+        userMenuToggle.addEventListener("click", function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            setUserMenu(userMenu.classList.contains("invisible"));
+            syncUserMenuToggles();
+        });
+
+        document.addEventListener("click", function (event) {
+            if (!event.target.closest("[data-user-menu]") && !event.target.closest("[data-user-menu-toggle]")) {
+                setUserMenu(false);
+            }
+        });
+    }
+
+    if (userThemeToggle) {
+        userThemeToggle.addEventListener("click", function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            setTheme(body.classList.contains("theme-dark") ? "light" : "dark");
+            syncUserMenuToggles();
+        });
+    }
+
+    if (userMenuStateToggle) {
+        userMenuStateToggle.addEventListener("click", function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            var isOverlay = tabletMedia.matches;
+            var isOpen = isOverlay ? body.classList.contains("left-sidebar-open") : !body.classList.contains("left-sidebar-collapsed");
+            if (isOpen) {
+                closeLeftSidebar();
+            } else {
+                openLeftSidebar();
+            }
+            syncUserMenuToggles();
+        });
+    }
+
+    syncUserMenuToggles();
+
     function updateLoadMoreState(pagination, nextUrl, loading) {
         var trigger = pagination.querySelector("[data-load-more-trigger]");
         if (!trigger) {
@@ -338,4 +450,41 @@
     document.querySelectorAll("[data-load-more-root]").forEach(function (rootNode) {
         initializeLoadMore(rootNode);
     });
+
+    document.querySelectorAll("[data-featured-slider]").forEach(function (sliderRoot) {
+        var track = sliderRoot.querySelector("[data-featured-track]");
+        var prev = sliderRoot.querySelector("[data-featured-prev]");
+        var next = sliderRoot.querySelector("[data-featured-next]");
+
+        if (!track || !prev || !next) {
+            return;
+        }
+
+        function getStep() {
+            var firstCard = track.querySelector(".featured-slider__item");
+            if (!firstCard) {
+                return 320;
+            }
+            var gap = 20;
+            return firstCard.getBoundingClientRect().width + gap;
+        }
+
+        function syncButtons() {
+            var maxLeft = Math.max(0, track.scrollWidth - track.clientWidth - 2);
+            prev.disabled = track.scrollLeft <= 1;
+            next.disabled = track.scrollLeft >= maxLeft;
+        }
+
+        prev.addEventListener("click", function () {
+            track.scrollBy({ left: -getStep(), behavior: "smooth" });
+        });
+
+        next.addEventListener("click", function () {
+            track.scrollBy({ left: getStep(), behavior: "smooth" });
+        });
+
+        track.addEventListener("scroll", syncButtons, { passive: true });
+        window.addEventListener("resize", syncButtons);
+        syncButtons();
+    });
 })();