@edu-tosel/design 1.0.303 → 1.0.304

package/globals.css

@@ -2,6 +2,29 @@
 @tailwind components;
 @tailwind utilities;
 
+/* 기본 HTML 리셋 및 스크롤 제어 */
+html {
+  scroll-behavior: auto; /* smooth scroll 비활성화 */
+  -webkit-overflow-scrolling: auto; /* iOS momentum scrolling 비활성화 */
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: auto; /* iOS momentum scrolling 비활성화 */
+}
+
+#root {
+  min-height: 100vh;
+  width: 100%;
+  overflow-x: hidden;
+}
+
 .image-container {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -59,18 +82,44 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   -webkit-appearance: none;
 }
 
+/* 스크롤바 스타일링 - 스크롤 시에만 표시 */
 ::-webkit-scrollbar {
-  width: 3px;
-  padding-right: 10px;
+  width: 8px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
 }
 
 ::-webkit-scrollbar-track {
-  background-color: transparent;
+  background: transparent;
 }
+
 ::-webkit-scrollbar-thumb {
-  background-color: #808080;
-  opacity: 0.5;
+  background-color: rgba(128, 128, 128, 0.5);
   border-radius: 10px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+  transition: background-color 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(128, 128, 128, 0.8);
+}
+
+/* 스크롤 중일 때 스크롤바 표시 */
+.scrolling::-webkit-scrollbar {
+  opacity: 1;
+}
+
+/* body와 html에도 스크롤바 스타일 적용 */
+body.scrolling::-webkit-scrollbar,
+html.scrolling::-webkit-scrollbar {
+  opacity: 1;
+}
+
+/* Firefox용 스크롤바 (기본적으로 auto-hide) */
+html {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
 }
 
 .box-shadow {
@@ -268,6 +317,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 
 /* related to font rendering in safari engine */
 * {
+  box-sizing: border-box;
   font-synthesis: none !important;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -279,3 +329,13 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   -webkit-mask-composite: destination-in;
   mask-composite: intersect;
 }
+
+/* Navigation이 열렸을 때 스크롤바 완전히 숨김 */
+.navigation-open::-webkit-scrollbar {
+  display: none !important;
+}
+
+.navigation-open {
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}

package/hook/useScrollbarVisibility.d.ts

@@ -0,0 +1 @@
+export default function useScrollbarVisibility(): void;

package/hook/useScrollbarVisibility.js

@@ -0,0 +1,66 @@
+import { useEffect } from "react";
+export default function useScrollbarVisibility() {
+    useEffect(() => {
+        let scrollTimer = null;
+        const handleScroll = () => {
+            // Navigation이 열렸을 때는 스크롤바 제어 비활성화
+            if (document.body.classList.contains("navigation-open")) {
+                return;
+            }
+            // 스크롤 중일 때 클래스 추가
+            document.documentElement.classList.add("scrolling");
+            document.body.classList.add("scrolling");
+            // 기존 타이머 클리어
+            if (scrollTimer) {
+                clearTimeout(scrollTimer);
+            }
+            // 1.5초 후 스크롤바 숨김
+            scrollTimer = setTimeout(() => {
+                document.documentElement.classList.remove("scrolling");
+                document.body.classList.remove("scrolling");
+            }, 1500);
+        };
+        // 스크롤 이벤트 리스너 추가
+        window.addEventListener("scroll", handleScroll, { passive: true });
+        // 마우스가 스크롤바 영역에 있을 때 표시
+        const handleMouseMove = (event) => {
+            // Navigation이 열렸을 때는 스크롤바 제어 비활성화
+            if (document.body.classList.contains("navigation-open")) {
+                return;
+            }
+            const isNearScrollbar = window.innerWidth - event.clientX < 20;
+            if (isNearScrollbar) {
+                document.documentElement.classList.add("scrolling");
+                document.body.classList.add("scrolling");
+            }
+        };
+        const handleMouseLeave = () => {
+            // Navigation이 열렸을 때는 스크롤바 제어 비활성화
+            if (document.body.classList.contains("navigation-open")) {
+                return;
+            }
+            // 마우스가 창을 벗어나면 스크롤바 숨김
+            if (scrollTimer) {
+                clearTimeout(scrollTimer);
+            }
+            scrollTimer = setTimeout(() => {
+                document.documentElement.classList.remove("scrolling");
+                document.body.classList.remove("scrolling");
+            }, 500);
+        };
+        window.addEventListener("mousemove", handleMouseMove, { passive: true });
+        window.addEventListener("mouseleave", handleMouseLeave);
+        // 클린업 함수
+        return () => {
+            if (scrollTimer) {
+                clearTimeout(scrollTimer);
+            }
+            window.removeEventListener("scroll", handleScroll);
+            window.removeEventListener("mousemove", handleMouseMove);
+            window.removeEventListener("mouseleave", handleMouseLeave);
+            // 클래스 제거
+            document.documentElement.classList.remove("scrolling");
+            document.body.classList.remove("scrolling");
+        };
+    }, []);
+}

package/layout/template/home/Float.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { cn } from "../../../util";
 export default function Float({ contents }) {
+    const [hoveredButton, setHoveredButton] = useState(null);
     const container = cn("fixed flex flex-col bottom-20 md:bottom-16 right-5 md:right-16 z-40 overflow-visible", "gap-5");
     const buttonBox = (background) => cn("flex justify-center items-center", "p-1.5 md:p-3", "w-12 h-12 md:w-16 md:h-16", "rounded-full overflow-hidden shadow-main hover:scale-110 duration-300 hover:shadow-icon-hover", background ?? "bg-white");
-    return (_jsx("div", { className: container, children: contents.map(({ image, onClick, background, hoverContent }) => (_jsxs("div", { className: "relative group flex items-center", children: [hoverContent && (_jsx("div", { className: cn("absolute right-full mr-3", "bg-gray-dark text-white text-sm px-5 py-2 rounded shadow-md whitespace-nowrap", "opacity-0 group-hover:opacity-100 transition-opacity duration-200"), children: hoverContent })), _jsx("button", { onClick: onClick, className: buttonBox(background), children: _jsx("img", { src: image, alt: "image", className: "object-contain" }) })] }, image))) }));
+    return (_jsx("div", { className: container, children: contents.map(({ image, onClick, background, hoverContent }, index) => (_jsxs("div", { className: "relative flex items-center", children: [hoverContent && (_jsx("div", { className: cn("absolute right-full mr-3 pointer-events-none", "bg-gray-dark text-white text-sm px-5 py-2 rounded shadow-md whitespace-nowrap", "transition-opacity duration-200", hoveredButton === index ? "opacity-100" : "opacity-0"), children: hoverContent })), _jsx("button", { onClick: onClick, className: buttonBox(background), onMouseEnter: () => setHoveredButton(index), onMouseLeave: () => setHoveredButton(null), children: _jsx("img", { src: image, alt: "image", className: "object-contain" }) })] }, image))) }));
 }

package/layout/template/home/NewsPaper.js

@@ -1,11 +1,41 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../util";
-import { useRef } from "react";
+import { useRef, useState, useEffect } from "react";
 import { Label } from "../../../widget";
 export default function NewsPaper({ banners, browse, option, }) {
     const { className } = option ?? {};
     const scrollContainerRef = useRef(null);
     const cardWidth = 480; //card width
+    // 스크롤 위치 상태 관리
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(true);
+    // 스크롤 위치 확인 함수
+    const checkScrollPosition = () => {
+        if (scrollContainerRef.current) {
+            const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
+            // 왼쪽 끝 확인 (약간의 여유값 포함)
+            setCanScrollLeft(scrollLeft > 5);
+            // 오른쪽 끝 확인 (약간의 여유값 포함)
+            setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 5);
+        }
+    };
+    // 초기 로드시와 banners 변경시 스크롤 위치 확인
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            checkScrollPosition();
+        }, 100); // DOM 렌더링 후 확인
+        return () => clearTimeout(timer);
+    }, [banners]);
+    // 스크롤 이벤트 리스너 등록
+    useEffect(() => {
+        const scrollContainer = scrollContainerRef.current;
+        if (scrollContainer) {
+            scrollContainer.addEventListener("scroll", checkScrollPosition);
+            return () => {
+                scrollContainer.removeEventListener("scroll", checkScrollPosition);
+            };
+        }
+    }, []);
     const handleScroll = (direction) => {
         if (scrollContainerRef.current) {
             const scrollAmount = cardWidth;
@@ -49,23 +79,28 @@ export default function NewsPaper({ banners, browse, option, }) {
         spacings: "gap-5 xl:mr-[calc(100vw-1200px)]",
     };
     const buttonPositioning = {
-        displays: "hidden flex-row md:flex",
+        displays: "flex flex-row",
         sizes: "w-full h-full",
-        spacings: "xl:pl-[calc(50vw-600px)] md:pl-[62px] pl-2 pr-2",
-        positions: "absolute top-0 left-0 justify-between items-center opacity-0 group-hover:opacity-100 duration-300",
+        spacings: "xl:pr-[calc(50vw-600px)] md:pr-[62px] pl-2 pr-4 gap-5",
+        positions: "justify-end items-center duration-300",
         hovering: "group pointer-events-none",
     };
     const hoverButton = {
-        sizes: "rounded-full w-12 h-12 scale-50 group-hover:scale-100",
-        animation: "duration-300 ",
-        test: "bg-gray-medium/20 hover:bg-gray-medium/50 pointer-events-auto backdrop-blur-sm fill-red-500",
+        sizes: "rounded-full w-9 h-9",
+        animation: "duration-300",
+        test: "bg-gray-medium/50 hover:bg-gray-medium pointer-events-auto backdrop-blur-sm",
+    };
+    const disabledButton = {
+        sizes: "rounded-full w-9 h-9",
+        animation: "duration-300",
+        test: "bg-gray-medium/20 pointer-events-none backdrop-blur-sm opacity-30",
     };
     return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(deckTitlePositioning), children: _jsxs("div", { className: cn(deckTitle), children: [_jsx("div", { children: "\uC0C8\uB85C\uC6B4 \uC18C\uC2DD" }), _jsx(Label.Button, { title: "\uB354 \uBCF4\uAE30", onClick: browse, option: {
                                 width: "xs",
                                 height: "xs",
                                 text: "text-white hover:text-green-dark font-bold",
                                 background: "bg-green-dark hover:bg-green-light",
-                            } })] }) }), _jsx("div", { className: cn(cardPositioning), children: _jsx("div", { className: cn(cardWrapper), ref: scrollContainerRef, children: _jsx("div", { className: cn(cardDeck), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.image.src))) }) }) }), _jsxs("div", { className: cn(buttonPositioning), children: [_jsx("div", { className: cn(hoverButton), onClick: () => handleScroll("left"), children: _jsx("img", { src: "images/home/handle-left.svg", alt: "" }) }), _jsx("div", { className: cn(hoverButton), onClick: () => handleScroll("right"), children: _jsx("img", { src: "images/home/handle-right.svg", alt: "" }) })] })] }));
+                            } })] }) }), _jsx("div", { className: cn(cardPositioning), children: _jsx("div", { className: cn(cardWrapper), ref: scrollContainerRef, children: _jsx("div", { className: cn(cardDeck), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.image.src))) }) }) }), _jsxs("div", { className: cn(buttonPositioning), children: [_jsx("div", { className: cn(canScrollLeft ? hoverButton : disabledButton), onClick: canScrollLeft ? () => handleScroll("left") : undefined, children: _jsx("img", { src: "images/home/handle-left.svg", alt: "" }) }), _jsx("div", { className: cn(canScrollRight ? hoverButton : disabledButton), onClick: canScrollRight ? () => handleScroll("right") : undefined, children: _jsx("img", { src: "images/home/handle-right.svg", alt: "" }) })] })] }));
 }
 function Banner({ onClick, image, option }) {
     const { background } = option ?? {};

package/layout/template/home/Service.js

@@ -1,9 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
+import { useRef, useState, useEffect } from "react";
 import { cn } from "../../../util";
 export default function Service({ banners }) {
     const scrollContainerRef = useRef(null);
     const cardWidth = 400; // card width
+    // 스크롤 위치 상태 관리
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(true);
+    // 스크롤 위치 확인 함수
+    const checkScrollPosition = () => {
+        if (scrollContainerRef.current) {
+            const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
+            // 왼쪽 끝 확인 (약간의 여유값 포함)
+            setCanScrollLeft(scrollLeft > 5);
+            // 오른쪽 끝 확인 (약간의 여유값 포함)
+            setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 5);
+        }
+    };
+    // 초기 로드시와 banners 변경시 스크롤 위치 확인
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            checkScrollPosition();
+        }, 100); // DOM 렌더링 후 확인
+        return () => clearTimeout(timer);
+    }, [banners]);
+    // 스크롤 이벤트 리스너 등록
+    useEffect(() => {
+        const scrollContainer = scrollContainerRef.current;
+        if (scrollContainer) {
+            scrollContainer.addEventListener("scroll", checkScrollPosition);
+            return () => {
+                scrollContainer.removeEventListener("scroll", checkScrollPosition);
+            };
+        }
+    }, []);
     const handleScroll = (direction) => {
         if (scrollContainerRef.current) {
             const scrollAmount = cardWidth;
@@ -48,18 +78,23 @@ export default function Service({ banners }) {
         spacings: "gap-5 xl:mr-[calc(100vw-1200px)]",
     };
     const buttonPositioning = {
-        displays: "hidden flex-row md:flex",
+        displays: "flex flex-row",
         sizes: "w-full h-full",
-        spacings: "xl:pl-[calc(50vw-600px)] md:pl-[62px] pl-2 pr-2",
-        positions: "absolute top-0 left-0 justify-between items-center opacity-0 group-hover:opacity-100 duration-300",
+        spacings: "xl:pr-[calc(50vw-600px)] md:pr-[62px] pl-2 pr-4 gap-5",
+        positions: "justify-end items-center duration-300",
         hovering: "group pointer-events-none",
     };
     const hoverButton = {
-        sizes: "rounded-full w-12 h-12 scale-50 group-hover:scale-100",
-        animation: "duration-300 ",
-        test: "bg-gray-medium/20 hover:bg-gray-medium/50 pointer-events-auto backdrop-blur-sm fill-red-500",
+        sizes: "rounded-full w-9 h-9",
+        animation: "duration-300",
+        test: "bg-gray-medium/50 hover:bg-gray-medium pointer-events-auto backdrop-blur-sm",
+    };
+    const disabledButton = {
+        sizes: "rounded-full w-9 h-9",
+        animation: "duration-300",
+        test: "bg-gray-medium/20 pointer-events-none backdrop-blur-sm opacity-30",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(deckTitlePositioning), children: _jsx("div", { className: cn(deckTitle), children: "\uD1A0\uC140\uC758 \uCC28\uBCC4\uD654\uB41C \uC11C\uBE44\uC2A4" }) }), _jsx("div", { className: cn(cardPositioning), children: _jsx("div", { className: cn(cardWrapper), ref: scrollContainerRef, children: _jsx("div", { className: cn(cardDeck), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.titles.title))) }) }) }), _jsxs("div", { className: cn(buttonPositioning), children: [_jsx("div", { className: cn(hoverButton), onClick: () => handleScroll("left"), children: _jsx("img", { src: "images/home/handle-left.svg", alt: "" }) }), _jsx("div", { className: cn(hoverButton), onClick: () => handleScroll("right"), children: _jsx("img", { src: "images/home/handle-right.svg", alt: "" }) })] })] }));
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(deckTitlePositioning), children: _jsx("div", { className: cn(deckTitle), children: "\uD1A0\uC140\uC758 \uCC28\uBCC4\uD654\uB41C \uC11C\uBE44\uC2A4" }) }), _jsx("div", { className: cn(cardPositioning), children: _jsx("div", { className: cn(cardWrapper), ref: scrollContainerRef, children: _jsx("div", { className: cn(cardDeck), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.titles.title))) }) }) }), _jsxs("div", { className: cn(buttonPositioning), children: [_jsx("div", { className: cn(canScrollLeft ? hoverButton : disabledButton), onClick: canScrollLeft ? () => handleScroll("left") : undefined, children: _jsx("img", { src: "images/home/handle-left.svg", alt: "" }) }), _jsx("div", { className: cn(canScrollRight ? hoverButton : disabledButton), onClick: canScrollRight ? () => handleScroll("right") : undefined, children: _jsx("img", { src: "images/home/handle-right.svg", alt: "" }) })] })] }));
 }
 function Banner({ titles, onClick, image, option }) {
     const { background } = option ?? {};

package/layout/template/home/layout/Carousel.js

@@ -64,9 +64,9 @@ export default function Carousel({ contents, option, }) {
         animations: "duration-300",
     };
     const titleWrapper = {
-        displays: "flex flex-col xxs:flex-row xxs:items-center md:items-start md:flex-col",
-        sizes: "w-full h-fit xxs:w-fit md:w-72",
-        spacings: "mt-4 px-5 xxs:mt-8 xxs:gap-8 md:p-0 md:mt-0 md:gap-6 md:pl-7.5",
+        displays: "static md:relative flex flex-col xxs:flex-row xxs:items-center md:items-start md:flex-col",
+        sizes: "w-full h-fit xxs:h-full xxs:w-fit md:w-72",
+        spacings: "mt-4 px-5 xxs:mt-8 xxs:gap-8 md:p-0 md:mt-0 md:gap-6 md:pl-7.5 md:pt-20",
         animations: "duration-500",
     };
     const titleSet = {
@@ -93,15 +93,15 @@ export default function Carousel({ contents, option, }) {
         styles: "rounded-md",
     };
     const buttonBoxPosition = {
-        display: "absolute flex justify-center items-center md:static md:justify-start",
+        display: "absolute flex justify-center items-center md:justify-start",
         sizes: "w-full h-fit left-0 bottom-0 z-10",
-        spacings: "ml-0 md:ml-10 xm:ml-0",
+        spacings: "ml-0 md:ml-[calc(70px)] xm:ml-7.5",
     };
     const buttonBox = {
         displays: "relative justify-center items-center gap-1 flex z-10",
         animations: "duration-500",
         sizes: "w-34 h-10 md:h-6.25 md:w-26 bg-gray-dark rounded-full",
-        paddings: "px-1.5 mt-0 mb-5 md:mt-12 ",
+        paddings: "px-1.5 mt-0 mb-5 md:mb-17 ",
     };
     const handlePosition = {
         displays: "absolute flex justify-between items-center",

package/layout/template/home/layout/Header.js

@@ -5,8 +5,10 @@ import { Label } from "../../../../widget";
 import { useResponsive } from "../../../../hook";
 export default function Header({ logo, rightButton, contents, }) {
     const [isExpanded, setIsExpanded] = useState(false);
+    const [hasToggled, setHasToggled] = useState(false);
     const toggleHeight = () => {
         setIsExpanded(!isExpanded);
+        setHasToggled(true); // 한 번이라도 토글되었음을 표시
     };
     const handleClickOutside = (event) => {
         const menuElement = document.getElementById("buttonArea");
@@ -34,7 +36,11 @@ export default function Header({ logo, rightButton, contents, }) {
         sizes: "w-full",
         styles: "bg-white  box-shadow",
         textstyles: "antialiased",
-        animation: !isMD && isExpanded ? "animate-grow" : "animate-shrink"
+        animation: hasToggled && !isMD
+            ? isExpanded
+                ? "animate-grow"
+                : "animate-shrink"
+            : "",
     };
     const body = {
         displays: "flex md:flex-row flex-col md:items-center items-start justify-between",
@@ -53,7 +59,7 @@ export default function Header({ logo, rightButton, contents, }) {
         animations: "duration-300",
         sizes: "h-10 rounded-md w-fit flex-none",
         spacings: "px-2.5",
-        scrollMargin: "translate-x-5 md:translate-x-0 "
+        scrollMargin: "translate-x-5 md:translate-x-0 ",
     };
     const leftWrapper = {
         displays: "flex flex-row gap-6 items-center flex-none",
@@ -79,7 +85,7 @@ export default function Header({ logo, rightButton, contents, }) {
                                         height: "xs",
                                         background: gradient.bg.greenToRed,
                                         text: "text-white",
-                                    } })), _jsx("button", { onClick: toggleHeight, className: cn(menuButton), children: _jsx("div", { className: "w-6 h-6", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: [!isExpanded && _jsx("path", { id: "menu", fill: "#B0B8C1", d: "M4.118 6.2h16a1.2 1.2 0 100-2.4h-16a1.2 1.2 0 100 2.4m16 4.6h-16a1.2 1.2 0 100 2.4h16a1.2 1.2 0 100-2.4m0 7h-16a1.2 1.2 0 100 2.4h16a1.2 1.2 0 100-2.4", "fill-rule": "evenodd" }), isExpanded && _jsx("path", { id: "close", fill: "#B0B8C1", "fill-rule": "evenodd", d: "M13.815 12l5.651-5.651a1.2 1.2 0 00-1.697-1.698l-5.651 5.652-5.652-5.652a1.201 1.201 0 00-1.697 1.698L10.421 12l-5.652 5.651a1.202 1.202 0 00.849 2.049c.307 0 .614-.117.848-.351l5.652-5.652 5.651 5.652a1.198 1.198 0 001.697 0 1.2 1.2 0 000-1.698L13.815 12z" })] }) }) })] })] }), _jsxs("div", { className: cn(rightWrapper), children: [_jsx("div", { className: cn(buttonBoxWrapper), children: contents.map((button, index) => (_jsx("button", { onClick: button.onClick, className: cn(buttonBox), children: button.title }, index))) }), _jsx("div", { className: "hidden md:block", children: rightButton && (_jsx(Label.Button, { title: rightButton.title, onClick: rightButton?.onClick, option: {
+                                    } })), _jsx("button", { onClick: toggleHeight, className: cn(menuButton), children: _jsx("div", { className: "w-6 h-6", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: [!isExpanded && (_jsx("path", { id: "menu", fill: "#B0B8C1", d: "M4.118 6.2h16a1.2 1.2 0 100-2.4h-16a1.2 1.2 0 100 2.4m16 4.6h-16a1.2 1.2 0 100 2.4h16a1.2 1.2 0 100-2.4m0 7h-16a1.2 1.2 0 100 2.4h16a1.2 1.2 0 100-2.4", "fill-rule": "evenodd" })), isExpanded && (_jsx("path", { id: "close", fill: "#B0B8C1", "fill-rule": "evenodd", d: "M13.815 12l5.651-5.651a1.2 1.2 0 00-1.697-1.698l-5.651 5.652-5.652-5.652a1.201 1.201 0 00-1.697 1.698L10.421 12l-5.652 5.651a1.202 1.202 0 00.849 2.049c.307 0 .614-.117.848-.351l5.652-5.652 5.651 5.652a1.198 1.198 0 001.697 0 1.2 1.2 0 000-1.698L13.815 12z" }))] }) }) })] })] }), _jsxs("div", { className: cn(rightWrapper), children: [_jsx("div", { className: cn(buttonBoxWrapper), children: contents.map((button, index) => (_jsx("button", { onClick: button.onClick, className: cn(buttonBox), children: button.title }, index))) }), _jsx("div", { className: "hidden md:block", children: rightButton && (_jsx(Label.Button, { title: rightButton.title, onClick: rightButton?.onClick, option: {
                                     width: "2xs",
                                     height: "xs",
                                     background: gradient.bg.greenToRed,

package/layout/template/home/layout/Navigation.js

@@ -25,18 +25,81 @@ export default function Navigation({ browser, calendar, notice, event, }) {
     });
     // Scroll Lock 처리
     useEffect(() => {
-        const preventScroll = (e) => e.preventDefault();
+        const preventScroll = (e) => {
+            // Navigation 내부 요소에서 발생한 이벤트는 허용
+            const target = e.target;
+            const navigationContainer = target?.closest("[data-navigation-content]");
+            if (navigationContainer) {
+                return;
+            }
+            e.preventDefault();
+        };
+        const preventWheel = (e) => {
+            // Navigation 내부 요소에서 발생한 이벤트는 허용
+            const target = e.target;
+            const navigationContainer = target?.closest("[data-navigation-content]");
+            if (navigationContainer) {
+                return;
+            }
+            e.preventDefault();
+        };
+        const preventKeyScroll = (e) => {
+            // Navigation 내부 요소에서 발생한 이벤트는 허용
+            const target = e.target;
+            const navigationContainer = target?.closest("[data-navigation-content]");
+            if (navigationContainer) {
+                return;
+            }
+            // 스크롤 관련 키 차단
+            if ([
+                "ArrowUp",
+                "ArrowDown",
+                "PageUp",
+                "PageDown",
+                "Home",
+                "End",
+                " ",
+            ].includes(e.key)) {
+                e.preventDefault();
+            }
+        };
         if (isOpen) {
+            // 스크롤 완전 차단
             document.body.style.overflow = "hidden";
+            document.documentElement.style.overflow = "hidden";
+            // 터치 스크롤 차단
             document.addEventListener("touchmove", preventScroll, { passive: false });
+            // 마우스 휠 스크롤 차단
+            document.addEventListener("wheel", preventWheel, { passive: false });
+            // 키보드 스크롤 차단
+            document.addEventListener("keydown", preventKeyScroll, {
+                passive: false,
+            });
+            // 스크롤바 가시성 제어 비활성화
+            document.documentElement.classList.add("navigation-open");
+            document.body.classList.add("navigation-open");
         }
         else {
+            // 스크롤 복원
             document.body.style.overflow = "";
+            document.documentElement.style.overflow = "";
+            // 이벤트 리스너 제거
             document.removeEventListener("touchmove", preventScroll);
+            document.removeEventListener("wheel", preventWheel);
+            document.removeEventListener("keydown", preventKeyScroll);
+            // 스크롤바 가시성 제어 복원
+            document.documentElement.classList.remove("navigation-open");
+            document.body.classList.remove("navigation-open");
         }
         return () => {
+            // 클린업
             document.body.style.overflow = "";
+            document.documentElement.style.overflow = "";
             document.removeEventListener("touchmove", preventScroll);
+            document.removeEventListener("wheel", preventWheel);
+            document.removeEventListener("keydown", preventKeyScroll);
+            document.documentElement.classList.remove("navigation-open");
+            document.body.classList.remove("navigation-open");
         };
     }, [isOpen]);
     useEffect(() => {
@@ -130,7 +193,7 @@ export default function Navigation({ browser, calendar, notice, event, }) {
         textStyles: "text-lg font-bold text-green-dark",
     };
     return (_jsxs(_Fragment, { children: [overlayCoverTransition((styles, item) => item && (_jsx(animated.div, { style: styles, className: "bg-white h-screen fixed top-0 left-0 z-40 flex flex-col justify-center items-center overflow-hidden gap-y-14 ", children: _jsxs("div", { className: "flex flex-col justify-center items-center overflow-hidden gap-y-14 transition-none", children: [_jsx("img", { src: "/images/logos/tosel.png", alt: "tosel", width: 368.56, height: 80.07 }), _jsxs("div", { role: "status", children: [_jsxs("svg", { "aria-hidden": "true", className: "w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-green-dark", viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", fill: "currentColor" }), _jsx("path", { d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", fill: "currentFill" })] }), _jsx("span", { className: "sr-only", children: "Loading..." })] }), _jsx("div", { children: "dashboard loading..." })] }) }))), overlayPopTransition((styles, item) => type &&
-                item && (_jsx(animated.div, { style: styles, className: cn(blurContainer), children: _jsxs("div", { className: cn(itemBody), onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: cn(scrollTitleWrapper), children: [_jsx("div", { className: cn(scrollTitle), children: navigationTypeString[type] }), _jsx("div", { className: "" })] }), _jsx("div", { className: cn(itemsContainer), children: _jsx(NavigationItem, { type: type, calendar: calendar, notice: notice, event: event }) })] }) }))), _jsx("div", { className: "fixed bottom-0 md:top-1/2 md:-translate-y-1/2 flex justify-center items-center z-45", children: _jsxs("div", { onClick: (e) => e.stopPropagation(), className: cn(container), children: [_jsx("button", { className: cn(iconWrapper), onClick: () => handleOpen("calendar"), "data-tooltip": "\uC2DC\uD5D8\uC77C\uC815", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, children: _jsx(SVG.Icon.Calendar, { size: isMobile ? "md" : "lg" }) }), _jsx("button", { className: cn(iconWrapper), onClick: () => handleOpen("notification"), "data-tooltip": "\uACF5\uC9C0\uC0AC\uD56D", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, children: _jsx(SVG.Icon.Notification, { size: isMobile ? "md" : "lg" }) }), _jsx("button", { className: cn(iconWrapper), onClick: () => handleOpen("search"), "data-tooltip": "\uAC80\uC0C9\uD558\uAE30", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, children: _jsx(SVG.Icon.Search, { size: isMobile ? "md" : "lg" }) }), _jsx("button", { className: cn(iconWrapper), onClick: () => handleOpen("browser"), "data-tooltip": "\uB300\uC2DC\uBCF4\uB4DC", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, children: _jsx(SVG.Icon.Browser, { size: isMobile ? "md" : "lg" }) }), _jsx("button", { className: cn(iconWrapper), onClick: () => handleOpen("event"), "data-tooltip": "\uC0C8\uC18C\uC2DD", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, children: _jsx(SVG.Icon.Newspaper, { size: isMobile ? "md" : "lg" }) }), tooltipText && (_jsx("div", { className: "absolute bg-gray-900 text-white text-sm px-3 py-1 rounded-lg transition-opacity duration-200 w-20 text-center", style: {
+                item && (_jsx(animated.div, { style: styles, className: cn(blurContainer), children: _jsxs("div", { className: cn(itemBody), onClick: (e) => e.stopPropagation(), "data-navigation-content": true, children: [_jsxs("div", { className: cn(scrollTitleWrapper), children: [_jsx("div", { className: cn(scrollTitle), children: navigationTypeString[type] }), _jsx("div", { className: "" })] }), _jsx("div", { className: cn(itemsContainer), children: _jsx(NavigationItem, { type: type, calendar: calendar, notice: notice, event: event }) })] }) }))), _jsx("div", { className: "fixed bottom-0 md:top-1/2 md:-translate-y-1/2 flex justify-center items-center z-45", children: _jsxs("div", { onClick: (e) => e.stopPropagation(), className: cn(container), children: [_jsx("button", { className: cn(iconWrapper), onClick: () => handleOpen("calendar"), "data-tooltip": "\uC2DC\uD5D8\uC77C\uC815", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, children: _jsx(SVG.Icon.Calendar, { size: isMobile ? "md" : "lg" }) }), _jsx("button", { className: cn(iconWrapper), onClick: () => handleOpen("notification"), "data-tooltip": "\uACF5\uC9C0\uC0AC\uD56D", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, children: _jsx(SVG.Icon.Notification, { size: isMobile ? "md" : "lg" }) }), _jsx("button", { className: cn(iconWrapper), onClick: () => handleOpen("search"), "data-tooltip": "\uAC80\uC0C9\uD558\uAE30", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, children: _jsx(SVG.Icon.Search, { size: isMobile ? "md" : "lg" }) }), _jsx("button", { className: cn(iconWrapper), onClick: () => handleOpen("browser"), "data-tooltip": "\uB300\uC2DC\uBCF4\uB4DC", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, children: _jsx(SVG.Icon.Browser, { size: isMobile ? "md" : "lg" }) }), _jsx("button", { className: cn(iconWrapper), onClick: () => handleOpen("event"), "data-tooltip": "\uC0C8\uC18C\uC2DD", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, children: _jsx(SVG.Icon.Newspaper, { size: isMobile ? "md" : "lg" }) }), tooltipText && (_jsx("div", { className: "absolute bg-gray-900 text-white text-sm px-3 py-1 rounded-lg transition-opacity duration-200 w-20 text-center", style: {
                                 left: `${position.x}px`,
                                 top: `${position.y}px`,
                                 pointerEvents: "none",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.303",
+  "version": "1.0.304",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/version.txt

@@ -1 +1 @@
-1.0.303
+1.0.304