그룹 승인 관리 에러 수정

src/components/basis/group/BasisGroupApprovalSearch.js

@@ -26,30 +26,88 @@ import { useEffect, useState } from 'react';
 import moment from 'moment';
 
 export const BasisGroupApprovalSearch = props => {
-  const [isCheckBox, setIsCheckBox] = useState({
+  // const [isCheckBox, setIsCheckBox] = useState({
-    all: true,
+  //   all: true,
-    yes: false,
+  //   yes: false,
-    no: false
+  //   no: false
-  });
+  // });
 
-  useEffect(() => {
+  // useEffect(() => {
-    let aprvYn = '';
+  //   let aprvYn = '';
 
-    if (!isCheckBox.all) {
+  //   if (!isCheckBox.all) {
-      if (isCheckBox.yes) {
+  //     if (isCheckBox.yes) {
-        aprvYn = 'Y';
+  //       aprvYn = 'Y';
-      } else if (isCheckBox.no) {
+  //     } else if (isCheckBox.no) {
-        aprvYn = 'N';
+  //       aprvYn = 'N';
-      } else {
+  //     } else {
-        aprvYn = '-';
+  //       aprvYn = '-';
-      }
+  //     }
+  //   }
+  //   props.setParams({
+  //     ...props.params,
+  //     aprvYn: aprvYn
+  //   });
+  // }, [isCheckBox]);
+  let aprvYn='N';
+  const initCheckState = {
+    'all': aprvYn == 'A',
+    'yes': (aprvYn == 'Y' || aprvYn == 'A'),
+    'no': (aprvYn == 'N' || aprvYn == 'A'),
+  }
+  const [checkState, setCheckState] = useState(initCheckState);
+
+  const handleChangeCheckbox = (e) => {
+    const {name, value, checked} = e.target;
+    let val;
+    switch(value) {
+      case 'A' :
+        val = checked ? '' : '-';
+        props.setParams({
+          ...props.params,
+          aprvYn: val
+        })
+        setCheckState({
+          'all': checked,
+          'yes': checked,
+          'no': checked
+        })
+        break;
+      case 'Y':
+        if (checked && checkState.no) val = ''
+        else if (checked && !checkState.no) val = 'Y'
+        else if (!checked && checkState.no) val = 'N'
+        else if (!checked && !checkState.no) val = '-'
+        props.setParams({
+          ...props.params,
+          aprvYn: val
+        })
+        setCheckState(prevState => ({
+          'all': prevState.no && checked,
+          'yes': checked,
+          'no': prevState.no
+        }))
+        break;
+      case 'N':
+        if (checked && checkState.yes) val = ''
+        else if (checked && !checkState.yes) val = 'N'
+        else if (!checked && checkState.yes) val = 'Y'
+        else if (!checked && !checkState.yes) val = '-'
+        props.setParams({
+          ...props.params,
+          aprvYn: val
+        })
+        setCheckState(prevState => ({
+          'all': prevState.yes && checked,
+          'yes': prevState.yes,
+          'no': checked
+        }))
+        break;
+      default:
+        break;
     }
+  }
 
-    props.setParams({
-      ...props.params,
-      aprvYn: aprvYn
-    });
-  }, [isCheckBox]);
   return (
     <div className='pal-card-box'>
       <Row>
@@ -138,40 +196,52 @@ export const BasisGroupApprovalSearch = props => {
                             type='checkbox'
                             id='exampleCustomCheckbox'
                             label='전체'
-                            defaultChecked={isCheckBox.all}
+                            name='aprvlYn'
-                            onClick={() =>
+                            value='A'
-                              setIsCheckBox({
+                            checked={checkState.all}
-                                all: !isCheckBox.all,
+                            onChange={handleChangeCheckbox}
-                                yes: !isCheckBox.all,
+                            // defaultChecked={isCheckBox.all}
-                                no: !isCheckBox.all
+                            // onClick={() =>
-                              })
+                            //   setIsCheckBox({
-                            }
+                            //     all: !isCheckBox.all,
+                            //     yes: !isCheckBox.all,
+                            //     no: !isCheckBox.all
+                            //   })
+                            // }
                           />
                           <CustomInput
                             inline
                             type='checkbox'
                             id='exampleCustomCheckbox2'
                             label='승인'
-                            defaultChecked={isCheckBox.yes || isCheckBox.all}
+                            name='aprvlYn'
-                            onClick={() =>
+                            value='Y'
-                              setIsCheckBox({
+                            checked={checkState.yes}
-                                all: false,
+                            onChange={handleChangeCheckbox}
-                                yes: !isCheckBox.yes
+                            // defaultChecked={isCheckBox.yes || isCheckBox.all}
-                              })
+                            // onClick={() =>
-                            }
+                            //   setIsCheckBox({
+                            //     all: false,
+                            //     yes: !isCheckBox.yes
+                            //   })
+                            // }
                           />
                           <CustomInput
                             inline
                             type='checkbox'
                             id='exampleCustomCheckbox3'
                             label='미승인'
-                            defaultChecked={isCheckBox.no || isCheckBox.all}
+                            name='aprvlYn'
-                            onClick={() =>
+                            value='N'
-                              setIsCheckBox({
+                            checked={checkState.no}
-                                all: false,
+                            onChange={handleChangeCheckbox}
-                                no: !isCheckBox.no
+                            // defaultChecked={isCheckBox.no || isCheckBox.all}
-                              })
+                            // onClick={() =>
-                            }
+                            //   setIsCheckBox({
+                            //     all: false,
+                            //     no: !isCheckBox.no
+                            //   })
+                            // }
                           />
                         </div>
                       </div>

src/containers/basis/group/BasisGroupApprovalContainer.js

@@ -8,6 +8,7 @@ import { CustomMainLayout } from '../../../components/layout/CustomMainLayout';
 import { ConfirmModal } from '../../../components/modal/ConfirmModal';
 import * as Actions from '../../../modules/basis/group/actions/basisGroupAction';
 
+
 export const BasisGroupApprovalContainer = props => {
   const { aprvList, aprvCount } = useSelector(state => state.groupState);
 
@@ -126,16 +127,19 @@ export const BasisGroupApprovalContainer = props => {
     }
   ];
 
+
   useEffect(() => {
     if (user?.cstmrSno) {
       setParams({
         ...params,
-        cstmrSno: user?.cstmrSno
+        cstmrSno: user?.cstmrSno,
+        aprvYn: 'N'
       });
 
       dispatch(
         Actions.APPROVAL_LIST.request({
-          searchParams: { cstmrSno: user?.cstmrSno }
+          searchParams: { cstmrSno: user?.cstmrSno, aprvYn: 'N'}
+          //  searchParams: params 
         })
       );
     }
@@ -147,9 +151,6 @@ export const BasisGroupApprovalContainer = props => {
     }
   };
 
-  useEffect(() => {
-  }, [params]);
-
   const handlerSearch = () => {
     dispatch(Actions.APPROVAL_LIST.request({ searchParams: params }));
   };
@@ -198,10 +199,10 @@ export const BasisGroupApprovalContainer = props => {
     <CustomMainLayout title={titleName}>
       <BasisGroupApprovalSearch
         handlerInput={handlerInput}
-        handlerSearch={handlerSearch}
-        params={params}
         onKeyPress={onKeyPress}
+        params={params}
         setParams={setParams}
+        handlerSearch={handlerSearch}
       />
 
       <BasisGroupApprovalGrid