컴포지션 — 화면 조립

컴포넌트를 어디에 둘지 매번 고민하지 않아도 됩니다. @tissue-ui/layout 은 화면을 골격(아키타입) + 빈 자리(슬롯) 로 나눠 두고, 각 자리에 어떤 요소를 넣을지 미리 정해 뒀습니다. 정해진 자리에 컴포넌트를 넣기만 하면 반듯한 화면이 됩니다.

1. 아키타입을 고른다

만들 화면의 성격에 맞는 아키타입을 고릅니다 — 목록이면 목록 페이지, 한 건 상세면 상세 페이지, 지표 중심이면 대시보드, 입력이면 폼 … 전체 목록은 레이아웃 에 있습니다.

2. 슬롯을 채운다

아키타입은 header·body·toolbarLeft 같은 슬롯을 prop 으로 받습니다. 각 슬롯에 컴포넌트를 넣으면 아키타입이 간격·정렬·반응형을 알아서 처리합니다.

<ListPage
  header={<PageHeader title="사용자" actions={<Button variant="primary">새로 만들기</Button>} />}
  toolbarLeft={<Input placeholder="검색" />}
  body={<DataTable caption="사용자 목록" columns={cols} rows={rows} />}
  footer={<Pagination … />}
/>

3. 허용 요소를 지킨다

자리마다 넣을 수 있는 요소가 정해져 있습니다(예: 목록 페이지의 본문에는 그리드·카드 그리드·빈 상태). 아키타입 상세 페이지의 슬롯 표에서 파란색으로 눌리는 요소가 그 자리에 넣을 수 있는 컴포넌트입니다. 회색 요소는 실제 컴포넌트가 아니라, 직접 만들거나 다른 패키지에서 가져와 채우는 자리입니다.

코드로 확인하고 싶으면 core 의 함수를 쓰면 됩니다.

import { isElementAllowed, getArchetype } from "@tissue-ui/layout-core";

isElementAllowed("list", "body", "grid");   // true
isElementAllowed("list", "footer", "grid"); // false — footer 는 pagination 만

4. 한 자리에 여러 개

한 자리에 컴포넌트를 여러 개 넣어도 됩니다. 머리말 하나에 제목·배지·버튼을 나란히 넣거나, 본문에 카드를 여러 장 쌓는 식입니다. 골격은 자리와 정렬만 잡아 주고, 그 안을 무엇으로 채울지는 자유입니다.