ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge commit 'c80c9203d87967b71bc2868d7ee3dcd71a140f8f' into iipbs/wr/hasuReg

Browse Source
This commit is contained in:
leedj312
2025-06-12 20:16:19 +09:00
parent b1f108c485 c80c9203d8
commit 0382fe7c0a
8 changed files with 395 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/common/business_components/src/ui/chart/DoubleBar.tsx
+137
View File
@@ -0,0 +1,137 @@
"use client"
import { Bar, BarChart, CartesianGrid, Legend, XAxis, YAxis } from "recharts";
import {
ChartContainer,
ChartTooltip,
type ChartConfig
} from "./lib/chart";
import type { CSSProperties } from "react";
const customStyles = {
legendContainer: {
display: "flex",
justifyContent: "center",
gap: "20px",
fontSize: "9px",
fontWeight : "bold",
marginTop: "10px",
} as CSSProperties,
};
type BarChartProps = {
chartConfig: ChartConfig | undefined;
chartData: any[] | undefined;
chartTitle: string;
chartClassName?: string;
graphSize?: number;
yFieldText?: string;
showLegend?: boolean;
}
// 커스텀 툴팁
const CustomTooltip = ({
active,
payload,
label
}: {
active?: boolean;
payload?: Array<{
name: string;
value: number;
color: string;
}>;
label?: string;
}) => {
if (active && payload && payload.length) {
return (
<div className="w-[180px] rounded bg-white p-2.5 shadow-[0px_2px_10px_rgba(0,0,0,0.2)]">
<p className="text-[12px] font-bold m-3">{label}</p>
{payload.map((item, index) => (
<div key={index} style={{ marginTop: "10px", display: "flex", alignItems: "center", gap: "8px" }}>
{/* 색상 박스 추가 (범례 색상과 동일) */}
<div style={{ width: "10px", height: "10px", backgroundColor: item.color, borderRadius: "50%" }}></div>
<span className="text-[11px] font-bold">{` ${item.name} : ${item.value}`}</span>
</div>
))}
</div>
);
}
return null;
};
// 커스텀 범례 (글씨 크기 키우기 + 스타일 추가)
const CustomLegend = (props: any) => {
const { payload } = props;
return (
<div style={customStyles.legendContainer}>
{payload.map((entry: unknown, index: number) => (
<div key={`legend-${index}`} className="flex items-center gap-2">
<div className="w-[14px] h-[14px] ml-10" style={{ backgroundColor: (entry as {color: string}).color }}></div>
<span className="text-[12px]">{(entry as {value: string}).value}</span>
</div>
))}
</div>
);
};
export default function DoubleBarChart({chartConfig=undefined, chartData=[], chartTitle='차트', chartClassName='w-full h-full', graphSize=40, yFieldText='', showLegend=false} : BarChartProps) {
const colors = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#FFEEAD", "#D4A5A5"];
const getMaxValue = (data: any[], keyPrefix: string) => {
return Math.max(...data.map(item =>
Object.keys(item)
.filter(key => key.includes(keyPrefix))
.map(key => item[key])
).flat());
};
console.log(chartData);
const barMaxValue = getMaxValue(chartData, 'barVal');
return (
<>
{chartTitle && chartTitle !== "" && chartTitle !== "undefined" ? (
<div className="text-left text-[13px] font-bold mt-[13px] mb-[10px]">
{chartTitle}
</div>): null}
<div className="flex justify-center">
<ChartContainer config={chartConfig ?? {}} className={chartClassName + " !w-[90%]"}>
<BarChart accessibilityLayer data={chartData}>
<CartesianGrid vertical={false} />
<XAxis
dataKey="label"
tickLine={true}
tickMargin={10}
axisLine={true}
fontSize={13}
fontWeight={500}
/>
<YAxis
tickLine={true}
tickMargin={10}
tickCount={6}
axisLine={true}
fontSize={12}
fontWeight={500}
domain={[0, Math.ceil(barMaxValue * 1)]}
label={yFieldText ? { value: yFieldText, className:"text-[13px] font-bold", position: 'insideLeft', angle: -90, offset: 20 } : undefined}
/>
<ChartTooltip cursor={false} content={<CustomTooltip active={undefined} payload={undefined} label={undefined} />}/>
{chartData && chartData.length > 0 && (
Object.keys(chartData[0])
.filter(key => key !== "label")
.map((key, idx) => (
<Bar
dataKey={key}
radius={5}
key={key}
stackId="a"
barSize={graphSize}
fill={colors[idx]}
/>
))
)}
{showLegend && <Legend content={CustomLegend}/>}
</BarChart>
</ChartContainer>
</div>
</>
)
}
packages/common/business_components/src/ui/chart/DoughnutChart.tsx
+109 -16
View File
@@ -1,27 +1,116 @@
"use client"
import { Pie, PieChart } from "recharts";
import type { CSSProperties } from "react";
import {
Card,
CardContent
} from "./lib/card";
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
type ChartConfig
} from "./lib/chart";
import { ChartContainer, ChartTooltip } from "./lib/chart";
// eslint-disable-next-line react-refresh/only-export-components
export default (props: { chartConfig: ChartConfig; chartData: never[] | undefined; chartTitle:string}) =>{
type ChartDataItem = {
label: string;
val: number;
};
type ChartConfigItem = {
label: string;
fill: string;
};
type ChartConfig = {
[key: string]: ChartConfigItem;
};
type TooltipPayloadItem = {
name: string;
value: number;
payload: {
label: string;
val: number;
fill: string;
};
};
type LegendEntry = {
value: string;
fill: string;
type?: string;
payload: {
label: string;
val: number;
fill: string;
};
};
type LegendProps = {
payload?: LegendEntry[];
};
/** 차트 기본 스타일 */
const customStyles = {
legendContainer: {
display: "flex",
justifyContent: "center",
gap: "20px",
fontSize: "9px",
fontWeight: "bold",
marginTop: "10px",
} as CSSProperties,
};
// 커스텀 툴팁
const CustomTooltip = ({ active, payload, label }: {
active?: boolean;
payload?: TooltipPayloadItem[];
label?: string
}) => {
if (active && payload && payload.length) {
return (
<div className="w-[180px] rounded bg-white p-2.5 shadow-[0px_2px_10px_rgba(0,0,0,0.2)]">
<p className="text-[12px] font-bold m-3">{label}</p>
{payload.map((item, index) => (
<div key={index} style={{ marginTop: "10px", display: "flex", alignItems: "center", gap: "8px" }}>
<div style={{ width: "10px", height: "10px", backgroundColor: item.payload.fill, borderRadius: "50%" }}></div>
<span className="text-[11px] font-bold">{` ${item.name} : ${item.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`}</span>
</div>
))}
</div>
);
}
return null;
};
// 커스텀 범례
const CustomLegend = (props: LegendProps) => {
const { payload } = props;
if (!payload) return null;
return (
<div style={customStyles.legendContainer}>
{payload.map((entry: LegendEntry, index: number) => (
<div key={`legend-${index}`} className="flex items-center gap-2">
<div className="w-[14px] h-[14px] ml-10" style={{ backgroundColor: entry.fill }}></div>
<span className="text-[12px]">{entry.value}</span>
</div>
))}
</div>
);
};
export default function DoughnutChart(props: {
chartConfig: ChartConfig;
chartData: ChartDataItem[] | undefined;
chartTitle: string
}) {
return (
<Card className="flex flex-col">
<CardContent className="flex-1 pb-0">
{props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
<div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
{props.chartTitle}
</div>): null}
{props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
<div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
{props.chartTitle}
</div>
) : null}
<div className="h-[calc(100%-42px)] justify-center">
<ChartContainer
config={props.chartConfig}
@@ -30,18 +119,22 @@ export default (props: { chartConfig: ChartConfig; chartData: never[] | undefine
<PieChart>
<ChartTooltip
cursor={false}
content={<ChartTooltipContent hideLabel />}
content={<CustomTooltip />}
/>
<Pie
data={props.chartData}
data={props.chartData?.map(item => ({
...item,
fill: props.chartConfig[item.label]?.fill || 'blue'
}))}
dataKey="val"
nameKey="label"
innerRadius={60}
/>
<CustomLegend />
</PieChart>
</ChartContainer>
</div>
</CardContent>
</Card>
)
);
}
packages/common/business_components/src/ui/chart/LineBarChart.tsx
-3
View File
@@ -92,9 +92,6 @@ export default function LineBarchart({
return <div>데이터가 없습니다.</div>;
}
const barConfig = chartConfig?.barVal;
const lineConfig = chartConfig?.lineVal;
// 데이터의 최대값 계산
const getMaxValue = (data: any[], keyPrefix: string) => {
return Math.max(...data.map(item =>
packages/common/business_components/src/ui/chart/index.tsx
+8 -1
View File
@@ -5,6 +5,7 @@ import DoughnutChart from './DoughnutChart';
import { type ChartConfig } from './lib/chart';
import LineChart from './LineChart';
import LineBarchart from './LineBarChart';
import DoubleBarChart from './DoubleBar';
/**차트 FORM */
const CHART_FORM = {
@@ -15,7 +16,9 @@ const CHART_FORM = {
/**도넛 차트 형태*/
DN :'daughnut',
/**LINE,BAR차트 */
LINEBAR : 'linebar'
LINEBAR : 'linebar',
/**더블바 차트 형태*/
DOUBLEBAR : 'doublebar'
};
/**
@@ -61,6 +64,10 @@ function MainChart(props: MainChartProps) {
return (
<LineBarchart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle} chartClassName={props.chartClassName} graphSize={props.graphSize} yFieldText={props.yFieldText} yFieldText2={props.yFieldText2} showLegend={props.showLegend}/>
);
} else if (props.chartForm == CHART_FORM.DOUBLEBAR){
return (
<DoubleBarChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle} chartClassName={props.chartClassName} graphSize={props.graphSize} yFieldText={props.yFieldText} showLegend={props.showLegend}/>
);
}
}
packages/common/business_components/src/ui/form_ui/index.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ const FormUi = React.forwardRef<HTMLDivElement, FormUiProps>(
checked={isChecked}
onCheckedChange={handleCheckboxChange}
/>
<label className="w-20 text-xl text-gray-600" htmlFor="check">해당없음</label>
<label className="w-28 text-xl text-gray-600" htmlFor="check">해당없음</label>
</div>
</div>
{children}
packages/common/business_components/src/ui/sdmInsertForm/form.tsx
+111 -19
View File
@@ -2,10 +2,43 @@
import { SelectBox } from "../select";
import { Input } from "@common/components";
import { FormUi } from "../form_ui";
import { useCallback, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import type { ControllerRenderProps, UseFormReturn } from "react-hook-form";
import { SdmSearchForm } from "./sdmNameBox";
import type { DemandCompType } from "../../../../../../apps/dm/app/store/sdmMng";
import { set } from "date-fns";
// 수요처 정보
export type DemandCompType = {
index : number | '';
dmdInfoPk : string | '';
dmdInfoFk : string | '';
bzmnNo : string | '';
dmdCoNm : string | '';
daddr : string | '';
telno : string | '';
rgtr : string | '';
useUsgCd : string | '';
ctpvCd : string | '';
sggCd : string | '';
dmdAplyPswd : string | '';
wntUntprc : number | '';
dmndTmng : Date | '';
dmndQty : number | '';
grssClfg : number | '';
tn : number | '';
combResdch : number | '';
tph : number | '';
trbt : number | '';
ph : number | '';
blgcOxygDmndQnt : number | '';
clIonQnt : number | '';
smll : number | '';
cdtnv : number | '';
crmty : number | '';
rmrk : string | '';
reqDt : string | '';
}
type SelectDataType = {
text: string;
@@ -32,16 +65,19 @@ interface SdmRegFormProps {
dataList: DemandCompType[];
rtnValue: (searchText: string, pageCnt: number) => void;
setIsDuplicate: (value: boolean) => void;
updateList?:DemandCompType
}
type FieldComponent = (field: ControllerRenderProps<FormSchema, keyof FormSchema>) => JSX.Element;
export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigunData, dataList, rtnValue, setIsDuplicate }: SdmRegFormProps) {
export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigunData, dataList, rtnValue, setIsDuplicate ,updateList}: SdmRegFormProps) {
const [sidoValue, setSidoValue] = useState<string>('');
const [sigunValue, setSigunValue] = useState<string>('');
const [filteredSigunData, setFilteredSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(true);
const [orgBznmNo, setOrgBznmNo] = useState<string>('');
const [updateCoNm, setUpdateNm] = useState<string >('')
const initializeSigunData = useCallback((sidoCd: string) => {
if (sidoCd === '0') {
@@ -62,6 +98,7 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
type: string,
field: ControllerRenderProps<FormSchema, keyof FormSchema> | undefined
) => {
if(!updateList?.dmdInfoPk)
switch (type) {
case "ctpvCd":
initializeSigunData(val);
@@ -77,7 +114,7 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
form.setValue('bznmTotNo', '');
break;
}
}, [initializeSigunData, form]);
}, [initializeSigunData, form,updateList]);
const handleCheckboxChange = useCallback((checked: boolean) => {
setIsBznmTotNoDisabled(checked);
@@ -90,6 +127,7 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
const setRtnData = useCallback((item: DemandCompType) => {
const rtnCompData = item;
form.setValue('dmdCoNm', rtnCompData?.dmdCoNm || '');
form.setValue('dmdInfoPk', rtnCompData?.dmdInfoPk.substring(0,10) || '');
form.setValue('bznmTotNo', rtnCompData?.dmdInfoPk.substring(10,14)==='0000' ? '' : rtnCompData?.dmdInfoPk.substring(10,14));
@@ -124,26 +162,46 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
form.setValue('dmdCoNm', text);
}, [form]);
const bznNoChange = useCallback((e: React.ChangeEvent<HTMLInputElement>, noType: string) => {
const bznNoChange = useCallback((e: React.ChangeEvent<HTMLInputElement>, noType: string, field?: ControllerRenderProps<FormSchema, keyof FormSchema>) => {
const value = e.target.value;
if(noType === 'dmdInfoPk') {
if(orgBznmNo.substring(0,10) === value) {
setIsDuplicate(true);
} else {
setIsDuplicate(false);
}
form.setValue('dmdInfoPk', value);
field?.onChange(value);
} else {
if(orgBznmNo.substring(10,14) === value) {
setIsDuplicate(true);
} else {
setIsDuplicate(false);
}
form.setValue('bznmTotNo', value);
field?.onChange(value);
}
}, [orgBznmNo, setIsDuplicate]);
}, [form, orgBznmNo, setIsDuplicate]);
useEffect(() => {
if(updateList?.dmdInfoPk){
form.reset(updateList)
if(updateList?.dmdInfoPk.slice(10,14) !== '0000') {
handleCheckboxChange( false);
form.setValue('bznmTotNo', updateList?.dmdInfoPk.slice(10,14));
} else {
handleCheckboxChange( true);
}
form.setValue('dmdInfoPk', updateList?.dmdInfoPk.slice(0,10));
setUpdateNm(updateList?.dmdCoNm)
// setSigunValue(updateList?.sggCd)
}else{
handleCheckboxChange( true);
}
}, [updateList,form]);
useEffect(() => {
},[form.formState.errors])
const formFields: Array<{
name: keyof FormSchema;
@@ -154,28 +212,51 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
name: "ctpvCd",
label: "시도",
component: (field) => (
<SelectBox
updateList?.dmdInfoPk ? (
<Input
placeholder="시도"
type="text"
className="!text-xl text-gray-600"
onChange={(e) =>{field.onChange(e.target.value)} }
value={ selectSidoData.find(item => item.val === field.value?.trim() )?.text??''}
readOnly={!!updateList?.dmdInfoPk}
/>
) : (
<SelectBox
selectClass={undefined}
label=""
selectArray={selectSidoData}
onSelectValue={(val) => onSelectValue(val.toString(), 'ctpvCd', field)}
onSelectValue={(val) => onSelectValue(val.toString(), 'ctpvCd', field??'')}
className=""
value={sidoValue}
/>
)
)
},
{
name: "sggCd",
label: "시군구",
component: (field) => (
updateList?.dmdInfoPk ? (
<Input
placeholder="시도"
type="text"
className="!text-xl text-gray-600"
onChange={(e) =>{field.onChange(e.target.value)} }
value={selectSigunData.find(item => item.val === field.value?.trim() )?.text??''}
readOnly={!!updateList?.dmdInfoPk}
/>
) : (
<SelectBox
selectClass={undefined}
selectClass={"!text-xl text-gray-600"}
label=""
selectArray={filteredSigunData}
onSelectValue={(val) => onSelectValue(val.toString(), 'sggCd', field)}
className=""
value={sigunValue}
/>
)
)
},
{
@@ -185,7 +266,7 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
<SdmSearchForm
rtnData={setRtnData}
label="수요처명"
initValue={''}
initValue={updateCoNm}
dataList={dataList}
rtnValue={setRtnValue}
rtnText={setRtnText}
@@ -201,8 +282,9 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
placeholder="사업자등록번호를 입력하세요"
type="text"
className="!text-xl text-gray-600"
{...field}
onChange={(e) => bznNoChange(e, 'dmdInfoPk')}
onChange={(e) => bznNoChange(e, 'dmdInfoPk', field)}
value={field.value}
readOnly={!!updateList?.dmdInfoPk}
/>
)
},
@@ -220,8 +302,10 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
type="text"
className="!mt-5 !text-xl text-gray-600"
disabled={isBznmTotNoDisabled}
{...field}
onChange={(e) => bznNoChange(e, 'bznmTotNo')}
onChange={(e) => bznNoChange(e, 'bznmTotNo', field)}
// {...field}
value={ field.value}
readOnly={!!updateList?.dmdInfoPk}
/>
</FormUi>
)
@@ -250,6 +334,7 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
/>
)
},
{
name: "dmdAplyPswd",
label: "패스워드",
@@ -262,11 +347,18 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun
/>
)
}
];
]
return (
<>
{formFields.map(({ name, label, component }) => (
{formFields.filter((item)=>
{if(updateList?.dmdInfoPk){
return item.name !== 'dmdAplyPswd'
}else{
return item
}
})
.map(({ name, label, component }) => (
<FormField
key={String(name)}
control={form.control}
packages/common/business_components/src/ui/sdmInsertForm/index.tsx
+22 -47
View File
@@ -1,32 +1,14 @@
"use client";
/* import { useDmStore } from "@/app/store"; */
import { SdmRegForm } from "./form";
import { SdmRegForm, type DemandCompType } from "./form";
import { Button } from "@common/components/ui";
import { zodResolver } from "@hookform/resolvers/zod";
/* import { useRouter } from "next/navigation"; */
import { useCallback, useEffect, useState } from "react";
import { FormProvider, useForm, type SubmitHandler } from "react-hook-form";
import { toast, Toaster } from "sonner";
/* import { Toaster, toast } from "react-hot-toast"; */
import * as z from "zod";
import type { SelectDataType } from "../search_input_select";
export type DemandCompType = {
dmdInfoPk : string | '';
bzmnNo : string | '';
dmdCoNm : string | '';
daddr : string | '';
telno : string | '';
rgtr : string | '';
useUsgCd : string | '';
ctpvCd : string | '';
sggCd : string | '';
dmdAplyPswd: string | '';
}
type thisProps = {
selectSidoData: SelectDataType[];
selectSigunData: SelectDataType[];
@@ -34,9 +16,10 @@ type thisProps = {
rtnValue: (searchText: string, pageCnt: number) => void;
rtnInputData: (data: DemandCompType) => void;
bodyClassNm?: string;
updateList?:DemandCompType
}
const createFormSchema = (isBznmTotNoDisabled: boolean, isDuplicate: boolean) => z.object({
const createFormSchema = (isBznmTotNoDisabled: boolean, isDuplicate: boolean ,updateList?:DemandCompType) => z.object({
ctpvCd: z.string().min(1, "시/도를 선택해주세요"),
sggCd: z.string().min(1, "시/군/구를 선택해주세요"),
dmdCoNm: z.string()
@@ -57,19 +40,19 @@ const createFormSchema = (isBznmTotNoDisabled: boolean, isDuplicate: boolean) =>
.max(40, "주소는 40자 이내로 입력해주세요"),
telno: z.string()
.min(8, "전화번호는 8자 이상 입력해주세요")
.max(12, "전화번호는 12자 이내로 입력해주세요")
.max(11, "전화번호는 11자 이내로 입력해주세요")
.regex(/^[0-9-]+$/, "전화번호는 숫자와 하이픈(-)만 입력 가능합니다"),
rgtr: z.string().optional(),
dmdAplyPswd : z.string()
.min(1, "패스워드를 입력해주세요")
.min(8, "패스워드는 8자 이상 입력해주세요")
.max(16, "패스워드는 16자 이내로 입력해주세요"),
dmdAplyPswd : updateList?.dmdInfoPk // 업데이트일경우
? z.string().optional() // 패스워드는 선택 사항이며 길이 제한 없음
: z.string().optional()
.refine((val) => !val || (val.length >= 8 && val.length <= 16), "패스워드는 8자 이상 16자 이내로 입력해주세요"),
});
type FormSchema = ReturnType<typeof createFormSchema>;
export type FormData = z.infer<FormSchema>;
type FormSchema = z.infer<ReturnType<typeof createFormSchema>>;
const defaultValues: FormData = {
const defaultValues: FormSchema = {
ctpvCd: '',
sggCd: '',
dmdCoNm: '',
@@ -78,7 +61,7 @@ const defaultValues: FormData = {
daddr: '',
telno: '',
rgtr: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
dmdAplyPswd : '',
dmdAplyPswd: '',
};
/**
@@ -117,15 +100,15 @@ const defaultValues: FormData = {
}, [insertSdmData]);
*/
export default function SdmInsertForm({selectSidoData, selectSigunData, dataList, rtnValue, rtnInputData,bodyClassNm}: thisProps) {
export default function SdmInsertForm({selectSidoData, selectSigunData, dataList, rtnValue, rtnInputData,bodyClassNm, updateList}: thisProps) {
/* const { insertSdmData } = useDmStore((state) => state);
const router = useRouter(); */
const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(true);
const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(false);
const [isDuplicate, setIsDuplicate] = useState(false);
const formSchema = createFormSchema(isBznmTotNoDisabled, isDuplicate);
const formSchema = createFormSchema(isBznmTotNoDisabled, isDuplicate, updateList );
const form = useForm<z.infer<FormSchema>>({
const form = useForm<FormSchema>({
resolver: zodResolver(formSchema),
defaultValues,
mode: "onChange",
@@ -136,7 +119,7 @@ export default function SdmInsertForm({selectSidoData, selectSigunData, dataList
// 체크박스 상태가 변경될 때마다 bznmTotNo 필드의 에러를 초기화
useEffect(() => {
if (isBznmTotNoDisabled) {
if (isBznmTotNoDisabled===true) {
form.clearErrors('bznmTotNo');
form.setValue('bznmTotNo', '');
}
@@ -146,7 +129,7 @@ export default function SdmInsertForm({selectSidoData, selectSigunData, dataList
rtnValue(searchText, pageCnt);
}, [rtnValue]);
const onSubmit: SubmitHandler<z.infer<FormSchema>> = async (data) => {
const onSubmit: SubmitHandler<FormSchema> = async (data) => {
try {
// form 에러 체크
const formErrors = form.formState.errors;
@@ -160,27 +143,18 @@ export default function SdmInsertForm({selectSidoData, selectSigunData, dataList
const formData = {
...data,
dmdInfoPk,
bzmnNo: data.dmdInfoPk,
};
console.log(' formData ', formData)
console.log(formData);
/* await insertSdmData(formData); */
rtnInputData(formData as DemandCompType);
const queryParams = new URLSearchParams({
dmdCoNm: data.dmdCoNm,
ctpvCd: data.ctpvCd,
sggCd: data.sggCd,
dmdInfoPk,
bznmTotNo: data.bznmTotNo || '',
daddr: data.daddr,
telno: data.telno,
});
//router.push(`/pages/sdmMng/sdmInfoInsert?${queryParams.toString()}`);
toast.success('수요처가 성공적으로 등록되었습니다.');
} catch (error) {
console.error('Error submitting form:', error);
toast.error('수요처 등록에 실패했습니다.');
}
};
@@ -203,6 +177,7 @@ export default function SdmInsertForm({selectSidoData, selectSigunData, dataList
dataList={dataList}
rtnValue={setRtnValue}
setIsDuplicate={setIsDuplicate}
updateList={updateList}
/>
<div className="flex justify-center pt-4">
<Button
packages/common/business_components/src/ui/sdmInsertForm/sdmNameBox.tsx
+7 -1
View File
@@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useRef, useState } from 'react';
import type { DemandCompType } from "../../../../../../apps/dm/app/store/sdmMng";
import type { DemandCompType } from './form';
export type thisProps = {
label: string | undefined;
@@ -53,6 +53,12 @@ export const SdmSearchForm = ({label=undefined, initValue=undefined, rtnValue=()
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
useEffect(() => {
if(initValue&& initValue?.length>0){
setTextValue(initValue)
}
},[initValue])
return (
<div ref={wrapperRef}>