그룹관리 주석

src/components/basis/group/BaisGroupForm.js

@@ -17,12 +17,7 @@ import {
 import { yupResolver } from '@hookform/resolvers/yup';
 
 export const BasisGroupForm = props => {
-  useEffect(() => {
-    if (props.groupData?.groupId) {
-      setValue('groupNm', props.groupData?.groupNm);
-    }
-  }, [props.groupData]);
-
+  // 유효성검사 목록
   const Schema = yup.object().shape({
     groupNm: yup
       .string()
@@ -33,6 +28,7 @@ export const BasisGroupForm = props => {
       )
   });
 
+  // 유효성검사를 위한 기본값
   const { register, getValues, setValue, errors, handleSubmit } = useForm({
     defaultValues: {
       groupNm: ''
@@ -40,6 +36,14 @@ export const BasisGroupForm = props => {
     resolver: yupResolver(Schema)
   });
 
+  // 그룹 상세보기 시 넘겨받은 데이터 저장
+  useEffect(() => {
+    if (props.groupData?.groupId) {
+      setValue('groupNm', props.groupData?.groupNm);
+    }
+  }, [props.groupData]);
+
+  // 그룹 생성, 저장
   const onSumbit = async data => {
     props.handlerSave(data);
   };
@@ -132,21 +136,6 @@ export const BasisGroupForm = props => {
                             )}
                           </FormGroup>
                         </Col>
-
-                        {/* <Col className='list-input' md='4' sm='12'>
-                        <FormGroup>
-                          <Label for='groupauthority'>그룹 구분 코드</Label>
-                          <Input
-                            type='select'
-                            name='select'
-                            size='sm'
-                            id='groupauthority'
-                          >
-                            <option>개인</option>
-                            <option>단체</option>
-                          </Input>
-                        </FormGroup>
-                      </Col> */}
                       </Row>
                     </div>
                   </dt>
@@ -162,14 +151,11 @@ export const BasisGroupForm = props => {
                   >
                     저장
                   </Button.Ripple>
-                  {/* <Button.Ripple className='mr-1' color='secondary' size='sm'>
-                  목록
-                </Button.Ripple> */}
                   {props.groupData.type != 'create' ? (
                     <Button.Ripple
                       color='danger'
                       size='sm'
-                      onClick={() => props.handlerWidthrow()}
+                      onClick={() => props.handlerWithDrawal()}
                     >
                       삭제
                     </Button.Ripple>

src/components/basis/group/BasisGroupApprovalSearch.js

@@ -1,63 +1,31 @@
 import {
   Row,
   Col,
-  Table,
-  Badge,
-  UncontrolledDropdown,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
   Card,
-  CardHeader,
   CardBody,
-  CardTitle,
-  CardSubtitle,
-  ButtonGroup,
   Button,
   Input,
   CustomInput,
   Label,
   FormGroup
 } from 'reactstrap';
-import Flatpickr from 'react-flatpickr';
-import { MoreVertical, Edit, Trash, Search, File } from 'react-feather';
-import { Calendar } from 'react-feather';
+import { Search } from 'react-feather';
 import { useEffect, useState } from 'react';
-import moment from 'moment';
 
 export const BasisGroupApprovalSearch = props => {
-  // const [isCheckBox, setIsCheckBox] = useState({
-  //   all: true,
-  //   yes: false,
-  //   no: false
-  // });
-
-  // useEffect(() => {
-  //   let aprvYn = '';
-
-  //   if (!isCheckBox.all) {
-  //     if (isCheckBox.yes) {
-  //       aprvYn = 'Y';
-  //     } else if (isCheckBox.no) {
-  //       aprvYn = 'N';
-  //     } else {
-  //       aprvYn = '-';
-  //     }
-  //   }
-  //   props.setParams({
-  //     ...props.params,
-  //     aprvYn: aprvYn
-  //   });
-  // }, [isCheckBox]);
+  // 현재 활성화 된 승인여부 검색조건(전체)
   let aprvYn = 'A';
 
+  // A 전체, Y 승인, 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;

src/components/laanc/map/LaancMapSearch.js

@@ -29,7 +29,7 @@ export default function LaancMapSearch({ mapObject }) {
     }
   };
 
-  // 지역 검색 후 엔터 키
+  // 엔터키 이벤트
   const handlerSearchEnter = e => {
     if (e.key == 'Enter') {
       handlerSearchRes();

src/containers/basis/group/BasisGroupApprovalContainer.js

@@ -10,26 +10,53 @@ import { InfoModal } from '../../../components/modal/InfoModal';
 import { BasisGroupGrid } from '../../../components/basis/group/BasisGroupGrid';
 
 export const BasisGroupApprovalContainer = props => {
-  const {
-    aprvList,
-    aprvCount,
-    joinList,
-    joinListCount,
-    groupList,
-    groupListCount,
-    // selectData,
-    aprvSelect,
-    total
-  } = useSelector(state => state.groupState);
-
-  const { user } = useSelector(state => state.authState);
   const dispatch = useDispatch();
   const titleName = '승인관리';
+
+  // 유저 정보
+  const { user } = useSelector(state => state.authState);
+
+  // 검색 조건 초기값
   const [params, setParams] = useState({
     cstmrSno: user?.cstmrSno,
     aprvYn: ''
   });
 
+  const {
+    aprvList, // 승인요청한 사용자목록
+    aprvCount, // 승인요청한 사용자 수
+    joinList, // 참여그룹목록
+    joinListCount, // 참여그룹목록 수
+    groupList, // 전체그룹목록
+    groupListCount, // 전체그룹목록 수
+    // selectData,
+    aprvSelect, // 상세보기한 그룹
+    total // 목록에 표출되는 사용자 수
+  } = useSelector(state => state.groupState);
+
+  // 승인요청 초기 데이터
+  const [saveData, setSaveData] = useState({
+    cstmrGroupSno: '',
+    trmnlId: '',
+    aprvlYn: 'N', //가입은 NORMAL 로만
+    aprvUserId: ''
+  });
+
+  //모달 관련 설정(승인)
+  const [modal, setModal] = useState({
+    isOpen: false,
+    title: '',
+    desc: ''
+  });
+
+  // info 모달
+  const [infoModal, setInfoModal] = useState({
+    isOpen: false,
+    title: '',
+    desc: ''
+  });
+
+  // 그룹목록 컬럼명
   const column = [
     {
       name: '그룹명',
@@ -100,109 +127,8 @@ export const BasisGroupApprovalContainer = props => {
       }
     }
   ];
-  const handlerDetail = (groupId, groupNm, groupAuthCd, aprvlYn) => {
-    // 권한 상관 없이 모두 조회 가능
-    // param.cstmrSno = user.cstmrSno;
-    if (
-      user.authId === 'SUPER' ||
-      user.authId === 'ADMIN' ||
-      (user.authId === 'USER' && groupAuthCd === 'MASTER') ||
-      (user.authId === 'USER' && aprvlYn === 'Y' && groupAuthCd === 'LEADER')
-    ) {
-      // dispatch(Actions.SELECT({ groupId: groupId, groupNm: groupNm }));
-      dispatch(
-        Actions.GROUP_APRV_SELECT({ groupId: groupId, groupNm: groupNm })
-      );
-
-      if (user?.cstmrSno) {
-        setParams({
-          ...params,
-          cstmrSno: user?.cstmrSno,
-          groupId: groupId
-        });
-
-        dispatch(
-          Actions.APPROVAL_LIST.request({
-            searchParams: {
-              ...params,
-              cstmrSno: user?.cstmrSno,
-              groupId: groupId,
-              page: 1
-            }
-          })
-        );
-      }
-    } else {
-      setInfoModal({
-        isOpen: true,
-        title: '권한 확인',
-        desc: '승인관리 확인을 위해서는 운영자 권한이 필요합니다. 운영자에게 권한을 부여받고 다시 시도해 주세요.'
-      });
-      return;
-    }
-  };
-
-  const handlerCancel = () => {
-    // dispatch(Actions.SELECT());
-    dispatch(Actions.GROUP_APRV_SELECT());
-
-    setParams({
-      ...params,
-      groupId: '',
-      groupNm: ''
-    });
-  };
-
-  useEffect(() => {
-    if (user?.cstmrSno) {
-      setParams({
-        ...params,
-        cstmrSno: user?.cstmrSno,
-        // groupId: selectData?.groupId,
-        groupId: aprvSelect?.groupId,
-        aprvYn: ''
-      });
-      if (user.authId === 'SUPER' || user.authId === 'ADMIN') {
-        dispatch(Actions.GROUP_LIST.request({ cstmrSno: user?.cstmrSno }));
-      } else {
-        dispatch(
-          Actions.JOIN_LIST.request({
-            cstmrSno: user?.cstmrSno,
-            // groupId: selectData?.groupId
-            groupId: aprvSelect?.groupId
-          })
-        );
-      }
-    }
-  }, [user]);
-
-  const [saveData, setSaveData] = useState({
-    cstmrGroupSno: '',
-    trmnlId: '',
-    // aprvlYn: 'N', //가입은 USER 로만
-    aprvlYn: 'N', //가입은 NORMAL 로만
-    aprvUserId: ''
-  });
-
-  //모달 관련 설정(승인)
-  const [modal, setModal] = useState({
-    isOpen: false,
-    title: '',
-    desc: ''
-  });
-
-  const [modal2, setModal2] = useState({
-    isOpen: false,
-    title: '',
-    desc: ''
-  });
-
-  const [infoModal, setInfoModal] = useState({
-    isOpen: false,
-    title: '',
-    desc: ''
-  });
 
+  // 승인관리목록 컬럼명
   const columns = [
     {
       name: '그룹명',
@@ -299,26 +225,107 @@ export const BasisGroupApprovalContainer = props => {
     }
   ];
 
+  // 권한에 따른 그룹목록 요청
+  useEffect(() => {
+    if (user?.cstmrSno) {
+      setParams({
+        ...params,
+        cstmrSno: user?.cstmrSno,
+        // groupId: selectData?.groupId,
+        groupId: aprvSelect?.groupId,
+        aprvYn: ''
+      });
+      if (user.authId === 'SUPER' || user.authId === 'ADMIN') {
+        dispatch(Actions.GROUP_LIST.request({ cstmrSno: user?.cstmrSno }));
+      } else {
+        dispatch(
+          Actions.JOIN_LIST.request({
+            cstmrSno: user?.cstmrSno,
+            // groupId: selectData?.groupId
+            groupId: aprvSelect?.groupId
+          })
+        );
+      }
+    }
+  }, [user]);
+
+  // 그룹 상세보기 선택 시
+  const handlerDetail = (groupId, groupNm, groupAuthCd, aprvlYn) => {
+    // 권한 상관 없이 모두 조회 가능
+    // param.cstmrSno = user.cstmrSno;
+    if (
+      user.authId === 'SUPER' ||
+      user.authId === 'ADMIN' ||
+      (user.authId === 'USER' && groupAuthCd === 'MASTER') ||
+      (user.authId === 'USER' && aprvlYn === 'Y' && groupAuthCd === 'LEADER')
+    ) {
+      // dispatch(Actions.SELECT({ groupId: groupId, groupNm: groupNm }));
+      dispatch(
+        Actions.GROUP_APRV_SELECT({ groupId: groupId, groupNm: groupNm })
+      );
+
+      if (user?.cstmrSno) {
+        setParams({
+          ...params,
+          cstmrSno: user?.cstmrSno,
+          groupId: groupId
+        });
+
+        dispatch(
+          Actions.APPROVAL_LIST.request({
+            searchParams: {
+              ...params,
+              cstmrSno: user?.cstmrSno,
+              groupId: groupId,
+              page: 1
+            }
+          })
+        );
+      }
+    } else {
+      setInfoModal({
+        isOpen: true,
+        title: '권한 확인',
+        desc: '승인관리 확인을 위해서는 운영자 권한이 필요합니다. 운영자에게 권한을 부여받고 다시 시도해 주세요.'
+      });
+      return;
+    }
+  };
+
+  // 상세보기 선택취소 시
+  const handlerCancel = () => {
+    // dispatch(Actions.SELECT());
+    dispatch(Actions.GROUP_APRV_SELECT());
+
+    setParams({
+      ...params,
+      groupId: '',
+      groupNm: ''
+    });
+  };
+
+  // 엔터키 이벤트
   const onKeyPress = e => {
     if (e.key == 'Enter') {
       handlerSearch();
     }
   };
 
-  // useEffect(() => {
-  //   handlerCancel();
-  // }, []);
-
+  // 검색
   const handlerSearch = () => {
     const param = params;
     param.page = 1;
     dispatch(Actions.APPROVAL_LIST.request({ searchParams: param }));
   };
+
+  // 승인관리 페이지 이동 시 새 목록 요청
   const onChangePage = page => {
     const param = params;
     param.page = page;
     dispatch(Actions.APPROVAL_LIST.request({ searchParams: param }));
   };
+
+  // 사용자 승인처리
   const handlerAprvConfirm = (cstmrGroupSno, trmnlId) => {
     setModal({
       isOpen: true,
@@ -335,10 +342,12 @@ export const BasisGroupApprovalContainer = props => {
     });
   };
 
+  // 사용자 승인처리 요청
   const handlerAprvSave = () => {
     dispatch(Actions.APPROVAL_UPDATE.request(saveData));
   };
 
+  // 사용자 승인취소
   const handlerCancelConfirm = cstmrGroupSno => {
     setModal({
       isOpen: true,
@@ -353,6 +362,7 @@ export const BasisGroupApprovalContainer = props => {
     });
   };
 
+  // 검색조건 입력
   const handlerInput = e => {
     const { name, value } = e.target;
     setParams({
@@ -360,6 +370,7 @@ export const BasisGroupApprovalContainer = props => {
       [name]: value
     });
   };
+
   return (
     <CustomMainLayout title={titleName}>
       <div className='pal-card-box'>
@@ -425,12 +436,6 @@ export const BasisGroupApprovalContainer = props => {
         handlerConfirm={handlerAprvSave}
         color='primary'
       />
-      <ConfirmModal
-        modal={modal2}
-        setModal={setModal2}
-        handlerConfirm={handlerAprvSave}
-        color='primary'
-      />
       <InfoModal modal={infoModal} setModal={setInfoModal} />
     </CustomMainLayout>
   );

src/containers/basis/group/BasisGroupContainer.js

@@ -9,19 +9,19 @@ import { ConfirmModal } from '../../../components/modal/ConfirmModal';
 import * as Actions from '../../../modules/basis/group/actions/basisGroupAction';
 
 export const BasisGroupContainer = props => {
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const titleName = '나의 그룹';
+  const [saveParams, setSaveParams] = useState({});
+
+  // 나의그룹목록, 가입그룹목록
   const { myList, myListCount, joinList, joinListCount } = useSelector(
     state => state.groupState
   );
 
+  // 유저 정보
   const { user } = useSelector(state => state.authState);
 
-  const dispatch = useDispatch();
-  const history = useHistory();
-
-  const [saveParams, setSaveParams] = useState({});
-
-  const titleName = '나의 그룹';
-
   //모달 관련 설정
   const [modal, setModal] = useState({
     isOpen: false,
@@ -29,6 +29,7 @@ export const BasisGroupContainer = props => {
     desc: ''
   });
 
+  // 그룹목록 컬럼명
   const columns = [
     {
       name: '그룹명',
@@ -39,16 +40,6 @@ export const BasisGroupContainer = props => {
         return row?.groupNm;
       }
     },
-
-    // {
-    //   name: '그룹 코드',
-    //   selector: row => row.groupId,
-    //   minWidth: '102px',
-    //   sortable: true,
-    //   cell: row => {
-    //     return row?.groupId;
-    //   }
-    // },
     {
       name: '생성 일시',
       selector: row => row.createDt,
@@ -79,10 +70,7 @@ export const BasisGroupContainer = props => {
     }
   ];
 
-  // const handleDetail = groupId => {
-  //   history.push(`/basis/group/detail/${groupId}`);
-  // };
-
+  // 참여그룹목록 컬럼명
   const joinColumns = [
     {
       name: '그룹명',
@@ -154,7 +142,7 @@ export const BasisGroupContainer = props => {
           <Button.Ripple
             color='danger'
             className='badge badge-danger'
-            onClick={() => handlerWidthrow(row.cstmrGroupSno)}
+            onClick={() => handlerWithDrawal(row.cstmrGroupSno)}
           >
             탈퇴하기
           </Button.Ripple>
@@ -167,6 +155,7 @@ export const BasisGroupContainer = props => {
     handlerSearch();
   }, [user]);
 
+  // 그룹목록, 참여그룹목록 요청
   const handlerSearch = () => {
     if (user?.cstmrSno) {
       dispatch(Actions.MY_LIST.request({ cstmrSno: user?.cstmrSno }));
@@ -175,11 +164,13 @@ export const BasisGroupContainer = props => {
     }
   };
 
+  // 그룹 생성 페이지로 이동
   const handlerGroupCreate = () => {
     history.push('/basis/group/create');
   };
 
-  const handlerWidthrow = cstmrGroupSno => {
+  // 그룹 탈퇴
+  const handlerWithDrawal = cstmrGroupSno => {
     setSaveParams({
       cstmrGroupSno: cstmrGroupSno,
       joinYn: 'N'
@@ -192,13 +183,16 @@ export const BasisGroupContainer = props => {
     return;
   };
 
-  const handlerWidthrowConfirm = cstmrGroupSno => {
+  // 그룹 탈퇴 확인
+  const handlerWithDrawalConfirm = () => {
     dispatch(Actions.GROUP_JOIN_UPDATE.request(saveParams));
   };
 
+  // 그룹 가입 페이지로 이동
   const handlerGroupJoin = () => {
     history.push('/basis/group/join/index');
   };
+
   return (
     <CustomMainLayout title={titleName}>
       {/* <BasisGroupSearch
@@ -228,7 +222,7 @@ export const BasisGroupContainer = props => {
       <ConfirmModal
         modal={modal}
         setModal={setModal}
-        handlerConfirm={handlerWidthrowConfirm}
+        handlerConfirm={handlerWithDrawalConfirm}
         color='danger'
       />
     </CustomMainLayout>

src/containers/basis/group/BasisGroupDetailContainer.js

@@ -7,10 +7,17 @@ import { ConfirmModal } from '../../../components/modal/ConfirmModal';
 import * as Actions from '../../../modules/basis/group/actions/basisGroupAction';
 
 export const BasisGroupDetailContainer = () => {
+  const dispatch = useDispatch();
+  const { id } = useParams();
+  const titleName = '그룹 관리';
+
+  // 그룹 상세정보, 그룹 랜덤 ID
   const { groupDetail, newGroupId } = useSelector(state => state.groupState);
 
+  // 유저 정보
   const { user } = useSelector(state => state.authState);
 
+  // 그룹 초기 데이터
   const [groupData, setGroupData] = useState({
     type: 'create',
     groupId: '',
@@ -18,16 +25,13 @@ export const BasisGroupDetailContainer = () => {
     groupTypeCd: ''
   });
 
+  // 모달 관련 설정
   const [modal, setModal] = useState({
     isOpen: false,
     title: '',
     desc: ''
   });
 
-  const dispatch = useDispatch();
-  const { id } = useParams();
-  const titleName = '그룹 관리';
-
   useEffect(() => {
     if (id) {
       handlerSearch();
@@ -36,6 +40,7 @@ export const BasisGroupDetailContainer = () => {
     }
   }, []);
 
+  // 그룹 생성 시 초기정보 셋팅
   useEffect(() => {
     setGroupData({
       trmnlId: user?.trmnlId,
@@ -47,6 +52,7 @@ export const BasisGroupDetailContainer = () => {
     });
   }, [newGroupId]);
 
+  // 그룹 수정 시 초기정보 셋팅
   useEffect(() => {
     setGroupData({
       ...groupDetail,
@@ -55,13 +61,17 @@ export const BasisGroupDetailContainer = () => {
     });
   }, [groupDetail]);
 
+  // 그룹 랜덤 ID 생성 요청
   const handlerCreateId = () => {
     dispatch(Actions.GROUP_CREATEID.request());
   };
+
+  // 그룹 상세정보 요청
   const handlerSearch = () => {
     dispatch(Actions.GROUP_DETAIL.request(id));
   };
 
+  // 그룹 생성
   const handlerCreate = data => {
     const saveData = {
       trmnlId: groupData.trmnlId,
@@ -77,6 +87,7 @@ export const BasisGroupDetailContainer = () => {
     dispatch(Actions.GROUP_CREATE.request(saveData));
   };
 
+  // 그룹 수정
   const handlerUpdate = data => {
     const saveData = {
       createDt: groupData.createDt,
@@ -90,11 +101,14 @@ export const BasisGroupDetailContainer = () => {
     // dispatch(Actions.GROUP_UPDATE.request(groupData));
     dispatch(Actions.GROUP_UPDATE.request(saveData));
   };
+
+  // 그룹 삭제
   const handlerDelete = () => {
     dispatch(Actions.GROUP_DELETE.request(groupData.groupId));
   };
 
-  const handlerWidthrow = () => {
+  // 삭제 버튼 클릭시 모달 표출
+  const handlerWithDrawal = () => {
     setModal({
       isOpen: true,
       title: '그룹삭제',
@@ -103,24 +117,11 @@ export const BasisGroupDetailContainer = () => {
     return;
   };
 
+  // 생성 | 수정
   const handlerSave = data => {
     groupData.type === 'create' ? handlerCreate(data) : handlerUpdate(data);
   };
 
-  // const handlerInput = e => {
-  //   const { name, innerRef } = e.target;
-  //   if (name == 'groupNm') {
-  //     // const regex = /^[ㄱ-힣A-Za-z0-9]{0,11}$/;
-  //     // if (regex.test(innerRef)) {
-
-  //     setGroupData({
-  //       ...groupData,
-  //       [name]: innerRef
-  //     });
-  //     // }
-  //   }
-  // };
-
   return (
     <CustomDetailLayout title={titleName}>
       <BasisGroupForm
@@ -129,8 +130,7 @@ export const BasisGroupDetailContainer = () => {
         setGroupData={setGroupData}
         handlerSave={handlerSave}
         handlerDelete={handlerDelete}
-        // handlerInput={handlerInput}
-        handlerWidthrow={handlerWidthrow}
+        handlerWithDrawal={handlerWithDrawal}
       />
 
       <ConfirmModal

src/containers/basis/group/BasisGroupDetailJoinContainer.js

@@ -9,23 +9,24 @@ import { ConfirmModal } from '../../../components/modal/ConfirmModal';
 import * as Actions from '../../../modules/basis/group/actions/basisGroupAction';
 
 export const BasisGroupDetailJoinContainer = props => {
-  const { joinList, joinListCount } = useSelector(state => state.groupState);
+  const dispatch = useDispatch();
+  const titleName = '그룹가입';
 
+  // 유저 정보
   const { user } = useSelector(state => state.authState);
 
-  const dispatch = useDispatch();
-  const history = useHistory();
-
-  const titleName = '그룹가입';
+  // 그룹가입목록, 그룹가입목록 수
+  const { joinList, joinListCount } = useSelector(state => state.groupState);
 
+  // 검색 조건 초기값
   const [params, setParams] = useState({
     cstmrSno: user?.cstmrSno
   });
 
-  //가입신청 시 권한부여 X
+  // 가입신청 시 권한부여 X
+  // 그룹 가입 초기값
   const [joinData, setJoinData] = useState({
     groupId: '',
-    // groupAuthCd: 'NORMAL', //가입은 NORMAL 로만
     groupAuthCd: '',
     cstmrSno: ''
   });
@@ -37,53 +38,7 @@ export const BasisGroupDetailJoinContainer = props => {
     desc: ''
   });
 
-  const onKeyPress = e => {
-    if (e.key == 'Enter') {
-      handlerSearch();
-    }
-  };
-
-  const handlerSearch = () => {
-    dispatch(Actions.GROUP_JOINLIST.request({ searchParams: params }));
-  };
-
-  useEffect(() => {
-    if (params.cstmrSno && user?.cstmrSno) {
-      dispatch(
-        Actions.GROUP_JOINLIST.request({
-          searchParams: { cstmrSno: user?.cstmrSno }
-        })
-      );
-    }
-  }, [user]);
-  useEffect(() => {}, [params]);
-
-  const handlerJoin = groupId => {
-    setJoinData({
-      ...joinData,
-      groupId: groupId,
-      cstmrSno: user?.cstmrSno
-    });
-    setModal({
-      isOpen: true,
-      title: '가입 확인',
-      desc: '해당 그룹에 가입을 하시겠습니까?'
-    });
-    return;
-  };
-
-  const handlerConfirm = () => {
-    dispatch(Actions.GROUP_JOIN.request(joinData));
-  };
-
-  const handlerInput = e => {
-    const { name, value } = e.target;
-    setParams({
-      ...params,
-      [name]: value
-    });
-  };
-
+  // 그룹가입목록 컬럼명
   const columns = [
     {
       name: '그룹명',
@@ -173,6 +128,58 @@ export const BasisGroupDetailJoinContainer = props => {
     }
   ];
 
+  // 그룹가입목록 요청
+  useEffect(() => {
+    if (params.cstmrSno && user?.cstmrSno) {
+      dispatch(
+        Actions.GROUP_JOINLIST.request({
+          searchParams: { cstmrSno: user?.cstmrSno }
+        })
+      );
+    }
+  }, [user]);
+
+  // 엔터키 이벤트
+  const onKeyPress = e => {
+    if (e.key == 'Enter') {
+      handlerSearch();
+    }
+  };
+
+  // 그룹 검색 핸들러
+  const handlerSearch = () => {
+    dispatch(Actions.GROUP_JOINLIST.request({ searchParams: params }));
+  };
+
+  // 가입 버튼 클릭시 모달 표출
+  const handlerJoin = groupId => {
+    setJoinData({
+      ...joinData,
+      groupId: groupId,
+      cstmrSno: user?.cstmrSno
+    });
+    setModal({
+      isOpen: true,
+      title: '가입 확인',
+      desc: '해당 그룹에 가입을 하시겠습니까?'
+    });
+    return;
+  };
+
+  // 그룹 가입
+  const handlerConfirm = () => {
+    dispatch(Actions.GROUP_JOIN.request(joinData));
+  };
+
+  // 검색조건 입력
+  const handlerInput = e => {
+    const { name, value } = e.target;
+    setParams({
+      ...params,
+      [name]: value
+    });
+  };
+
   return (
     <CustomDetailLayout title={titleName}>
       <BasisGroupDetailJoinSearch

src/containers/basis/group/BasisGroupUsersContainer.js

@@ -6,33 +6,45 @@ import { BasisGroupUsersGrid } from '../../../components/basis/group/BasisGroupU
 import { BasisGroupUsersSearch } from '../../../components/basis/group/BasisGroupUsersSearch';
 import { CustomMainLayout } from '../../../components/layout/CustomMainLayout';
 import { ConfirmModal } from '../../../components/modal/ConfirmModal';
-import { InfoModal } from '../../../components/modal/InfoModal';
 import * as Actions from '../../../modules/basis/group/actions/basisGroupAction';
 
 export const BasisGroupUsersContainer = props => {
   const dispatch = useDispatch();
+  const titleName = '사용자 관리';
+
   const {
-    joinList,
-    joinListCount,
-    groupList,
-    groupListCount,
-    // selectData,
-    userSelect,
-    userCount,
-    userList,
-    count,
-    total
+    joinList, // 가입그룹목록
+    joinListCount, // 가입그룹목록 수
+    groupList, // 전체그룹목록
+    groupListCount, // 전체그룹목록 수
+    userSelect, // 유저가 상세보기 선택한 그룹
+    userList, // 선택한 그룹의 사용자목록
+    total, // 선택한 그룹의 사용자목록 수
+    count
   } = useSelector(state => state.groupState);
+
+  // 유저 정보
   const { user } = useSelector(state => state.authState);
 
+  /**
+   * 검색 조건 초기값
+   * cstmrSno: 유저고유번호
+   * groupId: 그룹 아이디
+   * groupAuthCd: 유저의 그룹 권한 코드
+   * aprvlYn: 그룹 가입 유무
+   */
   const [params, setParams] = useState({
     cstmrSno: user?.cstmrSno,
     groupId: '',
     groupAuthCd: '',
     aprvlYn: ''
   });
-  const titleName = '사용자 관리';
 
+  /**
+   * 권한 변경/위임 초기값
+   * cstmrGroupSno: 유저와 그룹이 매핑된 번호
+   * groupAuthCd: 유저의 그룹 권한 코드
+   */
   const [saveData, setSaveData] = useState({
     cstmrGroupSno: '',
     groupAuthCd: ''
@@ -45,12 +57,7 @@ export const BasisGroupUsersContainer = props => {
     desc: ''
   });
 
-  const [infoModal, setInfoModal] = useState({
-    isOpen: false,
-    title: '',
-    desc: ''
-  });
-
+  // 그룹목록 컬럼명
   const columns = [
     {
       name: '그룹명',
@@ -106,9 +113,9 @@ export const BasisGroupUsersContainer = props => {
             onClick={() =>
               handlerDetail(
                 row?.groupId,
-                row?.groupNm,
-                row?.groupAuthCd,
-                row?.aprvlYn
+                row?.groupNm
+                // row?.groupAuthCd,
+                // row?.aprvlYn
               )
             }
           >
@@ -119,6 +126,7 @@ export const BasisGroupUsersContainer = props => {
     }
   ];
 
+  // 사용자목록 컬럼명
   const userColumns = [
     {
       name: '그룹명',
@@ -191,16 +199,17 @@ export const BasisGroupUsersContainer = props => {
         let leader = false;
         let normal = false;
 
+        let my = '';
         let myGroupAuthCd = '';
         if (groupList) {
-          let my = groupList?.find(prev => {
+          my = groupList?.find(prev => {
             if (prev.groupId === row?.groupId) {
               return prev;
             }
           });
           myGroupAuthCd = my.myGroupAuthCd;
         } else if (joinList) {
-          let my = joinList?.find(prev => {
+          my = joinList?.find(prev => {
             if (prev.groupId === row?.groupId) {
               return prev;
             }
@@ -208,8 +217,6 @@ export const BasisGroupUsersContainer = props => {
           myGroupAuthCd = my.groupAuthCd;
         }
 
-        // console.log(row, my);
-
         if (user.authId === 'SUPER') {
           if (row?.groupAuthCd === 'MASTER') {
             master = true;
@@ -291,22 +298,7 @@ export const BasisGroupUsersContainer = props => {
     }
   ];
 
-  // useEffect(() => {
-  //   // handlerSearch();
-  //   handlerCancel();
-  // }, []);
-
-  const handlerSearch = () => {
-    if (params.cstmrSno && user?.cstmrSno) {
-      dispatch(
-        Actions.USER_LIST.request({
-          searchParams: params,
-          cstmrSno: user?.cstmrSno
-        })
-      );
-    }
-  };
-
+  // 권한에 따른 그룹목록 요청
   useEffect(() => {
     if (user?.cstmrSno) {
       setParams({
@@ -324,17 +316,30 @@ export const BasisGroupUsersContainer = props => {
           })
         );
       }
-      // dispatch(Actions.JOIN_LIST.request({ cstmrSno: user?.cstmrSno }));
-      // setParams({
-      //   ...params,
-      //   cstmrSno: user?.cstmrSno
-      // });
     }
   }, [user]);
 
-  const handlerDetail = (groupId, groupNm, groupAuthCd, aprvlYn) => {
+  /**
+   * 상세보기 선택시 사용자 목록 요청
+   */
+  const handlerSearch = () => {
+    if (params.cstmrSno && user?.cstmrSno) {
+      dispatch(
+        Actions.USER_LIST.request({
+          searchParams: params,
+          cstmrSno: user?.cstmrSno
+        })
+      );
+    }
+  };
+
+  /**
+   * 상세보기 선택 시 사용자목록 요청
+   * @param {string} groupId 선택한 그룹의 ID
+   * @param {string} groupNm 선택한 그룹명
+   */
+  const handlerDetail = (groupId, groupNm) => {
     //권한 상관없이 조회 가능
-    // dispatch(Actions.SELECT({ groupId: groupId, groupNm, groupNm }));
     dispatch(Actions.GROUP_USER_SELECT({ groupId: groupId, groupNm, groupNm }));
     const param = params;
     param.groupId = groupId;
@@ -348,6 +353,9 @@ export const BasisGroupUsersContainer = props => {
     );
   };
 
+  /**
+   * 상세보기 선택취소
+   */
   const handlerCancel = () => {
     // dispatch(Actions.SELECT());
     dispatch(Actions.GROUP_USER_SELECT());
@@ -358,40 +366,15 @@ export const BasisGroupUsersContainer = props => {
     });
   };
 
-  const handlerLeader = cstmrGroupSno => {
-    setModal({
-      isOpen: true,
-      title: '권한 확인',
-      desc: '해당 사용자를 운영자 권한으로 변경 하시겠습니까?'
-    });
-
-    setSaveData({
-      cstmrGroupSno: cstmrGroupSno,
-      joinYn: 'Y',
-      groupAuthCd: 'LEADER'
-    });
-  };
-
-  const onKeyPress = e => {
-    if (e.key == 'Enter') {
-      handlerSearch();
-    }
-  };
-
-  const handlerNormal = cstmrGroupSno => {
-    setModal({
-      isOpen: true,
-      title: '권한 확인',
-      desc: '해당 사용자를 사용자 권한으로 변경 하시겠습니까?'
-    });
-
-    setSaveData({
-      cstmrGroupSno: cstmrGroupSno,
-      joinYn: 'Y',
-      groupAuthCd: 'NORMAL'
-    });
-  };
-
+  /**
+   * LEVEL1 권한 위임 모달 표출
+   * 권한 위임 초기값 설정
+   */
+  /**
+   *
+   * @param {number} row 권한 위임할 대상의 cstmrGroupSno
+   * @param {number} my 유저의 cstmrGroupSno
+   */
   const handlerMaster = (row, my) => {
     setModal({
       isOpen: true,
@@ -433,6 +416,47 @@ export const BasisGroupUsersContainer = props => {
     }
   };
 
+  /**
+   * LEVEL2 권한 변경 모달 표출
+   * 권한 변경 초기값 설정
+   * @param {number} cstmrGroupSno 유저와 그룹이 매핑된 번호
+   */
+  const handlerLeader = cstmrGroupSno => {
+    setModal({
+      isOpen: true,
+      title: '권한 확인',
+      desc: '해당 사용자를 운영자 권한으로 변경 하시겠습니까?'
+    });
+
+    setSaveData({
+      cstmrGroupSno: cstmrGroupSno,
+      joinYn: 'Y',
+      groupAuthCd: 'LEADER'
+    });
+  };
+
+  /**
+   * LEVEL3 권한 변경 모달 표출
+   * 권한 변경 초기값 설정
+   * @param {number} cstmrGroupSno 유저와 그룹이 매핑된 번호
+   */
+  const handlerNormal = cstmrGroupSno => {
+    setModal({
+      isOpen: true,
+      title: '권한 확인',
+      desc: '해당 사용자를 사용자 권한으로 변경 하시겠습니까?'
+    });
+
+    setSaveData({
+      cstmrGroupSno: cstmrGroupSno,
+      joinYn: 'Y',
+      groupAuthCd: 'NORMAL'
+    });
+  };
+
+  /**
+   * 권한 변경 요청
+   */
   const handlerAuthSave = async () => {
     if (saveData.length === 2) {
       dispatch(Actions.USER_DELEGATE.request(saveData));
@@ -441,6 +465,18 @@ export const BasisGroupUsersContainer = props => {
     }
   };
 
+  /**
+   * 엔터키 이벤트
+   */
+  const onKeyPress = e => {
+    if (e.key == 'Enter') {
+      handlerSearch();
+    }
+  };
+
+  /**
+   * 검색조건 변경 핸들러
+   */
   const handlerInput = e => {
     const { name, value } = e.target;
     setParams({
@@ -449,6 +485,10 @@ export const BasisGroupUsersContainer = props => {
     });
   };
 
+  /**
+   * 사용자목록 페이지 이동 시 새 목록 요청
+   * @param {*} page 요청하는 페이지
+   */
   const handlerPageChange = page => {
     const param = params;
     param.page = page;
@@ -492,13 +532,6 @@ export const BasisGroupUsersContainer = props => {
                   onKeyPress={onKeyPress}
                   setParams={setParams}
                 />
-                {/* <BasisGroupUsersGrid
-                  data={userList}
-                  title={'사용자'}
-                  columns={userColumns}
-                  count={userCount}
-                  pagination={false}
-                /> */}
               </>
             ) : (
               <div className='mt-2 no-dataTable'>
@@ -534,7 +567,6 @@ export const BasisGroupUsersContainer = props => {
         handlerConfirm={handlerAuthSave}
         color='primary'
       />
-      <InfoModal modal={infoModal} setModal={setInfoModal} />
     </CustomMainLayout>
   );
 };