GA Pro
24fc187e2e
테마 / 폰트 / 아이콘: - ConfigProvider theme 토큰 30+ 추가 (브랜드 컬러, 폰트, 라운딩, 메뉴/테이블/버튼) - Pretendard 폰트 link + index.css fontFamily 적용 - @tabler/icons-react 추가, MainLayout 에 적용 레이아웃: - styles/variables.css 신규 (--ga-* 변수 30+) - MainLayout: Header 48px 흰색 + bottom border, Sider 220px + 토글, Content 1400px 중앙 정렬, 정산월 MonthPicker, 햄버거 토글 공통 컴포넌트: - CodeBadge: 4단계 색상 매핑 (success/info/warning/danger), 누락 코드 보강 - MoneyText: 양수 #0F6E56, 음수 #E24B4A, 0 #888 (CSS 변수 사용) - SearchForm: 배경 #fafafa, borderRadius 8, padding 12px 16px - DataGrid: rowHeight 36, headerHeight 38, AG_GRID_LOCALE_KO, 합계행 getRowStyle 회색 배경 + 굵게 페이지 페이지네이션 통일: - utils/tablePagination.ts 신규 (showTotal '총 N건', pageSizeOptions [20/50/100]) - 7개 페이지 (Agent/Contract/Recruit/Exception/Settle/Payment/User) 적용 검증: tsc -b 통과 / vite build 성공 (10s) / 백엔드 단위테스트 76건 영향 없음 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
90 lines
2.1 KiB
TypeScript
90 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import ReactDOM from 'react-dom/client';
|
|
import { BrowserRouter } from 'react-router-dom';
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
import { ConfigProvider, ThemeConfig } from 'antd';
|
|
import koKR from 'antd/locale/ko_KR';
|
|
import 'dayjs/locale/ko';
|
|
import App from './App';
|
|
import './index.css';
|
|
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: { queries: { retry: 1, staleTime: 30_000 } },
|
|
});
|
|
|
|
const theme: ThemeConfig = {
|
|
token: {
|
|
// 브랜드
|
|
colorPrimary: '#1677FF',
|
|
colorSuccess: '#0F6E56',
|
|
colorWarning: '#BA7517',
|
|
colorError: '#E24B4A',
|
|
colorInfo: '#1677FF',
|
|
|
|
// 폰트
|
|
fontFamily: "'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif",
|
|
fontSize: 13,
|
|
fontSizeHeading1: 22,
|
|
fontSizeHeading2: 18,
|
|
fontSizeHeading3: 16,
|
|
|
|
// 라운딩
|
|
borderRadius: 6,
|
|
borderRadiusLG: 8,
|
|
|
|
// 간격
|
|
padding: 16,
|
|
paddingLG: 24,
|
|
margin: 16,
|
|
|
|
// 배경
|
|
colorBgContainer: '#ffffff',
|
|
colorBgLayout: '#f5f5f5',
|
|
colorBgElevated: '#ffffff',
|
|
},
|
|
components: {
|
|
Menu: {
|
|
itemHeight: 40,
|
|
itemMarginInline: 8,
|
|
itemBorderRadius: 6,
|
|
subMenuItemBg: 'transparent',
|
|
itemSelectedBg: '#e6f1fb',
|
|
itemSelectedColor: '#185fa5',
|
|
},
|
|
Table: {
|
|
headerBg: '#fafafa',
|
|
rowHoverBg: '#f5f7fa',
|
|
cellPaddingBlock: 10,
|
|
cellPaddingInline: 12,
|
|
headerSplitColor: '#f0f0f0',
|
|
},
|
|
Button: {
|
|
controlHeight: 32,
|
|
controlHeightSM: 28,
|
|
paddingInline: 16,
|
|
},
|
|
Input: { controlHeight: 32, paddingInline: 10 },
|
|
Select: { controlHeight: 32 },
|
|
Card: { paddingLG: 16 },
|
|
Layout: {
|
|
headerHeight: 48,
|
|
headerBg: '#ffffff',
|
|
headerPadding: '0 16px',
|
|
siderBg: '#ffffff',
|
|
bodyBg: '#f5f5f5',
|
|
},
|
|
},
|
|
};
|
|
|
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
<React.StrictMode>
|
|
<ConfigProvider locale={koKR} theme={theme}>
|
|
<QueryClientProvider client={queryClient}>
|
|
<BrowserRouter>
|
|
<App />
|
|
</BrowserRouter>
|
|
</QueryClientProvider>
|
|
</ConfigProvider>
|
|
</React.StrictMode>,
|
|
);
|