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: '시설물편',
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');

View File

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

View File

@ -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);
@ -30,20 +36,40 @@ const ItemComponent = (props) => {
};
return (
<Collapse in={openSelf} timeout="auto" unmountOnExit sx={{width: '100%'}}>
<ListItem disablePadding sx={{ width: '100%'}}>
<List 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: 'repeat(3, 1fr)',
gridTemplateColumns: 'auto 120px 90px',
gap: 1,
width: '100%'
}}
>
<Item>{item.codeTitle}</Item>
<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>
@ -57,46 +83,19 @@ const ItemComponent = (props) => {
//<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={open} />
);
})
}
</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 {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} />
);
})
}