React JS + TypeScript로 영업 통계 페이지 개발한 경험

interface chartDataType { // 사용자 정의 타입
	tranDate: string,
	accountName: string,
	total: number
}

const Dashboard = () => {
	let result: string // string 타입 변수
	const dataMap = new Map<string, chartDataType>() // chartDataType 타입 Map
}

export default Dashboard

const functionName = (parameter: parameterType): returnType => {
	...
}

const handleEditSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
	e.preventDefault()
	
	updateUserMutation.mutateAsync({ accountId: userAccountId, userId: userPageId, updateUser: user }, {
		onSuccess: () => {
			enqueueSnackbar('user 가 수정되었습니다.', { variant: 'success' })
			parentsDataSource.reload()
			userData.refetch()
		},
		onError: (error: any) => {
			enqueueSnackbar(`user 수정을 실패하였습니다. ${error?.response.data}`, { variant: 'error' })
		}
	})
}

// '?'가 붙은 속성은 optional 타입을 의미
export interface dataParamsType {
	limit?: number,
	offset?: number,
}

export interface SalesParamsType extends dataParamsType {
	tranDateAfter: string,
	tranDateBefore: string,
	DealId?: number,
}

export const salesStatistics = {
	getSales: (params?: SalesParamsType) => getReq('/sales/stats/sales', { limit: 1000, ...params }),
	// 생략
}

const Roles = () => {
	...
	return (
		...
			<RoleEditForm
				// props ↓
				dataSource={dataSource}
				formRef={FormRef}
				allAuthGridRef={allAuthGridRef}
				role={role}
				auths={auths}
				updateRoleAuth={updateRoleAuth}
				handlerDefaultRole={handlerDefaultRole}
			/>
		...
	)
}

export default Roles

// RoleEditForm 컴포넌트의 Props 타입 선언
interface RoleEditFormProps {
	dataSource: DataSource,
	formRef: React.RefObject<Form>,
	role: RoleType,
	auths: IDragType[],
	updateRoleAuth(data: IDragType[]): void,
	handlerDefaultRole(e: ValueChangedEvent): void,
	allAuthGridRef: React.RefObject<DataGrid<string|number, string>>,
}

/**
* Returns a stateful value, and a function to update it.
*
* @version 16.8.0
* @see https://react.dev/reference/react/useState
*/
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>]
function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>]

interface trendsInRevenueType { // 사용자 정의 타입
	period: string,
	salesTotal: number,
	purchaseTotal: number,
	marginTotal: number,
	marginRate: number
}

const Dashboard = () => {
	const [selectedYear, setSelectedYear] = useState<number>(thisYear) // number 타입
	const [isRefreshClicked, setRefreshClick] = useState<boolean>(false) // boolean 타입
	const [trendsInRevenue, setTrendsInRevenue] = useState<trendsInRevenueType[]>([]) // trendsInRevenueType 배열 타입
	
    ...
	
    // 새로고침 버튼 이벤트 리스너
	const onRefreshButtonClick = () => {
		setRefreshClick(prev => !prev) // 'isRefreshClicked' state 값 변경
		setTrendsInRevenue([]) // 'trendsInRevenue' state 값 변경
	}
	
    ...
    
    return (
	    ...
	    <Button
		    icon="refresh"
		    text="새로고침"
		    style={{ marginLeft: theme.spacing(1) }}
		    onClick={() => onRefreshButtonClick()}
		/>
		...
    )
}

export default Dashboard

/**
* `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
* (`initialValue`). The returned object will persist for the full lifetime of the component.
*
* Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
* value around similar to how you’d use instance fields in classes.
*
* @version 16.8.0
* @see https://react.dev/reference/react/useRef
*/
function useRef<T>(initialValue: T): MutableRefObject<T>
function useRef<T>(initialValue: T|null): RefObject<T>
function useRef<T = undefined>(): MutableRefObject<T | undefined>

interface UserAddFormProps {
	formRef: React.RefObject<Form>
}

const UserAddForm = (props: UserAddFormProps) => {
	const { formRef } = props
	
	return (
		<Form ref={formRef} colCount={2}>
			...
		</Form>
	)
}

export default UserAddForm

const Users = () => {
	const formRef = useRef<Form>(null)	// Popup Form Ref
	
	const getForm = () => {
		return formRef.current?.instance;
	}
	
	const handleAddPopupFormSubmit = async () => {
	    showLoading(true)
	    const form = getForm() as dxForm // 'as' 키워드
	    const formData = { ...form.option('formData') }
	    const validate = form.validate()
	    
	    if (validate.isValid) {
		    showLoading(true)
		    formData.accountId = userAccountId
		    await dataSource.store().insert(formData)
		    addHidePopup()
		    dataSource.reload()
		    showLoading(false)
		}
	}
	
    return (
		...
			// formRef는 React.RefObject<Form> 타입
			<UserAddForm formRef={formRef} />
		...
    )
}

export default Users

import { ReactNode, forwardRef, ForwardedRef } from 'react';
import { Chart, IChartOptions, Animation } from 'devextreme-react/chart';

// DevExtreme의 IChartOptions을 상속 받아 props 타입 정의
interface ChartProps extends IChartOptions {
  children: ReactNode
}

const DxChart = forwardRef(({ children, ...rest }: ChartProps, ref: ForwardedRef<Chart>) => {
	return (
		<Chart ref={ref} width="100%" palette="Soft Pastel" {...rest} >
			<Animation duration={500} />
				{children}
		</Chart>
	)
})

DxChart.displayName = 'DxChart'

export default DxChart

// import문 생략

// DevExtreme의 IPivotGridOptions을 상속 받아 props 타입 정의
interface PivotGridProps extends IPivotGridOptions {
	children?: ReactNode
}

const DxPivotGrid = forwardRef((props: PivotGridProps, ref: ForwardedRef<PivotGrid>) => {
	const { children, ...rest } = props
	
	return (
		<PivotGrid
			ref={ref}
			allowSortingBySummary
			allowSorting
			allowFiltering
			allowExpandAll
			showBorders
			width='100%'
			{...rest}
		>
			{children}
		</PivotGrid>
	)
})
  
DxPivotGrid.defaultProps = {
	children: null
}

DxPivotGrid.displayName = 'DxPivotGrid'

export default DxPivotGrid

// import문 생략

const fileExport: IExportProps = {
	enabled: true,
}

const fieldChooser: IFieldChooserProps = {
	enabled: true,
	allowSearch: true,
	applyChangesMode: 'onDemand',
}

const fieldPanel: IFieldPanelProps = {
	visible: true,
	allowFieldDragging: true,
}

const headerFilter: IHeaderFilterProps = {
	allowSearch: true,
}

const loadPanel: ILoadPanelProps = {
	enabled: true,
}

const pivotGridTexts: IPivotGridTextsProps = {
	expandAll: true,
}

const DefaultProps = {
	export: fileExport,
	fieldChooser,
	fieldPanel,
	headerFilter,
	loadPanel,
	pivotGridTexts,
}

export default DefaultProps

// state 및 chart data 타입
interface VisualRangeType {
	visualRange: {
		startValue: string | number | Date,
		endValue: string | number | Date,
	}
}

interface ChartDataSourceType {
	[key: string]: string | number
}

interface chartDataType {
	tranDate: string,
	accountName: string,
	total: number
}

// SalesStatistics Component
const SalesStatistics = () => {
	const defaultProps = { ...DefaultProps }  // Pivot Grid DefaultProps
	const theme = useTheme()
	const startDate = useRef<string>(dayjs().add(-1, 'month').format())
	const endDate = useRef<string>(dayjs().format())
	const chartRef = useRef<Chart>(null)
	const rangeSelectorRef = useRef<RangeSelector>(null)
	const pivotGridRef = useRef<PivotGrid>(null)
	const [visualRange, setVisualRange] = useState<VisualRangeType>({
		visualRange: {
			startValue: '',
			endValue: ''
		}
	})
	const [seriesList, setSeriesList] = useState<string[]>([])
	const [chartDataSource, setChartDataSource] = useState<ChartDataSourceType[]>([])
	const [rowColumnTotal, setRowColumnTotal] = useState({
		showRowTotals: true,
		showRowGrandTotals: true,
		showColumnTotals: true,
		showColumnGrandTotals: true,
	})
	const [excelTranDate, setExcelTranDate] = useState({
		startDate: dayjs().add(-1, 'month').format('YYYY.MM.DD'),
		  endDate: dayjs().format('YYYY.MM.DD'),
	})
	
	// Chart DataSource 가공 함수
	const makeChartDataSource = (chartData: chartDataType[]) => {
		const dataMap = new Map<string, chartDataType>()
		
		chartData.forEach((data: chartDataType) => {
			dataMap.set(`${data.tranDate}_${data.accountName}`, { ...data, total: 0 })
		})
		chartData.forEach((data: chartDataType) => {
			if (dataMap.has(`${data.tranDate}_${data.accountName}`)) {
				dataMap.set(`${data.tranDate}_${data.accountName}`, { ...data, total: (dataMap.get(`${data.tranDate}_${data.accountName}`) as chartDataType).total += data.total })
			}
		})
		const result = Array.from(dataMap, ([key, { tranDate, accountName, total }]) => ({ tranDate, accountName, total }))
		
		return result
	}

    // Pivot Grid DataSource
    const pivotDataSource = useMemo(() => new PivotGridDataSource({
	    fields: [
			//  Row area
			{
				dataField: 'accountName',
				area: 'row',
			},
			//  Column area
			{
				dataField: 'tranDate',
				dataType: 'date',
				expanded: true,
				area: 'column',
			},
			//  Data area
			{
				caption: 'Total',
				dataField: 'total',
				dataType: 'number',
				summaryType: 'sum',
				format: { type: 'fixedPoint', precision: 2 },
				area: 'data',
			}, {
				caption: 'Margin',
				dataField: 'margin',
				dataType: 'number',
				summaryType: 'sum',
				format: { type: 'fixedPoint', precision: 2 },
				area: 'data',
			},
		],
		store: new CustomStore({
			load: () => salesStatistics.getSales({
				tranDateAfter: startDate.current,
				tranDateBefore: endDate.current,
			}).then((data) => {
				// Chart Series List 가공
				const accountNames = data.map((item: SalesStatisticsType) => item.accountName)
				const uniqAccNames = accountNames.filter((acc: string, index: number) => accountNames.indexOf(acc) === index)
				setSeriesList([...uniqAccNames])
				
				// api에서 Chart DataSource에 사용할 데이터 추출
				const chartData = data.map((item: SalesStatisticsType) => ({ tranDate: item.tranDate.substring(0, 7), accountName: item.accountName, total: item.total }))
				
				// Chart DataSource 가공
				const result = makeChartDataSource(chartData)
				
				// Chart DataSource 가공 (Pivot Grid 데이터와 동일하도록)
				result.forEach((item: chartDataType) => {
					const tranDateYearMonth = item.tranDate.substring(0, 7)
					const quarter = dayjs(tranDateYearMonth).quarter()
					const argFormat = dayjs(tranDateYearMonth).format(`YYYY/Q${quarter}/MMMM`)
					setChartDataSource(prev => [
						...prev,
						{
							arg: argFormat,
							[item.accountName]: item.total,
						}
					])
				})
				
				return data
				
			}).catch((err) => {
				console.log(err)
			}),
		}),
	}), [])

	// 조회기간 버튼 이벤트 핸들러
	const onTransactionDateClick = () => {
		pivotDataSource.reload()
		setChartDataSource([])
	}

	// Reset 버튼 이벤트 핸들러
	const onResetClick = () => {
		pivotDataSource.state({})
	}

	// Chart RangeSelector onValueChanged
	const updateVisualRange = (e: any) => {
		setVisualRange({ visualRange: e.value })
	}

    // Pivot Grid Total Option
	const onShowRowTotalsChanged = (e: CheckBoxValueChangedEvent) => {
		setRowColumnTotal({ ...rowColumnTotal, showRowTotals: e.value })
	}
	const onShowRowGrandTotalsChanged = (e: CheckBoxValueChangedEvent) => {
		setRowColumnTotal({ ...rowColumnTotal, showRowGrandTotals: e.value })
	}
	const onShowColumnTotalsChanged = (e: CheckBoxValueChangedEvent) => {
		setRowColumnTotal({ ...rowColumnTotal, showColumnTotals: e.value })
	}
	const onShowColumnGrandTotalsChanged = (e: CheckBoxValueChangedEvent) => {
		setRowColumnTotal({ ...rowColumnTotal, showColumnGrandTotals: e.value })
	}

    // Chart customizeLabel
    const customizeLabel = () => {
	    return {
		    customizeText(arg: any) {
			    return `${arg.seriesName}<br/>${arg.valueText}`
			}
		}
	}

    // Chart onLegendHoverChanged
    const onLegendHoverChanged = (parent: HTMLElement, mouseEvent: string) => {
	    const chart = chartRef.current?.instance
	    parent?.addEventListener(mouseEvent, (event: Event) => {
		    const legendName = (parent.getElementsByTagName('text')[0].innerHTML)
		    chart?.getSeriesByName(legendName).getAllPoints().forEach((point: any) => {
			    if(event.type === 'mouseover') {
				    point.getLabel().show()
				}
				else {
					point.getLabel().hide()
				}
			})
		})
	}

	// Chart onPointHoverChanged
	const onPointHoverChanged = (e: PointHoverChangedEvent) => {
		const point = e.target
		if (point.isHovered()) {
			point.getLabel().show()
		}
		else {
			point.getLabel().hide()
		}
	}
	
	// Chart onPointClick
	const onPointClick= ({ target: point }: PointClickEvent) => {
		point.select()
	}
	
	useEffect(() => {
		Array.from(document.getElementsByClassName("dxl-marker")).forEach((element: Element) => {
			const parent = element.parentElement
			if(parent) {
				onLegendHoverChanged(parent, 'mouseover')
				onLegendHoverChanged(parent, 'mouseleave')
			}
		})
	})
	
	return (
		<GridPageContainer>
			<Grid container direction="column" sx={{ paddingTop: theme.spacing(0.5), paddingBottom: theme.spacing(1) }}>
				<LabelContainer>TransactionDate</LabelContainer>
				<Grid container>
					<Box sx={{ paddingRight: theme.spacing(1) }}>
						<DateBox
							width="225"
							defaultValue={startDate.current}
							displayFormat="yyyy-MM-dd"
							onValueChanged={(e: DateBoxValueChangedEvent) => {
								startDate.current = e.value
								setExcelTranDate(prev => ({
									...prev,
									startDate: dayjs(e.value).format('YYYY.MM.DD'),
								}))
							}}
						/>
					</Box>
					<Box sx={{ paddingRight: theme.spacing(1) }}>
						<DateBox
							width="225"
							defaultValue={endDate.current}
							displayFormat="yyyy-MM-dd"
							onValueChanged={(e: DateBoxValueChangedEvent) => {
								endDate.current = e.value
								setExcelTranDate(prev => ({
									...prev,
									endDate: dayjs(e.value).format('YYYY.MM.DD'),
								}))
							}}
						/>
					</Box>
					<Button
						text="조회"
						onClick={onTransactionDateClick}
						style={{ marginRight: theme.spacing(1) }}
					/>
					<Button text={"Reset the PivotGrid's State"} onClick={onResetClick} />
				</Grid>
			</Grid>
			<br />
			
			<Box
				sx={{
					display: 'flex',
					height: '440px',
					padding: theme.spacing(1),
				}}
			>
				<CmChart
					ref={chartRef}
					dataSource={chartDataSource}
					resolveLabelOverlapping="hide"
					customizeLabel={customizeLabel}
					onPointHoverChanged={onPointHoverChanged}
					onPointClick={onPointClick}
				>
					{seriesList.map((item) => (
						<Series valueField={item} name={item} key={item} />
					))}
					<ArgumentAxis visualRange={visualRange.visualRange} />
					<CommonSeriesSettings
						type="bar"
						hoverMode="allSeriesPoints"
						selectionMode="allSeriesPoints"
					>
						<Label
							visible={false}
							border={{ visible: true, color: '#FFFFFF' }}
							format={{ type: 'fixedPoint', precision: 2 }}
						>
							<Connector visible />
						</Label>
					</CommonSeriesSettings>
					<Legend
						visible
						 verticalAlignment="top"
						 horizontalAlignment="right"
						 orientation="vertical"
					>
						<Border visible={false} />
					</Legend>
				</CmChart>
			</Box>
			
			<RangeSelector
				ref={rangeSelectorRef}
				dataSource={chartDataSource}
				onValueChanged={updateVisualRange}
			>
				<Size height={120} />
				<Margin top={20} />
				<Scale startValue={visualRange.visualRange.startValue} endValue={visualRange.visualRange.endValue} />
				<Behavior callValueChanged="onMoving" />
				
				{/* Range Seletor 내부 차트 */}
				<ChartOptions palette="Soft Pastel">
					{seriesList.map((item) => (
						<RangeSelectorChartSeries valueField={item} name={item} key={item} />
					))}
					<Legend visible={false} />
					<CommonSeriesSettingsOptions type="bar" />
				</ChartOptions>
			</RangeSelector>
			
			<OptionsContainer>
				<CaptionContainer>Options</CaptionContainer>
				<OptionContainer>
					<CheckBox
						value={rowColumnTotal.showRowTotals}
						onValueChanged={onShowRowTotalsChanged}
						text="Show Row Totals"
					/>
				</OptionContainer>
				&nbsp;
				<OptionContainer>
					<CheckBox
					value={rowColumnTotal.showRowGrandTotals}
					onValueChanged={onShowRowGrandTotalsChanged}
					text="Show Row Grand Totals"
					/>
				</OptionContainer>
				&nbsp;
				<OptionContainer>
					<CheckBox
						value={rowColumnTotal.showColumnTotals}
						onValueChanged={onShowColumnTotalsChanged}
						text="Show Column Totals"
					/>
				</OptionContainer>
				&nbsp;
				<OptionContainer>
					<CheckBox
						value={rowColumnTotal.showColumnGrandTotals}
						onValueChanged={onShowColumnGrandTotalsChanged}
						text="Show Column Grand Totals"
					/>
				</OptionContainer>
			</OptionsContainer>
			
			<CmPivotGrid
				ref={pivotGridRef}
				{...defaultProps}
				loadPanel={{ enabled: false }}
				export={{
					enabled: true,
					fileName: `[${excelTranDate.startDate}_${excelTranDate.endDate}] SalesStatistics`,
				}}
				showRowTotals={rowColumnTotal.showRowTotals}
				showRowGrandTotals={rowColumnTotal.showRowGrandTotals}
				showColumnTotals={rowColumnTotal.showColumnTotals}
				showColumnGrandTotals={rowColumnTotal.showColumnGrandTotals}
				dataSource={pivotDataSource}
			/>
		</GridPageContainer>
	)
}

export default SalesStatistics