73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
|
import { Layout, Menu, Dropdown, Badge, Space, Avatar, Button } from 'antd';
|
||
|
|
import { useNavigate, Outlet } from 'react-router-dom';
|
||
|
|
import { useQuery } from '@tanstack/react-query';
|
||
|
|
import { BellOutlined, UserOutlined, LogoutOutlined } from '@ant-design/icons';
|
||
|
|
import { menuApi, MenuResp } from '@/api/menu';
|
||
|
|
import { authApi } from '@/api/auth';
|
||
|
|
import { useAuthStore } from '@/stores/auth';
|
||
|
|
|
||
|
|
const { Header, Sider, Content } = Layout;
|
||
|
|
|
||
|
|
function toMenuItems(menus: MenuResp[]): any[] {
|
||
|
|
return menus.map((m) => ({
|
||
|
|
key: m.menuPath ?? m.menuCode,
|
||
|
|
label: m.menuName,
|
||
|
|
children: m.children?.length ? toMenuItems(m.children) : undefined,
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function MainLayout() {
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const auth = useAuthStore();
|
||
|
|
|
||
|
|
const { data: menus = [] } = useQuery({
|
||
|
|
queryKey: ['menu', 'my'],
|
||
|
|
queryFn: menuApi.myMenus,
|
||
|
|
});
|
||
|
|
|
||
|
|
const handleLogout = async () => {
|
||
|
|
try { await authApi.logout(); } catch { /* ignore */ }
|
||
|
|
localStorage.removeItem('accessToken');
|
||
|
|
localStorage.removeItem('refreshToken');
|
||
|
|
auth.clear();
|
||
|
|
navigate('/login');
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Layout style={{ minHeight: '100vh' }}>
|
||
|
|
<Header style={{ display: 'flex', justifyContent: 'space-between',
|
||
|
|
background: '#001529', color: '#fff' }}>
|
||
|
|
<div style={{ fontSize: 18, fontWeight: 600 }}>GA 수수료 정산 솔루션</div>
|
||
|
|
<Space>
|
||
|
|
<Badge count={0}>
|
||
|
|
<Button type="text" icon={<BellOutlined style={{ color: '#fff' }} />} />
|
||
|
|
</Badge>
|
||
|
|
<Dropdown menu={{
|
||
|
|
items: [
|
||
|
|
{ key: 'logout', label: '로그아웃', icon: <LogoutOutlined />, onClick: handleLogout },
|
||
|
|
],
|
||
|
|
}}>
|
||
|
|
<Space style={{ color: '#fff', cursor: 'pointer' }}>
|
||
|
|
<Avatar size="small" icon={<UserOutlined />} />
|
||
|
|
{auth.userName ?? auth.loginId}
|
||
|
|
</Space>
|
||
|
|
</Dropdown>
|
||
|
|
</Space>
|
||
|
|
</Header>
|
||
|
|
<Layout>
|
||
|
|
<Sider width={240} theme="light">
|
||
|
|
<Menu
|
||
|
|
mode="inline"
|
||
|
|
items={toMenuItems(menus)}
|
||
|
|
onClick={({ key }) => navigate(String(key))}
|
||
|
|
style={{ borderRight: 0, height: '100%' }}
|
||
|
|
/>
|
||
|
|
</Sider>
|
||
|
|
<Content style={{ padding: 24 }}>
|
||
|
|
<Outlet />
|
||
|
|
</Content>
|
||
|
|
</Layout>
|
||
|
|
</Layout>
|
||
|
|
);
|
||
|
|
}
|