PageScaffold

페이지 폭과 일관된 세로 리듬의 기본 틀을 제공합니다.

목적

PageScaffold는 제품 페이지의 semantic main, 최대 폭, 가로 여백과 섹션 리듬을 제공한다. 페이지마다 다른 outer padding과 max-width를 만들지 않게 하며, 작업의 성격에 따라 읽기 폭과 비교 폭을 선택하게 한다.

선택 기준

route의 주 콘텐츠를 감싸는 기본 container로 사용한다.
앱 shell, sidebar, 전역 navigation까지 감싸지 않는다.
한 문서에 main이 이미 있으면 중첩하지 말고 기존 구조와 역할을 조정한다.
작업 폭에 따라 content, wide, full을 의도적으로 선택한다.

구조

semantic main
가운데 정렬된 전체 폭 container
반응형 가로 padding
children 사이 기본 세로 간격
PageHeader → 환경/context → PageToolbar → content 순서가 권장된다.

변형과 크기

`width`	최대 폭	권장 용도
`content`	1120px	일반 목록, 설정, 읽기, 단일 폼
`wide`	1440px	데이터 비교, 일정, outline+editor
`full`	제한 없음	화면 전체가 작업 공간인 전문 도구

full은 여백이 없어지는 옵션이 아니다. 기본 반응형 page padding은 유지된다.

상태와 동작

자체 상태와 상호작용은 없다.
route 전환 시 제품이 scroll restoration과 title focus를 소유한다.
목록→상세→목록 이동에서는 이전 scroll, 검색, 필터, 선택 맥락을 복원한다.
페이지 로딩 상태에서도 scaffold와 header 위치를 유지해 화면 전체가 흔들리지 않게 한다.

콘텐츠

scaffold 자체에는 문구 prop이 없다.
children의 제목 계층은 PageHeader의 h1부터 순서대로 구성한다.
섹션 사이 간격을 임의 margin으로 반복 덮어쓰기보다 Section을 사용한다.

접근성

main landmark를 제공한다. 페이지에 하나의 주 main만 유지한다.
skip link의 목적지가 될 수 있도록 필요하면 id를 전달한다.
aria-label은 여러 main landmark를 구분해야 할 때만 사용한다.
focus와 scroll을 scaffold 자체에 강제로 두지 않는다.

좁은 화면과 긴 콘텐츠

가로 padding은 작은 화면 16px, 중간 화면 24px, 큰 화면 32px으로 반응한다.
넓은 table이나 timeline이 필요하면 page 전체를 overflow시키지 말고 해당 데이터 영역에 명시적 scroll container를 둔다.
wide나 full을 사용해 긴 문장의 읽기 폭까지 넓히지 않는다. 설명 본문은 별도 max-width를 유지한다.
다열 레이아웃은 작은 화면에서 한 열 또는 순차 흐름으로 전환한다.

공개 API

PageScaffoldProps는 React.HTMLAttributes<HTMLDivElement>를 확장한다.

속성	타입	기본값	설명
`width`	`'content' \| 'wide' \| 'full'`	`'content'`	페이지 최대 폭
`className`	`string`	없음	main 클래스
`children`	`ReactNode`	없음	페이지 콘텐츠
기타	`HTMLAttributes<HTMLDivElement>`	없음	`id`, `aria-*` 등 표준 속성

공개 타입은 PageScaffoldProps, PageWidth다.

예제

import { PageHeader, PageScaffold, Section } from '@classum/dot-design-system/ui';

export function WorkspaceSettingsPage() {
  return (
    <PageScaffold id="main-content" width="content">
      <PageHeader title="워크스페이스 설정" description="구성원에게 적용되는 이름과 운영 기준을 관리해요." />
      <Section title="기본 정보">{/* form */}</Section>
    </PageScaffold>
  );
}

피해야 할 사용

앱 shell과 sidebar까지 PageScaffold 안에 넣기
한 페이지 안에 여러 PageScaffold 중첩
모든 화면을 이유 없이 full로 설정
긴 본문을 1440px 전체 폭으로 읽게 하기
페이지마다 outer padding과 max-width를 다시 정의
main landmark가 이미 있는데 추가로 렌더

목적