-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #41 from jun-ho-Kim/web-ui
fix: UI 수정
- Loading branch information
Showing
15 changed files
with
345 additions
and
106 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import * as React from 'react'; | ||
| import AppBar from '@mui/material/AppBar'; | ||
| import Box from '@mui/material/Box'; | ||
| import Toolbar from '@mui/material/Toolbar'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import IconButton from '@mui/material/IconButton'; | ||
| import MenuIcon from '@mui/icons-material/Menu'; | ||
| import AccountCircle from '@mui/icons-material/AccountCircle'; | ||
| import Switch from '@mui/material/Switch'; | ||
| import FormControlLabel from '@mui/material/FormControlLabel'; | ||
| import FormGroup from '@mui/material/FormGroup'; | ||
| import MenuItem from '@mui/material/MenuItem'; | ||
| import Menu from '@mui/material/Menu'; | ||
|
|
||
| export default function MenuAppBar() { | ||
| const [auth, setAuth] = React.useState(true); | ||
| const [anchorEl, setAnchorEl] = React.useState(null); | ||
|
|
||
| const handleChange = (event) => { | ||
| setAuth(event.target.checked); | ||
| }; | ||
|
|
||
| const handleMenu = (event) => { | ||
| setAnchorEl(event.currentTarget); | ||
| }; | ||
|
|
||
| const handleClose = () => { | ||
| setAnchorEl(null); | ||
| }; | ||
|
|
||
| return ( | ||
| <Box color={'dar'} sx={{ flexGrow: 1 }}> | ||
|
|
||
| <AppBar position="static"> | ||
| <Toolbar> | ||
| <IconButton | ||
| size="large" | ||
| edge="start" | ||
| color="inherit" | ||
| aria-label="menu" | ||
| sx={{ mr: 2}} | ||
| > | ||
| <MenuIcon /> | ||
| </IconButton> | ||
| <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> | ||
| Home | ||
| </Typography> | ||
| <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> | ||
| 등록 관리 | ||
| </Typography> | ||
| <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> | ||
| log | ||
| </Typography> | ||
| {auth && ( | ||
| <div> | ||
| <IconButton | ||
| size="large" | ||
| aria-label="account of current user" | ||
| aria-controls="menu-appbar" | ||
| aria-haspopup="true" | ||
| onClick={handleMenu} | ||
| color="inherit" | ||
| > | ||
| <AccountCircle /> | ||
| </IconButton> | ||
| <Menu | ||
| id="menu-appbar" | ||
| anchorEl={anchorEl} | ||
| anchorOrigin={{ | ||
| vertical: 'top', | ||
| horizontal: 'right', | ||
| }} | ||
| keepMounted | ||
| transformOrigin={{ | ||
| vertical: 'top', | ||
| horizontal: 'right', | ||
| }} | ||
| open={Boolean(anchorEl)} | ||
| onClose={handleClose} | ||
| > | ||
| <MenuItem onClick={handleClose}>Profile</MenuItem> | ||
| <MenuItem onClick={handleClose}>My account</MenuItem> | ||
| </Menu> | ||
| </div> | ||
| )} | ||
| </Toolbar> | ||
| </AppBar> | ||
| </Box> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import * as React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import Button from '@mui/material/Button'; | ||
| import { styled } from '@mui/material/styles'; | ||
| import Dialog from '@mui/material/Dialog'; | ||
| import DialogTitle from '@mui/material/DialogTitle'; | ||
| import DialogContent from '@mui/material/DialogContent'; | ||
| import DialogActions from '@mui/material/DialogActions'; | ||
| import IconButton from '@mui/material/IconButton'; | ||
| import CloseIcon from '@mui/icons-material/Close'; | ||
| import Typography from '@mui/material/Typography'; | ||
|
|
||
| const BootstrapDialog = styled(Dialog)(({ theme }) => ({ | ||
| '& .MuiDialogContent-root': { | ||
| padding: theme.spacing(2), | ||
| }, | ||
| '& .MuiDialogActions-root': { | ||
| padding: theme.spacing(1), | ||
| }, | ||
| })); | ||
|
|
||
| function BootstrapDialogTitle(props) { | ||
| const { children, onClose, ...other } = props; | ||
|
|
||
| return ( | ||
| <DialogTitle sx={{ m: 0, p: 2 }} {...other}> | ||
| {children} | ||
| {onClose ? ( | ||
| <IconButton | ||
| aria-label="close" | ||
| onClick={onClose} | ||
| sx={{ | ||
| position: 'absolute', | ||
| right: 8, | ||
| top: 8, | ||
| color: (theme) => theme.palette.grey[500], | ||
| }} | ||
| > | ||
| <CloseIcon /> | ||
| </IconButton> | ||
| ) : null} | ||
| </DialogTitle> | ||
| ); | ||
| } | ||
|
|
||
| BootstrapDialogTitle.propTypes = { | ||
| children: PropTypes.node, | ||
| onClose: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| export default function CustomizedDialogs() { | ||
| const [open, setOpen] = React.useState(false); | ||
|
|
||
| const handleClickOpen = () => { | ||
| setOpen(true); | ||
| }; | ||
| const handleClose = () => { | ||
| setOpen(false); | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <BootstrapDialog | ||
| onClose={handleClose} | ||
| aria-labelledby="customized-dialog-title" | ||
| open={open} | ||
| > | ||
| <BootstrapDialogTitle id="customized-dialog-title" onClose={handleClose}> | ||
| test | ||
| </BootstrapDialogTitle> | ||
| <DialogContent dividers> | ||
| <Typography gutterBottom> | ||
| test desc | ||
| </Typography> | ||
| </DialogContent> | ||
| <DialogActions> | ||
| <Button autoFocus onClick={handleClose}> | ||
| OK | ||
| </Button> | ||
| </DialogActions> | ||
| </BootstrapDialog> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.