sections: 각 섹션은 title, description, aside, columns, collapsible, children을 가집니다.
columns: 2열 섹션도 모바일에서는 1열로 쌓입니다.
editorSectionId: 긴 편집 섹션은 columns 값과 무관하게 1열로 고정합니다.
status: 자동 저장, 검증 상태 같은 짧은 정보를 header 오른쪽에 둡니다.

섹션형 편집

sections, columns, status

강의 정보 편집

자동 저장 켜짐

기본 정보

목록과 상세 화면에 함께 노출됩니다.

강의명

담당자

일정

공개일과 마감일을 확인합니다.

자동 알림

공개일

마감일

코드 보기tsx

import { FormLayout, Input, PageHeader } from "@olundot/ui";

export function CourseForm() {
  return (
    <FormLayout surface="canvas"
      header={<PageHeader title="강의 정보 편집" />}
      status="자동 저장 켜짐"
      sections={[
        {
          id: "basic",
          title: "기본 정보",
          description: "목록과 상세 화면에 함께 노출됩니다.",
          columns: 2,
          children: <><Input surface="canvas" label="강의명" name="title" /><Input surface="canvas" label="담당자" name="owner" /></>,
        },
      ]}
    />
  );
}

접을 수 있는 섹션

collapsible과 defaultOpen

평가 정책

응시 조건과 채점 기준을 설정합니다.

채점 기준

기준

코드 보기tsx

import { FormLayout, Input, Textarea } from "@olundot/ui";

export function PolicyForm() {
  return (
    <FormLayout surface="canvas"
      header={<h2>평가 정책</h2>}
      sections={[
        { id: "grade", title: "채점 기준", children: <Textarea surface="canvas" label="기준" name="grade" /> },
        { id: "advanced", title: "고급 설정", collapsible: true, defaultOpen: false, children: <Input surface="canvas" label="재응시 횟수" name="retry" /> },
      ]}
    />
  );
}

긴 편집 영역

editorSectionId는 1열 고정

루브릭 편집

루브릭 본문

긴 편집 영역은 1열로 고정됩니다.

평가 기준

코드 보기tsx

import { FormLayout, Textarea } from "@olundot/ui";

export function RubricEditor() {
  return (
    <FormLayout surface="canvas"
      header={<h2>루브릭 편집</h2>}
      editorSectionId="rubric"
      sections={[
        { id: "rubric", title: "루브릭 본문", columns: 2, children: <Textarea surface="canvas" label="평가 기준" name="rubric" /> },
      ]}
    />
  );
}