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

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

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