Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Modal

가장 상단에 표시되는 모달 컴포넌트입니다.

import { Modal } from 'sud-ui';

GitHub에서 소스코드 보기

사용할 때

새로운 페이지로 넘어가지 않고 사용자가 상호작용해야하는 경우

현재 페이지 위에 새로운 콘텐츠를 표시할 때

확인 대화 상자 또는 경고 메시지를 표시할 때

사용예제

Basic Usage

기본적인 사용방법입니다.

import { useState } from "react";
import { Modal, Button } from "sud-ui";

export default function Example() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <Button colorType="primary" onClick={() => setOpen(true)}>
        Open Modal
      </Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Modal"
      >
        <div>Modal Content</div>
      </Modal>
    </div>
  );
}

Use Divider

타이틀과 푸터 사이에 구분선을 표시할 수 있습니다.

import { useState } from "react";
import { Modal, Button, Typography } from "sud-ui";

export default function Example() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <Button colorType="primary" onClick={() => setOpen(true)}>
        Open Modal
      </Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Modal"
        divider={true}
        footer={
          <div className="flex gap-[10px] items-center justify-center">
            <Button
              colorType="primary"
              size="md"
              onClick={() => setOpen(false)}
            >
              Ok
            </Button>
          </div>
        }
      >
        <div>
          <Typography as="h2" size="lg">
            Use Divider Modal
          </Typography>
          <Typography as="p" size="md">
            With Title && Footer
          </Typography>
        </div>
      </Modal>
    </div>
  );
}

With Footer

모달의 하단에 푸터를 표시할 수 있습니다.

import { useState } from "react";
import { Modal, Button } from "sud-ui";

export default function Example() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <Button colorType="primary" onClick={() => setOpen(true)}>
        Open Modal
      </Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Modal"
        footer={
          <div className="flex gap-[10px] items-center justify-center">
            <Button
              className="w-[90px]"
              colorType="primary"
              size="md"
              onClick={() => setOpen(false)}
            >
              Ok
            </Button>
            <Button
              className="w-[90px]"
              colorType="danger"
              size="md"
              onClick={() => setOpen(false)}
            >
              Cancel
            </Button>
          </div>
        }
      >
        <div>With Footer Modal</div>
      </Modal>
    </div>
  );
}

Custom Modal

모달의 색상, 테두리, 모서리, 그림자 등을 커스텀할 수 있습니다.

import { useState } from "react";
import { Modal, Button, Typography, Div } from "sud-ui";

export default function Example() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <Button colorType="primary" onClick={() => setOpen(true)}>
        Open Modal
      </Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        colorType="mint"
        color="navy-7"
        title="Custom Modal"
        divider={true}
        dividerColor="gold-1"
        borderType="dashed"
        borderWeight={3}
        shape="square"
        footer={
          <div className="flex gap-[10px] items-center justify-center">
            <Button
              colorType="forest"
              size="md"
              onClick={() => setOpen(false)}
            >
              Ok
            </Button>
          </div>
        }
      >
        <Div color="cool-gray-8">
          <Typography as="h2">Custom Modal</Typography>
          <Typography as="p">With Title && Footer</Typography>
        </Div>
      </Modal>
    </div>
  );
}

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

open

모달의 열림/닫힘 상태

boolean

false

onClose

모달을 닫는 콜백 함수 (() => void)

() => void

onEsc

ESC 키로 모달 닫기 활성화 여부

boolean

true

title

모달 상단에 표시되는 제목 (ReactNode)

ReactNode

children

모달 내부에 표시할 내용 (ReactNode)

ReactNode

footer

모달 하단에 표시할 내용 (ReactNode)

ReactNode

colorType

색상 타입

default

primary

success

warning

danger

info

red

rose

coral

orange

volcano

apricot

yellow

gold

amber

green

lime

mint

blue

sky

cerulean

indigo

cobalt

navy

purple

plum

orchid

forest

sage

warm-gray

cool-gray

neutral

text

ghost

default

background

모달 배경색(palette값 또는 HEX code)

string

color

모달 텍스트 색상(palette값 또는 HEX code)

string

border

테두리 표시 여부

boolean

true

borderColor

테두리 색상(palette값 또는 HEX code)

string

borderType

테두리 스타일

solid

dashed

dotted

double

groove

ridge

inset

outset

none

solid

borderWeight

테두리 두께

number

shape

모서리 형태

square

circle

rounded

capsule

rounded

shadow

그림자 크기

none

width

모달의 너비 (px 또는 %)

number | string

480

height

모달의 높이 (px 또는 %)

number | string

divider

타이틀/푸터 구분선 표시 여부

boolean

false

dividerColor

구분선 색상(palette값 또는 HEX code)

string

className

추가 클래스명

string

style

추가 스타일

CSSProperties

{}

ariaLabel

접근성 레이블

string

ariaDescribedby

접근성 설명 ID

string

개인정보 처리방침

서비스 약관