feat: 심사자 심사 반영
parent
3ea002c329
commit
3022c5e0ae
@ -1,29 +0,0 @@
|
|||||||
import { DataGrid, useGridApiRef } from '@mui/x-data-grid';
|
|
||||||
import { useDemoData } from '@mui/x-data-grid-generator';
|
|
||||||
import CustomPagination from './CustomPagination';
|
|
||||||
|
|
||||||
export default function UseGridSelector() {
|
|
||||||
const { data, loading } = useDemoData({
|
|
||||||
dataSet: 'Commodity',
|
|
||||||
rowLength: 100,
|
|
||||||
maxColumns: 10
|
|
||||||
});
|
|
||||||
|
|
||||||
const apiRef = useGridApiRef();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ height: 400, width: '100%' }}>
|
|
||||||
<DataGrid
|
|
||||||
{...data}
|
|
||||||
loading={loading}
|
|
||||||
apiRef={apiRef}
|
|
||||||
pagination
|
|
||||||
pageSize={10}
|
|
||||||
hideFooterPagination
|
|
||||||
components={{
|
|
||||||
Footer: CustomPagination // Toolbar
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
import { useState } from 'react';
|
|
||||||
import { makeStyles } from '@mui/styles';
|
|
||||||
import { Button } from '@mui/material';
|
|
||||||
import DraggableResizeModal from './DraggableResizeModal';
|
|
||||||
|
|
||||||
const useStyles = makeStyles((theme) => ({
|
|
||||||
modal: {
|
|
||||||
'& > *': {
|
|
||||||
margin: theme.spacing(1)
|
|
||||||
},
|
|
||||||
padding: theme.spacing(2)
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
|
|
||||||
function DraggableModal() {
|
|
||||||
const classes = useStyles();
|
|
||||||
const [open, setOpen] = useState(false);
|
|
||||||
const [resizeOpen, setResizeOpen] = useState(false);
|
|
||||||
|
|
||||||
const handleOpenToggle = (evt) => {
|
|
||||||
setOpen(!open);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleOpenResizeToggle = (evt) => {
|
|
||||||
setResizeOpen(!resizeOpen);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={classes.modal}>
|
|
||||||
<Button variant="outlined" color="primary" onClick={handleOpenToggle}>
|
|
||||||
Open Draggable Modal
|
|
||||||
</Button>
|
|
||||||
<Button variant="outlined" color="primary" onClick={handleOpenResizeToggle}>
|
|
||||||
Open Draggable(+resize) Modal
|
|
||||||
</Button>
|
|
||||||
<DraggableResizeModal title="모달 테스트1" open={open} width={450} height={450} onClose={handleOpenToggle}>
|
|
||||||
test1
|
|
||||||
</DraggableResizeModal>
|
|
||||||
<DraggableResizeModal title="모달 테스트2" open={resizeOpen} isResize width={450} height={450} onClose={handleOpenResizeToggle}>
|
|
||||||
test2
|
|
||||||
</DraggableResizeModal>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default DraggableModal;
|
|
||||||
@ -1,164 +0,0 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
|
||||||
import { Paper, makeStyles, withStyles, IconButton, Typography, Divider } from '@mui/material';
|
|
||||||
|
|
||||||
import { Close as CloseIcon, Remove as RemoveIcon, WebAsset as WebAssetIcon } from '@mui/icons-material';
|
|
||||||
|
|
||||||
import Draggable from 'react-draggable';
|
|
||||||
import { ResizableBox } from 'react-resizable';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
const styles = (theme) => ({
|
|
||||||
modal: {
|
|
||||||
margin: 0,
|
|
||||||
padding: theme.spacing(2),
|
|
||||||
cursor: 'move',
|
|
||||||
userSelect: 'none',
|
|
||||||
minWidth: 200
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
fontWeight: 'bold'
|
|
||||||
},
|
|
||||||
closeButton: {
|
|
||||||
position: 'fixed',
|
|
||||||
right: theme.spacing(1),
|
|
||||||
top: theme.spacing(1),
|
|
||||||
color: theme.palette.grey[500]
|
|
||||||
},
|
|
||||||
minimize: {
|
|
||||||
position: 'fixed',
|
|
||||||
right: theme.spacing(6),
|
|
||||||
top: theme.spacing(1),
|
|
||||||
color: theme.palette.grey[500]
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// modal 의 타이틀과 최소화 및 닫기버튼 구성
|
|
||||||
const ModalTitle = withStyles(styles)((props) => {
|
|
||||||
const { children, classes, width, isMinimized, onMinimized, onClose, ...other } = props;
|
|
||||||
return (
|
|
||||||
<div className={classes.modal} {...other} style={{ width }}>
|
|
||||||
<Typography variant="h6" className={classes.title}>
|
|
||||||
{children}
|
|
||||||
</Typography>
|
|
||||||
{onClose ? (
|
|
||||||
<IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
|
|
||||||
<CloseIcon />
|
|
||||||
</IconButton>
|
|
||||||
) : null}
|
|
||||||
{onMinimized ? (
|
|
||||||
<IconButton aria-label="close" className={classes.minimize} onClick={onMinimized}>
|
|
||||||
{isMinimized ? <WebAssetIcon /> : <RemoveIcon />}
|
|
||||||
</IconButton>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
const useContentStyles = (width, height) =>
|
|
||||||
makeStyles((theme) => ({
|
|
||||||
resizable: {
|
|
||||||
padding: theme.spacing(2),
|
|
||||||
position: 'relative',
|
|
||||||
'& .react-resizable-handle': {
|
|
||||||
position: 'absolute',
|
|
||||||
userSelect: 'none',
|
|
||||||
width: 20,
|
|
||||||
height: 20,
|
|
||||||
bottom: 0,
|
|
||||||
right: 0,
|
|
||||||
background:
|
|
||||||
"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')",
|
|
||||||
'background-position': 'bottom right',
|
|
||||||
padding: '0 3px 3px 0',
|
|
||||||
'background-repeat': 'no-repeat',
|
|
||||||
'background-origin': 'content-box',
|
|
||||||
'box-sizing': 'border-box',
|
|
||||||
cursor: 'se-resize'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
padding: theme.spacing(2),
|
|
||||||
maxHeight: height,
|
|
||||||
maxWidth: width
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
|
|
||||||
// modal의 content 영역으로 isResize 여부에 따라 다른 컴포넌트를 사용
|
|
||||||
const ModalContent = ({ width, height, isResize, children }) => {
|
|
||||||
const classes = useContentStyles(width, height)();
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{isResize ? (
|
|
||||||
<ResizableBox height={height} width={width} className={classes.resizable}>
|
|
||||||
{children}
|
|
||||||
</ResizableBox>
|
|
||||||
) : (
|
|
||||||
<Paper className={classes.content}>{children}</Paper>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const PaperComponent = (props) => (
|
|
||||||
<Draggable handle="#draggable-modal-title">
|
|
||||||
<Paper {...props} />
|
|
||||||
</Draggable>
|
|
||||||
);
|
|
||||||
|
|
||||||
const useStyles = makeStyles((theme) => ({
|
|
||||||
modal: {
|
|
||||||
position: 'fixed',
|
|
||||||
top: '10%',
|
|
||||||
left: '10%',
|
|
||||||
zIndex: 1300,
|
|
||||||
userSelect: 'none'
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
|
|
||||||
const Modal = ({ title, children, width, height, isResize, onClose }) => {
|
|
||||||
const classes = useStyles();
|
|
||||||
const [isMinimized, setIsMinimized] = useState(false);
|
|
||||||
|
|
||||||
const handleMinimized = (evt) => {
|
|
||||||
setIsMinimized(!isMinimized);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => () => {}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<PaperComponent className={classes.modal}>
|
|
||||||
<ModalTitle id="draggable-modal-title" onClose={onClose} width={width} isMinimized={isMinimized} onMinimized={handleMinimized}>
|
|
||||||
{title}
|
|
||||||
</ModalTitle>
|
|
||||||
<Divider />
|
|
||||||
{!isMinimized && (
|
|
||||||
<ModalContent width={width} height={height} isResize={isResize}>
|
|
||||||
{children}
|
|
||||||
</ModalContent>
|
|
||||||
)}
|
|
||||||
</PaperComponent>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// open 여부에 따라 mount 및 unmount 처리
|
|
||||||
const DraggableResizeModal = ({ open, ...other }) => <>{open && <Modal {...other} />}</>;
|
|
||||||
|
|
||||||
// property 의 기본값 셋팅
|
|
||||||
DraggableResizeModal.defaultProps = {
|
|
||||||
title: '목록',
|
|
||||||
isResize: false,
|
|
||||||
width: 500,
|
|
||||||
height: 500
|
|
||||||
};
|
|
||||||
|
|
||||||
// property 의 타입 지정
|
|
||||||
DraggableResizeModal.propTypes = {
|
|
||||||
title: PropTypes.string,
|
|
||||||
open: PropTypes.bool.isRequired,
|
|
||||||
onClose: PropTypes.func,
|
|
||||||
isResize: PropTypes.bool,
|
|
||||||
width: PropTypes.number,
|
|
||||||
height: PropTypes.number
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DraggableResizeModal;
|
|
||||||
Loading…
Reference in New Issue