feat(frontend): 헤더 단순화 + 등록/수정 모달 도입

헤더 깨짐 수정 (MainLayout):
- logo 를 div 박스 대신 단순 img(/vite.svg) 로 (ProLayout 기본 슬롯 호환)
- avatarProps.render 의 chevron 제거 → ProLayout 기본 dom 만 Dropdown 트리거
- token.header 의 잘못된 키(colorBgRightActionsItemHover) 제거,
  heightLayoutHeader 56 으로 통일
- actionsRender 의 정산월 영역을 Space + 라벨 조합으로 정리

등록/수정 모달 (DrawerForm / ModalForm):
- AgentList: DrawerForm (680px) — 설계사명 / 사번 / 소속(Select) / 직급 /
  전화 / 이메일 / 주민번호(암호화) / 은행 / 계좌(암호화) / 입사일,
  수정 시 detail API 자동 fetch + initialValues 주입,
  액션 컬럼: 수정/퇴사 (Modal.confirm)
- ContractList: ModalForm (680px) — 증권번호 / 설계사(Select) / 상품(Select) /
  계약자 / 피보험자 / 보험료 / 납입주기 / 계약일 / 효력발생일
  toolBarRender 등록 버튼 추가
- ExceptionLedger: ModalForm (620px) — 설계사 / 정산월 / 예외코드 /
  금액 / 증권번호 / 보험사 / 내용
  toolBarRender 등록 버튼 추가, 예외코드 옵션은 ruleApi 에서 동적 로드

api/contract.ts: ContractSaveReq + create/update 추가

검증: tsc -b 통과 / dev 서버 HMR 정상 반영

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
GA Pro
2026-05-10 22:43:57 +09:00
parent f176b9702c
commit 4e008527b9
5 changed files with 301 additions and 61 deletions
+8 -29
View File
@@ -1,9 +1,9 @@
import { useState } from 'react';
import { ProLayout, type MenuDataItem } from '@ant-design/pro-components';
import { Avatar, Badge, Button, DatePicker, Dropdown, Space } from 'antd';
import { Badge, Button, DatePicker, Dropdown, Space } from 'antd';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { IconBell, IconLogout, IconUser, IconChevronDown } from '@tabler/icons-react';
import { IconBell, IconLogout, IconUser } from '@tabler/icons-react';
import dayjs from 'dayjs';
import { menuApi, type MenuResp } from '@/api/menu';
import { authApi } from '@/api/auth';
@@ -46,16 +46,7 @@ export default function MainLayout() {
return (
<ProLayout
title="GA 정산시스템"
logo={
<div
style={{
width: 28, height: 28, borderRadius: 6,
background: 'linear-gradient(135deg, #1677FF 0%, #0C447C 100%)',
color: '#fff', display: 'flex', alignItems: 'center',
justifyContent: 'center', fontWeight: 800, fontSize: 13,
}}
>GA</div>
}
logo="/vite.svg"
layout="mix"
navTheme="light"
contentWidth="Fluid"
@@ -73,29 +64,22 @@ export default function MainLayout() {
breadcrumbRender={(routers = []) => routers}
onMenuHeaderClick={() => navigate('/')}
token={{
// ProLayout 디자인 토큰 — antd pro 컬러 시스템
sider: {
colorMenuBackground: '#ffffff',
colorTextMenuSelected: '#185FA5',
colorBgMenuItemSelected: '#E6F1FB',
colorTextMenuItemHover: '#1677FF',
colorMenuItemDivider: '#f0f0f0',
},
header: {
colorBgHeader: '#ffffff',
colorHeaderTitle: '#185FA5',
colorBgRightActionsItemHover: '#f5f7fa',
heightLayoutHeader: 48,
heightLayoutHeader: 56,
},
bgLayout: '#f5f7fa',
pageContainer: {
paddingBlockPageContainerContent: 16,
paddingInlinePageContainerContent: 20,
},
}}
actionsRender={() => [
<Space key="month" size={6}>
<span style={{ fontSize: 12, color: '#999' }}></span>
<Space key="month" size={4} align="center">
<span style={{ fontSize: 12, color: '#666' }}></span>
<DatePicker
picker="month"
value={settleMonth}
@@ -103,7 +87,7 @@ export default function MainLayout() {
allowClear={false}
format="YYYY-MM"
size="small"
style={{ width: 110 }}
style={{ width: 100 }}
/>
</Space>,
<Badge key="bell" count={3} size="small" offset={[-2, 4]}>
@@ -111,11 +95,9 @@ export default function MainLayout() {
</Badge>,
]}
avatarProps={{
src: undefined,
size: 'small',
title: auth.userName ?? auth.loginId ?? '관리자',
icon: <IconUser size={14} />,
style: { background: 'linear-gradient(135deg, #1677FF 0%, #185FA5 100%)' },
render: (_props, dom) => (
<Dropdown
menu={{
@@ -124,10 +106,7 @@ export default function MainLayout() {
],
}}
>
<Space style={{ cursor: 'pointer' }}>
{dom}
<IconChevronDown size={12} color="#999" />
</Space>
{dom}
</Dropdown>
),
}}