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}
/>