caadiq/fromis_9
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(pc): 헤더를 가로 스크롤 영역에 포함 (1440 미만 줄바꿈 해결)

Browse source 
min-width를 main 콘텐츠로 옮기면서 헤더만 뷰포트 너비가 돼 메뉴가
줄바꿈되던 문제 수정. 헤더+본문을 하나의 OS 컨테이너(min-w-1440)로 묶어
1440 미만이면 헤더까지 함께 가로 스크롤되고, 헤더는 sticky top-0으로
세로 스크롤 시 고정. 일정 페이지는 가로 스크롤만(세로는 내부 처리).
공개/관리자 레이아웃 동일 적용.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-06-10 19:17:00 +09:00
parent 9dc2667741
commit e5f9ee70ea
2 changed files with 46 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
frontend/src/components/pc/admin/layout/Layout.jsx
View file

@ -11,6 +11,10 @@ import Header from './Header';
const OS_OPTIONS = {
scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600 },
};
const OS_OPTIONS_X = {
scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600 },
overflow: { y: 'hidden' },
};
function AdminLayout({ user, children }) {
const location = useLocation();
@ -25,23 +29,21 @@ function AdminLayout({ user, children }) {
const isSchedulePage = location.pathname === '/admin/schedule';
return (
<div className="h-screen overflow-hidden flex flex-col bg-gray-50">
<Header user={user} />
{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>
isSchedulePage ? (
<OverlayScrollbarsComponent element="div" className="h-screen" options={OS_OPTIONS_X} defer>
<div className="min-w-[1440px] h-screen flex flex-col bg-gray-50">
<div className="sticky top-0 z-30"><Header user={user} /></div>
<main className="flex-1 min-h-0 overflow-hidden">{children}</main>
</div>
</OverlayScrollbarsComponent>
) : (
<OverlayScrollbarsComponent element="div" className="h-screen" options={OS_OPTIONS} defer>
<div className="min-w-[1440px] min-h-screen flex flex-col bg-gray-50">
<div className="sticky top-0 z-30"><Header user={user} /></div>
<main className="flex-1">{children}</main>
</div>
</OverlayScrollbarsComponent>
)
);
}

50
frontend/src/components/pc/public/layout/Layout.jsx
View file

@ -4,10 +4,15 @@ import Header from './Header';
import Footer from './Footer';
import '@/pc.css';
// 페이지(main) 오버레이 스크롤바 옵션 — 화면을 밀지 않고 뷰포트 끝에 고정
// 페이지 오버레이 스크롤바 옵션 — 화면을 밀지 않고 뷰포트 끝에 고정
const OS_OPTIONS = {
scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600 },
};
// 일정 페이지: 세로는 내부에서 처리하므로 가로 스크롤만
const OS_OPTIONS_X = {
scrollbars: { theme: 'os-theme-fromis', autoHide: 'leave', autoHideDelay: 600 },
overflow: { y: 'hidden' },
};
/**
* PC 레이아웃 컴포넌트
@ -25,30 +30,29 @@ function Layout({ children }) {
// 일정 페이지에서는 스크롤바도 숨김 (내부에서 자체 스크롤 처리)
const isSchedulePage = location.pathname === '/schedule';
return (
<div className="h-screen overflow-hidden flex flex-col">
<Header />
{isSchedulePage ? (
// 일정 페이지: 자체 내부 스크롤 (페이지 스크롤 없음)
// 헤더 + 본문을 하나의 가로 스크롤(min-w-1440) 안에 넣어, 1440 미만이면
// 헤더까지 함께 가로 스크롤됨(줄바꿈 방지). 헤더는 sticky top-0이라 세로 스크롤 시 고정.
return isSchedulePage ? (
// 일정 페이지: 세로는 내부에서 처리, 가로 스크롤만
<OverlayScrollbarsComponent element="div" className="h-screen" options={OS_OPTIONS_X} defer>
<div className="min-w-[1440px] h-screen flex flex-col">
<Header />
<main className="flex-1 min-h-0 overflow-hidden flex flex-col">
<div className="min-w-[1440px] flex-1 flex flex-col">{children}</div>
<div className="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>
</div>
</OverlayScrollbarsComponent>
) : (
// 그 외: 가로+세로 오버레이 스크롤. 세로바는 뷰포트 끝에 항상 보임.
<OverlayScrollbarsComponent element="div" className="h-screen" options={OS_OPTIONS} defer>
<div className="min-w-[1440px] min-h-screen flex flex-col">
<Header />
<main className="flex-1 flex flex-col">
<div className="flex-1 flex flex-col">{children}</div>
{!hideFooter && <Footer />}
</main>
</div>
</OverlayScrollbarsComponent>
);
}