1. Modal

Modal 컴포넌트는 사용자가 인터페이스와 상호작용하는 동안 중요한 정보를 표시하거나 결정을 요청하는 데 사용됩니다. 다양한 크기와 버튼 옵션을 지원합니다.

1.1. Import

import { BasicModal } from '@componique/react';

1.2. Usage

아래는 Modal 컴포넌트의 기본 사용 예제입니다:

import { BasicModal } from '@components/Modal/BasicModal';
import { useState } from 'react';

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

  const handleOpen = () => setIsOpen(true);
  const handleClose = () => setIsOpen(false);

  return (
    <>  
        <button onClick={handleOpen} className="bg-Basic text-white px-4 py-2 rounded-md ">
            Open Basic Modal
        </button>
        <BasicModal open={isOpen} onClose={handleClose} showCloseIcon={true}>
          <p>This is a basic modal content.</p>
        </BasicModal>
    </>

  );
}

export default Example;

1.3. Changing the Size of the Modal

Modal 컴포넌트는 다양한 크기로 제공됩니다. 기본 크기는 medium입니다:

xs: 아주 작은 크기
small: 작은 크기
medium: 중간 크기 (기본값)
large: 큰 크기
xl: 아주 큰 크기
full: 전체 화면 크기

import { BasicModal } from '@components/Modal/BasicModal';
        import { useState } from 'react';
        
        function Example() {
          const [isOpen, setIsOpen] = useState(false);
        
          const handleOpen = () => setIsOpen(true);
          const handleClose = () => setIsOpen(false);
        
          return (
            <>
              <button onClick={handleOpen} className="bg-Basic text-white px-4 py-2 rounded-md ">Open xs Modal</button>
              <BasicModal size="xs" open={isOpen} onClose={handleClose} showCloseIcon={true}           
              
              primaryButton={{
                text: "Okay",
                variant: "primary",
                onClick: closeModal,
              }}
              secondaryButton={{
                text: "Close",
                variant: "secondary",
                onClick: closeModal,
              }}>
                <h2 className="mb-4 text-lg font-bold">Modal Size: xs</h2>
                <p>
                Magna exercitation reprehenderit magna aute tempor cupidatat
                consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
                incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua
                enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur
                esse laborum eiusmod pariatur proident Lorem eiusmod et.
              </p>
              </BasicModal>
        
              <button onClick={handleOpen} className="bg-Basic text-white px-4 py-2 rounded-md">Open small Modal</button>
              <BasicModal size="small" open={isOpen} onClose={handleClose} showCloseIcon={true}
                primaryButton={{
                text: "Okay",
                variant: "primary",
                onClick: closeModal,
              }}
              secondaryButton={{
                text: "Close",
                variant: "secondary",
                onClick: closeModal,
              }}>
                <h2 className="mb-4 text-lg font-bold">Modal Size: small</h2>
                <p>
                Magna exercitation reprehenderit magna aute tempor cupidatat
                consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
                incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua
                enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur
                esse laborum eiusmod pariatur proident Lorem eiusmod et.
                </p>
              </BasicModal>
        
              <button onClick={handleOpen} className="bg-Basic text-white px-4 py-2 rounded-md">Open medium Modal</button>
              <BasicModal size="medium" open={isOpen} onClose={handleClose} showCloseIcon={true}
              
                primaryButton={{
                text: "Okay",
                variant: "primary",
                onClick: closeModal,
              }}
              secondaryButton={{
                text: "Close",
                variant: "secondary",
                onClick: closeModal,
              }}>
              <h2 className="mb-4 text-lg font-bold">Modal Size: medium</h2>
              <p>
              Magna exercitation reprehenderit magna aute tempor cupidatat
              consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
              incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua
              enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur
              esse laborum eiusmod pariatur proident Lorem eiusmod et.
              </p>
              </BasicModal>
        
              <button onClick={handleOpen} className="bg-Basic text-white px-4 py-2 rounded-md">Open large Modal</button>
              <BasicModal size="large" open={isOpen} onClose={handleClose} showCloseIcon={true}
              
                primaryButton={{
                text: "Okay",
                variant: "primary",
                onClick: closeModal,
              }}
              secondaryButton={{
                text: "Close",
                variant: "secondary",
                onClick: closeModal,
              }}>
                <h2 className="mb-4 text-lg font-bold">Modal Size: large</h2>
                <p>
                Magna exercitation reprehenderit magna aute tempor cupidatat
                consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
                incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua
                enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur
                esse laborum eiusmod pariatur proident Lorem eiusmod et.
                </p>
              </BasicModal>
        
              <button onClick={handleOpen} className="bg-Basic text-white px-4 py-2 rounded-md">Open xl Modal</button>
              <BasicModal size="xl" open={isOpen} onClose={handleClose} showCloseIcon={true}
              
                primaryButton={{
                text: "Okay",
                variant: "primary",
                onClick: closeModal,
              }}
              secondaryButton={{
                text: "Close",
                variant: "secondary",
                onClick: closeModal,
              }}>
              <h2 className="mb-4 text-lg font-bold">Modal Size: xl</h2>
              <p>
              Magna exercitation reprehenderit magna aute tempor cupidatat
              consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
              incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua
              enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur
              esse laborum eiusmod pariatur proident Lorem eiusmod et.
              </p>
              </BasicModal>
        
              <button onClick={handleOpen} className="bg-Basic text-white px-4 py-2 rounded-md">Open full Modal</button>
              <BasicModal size="full" open={isOpen} onClose={handleClose} showCloseIcon={true}
              
                primaryButton={{
                text: "Okay",
                variant: "primary",
                onClick: closeModal,
              }}
              secondaryButton={{
                text: "Close",
                variant: "secondary",
                onClick: closeModal,
              }}>
                <h2 className="mb-4 text-lg font-bold">Modal Size: full</h2>
                <p>
                Magna exercitation reprehenderit magna aute tempor cupidatat
                consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
                incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua
                enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur
                esse laborum eiusmod pariatur proident Lorem eiusmod et.
                </p>
              </BasicModal>
            </>
          );
        }
        
        export default Example;

1.4. Using Primary and Secondary Buttons

import { BasicModal } from '@components/Modal/BasicModal';
import { useState } from 'react';

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

  const handleOpen = () => setIsOpen(true);
  const handleClose = () => setIsOpen(false);

  return (
    <>
      <button onClick={handleOpen} className="bg-Primary text-white px-4 py-2 rounded-md">Open Modal with Buttons</button>
      <BasicModal
        open={isOpen}
        onClose={handleClose}
        primaryButton={{ text: "primary", variant: "primary", onClick: handleClose }}
        secondaryButton={{ text: "secondary", variant: "secondary", onClick: handleClose }}
      >
        <p>모달 컴포넌트는 기본적으로 primary와 secondary 버튼을 지원합니다:</p>
      </BasicModal>
    </>
  );
}

export default Example;

1.5. Props

Modal 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`open`	모달이 열려 있는지 여부를 제어합니다.	`boolean`	N/A
`size`	모달의 크기를 설정합니다.	`"xs" \| "small" \| "medium" \| "large" \| "xl" \| "full"`	`"medium"`
`onClose`	모달이 닫힐 때 호출되는 함수입니다.	`() => void`	N/A
`children`	모달 내부에 표시할 내용을 지정합니다.	`React.ReactNode`	N/A
`primaryButton`	모달 하단에 표시될 primary 버튼의 설정입니다.	`ButtonProps`	N/A
`secondaryButton`	모달 하단에 표시될 secondary 버튼의 설정입니다.	`ButtonProps`	N/A
`showCloseIcon`	닫기 아이콘을 표시할지 여부를 설정합니다.	`boolean`	`true`

1.6. Full Example

import { BasicModal } from '@components/Modal/BasicModal';
import { useState } from 'react';

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

  const handleOpen = () => setIsOpen(true);
  const handleClose = () => setIsOpen(false);

  return (
    <>
      <button onClick={handleOpen} className="bg-Primary text-white px-4 py-2 rounded-md">Open Full Example Modal</button>
      <BasicModal
        open={isOpen}
        onClose={handleClose}
        size="large"
        primaryButton={{ text: "Confirm", variant: "primary", onClick: handleClose }}
        secondaryButton={{ text: "Cancel", variant: "secondary", onClick: handleClose }}
        showCloseIcon={true}
      >
        <p>This is a modal with all features enabled.</p>
      </BasicModal>
    </>
  );
}

export default Example;

2. FormModal

FormModal 컴포넌트는 사용자 입력을 수집하기 위한 폼을 포함한 모달입니다. 다양한 크기와 버튼 옵션을 지원합니다.

2.1. Import

import { FormModal } from '@componique/react';

2.2. Usage

아래는 FormModal 컴포넌트의 기본 사용 예제입니다:

import { FormModal } from '@components/Modal/FormModal';
import { useState } from 'react';
import Button from '@components/Button/Button';

function Example() {
  const [openModalKey, setOpenModalKey] = useState<number | null>(null);
  const [modalSize, setModalSize] = useState<ExtraSize>("medium");

  const openModal = (key: number, size: ExtraSize) => {
    setModalSize(size);
    setOpenModalKey(key);
  };

  const closeModal = () => setOpenModalKey(null);

  return (
    <>
      <Button onClick={() => openModal(1, "medium")}>
        Open Form Modal
      </Button>

      <FormModal
        open={openModalKey === 1}
        onClose={closeModal}
        size={modalSize}
        title="Form Modal"
        onSubmit={(data) => console.log("Form Submitted", data)}
        firstNameLabel="First Name"
        lastNameLabel="Last Name"
      />
    </>
  );
}

export default Example;

2.3. Changing the Size of the FormModal

FormModal 컴포넌트는 다양한 크기로 제공됩니다. 기본 크기는 medium입니다:

xs: 아주 작은 크기
small: 작은 크기
medium: 중간 크기 (기본값)
large: 큰 크기
xl: 아주 큰 크기

import { FormModal } from '@components/Modal/FormModal';
import { useState } from 'react';
import Button from '@components/Button/Button';

function Example() {
  const [openModalKey, setOpenModalKey] = useState<number | null>(null);
  const [modalSize, setModalSize] = useState<ExtraSize>("medium");

  const openModal = (key: number, size: ExtraSize) => {
    setModalSize(size);
    setOpenModalKey(key);
  };

  const closeModal = () => setOpenModalKey(null);

  return (
    <>
      <Button onClick={() => openModal(1, "xs")}>Open xs FormModal</Button>
      <Button onClick={() => openModal(2, "xl")}>Open xl FormModal</Button>

      <FormModal
        open={openModalKey === 1}
        onClose={closeModal}
        size={modalSize}
        title="Form Modal XS"
        onSubmit={(data) => console.log("XS Modal Submitted", data)}
        firstNameLabel="First Name"
        lastNameLabel="Last Name"
      />

      <FormModal
        open={openModalKey === 2}
        onClose={closeModal}
        size={modalSize}
        title="Form Modal XL"
        onSubmit={(data) => console.log("XL Modal Submitted", data)}
        firstNameLabel="First Name"
        lastNameLabel="Last Name"
      />
    </>
  );
}

export default Example;

2.4. Props

FormModal 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`open`	모달이 열려 있는지 여부를 제어합니다.	`boolean`	N/A
`size`	모달의 크기를 설정합니다.	`"xs" \| "small" \| "medium" \| "large" \| "xl"`	`"large"`
`onClose`	모달이 닫힐 때 호출되는 함수입니다.	`() => void`	N/A
`title`	모달 상단의 제목을 설정합니다.	`string`	"Create your account"
`onSubmit`	폼이 제출될 때 호출되는 함수입니다.	`(data: { firstName: string; lastName: string }) => void`	N/A
`firstNameLabel`	첫 번째 입력 필드의 라벨 텍스트를 설정합니다.	`string`	"First Name"
`lastNameLabel`	두 번째 입력 필드의 라벨 텍스트를 설정합니다.	`string`	"Last Name"

2.5. Full Example

import { FormModal } from '@components/Modal/FormModal';
import { useState } from 'react';
import Button from '@components/Button/Button';

function Example() {
  const [openModalKey, setOpenModalKey] = useState<number | null>(null);
  const [modalSize, setModalSize] = useState<ExtraSize>("large");

  const openModal = (key: number, size: ExtraSize) => {
    setModalSize(size);
    setOpenModalKey(key);
  };

  const closeModal = () => setOpenModalKey(null);

  return (
    <>
      <Button onClick={() => openModal(1, "medium")}>
        Open Full Example Modal 1
      </Button>
      <Button onClick={() => openModal(2, "large")}>
        Open Full Example Modal 2
      </Button>

      <FormModal
        open={openModalKey === 1}
        onClose={closeModal}
        size={modalSize}
        title="Full Example Modal 1"
        onSubmit={(data) => console.log("Full Example 1 Submitted", data)}
        firstNameLabel="First Name"
        lastNameLabel="Last Name"
      />

      <FormModal
        open={openModalKey === 2}
        onClose={closeModal}
        size={modalSize}
        title="Full Example Modal 2"
        onSubmit={(data) => console.log("Full Example 2 Submitted", data)}
        firstNameLabel="First Name"
        lastNameLabel="Last Name"
      />
    </>
  );
}

export default Example;

3. OverlayModal

OverlayModal 컴포넌트는 페이지 구조와 독립적으로 관리되는 오버레이 모달입니다. 다양한 크기와 버튼 옵션을 지원합니다.

3.1. Import

import { OverlayModal } from '@componique/react';

3.2. Usage

아래는 OverlayModal 컴포넌트의 기본 사용 예제입니다:

import { OverlayModal } from '@components/Modal/OverlayModal';
import { useState } from 'react';
import Button from '@components/Button/Button';

function Example() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalSize, setModalSize] = useState<ExtraSize>("small");

  const handleOpenModal = () => {
    setIsModalOpen(true);
  };


  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  return (
    <>
      <Button variant="border" onClick={handleOpenModal}>
      Open overlay Modal
      </Button>

      <OverlayModal
        isOpen={isModalOpen}
        onClose={handleCloseModal}
        title="Sample Modal"
        closeButtonText="Close"
        showCloseIcon={true}
      >
      <p>This is a overlayModal content.</p>
      </OverlayModal>
    </>
  );
}

export default Example;

3.3. Changing the Size of the OverlayModal

OverlayModal 컴포넌트는 다양한 크기로 제공됩니다. 기본 크기는 small입니다:

xs: 아주 작은 크기
small: 작은 크기 (기본값)
medium: 중간 크기
large: 큰 크기
xl: 아주 큰 크기
full: 전체 화면 크기

import { OverlayModal } from '@components/Modal/OverlayModal';
import { useState } from 'react';
import Button from '@components/Button/Button';

function Example() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalSize, setModalSize] = useState<ExtraSize>("medium");

  const handleOpenModal = () => {
    setIsModalOpen(true);
  };


  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  return (
    <>
      <Button variant="border" onClick={handleOpenModal}>
      Open xl overlay Modal
      </Button>

      <OverlayModal
        isOpen={isModalOpen}
        onClose={handleCloseModal}
        title="XL Overlay Modal"
        closeButtonText="Close"
        showCloseIcon={true}
      >
      <p>Magna exercitation reprehenderit magna aute tempor cupidatat consequat
      elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum
      quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do
      dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum
      eiusmod pariatur proident Lorem eiusmod et. Magna exercitation
      reprehenderit magna aute tempor cupidatat consequat elit dolor
      adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis.
      Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor
      eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod
      pariatur proident Lorem eiusmod et. Magna exercitation reprehenderit
      magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit
      dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia
      eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit
      incididunt nisi consectetur esse laborum eiusmod pariatur proident
      Lorem eiusmod et. Magna</p>
      </OverlayModal>
    </>
  );
}

export default Example;

3.4. Props

OverlayModal 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`isOpen`	모달이 열려 있는지 여부를 제어합니다.	`boolean`	N/A
`onClose`	모달이 닫힐 때 호출되는 함수입니다.	`() => void`	N/A
`children`	모달 내부에 표시할 내용을 지정합니다.	`ReactNode`	N/A
`title`	모달 상단의 제목을 설정합니다.	`string`	N/A
`size`	모달의 크기를 설정합니다.	`"xs" \| "small" \| "medium" \| "large" \| "xl" \| "full"`	`"small"`
`closeOnOverlayClick`	오버레이 클릭 시 모달을 닫을지 여부를 설정합니다.	`boolean`	`true`
`closeButtonText`	닫기 버튼의 텍스트를 설정합니다.	`string`	`"Close"`
`className`	추가적인 CSS 클래스를 설정합니다.	`string`	N/A
`showCloseIcon`	닫기 아이콘을 표시할지 여부를 설정합니다.	`boolean`	`true`

3.5. Full Example

import { OverlayModal } from '@components/Modal/OverlayModal';
import { useState } from 'react';
import Button from '@components/Button/Button';

function Example() {
  const [openModalKey, setOpenModalKey] = useState<number | null>(null);
  const [modalSize, setModalSize] = useState<ExtraSize>("small");

  const openModal = (key: number, size: ExtraSize) => {
    setModalSize(size);
    setOpenModalKey(key);
  };

  const closeModal = () => setOpenModalKey(null);

  return (
    <>
      <Button onClick={() => openModal(1, "medium")}>
        Open Full Example Overlay Modal 1
      </Button>
      <Button onClick={() => openModal(2, "large")}>
        Open Full Example Overlay Modal 2
      </Button>

      <OverlayModal
        isOpen={openModalKey === 1}
        onClose={closeModal}
        size={modalSize}
        title="Full Example Overlay Modal 1"
        closeButtonText="Close"
        showCloseIcon={true}
      >
        <p>This is a full example of overlay modal 1.</p>
      </OverlayModal>

      <OverlayModal
        isOpen={openModalKey === 2}
        onClose={closeModal}
        size={modalSize}
        title="Full Example Overlay Modal 2"
        closeButtonText="Close"
        showCloseIcon={true}
      >
        <p>This is a full example of overlay modal 2.</p>
      </OverlayModal>
    </>
  );
}

export default Example;