diff --git a/frontend/src/components/pc/admin/layout/Layout.jsx b/frontend/src/components/pc/admin/layout/Layout.jsx index a7d91d9..3b5446a 100644 --- a/frontend/src/components/pc/admin/layout/Layout.jsx +++ b/frontend/src/components/pc/admin/layout/Layout.jsx @@ -4,15 +4,19 @@ * 헤더 고정 + 본문 스크롤 구조 */ import { useLocation } from 'react-router-dom'; +import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import { useAuthStore } from '@/stores'; import Header from './Header'; +// 트랙 클릭 시 해당 방향으로 스크롤 (핸들을 빗나가게 클릭해도 동작) +OverlayScrollbars.plugin(ClickScrollPlugin); + const OS_OPTIONS = { - scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600 }, + scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600, clickScroll: true }, }; const OS_OPTIONS_X = { - scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600 }, + scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600, clickScroll: true }, overflow: { y: 'hidden' }, }; diff --git a/frontend/src/components/pc/public/layout/Layout.jsx b/frontend/src/components/pc/public/layout/Layout.jsx index 0b90eed..1b40ba7 100644 --- a/frontend/src/components/pc/public/layout/Layout.jsx +++ b/frontend/src/components/pc/public/layout/Layout.jsx @@ -1,16 +1,20 @@ import { useLocation } from 'react-router-dom'; +import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import Header from './Header'; import Footer from './Footer'; import '@/pc.css'; +// 트랙 클릭 시 해당 방향으로 스크롤 (핸들을 빗나가게 클릭해도 동작) +OverlayScrollbars.plugin(ClickScrollPlugin); + // 페이지 오버레이 스크롤바 옵션 — 화면을 밀지 않고 뷰포트 끝에 고정 const OS_OPTIONS = { - scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600 }, + scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600, clickScroll: true }, }; // 일정 페이지: 세로는 내부에서 처리하므로 가로 스크롤만 const OS_OPTIONS_X = { - scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600 }, + scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600, clickScroll: true }, overflow: { y: 'hidden' }, }; diff --git a/frontend/src/index.css b/frontend/src/index.css index 981e506..bdd56fe 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -8,9 +8,9 @@ --os-handle-bg: #548360; --os-handle-bg-hover: #456e50; --os-handle-bg-active: #456e50; - --os-size: 11px; + --os-size: 14px; --os-handle-border-radius: 9999px; - --os-padding-perpendicular: 2px; + --os-padding-perpendicular: 3px; --os-padding-axis: 2px; }