From 6595d55532a65aaa5cd41d0e782eaee907f6b2f6 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Wed, 10 Jun 2026 19:26:55 +0900
Subject: [PATCH] =?UTF-8?q?fix(pc):=20=EA=B0=80=EB=A1=9C=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=EB=B0=94=20=EC=9E=A1=EA=B8=B0=20=EC=96=B4?=
 =?UTF-8?q?=EB=A0=A4=EC=9A=B4=20=EB=AC=B8=EC=A0=9C=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

핸들이 7px로 얇고 트랙 클릭(clickScroll)이 기본 꺼져 있어, 핸들을
2~3px 빗나가게 클릭하면 아무 반응이 없어 드래그가 안 되는 것처럼
느껴지던 문제. 스크롤바 14px/핸들 8px로 키우고 ClickScrollPlugin 등록 +
clickScroll 활성화로 트랙 클릭 시에도 스크롤되도록 변경.
헤드리스 브라우저로 핸들 드래그·트랙 클릭 동작 검증 완료.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/components/pc/admin/layout/Layout.jsx  | 8 ++++++--
 frontend/src/components/pc/public/layout/Layout.jsx | 8 ++++++--
 frontend/src/index.css                              | 4 ++--
 3 files changed, 14 insertions(+), 6 deletions(-)

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;
 }