feat: 중간저장

thkim
thkim 2024-03-22 17:59:46 +09:00
parent 3744b08f9a
commit a4a33196cf
3 changed files with 150 additions and 85 deletions

View File

@ -72,6 +72,90 @@ const data = [
codeName: '시설물편', codeName: '시설물편',
depth: 3, depth: 3,
children: [ 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() { export default function ReferenceCodePopupDialogCotents() {
const [open, setOpen] = React.useState(true);
const [selectedValue, setSelectedValue] = React.useState('a'); const [selectedValue, setSelectedValue] = React.useState('a');

View File

@ -17,7 +17,7 @@ export default function ReferenceCodePopupDialogCotentsHeader() {
sx={{ sx={{
display: 'grid', display: 'grid',
gridAutoFlow: 'row', gridAutoFlow: 'row',
gridTemplateColumns: 'repeat(3, 1fr)', gridTemplateColumns: 'auto 120px 90px',
gap: 1, gap: 1,
}} }}
> >

View File

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