feat: 관리자 - 진행현황관리 등록 시 문서번호 선택 팝업 적용

egovframe-template-simple-react-contribution/src/pages/admin/committee/ProgressStatus/ReferenceCodePopupDialogCotents.jsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import { styled, ThemeProvider, createTheme } from '@mui/material/styles';
 import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import Paper from '@mui/material/Paper';
@@ -180,7 +181,6 @@ const FireNav = styled(List)({
   '& .MuiListItemButton-root': {
     paddingLeft: 0,
     paddingRight: 0,
-    background: '#fafafa',
   },
   '& .MuiListItemIcon-root': {
     minWidth: 0,
@@ -221,14 +221,17 @@ export default function ReferenceCodePopupDialogCotents() {
         })}
       >
         <Paper elevation={0} sx={{ maxWidth: 520 }}>
-          <FireNav component="nav" disablePadding>
+          <FireNav 
+            sx={{ my: 0,  }}
+            component="nav" disablePadding>
             <ListItemButton component="a" href="#customized-list">
               <ListItemText
                 sx={{ my: 0 }}
                 primary="문서번호 또는 코드명을 선택 하시면 하위 문서를 검색 하실 수 있습니다"
                 primaryTypographyProps={{
-                  backgroundColor: '#001e4f',
-                  color: '#ffffff',
+                  backgroundColor: '#ffffff',
+                  color: '#333333',
+                  border: '1px solid #333333',
                   fontSize: 15,
                   fontWeight: 'medium',
                   letterSpacing: 0,
@@ -239,22 +242,30 @@ export default function ReferenceCodePopupDialogCotents() {
             </ListItemButton>
             
             <List
-              sx={{ width: '100%', bgcolor: 'background.paper' }}
+              sx={{ width: '100%' }}
               component="nav"
               aria-labelledby="nested-list-subheader"
               subheader={
-                <ListSubheader component="div" id="nested-list-subheader">
+                <ListSubheader 
+                sx={{
+                  background: '#ffffff',
+                  color: '#222222',
+                  border: '4px double #333333',
+                  borderLeftWidth: '0px',
+                  borderRightWidth: '0px',                  
+                  borderBottomWidth: '1px',            
+                }}
+                component="div" id="nested-list-subheader">
                   <ReferenceCodePopupDialogCotentsHeader />
                 </ListSubheader>
               }
-            >                 
-              <ListItemButton>
-                <ReferenceCodePopupDialogCotentsListItem 
-                  data={data}
-                />
-              </ListItemButton>
+            >
+              <ReferenceCodePopupDialogCotentsListItem 
+              data={data}
+            />
             </List>
             
+            
           </FireNav>
         </Paper>
       </ThemeProvider>

egovframe-template-simple-react-contribution/src/pages/admin/committee/ProgressStatus/ReferenceCodePopupDialogCotentsHeader.jsx

@@ -5,9 +5,10 @@ import { styled, } from '@mui/material/styles';
 
 
 const ItemHeader = styled('div')(({ theme }) => ({
-  padding: theme.spacing(1),
+  padding: '0px',
   borderRadius: '4px',
   textAlign: 'left',
+  lineHeight: '40px',
 }));
 
 export default function ReferenceCodePopupDialogCotentsHeader() {
@@ -15,10 +16,12 @@ export default function ReferenceCodePopupDialogCotentsHeader() {
   return (
     <Box
       sx={{
+        fontSize: ' 16px',
         display: 'grid',
         gridAutoFlow: 'row',
-        gridTemplateColumns: 'auto 120px 90px',
+        gridTemplateColumns: 'auto 160px 90px',
         gap: 1,
+
       }}
     >
       <ItemHeader>문서번호</ItemHeader>

egovframe-template-simple-react-contribution/src/pages/admin/committee/ProgressStatus/ReferenceCodePopupDialogCotentsListItem.jsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, {useEffect} from 'react';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
@@ -7,7 +7,8 @@ import Divider from '@mui/material/Divider';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
-
+import FolderOpenIcon from '@mui/icons-material/FolderOpen';
+import InsertDriveFileOutlinedIcon from '@mui/icons-material/InsertDriveFileOutlined';
 
 import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
@@ -31,6 +32,13 @@ const ItemComponent = (props) => {
   
   const [open, setOpen] = React.useState(false);
 
+  useEffect(function () {
+    if( openSelf === false ) {
+      setOpen(false);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [openSelf]);
+
   const handleClick = () => {
     setOpen(!open);
   };
@@ -45,7 +53,7 @@ const ItemComponent = (props) => {
                   sx={{                    
                     display: 'grid',
                     gridAutoFlow: 'row',
-                    gridTemplateColumns: 'auto 120px 90px',                
+                    gridTemplateColumns: 'auto 160px 90px',                
                     gap: 1,
                     width: '100%'
                   }}
@@ -66,7 +74,7 @@ const ItemComponent = (props) => {
                         }
                       </span>
                     :
-                      <span> &nbsp; &nbsp; </span>
+                      <span> <InsertDriveFileOutlinedIcon sx={{ color: '#777777', height: '30px;'}} /> </span>
                     }
                     &nbsp;{item.codeTitle}
                   </Item>
@@ -80,8 +88,6 @@ const ItemComponent = (props) => {
           {
             item.children &&
             item.children.map(function(item, index) {
-              //<div>item.codeTitle</div>
-              console.log('thkim 2024-03-21 11:29 %o', item);
               return (
                 <ItemComponent item={item} index={index} openSelf={open} />
               );
@@ -104,7 +110,15 @@ export default function ReferenceCodePopupDialogCotentsListItem(props) {
 
 
   return (
-    <List sx={{ paddingTop: '0px', paddingBottom: '0px', width: '100%'}}>
+    <List sx={{
+        paddingTop: '0px',
+        paddingBottom: '0px',
+        width: '100%',
+        border: '4px double #333333',
+        borderTopWidth: '0px',
+        borderLeftWidth: '0px',
+        borderRightWidth: '0px',
+    }}>
       {
         data &&
         data.map(function(item, index) {