ConfirmModal 색상 props로 받아오기

src/components/basis/group/BaisGroupForm.js

@@ -59,7 +59,7 @@ export const BasisGroupForm = props => {
                             name='groupId'
                             bsSize='sm'
                             readOnly={true}
-                            value={props.groupData.groupId || ""}
+                            value={props.groupData.groupId || ''}
                             placeholder=''
                           />
                         </FormGroup>
@@ -75,7 +75,7 @@ export const BasisGroupForm = props => {
                             name='groupNm'
                             bsSize='sm'
                             onChange={props.handlerInput}
-                            value={props.groupData.groupNm || ""}
+                            value={props.groupData.groupNm || ''}
                             placeholder=''
                           />
                         </FormGroup>
@@ -112,53 +112,19 @@ export const BasisGroupForm = props => {
                 {/* <Button.Ripple className='mr-1' color='secondary' size='sm'>
                   목록
                 </Button.Ripple> */}
-                {props.groupData.type != 'create'?(
+                {props.groupData.type != 'create' ? (
                   <Button.Ripple
                     color='danger'
                     size='sm'
-                    // onClick={props.handlerDelete}
-                    onClick={() => props.setConfirmModal(!props.confirmModal)}
+                    onClick={() => props.handlerWidthrow()}
                   >
                     삭제
                   </Button.Ripple>
-                )
-                :
-                (
+                ) : (
                   <></>
-                ) 
-                }
+                )}
               </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,8 @@ export const ConfirmModal = props => {
         toggle={() =>
           props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })
         }
-        modalClassName='modal-danger'
+        // modalClassName='modal-primary'
+        modalClassName={'modal-' + `${props.color}`}
         className='modal-dialog-centered'
       >
         <ModalHeader
@@ -24,7 +25,8 @@ export const ConfirmModal = props => {
         </ModalHeader>
         <ModalBody>{props.modal.desc}</ModalBody>
         <ModalFooter>
-          <Button color='danger' onClick={handlerSubmit}>
+          {/* <Button color='danger' onClick={handlerSubmit}> */}
+          <Button color={props.color} onClick={handlerSubmit}>
             확인
           </Button>
 

src/containers/basis/group/BasisGroupApprovalContainer.js

@@ -215,11 +215,13 @@ export const BasisGroupApprovalContainer = props => {
         modal={modal}
         setModal={setModal}
         handlerConfirm={handlerAprvSave}
+        color='primary'
       />
       <ConfirmModal
         modal={modal2}
         setModal={setModal2}
         handlerConfirm={handlerAprvSave}
+        color='primary'
       />
     </CustomMainLayout>
   );

src/containers/basis/group/BasisGroupContainer.js

@@ -206,6 +206,7 @@ export const BasisGroupContainer = props => {
         modal={modal}
         setModal={setModal}
         handlerConfirm={handlerWidthrowConfirm}
+        color='danger'
       />
     </CustomMainLayout>
   );

src/containers/basis/group/BasisGroupDetailContainer.js

@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import { BasisGroupForm } from '../../../components/basis/group/BaisGroupForm';
 import { CustomDetailLayout } from '../../../components/layout/CustomDetailLayout';
+import { ConfirmModal } from '../../../components/modal/ConfirmModal';
 import * as Actions from '../../../modules/basis/group/actions/basisGroupAction';
 
 export const BasisGroupDetailContainer = () => {
@@ -16,12 +17,17 @@ export const BasisGroupDetailContainer = () => {
     groupNm: '',
     groupTypeCd: ''
   });
+
+  const [modal, setModal] = useState({
+    isOpen: false,
+    title: '',
+    desc: ''
+  });
+
   const dispatch = useDispatch();
   const { id } = useParams();
   const titleName = '그룹 관리';
 
-  const [confirmModal, setConfirmModal] = useState(false)
-
   useEffect(() => {
     if (id) {
       handlerSearch();
@@ -63,10 +69,18 @@ export const BasisGroupDetailContainer = () => {
     dispatch(Actions.GROUP_UPDATE.request(groupData));
   };
   const handlerDelete = () => {
-    setConfirmModal(!confirmModal);
     dispatch(Actions.GROUP_DELETE.request(groupData.groupId));
   };
 
+  const handlerWidthrow = () => {
+    setModal({
+      isOpen: true,
+      title: '삭제 확인',
+      desc: '해당 그룹을 삭제 하시겠습니까?'
+    });
+    return;
+  };
+
   const handlerInput = e => {
     const { name, value } = e.target;
     setGroupData({
@@ -85,8 +99,14 @@ export const BasisGroupDetailContainer = () => {
         }
         handlerDelete={handlerDelete}
         handlerInput={handlerInput}
-        confirmModal={confirmModal}
-        setConfirmModal={setConfirmModal}
+        handlerWidthrow={handlerWidthrow}
+      />
+
+      <ConfirmModal
+        modal={modal}
+        setModal={setModal}
+        handlerConfirm={handlerDelete}
+        color='danger'
       />
     </CustomDetailLayout>
   );

src/containers/basis/group/BasisGroupDetailJoinContainer.js

@@ -54,8 +54,7 @@ export const BasisGroupDetailJoinContainer = props => {
       );
     }
   }, [user]);
-  useEffect(() => {
-  }, [params]);
+  useEffect(() => {}, [params]);
 
   const handlerJoin = groupId => {
     setJoinData({
@@ -184,6 +183,7 @@ export const BasisGroupDetailJoinContainer = props => {
         modal={modal}
         setModal={setModal}
         handlerConfirm={handlerConfirm}
+        color='primary'
       />
     </CustomDetailLayout>
   );

src/containers/basis/group/BasisGroupUsersContainer.js

@@ -144,7 +144,12 @@ export const BasisGroupUsersContainer = props => {
   }, []);
 
   const handlerSearch = () => {
-    dispatch(Actions.USER_LIST.request({ searchParams: params , cstmrSno: user?.cstmrSno}));
+    dispatch(
+      Actions.USER_LIST.request({
+        searchParams: params,
+        cstmrSno: user?.cstmrSno
+      })
+    );
   };
 
   const handlerAdminConfirm = cstmrGroupSno => {
@@ -214,6 +219,7 @@ export const BasisGroupUsersContainer = props => {
         modal={modal}
         setModal={setModal}
         handlerConfirm={handlerAuthSave}
+        color='primary'
       />
     </CustomMainLayout>
   );

src/containers/system/auth/SystemAuthContainer.js

@@ -71,8 +71,7 @@ export const SystemAuthContainer = props => {
     handlerSearch();
   }, []);
 
-  useEffect(() => {
-  }, [params]);
+  useEffect(() => {}, [params]);
   const handlerSearch = () => {
     // dispatch(Actions.list.request({ searchParams: params }));
   };
@@ -91,7 +90,7 @@ export const SystemAuthContainer = props => {
   };
 
   const handlerWidthrowConfirm = () => {
-   // console.log('탈퇴!!!');
+    // console.log('탈퇴!!!');
   };
 
   const handlerGroupJoin = () => {
@@ -268,6 +267,7 @@ export const SystemAuthContainer = props => {
         modal={modal}
         setModal={setModal}
         handlerConfirm={handlerWidthrowConfirm}
+        color='primary'
       />
     </CustomMainLayout>
   );

src/containers/system/code/SystemCodeContainer.js

@@ -72,8 +72,7 @@ export const SystemCodeContainer = props => {
     handlerSearch();
   }, []);
 
-  useEffect(() => {
-  }, [params]);
+  useEffect(() => {}, [params]);
   const handlerSearch = () => {
     // dispatch(Actions.list.request({ searchParams: params }));
   };
@@ -227,7 +226,7 @@ export const SystemCodeContainer = props => {
           />
         </Row>
       </div>
-      <ConfirmModal modal={modal} setModal={setModal} />
+      <ConfirmModal modal={modal} setModal={setModal} color='primary' />
     </CustomMainLayout>
   );
 };

src/containers/system/menu/SystemMenuContainer.js

@@ -72,8 +72,7 @@ export const SystemMenuContainer = props => {
     handlerSearch();
   }, []);
 
-  useEffect(() => {
-  }, [params]);
+  useEffect(() => {}, [params]);
   const handlerSearch = () => {
     // dispatch(Actions.list.request({ searchParams: params }));
   };
@@ -227,7 +226,7 @@ export const SystemMenuContainer = props => {
           />
         </Row>
       </div>
-      <ConfirmModal modal={modal} setModal={setModal} />
+      <ConfirmModal modal={modal} setModal={setModal} color='primary' />
     </CustomMainLayout>
   );
 };

src/containers/system/user/SystemUserContainer.js

@@ -73,8 +73,7 @@ export const SystemUserContainer = props => {
     handlerSearch();
   }, []);
 
-  useEffect(() => {
-  }, [params]);
+  useEffect(() => {}, [params]);
   const handlerSearch = () => {
     // dispatch(Actions.list.request({ searchParams: params }));
   };
@@ -93,7 +92,7 @@ export const SystemUserContainer = props => {
   };
 
   const handlerWidthrowConfirm = () => {
-   // console.log('탈퇴!!!');
+    // console.log('탈퇴!!!');
   };
 
   const handlerGroupJoin = () => {
@@ -270,6 +269,7 @@ export const SystemUserContainer = props => {
         modal={modal}
         setModal={setModal}
         handlerConfirm={handlerWidthrowConfirm}
+        color='primary'
       />
     </CustomMainLayout>
   );