From 734fc59bb24988ec8b96dddd802f15ddb0a9c64e Mon Sep 17 00:00:00 2001 From: caadiq Date: Wed, 10 Jun 2026 19:43:46 +0900 Subject: [PATCH] =?UTF-8?q?fix(pc):=20=EC=8A=A4=ED=81=AC=EB=A1=A4=EB=B0=94?= =?UTF-8?q?=20clickScroll=EC=9D=84=20'instant'=EB=A1=9C=20=E2=80=94=20?= =?UTF-8?q?=EC=BB=A4=EC=84=9C=20=ED=81=B4=EB=A6=AD=EC=A0=90=20=EC=96=B4?= =?UTF-8?q?=EA=B8=8B=EB=82=A8=EC=97=90=20=EB=91=94=EA=B0=90=ED=95=98?= =?UTF-8?q?=EA=B2=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 사용자 환경에서 커서가 가리키는 지점과 실제 클릭 좌표가 수 px 어긋나 (maplestory에서도 동일 확인), 세로 8px 핸들을 조준해도 클릭이 핸들 밖 트랙에 떨어져 드래그가 간헐적으로 안 잡히던 문제. 'instant' 모드는 스크롤바 띠(14px) 어디를 눌러도 핸들이 그 위치로 즉시 점프하고 그대로 드래그가 이어져 정밀 조준이 불필요. ClickScrollPlugin은 불필요해져 제거. 헤드리스로 트랙 press→점프→연속 드래그 검증 완료. Co-Authored-By: Claude Opus 4.7 --- frontend/src/components/pc/admin/layout/Layout.jsx | 8 ++------ frontend/src/components/pc/public/layout/Layout.jsx | 8 ++------ 2 files changed, 4 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/pc/admin/layout/Layout.jsx b/frontend/src/components/pc/admin/layout/Layout.jsx index 638135a..63cbe0e 100644 --- a/frontend/src/components/pc/admin/layout/Layout.jsx +++ b/frontend/src/components/pc/admin/layout/Layout.jsx @@ -4,19 +4,15 @@ * 헤더 고정 + 본문 스크롤 구조 */ 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, clickScroll: true }, + scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600, clickScroll: 'instant' }, }; const OS_OPTIONS_X = { - scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600, clickScroll: true }, + scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600, clickScroll: 'instant' }, overflow: { y: 'hidden' }, }; diff --git a/frontend/src/components/pc/public/layout/Layout.jsx b/frontend/src/components/pc/public/layout/Layout.jsx index c1655ff..5814695 100644 --- a/frontend/src/components/pc/public/layout/Layout.jsx +++ b/frontend/src/components/pc/public/layout/Layout.jsx @@ -1,20 +1,16 @@ 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, clickScroll: true }, + scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600, clickScroll: 'instant' }, }; // 일정 페이지: 세로는 내부에서 처리하므로 가로 스크롤만 const OS_OPTIONS_X = { - scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600, clickScroll: true }, + scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600, clickScroll: 'instant' }, overflow: { y: 'hidden' }, };