diff --git a/apps/dm/app/(base-layout)/pages/wrStatus/page.tsx b/apps/dm/app/(base-layout)/pages/wrStatus/page.tsx index 278dd76bb..f2f6efeb6 100644 --- a/apps/dm/app/(base-layout)/pages/wrStatus/page.tsx +++ b/apps/dm/app/(base-layout)/pages/wrStatus/page.tsx @@ -1,7 +1,7 @@ 'use client'; import { CHART_FORM, MainChart, type ChartConfig } from '@common/business_components'; -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useRef, useState, useMemo, useCallback } from 'react'; interface RegionData { name: string; @@ -213,7 +213,7 @@ const WrStatusPage: React.FC = () => { { region: '제주특별자치도', sewage: '8(1,666)', rainwater: '47(5,746)', reclaimed: '64(660)', thermal: '0' }, ]; - const regionData: RegionData[] = [ + const regionData: RegionData[] = useMemo(() => [ { name: '서울', x: 170, y: 140, values: [0.3, 0.3, 0.2, 0.2] }, { name: '인천', x: 120, y: 150, values: [0.3, 0.3, 0.2, 0.2] }, { name: '경기', x: 210, y: 210, values: [0.3, 0.3, 0.2, 0.2] }, @@ -231,7 +231,7 @@ const WrStatusPage: React.FC = () => { { name: '울산', x: 450, y: 500, values: [0.3, 0.3, 0.2, 0.2] }, { name: '부산', x: 420, y: 550, values: [0.3, 0.3, 0.2, 0.2] }, { name: '제주', x: 60, y: 750, values: [0.3, 0.3, 0.2, 0.2] }, - ]; + ], []); const handleMarkerClick = (regionId: string) => { if (selectedRegion === regionId) { @@ -242,7 +242,7 @@ const WrStatusPage: React.FC = () => { }; - const createDonutMarker = (svg: SVGSVGElement, x: number, y: number, name: string, values: number[]) => { + const createDonutMarker = useCallback((svg: SVGSVGElement, x: number, y: number, name: string, values: number[]) => { const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FED16A']; const radius = 26; const innerRadius = 18; @@ -334,7 +334,7 @@ const WrStatusPage: React.FC = () => { }); svg.appendChild(g); - }; + }, []); useEffect(() => { const loadSVG = async () => { @@ -374,7 +374,7 @@ const WrStatusPage: React.FC = () => { }; loadSVG(); - }, []); + }, [createDonutMarker, regionData]); useEffect(() => { const svg = svgContainerRef.current?.querySelector('svg'); diff --git a/apps/dm/components/ui/sdmInfoInsertForm/AccessibleFormField.tsx b/apps/dm/components/ui/sdmInfoInsertForm/AccessibleFormField.tsx index b5c888661..93ec4e353 100644 --- a/apps/dm/components/ui/sdmInfoInsertForm/AccessibleFormField.tsx +++ b/apps/dm/components/ui/sdmInfoInsertForm/AccessibleFormField.tsx @@ -14,7 +14,6 @@ interface AccessibleFormFieldProps { export function AccessibleFormField({ label, required = false, - error, inputComponent, }: AccessibleFormFieldProps) { const labelText = required ? `${label} *` : label; diff --git a/apps/dm/components/ui/sdmInfoInsertForm/component.tsx b/apps/dm/components/ui/sdmInfoInsertForm/component.tsx index 7423188a2..b094136ca 100644 --- a/apps/dm/components/ui/sdmInfoInsertForm/component.tsx +++ b/apps/dm/components/ui/sdmInfoInsertForm/component.tsx @@ -56,15 +56,15 @@ export function SdmInfoRegForm({ }, [initializeCommonData]); useEffect(() => { - console.log("candidateTitle ", form.getValues("candidateTitle")); - }, [form.getValues("candidateTitle")]); + const candidateTitle = form.getValues("candidateTitle"); + }, [form.getValues]); useEffect(() => { if (useTypesData && useTypesData.length > 0) { setTimeout(() => { form.setValue("usePurpose", useTypesData[0]?.val?.toString() || ""); }, 500); } - }, [useTypesData, form]); + }, [useTypesData, form.setValue]); useEffect(() => { if (facilityName) { @@ -72,7 +72,7 @@ export function SdmInfoRegForm({ form.setValue("sdmNm", facilityName); setKey((prev) => prev + 1); } - }, [facilityName, form]); + }, [facilityName, form.setValue]); useEffect(() => { if (searchParams.get("dmdCoNm")) { @@ -80,7 +80,7 @@ export function SdmInfoRegForm({ setSdmNmValue(searchParams.get("dmdCoNm") || ""); setKey((prev) => prev + 1); } - }, [searchParams, form]); + }, [searchParams, form.setValue]); const searchCandidate = (e: React.MouseEvent) => { e.preventDefault();