From 67b3ba87886b5e8b91225b8a03e715b9da7ccc60 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Thu, 17 Apr 2025 16:56:22 +0900 Subject: [PATCH 01/18] =?UTF-8?q?=ED=97=A4=EB=8D=94=20=ED=83=80=EC=9E=85?= =?UTF-8?q?=EC=9D=B4=20number=EC=9D=BC=20=EA=B2=BD=EC=9A=B0=20=EC=9A=B0?= =?UTF-8?q?=EC=B8=A1=EC=A0=95=EB=A0=AC=20=EB=B0=8F=20=EC=84=B8=EC=9E=90?= =?UTF-8?q?=EB=A6=AC=EC=88=98=20=EB=81=8A=EC=96=B4=EC=A3=BC=EB=8A=94=20?= =?UTF-8?q?=EA=B1=B0=20=EA=B0=9C=EB=B0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/common/business_components/src/ui/table/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index f6da92d7f..994b9a827 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -63,14 +63,14 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa {headlist?.map((head) => ( handleCellClick(index, head.id)} key={head.id + index} > - {String(el[head.id] ?? '')} + {typeof el[head.id] === 'number' ? String(el[head.id]).replace(/\B(?=(\d{3})+(?!\d))/g, ",") : String(el[head.id] ?? '')} ))} From 4a6681fe3a645bb8b2f26422071ae0caa93f2ce5 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Fri, 18 Apr 2025 17:01:15 +0900 Subject: [PATCH 02/18] =?UTF-8?q?=EA=B2=80=EC=83=89=EC=98=81=EC=97=AD=20?= =?UTF-8?q?=EC=B4=88=EA=B8=B0=ED=99=94=EA=B0=80=20=EC=95=88=EB=90=98?= =?UTF-8?q?=EB=8A=94=20=EB=AC=B8=EC=A0=9C=EB=A1=9C=20=EC=9E=AC=EB=B0=B0?= =?UTF-8?q?=ED=8F=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/search_form_left/index.tsx | 43 +++++++++++++++++-- 1 file changed, 40 insertions(+), 3 deletions(-) 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 448f2df04..de1a6773e 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 @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import type { SelectDataType } from '../search_input_select'; import { SelectBox } from '../select'; @@ -38,6 +38,7 @@ type SearchFormLeftProps = { setRtnEnvPartValue?: (value: string) => void; setRtnEnvPartSidoValue?: (value: string) => void; setRtnEnvPartSigunValue?: (value: string) => void; + resetTrigger?: boolean; } type EnvPartSelectDataType = SelectDataType & { @@ -50,7 +51,7 @@ const selectPartData:SelectDataType[] = [ { text: "환경청별", val: '02' }, ]; -function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], selectSigunData = [], selectRegionData = [], selectUnitWaterShedData = [], selectMiddleRegionData = [], selectEnvPartData = [], setRtnPartValue, setRtnSidoValue, setRtnSigunValue, setRtnRegionValue, setRtnUnitWaterShedValue, setRtnMiddleRegionValue, setRtnEnvPartValue, setRtnEnvPartSidoValue, setRtnEnvPartSigunValue }: SearchFormLeftProps) { +function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], selectSigunData = [], selectRegionData = [], selectUnitWaterShedData = [], selectMiddleRegionData = [], selectEnvPartData = [], setRtnPartValue, setRtnSidoValue, setRtnSigunValue, setRtnRegionValue, setRtnUnitWaterShedValue, setRtnMiddleRegionValue, setRtnEnvPartValue, setRtnEnvPartSidoValue, setRtnEnvPartSigunValue, resetTrigger = false }: SearchFormLeftProps) { const [partValue, setPartValue] = useState('0'); const [showPart, setShowPart] = useState(''); const [sidoValue, setSidoValue] = useState('0'); @@ -239,7 +240,43 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel break; } } - + + // 리셋 함수 + const resetAllValues = () => { + setPartValue('0'); + setShowPart(''); + setSidoValue('0'); + setSigunValue('0'); + setRegionValue('0'); + setUnitWaterShedValue('0'); + setMiddleRegionValue('0'); + setEnvPartValue('0'); + setEnvPartSidoValue('0'); + setEnvPartSigunValue('0'); + + setFilteredSigunData([{ text: "전체", val: '0' }]); + setFilteredUnitWaterShedData([{ text: "전체", val: '0' }]); + setFilteredMiddleRegionData([{ text: "전체", val: '0' }]); + setFilteredEnvPartData([{ text: "전체", val: '0', adstDliStrCd: '' }]); + setFilteredEnvPartSidoData([{ text: "전체", val: '0', adstDliStrCd: '' }]); + setFilteredEnvPartSigunData([{ text: "전체", val: '0' }]); + + if (setRtnPartValue) setRtnPartValue('0'); + if (setRtnSidoValue) setRtnSidoValue('0'); + if (setRtnSigunValue) setRtnSigunValue('0'); + if (setRtnRegionValue) setRtnRegionValue('0'); + if (setRtnUnitWaterShedValue) setRtnUnitWaterShedValue('0'); + if (setRtnMiddleRegionValue) setRtnMiddleRegionValue('0'); + if (setRtnEnvPartValue) setRtnEnvPartValue('0'); + if (setRtnEnvPartSidoValue) setRtnEnvPartSidoValue('0'); + if (setRtnEnvPartSigunValue) setRtnEnvPartSigunValue('0'); + }; + + // 리셋 트리거 변경 감지 + useEffect(() => { + resetAllValues(); + }, [resetTrigger]); + return ( isShowPart ? (
From eeea80f712b6365bb284088876cf7c4ff52383b6 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Fri, 18 Apr 2025 17:40:20 +0900 Subject: [PATCH 03/18] searchformleft md v1 --- .../src/ui/search_form_left/searchFormLeft.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md b/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md index 18b95b13f..6083341ff 100644 --- a/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md +++ b/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md @@ -3,7 +3,22 @@ #### 1. 컴포넌트 호출방법 ```js import { SearchFormLeft } from "@common/business_components"; + ..... + +// state 지정 +const [partValue, setPartValue] = useState("0"); +const [sidoValue, setSidoValue] = useState("0"); +const [sigunValue, setSigunValue] = useState("0"); +const [regionValue, setRegionValue] = useState("0"); +const [untitWaterShedValue, setUntitWaterShedValue] = useState("0"); +const [middleRegionValue, setMiddleRegionValue] = useState("0"); +const [envPartValue, setEnvPartValue] = useState("0"); +const [envPartSidoValue, setEnvPartSidoValue] = useState("0"); +const [envPartSigunValue, setEnvPartSigunValue] = useState("0"); + +..... + Date: Mon, 21 Apr 2025 13:58:31 +0900 Subject: [PATCH 04/18] =?UTF-8?q?=EA=B3=B5=ED=86=B5=EA=B2=80=EC=83=89?= =?UTF-8?q?=EB=8B=A8=20=EC=98=81=EC=97=AD=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_components/src/ui/search_form_left/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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 de1a6773e..e40ec3825 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 @@ -274,8 +274,10 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel // 리셋 트리거 변경 감지 useEffect(() => { - resetAllValues(); - }, [resetTrigger]); + if (resetTrigger) { + resetAllValues(); + } + }, [resetAllValues, resetTrigger]); return ( isShowPart ? ( From 32b68df7f3adaa29ba29eda879f1eb5af0f25c08 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Mon, 21 Apr 2025 14:24:02 +0900 Subject: [PATCH 05/18] =?UTF-8?q?=EC=97=91=EC=85=80=20=EB=8B=A4=EC=9A=B4?= =?UTF-8?q?=EB=A1=9C=EB=93=9C=20business=5Fcompo=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/business_components/package.json | 1 + .../src/ui/excel_download/index.tsx | 16 +++++ .../business_components/src/ui/index.ts | 3 +- pnpm-lock.yaml | 65 ++++++++++++++++++- 4 files changed, 83 insertions(+), 2 deletions(-) create mode 100644 packages/common/business_components/src/ui/excel_download/index.tsx diff --git a/packages/common/business_components/package.json b/packages/common/business_components/package.json index 5120980c2..1f02a708e 100644 --- a/packages/common/business_components/package.json +++ b/packages/common/business_components/package.json @@ -42,6 +42,7 @@ "recharts": "^2.15.1", "sonner": "^2.0.1", "tailwind-merge": "^3.0.1", + "xlsx": "^0.18.5", "zod": "^3.24.2" }, "devDependencies": { diff --git a/packages/common/business_components/src/ui/excel_download/index.tsx b/packages/common/business_components/src/ui/excel_download/index.tsx new file mode 100644 index 000000000..d1370b95c --- /dev/null +++ b/packages/common/business_components/src/ui/excel_download/index.tsx @@ -0,0 +1,16 @@ +import * as XLSX from 'xlsx'; + +type ExcelDownloadProps = { + data : JSON | JSON[]; + fileName : string; + sheetNameArray : string[]; +} + +export const downloadExcel = ({ data, fileName = new Date().getTime().toString()+'.xlsx', sheetNameArray = ["Sheet1"] }: ExcelDownloadProps) => { + const worksheet = XLSX.utils.json_to_sheet(Array.isArray(data) ? data : [data]); + const workbook = XLSX.utils.book_new(); + XLSX.utils.book_append_sheet(workbook, worksheet, sheetNameArray[0]); + //let buffer = XLSX.write(workbook, { bookType: "xlsx", type: "buffer" }); + //XLSX.write(workbook, { bookType: "xlsx", type: "binary" }); + XLSX.writeFile(workbook, fileName+'.xlsx'); + }; \ No newline at end of file diff --git a/packages/common/business_components/src/ui/index.ts b/packages/common/business_components/src/ui/index.ts index c3022740d..e2273e8e5 100644 --- a/packages/common/business_components/src/ui/index.ts +++ b/packages/common/business_components/src/ui/index.ts @@ -16,4 +16,5 @@ export * from "./search_form_right"; export * from "./table_div"; export * from "./list_div"; export * from "./tab"; -export * from "./dialog_ui" \ No newline at end of file +export * from "./dialog_ui"; +export * from "./excel_download"; \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 82f59a6cd..62c43bac1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -266,6 +266,9 @@ importers: tailwind-merge: specifier: ^3.0.1 version: 3.0.2 + xlsx: + specifier: ^0.18.5 + version: 0.18.5 zod: specifier: ^3.24.2 version: 3.24.2 @@ -325,7 +328,7 @@ importers: specifier: ^15.14.0 version: 15.15.0 postcss: - specifier: ^8.5.1 + specifier: ^8.5.3 version: 8.5.3 prettier: specifier: ^3.4.2 @@ -3853,6 +3856,11 @@ packages: hasBin: true dev: true + /adler-32@1.3.1: + resolution: {integrity: sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==} + engines: {node: '>=0.8'} + dev: false + /ajv-formats@2.1.1(ajv@8.17.1): resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==} peerDependencies: @@ -4236,6 +4244,14 @@ packages: /caniuse-lite@1.0.30001701: resolution: {integrity: sha512-faRs/AW3jA9nTwmJBSO1PQ6L/EOgsB5HMQQq4iCu5zhPgVVgO/pZRHlmatwijZKetFw8/Pr4q6dEN8sJuq8qTw==} + /cfb@1.2.2: + resolution: {integrity: sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==} + engines: {node: '>=0.8'} + dependencies: + adler-32: 1.3.1 + crc-32: 1.2.2 + dev: false + /chai@5.2.0: resolution: {integrity: sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw==} engines: {node: '>=12'} @@ -4325,6 +4341,11 @@ packages: engines: {node: '>=6'} dev: false + /codepage@1.15.0: + resolution: {integrity: sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==} + engines: {node: '>=0.8'} + dev: false + /color-convert@2.0.1: resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} engines: {node: '>=7.0.0'} @@ -4402,6 +4423,12 @@ packages: typescript: 5.6.3 dev: true + /crc-32@1.2.2: + resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==} + engines: {node: '>=0.8'} + hasBin: true + dev: false + /cross-spawn@7.0.6: resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} engines: {node: '>= 8'} @@ -5516,6 +5543,11 @@ packages: mime-types: 2.1.35 dev: false + /frac@1.1.2: + resolution: {integrity: sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==} + engines: {node: '>=0.8'} + dev: false + /fraction.js@4.3.7: resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} dev: true @@ -7571,6 +7603,13 @@ packages: whatwg-url: 7.1.0 dev: true + /ssf@0.11.2: + resolution: {integrity: sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==} + engines: {node: '>=0.8'} + dependencies: + frac: 1.1.2 + dev: false + /stable-hash@0.0.4: resolution: {integrity: sha512-LjdcbuBeLcdETCrPn9i8AYAZ1eCtu4ECAWtP7UleOiZ9LzVxRzzUZEoZ8zB24nhkQnDWyET0I+3sWokSDS3E7g==} dev: true @@ -8535,11 +8574,21 @@ packages: dependencies: isexe: 2.0.0 + /wmf@1.0.2: + resolution: {integrity: sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==} + engines: {node: '>=0.8'} + dev: false + /word-wrap@1.2.5: resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==} engines: {node: '>=0.10.0'} dev: true + /word@0.3.0: + resolution: {integrity: sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==} + engines: {node: '>=0.8'} + dev: false + /wrap-ansi@7.0.0: resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==} engines: {node: '>=10'} @@ -8569,6 +8618,20 @@ packages: optional: true dev: true + /xlsx@0.18.5: + resolution: {integrity: sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==} + engines: {node: '>=0.8'} + hasBin: true + dependencies: + adler-32: 1.3.1 + cfb: 1.2.2 + codepage: 1.15.0 + crc-32: 1.2.2 + ssf: 0.11.2 + wmf: 1.0.2 + word: 0.3.0 + dev: false + /y18n@5.0.8: resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==} engines: {node: '>=10'} From fa46ad678414685be1c1c805bccb934b679b2c29 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Mon, 21 Apr 2025 15:04:34 +0900 Subject: [PATCH 06/18] =?UTF-8?q?=EA=B2=80=EC=83=89=EC=98=81=EC=97=AD=20?= =?UTF-8?q?=EC=B4=88=EA=B8=B0=ED=99=94=20=EC=98=A4=EB=A5=98=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_components/src/ui/search_form_left/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) 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 e40ec3825..c4c3c1daa 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 @@ -276,8 +276,12 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel useEffect(() => { if (resetTrigger) { resetAllValues(); + // 리셋 후 트리거를 false로 설정 + if (setRtnPartValue) { + setRtnPartValue('0'); + } } - }, [resetAllValues, resetTrigger]); + }, [resetTrigger]); return ( isShowPart ? ( From b9ee38a907a8db7827ac5ea5e516a8c88c70301a Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Mon, 21 Apr 2025 15:06:47 +0900 Subject: [PATCH 07/18] =?UTF-8?q?=EA=B2=80=EC=83=89=EC=98=81=EC=97=AD=20?= =?UTF-8?q?=EC=B4=88=EA=B8=B0=ED=99=94=20=EC=98=A4=EB=A5=98=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 --- .../business_components/src/ui/search_form_left/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 c4c3c1daa..248e8f625 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 @@ -315,4 +315,4 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel ) } -export { SearchFormLeft }; +export { SearchFormLeft }; \ No newline at end of file From 84147da3c5f1f5505aa389ee31540c2eed9451ee Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Mon, 21 Apr 2025 16:24:55 +0900 Subject: [PATCH 08/18] =?UTF-8?q?md=20=ED=8C=8C=EC=9D=BC=20=EC=97=85?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/search_form_left/searchFormLeft.md | 115 ++++++++++++------ 1 file changed, 75 insertions(+), 40 deletions(-) diff --git a/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md b/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md index 6083341ff..04531c27f 100644 --- a/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md +++ b/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md @@ -16,47 +16,28 @@ const [middleRegionValue, setMiddleRegionValue] = useState("0"); const [envPartValue, setEnvPartValue] = useState("0"); const [envPartSidoValue, setEnvPartSidoValue] = useState("0"); const [envPartSigunValue, setEnvPartSigunValue] = useState("0"); - +const [resetTrigger, setResetTrigger] = useState(false); ..... - { - setPartValue(value); - }} - setRtnSidoValue={(value) => { - setSidoValue(value); - }} - setRtnSigunValue={(value) => { - setSigunValue(value); - }} - setRtnRegionValue={(value) => { - setRegionValue(value); - }} - setRtnUnitWaterShedValue={(value) => { - setUntitWaterShedValue(value); - }} - setRtnMiddleRegionValue={(value) => { - setMiddleRegionValue(value); - }} - setRtnEnvPartValue={(value) => { - setEnvPartValue(value); - }} - setRtnEnvPartSidoValue={(value) => { - setEnvPartSidoValue(value); - }} - setRtnEnvPartSigunValue={(value) => { - setEnvPartSigunValue(value); - }} + + ```   ㆍisShowPart : 검색단에서 구분(행정별,유역별,환경청별) 세팅 여부(보일 경우 : Y, 아닐경우 : N 혹은 미첨부) @@ -88,7 +69,11 @@ const [envPartSigunValue, setEnvPartSigunValue] = useState("0");   ㆍsetRtnEnvPartSidoValue : 선택한 환경청의 시도 set함수(조회시 페이지에서 사용) -  ㆍsetRtnEnvPartSidoValue : 선택한 환경청 시도의 시군구 set함수(조회시 페이지에서 사용) +  ㆍsetRtnEnvPartSigunValue : 선택한 환경청 시도의 시군구 set함수(조회시 페이지에서 사용) + +  ㆍresetTrigger : 초기화 trigger 변수 + + #### 2. 세팅방법 ```js @@ -333,8 +318,58 @@ const [middleRegionValue, setMiddleRegionValue] = useState("0"); const [envPartValue, setEnvPartValue] = useState("0"); const [envPartSidoValue, setEnvPartSidoValue] = useState("0"); const [envPartSigunValue, setEnvPartSigunValue] = useState("0"); +const [resetTrigger, setResetTrigger] = useState(false); - + +const resetVal = () => { + console.log('=== 초기화 ==='); + console.log(selectSidoData); + + // SelectBox 초기화 - 각 selectArray의 첫 번째 옵션 값 사용 + const initialPartValue = selectPartData[0]?.val || "0"; + const initialSidoValue = selectSidoData[0]?.val || "0"; + const initialSigunValue = selectSigunData[0]?.val || "0"; + const initialRegionValue = selectRegionData[0]?.val || "0"; + const initialUnitWaterShedValue = selectUnitWaterShedData[0]?.val || "0"; + const initialMiddleRegionValue = selectMiddleRegionData[0]?.val || "0"; + const initialEnvPartValue = selectEnvPartData[0]?.val || "0"; + const initialEnvPartSidoValue = selectEnvPartData[0]?.val || "0"; + const initialEnvPartSigunValue = selectEnvPartData[0]?.val || "0"; + + // 상태값 설정 + setPartValue(initialPartValue); + setSidoValue(initialSidoValue); + setSigunValue(initialSigunValue); + setRegionValue(initialRegionValue); + setUntitWaterShedValue(initialUnitWaterShedValue); + setMiddleRegionValue(initialMiddleRegionValue); + setEnvPartValue(initialEnvPartValue); + setEnvPartSidoValue(initialEnvPartSidoValue); + setEnvPartSigunValue(initialEnvPartSigunValue); + + // 리셋 후 트리거를 false로 설정 + setTimeout(() => { + setResetTrigger(false); + }, 0); + } + +// 조회 함수 +const chkVal = useCallback(() => { + setResetPage(true); + // 조회 funciton + searchFcltyQltyList(1); +}, [searchFcltyQltyList]); + +// 그리드 page 넘어갈 때 필요한 함수 +const handlePageChange = useCallback((page: number) => { + setResetPage(false); + searchFcltyQltyList(page); +}, [searchFcltyQltyList]); + +// 테이블 호출 컴포넌트 + index !== undefined && cellClick(index)} headName={"시설별 수질현황"} tableData={mainList} headlist={upHeadList2} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange}> + + ``` From 6debee6b5729b5d2247138637c03e4808e30e754 Mon Sep 17 00:00:00 2001 From: truthwing Date: Tue, 22 Apr 2025 17:19:34 +0900 Subject: [PATCH 09/18] =?UTF-8?q?search=20base=20form=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?(=EC=82=AC=EC=9A=A9=EB=B2=95=EC=9D=80=20=EB=A9=94=EC=8B=A0?= =?UTF-8?q?=EC=A0=80=EB=A1=9C=20=EC=9A=B0=EC=84=A0=20=EC=A0=84=EB=8B=AC)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_components/src/ui/index.ts | 19 +-- .../src/ui/search_base_form/index.tsx | 134 ++++++++++++++++++ .../src/ui/search_form_left/index.tsx | 4 +- 3 files changed, 146 insertions(+), 11 deletions(-) create mode 100644 packages/common/business_components/src/ui/search_base_form/index.tsx diff --git a/packages/common/business_components/src/ui/index.ts b/packages/common/business_components/src/ui/index.ts index e2273e8e5..e591be5b5 100644 --- a/packages/common/business_components/src/ui/index.ts +++ b/packages/common/business_components/src/ui/index.ts @@ -1,20 +1,21 @@ export * from "./chart"; export * from "./date_picker"; +export * from "./dialog_ui"; +export * from "./excel_download"; export * from "./file-upload"; export * from "./form"; export * from "./form_ui"; +export * from "./list_div"; +export * from "./main_content_div"; export * from "./scroll"; +export * from "./search_base_form"; export * from "./search_form"; +export * from "./search_form_left"; +export * from "./search_form_right"; export * from "./search_input"; export * from "./search_input_select"; export * from "./select"; -export * from "./table"; -export * from "./main_content_div"; -export * from "./title"; -export * from "./search_form_left"; -export * from "./search_form_right"; -export * from "./table_div"; -export * from "./list_div"; export * from "./tab"; -export * from "./dialog_ui"; -export * from "./excel_download"; \ No newline at end of file +export * from "./table"; +export * from "./table_div"; +export * from "./title"; 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 new file mode 100644 index 000000000..da21761ee --- /dev/null +++ b/packages/common/business_components/src/ui/search_base_form/index.tsx @@ -0,0 +1,134 @@ +import { Button } from "@common/components/ui"; +import { useCallback, useEffect, useState } from "react"; +import { SearchFormLeft, type EnvPartSelectDataType } from "../search_form_left"; +import { SearchFormRight } from "../search_form_right"; +import type { SelectDataType } from "../search_input_select"; +type SearchBaseType = { + leftChildren:React.ReactNode; + rightChildren:React.ReactNode; + selectSidoData?: SelectDataType[] | []; + selectSigunData?: SelectDataType[] | []; + selectRegionData?: SelectDataType[] | []; + selectUnitWaterShedData?: SelectDataType[] | []; + selectMiddleRegionData?: SelectDataType[] | []; + selectEnvPartData?: EnvPartSelectDataType[] | []; + queryClick:(returnType:ReturnType) => void; + excelClick:(returnType:ReturnType) => void; + btnClass:string; +} +export type ReturnType = { + partValue: string; + sidoValue: string; + sigunValue: string; + regionValue: string; + unitWaterShedValue: string; + middleRegionValue: string; + envPartValue: string; + envPartSidoValue: string; + envPartSigunValue: string; +} + + +function SearchBaseForm ({ + leftChildren, + rightChildren, + selectSidoData, + selectSigunData, + selectRegionData, + selectUnitWaterShedData, + selectMiddleRegionData, + selectEnvPartData, + btnClass, + queryClick, + }: SearchBaseType) { + const [partValue, setPartValue] = useState("0"); + const [sidoValue, setSidoValue] = useState("0"); + const [sigunValue, setSigunValue] = useState("0"); + const [regionValue, setRegionValue] = useState("0"); + const [untitWaterShedValue, setUntitWaterShedValue] = useState("0"); + const [middleRegionValue, setMiddleRegionValue] = useState("0"); + const [envPartValue, setEnvPartValue] = useState("0"); + const [envPartSidoValue, setEnvPartSidoValue] = useState("0"); + const [envPartSigunValue, setEnvPartSigunValue] = useState("0"); + const [resetTrigger, setResetTrigger] = useState(false); + const queryVal = () => { + console.log("조회버튼 클릭"); + queryClick({ + partValue: partValue, + sidoValue: sidoValue, + sigunValue: sigunValue, + regionValue: regionValue, + unitWaterShedValue: untitWaterShedValue, + middleRegionValue: middleRegionValue, + envPartValue: envPartValue, + envPartSidoValue: envPartSidoValue, + envPartSigunValue: envPartSigunValue, + }); + } + const initVal = useCallback(() => { + setResetTrigger(true); + }, [setResetTrigger]); + useEffect(() => { + if (resetTrigger) { + setResetTrigger(false); + } + }, [resetTrigger]); + const excelDownload = useCallback(() => { + console.log("엑셀다운로드 클릭"); + console.log(partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, envPartSidoValue, envPartSigunValue); + }, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, envPartSidoValue, envPartSigunValue]); + // useEffect(() => { + // if (ref && ref.current) { + // ref.current.partValue = partValue; + // ref.current.sidoValue = sidoValue; + // ref.current.sigunValue = sigunValue; + // ref.current.regionValue = regionValue; + // ref.current.unitWaterShedValue = untitWaterShedValue; + // ref.current.middleRegionValue = middleRegionValue; + // ref.current.envPartValue = envPartValue; + // ref.current.envPartSidoValue = envPartSidoValue; + // ref.current.envPartSigunValue = envPartSigunValue; + // } + // }, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, envPartSidoValue, envPartSigunValue]); + return ( +
+ + {leftChildren} + + + +
+ + +
+ {rightChildren} + +
+ ) + } + + export { SearchBaseForm }; + \ No newline at end of file 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 248e8f625..fbd56a68f 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 @@ -41,7 +41,7 @@ type SearchFormLeftProps = { resetTrigger?: boolean; } -type EnvPartSelectDataType = SelectDataType & { +export type EnvPartSelectDataType = SelectDataType & { adstDliStrCd: string, } @@ -315,4 +315,4 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel ) } -export { SearchFormLeft }; \ No newline at end of file +export { SearchFormLeft }; From 675a3583b7d93bbb76371b8935ccd7173af8556a Mon Sep 17 00:00:00 2001 From: truthwing Date: Tue, 22 Apr 2025 17:30:23 +0900 Subject: [PATCH 10/18] =?UTF-8?q?=EC=97=91=EC=85=80=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=EB=8F=84=20=EC=B6=94=EA=B0=80.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/search_base_form/index.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) 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 da21761ee..372a52695 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 @@ -40,6 +40,7 @@ function SearchBaseForm ({ selectEnvPartData, btnClass, queryClick, + excelClick }: SearchBaseType) { const [partValue, setPartValue] = useState("0"); const [sidoValue, setSidoValue] = useState("0"); @@ -76,6 +77,17 @@ function SearchBaseForm ({ const excelDownload = useCallback(() => { console.log("엑셀다운로드 클릭"); console.log(partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, envPartSidoValue, envPartSigunValue); + excelClick({ + partValue: partValue, + sidoValue: sidoValue, + sigunValue: sigunValue, + regionValue: regionValue, + unitWaterShedValue: untitWaterShedValue, + middleRegionValue: middleRegionValue, + envPartValue: envPartValue, + envPartSidoValue: envPartSidoValue, + envPartSigunValue: envPartSigunValue, + }) }, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, envPartSidoValue, envPartSigunValue]); // useEffect(() => { // if (ref && ref.current) { From 75aeadd69dc2ffd20f18046ffa90205fe514b0ef Mon Sep 17 00:00:00 2001 From: truthwing Date: Tue, 22 Apr 2025 17:57:45 +0900 Subject: [PATCH 11/18] =?UTF-8?q?SearchBaseForm=20ref=20=EC=97=B0=EA=B2=B0?= =?UTF-8?q?=20=EC=99=84=EB=A3=8C.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/search_base_form/index.tsx | 35 ++++++++++--------- 1 file changed, 18 insertions(+), 17 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 372a52695..93de69169 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 @@ -15,6 +15,7 @@ type SearchBaseType = { queryClick:(returnType:ReturnType) => void; excelClick:(returnType:ReturnType) => void; btnClass:string; + ref:React.RefObject; } export type ReturnType = { partValue: string; @@ -40,7 +41,8 @@ function SearchBaseForm ({ selectEnvPartData, btnClass, queryClick, - excelClick + excelClick, + ref }: SearchBaseType) { const [partValue, setPartValue] = useState("0"); const [sidoValue, setSidoValue] = useState("0"); @@ -74,9 +76,7 @@ function SearchBaseForm ({ setResetTrigger(false); } }, [resetTrigger]); - const excelDownload = useCallback(() => { - console.log("엑셀다운로드 클릭"); - console.log(partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, envPartSidoValue, envPartSigunValue); + const excelDownload = () => { excelClick({ partValue: partValue, sidoValue: sidoValue, @@ -88,20 +88,21 @@ function SearchBaseForm ({ envPartSidoValue: envPartSidoValue, envPartSigunValue: envPartSigunValue, }) + }; + useEffect(() => { + if (ref && ref.current) { + const customRef = ref.current as HTMLDivElement & ReturnType; + customRef.partValue = partValue; + customRef.sidoValue = sidoValue; + customRef.sigunValue = sigunValue; + customRef.regionValue = regionValue; + customRef.unitWaterShedValue = untitWaterShedValue; + customRef.middleRegionValue = middleRegionValue; + customRef.envPartValue = envPartValue; + customRef.envPartSidoValue = envPartSidoValue; + customRef.envPartSigunValue = envPartSigunValue; + } }, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, envPartSidoValue, envPartSigunValue]); - // useEffect(() => { - // if (ref && ref.current) { - // ref.current.partValue = partValue; - // ref.current.sidoValue = sidoValue; - // ref.current.sigunValue = sigunValue; - // ref.current.regionValue = regionValue; - // ref.current.unitWaterShedValue = untitWaterShedValue; - // ref.current.middleRegionValue = middleRegionValue; - // ref.current.envPartValue = envPartValue; - // ref.current.envPartSidoValue = envPartSidoValue; - // ref.current.envPartSigunValue = envPartSigunValue; - // } - // }, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, envPartSidoValue, envPartSigunValue]); return (
Date: Wed, 23 Apr 2025 17:15:00 +0900 Subject: [PATCH 12/18] =?UTF-8?q?=EC=B4=88=EA=B8=B0=ED=99=94=20=EB=B2=84?= =?UTF-8?q?=ED=81=B0=20=ED=81=B4=EB=A6=AD=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=ED=99=98=EA=B2=BD=EC=B2=AD=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=EB=A5=BC=20=EC=8B=9C=EB=8F=84=20=EC=8B=9C?= =?UTF-8?q?=EA=B5=B0=EA=B5=AC=EC=97=90=20=EC=B6=94=EA=B0=80.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/search_base_form/index.tsx | 36 ++++++-------- .../src/ui/search_form_left/index.tsx | 49 +++++++++---------- 2 files changed, 37 insertions(+), 48 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 93de69169..ae68ad301 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 @@ -14,25 +14,24 @@ type SearchBaseType = { selectEnvPartData?: EnvPartSelectDataType[] | []; queryClick:(returnType:ReturnType) => void; excelClick:(returnType:ReturnType) => void; + initClick:() => void; btnClass:string; - ref:React.RefObject; + ref:React.RefObject; } export type ReturnType = { partValue: string; - sidoValue: string; - sigunValue: string; - regionValue: string; + sidoValue: string; + sigunValue: string; + regionValue: string; unitWaterShedValue: string; middleRegionValue: string; envPartValue: string; - envPartSidoValue: string; - envPartSigunValue: string; } function SearchBaseForm ({ - leftChildren, - rightChildren, + leftChildren, + rightChildren, selectSidoData, selectSigunData, selectRegionData, @@ -42,17 +41,16 @@ function SearchBaseForm ({ btnClass, queryClick, excelClick, + initClick, ref }: SearchBaseType) { - const [partValue, setPartValue] = useState("0"); + const [partValue, setPartValue] = useState("A"); const [sidoValue, setSidoValue] = useState("0"); const [sigunValue, setSigunValue] = useState("0"); const [regionValue, setRegionValue] = useState("0"); const [untitWaterShedValue, setUntitWaterShedValue] = useState("0"); const [middleRegionValue, setMiddleRegionValue] = useState("0"); const [envPartValue, setEnvPartValue] = useState("0"); - const [envPartSidoValue, setEnvPartSidoValue] = useState("0"); - const [envPartSigunValue, setEnvPartSigunValue] = useState("0"); const [resetTrigger, setResetTrigger] = useState(false); const queryVal = () => { console.log("조회버튼 클릭"); @@ -64,8 +62,6 @@ function SearchBaseForm ({ unitWaterShedValue: untitWaterShedValue, middleRegionValue: middleRegionValue, envPartValue: envPartValue, - envPartSidoValue: envPartSidoValue, - envPartSigunValue: envPartSigunValue, }); } const initVal = useCallback(() => { @@ -85,13 +81,11 @@ function SearchBaseForm ({ unitWaterShedValue: untitWaterShedValue, middleRegionValue: middleRegionValue, envPartValue: envPartValue, - envPartSidoValue: envPartSidoValue, - envPartSigunValue: envPartSigunValue, }) }; useEffect(() => { if (ref && ref.current) { - const customRef = ref.current as HTMLDivElement & ReturnType; + const customRef = ref.current; customRef.partValue = partValue; customRef.sidoValue = sidoValue; customRef.sigunValue = sigunValue; @@ -99,10 +93,8 @@ function SearchBaseForm ({ customRef.unitWaterShedValue = untitWaterShedValue; customRef.middleRegionValue = middleRegionValue; customRef.envPartValue = envPartValue; - customRef.envPartSidoValue = envPartSidoValue; - customRef.envPartSigunValue = envPartSigunValue; } - }, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, envPartSidoValue, envPartSigunValue]); + }, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, ref]); return (
{leftChildren} @@ -130,7 +122,7 @@ function SearchBaseForm ({ 엑셀다운로드
-
-