From 5aca8d97d170d96c0bbbd35efcc1ee4e9e4fff8c Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sun, 7 Jun 2026 17:23:24 +0900
Subject: [PATCH] =?UTF-8?q?feat(pc):=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=EB=B0=94=EB=A5=BC=20OverlayScrollba?=
 =?UTF-8?q?rs=EB=A1=9C=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

diff --git a/frontend/src/components/pc/admin/layout/Layout.jsx b/frontend/src/components/pc/admin/layout/Layout.jsx
index 63059b5..fd64ef1 100644
--- a/frontend/src/components/pc/admin/layout/Layout.jsx
+++ b/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>
   );
 }
diff --git a/frontend/src/components/pc/public/layout/Layout.jsx b/frontend/src/components/pc/public/layout/Layout.jsx
index f8d102d..d3d51fc 100644
--- a/frontend/src/components/pc/public/layout/Layout.jsx
+++ b/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>
   );
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 8e58216..f1d82ba 100644
--- a/frontend/src/index.css
+++ b/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;
diff --git a/frontend/src/pc.css b/frontend/src/pc.css
index 3d217c9..f59fb31 100644
--- a/frontend/src/pc.css
+++ b/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%;
 }