그룹삭제, 그룹탈퇴 Modal 수정

src/components/basis/group/BaisGroupForm.js

@@ -116,7 +116,8 @@ export const BasisGroupForm = props => {
                   <Button.Ripple
                     color='danger'
                     size='sm'
-                  onClick={props.handlerDelete}
+                    // onClick={props.handlerDelete}
+                    onClick={() => props.setConfirmModal(!props.confirmModal)}
                   >
                     삭제
                   </Button.Ripple>
@@ -128,6 +129,36 @@ export const BasisGroupForm = props => {
                 }
               </div>
             </div>
+
+            <div className='vertically-centered-modal'>
+              <Modal
+                isOpen={props.confirmModal}
+                toggle={() => props.setConfirmModal(!props.confirmModal)}
+                modalClassName='modal-danger'
+                className='modal-dialog-centered'
+              >
+                <ModalHeader
+                  toggle={() => props.setConfirmModal(!props.confirmModal)}
+                >
+                  삭제 확인
+                </ModalHeader>
+                <ModalBody>해당 그룹을 삭제 하시겠습니까?</ModalBody>
+                <ModalFooter>
+                  <Button color='danger' onClick={props.handlerDelete}>
+                    확인
+                  </Button>
+
+                  <Button
+                    color='secondary'
+                    onClick={() =>
+                      props.setConfirmModal(!props.confirmModal)
+                    }
+                  >
+                    취소
+                  </Button>
+                </ModalFooter>
+              </Modal>
+            </div>
           </CardBody>
         </Card>
       </Col>

src/components/modal/ConfirmModal.js

@@ -12,7 +12,7 @@ export const ConfirmModal = props => {
         toggle={() =>
           props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })
         }
-        modalClassName='modal-primary'
+        modalClassName='modal-danger'
         className='modal-dialog-centered'
       >
         <ModalHeader
@@ -24,7 +24,7 @@ export const ConfirmModal = props => {
         </ModalHeader>
         <ModalBody>{props.modal.desc}</ModalBody>
         <ModalFooter>
-          <Button color='primary' onClick={handlerSubmit}>
+          <Button color='danger' onClick={handlerSubmit}>
             확인
           </Button>
 

src/containers/basis/group/BasisGroupDetailContainer.js

@@ -20,6 +20,8 @@ export const BasisGroupDetailContainer = () => {
   const { id } = useParams();
   const titleName = '그룹 관리';
 
+  const [confirmModal, setConfirmModal] = useState(false)
+
   useEffect(() => {
     if (id) {
       handlerSearch();
@@ -61,6 +63,7 @@ export const BasisGroupDetailContainer = () => {
     dispatch(Actions.GROUP_UPDATE.request(groupData));
   };
   const handlerDelete = () => {
+    setConfirmModal(!confirmModal);
     dispatch(Actions.GROUP_DELETE.request(groupData.groupId));
   };
 
@@ -82,6 +85,8 @@ export const BasisGroupDetailContainer = () => {
         }
         handlerDelete={handlerDelete}
         handlerInput={handlerInput}
+        confirmModal={confirmModal}
+        setConfirmModal={setConfirmModal}
       />
     </CustomDetailLayout>
   );