@olundot/ui · Surfaces

InfoModal

사용 흐름을 잠시 멈추고 읽어야 하는 안내, 규칙, 보조 정보를 보여주는 정보형 모달 조합입니다.

닫기 중심
기본 footer는 닫기 버튼 하나이며 사용자의 선택을 강요하지 않습니다.
width
default는 짧은 안내, wide는 목록이나 변경 이력처럼 폭이 필요한 안내에 사용합니다.
footer
권한 요청처럼 보조 action이 필요할 때 footer를 교체합니다.
children
본문에는 짧은 문단, 목록, 요약 정보를 넣습니다. 입력 폼은 FormModal을 사용합니다.

기본 안내

닫기 버튼 하나로 끝나는 안내
코드 보기tsx
import { useState } from "react";
import { InfoModal, Button } from "@olundot/ui";

export function InfoModalBasic() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        응시 안내
      </Button>
      <InfoModal
        open={open}
        onOpenChange={setOpen}
        title="응시 전 확인"
        description="시험을 시작하기 전에 필요한 조건입니다."
        closeLabel="확인"
      >
        <ul style={{ margin: 0, paddingLeft: "18px" }}>
          <li>안정적인 네트워크 환경을 확인합니다.</li>
          <li>다른 브라우저 탭의 녹화 도구를 종료합니다.</li>
          <li>제한 시간 종료 시 자동 제출됩니다.</li>
        </ul>
      </InfoModal>
    </>
  );
}

넓은 안내

width='wide'로 긴 목록 표시
코드 보기tsx
import { useState } from "react";
import { InfoModal, Button } from "@olundot/ui";

export function InfoModalWide() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        변경 이력 보기
      </Button>
      <InfoModal
        open={open}
        onOpenChange={setOpen}
        title="문항 변경 이력"
        description="최근 검수에서 반영된 변경 사항입니다."
        width="wide"
      >
        <div style={{ display: "grid", gap: "8px" }}>
          <p>2026-06-01: 보기 3번의 표현을 더 명확하게 수정했습니다.</p>
          <p>2026-06-02: 해설에 참고 문헌 링크를 추가했습니다.</p>
          <p>2026-06-03: 정답 근거 문단의 순서를 조정했습니다.</p>
        </div>
      </InfoModal>
    </>
  );
}
커스텀 footer action
코드 보기tsx
import { useState } from "react";
import { InfoModal, Button } from "@olundot/ui";

export function InfoModalFooter() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        권한 안내
      </Button>
      <InfoModal
        open={open}
        onOpenChange={setOpen}
        title="권한이 필요합니다"
        description="이 작업은 운영자 권한이 있는 사용자만 실행할 수 있습니다."
        footer={
          <>
            <Button variant="secondary" size="sm" onClick={() => setOpen(false)}>
              닫기
            </Button>
            <Button variant="primary" size="sm" onClick={() => setOpen(false)}>
              권한 요청
            </Button>
          </>
        }
      >
        담당 관리자에게 권한 요청을 보낼 수 있습니다.
      </InfoModal>
    </>
  );
}