Modal

Modal은 사용자에게 중요한 정보를 표시하거나 작업을 수행하기 위한 오버레이 창입니다. 모달은 현재 작업을 중단하고 사용자의 주의를 필요로 하는 내용에 집중시킵니다.

인터랙티브 예제

아래 인터랙티브 예제를 통해 다양한 모달 속성을 실시간으로 변경하고 동작을 확인해볼 수 있습니다.

titlestring

모달 제목을 입력합니다.

subtitlestring

모달 부제목을 입력합니다.

sizeselect

모달 크기를 선택합니다.

hideCloseButtonboolean

닫기 버튼을 숨길지 선택합니다.

closeOnBackdropClickboolean

배경 클릭 시 닫기 여부를 선택합니다.

closeOnEscboolean

ESC 키로 닫기 여부를 선택합니다.

hasContentboolean

콘텐츠 영역 표시 여부를 선택합니다.

featuredIconNameselect

피처드 아이콘을 선택합니다.

featuredIconColorselect

피처드 아이콘 색상을 선택합니다.

featuredIconThemeselect

피처드 아이콘 테마를 선택합니다.

cancelButtonTextstring

취소 버튼 텍스트를 입력합니다.

confirmButtonTextstring

확인 버튼 텍스트를 입력합니다.

showCancelButtonboolean

취소 버튼 표시 여부를 선택합니다.

showConfirmButtonboolean

확인 버튼 표시 여부를 선택합니다.

headerAlignselect

헤더 정렬을 선택합니다.

actionsLayoutselect

액션 레이아웃을 선택합니다.

actionsAlignselect

액션 정렬을 선택합니다.

showHeaderDividerboolean

헤더 구분선 표시 여부를 선택합니다.

showActionsDividerboolean

액션 구분선 표시 여부를 선택합니다.

showCheckboxboolean

체크박스 표시 여부를 선택합니다.

checkboxLabelstring

체크박스 라벨을 입력합니다.

기본 사용법

import { Modal, Button } from '@ncds/ui-admin';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>모달 열기</button>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <Modal.Header
          title="제목은 한문장으로 입력해주세요."
          subtitle="최대 글자수 공백 포함 70자까지 입력 가능합니다."
          onClose={() => setIsOpen(false)}
        />
        <Modal.Content>모달 내용을 이곳에 작성합니다.</Modal.Content>
        <Modal.Actions>
          <Button size="sm" label="취소" onClick={() => setIsOpen(false)} hierarchy="secondary-gray" />
          <Button size="sm" label="확인" onClick={() => setIsOpen(false)} hierarchy="primary" />
        </Modal.Actions>
      </Modal>
    </>
  );
}

Props

Prop	Type	Default	Description
size	'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'	'md'	모달의 크기를 지정합니다.
align	'center' \| 'right'	'center'	모달의 정렬 위치를 지정합니다.
layout	'default' \| 'compact'	'default'	모달의 레이아웃을 지정합니다.
onClose	() => void	-	모달이 닫힐 때 호출되는 함수입니다.

Modal.Header

Prop	Type	Default	Description
title	string	-	헤더 제목
subtitle	string	-	헤더 부제목
onClose	() => void	-	닫기 버튼 클릭 시 호출되는 함수
featuredIcon	{ name: string; color: string; theme: string }	-	헤더 아이콘
align	'center' \| 'right'	'center'	헤더 정렬 방식
children	ReactNode	-	추가 컨텐츠
hideCloseButton	boolean	false	닫기 버튼 숨김 여부
showDivider	boolean	true	헤더 아래 구분선 표시 여부

Modal.Content

Prop	Type	Default	Description
children	ReactNode	-	모달 컨텐츠

Modal.Actions

Prop	Type	Default	Description
children	ReactNode	-	버튼 등의 액션 요소
layout	'default' \| 'compact'	'default'	모달의 레이아웃을 지정합니다.
align	'center' \| 'right'	'center'	모달의 정렬 위치를 지정합니다.
showDivider	boolean	true	구분선 표시 여부
checkboxContent	ReactNode	-	체크박스 영역 콘텐츠

상세 예제

헤더 정렬 방식

모달 헤더는 3가지 정렬 방식(left, center, horizontal)을 지원합니다.

왼쪽 정렬 (기본값)

가운데 정렬

수평 레이아웃

액션 레이아웃

모달 액션 영역은 다양한 레이아웃(vertical, horizontal, custom)과 정렬 방식(left, center, right, stretch)을 지원합니다.

세로 레이아웃

가로 레이아웃

우측 정렬된 가로 레이아웃

구분선 있는 레이아웃

체크박스가 포함된 커스텀 레이아웃

크기 변형

모달은 4가지 크기(sm, md, lg, xl)를 지원합니다.

작은 모달 (400px)

중간 모달 (560px, 기본값)

큰 모달 (720px)

매우 큰 모달 (920px)

버튼 커스터마이징

모달의 버튼을 다양하게 커스터마이징할 수 있습니다.

다양한 버튼 텍스트

주의가 필요한 액션 (destructive)

단일 버튼

닫기 동작 설정

배경 클릭이나 ESC 키로 모달을 닫는 동작을 비활성화할 수 있습니다.

배경 클릭으로 닫기 비활성화

ESC 키로 닫기 비활성화

HTML 사용 예제

<div class="ncua-modal-backdrop">
  <!-- 위에서 복사된 모달 코드 추가 -->
</div>

const modal = document.querySelector('.ncua-modal-backdrop');

// 배경 클릭으로 닫기
modal.addEventListener('click', (e) => {
  if (e.target === e.currentTarget) {
    modal.style.display = 'none';
  }
});

// ESC 키로 닫기
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    modal.style.display = 'none';
  }
});

// 모달 열기
modal.style.display = 'flex';

인터랙티브 예제​

기본 사용법​

Props​

Modal​

Modal.Header​

Modal.Content​

Modal.Actions​

상세 예제​

헤더 정렬 방식​

왼쪽 정렬 (기본값)​

가운데 정렬​

수평 레이아웃​

액션 레이아웃​

세로 레이아웃​

가로 레이아웃​

우측 정렬된 가로 레이아웃​

구분선 있는 레이아웃​

체크박스가 포함된 커스텀 레이아웃​

크기 변형​

작은 모달 (400px)​

중간 모달 (560px, 기본값)​

큰 모달 (720px)​

매우 큰 모달 (920px)​

버튼 커스터마이징​

다양한 버튼 텍스트​

주의가 필요한 액션 (destructive)​

단일 버튼​

닫기 동작 설정​

배경 클릭으로 닫기 비활성화​

ESC 키로 닫기 비활성화​

HTML 사용 예제​