Material UI Modal 디자인 구현하기

Modal, Dialog

CustomerAdd

필요한 라이브러리와 객체를 설정한다.

import './CustomerAdd.css';
import { Dialog, DialogActions, DialogTitle, DialogContent } from "@mui/material";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";

const theme = createTheme();

open state를 추가해서 dialog가 열려있는지 확인한다.

열고 닫기에 따른 open 상태값을 변경한다.

handleClickOpen = () => {
  this.setState({
    open: true
  });
}
handleClose = () => {
  this.setState({
    file: null,
    userName: '',
    birthday: '',
    gender: '',
    job: '',
    fileName: '',
    open: false
  })
}

함수 선언 시 funcname = () => {} 이런식으로 구현하여 자동으로 바인딩 처리가 되게 한다.

render() {
  	return (
        <div>
            <Button variant="contained" color="primary" onClick={this.handleClickOpen}>
        고객 추가하기
            </Button>
            <Dialog open={this.state.open} onClose={this.handleClose}>
                <DialogTitle>고객 추가</DialogTitle>
                <DialogContent>
                    <input className="hidden" accept="image/*" id="raised-button-file" type="file" file={this.state.file} value={this.state.fileName} onChange={this.handleFileChange}/><br/>
                    <label htmlFor="raised-button-file">
                        <Button variant="contained" color="primary" component="span" name="file">
                            {this.state.fileName === "" ? "프로필 이미지 선택" : this.state.fileName}
                        </Button>
                    </label>
                    <br/>

                    <TextField label="이름" type="text" name="userName" value={this.state.userName} onChange={this.handleValueChange}/><br/>
                    <TextField label="생년월일" type="text" name="birthday" value={this.state.birthday} onChange={this.handleValueChange}/><br/>
                    <TextField label="성별" type="text" name="gender" value={this.state.gender} onChange={this.handleValueChange}/><br/>
                    <TextField label="직업" type="text" name="job" value={this.state.job} onChange={this.handleValueChange}/><br/>
                </DialogContent>
                <DialogActions>
                    <Button variant="contained" color="primary" onClick={this.handleFormSubmit}>추가</Button>
                    <Button variant="outlined" color="primary" onClick={this.handleClose}>닫기</Button>
                </DialogActions>
            </Dialog>
        </div>
	)
}

추가하면 닫히게 하기 위해서 handleFormSubmit의 상태 초기화에 open도 추가한다.

handleFormSubmit = (e) => {
  e.preventDefault();
  this.addCustomer()
    .then((response) => {
    console.log(response.data);
    this.props.stateRefresh();
  })
  this.setState({
    file: null,
    userName: '',
    birthday: '',
    gender: '',
    job: '',
    fileName: '',
    open: false
  })
}

CustomerDelete

import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

const [open, setOpen] = useState(false);

const handleClickOpen = () => {
  setOpen(true);
}

const handleClose = () => {
  setOpen(false);
}

    return (
        <div>
            <Button variant="contained" color="secondary" onClick={handleClickOpen}>삭제</Button>
            <Dialog open={open} onClose={handleClose}>
                <DialogTitle>
                    삭제 경고
                </DialogTitle>
                <DialogContent>
                    <Typography gutterBottom>
                        선택한 고객 정보가 삭제됩니다.
                    </Typography>
                </DialogContent>
                <DialogActions>
                    <Button variant="contained" color="primary" onClick={() => deleteCustomer(props.id)}>삭제</Button>
                    <Button variant="outlined" color="primary" onClick={handleClose}>닫기</Button>
                </DialogActions>
            </Dialog>
        </div>
    )