CoreModal

사용자 확인이나 추가 입력을 받는 모달 대화상자 컴포넌트. Modal로 마이그레이션을 권장합니다.

개요

마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는 Modal을 사용하세요.

CoreModal은 화면 중앙에 고정 위치로 표시되는 대화상자 컴포넌트입니다. CorePortal과 함께 사용해 DOM 계층 밖에서 렌더링합니다.

3가지 size — sm (400px), md (600px), lg (960px)
status — none (기본), danger — danger 시 헤더에 경고 아이콘 표시
isOverlay — 배경 dim 레이어 제어
actionsChildren — 액션 버튼 배열, actionsJustify로 정렬 제어
isBgClose — 배경 클릭 시 자동 닫기
콘텐츠 영역은 OverlayScrollbars로 스크롤 처리

Usage

기본 사용법

CorePortal로 감싸고 useState로 열림 상태를 관리합니다.

import { useState } from 'react';
import { CoreModal, CorePortal, CoreButton } from '@featuring-corp/components';

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

  return (
    <>
      <CoreButton text="모달 열기" onClick={() => setOpen(true)} />
      {open && (
        <CorePortal>
          <CoreModal
            size="md"
            title="타이틀입니다."
            handleClose={() => setOpen(false)}
            actionsChildren={[
              <CoreButton key="cancel" buttonType="contrast" text="취소" onClick={() => setOpen(false)} />,
              <CoreButton key="confirm" text="확인" onClick={() => setOpen(false)} />,
            ]}
          >
            <div>모달 내용입니다.</div>
          </CoreModal>
        </CorePortal>
      )}
    </>
  );
}

크기 설정

size	width
`sm`	`400px`
`md`	`600px`
`lg`	`960px`

// sm — 간단한 확인/취소
<CoreModal size="sm" title="삭제 확인" handleClose={close} />

// md — 일반 폼·정보
<CoreModal size="md" title="정보 수정" handleClose={close} />

// lg — 복잡한 콘텐츠·테이블
<CoreModal size="lg" title="상세 내역" handleClose={close} />

Danger 상태

삭제·파기 등 비가역적 액션 확인 시 사용합니다.

<CoreModal
  size="md"
  title="삭제 확인"
  status="danger"
  handleClose={() => setOpen(false)}
  actionsChildren={[
    <CoreButton key="cancel" buttonType="contrast" text="취소" onClick={() => setOpen(false)} />,
    <CoreButton key="delete" buttonType="primary" text="삭제" isDanger onClick={() => setOpen(false)} />,
  ]}
>
  <div>정말로 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.</div>
</CoreModal>

Overlay 없이 사용

<CoreModal
  size="md"
  title="타이틀"
  isOverlay={false}
  handleClose={() => setOpen(false)}
>
  <div>배경 dim 없이 표시됩니다.</div>
</CoreModal>

액션 버튼 정렬

actionsJustify 값에 따라 CSS justify-content가 결정됩니다.

// start — 왼쪽 정렬
<CoreModal actionsJustify="start" ... />

// center — 중앙 정렬
<CoreModal actionsJustify="center" ... />

// end — 오른쪽 정렬 (기본값)
<CoreModal actionsJustify="end" ... />

// between — 양쪽 정렬
<CoreModal actionsJustify="between" ... />

닫기 버튼 제거

<CoreModal
  size="md"
  title="타이틀"
  hasCloseButton={false}
  isBgClose={false}
  handleClose={() => setOpen(false)}
  actionsChildren={[
    <CoreButton key="confirm" text="확인" onClick={() => setOpen(false)} />,
  ]}
>
  <div>닫기 버튼 없이 액션 버튼으로만 닫을 수 있습니다.</div>
</CoreModal>

Props

Prop

Type

CoreModalSize

Prop

Type

CoreModalStatus

Prop

Type

CoreModalActionsJustify

Prop

Type

스타일

position: fixed, top: 50%, left: 50%, transform: translate(-50%, -50%)
padding: spacing-600 (24px), border-radius: radius-100, elevation: elevation-8
background-color: white

Size Variants

Size	Width
`sm`	`400px`
`md`	`600px`
`lg`	`960px`

Overlay

position: fixed, inset: 0, width: 100vw, height: 100vh
background-color: black (40% opacity)

Actions Justify

Justify	CSS justify-content
`start`	`flex-start`
`center`	`center`
`end`	`flex-end`
`between`	`space-between`

마이그레이션 가이드

CoreModal에서 Modal로 이전하세요.

// Before
<CorePortal>
  <CoreModal
    size="md"
    title="타이틀"
    status="danger"
    handleClose={close}
    actionsChildren={[
      <CoreButton key="cancel" buttonType="contrast" text="취소" onClick={close} />,
      <CoreButton key="confirm" text="확인" onClick={close} />,
    ]}
  >
    <div>내용</div>
  </CoreModal>
</CorePortal>

// After
<Modal.Root open={open} onOpenChange={setOpen}>
  <Modal.Portal>
    <Modal.Overlay />
    <Modal.Popup size="md">
      <Modal.Title>타이틀</Modal.Title>
      <Modal.Body>내용</Modal.Body>
      <Modal.Actions>
        <Button.Root buttonType="contrast" onClick={close}><Button.Text>취소</Button.Text></Button.Root>
        <Button.Root onClick={close}><Button.Text>확인</Button.Text></Button.Root>
      </Modal.Actions>
    </Modal.Popup>
  </Modal.Portal>
</Modal.Root>

CoreModal prop	Modal 대응
`size`	`Modal.Popup size`
`title`	`Modal.Title` 자식
`status="danger"`	`Modal.Title` 앞에 아이콘 직접 배치
`isOverlay`	`Modal.Overlay` 포함/제외
`actionsChildren`	`Modal.Actions` 자식
`actionsJustify`	`Modal.Actions`의 `$css` justify
`handleClose`	`Modal.Root onOpenChange`
`hasCloseButton`	`Modal.Close` 포함/제외
`isBgClose`	`Modal.Overlay` onClick 제어

On this page