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

@@ -2,7 +2,6 @@ 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';
@@ -73,90 +72,6 @@ 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: [
-                ]
-              },
             ]
           },
         ]
@@ -181,6 +96,7 @@ const FireNav = styled(List)({
   '& .MuiListItemButton-root': {
     paddingLeft: 0,
     paddingRight: 0,
+    background: '#fafafa',
   },
   '& .MuiListItemIcon-root': {
     minWidth: 0,
@@ -191,8 +107,20 @@ 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');
 
@@ -221,17 +149,14 @@ export default function ReferenceCodePopupDialogCotents() {
         })}
       >
         <Paper elevation={0} sx={{ maxWidth: 520 }}>
-          <FireNav 
+          <FireNav component="nav" disablePadding>
-            sx={{ my: 0,  }}
-            component="nav" disablePadding>
             <ListItemButton component="a" href="#customized-list">
               <ListItemText
                 sx={{ my: 0 }}
                 primary="문서번호 또는 코드명을 선택 하시면 하위 문서를 검색 하실 수 있습니다"
                 primaryTypographyProps={{
-                  backgroundColor: '#ffffff',
+                  backgroundColor: '#001e4f',
-                  color: '#333333',
+                  color: '#ffffff',
-                  border: '1px solid #333333',
                   fontSize: 15,
                   fontWeight: 'medium',
                   letterSpacing: 0,
@@ -242,30 +167,22 @@ export default function ReferenceCodePopupDialogCotents() {
             </ListItemButton>
             
             <List
-              sx={{ width: '100%' }}
+              sx={{ width: '100%', bgcolor: 'background.paper' }}
               component="nav"
               aria-labelledby="nested-list-subheader"
               subheader={
-                <ListSubheader 
+                <ListSubheader component="div" id="nested-list-subheader">
-                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>
             </List>
             
-            
           </FireNav>
         </Paper>
       </ThemeProvider>

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

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

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

@@ -1,15 +1,9 @@
-import React, {useEffect} from 'react';
+import * as React 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';
 
@@ -19,65 +13,37 @@ import { styled } from '@mui/material/styles';
 
 
 const Item = styled('div')(({ theme }) => ({
-  padding: '0px',
+  padding: theme.spacing(1),
   borderRadius: '4px',  
   textAlign: 'left',
 }));
 
 
-
 const ItemComponent = (props) => {
-  const {item, index, openSelf} = props;
+  const {item, index} = 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 (
-    <Collapse in={openSelf} timeout="auto" unmountOnExit sx={{width: '100%'}}>
     <ListItem disablePadding sx={{ width: '100%'}}>
-        <List sx={{ paddingTop: '0px', paddingBottom: '0px', width: '100%'}}>
+      <List sx={{width: '100%'}}>
         <ListItem disablePadding sx={{ width: '100%'}}>
           <ListItemButton onClick={handleClick} sx={{width: '100%'}}>
               <Box
                 sx={{
                   display: 'grid',
                   gridAutoFlow: 'row',
-                    gridTemplateColumns: 'auto 160px 90px',                
+                  gridTemplateColumns: 'repeat(3, 1fr)',                
                   gap: 1,
                   width: '100%'
                 }}
               >
-                  <Item
+                <Item>{item.codeTitle}</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>
@@ -88,20 +54,49 @@ 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} />
+              <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>
+        </List>
       </Collapse>
   );  
 };
 
 
 export default function ReferenceCodePopupDialogCotentsListItem(props) {
-  const {data} = props;
+  const {codeTitle, codeName, data} = props;
   const [selectedValue, setSelectedValue] = React.useState('a');
 
   const handleChange = (event) => {
@@ -109,21 +104,19 @@ export default function ReferenceCodePopupDialogCotentsListItem(props) {
   };
 
 
+ 
+
+  //data
+
   return (
-    <List sx={{
+    <List sx={{width: '100%'}}>
-        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} openSelf={true} />
+            <ItemComponent item={item} index={index} />
           );
         })
       }