당신의 패키지 매니저를 통해 @hanuuny/react-modal
을 설치해 주세요:
npm install @hanuuny/react-modal
Modal
컴포넌트를 import 하세요:
import { Modal } from '@hanuuny/react-modal';
export const MyComponent = () => {
const [isOpen, setIsOpen] = useState(false);
const handleClose = () => setIsOpen(false);
return (
<Modal isOpen={isOpen} close={handleClose}>
모달 컨텐츠
</Modal>
);
};
모달 컴포넌트는 유연하게 설계되어 다양한 타입의 콘텐츠를 내부에 포함시킬 수 있습니다. 다음은 모달 내의 다양한 하위 컴포넌트들을 사용하는 방법입니다:
모달의 상단 영역을 표시합니다. 주로 제목과 닫기 버튼을 포함합니다.
모달의 주요 콘텐츠 영역을 표시합니다. 텍스트, 폼 또는 기타 콘텐츠를 포함합니다.
모달의 하단 영역을 표시합니다. 주로 확인 또는 취소와 같은 동작 버튼을 포함합니다.
모달의 제목을 표시합니다.
모달에서 제공되는 기본 입력 필드입니다.
모달에서 제공되는 기본 버튼입니다.
모달을 쉽게 닫을 수 있도록 제공되는 닫기 버튼입니다.
각 컴포넌트는 일관된 외관을 제공하도록 적절하게 스타일링되어 있지만, 사용자의 필요에 따라 커스텀할 수 있습니다.
모달 라이브러리는 다양한 선택 속성을 지원합니다:
Name | Type | Default | Description |
---|---|---|---|
position |
'bottom' | 'center' |
'bottom' |
모달의 위치를 설정합니다. |
size |
'sm' | 'md' | 'lg' |
'lg' |
모달의 크기를 설정합니다. |
backdropType |
'transparent' | 'blur' | 'opaque' |
'opaque' |
원하는 배경 효과 유형을 정의합니다. |
shadow |
boolean |
'true' |
모달에 그림자 효과를 설정합니다. |
animation |
boolean |
true |
모달 트랜지션 애니메이션을 설정합니다. |
Name | Type | Default | Description |
---|---|---|---|
mode |
'primary' | 'secondary' |
'primary' |
버튼의 타입을 설정합니다. |
size |
'sm' | 'md' | 'lg' |
'lg' |
버튼의 크기를 설정합니다. |
import { Modal } from 'modal';
export const MyComponent = () => {
const [isOpen, setIsOpen] = useState(false);
const handleClose = () => setIsOpen(false);
return (
<Modal isOpen={isOpen} position="bottom" backdropType="blur" size="lg" close={handleClose}>
<Modal.Header>
<Modal.Title>제목</Modal.Title>
<Modal.CloseButton close={handleClose} />
</Modal.Header>
<Modal.Body>
<p>모달입니다.</p>
</Modal.Body>
<Modal.Footer>
<Modal.Button text="확인" mode="primary" size="lg"></Modal.Button>
<Modal.Button text="닫기" mode="secondary" size="lg" onClick={handleClose}></Modal.Button>
</Modal.Footer>
</Modal>
);
};
해당 라이브러리에서는 기본 모달을 간편하게 생성할 수 있도록 다양한 프리셋 컴포넌트를 제공합니다. 다음은 모달 프리셋 컴포넌트를 사용하는 방법입니다:
사용자에게 간단한 메시지를 전달하고 싶을 때 사용할 수 있는 모달입니다. 정보의 확인이나 경고 같은 단일 메시지를 보여주기에 적합하며, 확인 버튼을 눌러 모달을 닫을 수 있습니다.
사용자에게 결정을 요구할 때 사용할 수 있는 모달입니다. 중요한 작업을 수행하기 전 선택지를 제공하기에 적합하며, 확인 버튼과 취소 버튼을 제공하여 선택할 수 있게 합니다.
사용자에게 입력을 받기 위해 사용할 수 있는 모달입니다. 입력 필드를 포함하며, 입력을 완료하고 확인 버튼을 눌러 데이터를 전송할 수 있습니다.
모달 프리셋 컴포넌트는 기본적으로 Modal
컴포넌트의 사용자 정의 속성을 포함하고 있으며, 추가적으로 적절한 인자를 전달해야 합니다:
Name | Type | Default | Description |
---|---|---|---|
headerText |
string |
- | 모달 제목 텍스트를 전달합니다. |
bodyText |
string |
- | 모달 내용 텍스트를 전달합니다. |
사용 예시
const [isOpen, setIsOpen] = useState(false);
<AlertModal
isOpen={isOpen}
close={() => setIsOpen(false)}
headerText="아이디를 입력해 주세요."
bodyText="아이디는 필수로 입력해야 합니다."
/>;
Name | Type | Default | Description |
---|---|---|---|
headerText |
string |
- | 모달 제목 텍스트를 전달합니다. |
bodyText |
string |
- | 모달 내용 텍스트를 전달합니다. |
onConfirm |
() => void |
- | 확인 버튼을 눌렀을 시 발생할 콜백 함수를 전달합니다. |
사용 예시
const [isOpen, setIsOpen] = useState(false);
<ConfirmModal
isOpen={isOpen}
onConfirm={() => setIsOpen(false)}
close={() => setIsOpen(false)}
headerText="카드를 삭제하시겠습니까?"
bodyText="삭제하면 복구하실 수 없습니다"
/>;
Name | Type | Default | Description |
---|---|---|---|
headerText |
string |
- | 모달 제목 텍스트를 전달합니다. |
inputValue |
string |
- | 입력 필드에 들어갈 변수를 전달합니다. |
onInputChange |
string |
- | 입력 필드에 들어갈 변수가 변경됐을 때 발생할 콜백 함수를 전달합니다. |
onConfirm |
() => void |
- | 확인 버튼을 눌렀을 시 발생할 콜백 함수를 전달합니다. |
사용 예시
const [isOpen, setIsOpen] = useState(false);
const [value, setValue] = useState('');
const handleValue = (e: React.ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value);
};
<PromptModal
isOpen={isOpen}
close={() => setIsOpen(false)}
headerText="쿠폰 번호를 입력해 주세요."
inputValue={value}
onInputChange={handleValue}
onConfirm={() => setIsOpen(false)}
/>;