feat: 공지사항등록 - 파일 다운로드 반영
parent
eb3733b24d
commit
68e8747a63
@ -1,94 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
// material-ui
|
||||
import { Button, CardContent, CardActions, Divider, Grid, IconButton, Modal, Typography } from '@mui/material';
|
||||
|
||||
// project imports
|
||||
import MainCard from 'ui-component/cards/MainCard';
|
||||
|
||||
// assets
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
|
||||
// generate random
|
||||
function rand() {
|
||||
return Math.round(Math.random() * 20) - 10;
|
||||
}
|
||||
|
||||
// modal position
|
||||
function getModalStyle() {
|
||||
const top = 50 + rand();
|
||||
const left = 50 + rand();
|
||||
|
||||
return {
|
||||
top: `${top}%`,
|
||||
left: `${left}%`,
|
||||
transform: `translate(-${top}%, -${left}%)`
|
||||
};
|
||||
}
|
||||
|
||||
const Body = React.forwardRef(({ modalStyle, handleClose }, ref) => (
|
||||
<div ref={ref} tabIndex={-1}>
|
||||
<MainCard
|
||||
style={modalStyle}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
width: { xs: 280, lg: 450 },
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)'
|
||||
}}
|
||||
title="Title"
|
||||
content
|
||||
secondary={
|
||||
<IconButton onClick={handleClose} size="large">
|
||||
<CloseIcon fontSize="small" />
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography variant="body1">Laboris non ad et aute sint aliquip mollit voluptate velit dolore magna fugiat ex.</Typography>
|
||||
<Typography variant="body2" sx={{ mt: 2 }}>
|
||||
Commodo amet veniam nostrud mollit quis sint qui nulla elit esse excepteur ullamco esse magna. Nisi duis aute est in mollit irure
|
||||
enim tempor in.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
<Divider />
|
||||
<CardActions>
|
||||
<SimpleModal />
|
||||
</CardActions>
|
||||
</MainCard>
|
||||
</div>
|
||||
));
|
||||
|
||||
Body.propTypes = {
|
||||
modalStyle: PropTypes.object,
|
||||
handleClose: PropTypes.func
|
||||
};
|
||||
|
||||
// ==============================|| SIMPLE MODAL ||============================== //
|
||||
|
||||
export default function SimpleModal() {
|
||||
// getModalStyle is not a pure function, we roll the style only on the first render
|
||||
const [modalStyle] = React.useState(getModalStyle);
|
||||
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const handleOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Grid container justifyContent="flex-end">
|
||||
<Button variant="contained" type="button" onClick={handleOpen}>
|
||||
Open Modal
|
||||
</Button>
|
||||
<Modal open={open} onClose={handleClose} aria-labelledby="simple-modal-title" aria-describedby="simple-modal-description">
|
||||
<Body modalStyle={modalStyle} handleClose={handleClose} />
|
||||
</Modal>
|
||||
</Grid>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue