기체정보 - 파일 업로드 시 10MB 이하의 파일만 등록되게 변경

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 => {
             </span>
           </Button.Ripple>
         </div>
+        <div className='vertically-centered-modal'>
+          <Modal
+            isOpen={props.modal.isOpen}
+            toggle={() => props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })}
+            modalClassName={props.modal.color}
+            className='modal-dialog-centered'
+          >
+            <ModalHeader
+              toggle={() => props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })}
+            >
+              {props.modal.title}
+            </ModalHeader>
+            <ModalBody>{props.modal.desc}</ModalBody>
+            <ModalFooter>
+                <Button
+                  color='danger'
+                  onClick={() => props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })}
+                >
+                  확인
+                </Button>
+            </ModalFooter>
+          </Modal>
+        </div>
         {/* <div className='sm-txt mt-1'>이미지 최적 크기 300*300</div> */}
       </Media>
     </Media>

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}
         />
       </Col>
       <Col md={7} lg={9}>