kcscDev/egovframe-template-simple-react-contribution/src/pages/admin/config/CommitteeCodeMgt.jsx

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import Box from '@mui/material/Box';

import * as EgovNet from 'api/egovFetch';




import ListCreateUpdateDelete from '../../../components/list/ListCreateUpdateDelete'
import ListLabelInputs from '../../../components/list/ListLabelInputs'


import URL from 'constants/url';

import { default as EgovLeftNav } from 'components/leftmenu/EgovLeftNavAdmin';


function CommitteeCodeMgt(props) {

    const [searchCondition, setSearchCondition] = useState({ paramCodeGroup: null, paramCodeLevel: 'LV_01' });

    const [depth01List, setDepth01List] = useState([]);
    const [depth02List, setDepth02List] = useState([]);
    const [depth03List, setDepth03List] = useState([]);
    const [depth04List, setDepth04List] = useState([]);
    const [summaryArray, setSummaryArray] = useState({});

    const [depth01SelectedIndex, setDepth01SelectedIndex] = React.useState();
    const [depth02SelectedIndex, setDepth02SelectedIndex] = React.useState();
    const [depth03SelectedIndex, setDepth03SelectedIndex] = React.useState();
    const [depth04SelectedIndex, setDepth04SelectedIndex] = React.useState();


    // '중앙건설기술심의'에서 특정 item선택 시, 하위 '총괄위원회'목록을 불러온다.
    useEffect(function () {
        // 여기에서 레벨2를 지정했다는 명확한 분기가 이루어지도록 수정해야 함.
        if( typeof depth01SelectedIndex !== 'undefined' ) {
            setSearchCondition({ paramCodeGroup: depth01List[depth01SelectedIndex].orgId, paramCodeLevel: 'LV_02' });
            //setDepth02List([]);
        } 
        if( typeof depth02SelectedIndex !== 'undefined' ) {
            setSearchCondition({ paramCodeGroup: depth02List[depth02SelectedIndex].orgId, paramCodeLevel: 'LV_03' });
            //setDepth03List([]);
        } 
        if( typeof depth03SelectedIndex !== 'undefined' ) {
            setSearchCondition({ paramCodeGroup: depth03List[depth03SelectedIndex].orgId, paramCodeLevel: 'LV_04' });
            //setDepth04List([]);
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [depth01SelectedIndex, depth02SelectedIndex, depth03SelectedIndex]);


    // 검색 조건이 변경되면 데이터를 불러온다.
    useEffect(function () {
        if( typeof searchCondition !== 'undefined' ) {
            getList(searchCondition);
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [searchCondition]);
    

    

    const requestOptions = {
        method: "GET",
        headers: {
            'Content-type': 'application/json'
        }
    }

    const getList = (searchCondition) => {  
        
        EgovNet.requestFetch(`/admin/config/committee-code-management?paramCodeGroup=${searchCondition.paramCodeGroup}&paramCodeLevel=${searchCondition.paramCodeLevel}`,
            requestOptions,
            function (resp) {
                if( searchCondition.paramCodeLevel === 'LV_01' ) {
                    setDepth01List(resp.result.list);
                } else if( searchCondition.paramCodeLevel === 'LV_02' ) {
                    setDepth02List(resp.result.list);
                } else if( searchCondition.paramCodeLevel === 'LV_03' ) {
                    setDepth03List(resp.result.list);
                } else if( searchCondition.paramCodeLevel === 'LV_04' ) {   
                    setDepth04List(resp.result.list);
                }
            }
        );
        
    }

    useEffect(function () {
        setSummaryArray(
            {
                "중앙건설기술심의" : depth01List[depth01SelectedIndex] && depth01List[depth01SelectedIndex].orgNm ? depth01List[depth01SelectedIndex].orgNm : "", 
                "총괄위원회" : depth02List[depth02SelectedIndex] && depth02List[depth02SelectedIndex].orgNm ? depth02List[depth02SelectedIndex].orgNm : "", 
                "건설기준위원회" : depth03List[depth03SelectedIndex] && depth03List[depth03SelectedIndex].orgNm ? depth03List[depth03SelectedIndex].orgNm : "", 
                "실무위원회" : depth04List[depth04SelectedIndex] && depth04List[depth04SelectedIndex].orgNm ? depth04List[depth04SelectedIndex].orgNm : "", 
            }
        );
        console.log(`${depth01List[depth01SelectedIndex]}[${depth01SelectedIndex}]`);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [
        depth01List, 
        depth02List,
        depth03List, 
        depth04List, 
        depth01SelectedIndex, 
        depth02SelectedIndex, 
        depth03SelectedIndex, 
        depth04SelectedIndex]);        
        

    const Location = React.memo(function Location() {
        return (
            <div className="location">
                <ul>
                    <li><Link to={URL.MAIN} className="home">Home</Link></li>
                    <li><Link to={URL.ADMIN}>사이트 관리</Link></li>
                    <li>환경 설정</li>
                    <li>위원회 코드 관리</li>
                </ul>
            </div>
        )
    });



    return (
        <div className="container">
             <div className="c_wrap">
                {/* <!-- Location --> */}
                <Location />
                {/* <!--// Location --> */}

                <div className="layout">
                    {/* <!-- Navigation --> */}
                    <EgovLeftNav></EgovLeftNav>
                    {/* <!--// Navigation --> */}

                    <div className="contents " id="contents">
                        {/* <!-- 본문 --> */}
                        <div className="top_tit">
                            <h1 className="tit_1">위원회 코드 관리</h1>
                        </div>
                        <Box
                            sx={{
                                display: 'flex',
                                flexWrap: 'wrap',
                                justifyContent: 'space-between',
                                '& > :not(style)': {
                                mt: 4,
                                width: 245,
                                },
                            }}
                        >
                            <ListCreateUpdateDelete title="중앙건설기술심의" items={depth01List} setItemIndex={setDepth01SelectedIndex} nameKey="orgNm" idKey="orgId" />
                            <ListCreateUpdateDelete title="총괄위원회" items={depth02List} setItemIndex={setDepth02SelectedIndex} nameKey="orgNm" idKey="orgId" />
                            <ListCreateUpdateDelete title="건설기준위원회" items={depth03List} setItemIndex={setDepth03SelectedIndex} nameKey="orgNm" idKey="orgId" />
                            <ListCreateUpdateDelete title="실무위원회" items={depth04List} setItemIndex={setDepth04SelectedIndex} nameKey="orgNm" idKey="orgId" />
                            
                        </Box>
                        { true &&
                            <Box
                                sx={{
                                    display: 'flex',
                                    flexWrap: 'wrap',
                                    '& > :not(style)': {
                                        mt: 4,
                                        width: 245,
                                    },
                                }}
                            >
                                <ListLabelInputs title="위원회 코드정보" items={summaryArray} />
                            </Box>
                        }
                      
                        
                        {/* <!--// 본문 --> */}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default CommitteeCodeMgt;