상세 페이지

DetailPage

한 건의 내용을 자세히 보여주는 화면입니다. 위쪽 제목과 상태, 속성 목록, 본문 카드, 옆쪽 관련 정보, 아래쪽 버튼으로 이어집니다.

가져오기

tsx
import { DetailPage } from "@tissue-ui/layout-react";

미리보기

속성 + 본문 + 옆 패널
속성 목록과 본문을 나란히, 관련 정보를 옆 패널에 둡니다.

주문 #1024

완료
고객홍길동
금액₩48,000
결제카드
주문 항목
상품 2건 · 배송 준비 중
옆 패널 없이 · 아래 액션
옆 패널을 빼면 본문이 전체 너비를 쓰고, 하단에 주요 액션을 둡니다.

문서 초안

검토 중
작성자김영희
수정일2026-07-05
내용
본문이 전체 너비를 사용합니다 …
탭이 있는 상세
머리말에 탭을 더해 같은 대상의 여러 화면을 오갑니다.

홍길동

활성
가입일2025-03-01
개요
최근 로그인 · 담당 프로젝트 …

슬롯 (5)

자리마다 넣을 수 있는 요소가 아래에 있습니다. 파란색은 눌러서 컴포넌트 문서로 갈 수 있고, 회색은 실제 컴포넌트가 아니라 직접 만들거나 다른 패키지에서 가져와 채우는 자리입니다.

header머리말필수여러 개layout: space-between
페이지 헤더배지버튼브레드크럼(위치 경로)
meta속성 목록선택여러 개layout: row
body본문필수여러 개layout: column
aside옆 패널선택여러 개layout: column
footer바닥글선택여러 개layout: row
어떤 자리에 무엇을 넣을 수 있는지는 LAYOUT_MANIFEST 에 정리돼 있습니다. 코드에서 확인하려면 isElementAllowed(아키타입, 슬롯, 요소) 함수를 쓰세요.