127 lines
4.6 KiB
TypeScript
127 lines
4.6 KiB
TypeScript
import {
|
|
AppBar,
|
|
Toolbar,
|
|
Typography,
|
|
Button,
|
|
Menu,
|
|
MenuItem,
|
|
IconButton,
|
|
} from '@mui/material'
|
|
import { AccountCircle } from '@mui/icons-material'
|
|
import { Link, useNavigate, useLocation } from 'react-router-dom'
|
|
import { useAuth } from '../contexts/AuthContext'
|
|
import { useState } from 'react'
|
|
|
|
export default function Layout({ children }: { children: React.ReactNode }) {
|
|
const location = useLocation()
|
|
const navigate = useNavigate()
|
|
const { isLoggedIn, logout } = useAuth()
|
|
|
|
const [anchorElCharacter, setAnchorElCharacter] = useState<null | HTMLElement>(null)
|
|
const [anchorElHomework, setAnchorElHomework] = useState<null | HTMLElement>(null)
|
|
const [anchorElFriend, setAnchorElFriend] = useState<null | HTMLElement>(null)
|
|
const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null)
|
|
|
|
const handleMenuOpen = (
|
|
setter: React.Dispatch<React.SetStateAction<null | HTMLElement>>
|
|
) => (event: React.MouseEvent<HTMLElement>) => {
|
|
setter(event.currentTarget)
|
|
}
|
|
|
|
const handleMenuClose = (
|
|
setter: React.Dispatch<React.SetStateAction<null | HTMLElement>>
|
|
) => () => {
|
|
setter(null)
|
|
}
|
|
|
|
const handleUserMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
|
|
setAnchorElUser(event.currentTarget)
|
|
}
|
|
|
|
const handleUserMenuClose = () => {
|
|
setAnchorElUser(null)
|
|
}
|
|
|
|
const handleLogout = () => {
|
|
logout()
|
|
navigate('/login')
|
|
}
|
|
|
|
const menuItems = isLoggedIn ? (
|
|
<>
|
|
<Button component={Link} to="/guide">사용법 안내</Button>
|
|
|
|
<Button component={Link} to="/dashboard" color="inherit">대시보드</Button>
|
|
|
|
<Button color="inherit" onClick={handleMenuOpen(setAnchorElCharacter)}>캐릭터</Button>
|
|
<Menu
|
|
anchorEl={anchorElCharacter}
|
|
open={Boolean(anchorElCharacter)}
|
|
onClose={handleMenuClose(setAnchorElCharacter)}
|
|
>
|
|
<MenuItem component={Link} to="/characters" onClick={handleMenuClose(setAnchorElCharacter)}>캐릭터 목록</MenuItem>
|
|
<MenuItem component={Link} to="/characters/me/homeworks" onClick={handleMenuClose(setAnchorElCharacter)}>내 숙제</MenuItem>
|
|
</Menu>
|
|
|
|
<Button color="inherit" onClick={handleMenuOpen(setAnchorElHomework)}>숙제</Button>
|
|
<Menu
|
|
anchorEl={anchorElHomework}
|
|
open={Boolean(anchorElHomework)}
|
|
onClose={handleMenuClose(setAnchorElHomework)}
|
|
>
|
|
<MenuItem component={Link} to="/homeworks" onClick={handleMenuClose(setAnchorElHomework)}>숙제 목록</MenuItem>
|
|
</Menu>
|
|
|
|
<Button color="inherit" onClick={handleMenuOpen(setAnchorElFriend)}>친구</Button>
|
|
<Menu
|
|
anchorEl={anchorElFriend}
|
|
open={Boolean(anchorElFriend)}
|
|
onClose={handleMenuClose(setAnchorElFriend)}
|
|
>
|
|
<MenuItem component={Link} to="/friends" onClick={handleMenuClose(setAnchorElFriend)}>친구목록</MenuItem>
|
|
<MenuItem component={Link} to="/friends/requests" onClick={handleMenuClose(setAnchorElFriend)}>요청관리</MenuItem>
|
|
</Menu>
|
|
|
|
<IconButton color="inherit" onClick={handleUserMenuOpen} size="large">
|
|
<AccountCircle />
|
|
</IconButton>
|
|
<Menu
|
|
anchorEl={anchorElUser}
|
|
open={Boolean(anchorElUser)}
|
|
onClose={handleUserMenuClose}
|
|
>
|
|
<MenuItem onClick={() => { handleUserMenuClose(); navigate('/me') }}>
|
|
내 정보
|
|
</MenuItem>
|
|
<MenuItem onClick={() => { handleUserMenuClose(); handleLogout() }}>
|
|
로그아웃
|
|
</MenuItem>
|
|
</Menu>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Button component={Link} to="/guide">사용법 안내</Button>
|
|
|
|
<Button component={Link} to="/signup" color="inherit">회원가입</Button>
|
|
<Button component={Link} to="/login" color="inherit">로그인</Button>
|
|
</>
|
|
)
|
|
|
|
return (
|
|
<>
|
|
<AppBar position="static" key={location.pathname}>
|
|
<Toolbar>
|
|
<Typography variant="h6" sx={{ flexGrow: 1 }}>
|
|
<Button component={Link} to="/" color="inherit">
|
|
숙제노기
|
|
</Button>
|
|
</Typography>
|
|
{menuItems}
|
|
</Toolbar>
|
|
</AppBar>
|
|
|
|
{children}
|
|
</>
|
|
)
|
|
}
|