diff --git a/egovframe-template-simple-react-contribution/src/components/list/ListCreateUpdateDelete.jsx b/egovframe-template-simple-react-contribution/src/components/list/ListCreateUpdateDelete.jsx
index 509529a..f5a4cd8 100644
--- a/egovframe-template-simple-react-contribution/src/components/list/ListCreateUpdateDelete.jsx
+++ b/egovframe-template-simple-react-contribution/src/components/list/ListCreateUpdateDelete.jsx
@@ -16,7 +16,13 @@ import TextField from '@mui/material/TextField';
 
 import FormDialog from '../../components/alert/FormDialog';
 
+import styledComponent from "styled-components";
 
+const StyledDiv = styledComponent.div`
+    .text-item.active {
+        background-color: #676767;
+    }
+`;
 
 function generate(items, element, onClickListner,nameKey,
     idKey) {
@@ -24,14 +30,11 @@ function generate(items, element, onClickListner,nameKey,
         React.cloneElement(element, {
             key: value[nameKey],
         },
-        <Card fullWidth sx={{ '&': { boxShadow: 'none' } }}>
-            <CardActionArea fullWidth sx={{ px: 1 }}>
+        <Card  className="text-item" sx={{ '&': { boxShadow: 'none' } }} data-index={index} onClick={(e) => {onClickListner(e, index);}}>
+            <CardActionArea sx={{ px: 1 }}>
                 <ListItemText
                     primary={value[nameKey]}
-                    key={index}
-                    data-index={index}
-                    onClick={(e) => {onClickListner(e, index);}}
-                    paragraph
+                    key={index}                    
                 />
             </CardActionArea>
       </Card>),
@@ -40,7 +43,7 @@ function generate(items, element, onClickListner,nameKey,
 
 const Demo = styled('div')(({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
-  }));
+}));
 
 const Item = styled(Paper)(({ theme }) => ({
     backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
@@ -65,71 +68,85 @@ function ListCreateUpdateDelete(props) {
     };
 
     const onClickItem = (e, index) => {
+
+        // 기존 active를 모두 해제 한다.
+        let siblingEle = e.currentTarget.parentNode.parentNode.firstChild;
+        do {
+            siblingEle.firstChild.classList.remove('active');
+        } while (siblingEle = siblingEle.nextSibling);
+
+        // 선택된 것만 active로 지정한다.
+        if( Number(e.currentTarget.getAttribute('data-index')) === index ) {
+            e.currentTarget.classList.add('active');
+        }
         props.setItemIndex(index);
     };
     return (
-        <Paper>
-            <Typography sx={{ p: 0 }} variant="h6" component="div">
-            <Grid container spacing={0} columns={10} sx={{ '&': { backgroundColor: '#333333', height: '56px'}}}>
-                <Grid item xs={6} md={8} >
-                    <Item sx={{ px: 0, '&': { boxShadow: 'none', color: '#ffffff', fontWeight: '600', fontSize: '18px', backgroundColor: 'transparent', lineHeight: '40px' }}}>{props.title}</Item>
+        <StyledDiv>
+            <Paper>
+                <Typography sx={{ p: 0 }} variant="h6" component="div">
+                <Grid container spacing={0} columns={10} sx={{ '&': { backgroundColor: '#333333', height: '56px'}}}>
+                    <Grid item xs={6} md={8} >
+                        <Item sx={{ px: 0, '&': { boxShadow: 'none', color: '#ffffff', fontWeight: '600', fontSize: '18px', backgroundColor: 'transparent', lineHeight: '40px' }}}>{props.title}</Item>
+                    </Grid>
+                    <Grid item xs={0} md={2} sx={{ pl: 0, '&': {backgroundColor: 'transparent' }}}>
+                        <Item sx={{ p: 0, '&': { boxShadow: 'none', backgroundColor: '#169bd5', borderRadius: '0px'} }}>
+                            <IconButton aria-label="add" sx={{ px: 0, borderRadius: '0px', width: '100%', height: '56px'}} onClick={handleClickOpen}>                               
+                                <AddIcon sx={{ px: 0, '&': {color: '#ffffff', width: '30px', height: '30px' }}} />
+                            </IconButton>
+                        </Item>
+                    </Grid>                                    
                 </Grid>
-                <Grid item xs={0} md={2} sx={{ pl: 0, '&': {backgroundColor: 'transparent' }}}>
-                    <Item sx={{ p: 0, '&': { boxShadow: 'none', backgroundColor: '#169bd5', borderRadius: '0px'} }}>
-                        <IconButton aria-label="add" sx={{ px: 0, borderRadius: '0px', width: '100%', height: '56px'}} onClick={handleClickOpen}>                               
-                            <AddIcon sx={{ px: 0, '&': {color: '#ffffff', width: '30px', height: '30px' }}} />
-                        </IconButton>
-                    </Item>
-                </Grid>                                    
-            </Grid>
-            </Typography>
-            <Demo>
-                <List dense={dense}>
-                {generate(
-                    props.items,                    
-                    <ListItem
-                    secondaryAction={
-                        <div>                                                
-                            <IconButton sx={{ mx: 0 }} edge="start" aria-label="edit">                                                
-                                <EditIcon />
-                            </IconButton>
-                            <IconButton edge="end" aria-label="delete">                                                
-                                <DeleteIcon />   
-                            </IconButton>
-                        </div>
-                    }               
-                    >                    
-                    </ListItem>,
-                    onClickItem,
-                    props.nameKey,
-                    props.idKey
-                )}
-                </List>
-            </Demo>
-            <FormDialog open={open} setOpen={setOpen} title="위원회 코드 등록" contentText="위원회 코드 항목을 입력해주세요." >
-                <TextField
-                    autoFocus
-                    required
-                    margin="dense"
-                    id="insert-org-nm"
-                    name="insert-org-nm"
-                    label="명칭"
-                    type="text"
-                    fullWidth
-                    variant="standard"
-                />
-                <TextField
-                    required
-                    margin="dense"
-                    id="insert-org-desc"
-                    name="insert-org-desc"
-                    label="위원회 설명"
-                    type="text"
-                    fullWidth
-                    variant="standard"
-                />
-            </FormDialog>
-        </Paper>
+                </Typography>
+                <Demo>
+                    <List dense={dense}>
+                    {generate(
+                        props.items,                    
+                        <ListItem
+                        secondaryAction={
+                            <div>                                                
+                                <IconButton sx={{ mx: 0 }} edge="start" aria-label="edit">                                                
+                                    <EditIcon />
+                                </IconButton>
+                                <IconButton edge="end" aria-label="delete">                                                
+                                    <DeleteIcon />   
+                                </IconButton>
+                            </div>
+                        }               
+                        >                    
+                        </ListItem>,
+                        onClickItem,
+                        props.nameKey,
+                        props.idKey
+                    )}
+                    </List>
+                </Demo>
+                <FormDialog open={open} setOpen={setOpen} title="위원회 코드 등록" contentText="위원회 코드 항목을 입력해주세요." >
+                    <TextField
+                        autoFocus
+                        required
+                        margin="dense"
+                        id="insert-org-nm"
+                        name="insert-org-nm"
+                        label="명칭"
+                        type="text"
+                        fullWidth
+                        variant="standard"
+                    />
+                    <TextField
+                        required
+                        margin="dense"
+                        id="insert-org-desc"
+                        name="insert-org-desc"
+                        label="위원회 설명"
+                        type="text"
+                        fullWidth
+                        variant="standard"
+                    />
+                </FormDialog>
+            </Paper>
+        </StyledDiv>
+        
     );
 }
 
diff --git a/egovframe-template-simple-react-contribution/src/pages/admin/config/CommitteeCodeMgt.jsx b/egovframe-template-simple-react-contribution/src/pages/admin/config/CommitteeCodeMgt.jsx
index 6d5f156..b4f1f58 100644
--- a/egovframe-template-simple-react-contribution/src/pages/admin/config/CommitteeCodeMgt.jsx
+++ b/egovframe-template-simple-react-contribution/src/pages/admin/config/CommitteeCodeMgt.jsx
@@ -26,30 +26,42 @@ function CommitteeCodeMgt(props) {
     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();
+    const [depth01SelectedIndex, setDepth01SelectedIndex] = React.useState(undefined);
+    const [depth02SelectedIndex, setDepth02SelectedIndex] = React.useState(undefined);
+    const [depth03SelectedIndex, setDepth03SelectedIndex] = React.useState(undefined);
+    const [depth04SelectedIndex, setDepth04SelectedIndex] = React.useState(undefined);
 
 
     // '중앙건설기술심의'에서 특정 item선택 시, 하위 '총괄위원회'목록을 불러온다.
     useEffect(function () {
-        // 여기에서 레벨2를 지정했다는 명확한 분기가 이루어지도록 수정해야 함.
         if( typeof depth01SelectedIndex !== 'undefined' ) {
             setSearchCondition({ paramCodeGroup: depth01List[depth01SelectedIndex].orgId, paramCodeLevel: 'LV_02' });
-            //setDepth02List([]);
+            setDepth02SelectedIndex(undefined);
+            setDepth03SelectedIndex(undefined);
+            setDepth04SelectedIndex(undefined);
         } 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [depth01SelectedIndex]);
+
+
+    // '총괄위원회'에서 특정 item선택 시, 하위 '건설기준위원회'목록을 불러온다.
+    useEffect(function () {
         if( typeof depth02SelectedIndex !== 'undefined' ) {
             setSearchCondition({ paramCodeGroup: depth02List[depth02SelectedIndex].orgId, paramCodeLevel: 'LV_03' });
-            //setDepth03List([]);
+            setDepth03SelectedIndex(undefined);
+            setDepth04SelectedIndex(undefined);
         } 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [depth02SelectedIndex]);
+
+    // '건설기준위원회'에서 특정 item선택 시, 하위 '실무위원회'목록을 불러온다.
+    useEffect(function () {
         if( typeof depth03SelectedIndex !== 'undefined' ) {
             setSearchCondition({ paramCodeGroup: depth03List[depth03SelectedIndex].orgId, paramCodeLevel: 'LV_04' });
-            //setDepth04List([]);
+            setDepth04SelectedIndex(undefined);
         }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [depth01SelectedIndex, depth02SelectedIndex, depth03SelectedIndex]);
-
+    }, [depth03SelectedIndex]);
 
     // 검색 조건이 변경되면 데이터를 불러온다.
     useEffect(function () {
@@ -153,10 +165,10 @@ function CommitteeCodeMgt(props) {
                                 },
                             }}
                         >
-                            <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" />
+                            <ListCreateUpdateDelete title="중앙건설기술심의" items={depth01List} itemIndex={depth01SelectedIndex} setItemIndex={setDepth01SelectedIndex} nameKey="orgNm" idKey="orgId" />
+                            <ListCreateUpdateDelete title="총괄위원회" items={depth02List} itemIndex={depth02SelectedIndex} setItemIndex={setDepth02SelectedIndex} nameKey="orgNm" idKey="orgId" />
+                            <ListCreateUpdateDelete title="건설기준위원회" items={depth03List} itemIndex={depth03SelectedIndex} setItemIndex={setDepth03SelectedIndex} nameKey="orgNm" idKey="orgId" />
+                            <ListCreateUpdateDelete title="실무위원회" items={depth04List} itemIndex={depth04SelectedIndex} setItemIndex={setDepth04SelectedIndex} nameKey="orgNm" idKey="orgId" />
                             
                         </Box>
                         { true &&