From 67659bd16ffcc162f033802bbcd2762f27e37ff3 Mon Sep 17 00:00:00 2001 From: leedj312 Date: Mon, 2 Jun 2025 11:02:43 +0900 Subject: [PATCH 01/18] =?UTF-8?q?=ED=8C=8C=EC=9D=BC=ED=81=B4=EB=A6=AD=20?= =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=82=BD=EC=9E=85(=EC=9D=B8?= =?UTF-8?q?=EB=8D=B1=EC=8A=A4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/file-upload/lib/file_upload.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/common/business_components/src/ui/file-upload/lib/file_upload.tsx b/packages/common/business_components/src/ui/file-upload/lib/file_upload.tsx index 3fe1aafd8..b73bcb886 100644 --- a/packages/common/business_components/src/ui/file-upload/lib/file_upload.tsx +++ b/packages/common/business_components/src/ui/file-upload/lib/file_upload.tsx @@ -303,9 +303,7 @@ export const FileUploaderItem = forwardRef< >
{ - - + onClick={() =>{onFileClick?.(index) }}> {children}
From aedb173ba7d27c31ad73d28d35b2761cf7976941 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Mon, 2 Jun 2025 11:15:19 +0900 Subject: [PATCH 02/18] =?UTF-8?q?=EC=88=98=EC=9A=94=EC=B2=98=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EA=B3=B5=ED=86=B5=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20=EB=B9=BC=EB=8A=94=20=EC=9E=91=EC=97=85=20?= =?UTF-8?q?=EC=A7=84=ED=96=89=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/form_ui/index.tsx | 10 ++- .../business_components/src/ui/index.ts | 2 +- .../src/ui/sdmSearchForm/index.tsx | 85 +++++++++++++++++++ 3 files changed, 93 insertions(+), 4 deletions(-) create mode 100644 packages/common/business_components/src/ui/sdmSearchForm/index.tsx diff --git a/packages/common/business_components/src/ui/form_ui/index.tsx b/packages/common/business_components/src/ui/form_ui/index.tsx index b834d5515..de4b37f61 100644 --- a/packages/common/business_components/src/ui/form_ui/index.tsx +++ b/packages/common/business_components/src/ui/form_ui/index.tsx @@ -1,5 +1,5 @@ import { Checkbox } from "@common/components/ui"; -import React, { useCallback, useState } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import { FormControl, FormItem, FormLabel, FormMessage } from "../form"; export const BZNM_TOT_NO = '종사업자등록번호'; @@ -17,7 +17,11 @@ interface FormElementProps extends React.HTMLAttributes { const FormUi = React.forwardRef( ({ children, label, onCheckboxChange, isDisabled }, ref) => { - const [isChecked, setIsChecked] = useState(false); + const [isChecked, setIsChecked] = useState(isDisabled); + + useEffect(() => { + setIsChecked(isDisabled); + }, [isDisabled]); const handleCheckboxChange = useCallback((checked: boolean) => { setIsChecked(checked); @@ -50,7 +54,7 @@ const FormUi = React.forwardRef( {React.isValidElement(children) && isDisabled ? React.cloneElement(children, { - disabled: true, + disabled: isDisabled, ...(children.props as FormElementProps) }) : children} diff --git a/packages/common/business_components/src/ui/index.ts b/packages/common/business_components/src/ui/index.ts index 90bf029c0..606852d1e 100644 --- a/packages/common/business_components/src/ui/index.ts +++ b/packages/common/business_components/src/ui/index.ts @@ -19,4 +19,4 @@ export * from "./tab"; export * from "./table"; export * from "./table_div"; export * from "./title"; - +export * from "./sdmSearchForm"; \ No newline at end of file diff --git a/packages/common/business_components/src/ui/sdmSearchForm/index.tsx b/packages/common/business_components/src/ui/sdmSearchForm/index.tsx new file mode 100644 index 000000000..89edc233c --- /dev/null +++ b/packages/common/business_components/src/ui/sdmSearchForm/index.tsx @@ -0,0 +1,85 @@ +import React, { useCallback, useEffect, useRef, useState } from 'react'; + +type thisProps = { + label: string | undefined; + initValue: string | undefined; + setRtnData : (rtnData: any[]) => void; +} + +export default function SdmSearchForm({label=undefined, initValue=undefined, setRtnData=()=>{}} :thisProps) { + + /* const { getDemandCompList, Sdm } = useDmStore((state) => state); + + const { + demandCompList + } = Sdm; */ + + const [isOpen, setIsOpen] = useState(false); + const [textValue, setTextValue] = useState(initValue || ''); + const wrapperRef = useRef(null); + const handleInputChange = useCallback((e: React.ChangeEvent) => { + const value = e.target.value; + setTextValue(value); + if (value) { + setIsOpen(true); + } else { + setIsOpen(false); + } + }, []); + + /* const handleSuggestionClick = useCallback((dmdCoNm: string) => { + setTextValue(dmdCoNm); + }, []); */ + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) { + setIsOpen(false); + } + }; + + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, []); + + return ( +
+ setIsOpen(true)} */ + className="w-full h-[3.2rem] !text-xl pl-3 text-gray-600 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + placeholder={`${label}을(를) 입력하세요`} + /> + {isOpen && ( +
+
+ {/* {demandCompList && demandCompList.length > 0 ? demandCompList.map((item : DemandCompType, index : number) => ( +
handleSuggestionClick(item.dmdCoNm)} + role="button" + tabIndex={0} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + handleSuggestionClick(item.dmdCoNm); + } + }} + > + {item.dmdInfoPk.substring(0,10)} {item.dmdCoNm} +
+ )) : ( */} +
+ 검색 결과가 없습니다. +
+ {/* )) : ( */} +
+
+ )} +
+ ) +} \ No newline at end of file From 1eef53fe7dcd6605137b2db80f738df4bf586c72 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Mon, 2 Jun 2025 11:16:48 +0900 Subject: [PATCH 03/18] =?UTF-8?q?=EC=88=98=EC=9A=94=EC=B2=98=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EA=B3=B5=ED=86=B5=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20=EB=B9=BC=EB=8A=94=20=EC=9E=91=EC=97=85=20?= =?UTF-8?q?=EC=A7=84=ED=96=89=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/business_components/src/ui/sdmSearchForm/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/common/business_components/src/ui/sdmSearchForm/index.tsx b/packages/common/business_components/src/ui/sdmSearchForm/index.tsx index 89edc233c..a724d1d97 100644 --- a/packages/common/business_components/src/ui/sdmSearchForm/index.tsx +++ b/packages/common/business_components/src/ui/sdmSearchForm/index.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; -type thisProps = { +export type thisProps = { label: string | undefined; initValue: string | undefined; setRtnData : (rtnData: any[]) => void; From feb5711ad438c3640d9e6ab6bccfc393778f2613 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Mon, 2 Jun 2025 11:25:31 +0900 Subject: [PATCH 04/18] =?UTF-8?q?export=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/business_components/src/ui/sdmSearchForm/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/common/business_components/src/ui/sdmSearchForm/index.tsx b/packages/common/business_components/src/ui/sdmSearchForm/index.tsx index a724d1d97..62009826e 100644 --- a/packages/common/business_components/src/ui/sdmSearchForm/index.tsx +++ b/packages/common/business_components/src/ui/sdmSearchForm/index.tsx @@ -6,7 +6,7 @@ export type thisProps = { setRtnData : (rtnData: any[]) => void; } -export default function SdmSearchForm({label=undefined, initValue=undefined, setRtnData=()=>{}} :thisProps) { +export const SdmSearchForm = ({label=undefined, initValue=undefined, setRtnData=()=>{}} :thisProps) => { /* const { getDemandCompList, Sdm } = useDmStore((state) => state); From b96207cced396af35ee526e0883c1f2a0b2b16ab Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Tue, 3 Jun 2025 17:01:43 +0900 Subject: [PATCH 05/18] =?UTF-8?q?=EC=88=98=EC=9A=94=EC=B2=98=20=EB=93=B1?= =?UTF-8?q?=EB=A1=9D=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=A7=8C=EB=93=9C=EB=8A=94=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_components/src/ui/index.ts | 2 +- .../src/ui/sdmInsertForm/form.tsx | 246 ++++++++++++++++++ .../src/ui/sdmInsertForm/index.tsx | 164 ++++++++++++ .../sdmNameBox.tsx} | 46 ++-- 4 files changed, 439 insertions(+), 19 deletions(-) create mode 100644 packages/common/business_components/src/ui/sdmInsertForm/form.tsx create mode 100644 packages/common/business_components/src/ui/sdmInsertForm/index.tsx rename packages/common/business_components/src/ui/{sdmSearchForm/index.tsx => sdmInsertForm/sdmNameBox.tsx} (68%) diff --git a/packages/common/business_components/src/ui/index.ts b/packages/common/business_components/src/ui/index.ts index 606852d1e..0986f7953 100644 --- a/packages/common/business_components/src/ui/index.ts +++ b/packages/common/business_components/src/ui/index.ts @@ -19,4 +19,4 @@ export * from "./tab"; export * from "./table"; export * from "./table_div"; export * from "./title"; -export * from "./sdmSearchForm"; \ No newline at end of file +export * from "./sdmInsertForm/sdmNameBox"; \ No newline at end of file diff --git a/packages/common/business_components/src/ui/sdmInsertForm/form.tsx b/packages/common/business_components/src/ui/sdmInsertForm/form.tsx new file mode 100644 index 000000000..6d3219468 --- /dev/null +++ b/packages/common/business_components/src/ui/sdmInsertForm/form.tsx @@ -0,0 +1,246 @@ +import { FormField } from "../form"; +import { SelectBox } from "../select"; +import { Input } from "@common/components"; +import { FormUi } from "../form_ui"; +import { useCallback, useState } from "react"; +import type { ControllerRenderProps, UseFormReturn } from "react-hook-form"; +import { SdmSearchForm } from "./sdmNameBox"; +import type { DemandCompType } from "../../../../../../apps/dm/app/store/sdmMng"; + +type SelectDataType = { + text: string; + val: string; +}; + +interface FormSchema { + ctpvCd: string; + sggCd: string; + dmdCoNm: string; + dmdInfoPk: string; + daddr: string; + telno: string; + bznmTotNo?: string; + rgtr?: string; +} + +interface SdmRegFormProps { + form: UseFormReturn; + onCheckboxChange?: (checked: boolean) => void; + selectSidoData: SelectDataType[]; + selectSigunData: SelectDataType[]; + dataList: DemandCompType[]; + rtnValue: (searchText: string, pageCnt: number) => void; + setIsDuplicate: (value: boolean) => void; +} + +type FieldComponent = (field: ControllerRenderProps) => JSX.Element; + +export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigunData, dataList, rtnValue, setIsDuplicate }: SdmRegFormProps) { + const [sidoValue, setSidoValue] = useState(''); + const [sigunValue, setSigunValue] = useState(''); + const [filteredSigunData, setFilteredSigunData] = useState([{ text: "전체", val: '0' }]); + const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(true); + + const initializeSigunData = useCallback((sidoCd: string) => { + if (sidoCd === '0') { + setSigunValue('0'); + setFilteredSigunData([{ text: "전체", val: '0' }]); + } else { + const newFilteredData = [ + { text: "전체", val: '0' }, + ...selectSigunData.filter((item: SelectDataType) => item.val.substring(0, 2) === sidoCd) + ]; + setSigunValue('0'); + setFilteredSigunData(newFilteredData); + } + }, [selectSigunData]); + + const onSelectValue = useCallback(( + val: string, + type: string, + field: ControllerRenderProps | undefined + ) => { + switch (type) { + case "ctpvCd": + initializeSigunData(val); + setSidoValue(val); + field?.onChange(val); + form.setValue('dmdInfoPk', ''); + form.setValue('bznmTotNo', ''); + break; + case "sggCd": + setSigunValue(val); + field?.onChange(val); + form.setValue('dmdInfoPk', ''); + form.setValue('bznmTotNo', ''); + break; + } + }, [initializeSigunData, form]); + + const handleCheckboxChange = useCallback((checked: boolean) => { + setIsBznmTotNoDisabled(checked); + onCheckboxChange?.(checked); + }, [onCheckboxChange]); + + const setRtnValue = useCallback((searchText: string, pageCnt: number) => { + rtnValue(searchText, pageCnt); + }, [rtnValue]); + + 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)); + + const sidoCd = rtnCompData?.ctpvCd.trim() || ''; + setSidoValue(sidoCd); + form.setValue('ctpvCd', sidoCd); + initializeSigunData(sidoCd); + + setTimeout(() => { + const sigunCd = rtnCompData?.sggCd.trim() || ''; + setSigunValue(sigunCd); + form.setValue('sggCd', sigunCd); + }, 100); + + if(rtnCompData?.dmdInfoPk.substring(10,14) === '0000') { + handleCheckboxChange(true); + } else { + handleCheckboxChange(false); + } + + form.setValue('daddr', rtnCompData?.daddr || ''); + form.setValue('telno', rtnCompData?.telno || ''); + + // 선택을 했을 때 중복 상태를 true로 설정 + setIsDuplicate(true); + }, [form, handleCheckboxChange, initializeSigunData, setIsDuplicate]); + + const setRtnText = useCallback((text: string) => { + form.setValue('dmdCoNm', text); + }, [form]); + + const formFields: Array<{ + name: keyof FormSchema; + label: string; + component: FieldComponent; + }> = [ + { + name: "ctpvCd", + label: "시도", + component: (field) => ( + onSelectValue(val.toString(), 'ctpvCd', field)} + className="" + value={sidoValue} + /> + ) + }, + { + name: "sggCd", + label: "시군구", + component: (field) => ( + onSelectValue(val.toString(), 'sggCd', field)} + className="" + value={sigunValue} + /> + ) + }, + { + name: "dmdCoNm", + label: "회사명", + component: (field) => ( + + ) + }, + { + name: "dmdInfoPk", + label: "사업자등록번호", + component: (field) => ( + + ) + }, + { + name: "bznmTotNo", + label: "종사업자등록번호", + component: (field) => ( + + + + ) + }, + { + name: "daddr", + label: "사업자주소", + component: (field) => ( + + ) + }, + { + name: "telno", + label: "전화번호", + component: (field) => ( + + ) + } + ]; + + return ( + <> + {formFields.map(({ name, label, component }) => ( + ( + name === 'bznmTotNo' ? component(field) : ( + + {component(field)} + + ) + )} + /> + ))} + + ); +} \ No newline at end of file diff --git a/packages/common/business_components/src/ui/sdmInsertForm/index.tsx b/packages/common/business_components/src/ui/sdmInsertForm/index.tsx new file mode 100644 index 000000000..4a972180a --- /dev/null +++ b/packages/common/business_components/src/ui/sdmInsertForm/index.tsx @@ -0,0 +1,164 @@ +"use client"; + +/* import { useDmStore } from "@/app/store"; */ +import { SdmRegForm } from "./form"; +import type { DemandCompType } from "../../../../../../apps/dm/app/store/sdmMng"; +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"; + +type thisProps = { + selectSidoData: SelectDataType[]; + selectSigunData: SelectDataType[]; + dataList: DemandCompType[]; + rtnValue: (searchText: string, pageCnt: number) => void; + rtnInputData: (data: DemandCompType) => void; +} + +const createFormSchema = (isBznmTotNoDisabled: boolean, isDuplicate: boolean) => z.object({ + ctpvCd: z.string().min(1, "시/도를 선택해주세요"), + sggCd: z.string().min(1, "시/군/구를 선택해주세요"), + dmdCoNm: z.string() + .min(1, "회사명을 입력해주세요") + .max(20, "회사명은 20자 이내로 입력해주세요"), + dmdInfoPk: z.string() + .min(1, "사업자등록번호를 입력해주세요") + .regex(/^\d{10}$/, "사업자등록번호는 10자리 숫자만 입력 가능합니다") + .refine(() => !isDuplicate, "이미 등록된 사업자등록번호입니다"), + bznmTotNo: isBznmTotNoDisabled + ? z.string().optional() + : z.string() + .length(4, "종사업자등록번호는 4자리 숫자만 입력 가능합니다"), + daddr: z.string() + .min(1, "주소를 입력해주세요") + .min(6, "주소는 6자 이상 입력해주세요") + .max(40, "주소는 40자 이내로 입력해주세요"), + telno: z.string() + .min(8, "전화번호는 8자 이상 입력해주세요") + .max(12, "전화번호는 12자 이내로 입력해주세요") + .regex(/^[0-9-]+$/, "전화번호는 숫자와 하이픈(-)만 입력 가능합니다"), + rgtr: z.string().optional(), +}); + +type FormSchema = ReturnType; +export type FormData = z.infer; + +const defaultValues: FormData = { + ctpvCd: '', + sggCd: '', + dmdCoNm: '', + dmdInfoPk: '', + bznmTotNo: '', + daddr: '', + telno: '', + rgtr: "3fa85f64-5717-4562-b3fc-2c963f66afa6", +}; + +export default function SdmInsertForm({selectSidoData, selectSigunData, dataList, rtnValue, rtnInputData}: thisProps) { + /* const { insertSdmData } = useDmStore((state) => state); + const router = useRouter(); */ + + const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(true); + const [isDuplicate, setIsDuplicate] = useState(false); + const formSchema = createFormSchema(isBznmTotNoDisabled, isDuplicate); + + const form = useForm>({ + resolver: zodResolver(formSchema), + defaultValues, + mode: "onChange", + criteriaMode: "all", + shouldFocusError: false, + shouldUnregister: false + }); + + // 체크박스 상태가 변경될 때마다 bznmTotNo 필드의 에러를 초기화 + useEffect(() => { + if (isBznmTotNoDisabled) { + form.clearErrors('bznmTotNo'); + form.setValue('bznmTotNo', ''); + } + }, [isBznmTotNoDisabled, form]); + + const setRtnValue = useCallback((searchText: string, pageCnt: number) => { + rtnValue(searchText, pageCnt); + }, [rtnValue]); + + const onSubmit: SubmitHandler> = async (data) => { + try { + // form 에러 체크 + const formErrors = form.formState.errors; + if (Object.keys(formErrors).length > 0) { + const errorMessage = Object.values(formErrors)[0]?.message || '입력값을 확인해주세요.'; + toast.error(errorMessage); + return; + } + + const dmdInfoPk = data.dmdInfoPk + (data.bznmTotNo || '0000'); + const formData = { + ...data, + dmdInfoPk, + }; + + 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('수요처 등록에 실패했습니다.'); + } + }; + + return ( + <> +
+

+ 수요처등록 +

+
+ +
+ +
+ +
+ +
+ +
+
+ + + ); +} \ No newline at end of file diff --git a/packages/common/business_components/src/ui/sdmSearchForm/index.tsx b/packages/common/business_components/src/ui/sdmInsertForm/sdmNameBox.tsx similarity index 68% rename from packages/common/business_components/src/ui/sdmSearchForm/index.tsx rename to packages/common/business_components/src/ui/sdmInsertForm/sdmNameBox.tsx index 62009826e..18d048692 100644 --- a/packages/common/business_components/src/ui/sdmSearchForm/index.tsx +++ b/packages/common/business_components/src/ui/sdmInsertForm/sdmNameBox.tsx @@ -1,18 +1,24 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; +import type { DemandCompType } from "../../../../../../apps/dm/app/store/sdmMng"; export type thisProps = { label: string | undefined; initValue: string | undefined; - setRtnData : (rtnData: any[]) => void; + dataList : DemandCompType[]; + rtnValue : (searchText: string, pageCnt: number) => void; + rtnData : (item: DemandCompType) => void; + rtnText : (text: string) => void; } -export const SdmSearchForm = ({label=undefined, initValue=undefined, setRtnData=()=>{}} :thisProps) => { - - /* const { getDemandCompList, Sdm } = useDmStore((state) => state); - - const { - demandCompList - } = Sdm; */ +/** + * 수요처 검색 컴포넌트 + * @param label 라벨 + * @param initValue 초기값 + * @param rtnValue 검색 결과 반환 함수 + * @param dataList 검색할 때 넘기는 데이터 리스트 + * @param rtnData 검색 결과 반환 함수 + */ +export const SdmSearchForm = ({label=undefined, initValue=undefined, rtnValue=()=>{}, dataList=[], rtnData=()=>{}, rtnText=()=>{} } :thisProps) => { const [isOpen, setIsOpen] = useState(false); const [textValue, setTextValue] = useState(initValue || ''); @@ -20,16 +26,20 @@ export const SdmSearchForm = ({label=undefined, initValue=undefined, setRtnData= const handleInputChange = useCallback((e: React.ChangeEvent) => { const value = e.target.value; setTextValue(value); + rtnValue(value, 10); + rtnText(value); if (value) { setIsOpen(true); } else { setIsOpen(false); } - }, []); + }, [rtnValue, rtnText]); - /* const handleSuggestionClick = useCallback((dmdCoNm: string) => { - setTextValue(dmdCoNm); - }, []); */ + const handleSuggestionClick = useCallback((item: DemandCompType) => { + setTextValue(item.dmdCoNm); + rtnData(item); + setIsOpen(false); + }, [rtnData]); useEffect(() => { const handleClickOutside = (event: MouseEvent) => { @@ -43,7 +53,7 @@ export const SdmSearchForm = ({label=undefined, initValue=undefined, setRtnData= document.removeEventListener('mousedown', handleClickOutside); }; }, []); - + return (
- {/* {demandCompList && demandCompList.length > 0 ? demandCompList.map((item : DemandCompType, index : number) => ( + {dataList && dataList.length > 0 ? dataList.map((item : DemandCompType, index : number) => (
handleSuggestionClick(item.dmdCoNm)} + onClick={() => handleSuggestionClick(item)} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { - handleSuggestionClick(item.dmdCoNm); + handleSuggestionClick(item); } }} > {item.dmdInfoPk.substring(0,10)} {item.dmdCoNm}
- )) : ( */} + )) : (
검색 결과가 없습니다.
- {/* )) : ( */} + )}
)} From 40f26c77673f68933c33da2124c885affb6e0dd6 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Wed, 4 Jun 2025 11:05:02 +0900 Subject: [PATCH 06/18] =?UTF-8?q?-=EC=88=98=EC=9A=94=EC=B2=98=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EC=9E=85=EB=A0=A5=ED=8F=BC=20=EA=B3=B5=ED=86=B5?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9E=91=EC=97=85?= =?UTF-8?q?=EC=A7=84=ED=96=89=EC=A4=91(=ED=8C=A8=EC=8A=A4=EC=9B=8C?= =?UTF-8?q?=EB=93=9C=EB=A7=8C=20=EB=82=A8=EC=9D=8C)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/sdmInsertForm/form.tsx | 43 ++++++++++++++++++- .../src/ui/sdmInsertForm/index.tsx | 20 ++++++++- .../src/ui/sdmInsertForm/sdmNameBox.tsx | 12 +++++- 3 files changed, 71 insertions(+), 4 deletions(-) diff --git a/packages/common/business_components/src/ui/sdmInsertForm/form.tsx b/packages/common/business_components/src/ui/sdmInsertForm/form.tsx index 6d3219468..d59108c5b 100644 --- a/packages/common/business_components/src/ui/sdmInsertForm/form.tsx +++ b/packages/common/business_components/src/ui/sdmInsertForm/form.tsx @@ -21,6 +21,7 @@ interface FormSchema { telno: string; bznmTotNo?: string; rgtr?: string; + dmdAplyPswd?: string; } interface SdmRegFormProps { @@ -40,7 +41,8 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun const [sigunValue, setSigunValue] = useState(''); const [filteredSigunData, setFilteredSigunData] = useState([{ text: "전체", val: '0' }]); const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(true); - + const [orgBznmNo, setOrgBznmNo] = useState(''); + const initializeSigunData = useCallback((sidoCd: string) => { if (sidoCd === '0') { setSigunValue('0'); @@ -92,6 +94,8 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun form.setValue('dmdInfoPk', rtnCompData?.dmdInfoPk.substring(0,10) || ''); form.setValue('bznmTotNo', rtnCompData?.dmdInfoPk.substring(10,14)==='0000' ? '' : rtnCompData?.dmdInfoPk.substring(10,14)); + // 수요처 불러온 후 사업자번호를 바꿀경우를 대비함 + setOrgBznmNo(rtnCompData?.dmdInfoPk); const sidoCd = rtnCompData?.ctpvCd.trim() || ''; setSidoValue(sidoCd); form.setValue('ctpvCd', sidoCd); @@ -120,6 +124,29 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun form.setValue('dmdCoNm', text); }, [form]); + const bznNoChange = useCallback((e: React.ChangeEvent, noType: string) => { + const value = e.target.value; + console.log('form value : '+form.getValues('dmdInfoPk')); + console.log('org value : '+orgBznmNo); + + if(noType === 'dmdInfoPk') { + if(orgBznmNo.substring(0,10) === value) { + setIsDuplicate(true); + } else { + setIsDuplicate(false); + } + form.setValue('dmdInfoPk', value); + } else { + if(orgBznmNo.substring(10,14) === value) { + setIsDuplicate(true); + } else { + setIsDuplicate(false); + } + form.setValue('bznmTotNo', value); + } + + }, [form, orgBznmNo, setIsDuplicate]); + const formFields: Array<{ name: keyof FormSchema; label: string; @@ -177,6 +204,7 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun type="text" className="!text-xl text-gray-600" {...field} + onChange={(e) => bznNoChange(e, 'dmdInfoPk')} /> ) }, @@ -195,6 +223,7 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun className="!mt-5 !text-xl text-gray-600" disabled={isBznmTotNoDisabled} {...field} + onChange={(e) => bznNoChange(e, 'bznmTotNo')} /> ) @@ -222,6 +251,18 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun {...field} /> ) + }, + { + name: "dmdAplyPswd", + label: "패스워드", + component: (field) => ( + + ) } ]; diff --git a/packages/common/business_components/src/ui/sdmInsertForm/index.tsx b/packages/common/business_components/src/ui/sdmInsertForm/index.tsx index 4a972180a..c79712c58 100644 --- a/packages/common/business_components/src/ui/sdmInsertForm/index.tsx +++ b/packages/common/business_components/src/ui/sdmInsertForm/index.tsx @@ -30,11 +30,12 @@ const createFormSchema = (isBznmTotNoDisabled: boolean, isDuplicate: boolean) => dmdInfoPk: z.string() .min(1, "사업자등록번호를 입력해주세요") .regex(/^\d{10}$/, "사업자등록번호는 10자리 숫자만 입력 가능합니다") - .refine(() => !isDuplicate, "이미 등록된 사업자등록번호입니다"), + .refine(() => isBznmTotNoDisabled ? !isDuplicate : true, "이미 등록된 사업자등록번호입니다"), bznmTotNo: isBznmTotNoDisabled ? z.string().optional() : z.string() - .length(4, "종사업자등록번호는 4자리 숫자만 입력 가능합니다"), + .length(4, "종사업자등록번호는 4자리 숫자만 입력 가능합니다") + .refine(() => !isDuplicate, "이미 등록된 사업자등록번호입니다"), daddr: z.string() .min(1, "주소를 입력해주세요") .min(6, "주소는 6자 이상 입력해주세요") @@ -44,6 +45,10 @@ const createFormSchema = (isBznmTotNoDisabled: boolean, isDuplicate: boolean) => .max(12, "전화번호는 12자 이내로 입력해주세요") .regex(/^[0-9-]+$/, "전화번호는 숫자와 하이픈(-)만 입력 가능합니다"), rgtr: z.string().optional(), + dmdAplyPswd : z.string() + .min(1, "패스워드를 입력해주세요") + .min(8, "패스워드는 8자 이상 입력해주세요") + .max(16, "패스워드는 16자 이내로 입력해주세요"), }); type FormSchema = ReturnType; @@ -58,8 +63,19 @@ const defaultValues: FormData = { daddr: '', telno: '', rgtr: "3fa85f64-5717-4562-b3fc-2c963f66afa6", + dmdAplyPswd : '', }; +/** + * 수요처 등록 폼 + * @param selectSidoData 시/도 데이터 + * @param selectSigunData 시/군/구 데이터 + * @param dataList 수요처 목록 + * @param rtnValue 검색 결과(텍스트) 콜백 + * @param rtnInputData 수요처 리스트 콜백 + * @returns + */ + export default function SdmInsertForm({selectSidoData, selectSigunData, dataList, rtnValue, rtnInputData}: thisProps) { /* const { insertSdmData } = useDmStore((state) => state); const router = useRouter(); */ diff --git a/packages/common/business_components/src/ui/sdmInsertForm/sdmNameBox.tsx b/packages/common/business_components/src/ui/sdmInsertForm/sdmNameBox.tsx index 18d048692..83571b6ff 100644 --- a/packages/common/business_components/src/ui/sdmInsertForm/sdmNameBox.tsx +++ b/packages/common/business_components/src/ui/sdmInsertForm/sdmNameBox.tsx @@ -80,7 +80,17 @@ export const SdmSearchForm = ({label=undefined, initValue=undefined, rtnValue=() } }} > - {item.dmdInfoPk.substring(0,10)} {item.dmdCoNm} + {item.dmdInfoPk.substring(10,14) !== '0000' ? ( + <> + 사업자번호 : {item.dmdInfoPk.substring(0,10)}  + 종사업자번호 : {item.dmdInfoPk.substring(10,14)}  + + ) : ( + <> + 사업자번호 : {item.dmdInfoPk.substring(0,10)}  + + )} + {item.dmdCoNm} )) : (
From 2c773de04f5a4f6a964e3961fe59db5bca7cd110 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Wed, 4 Jun 2025 11:08:00 +0900 Subject: [PATCH 07/18] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=ED=95=84=EC=9A=94=ED=95=9C=20=EC=9E=91=EC=97=85=20?= =?UTF-8?q?=EC=A3=BC=EC=84=9D=EC=9C=BC=EB=A1=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/sdmInsertForm/index.tsx | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/packages/common/business_components/src/ui/sdmInsertForm/index.tsx b/packages/common/business_components/src/ui/sdmInsertForm/index.tsx index c79712c58..723d87cf6 100644 --- a/packages/common/business_components/src/ui/sdmInsertForm/index.tsx +++ b/packages/common/business_components/src/ui/sdmInsertForm/index.tsx @@ -76,6 +76,32 @@ const defaultValues: FormData = { * @returns */ +/** + * 페이지에서 작업 + const {Common, initializeCommonData, getDemandCompList, insertSdmData, Sdm} = useDmStore((state) => state); + const { selectSidoData, selectSigunData } = Common; + const { demandCompList } = Sdm; + + // 공통데이터 (시도, 시군구 데이터 호출) + useEffect(() => { + initializeCommonData(); + }, [initializeCommonData]); + + // 컴포넌트에서 텍스트 검색 호출 + const callback = useCallback((searchText: string, pageCnt: number) => { + searchText = searchText.trim(); + if(searchText.length > 0) { + getDemandCompList(searchText, pageCnt); + } + }, [getDemandCompList]); + + // 컴포넌트에서 수요처 등록 호출 + const handleInsertSdmData = useCallback((data: DemandCompType) => { + insertSdmData(data); + + }, [insertSdmData]); + */ + export default function SdmInsertForm({selectSidoData, selectSigunData, dataList, rtnValue, rtnInputData}: thisProps) { /* const { insertSdmData } = useDmStore((state) => state); const router = useRouter(); */ From b7f643ab0c0ffd7298706bce904bc57c2f63aafa Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Wed, 4 Jun 2025 11:20:51 +0900 Subject: [PATCH 08/18] =?UTF-8?q?=EC=88=98=EC=9A=94=EC=B2=98=20=EB=93=B1?= =?UTF-8?q?=EB=A1=9D=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20export=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/common/business_components/src/ui/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/common/business_components/src/ui/index.ts b/packages/common/business_components/src/ui/index.ts index 0986f7953..a1fa95f39 100644 --- a/packages/common/business_components/src/ui/index.ts +++ b/packages/common/business_components/src/ui/index.ts @@ -19,4 +19,4 @@ export * from "./tab"; export * from "./table"; export * from "./table_div"; export * from "./title"; -export * from "./sdmInsertForm/sdmNameBox"; \ No newline at end of file +export * from "./sdmInsertForm"; \ No newline at end of file From 8a2439b4ba53ab5e954980d633b74f15965f1d96 Mon Sep 17 00:00:00 2001 From: leedj312 Date: Wed, 4 Jun 2025 20:06:47 +0900 Subject: [PATCH 09/18] =?UTF-8?q?=EC=88=98=EC=9A=94=EC=B2=98=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EB=B0=94=EB=94=94=ED=81=B4=EB=9E=98=EC=8A=A4=20?= =?UTF-8?q?=EB=B0=8F=20=ED=8C=A8=EC=8A=A4=EC=9B=8C=EB=93=9C=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/sdmInsertForm/index.tsx | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/packages/common/business_components/src/ui/sdmInsertForm/index.tsx b/packages/common/business_components/src/ui/sdmInsertForm/index.tsx index 723d87cf6..4b4a94648 100644 --- a/packages/common/business_components/src/ui/sdmInsertForm/index.tsx +++ b/packages/common/business_components/src/ui/sdmInsertForm/index.tsx @@ -2,7 +2,6 @@ /* import { useDmStore } from "@/app/store"; */ import { SdmRegForm } from "./form"; -import type { DemandCompType } from "../../../../../../apps/dm/app/store/sdmMng"; import { Button } from "@common/components/ui"; import { zodResolver } from "@hookform/resolvers/zod"; /* import { useRouter } from "next/navigation"; */ @@ -13,12 +12,28 @@ import { toast, Toaster } from "sonner"; 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[]; dataList: DemandCompType[]; rtnValue: (searchText: string, pageCnt: number) => void; rtnInputData: (data: DemandCompType) => void; + bodyClassNm?: string; } const createFormSchema = (isBznmTotNoDisabled: boolean, isDuplicate: boolean) => z.object({ @@ -102,7 +117,7 @@ const defaultValues: FormData = { }, [insertSdmData]); */ -export default function SdmInsertForm({selectSidoData, selectSigunData, dataList, rtnValue, rtnInputData}: thisProps) { +export default function SdmInsertForm({selectSidoData, selectSigunData, dataList, rtnValue, rtnInputData,bodyClassNm}: thisProps) { /* const { insertSdmData } = useDmStore((state) => state); const router = useRouter(); */ @@ -177,7 +192,7 @@ export default function SdmInsertForm({selectSidoData, selectSigunData, dataList
-
+
Date: Thu, 5 Jun 2025 09:44:28 +0900 Subject: [PATCH 10/18] =?UTF-8?q?console.log=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/business_components/src/ui/sdmInsertForm/form.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/common/business_components/src/ui/sdmInsertForm/form.tsx b/packages/common/business_components/src/ui/sdmInsertForm/form.tsx index d59108c5b..c5c0ee0db 100644 --- a/packages/common/business_components/src/ui/sdmInsertForm/form.tsx +++ b/packages/common/business_components/src/ui/sdmInsertForm/form.tsx @@ -126,8 +126,6 @@ export function SdmRegForm({ form, onCheckboxChange, selectSidoData, selectSigun const bznNoChange = useCallback((e: React.ChangeEvent, noType: string) => { const value = e.target.value; - console.log('form value : '+form.getValues('dmdInfoPk')); - console.log('org value : '+orgBznmNo); if(noType === 'dmdInfoPk') { if(orgBznmNo.substring(0,10) === value) { From 213ac7b8cf77281b555aaf6a35ce635b9dcdfa69 Mon Sep 17 00:00:00 2001 From: yschoi Date: Thu, 5 Jun 2025 20:15:59 +0900 Subject: [PATCH 11/18] =?UTF-8?q?gis=20=EA=B3=B5=ED=86=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/map/page.tsx | 114 ++++++++ .../business_components/src/ui/map/Gis.js | 246 ++++++++++++++++++ .../src/ui/map/GisContent.js | 79 ++++++ 3 files changed, 439 insertions(+) create mode 100644 apps/sn/app/map/page.tsx create mode 100644 packages/common/business_components/src/ui/map/Gis.js create mode 100644 packages/common/business_components/src/ui/map/GisContent.js diff --git a/apps/sn/app/map/page.tsx b/apps/sn/app/map/page.tsx new file mode 100644 index 000000000..7185c9660 --- /dev/null +++ b/apps/sn/app/map/page.tsx @@ -0,0 +1,114 @@ +"use client"; + +import Gis, { useGisContext } from "@common/business_components/ui/map/Gis"; +import { mapService } from "@service"; +import { useCallback, useEffect, useRef, useState } from "react"; +import GisApp from "@common/business_components/ui/map/lib/gis.core"; +import SearchModal from "./SearchModal"; +import FeatureClickEventPopup from "./featureClickEventPopup"; + +const Map = () => { + const [treeData, setTreeData] = useState([]); // 초기값을 객체 또는 null로 설정 + const [selectedFeature, setSelectedFeature] = useState(null); // 선택된 피처 상태 + const gisMaps = useRef(null); + const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태 + const [isSearchModalOpen, setIsSearchModalOpen] = useState(false); // SearchModal 열림 상태 + const [featureData, setFeatureData] = useState(null); // 선택된 피쳐 데이터 + const fetchData = async () => { + try { + const response = await mapService.getLyrStngs(); + setTreeData(response.data); // API 응답 저장 + } catch (error) { + console.error("데이터 불러오기 실패:", error); + } + }; + + // 컴포넌트 마운트 시 1회 실행 + useEffect(() => { + fetchData(); + }, []); + + // SearchModal, GisContent 등에서 호출 + const onFeatureSelect = (data: any) => { + let map = gisMaps.current; + if (!map) { + console.warn("지도가 초기화되지 않았습니다."); + return; + } + + // 항상 같은 select 객체 사용 + const select = GisApp.Module.select as any; + if (!select) return; + + // 1. 기존 선택 초기화 + select.resetSelectedFeature(); + + // 2. data가 OpenLayers Feature 인스턴스인지 확인 + let foundFeature = null; + if ( + data && + typeof data.getGeometry === "function" && + typeof data.setStyle === "function" + ) { + // 이미 Feature 인스턴스라면 그대로 사용 + foundFeature = data; + } else { + // 아니면 featureId로 맵에서 Feature 인스턴스를 찾아서 사용 + const featureId = data.fid || data.ftrIdn || data.id; + map + .getLayers() + .getArray() + .forEach((layer: any) => { + const source = layer.getSource?.(); + if (source?.getFeatureById) { + const feature = source.getFeatureById(String(featureId).trim()); + if (feature) foundFeature = feature; + } + }); + } + + // 3. 피처 선택 + if (foundFeature) { + let geometry = foundFeature.getGeometry(); + if (geometry) { + let extent = geometry.getExtent(); + + map.getView().fit(extent, { + duration: 300, + padding: [50, 50, 50, 50], + maxZoom: 16, + constrainResolution: true, + nearest: true, + }); + } + select.selectFeature(foundFeature, true); + } else { + console.warn("OpenLayers Feature를 찾을 수 없습니다:", data); + } + + setFeatureData(data); + setIsOpen(true); + setIsSearchModalOpen(false); + }; + return ( +
+ +
+ ); +}; + +export default Map; diff --git a/packages/common/business_components/src/ui/map/Gis.js b/packages/common/business_components/src/ui/map/Gis.js new file mode 100644 index 000000000..4fd9a8eb4 --- /dev/null +++ b/packages/common/business_components/src/ui/map/Gis.js @@ -0,0 +1,246 @@ +import './lib/css/gis.common.css'; +import React, { createContext, useContext, useEffect, useMemo, useRef, useState, useCallback } from 'react'; +import OlMap from 'ol/Map'; +import View from 'ol/View'; +import { defaults as defaultControls, OverviewMap } from 'ol/control'; +import { defaults } from 'ol/interaction'; +import * as olProj from 'ol/proj'; +import proj4 from 'proj4'; +import { register } from 'ol/proj/proj4'; +import GisApp from './lib/gis.core'; +import GisContent from './GisContent'; +import GisTree from './GisTree'; +import GisLonLat from './GisLonLat'; +import GisSelect from './GisSelect'; +import GisToolBar from './GisToolBar'; +import GisMapToggle from './GisMapToggle'; +import { Search } from 'lucide-react'; + +export const GisContext = createContext({ gisCore: null, gisMap: null, treeData: null, checkedLayerIds: null }); +export const useGisContext = () => useContext(GisContext); + +function Gis({ isOpen , gisMaps, isSearchModalOpen, treeData = [], isSearch = false, isMiniMap = false, setIsOpen, setFeatureData, featureData, searchView : SearchView, detailView: DetailView, onFeatureSelect, setIsSearchModalOpen }) { + const mapRef = useRef(); + const [mapObject, setMapObject] = useState({}); + const [tabVisible, setTabVisible] = useState(true); + // const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태 + // const [featureData, setFeatureData] = useState(null) // 선택된 피쳐 데이터 + // const [isSearchModalOpen, setIsSearchModalOpen] = useState(false); // SearchModal 열림 상태 + const gisCore = useMemo(() => new GisApp.core({ targetId: mapRef.current }), []); + const mapInstanceRef = useRef(null); + const checkedLayerIds = useRef([]); + let gisMap = null; + const closePopup = () => { + setIsOpen(false); // 팝업 닫기 + setFeatureData(null) + }; + + // SearchModal, GisContent 등에서 호출 + const handleFeatureSelect = useCallback((data) => { + gisMap = mapInstanceRef.current; + + if (!gisMap) { + console.warn('지도가 초기화되지 않았습니다.'); + return; + } + + // 항상 같은 select 객체 사용 + const select = GisApp.Module.select; + if (!select) return; + + // 1. 기존 선택 초기화 + select.resetSelectedFeature(); + + // 2. data가 OpenLayers Feature 인스턴스인지 확인 + let foundFeature = null; + if (data && typeof data.getGeometry === 'function' && typeof data.setStyle === 'function') { + // 이미 Feature 인스턴스라면 그대로 사용 + foundFeature = data; + } else { + // 아니면 featureId로 맵에서 Feature 인스턴스를 찾아서 사용 + const featureId = data.fid || data.ftrIdn || data.id; + gisMap.getLayers().getArray().forEach(layer => { + const source = layer.getSource?.(); + if (source?.getFeatureById) { + const feature = source.getFeatureById(String(featureId).trim()); + if (feature) foundFeature = feature; + } + }); + } + + // 3. 피처 선택 + if (foundFeature) { + let geometry = foundFeature.getGeometry(); + if (geometry) { + let extent = geometry.getExtent(); + + gisMap.getView().fit(extent, { + duration: 300, + padding: [50, 50, 50, 50], + maxZoom: 16, + constrainResolution: true, + nearest: true, + }); + } + select.selectFeature(foundFeature, true); + } else { + console.warn('OpenLayers Feature를 찾을 수 없습니다:', data); + } + + setFeatureData(data); + setIsOpen(true); + setIsSearchModalOpen(false); + }, [mapInstanceRef]); + + useEffect(() => { + if (!mapRef.current) return; + if (mapInstanceRef.current) return; // 이미 생성된 맵이 있다면 중단 + + // EPSG:5179 등록 + proj4.defs([ + [ + 'EPSG:5179', + '+proj=tmerc +lat_0=38 +lon_0=127.5 +k=0.9996 +x_0=1000000 +y_0=2000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs', + ], + ]); + register(proj4); + + //맵 생성 + const map = new OlMap({ + layers: [gisCore.baseLayers['base'], gisCore.baseLayers['satellite']], + renderer: 'webgl', + target: mapRef.current, + interactions: defaults({ doubleClickZoom: false }), + controls: defaultControls({ + zoom: false, + rotate: false, + attributionOptions: { + collapsible: false, + }, + }).extend([]), + view: new View({ + projection: GisApp.TO_PROJ, + zoom: gisCore.defaults.zoom, + center: olProj.transform( + [126.6757, 37.5585], + GisApp.FROM_PROJ, + GisApp.TO_PROJ + ), + minZoom: gisCore.defaults.minZoom, + maxZoom: gisCore.defaults.maxZoom, + }), + }); + + gisMaps.current = map + + //미니맵 + if(isMiniMap){ + const overviewMap = new OverviewMap({ + layers: [GisApp.Module.core.baseMiniMapLayers['base']], + view: new View({ + projection: GisApp.TO_PROJ, + minZoom: 9, + }), + collapsed: false, + collapseLabel: '\u00BB', + label: '\u00AB', + }); + map.addControl(overviewMap); + } + + gisCore.__proto__.map = map; + gisCore.scaleControl(); + gisCore.changeBaseLayer('base'); + setMapObject({ map: map }); + mapInstanceRef.current = map; // 생성 완료 플래그 설정 + }, []); + + useEffect(() => { + if (!treeData || treeData.length === 0) return; + + gisCore.deleteAllOverlay(); + gisCore.deleteAllLayer(); + + const layerCode = gisCore.convertLayerInfosToLayerCode(treeData, 'lyrSn'); + GisApp.layerCode = layerCode; + + //setTreeData(data); + const layerItems = getLayerItems(layerCode); + //setEditLayerItems(prev => [...layerItems]) + }, [treeData]); + + const getLayerItems = (layerCode) => { + const layerItems = Object.entries(layerCode) + .filter(([key, obj], idx) => obj?.updtPsblYn === 'Y') + .map(([key, obj]) => ({ + ...obj, + name: obj.lyrNm, + label: obj.lyrNm, + value: obj.lyrSn + '', + })) + .sort((a, b) => { + if (a.sortOrdr > b.sortOrdr) return 1; + if (a.sortOrdr < b.sortOrdr) return -1; + return 0; + }); + return layerItems; + }; + + if (mapObject.map) { + try { + gisMap = mapObject.map; + } catch (e) { + console.error('오류 발생:', e); // 시큐어코딩 관련 수정 : 오류 정보를 로그로 출력 + } + } + + return ( + <> + +
+
+ + + {/* */} + + {/* isSearchModalOpen이 true면 visible=false로 팝업 숨김 */} + {isOpen && featureData && !isSearchModalOpen && ( + + )} + + + + + +
+ + {isSearch && ( +
+ +
+ )} + + + ); +} + +export default React.memo(Gis); \ No newline at end of file diff --git a/packages/common/business_components/src/ui/map/GisContent.js b/packages/common/business_components/src/ui/map/GisContent.js new file mode 100644 index 000000000..136f394ad --- /dev/null +++ b/packages/common/business_components/src/ui/map/GisContent.js @@ -0,0 +1,79 @@ +import React, { useCallback, useEffect, useRef, useState } from 'react'; +import GisApp from './lib/gis.core'; +import { useGisContext } from './Gis'; +import GisLonLat from './GisLonLat'; +import GisSelect from './GisSelect'; +import GisToolBar from './GisToolBar'; +import './lib/css/gis.edit.css'; +import GisMapToggle from './GisMapToggle'; +import { Search } from 'lucide-react'; + +export default function GisContent({ edit = false, onFeatureSelect, isSearch, setIsSearchModalOpen }) { + const { gisMap, gisCore } = useGisContext(); + const [visibleComponents, setVisibleComponents] = useState({}); + const addressResultLayer = useRef(null); + const [playShow, setPlayShow] = useState({ show: false }); + + //셀렉트 버튼 이벤트 + // const clickFeature = useCallback(feature => { + // if (feature) { + // const layer = feature.getLayer(); + // setVisibleComponents(prevState => ({ + // ...prevState, + // })); + // } + // }, []); + + const selectRslt = useCallback(feature => { + GisApp.Module.layer.highLightFeature( + [feature], + { + id: GisApp.hlLayerId, + zIndex: 10, + opacity: 1, + selectable: true, + }, + { width: 30 } + ); + clickFeature(feature); + }, []); + + useEffect(() => { + if (gisMap) { + setVisibleComponents(prevState => ({ + ...prevState, + })); + } + }, [gisMap]); + + if (!gisMap) return null; + + return ( + <> + {/**/} + {/* + + */} + {/* */} + + {/* 검색 모달 */} + {isSearch && ( +
+ +
+ )} + + ); +} \ No newline at end of file From 643575c1255a60dfb797b9180948b55348db59d6 Mon Sep 17 00:00:00 2001 From: yschoi Date: Thu, 5 Jun 2025 20:17:52 +0900 Subject: [PATCH 12/18] =?UTF-8?q?=EB=AA=B0=EB=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/layout.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 apps/sn/app/layout.js diff --git a/apps/sn/app/layout.js b/apps/sn/app/layout.js new file mode 100644 index 000000000..8525f5f8c --- /dev/null +++ b/apps/sn/app/layout.js @@ -0,0 +1,12 @@ +export const metadata = { + title: 'Next.js', + description: 'Generated by Next.js', +} + +export default function RootLayout({ children }) { + return ( + + {children} + + ) +} From 3c912e3826c752b87a90fa3056c6c0a2bc66554d Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Mon, 9 Jun 2025 17:20:45 +0900 Subject: [PATCH 13/18] =?UTF-8?q?-=20=EC=B2=98=EB=A6=AC=EA=B5=AC=EC=97=AD?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EC=99=84=EB=A3=8C=20-=20SearchBaseForm=20?= =?UTF-8?q?=EC=9D=98=20selectPartData(=EC=9C=A0=EC=97=AD=EB=B3=84,?= =?UTF-8?q?=ED=96=89=EC=A0=95=EB=B3=84,=ED=99=98=EA=B2=BD=EC=B2=AD?= =?UTF-8?q?=EB=B3=84)=20=EA=B0=80=20=EC=B2=98=EB=A6=AC=EA=B5=AC=EC=97=AD?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=EC=97=90=EC=84=9C=20=ED=96=89=EC=A0=95?= =?UTF-8?q?=EB=B3=84=EB=A7=8C=20=EB=B3=B4=EC=97=AC=EC=95=BC=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EB=95=8C=EB=AC=B8=EC=97=90=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/search_base_form/index.tsx | 20 +++++++++++-- .../src/ui/search_form_left/index.tsx | 28 +++++++++++++++++-- 2 files changed, 43 insertions(+), 5 deletions(-) diff --git a/packages/common/business_components/src/ui/search_base_form/index.tsx b/packages/common/business_components/src/ui/search_base_form/index.tsx index b8d8355ae..2649c67db 100644 --- a/packages/common/business_components/src/ui/search_base_form/index.tsx +++ b/packages/common/business_components/src/ui/search_base_form/index.tsx @@ -20,6 +20,7 @@ type SearchBaseType = { initClick:() => void; btnClass:string; ref:React.RefObject; + isAdmin:boolean; } export type ReturnType = { partValue: string; @@ -29,9 +30,10 @@ export type ReturnType = { unitWaterShedValue: string; middleRegionValue: string; envPartValue: string; + sidoText: string; + sigunText: string; } - function SearchBaseForm ({ leftChildren, rightChildren, @@ -46,11 +48,14 @@ function SearchBaseForm ({ queryClick, excelClick, initClick, - ref + ref, + isAdmin=false }: SearchBaseType) { const [partValue, setPartValue] = useState("A"); const [sidoValue, setSidoValue] = useState("0"); const [sigunValue, setSigunValue] = useState("0"); + const [sidoText, setSidoText] = useState(""); + const [sigunText, setSigunText] = useState(""); const [regionValue, setRegionValue] = useState("0"); const [untitWaterShedValue, setUntitWaterShedValue] = useState("0"); const [middleRegionValue, setMiddleRegionValue] = useState("0"); @@ -66,6 +71,8 @@ function SearchBaseForm ({ unitWaterShedValue: untitWaterShedValue, middleRegionValue: middleRegionValue, envPartValue: envPartValue, + sidoText: sidoText, + sigunText: sigunText, }); } const initVal = useCallback(() => { @@ -86,6 +93,8 @@ function SearchBaseForm ({ unitWaterShedValue: untitWaterShedValue, middleRegionValue: middleRegionValue, envPartValue: envPartValue, + sidoText: sidoText, + sigunText: sigunText, }) }; useEffect(() => { @@ -98,8 +107,10 @@ function SearchBaseForm ({ customRef.unitWaterShedValue = untitWaterShedValue; customRef.middleRegionValue = middleRegionValue; customRef.envPartValue = envPartValue; + customRef.sidoText = sidoText; + customRef.sigunText = sigunText; } - }, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, ref]); + }, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, sidoText, sigunText, ref]); return (
{leftChildren} diff --git a/packages/common/business_components/src/ui/search_form_left/index.tsx b/packages/common/business_components/src/ui/search_form_left/index.tsx index 02112f084..e7858df2a 100644 --- a/packages/common/business_components/src/ui/search_form_left/index.tsx +++ b/packages/common/business_components/src/ui/search_form_left/index.tsx @@ -40,7 +40,10 @@ type SearchFormLeftProps = { setRtnEnvPartValue?: (value: string) => void; setRtnEnvPartSidoValue?: (value: string) => void; setRtnEnvPartSigunValue?: (value: string) => void; + setRtnSidoText?: (value: string) => void; + setRtnSigunText?: (value: string) => void; resetTrigger?: boolean; + isAdmin?: boolean; } export type EnvPartSelectDataType = SelectDataType & { @@ -53,12 +56,14 @@ const selectPartData:SelectDataType[] = [ { text: "환경청별", val: 'G' }, ]; -function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], selectSigunData = [], selectRegionData = [], selectUnitWaterShedData = [], selectMiddleRegionData = [], selectEnvPartData = [], setRtnPartValue, setRtnSidoValue, setRtnSigunValue, setRtnRegionValue, setRtnUnitWaterShedValue, setRtnMiddleRegionValue, setRtnEnvPartValue, setRtnEnvPartSidoValue, setRtnEnvPartSigunValue, resetTrigger = false }: SearchFormLeftProps) { +function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], selectSigunData = [], selectRegionData = [], selectUnitWaterShedData = [], selectMiddleRegionData = [], selectEnvPartData = [], setRtnPartValue, setRtnSidoValue, setRtnSidoText, setRtnSigunValue, setRtnSigunText, setRtnRegionValue, setRtnUnitWaterShedValue, setRtnMiddleRegionValue, setRtnEnvPartValue, setRtnEnvPartSidoValue, setRtnEnvPartSigunValue, resetTrigger = false, isAdmin = false }: SearchFormLeftProps) { /******************선택된 데이터******************/ const [partValue, setPartValue] = useState('A'); //행정별 시도 시군구 const [sidoValue, setSidoValue] = useState('0'); const [sigunValue, setSigunValue] = useState('0'); + const [sidoText, setSidoText] = useState(''); + const [sigunText, setSigunText] = useState(''); //유역별 const [regionValue, setRegionValue] = useState('0'); const [unitWaterShedValue, setUnitWaterShedValue] = useState('0'); @@ -152,6 +157,11 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel } const onSelectValue = (val: string, type: string) => { + let selectedSido; + let selectedSigun; + let selectedEnvPartSido; + let selectedEnvPartSigun; + switch(type) { case 'part': setPartValue(val); @@ -180,9 +190,14 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel break; case 'sido': setSidoValue(val); + selectedSido = selectSidoData.find(item => item.val === val); + setSidoText(selectedSido?.text || ''); if (setRtnSidoValue) { setRtnSidoValue(val); } + if (setRtnSidoText) { + setRtnSidoText(selectedSido?.text || ''); + } initializeSigunData(val); onSelectValue(selectSigunData[0]?.val || '0', 'sigun'); break; @@ -191,6 +206,11 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel setRtnSigunValue(val); } setSigunValue(val); + selectedSigun = filteredSigunData.find(item => item.val === val); + if (setRtnSigunText) { + setRtnSigunText(selectedSigun?.text || ''); + } + setSigunText(selectedSigun?.text || ''); break; // 유역 세팅 @@ -228,6 +248,8 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel break; case 'envPartSido' : setSidoValue(val); + selectedEnvPartSido = filteredEnvPartSidoData.find(item => item.val === val); + setSidoText(selectedEnvPartSido?.text || ''); if (setRtnEnvPartSidoValue) { setRtnEnvPartSidoValue(val); } @@ -236,6 +258,8 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel break; case 'envPartSigun' : setSigunValue(val); + selectedEnvPartSigun = filteredEnvPartSigunData.find(item => item.val === val); + setSigunText(selectedEnvPartSigun?.text || ''); if (setRtnEnvPartSigunValue) { setRtnEnvPartSigunValue(val); } @@ -285,7 +309,7 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel return ( isShowPart ? (
- onSelectValue(val.toString(), 'part')} value={partValue} selectClass={undefined}/> + onSelectValue(val.toString(), 'part')} value={partValue} selectClass={undefined}/> {partValue === 'R' ? ( <> onSelectValue(val.toString(), 'region')} value={regionValue} selectClass={undefined}/> From 0d4d529af9ea900f3b8f48d0c4d52f361e280936 Mon Sep 17 00:00:00 2001 From: jyha00 Date: Mon, 9 Jun 2025 19:15:13 +0900 Subject: [PATCH 14/18] =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=20=ED=97=A4?= =?UTF-8?q?=EB=8D=94=20=EC=95=84=EC=9D=B4=EB=94=94=20=EC=97=86=EB=8A=94=20?= =?UTF-8?q?=EA=B2=BD=EC=9A=B0=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_components/src/ui/table/HeadMakeColSpan.tsx | 4 ++-- packages/common/business_components/src/ui/table/index.tsx | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx b/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx index ebd611c1d..c0ec33233 100644 --- a/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx +++ b/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx @@ -44,11 +44,11 @@ const HeadMakeColSpan = ({ upHeadList }: { upHeadList: TableUpperProps[] }) => { {upHeadList .filter((item) => item.visible != false) - .map((head: TableUpperProps) => { + .map((head: TableUpperProps, idx) => { if (head.row === rowIndex) { return ( (1); const [idx, setIdx] = useState(-1); - useEffect(() => { if (resetPageNo) { setCur(1); From 91fe1597c4d8f4b22fe755658ee11c71740d3b9d Mon Sep 17 00:00:00 2001 From: jyha00 Date: Tue, 10 Jun 2025 09:17:16 +0900 Subject: [PATCH 15/18] =?UTF-8?q?chartConfig=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_components/src/ui/chart/index.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/common/business_components/src/ui/chart/index.tsx b/packages/common/business_components/src/ui/chart/index.tsx index b30eef3c3..0d17a99b1 100644 --- a/packages/common/business_components/src/ui/chart/index.tsx +++ b/packages/common/business_components/src/ui/chart/index.tsx @@ -34,7 +34,7 @@ const CHART_FORM = { type MainChartProps = { chartForm: string; - chartConfig: any; + chartConfig: ChartConfig; chartData: any; chartTitle: string; chartClassName?: string; @@ -47,23 +47,19 @@ type MainChartProps = { function MainChart(props: MainChartProps) { if( props.chartForm == CHART_FORM.BAR ){ return ( - - + ); } else if( props.chartForm == CHART_FORM.LINE ){ return ( - - + ); } else if( props.chartForm == CHART_FORM.DN ){ return ( - - + ); } else if (props.chartForm == CHART_FORM.LINEBAR){ return ( - - + ); } } From b00e5c48435a3507ad24cf5c8fab12f1d86e5ced Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Tue, 10 Jun 2025 15:50:25 +0900 Subject: [PATCH 16/18] =?UTF-8?q?=EB=8F=84=EB=84=9B=EB=B0=94=20=EC=83=89?= =?UTF-8?q?=EC=83=81=EC=9E=85=ED=9E=88=EB=8F=84=EB=A1=9D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/chart/DoughnutChart.tsx | 125 +++++++++++++++--- .../src/ui/chart/LineBarChart.tsx | 3 - 2 files changed, 109 insertions(+), 19 deletions(-) diff --git a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx index f88b35476..d666f1d14 100644 --- a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx +++ b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx @@ -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 ( +
+

{label}

+ {payload.map((item, index) => ( +
+
+ {` ${item.name} : ${item.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`} +
+ ))} +
+ ); + } + return null; +}; + +// 커스텀 범례 +const CustomLegend = (props: LegendProps) => { + const { payload } = props; + if (!payload) return null; + + return ( +
+ {payload.map((entry: LegendEntry, index: number) => ( +
+
+ {entry.value} +
+ ))} +
+ ); +}; + +export default function DoughnutChart(props: { + chartConfig: ChartConfig; + chartData: ChartDataItem[] | undefined; + chartTitle: string +}) { return ( - {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? ( -
- {props.chartTitle} -
): null} + {props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? ( +
+ {props.chartTitle} +
+ ) : null}
} + content={} /> ({ + ...item, + fill: props.chartConfig[item.label]?.fill || 'blue' + }))} dataKey="val" nameKey="label" innerRadius={60} /> +
- ) + ); } diff --git a/packages/common/business_components/src/ui/chart/LineBarChart.tsx b/packages/common/business_components/src/ui/chart/LineBarChart.tsx index 2e83458d8..8c7202104 100644 --- a/packages/common/business_components/src/ui/chart/LineBarChart.tsx +++ b/packages/common/business_components/src/ui/chart/LineBarChart.tsx @@ -92,9 +92,6 @@ export default function LineBarchart({ return
데이터가 없습니다.
; } - const barConfig = chartConfig?.barVal; - const lineConfig = chartConfig?.lineVal; - // 데이터의 최대값 계산 const getMaxValue = (data: any[], keyPrefix: string) => { return Math.max(...data.map(item => From 068c6a08cd2669fa34daac1ce835c4a484f96b4b Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Tue, 10 Jun 2025 17:34:31 +0900 Subject: [PATCH 17/18] =?UTF-8?q?=EB=8D=94=EB=B8=94=EB=B0=94=20=EC=B0=A8?= =?UTF-8?q?=ED=8A=B8=20=EC=83=9D=EC=84=B1=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/chart/DoubleBar.tsx | 137 ++++++++++++++++++ .../src/ui/chart/index.tsx | 9 +- 2 files changed, 145 insertions(+), 1 deletion(-) create mode 100644 packages/common/business_components/src/ui/chart/DoubleBar.tsx diff --git a/packages/common/business_components/src/ui/chart/DoubleBar.tsx b/packages/common/business_components/src/ui/chart/DoubleBar.tsx new file mode 100644 index 000000000..5b136690a --- /dev/null +++ b/packages/common/business_components/src/ui/chart/DoubleBar.tsx @@ -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 ( +
+

{label}

+ {payload.map((item, index) => ( +
+ {/* 색상 박스 추가 (범례 색상과 동일) */} +
+ {` ${item.name} : ${item.value}`} +
+ ))} +
+ ); + } + return null; +}; + +// 커스텀 범례 (글씨 크기 키우기 + 스타일 추가) +const CustomLegend = (props: any) => { + const { payload } = props; + return ( +
+ {payload.map((entry: unknown, index: number) => ( +
+
+ {(entry as {value: string}).value} +
+ ))} +
+ ); +}; + +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" ? ( +
+ {chartTitle} +
): null} +
+ + + + + + }/> + {chartData && chartData.length > 0 && ( + Object.keys(chartData[0]) + .filter(key => key !== "label") + .map((key, idx) => ( + + )) + )} + {showLegend && } + + +
+ + ) +} \ No newline at end of file diff --git a/packages/common/business_components/src/ui/chart/index.tsx b/packages/common/business_components/src/ui/chart/index.tsx index 0d17a99b1..4c58549cc 100644 --- a/packages/common/business_components/src/ui/chart/index.tsx +++ b/packages/common/business_components/src/ui/chart/index.tsx @@ -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 ( ); + } else if (props.chartForm == CHART_FORM.DOUBLEBAR){ + return ( + + ); } } From c2fae1bf4bbe18791d3777e8d6e11c2bc70acef6 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Tue, 10 Jun 2025 18:59:56 +0900 Subject: [PATCH 18/18] =?UTF-8?q?=EB=8D=94=EB=B8=94=EB=B0=94=20=ED=83=80?= =?UTF-8?q?=EC=9D=B4=ED=8B=80=ED=81=AC=EA=B8=B0=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/business_components/src/ui/chart/DoubleBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/common/business_components/src/ui/chart/DoubleBar.tsx b/packages/common/business_components/src/ui/chart/DoubleBar.tsx index 5b136690a..9627485aa 100644 --- a/packages/common/business_components/src/ui/chart/DoubleBar.tsx +++ b/packages/common/business_components/src/ui/chart/DoubleBar.tsx @@ -88,8 +88,8 @@ export default function DoubleBarChart({chartConfig=undefined, chartData=[], cha return ( <> {chartTitle && chartTitle !== "" && chartTitle !== "undefined" ? ( -
- {chartTitle} +
+ {chartTitle}
): null}