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';
@@ -72,6 +73,90 @@ const data = [
             codeName: '시설물편',
             depth: 3,
             children: [
+              {
+                codeTitle: "TEST 17 00 00",
+                codeName: 'test',
+                depth: 4,
+                children: [
+                ]
+              },
+              {
+                codeTitle: "TEST 17 00 00",
+                codeName: 'test',
+                depth: 4,
+                children: [
+                ]
+              },
+              {
+                codeTitle: "TEST 17 00 00",
+                codeName: 'test',
+                depth: 4,
+                children: [
+                ]
+              },
+              {
+                codeTitle: "TEST 17 00 00",
+                codeName: 'test',
+                depth: 4,
+                children: [
+                ]
+              },
+              {
+                codeTitle: "TEST 17 00 00",
+                codeName: 'test',
+                depth: 4,
+                children: [
+                ]
+              },
+              {
+                codeTitle: "TEST 17 00 00",
+                codeName: 'test',
+                depth: 4,
+                children: [
+                ]
+              },
+              {
+                codeTitle: "TEST 17 00 00",
+                codeName: 'test',
+                depth: 4,
+                children: [
+                ]
+              },
+              {
+                codeTitle: "TEST 17 00 00",
+                codeName: 'test',
+                depth: 4,
+                children: [
+                ]
+              },
+              {
+                codeTitle: "TEST 17 00 00",
+                codeName: 'test',
+                depth: 4,
+                children: [
+                ]
+              },
+              {
+                codeTitle: "TEST 17 00 00",
+                codeName: 'test',
+                depth: 4,
+                children: [
+                ]
+              },
+              {
+                codeTitle: "TEST 17 00 00",
+                codeName: 'test',
+                depth: 4,
+                children: [
+                ]
+              },
+              {
+                codeTitle: "TEST 17 00 00",
+                codeName: 'test',
+                depth: 4,
+                children: [
+                ]
+              },
             ]
           },
         ]
@@ -96,7 +181,6 @@ const FireNav = styled(List)({
   '& .MuiListItemButton-root': {
     paddingLeft: 0,
     paddingRight: 0,
-    background: '#fafafa',
   },
   '& .MuiListItemIcon-root': {
     minWidth: 0,
@@ -107,20 +191,8 @@ const FireNav = styled(List)({
   },
 });
 
-const ItemHeader = styled('div')(({ theme }) => ({
-  padding: theme.spacing(1),
-  borderRadius: '4px',
-  textAlign: 'center',
-}));
-
-const Item = styled('div')(({ theme }) => ({
-  padding: theme.spacing(1),
-  borderRadius: '4px',
-  textAlign: 'center',
-}));
 
 export default function ReferenceCodePopupDialogCotents() {
-  const [open, setOpen] = React.useState(true);
 
   const [selectedValue, setSelectedValue] = React.useState('a');
 
@@ -149,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,
@@ -167,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: 'repeat(3, 1fr)',
+        gridTemplateColumns: 'auto 160px 90px',
         gap: 1,
+
       }}
     >
       <ItemHeader>문서번호</ItemHeader>

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

@@ -1,9 +1,15 @@
-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';
 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';
 
@@ -13,90 +19,89 @@ import { styled } from '@mui/material/styles';
 
 
 const Item = styled('div')(({ theme }) => ({
-  padding: theme.spacing(1),
+  padding: '0px',
   borderRadius: '4px',  
   textAlign: 'left',
 }));
 
 
+
 const ItemComponent = (props) => {
-  const {item, index} = props;
+  const {item, index, openSelf} = 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);
   };
 
-  return (
-    <ListItem disablePadding sx={{ width: '100%'}}>
-      <List sx={{width: '100%'}}>
-        <ListItem disablePadding sx={{ width: '100%'}}>
-          <ListItemButton onClick={handleClick} sx={{width: '100%'}}>
-              <Box
-                sx={{
-                  display: 'grid',
-                  gridAutoFlow: 'row',
-                  gridTemplateColumns: 'repeat(3, 1fr)',                
-                  gap: 1,
-                  width: '100%'
-                }}
-              >
-                <Item>{item.codeTitle}</Item>
-                <Item>{item.codeName}</Item>
-                <Item sx={{textAlign: 'center'}}>
-                  <button type="button" class="btn btn_blue_h31 px-1">선택</button>
-                </Item>
-              </Box>
-          </ListItemButton>
-        </ListItem>
-        {
-          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} />
-            );
-          })
-        }
-      </List>
-    </ListItem>
-  );  
-};
-
-const ItemComponentChild = (props) => {
-  const {open, item} = props;
-
-  return (
-    <Collapse in={open} timeout="auto" unmountOnExit sx={{width: '100%'}}>
-        <List component="div" disablePadding sx={{width: '100%'}}>
-          <ListItemButton sx={{ pl: 4, width: '100%' }}>
-          <Box
-            sx={{
-              display: 'grid',
-              gridAutoFlow: 'row',
-              gridTemplateColumns: 'repeat(3, 1fr)',
-              gap: 1,
-              width: '100%'
-            }}
-          >
-            <Item>{item.codeTitle}</Item>
-            <Item>{item.codeName}</Item>  
-            <Item sx={{textAlign: 'center'}}>
-              <button type="button" class="btn btn_blue_h31 px-1">선택</button>
-            </Item>
-          </Box>
-          </ListItemButton>
+  return (    
+    <Collapse in={openSelf} timeout="auto" unmountOnExit sx={{width: '100%'}}>
+      <ListItem disablePadding sx={{ width: '100%'}}>
+        <List sx={{ paddingTop: '0px', paddingBottom: '0px', width: '100%'}}>
+          <ListItem disablePadding sx={{ width: '100%'}}>
+            <ListItemButton onClick={handleClick} sx={{width: '100%'}}>
+                <Box
+                  sx={{                    
+                    display: 'grid',
+                    gridAutoFlow: 'row',
+                    gridTemplateColumns: 'auto 160px 90px',                
+                    gap: 1,
+                    width: '100%'
+                  }}
+                >
+                  <Item
+                    sx={{paddingLeft: `${Number(Number(item.depth)-1) * 20}px`,}}
+                  >
+                    {
+                      item.children && item.children.length > 0
+                    ?
+                      <span>
+                        {
+                          open
+                        ?
+                          <RemoveIcon sx={{ color: '#777777', height: '30px;'}} />
+                        :
+                          <AddIcon sx={{ color: '#777777', height: '30px;'}} />
+                        }
+                      </span>
+                    :
+                      <span> <InsertDriveFileOutlinedIcon sx={{ color: '#777777', height: '30px;'}} /> </span>
+                    }
+                    &nbsp;{item.codeTitle}
+                  </Item>
+                  <Item>{item.codeName}</Item>
+                  <Item sx={{textAlign: 'center'}}>
+                    <button type="button" class="btn btn_blue_h31 px-1">선택</button>
+                  </Item>
+                </Box>
+            </ListItemButton>
+          </ListItem>
+          {
+            item.children &&
+            item.children.map(function(item, index) {
+              return (
+                <ItemComponent item={item} index={index} openSelf={open} />
+              );
+            })
+          }
         </List>
-      </Collapse>
+      </ListItem>
+    </Collapse>    
   );  
 };
 
 
 export default function ReferenceCodePopupDialogCotentsListItem(props) {
-  const {codeTitle, codeName, data} = props;
+  const {data} = props;
   const [selectedValue, setSelectedValue] = React.useState('a');
 
   const handleChange = (event) => {
@@ -104,19 +109,21 @@ export default function ReferenceCodePopupDialogCotentsListItem(props) {
   };
 
 
- 
-
-  //data
-
   return (
-    <List sx={{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) {
-          //<div>item.codeTitle</div>
-          console.log('thkim 2024-03-21 11:29 %o', item);
           return (
-            <ItemComponent item={item} index={index} />
+            <ItemComponent item={item} index={index} openSelf={true} />
           );
         })
       }