From 54bf26fd2f3bbbfef5d536fe12613a9faeeb7ecd Mon Sep 17 00:00:00 2001
From: junh_eee <junh_eee@naver.com>
Date: Wed, 21 Sep 2022 15:02:56 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B7=B8=EB=A3=B9=EC=82=AD=EC=A0=9C,=20?=
 =?UTF-8?q?=EA=B7=B8=EB=A3=B9=ED=83=88=ED=87=B4=20Modal=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/basis/group/BaisGroupForm.js   | 59 ++++++++++++++-----
 src/components/modal/ConfirmModal.js          |  4 +-
 .../basis/group/BasisGroupDetailContainer.js  |  5 ++
 3 files changed, 52 insertions(+), 16 deletions(-)

diff --git a/src/components/basis/group/BaisGroupForm.js b/src/components/basis/group/BaisGroupForm.js
index a1b5456..6b76812 100644
--- a/src/components/basis/group/BaisGroupForm.js
+++ b/src/components/basis/group/BaisGroupForm.js
@@ -112,22 +112,53 @@ export const BasisGroupForm = props => {
                 {/* <Button.Ripple className='mr-1' color='secondary' size='sm'>
                   목록
                 </Button.Ripple> */}
-              {props.groupData.type != 'create'?(
-                <Button.Ripple
-                  color='danger'
-                  size='sm'
-                  onClick={props.handlerDelete}
-                >
-                  삭제
-                </Button.Ripple>
-              )
-               :
-               (
-                <></>
-               ) 
-              }
+                {props.groupData.type != 'create'?(
+                  <Button.Ripple
+                    color='danger'
+                    size='sm'
+                    // onClick={props.handlerDelete}
+                    onClick={() => props.setConfirmModal(!props.confirmModal)}
+                  >
+                    삭제
+                  </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>
diff --git a/src/components/modal/ConfirmModal.js b/src/components/modal/ConfirmModal.js
index cf67d72..5873a8c 100644
--- a/src/components/modal/ConfirmModal.js
+++ b/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>
 
diff --git a/src/containers/basis/group/BasisGroupDetailContainer.js b/src/containers/basis/group/BasisGroupDetailContainer.js
index 7904e12..f1f14e5 100644
--- a/src/containers/basis/group/BasisGroupDetailContainer.js
+++ b/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>
   );