diff --git a/src/components/basis/dron/BasisDronImage.js b/src/components/basis/dron/BasisDronImage.js index 77327f3..28cbc4f 100644 --- a/src/components/basis/dron/BasisDronImage.js +++ b/src/components/basis/dron/BasisDronImage.js @@ -1,6 +1,6 @@ import React from 'react'; import { Edit, Image, Trash2 } from 'react-feather'; -import { Button, Label, Media } from 'reactstrap'; +import { Button, Label, Media, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; export const BasisDronImage = props => { return ( @@ -50,6 +50,29 @@ export const BasisDronImage = props => { +
+ props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })} + modalClassName={props.modal.color} + className='modal-dialog-centered' + > + props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })} + > + {props.modal.title} + + {props.modal.desc} + + + + +
{/*
이미지 최적 크기 300*300
*/} diff --git a/src/containers/basis/dron/BasisDronDetailContainer.js b/src/containers/basis/dron/BasisDronDetailContainer.js index 1e207d4..a4ed573 100644 --- a/src/containers/basis/dron/BasisDronDetailContainer.js +++ b/src/containers/basis/dron/BasisDronDetailContainer.js @@ -54,7 +54,12 @@ export const BasisDronDetailContainer = props => { }, resolver: yupResolver(validationSchema) }); - + const [modal, setModal] = useState({ + isOpen: false, + title: '', + desc: '', + color: '' + }) useEffect(() => { if (props.id) { handlerSearch(); @@ -96,6 +101,16 @@ export const BasisDronDetailContainer = props => { const handlerImageChange = e => { const reader = new FileReader(), files = e.target.files; + const fileSize = files[0].size/1048576; + if(fileSize > 10) { + setModal({ + isOpen: true, + title: '이미지 용량 초과', + desc: '10MB 이하의 파일만 등록 가능합니다', + color: 'modal-danger' + }) + return; + } saveFileAPI(files[0]); }; @@ -148,6 +163,8 @@ export const BasisDronDetailContainer = props => { handlerImageDelete={handlerImageDelete} data={register} img={img} + modal={modal} + setModal={setModal} />