feat: 중간저장
parent
3744b08f9a
commit
a4a33196cf
|
|
@ -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');
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -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> </span>
|
||||||
</List>
|
}
|
||||||
</ListItem>
|
{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} />
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue