From a4a33196cfede9749e16ece8ff5d973e27a0b563 Mon Sep 17 00:00:00 2001
From: thkim <thkim@dbnt.co.kr>
Date: Fri, 22 Mar 2024 17:59:46 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A4=91=EA=B0=84=EC=A0=80=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ReferenceCodePopupDialogCotents.jsx       |  96 ++++++++++--
 .../ReferenceCodePopupDialogCotentsHeader.jsx |   2 +-
 ...eferenceCodePopupDialogCotentsListItem.jsx | 137 +++++++++---------
 3 files changed, 150 insertions(+), 85 deletions(-)

diff --git a/egovframe-template-simple-react-contribution/src/pages/admin/committee/ProgressStatus/ReferenceCodePopupDialogCotents.jsx b/egovframe-template-simple-react-contribution/src/pages/admin/committee/ProgressStatus/ReferenceCodePopupDialogCotents.jsx
index 47499b4..0107b09 100644
--- a/egovframe-template-simple-react-contribution/src/pages/admin/committee/ProgressStatus/ReferenceCodePopupDialogCotents.jsx
+++ b/egovframe-template-simple-react-contribution/src/pages/admin/committee/ProgressStatus/ReferenceCodePopupDialogCotents.jsx
@@ -72,6 +72,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: [
+                ]
+              },
             ]
           },
         ]
@@ -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');
 
diff --git a/egovframe-template-simple-react-contribution/src/pages/admin/committee/ProgressStatus/ReferenceCodePopupDialogCotentsHeader.jsx b/egovframe-template-simple-react-contribution/src/pages/admin/committee/ProgressStatus/ReferenceCodePopupDialogCotentsHeader.jsx
index b220690..8377747 100644
--- a/egovframe-template-simple-react-contribution/src/pages/admin/committee/ProgressStatus/ReferenceCodePopupDialogCotentsHeader.jsx
+++ b/egovframe-template-simple-react-contribution/src/pages/admin/committee/ProgressStatus/ReferenceCodePopupDialogCotentsHeader.jsx
@@ -17,7 +17,7 @@ export default function ReferenceCodePopupDialogCotentsHeader() {
       sx={{
         display: 'grid',
         gridAutoFlow: 'row',
-        gridTemplateColumns: 'repeat(3, 1fr)',
+        gridTemplateColumns: 'auto 120px 90px',
         gap: 1,
       }}
     >
diff --git a/egovframe-template-simple-react-contribution/src/pages/admin/committee/ProgressStatus/ReferenceCodePopupDialogCotentsListItem.jsx b/egovframe-template-simple-react-contribution/src/pages/admin/committee/ProgressStatus/ReferenceCodePopupDialogCotentsListItem.jsx
index f67f73e..ff31023 100644
--- a/egovframe-template-simple-react-contribution/src/pages/admin/committee/ProgressStatus/ReferenceCodePopupDialogCotentsListItem.jsx
+++ b/egovframe-template-simple-react-contribution/src/pages/admin/committee/ProgressStatus/ReferenceCodePopupDialogCotentsListItem.jsx
@@ -4,6 +4,11 @@ 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 Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 
@@ -13,14 +18,15 @@ 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);
@@ -29,74 +35,67 @@ const ItemComponent = (props) => {
     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 120px 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> &nbsp; &nbsp; </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) {
+              //<div>item.codeTitle</div>
+              console.log('thkim 2024-03-21 11:29 %o', item);
+              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 +103,13 @@ export default function ReferenceCodePopupDialogCotentsListItem(props) {
   };
 
 
- 
-
-  //data
-
   return (
-    <List sx={{width: '100%'}}>
+    <List sx={{ paddingTop: '0px', paddingBottom: '0px', width: '100%'}}>
       {
         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} />
           );
         })
       }