P08 상세와 속성 패널

상호작용 확인

제목·본문, 속성 목록, 담당자·상태 메뉴

구성

제목·본문, 속성 목록, 담당자·상태 메뉴

구성 컴포넌트

전체 구역 프리뷰

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다. 아래 컨트롤로 구성을 바꾸면 코드도 바뀝니다.

목록 영역

활동 구역상태: 진행 중 · 담당자: 김민서

<DetailPanel label="이슈 상세" meta={<><FileText /> ADX-101</>} onClose={close}>
  <h2>로그인 화면의 오류 메시지 개선</h2>
  <DetailSection id="props" title="속성">
    <PropertyList>
      <Property name="상태">
        <OptionSelect variant="ghost" label="상태" value={status} options={…} onChange={…} />
      </Property>
      …
    </PropertyList>
  </DetailSection>
  <DetailSection id="activity" title="활동">…</DetailSection>
</DetailPanel>

상태 흐름

1024px 이상: 목록 오른쪽에 붙는다(너비 shell.detail-width). 1024px 미만: 화면을 덮는다. 좁은 화면에서 언제 열지는 쓰는 쪽이 정한다(이슈 예제는 행을 고른 뒤에만).
속성은 선택 상자로 바로 바꾸고, 바꾼 값은 목록과 같은 데이터에 반영한다.
닫기 버튼("상세 패널 닫기")으로 닫는다. 다시 여는 방법은 목록의 행 선택이나 머리말의 패널 버튼이다.

샘플 데이터

이슈 예제의 첫 이슈(ADX-101). 프리뷰에서 바꾼 값은 새로고침하면 돌아간다.

설치 항목

패턴은 아직 Registry 항목이 없습니다. 구성 컴포넌트를 설치한 뒤 아래 파일을 프로젝트에 복사합니다.

npx shadcn@4.23.0 add @adcapsule/button @adcapsule/select @adcapsule/avatar

파일: src/components/patterns/detail-panel.tsx
내보내는 이름: DetailPanel, DetailSection, PropertyList, Property

이 패턴을 쓰는 템플릿

전체 구역 프리뷰

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다. 아래 컨트롤로 구성을 바꾸면 코드도 바뀝니다.

목록 영역

활동 구역상태: 진행 중 · 담당자: 김민서

<DetailPanel label="이슈 상세" meta={<><FileText /> ADX-101</>} onClose={close}>
  <h2>로그인 화면의 오류 메시지 개선</h2>
  <DetailSection id="props" title="속성">
    <PropertyList>
      <Property name="상태">
        <OptionSelect variant="ghost" label="상태" value={status} options={…} onChange={…} />
      </Property>
      …
    </PropertyList>
  </DetailSection>
  <DetailSection id="activity" title="활동">…</DetailSection>
</DetailPanel>

상태 흐름

1024px 이상: 목록 오른쪽에 붙는다(너비 shell.detail-width). 1024px 미만: 화면을 덮는다. 좁은 화면에서 언제 열지는 쓰는 쪽이 정한다(이슈 예제는 행을 고른 뒤에만).
속성은 선택 상자로 바로 바꾸고, 바꾼 값은 목록과 같은 데이터에 반영한다.
닫기 버튼("상세 패널 닫기")으로 닫는다. 다시 여는 방법은 목록의 행 선택이나 머리말의 패널 버튼이다.

설치 항목

패턴은 아직 Registry 항목이 없습니다. 구성 컴포넌트를 설치한 뒤 아래 파일을 프로젝트에 복사합니다.

npx shadcn@4.23.0 add @adcapsule/button @adcapsule/select @adcapsule/avatar

파일: src/components/patterns/detail-panel.tsx
내보내는 이름: DetailPanel, DetailSection, PropertyList, Property