feat(pc): 페이지 스크롤바를 OverlayScrollbars로 교체

#root의 min-width(1440)를 스크롤 컨테이너(main) 내부 콘텐츠로 옮기고
main에 OverlayScrollbars 적용. 1440 미만으로 줄여도 세로 스크롤바가
뷰포트 끝에 항상 보이고 가로 스크롤이 생김(maplestory 방식). 헤더 고정
모델 유지, 일정 페이지는 기존 내부 스크롤 유지. 공개/관리자 레이아웃 동일 적용.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/components/pc/admin/layout/Layout.jsx

@@ -4,9 +4,14 @@
  * 헤더 고정 + 본문 스크롤 구조
  */
 import { useLocation } from 'react-router-dom';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import { useAuthStore } from '@/stores';
 import Header from './Header';
 
+const OS_OPTIONS = {
+  scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600 },
+};
+
 function AdminLayout({ user, children }) {
   const location = useLocation();
   const { token } = useAuthStore();
@@ -22,9 +27,20 @@ function AdminLayout({ user, children }) {
   return (
     <div className="h-screen overflow-hidden flex flex-col bg-gray-50">
       <Header user={user} />
-      <main className={`flex-1 min-h-0 ${isSchedulePage ? 'overflow-hidden' : 'overflow-y-auto'}`}>
-        {children}
-      </main>
+      {isSchedulePage ? (
+        <main className="flex-1 min-h-0 overflow-hidden">
+          <div className="min-w-[1440px] h-full">{children}</div>
+        </main>
+      ) : (
+        <OverlayScrollbarsComponent
+          element="main"
+          className="flex-1 min-h-0"
+          options={OS_OPTIONS}
+          defer
+        >
+          <div className="min-w-[1440px] min-h-full">{children}</div>
+        </OverlayScrollbarsComponent>
+      )}
     </div>
   );
 }

frontend/src/components/pc/public/layout/Layout.jsx

@@ -1,8 +1,14 @@
 import { useLocation } from 'react-router-dom';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import Header from './Header';
 import Footer from './Footer';
 import '@/pc.css';
 
+// 페이지(main) 오버레이 스크롤바 옵션 — 화면을 밀지 않고 뷰포트 끝에 고정
+const OS_OPTIONS = {
+  scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600 },
+};
+
 /**
  * PC 레이아웃 컴포넌트
  */
@@ -22,14 +28,26 @@ function Layout({ children }) {
   return (
     <div className="h-screen overflow-hidden flex flex-col">
       <Header />
-      <main
-        className={`flex-1 min-h-0 flex flex-col ${
-          isSchedulePage ? 'overflow-hidden' : 'overflow-y-auto'
-        }`}
-      >
-        <div className="flex-1 flex flex-col">{children}</div>
-        {!hideFooter && <Footer />}
-      </main>
+      {isSchedulePage ? (
+        // 일정 페이지: 자체 내부 스크롤 (페이지 스크롤 없음)
+        <main className="flex-1 min-h-0 overflow-hidden flex flex-col">
+          <div className="min-w-[1440px] flex-1 flex flex-col">{children}</div>
+        </main>
+      ) : (
+        // 그 외: 오버레이 스크롤바. min-width는 콘텐츠에 둬서 1440 미만이면
+        // 가로 스크롤이 생기고 세로 스크롤바는 뷰포트 끝에 항상 보임.
+        <OverlayScrollbarsComponent
+          element="main"
+          className="flex-1 min-h-0"
+          options={OS_OPTIONS}
+          defer
+        >
+          <div className="min-w-[1440px] flex flex-col min-h-full">
+            <div className="flex-1 flex flex-col">{children}</div>
+            {!hideFooter && <Footer />}
+          </div>
+        </OverlayScrollbarsComponent>
+      )}
     </div>
   );
 }

frontend/src/index.css

@@ -1,7 +1,18 @@
+@import "overlayscrollbars/overlayscrollbars.css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+/* OverlayScrollbars 페이지(main) 스크롤바 테마 — primary green */
+.os-theme-fromis {
+  --os-handle-bg: rgba(84, 131, 96, 0.5);
+  --os-handle-bg-hover: rgba(84, 131, 96, 0.78);
+  --os-handle-bg-active: rgba(69, 110, 80, 0.9);
+  --os-size: 11px;
+  --os-padding-perpendicular: 2px;
+  --os-padding-axis: 2px;
+}
+
 /* 기본 스타일 */
 body {
   background-color: #fafafa;

frontend/src/pc.css

@@ -7,8 +7,8 @@ body.is-pc {
   overflow: hidden;
 }
 
-/* PC 최소 너비 설정 */
+/* PC: #root는 뷰포트 너비를 유지하고, 최소 너비(1440)는 스크롤 컨테이너
+   내부 콘텐츠에 적용 → 1440 미만이면 가로 스크롤 + 세로 스크롤바는 뷰포트 끝에 고정 */
 body.is-pc #root {
-  min-width: 1440px;
   height: 100%;
 }