Modal 컴포넌트

package 이름 : rian-modal-component

Writer : 헤일리, 리안 Installation npm install rian-modal-components

Props

children : 모달안에 들어갈 자식 요소

isOpen : 모달이 현재 열렸는지 닫혔는지를 알려주는 state

onClose : 모달을 닫는 메서드 함수

position : center | bottom;

size: full | large | small | auto

Children Components

(1) Title : 모달의 제목

children : 제목으로 넣고 싶은 컨텐츠

<Modal.Title> 제목</Modal.Title>

(2) CloseIcon : 모달 상단 우측의 x 버튼

안에 아이콘을 넣으면 닫기 버튼으로 사용할 수 있습니다.

onClick : 사용자 정의 닫기 이벤트 핸들러

<Modal.CloseIcon onClick={handleClose}>
<DeleteIcon />
</Modal.CloseIcon>

(3) Content : 모달의 내용

children : 컨텐츠 내부에 넣고 싶은 컨텐츠

<Modal.Content>[필수] 개인정보 수집약관 동의</Modal.Content>

(4) StyledButton : 모달의 버튼

버튼에 이벤트를 연결해 삭제, 제출 버튼 등 다양한 버튼으로 사용할 수 있습니다.

label : 해당 버튼에 들어갈 텍스트 onClickEvent: 확인 버튼 클릭시 실행될 사용자 정의 이벤트 핸들러 backgroundColor :white(default) | black| string textColor :black(default) | white size : small | medium | large | full ;

<Modal.StyledButton
label="동의"
onClickEvent={() => {}}
backgroundColor="black"
size={"small"}
/>

(5) CloseButton : 모달의 닫기 버튼

label : 해당 버튼에 들어갈 텍스트 onClose: 닫기 버튼 클릭시 실행될 사용자 정의 이벤트 핸들러 size : small | medium | large | full ;

<Modal.CloseButton label="닫기" onClose={handleClose} />

Usage

import { Modal } from "rian-modal-components";

<Modal isOpen={true} position="center" onClose={() => {}} size="full">
<Modal.Title> 약관에 동의해 주세요</Modal.Title>
<Modal.CloseIcon onClick={() => {}}>
<DeleteIcon />
</Modal.CloseIcon>
<Modal.Content>[필수] 개인정보 수집약관 동의</Modal.Content>
<Modal.StyledButton
label="동의"
onClickEvent={() => {}}
backgroundColor="white"
/>
<Modal.CloseButton label="닫기" onClose={() => {}} />
</Modal>;

Styled Modal Components

필요한 props 만 넣어주면 완성되는 템플릿 형식의 modal을 제공합니다. AlertModal,ConfirmModal,PromptModal 이 있습니다.

1. AlertModal

• isOpen[boolean] : 모달이 열려 있는지 여부
• onClose: 모달을 열고 닫는 함수
• onConfirm: 확인 버튼을 클릭할 시 들어갈 함수
• title: 모달의 제목
• message: 모달의 내용
• buttonText?: 확인 버튼 내용. '확인'이 기본값입니다.
• position?: "center" | "bottom"
• modalSize?: "small" | "medium" | "large" | "full"

<AlertModal
isOpen={true}
onClose={() => {}}
onConfirm={() => {}}
title="아이디를 입력해 주세요."
message="아이디는 필수로 입력해야 합니다."
/>

2. ConfirmModal

• isOpen[boolean] : 모달이 열려 있는지 여부
• onClose: 모달을 열고 닫는 함수
• onConfirm: 확인 버튼을 클릭할 시 들어갈 함수
• title: 모달의 제목
• message: 모달의 내용
• confirmButtonText?: 확인 버튼 내용. '확인'이 기본값입니다.
• cancelButtonText?: 취소 버튼 내용. '취소'가 기본값입니다.
• position?: "center" | "bottom"
• modalSize?: "small" | "medium" | "large" | "full"

<ConfirmModal
isOpen={true}
onClose={() => {}}
onConfirm={() => {}}
title="아이디를 입력해 주세요."
message="아이디는 필수로 입력해야 합니다."
/>

3. PromptModal

• isOpen[boolean] : 모달이 열려 있는지 여부
• onClose: 모달을 열고 닫는 함수
• onConfirm: 확인 버튼을 클릭할 시 들어갈 함수
• title: 모달의 제목
• message: 모달의 내용
• confirmButtonText?: 확인 버튼 내용. '확인'이 기본값입니다.
• cancelButtonText?: 취소 버튼 내용. '취소'가 기본값입니다.
• position?: "center" | "bottom"
• modalSize?: "small" | "medium" | "large" | "full"
• inputProps?: 인풋 태그에 들어갈 props 를 정의할 수 있습니다
• value: 인풋의 값을 지정합니다.
• onChange: 인풋의 값을 관리하는 onChange 메서드입니다.

<PromptModal
isOpen={true}
onClose={() => {}}
onConfirm={() => {}}
title="아이디를 입력해 주세요."
message="아이디는 필수로 입력해야 합니다."
onChange={onChange}
value={value}
/>