87 lines
3.0 KiB
TypeScript
87 lines
3.0 KiB
TypeScript
|
import { Card, List, NavBar, Space, Tag } from 'antd-mobile';
|
||
|
|
import { useNavigate } from 'react-router-dom';
|
||
|
|
import { useQuery } from '@tanstack/react-query';
|
||
|
|
import { useAuthStore } from '@/stores/authStore';
|
||
|
|
import { statementApi } from '@/api/statement';
|
||
|
|
import { withdrawApi } from '@/api/withdraw';
|
||
|
|
import { noticeApi } from '@/api/notice';
|
||
|
|
|
||
|
|
export default function Home() {
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const profile = useAuthStore((s) => s.profile);
|
||
|
|
const clear = useAuthStore((s) => s.clear);
|
||
|
|
const agentId = profile?.agentId;
|
||
|
|
|
||
|
|
const statements = useQuery({
|
||
|
|
queryKey: ['home.statements', agentId],
|
||
|
|
enabled: !!agentId,
|
||
|
|
queryFn: () => statementApi.list({ agentId, pageNum: 1, pageSize: 1 }),
|
||
|
|
});
|
||
|
|
const withdraws = useQuery({
|
||
|
|
queryKey: ['home.withdraws', agentId],
|
||
|
|
enabled: !!agentId,
|
||
|
|
queryFn: () => withdrawApi.list({ agentId, pageNum: 1, pageSize: 1 }),
|
||
|
|
});
|
||
|
|
const notices = useQuery({
|
||
|
|
queryKey: ['home.notices'],
|
||
|
|
queryFn: () => noticeApi.active(),
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="page">
|
||
|
|
<NavBar back={null} right={<a onClick={() => { clear(); navigate('/login'); }} style={{ fontSize: 14 }}>로그아웃</a>}>
|
||
|
|
홈
|
||
|
|
</NavBar>
|
||
|
|
<div style={{ padding: 16 }}>
|
||
|
|
<Card>
|
||
|
|
<div style={{ fontSize: 18, fontWeight: 700 }}>
|
||
|
|
{profile?.userName ?? profile?.loginId ?? '사용자'} 님
|
||
|
|
</div>
|
||
|
|
<div style={{ color: '#888', fontSize: 13, marginTop: 4 }}>
|
||
|
|
{profile?.agentName ? `${profile.agentName} · ${profile.orgName ?? ''}` : '설계사 정보 없음'}
|
||
|
|
</div>
|
||
|
|
{profile?.roleCodes && (
|
||
|
|
<div style={{ marginTop: 8 }}>
|
||
|
|
<Space wrap>
|
||
|
|
{profile.roleCodes.map((r) => <Tag key={r} color="primary">{r}</Tag>)}
|
||
|
|
</Space>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<div style={{ marginTop: 16 }}>
|
||
|
|
<List header="요약">
|
||
|
|
<List.Item
|
||
|
|
extra={statements.isLoading ? '...' : `총 ${statements.data?.total ?? 0}건`}
|
||
|
|
onClick={() => navigate('/statement')}
|
||
|
|
clickable
|
||
|
|
>
|
||
|
|
정산 명세서
|
||
|
|
</List.Item>
|
||
|
|
<List.Item
|
||
|
|
extra={withdraws.isLoading ? '...' : `총 ${withdraws.data?.total ?? 0}건`}
|
||
|
|
onClick={() => navigate('/withdraw')}
|
||
|
|
clickable
|
||
|
|
>
|
||
|
|
출금 신청
|
||
|
|
</List.Item>
|
||
|
|
<List.Item
|
||
|
|
extra={notices.isLoading ? '...' : `${notices.data?.length ?? 0}건`}
|
||
|
|
onClick={() => navigate('/notice')}
|
||
|
|
clickable
|
||
|
|
>
|
||
|
|
공지사항
|
||
|
|
</List.Item>
|
||
|
|
</List>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{!agentId && (
|
||
|
|
<div style={{ marginTop: 24, fontSize: 12, color: '#f96', textAlign: 'center' }}>
|
||
|
|
본 계정에 연결된 설계사(agent)가 없습니다. 일부 기능이 제한될 수 있습니다.
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|