Foundation

Layout

콘텐츠 폭과 네비게이션 치수.

SEED에는 없는 카테고리입니다. SEED는 모바일 앱이 주 무대라 화면 폭이 곧 기기 폭이지만, NxtGen은 데스크톱 웹이 주 무대여서 "이 화면은 얼마나 넓어야 하는가"가 매번 결정 사항이 됩니다.

그 결정을 코드에 max-w-6xl처럼 묻어두면 화면마다 폭이 제각각이 되거나, 반대로 전부 같은 폭으로 굳어버립니다. 폭을 토큰으로 올려서 prose·content·wide 세 개 중 하나를 의도적으로 고르게 했습니다.

AppShell.Content의 width prop이 이 토큰을 받습니다.

var(--content-width-default) · max-w-content · <AppShell.Content width="wide">

Content width

본문 최대 폭. 임의의 max-w-* 대신 이 셋 중에서 고른다.

contentWidth.prose읽기 중심 본문720px

한 줄이 길어지면 가독성이 급격히 떨어진다.

contentWidth.default일반 페이지1152px

대부분의 화면이 여기.

contentWidth.wide데이터 화면1440px

넓은 테이블·차트가 있을 때.

네비게이션 치수. AppShell이 nav prop에 따라 이 값을 적용한다.

navSize.topHeight

56px상단 네비 높이h-nav-top

navSize.sideWidth

240px사이드 네비 펼친 폭w-nav-side

navSize.sideWidthCollapsed

64px사이드 네비 접힌 폭w-nav-side-collapsed