비행 이력 시스템, 고객서비스 주석 추가

src/components/crud/grid/GridDatatable.js

@@ -9,6 +9,8 @@ import {
 } from 'react-feather';
 import { selectableRowsComponent } from './selectableRowsComponent';
 
+// DataTable lib 참고
+// https://react-data-table-component.netlify.app/?path=/docs/api-props--page
 export const GridDatabase = props => {
   return props[`${props.handlerPageChange ? 'total' : 'count'}`] <= 0 ? (
     <div className='d-flex justify-content-center align-items-center h-100'>

src/containers/analysis/history/AnalysisHistoryContainer.js

@@ -25,23 +25,45 @@ import { useHistory } from 'react-router-dom';
 import { MessageErrorModal } from '../../../components/message/MessageErrorModal';
 
 export const AnalysisHistoryContainer = props => {
-  const { data, count, searchParams, total, page } = useSelector(
+  /**
+   * data: 비행이력 현황 목록
+   * count: 비행이력 현황 갯수
+   * total: 비행이력 현황 총 갯수
+   * page: 비행이력 현황 현재 페이지
+   */
+  const { data, count, total, page } = useSelector(
     state => state.analysisHistoryState
   );
 
-  const {
-    list: aprvList,
-    aprvProc,
-    selectGroup
-  } = useSelector(state => state.flightState);
+  /**
+   * 선택한 그룹정보 및 검색조건
+   * stDate: 시작일자
+   * endDate: 종료일자
+   * search1: 식별번호
+   * groupId: 선택한 그룹의 ID
+   * groupNm: 선택한 그룹의 이름
+   */
+  const { selectGroup } = useSelector(state => state.flightState);
+
+  /**
+   * groupList: SUPER, ADMIN 권한으로 전체 그룹 목록을 가져온다
+   * groupListCount: SUPER, ADMIN 권한으로 전체 그룹 목록 갯수
+   * joinList: 일반 USER 권한 자신이 포함된 그룹 목록
+   * joinListCount: 일반 USER 권한 자신이 포함된 그룹 목록 갯수
+   */
   const { joinList, joinListCount, groupList, groupListCount } = useSelector(
     state => state.groupState
   );
+
+  // user: 로그인한 user 정보
   const { user } = useSelector(state => state.authState, shallowEqual);
 
   // const [isClick, setIsClick] = useState(-1);
   // const [dateType, setDateType] = useState(1);
 
+  /**
+   * Modal 초기값 state
+   */
   const [modal, setModal] = useState({
     isOpen: false,
     title: '',
@@ -49,6 +71,9 @@ export const AnalysisHistoryContainer = props => {
     color: ''
   });
 
+  /**
+   * 검색조건 초기값
+   */
   const [params, setParams] = useState({
     stDate: selectGroup.stDate
       ? moment(selectGroup.stDate).format('YYYY-MM-DD')
@@ -60,11 +85,7 @@ export const AnalysisHistoryContainer = props => {
     groupId: selectGroup.groupId ? selectGroup.groupId : ''
   });
 
-  useEffect(() => {
-    if (aprvProc && aprvProc.result > 0) {
-      handlerSearch(params);
-    }
-  }, [aprvProc]);
+  const dispatch = useDispatch();
 
   useEffect(() => {
     if (user?.cstmrSno) {
@@ -105,6 +126,8 @@ export const AnalysisHistoryContainer = props => {
       Actions.list.request({ searchParams: { ...params, groupId }, page: 1 })
     );
   };
+
+  // 그룹 선택 취소 handler
   const handlerGroupCancel = () => {
     dispatch(
       FlightAction.FLIGHT_PLAN_GROUP_SELECT({
@@ -119,8 +142,6 @@ export const AnalysisHistoryContainer = props => {
     // setIsClick(0);
   };
 
-  const dispatch = useDispatch();
-
   const titleName = '비행이력 현황';
 
   const excelHeaders = [
@@ -230,6 +251,7 @@ export const AnalysisHistoryContainer = props => {
     }
   ];
 
+  // 검색 버튼 click handler
   const handlerSearch = () => {
     if (!params.stDate || !params.endDate) {
       setModal({
@@ -252,6 +274,7 @@ export const AnalysisHistoryContainer = props => {
     }
   };
 
+  // 식별번호 Change handler
   const handlerInput = (type, val) => {
     if (type === 'search1') {
       setParams({ ...params, search1: val });
@@ -267,6 +290,8 @@ export const AnalysisHistoryContainer = props => {
       }
     }
   };
+
+  // 최근 1일, 최근 7일... 탭 click handler
   const handlerClickDate = val => {
     // setDateType(val);
     // setIsClick(val);
@@ -277,6 +302,7 @@ export const AnalysisHistoryContainer = props => {
     }));
   };
 
+  // 페이지 이동 handler
   const handlerPageChange = page => {
     dispatch(Actions.list.request({ searchParams: params, page }));
   };
@@ -296,6 +322,7 @@ export const AnalysisHistoryContainer = props => {
             />
           </Col> */}
           {/* <Col sm='4'> */}
+          {/* 그룹목록 */}
           <Col sm='12' lg='12'>
             {user ? (
               <>
@@ -318,7 +345,7 @@ export const AnalysisHistoryContainer = props => {
               <></>
             )}
           </Col>
-          {/* <Col sm='8'> */}
+          {/* 검색조건 */}
           <Col sm='12' lg='12'>
             {selectGroup.cstmrSno !== 0 ? (
               <>
@@ -341,7 +368,7 @@ export const AnalysisHistoryContainer = props => {
               </div>
             )}
           </Col>
-          {/* <Col sm='12'> */}
+          {/* 비행이력 현황 목록 */}
           <Col sm='12' lg='12'>
             {selectGroup.cstmrSno !== 0 ? (
               <>

src/containers/analysis/history/AnalysisHistoryDetailContainer.js

@@ -8,10 +8,11 @@ import { CustomDetailLayout } from '../../../components/layout/CustomDetailLayou
 import * as Actions from '../../../modules/analysis/history/actions/analysisHistoryAction';
 
 export const AnalysisHistoryDetailContainer = () => {
-  const { log, detail } = useSelector(state => state.analysisHistoryState);
-
-  const dispatch = useDispatch();
+  // 비행이력 목록
+  const { log } = useSelector(state => state.analysisHistoryState);
+  // 쿼리 파라미터 id
   const { id } = useParams();
+  const dispatch = useDispatch();
 
   const titleName = '비행이력';
 
@@ -19,6 +20,7 @@ export const AnalysisHistoryDetailContainer = () => {
     handlerSearch();
   }, []);
 
+  // 비행이력 목록 불러오는 handler
   const handlerSearch = () => {
     dispatch(Actions.detail.request(id));
   };
@@ -143,7 +145,10 @@ export const AnalysisHistoryDetailContainer = () => {
         // params={params}
         // setDateType={setDateType}
       /> */}
+      {/* 비행이력 로그 Chart */}
       <AnalysisHistoryDetailStatic data={log} />
+
+      {/* 비행이력 로그 Grid */}
       <AnalysisHistoryDetailGrid
         data={log}
         title={titleName}

src/containers/cstmrService/faq/FaqContainer.js

@@ -50,12 +50,19 @@ const initFormData = {
 };
 
 export default function FaqContainer() {
+  // 질문 카테고리 Tab state
   const [activeTab, setActiveTab] = useState('전체');
+  // 로그인 유저정보
   const { user } = useSelector(state => state.authState);
+  // 검색 state
   const [searchText, setSearchText] = useState('');
+  // 질문 등록, 수정 Form
   const [formData, setFormData] = useState(initFormData);
+  // 질문 등록, 수정 flag state
   const [formMode, setFormMode] = useState('create');
+  // 질문 등록, 수정 Form Modal
   const [isOpenFormModal, setIsOpenFormModal] = useState(false);
+  // validation Modal
   const [validationModal, setValidationModal] = useState({
     errorType: {
       isOpen: false,
@@ -75,12 +82,14 @@ export default function FaqContainer() {
   });
 
   const dispatch = useDispatch();
+  // 질문 목록
   const { faqList } = useSelector(state => state.faqState);
 
   useEffect(() => {
     handlerGetFaqList();
   }, [activeTab]);
 
+  // 질문 목록 가져오는 handler
   const handlerGetFaqList = () => {
     dispatch(
       LIST.request({
@@ -90,6 +99,7 @@ export default function FaqContainer() {
     );
   };
 
+  // 검색어 Change handler
   const handlerChangeSearchText = useCallback(
     e => {
       const { value } = e.target;
@@ -98,15 +108,18 @@ export default function FaqContainer() {
     [searchText]
   );
 
+  // 검색어 Enter key handler
   const handlerEnterSearchText = () => {
     handlerGetFaqList();
   };
 
+  // 등록, 수정 Form Modal handler
   const handlerOpenFormModal = () => {
     setFormData(initFormData);
     setIsOpenFormModal(!isOpenFormModal);
   };
 
+  // 질문 카테고리 Tab handler
   const handlerChangeTab = useCallback(
     val => {
       setActiveTab(val);
@@ -114,6 +127,7 @@ export default function FaqContainer() {
     [activeTab]
   );
 
+  // 질문 등록, 수정 Form change handler
   const handlerChangeFormData = useCallback(
     (type, val) => {
       setFormData({
@@ -124,6 +138,7 @@ export default function FaqContainer() {
     [formData]
   );
 
+  // 질문 등록, 수정 Submit handler
   const handlerSubmitForm = () => {
     if (!formData.title) {
       setValidationModal({
@@ -187,6 +202,7 @@ export default function FaqContainer() {
     });
   };
 
+  // 수정하기 button click handler
   const handlerFaqModify = val => {
     setFormMode('update');
     setFormData({
@@ -200,6 +216,7 @@ export default function FaqContainer() {
     setIsOpenFormModal(true);
   };
 
+  // 질문 삭제 confirm handler
   const handlerDeleteConfirmFaq = () => {
     setValidationModal({
       ...validationModal,
@@ -211,6 +228,7 @@ export default function FaqContainer() {
     });
   };
 
+  // 질문 삭제 handler
   const handlerDeleteFaq = () => {
     dispatch(
       DELETE.request({
@@ -225,6 +243,7 @@ export default function FaqContainer() {
     setFormData(initFormData);
   };
 
+  // 질문 목록 formating
   const handlerFaqList = () => {
     if (faqList?.length <= 0 || !faqList) return [];
     return faqList.map(i => {
@@ -238,6 +257,7 @@ export default function FaqContainer() {
                 <span className='title'>{i.title}</span>
               </span>
             </h5>
+            {/* User 권한일 경우 수정하기 버튼 미노출 */}
             {user?.authId !== 'USER' && (
               <div>
                 <Button.Ripple

src/containers/cstmrService/inquiry/AdminInquiryContainer.js

@@ -22,9 +22,13 @@ const initalSearch = {
 };
 
 export default function AdminInquiryContainer() {
+  // 검색 조건 state
   const [searchData, setSearchData] = useState(initalSearch);
+  // 상세보기 Modal state
   const [isDetailModal, setIsDetailModal] = useState(false);
+  // 상세보기 Form state
   const [adminDetailForm, setAdminDetailForm] = useState({});
+  // 수정 validation modal state
   const [validationModal, setValidationModal] = useState({
     errorType: {
       isOpen: false,
@@ -42,6 +46,10 @@ export default function AdminInquiryContainer() {
       title: '필수값 입력 오류'
     }
   });
+  /**
+   * list: 문의 목록
+   * adminDetail: 상세 Form 내용
+   */
   const { adminList: lists, adminDetail } = useSelector(
     state => state.qnaState
   );
@@ -98,8 +106,8 @@ export default function AdminInquiryContainer() {
     [adminDetailForm]
   );
 
+  // 첨부파일 Download handler
   const handlerFileDownload = () => {
-    console.log(adminDetailForm.fileInfos);
     dispatch(ADMIN_FILE_DOWN.request(adminDetailForm.fileInfos));
   };
 
@@ -149,6 +157,7 @@ export default function AdminInquiryContainer() {
   return (
     <Row>
       <Col sm='12' lg='12'>
+        {/* 검색 영역 Component */}
         <QnaSearchBox
           searchData={searchData}
           handlerChangeSearchData={handlerChangeSearchData}
@@ -156,9 +165,10 @@ export default function AdminInquiryContainer() {
         />
       </Col>
       <Col sm='12' lg='12'>
+        {/* 문의 목록 Component */}
         <QnaGrid lists={lists} handlerDetailModal={handlerDetailModal} />
       </Col>
-
+      {/* 상세보기 Modal Component */}
       <QnaDetail
         isDetailModal={isDetailModal}
         handlerDetailModal={handlerDetailModal}

src/containers/cstmrService/inquiry/UserInquiryContainer.js

@@ -11,12 +11,18 @@ import { ConfirmModal } from '../../../components/modal/ConfirmModal';
 
 export default function UserInquiryContainer({ memberName }) {
   const dispatch = useDispatch();
+  /**
+   * lists: 나의 문의 목록
+   * detail: 나의 문의 목록 상세 Form
+   */
   const { userList: lists, userDetail: detail } = useSelector(
     state => state.qnaState
   );
 
   const fileInputRef = useRef(null);
+  // 문의 하기 Form Modal state
   const [isInquiryModalOpen, setIsInquiryModalOpen] = useState(false);
+  // 문의 Form state
   const [inquiryForm, setInquiryForm] = useState({
     category: '칭찬',
     contact: '',
@@ -25,6 +31,7 @@ export default function UserInquiryContainer({ memberName }) {
     fileInfos: []
   });
 
+  // 등록 validation modal state
   const [validationModal, setValidationModal] = useState({
     errorType: {
       isOpen: false,
@@ -150,6 +157,7 @@ export default function UserInquiryContainer({ memberName }) {
     [inquiryForm]
   );
 
+  // 파일 upload handler
   const handlerFileChange = e => {
     const file = e.target.files[0];
     setInquiryForm({
@@ -158,6 +166,7 @@ export default function UserInquiryContainer({ memberName }) {
     });
   };
 
+  // 파일 취소 handler
   const handlerFileClear = () => {
     setInquiryForm({
       ...inquiryForm,
@@ -300,7 +309,7 @@ export default function UserInquiryContainer({ memberName }) {
           1:1 문의하기
         </Button>
       </div>
-
+      {/* 문의 등록 Form Modal */}
       <InquiryWrite
         isInquiryModalOpen={isInquiryModalOpen}
         detail={detail}

src/views/cstmrService/InquiryView.js

@@ -14,6 +14,10 @@ function InquiryView() {
       <CustomMainLayout
         title={user?.authId !== 'USER' ? '문의 내역' : '나의 문의 내역 확인'}
       >
+        {/* 권한의 따른 페이지 분기
+            Super, Admin : 전체 문의 목록
+            User: 자신에 문의 목록
+        */}
         {user?.authId !== 'USER' ? (
           <AdminInquiryContainer />
         ) : (