@olundot/ui · Layout

DetailLayout

상세 화면의 header, 본문, 보조 패널, tabs, footer를 일정한 폭과 간격으로 배치하는 레이아웃 조합입니다.

aside
본문 옆에 담당자, 상태, 빠른 정보 같은 보조 패널을 배치합니다.
stickyAside
넓은 화면에서 aside를 상단 offset과 함께 고정할 수 있습니다.
tabs
tabs를 전달하면 activeTab과 onTabChange가 함께 필요합니다.
footer
상세 화면의 저장 또는 승인 action을 하단 slot으로 연결합니다.

상세 본문과 보조 패널

header, aside, stickyAside

심전도 기본 판독

게시됨

학습 목표

기본 rhythm, axis, ST 변화 판독을 단계별 문항과 연결합니다.

코드 보기tsx
import { Badge, DetailLayout, PageHeader } from "@olundot/ui";

export function CourseDetail() {
  return (
    <DetailLayout
      header={<PageHeader title="심전도 기본 판독" meta={<Badge tone="success">게시됨</Badge>} />}
      aside={<aside>담당자, 공개 범위, 최근 변경을 표시합니다.</aside>}
      stickyAside
    >
      <section>강의 설명, 학습 목표, 연결된 평가를 배치합니다.</section>
    </DetailLayout>
  );
}

탭이 있는 상세

tabs, activeTab, onTabChange

OSCE 응시 상세

응시자별 제출 상태와 평가 기록을 확인합니다.

선택된 보기

탭
summary
표시 항목
요약 3개
코드 보기tsx
import { useState } from "react";
import { DetailLayout, PageHeader } from "@olundot/ui";

const tabs = [
  { key: "summary", label: "요약" },
  { key: "students", label: "응시자", badge: 42 },
  { key: "logs", label: "기록" },
];

export function AttemptDetail() {
  const [activeTab, setActiveTab] = useState("summary");

  return (
    <DetailLayout
      header={<PageHeader title="OSCE 응시 상세" />}
      tabs={tabs}
      activeTab={activeTab}
      onTabChange={setActiveTab}
      baseId="attempt-detail"
    >
      <section>{activeTab} 정보를 표시합니다.</section>
    </DetailLayout>
  );
}
footer slot

문항 검수 상세

문항 본문과 해설, 정답 근거를 함께 확인합니다.

해설과 선택지의 표현을 검토한 뒤 승인합니다.

저장됨
코드 보기tsx
import { ActionFooter, DetailLayout, PageHeader } from "@olundot/ui";

export function ReviewDetail() {
  return (
    <DetailLayout
      header={<PageHeader title="문항 검수 상세" />}
      footer={<ActionFooter surface="canvas" position="static" status={{ kind: "saved" }} actions={[{ label: "승인", onClick: () => undefined }]} />}
    >
      <section>문항 본문과 해설을 검토합니다.</section>
    </DetailLayout>
  );
}