CoreModal

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

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

<>
  <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={() => {
              console.log('확인');
              setOpen(false);
            }} 
          />,
        ]}
      >
        <div>모달 내용입니다.</div>
      </CoreModal>
    </CorePortal>
  )}
</>

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

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

{open && (
  <CorePortal>
    <CoreModal
      size="sm"
      title="작은 모달"
      handleClose={() => setOpen(false)}
    >
      <div>작은 크기의 모달입니다.</div>
    </CoreModal>
  </CorePortal>
)}

{open && (
  <CorePortal>
    <CoreModal
      size="md"
      title="중간 모달"
      handleClose={() => setOpen(false)}
    >
      <div>중간 크기의 모달입니다.</div>
    </CoreModal>
  </CorePortal>
)}

{open && (
  <CorePortal>
    <CoreModal
      size="lg"
      title="큰 모달"
      handleClose={() => setOpen(false)}
    >
      <div>큰 크기의 모달입니다.</div>
    </CoreModal>
  </CorePortal>
)}

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

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

{open && (
  <CorePortal>
    <CoreModal
      size="md"
      title="삭제 확인"
      status="danger"
      isOverlay={true}
      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>
  </CorePortal>
)}

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

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

{open && (
  <CorePortal>
    <CoreModal
      size="md"
      title="타이틀"
      isOverlay={false}
      handleClose={() => setOpen(false)}
      actionsChildren={[
        <CoreButton 
          key="cancel"
          buttonType="contrast" 
          text="취소" 
          onClick={() => setOpen(false)} 
        />,
        <CoreButton 
          key="confirm"
          text="확인" 
          onClick={() => setOpen(false)} 
        />,
      ]}
    >
      <div>Overlay 없이 표시되는 모달입니다.</div>
    </CoreModal>
  </CorePortal>
)}

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

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

{open && (
  <CorePortal>
    <CoreModal
      size="md"
      title="타이틀"
      actionsJustify="start"
      handleClose={() => setOpen(false)}
      actionsChildren={[
        <CoreButton 
          key="cancel"
          buttonType="contrast" 
          text="취소" 
          onClick={() => setOpen(false)} 
        />,
        <CoreButton 
          key="confirm"
          text="확인" 
          onClick={() => setOpen(false)} 
        />,
      ]}
    >
      <div>액션 버튼이 왼쪽 정렬됩니다.</div>
    </CoreModal>
  </CorePortal>
)}

{open && (
  <CorePortal>
    <CoreModal
      size="md"
      title="타이틀"
      actionsJustify="center"
      handleClose={() => setOpen(false)}
      actionsChildren={[
        <CoreButton 
          key="cancel"
          buttonType="contrast" 
          text="취소" 
          onClick={() => setOpen(false)} 
        />,
        <CoreButton 
          key="confirm"
          text="확인" 
          onClick={() => setOpen(false)} 
        />,
      ]}
    >
      <div>액션 버튼이 중앙 정렬됩니다.</div>
    </CoreModal>
  </CorePortal>
)}

{open && (
  <CorePortal>
    <CoreModal
      size="md"
      title="타이틀"
      actionsJustify="end"
      handleClose={() => setOpen(false)}
      actionsChildren={[
        <CoreButton 
          key="cancel"
          buttonType="contrast" 
          text="취소" 
          onClick={() => setOpen(false)} 
        />,
        <CoreButton 
          key="confirm"
          text="확인" 
          onClick={() => setOpen(false)} 
        />,
      ]}
    >
      <div>액션 버튼이 오른쪽 정렬됩니다.</div>
    </CoreModal>
  </CorePortal>
)}

{open && (
  <CorePortal>
    <CoreModal
      size="md"
      title="타이틀"
      actionsJustify="between"
      handleClose={() => setOpen(false)}
      actionsChildren={[
        <CoreButton 
          key="cancel"
          buttonType="contrast" 
          text="취소" 
          onClick={() => setOpen(false)} 
        />,
        <CoreButton 
          key="confirm"
          text="확인" 
          onClick={() => setOpen(false)} 
        />,
      ]}
    >
      <div>액션 버튼이 양쪽 정렬됩니다.</div>
    </CoreModal>
  </CorePortal>
)}