From f446dde591213e375c2e44e9ca38f83a63d38743 Mon Sep 17 00:00:00 2001 From: swcho Date: Wed, 28 May 2025 17:10:56 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20-=20SelectBox=20Width=20=EA=B3=A0?= =?UTF-8?q?=EC=A0=95=20-=20I/I=EB=B6=84=EC=84=9D=20JSON=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=EC=97=90=20=ED=8C=8C=EC=9D=BC=EB=AA=85=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20-=20=EC=8B=9C=EB=8F=84=EC=8B=9C=EA=B5=B0?= =?UTF-8?q?=EA=B5=AC=20=EB=A7=A4=ED=95=91=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 --- .../components/ui/SidoSigunguSelectBox.tsx | 34 ++--- .../app/components/ui/YearRangeSelectBox.tsx | 4 +- apps/sn/app/components/ui/formSection.tsx | 2 +- apps/sn/app/ii/irsetting/page.tsx | 9 +- apps/sn/app/ii/rdii/page.tsx | 123 +++++++----------- apps/sn/app/map/SearchModal.tsx | 18 ++- 6 files changed, 83 insertions(+), 107 deletions(-) diff --git a/apps/sn/app/components/ui/SidoSigunguSelectBox.tsx b/apps/sn/app/components/ui/SidoSigunguSelectBox.tsx index d1f542583..18bc22337 100644 --- a/apps/sn/app/components/ui/SidoSigunguSelectBox.tsx +++ b/apps/sn/app/components/ui/SidoSigunguSelectBox.tsx @@ -15,7 +15,7 @@ interface SidoSigunguSelectBoxProps { } const sidoList: { id: number, name: string }[] = [ - { id: 0, name: '선택' }, + { id: 0, name: '전체' }, { id: 26, name: '부산광역시' }, { id: 28, name: '인천광역시' }, { id: 30, name: '대전광역시' }, @@ -29,19 +29,19 @@ const sidoList: { id: number, name: string }[] = [ ]; const sigunguMap: Record = { 26: [ - { id: 0, name: '선택' }, + { id: 0, name: '전체' }, // ...부산산광역시의 시군구 추가 ], 28: [ - { id: 0, name: '선택' }, + { id: 0, name: '전체' }, // ...인천광역시의 시군구 추가 ], 30: [ - { id: 0, name: '선택' }, + { id: 0, name: '전체' }, // ...대전광역시의 시군구 추가 ], 41: [ - { id: 0, name: '선택' }, + { id: 0, name: '전체' }, { id: 41820, name: '가평군' }, { id: 41550, name: '안성시' }, { id: 41830, name: '양평군' }, @@ -54,19 +54,19 @@ const sigunguMap: Record = { // ...경기도의 시군구 추가 ], 42: [ - { id: 0, name: '선택' }, + { id: 0, name: '전체' }, { id: 42170, name: '동해시' }, { id: 42110, name: '춘천시' }, { id: 42720, name: '홍천군' }, // ...강원도의 시군구 추가 ], 44: [ - { id: 0, name: '선택' }, + { id: 0, name: '전체' }, { id: 44770, name: '서천군' }, // ...충청남도의 시군구 추가 ], 45: [ - { id: 0, name: '선택' }, + { id: 0, name: '전체' }, { id: 45130, name: '군산시' }, { id: 45190, name: '남원시' }, { id: 45730, name: '무주군' }, @@ -79,7 +79,7 @@ const sigunguMap: Record = { // ...전라북도의 시군구 추가 ], 46: [ - { id: 0, name: '선택' }, + { id: 0, name: '전체' }, { id: 46810, name: "강진군" }, { id: 46770, name: "고흥군" }, { id: 46720, name: "곡성군" }, @@ -95,7 +95,7 @@ const sigunguMap: Record = { // ...전라남도의 시군구 추가 ], 47: [ - { id: 0, name: '선택' }, + { id: 0, name: '전체' }, { id: 47130, name: "경주시" }, { id: 47830, name: "고령군" }, { id: 47190, name: "구미시" }, @@ -116,7 +116,7 @@ const sigunguMap: Record = { // ...경상북도의 시군구 추가 ], 48: [ - { id: 0, name: '선택' }, + { id: 0, name: '전체' }, { id: 48310, name: "거제시" }, { id: 48250, name: "김해시" }, { id: 48270, name: "밀양시" }, @@ -134,23 +134,23 @@ export function SidoSigunguSelectBox({ className = "", }: SidoSigunguSelectBoxProps) { // 선택된 시도에 따라 시군구 리스트를 가져옴 - const sigunguList = useMemo(() => sigunguMap[sido] || [{ id: 0, name: '선택' }], [sido]); + const sigunguList = useMemo(() => sigunguMap[sido] || [{ id: 0, name: '전체' }], [sido]); return (
({ val: opt.id, text: opt.name }))} value={sido} onSelectValue={val => onSidoChange(Number(val))} /> ({ val: opt.id, text: opt.name }))} + selectArray={sigunguList.map(opt => ({ val: opt.id, text: opt.name }))} value={sigungu} onSelectValue={val => onSigunguChange(Number(val))} /> diff --git a/apps/sn/app/components/ui/YearRangeSelectBox.tsx b/apps/sn/app/components/ui/YearRangeSelectBox.tsx index 312c03e58..6c691cec1 100644 --- a/apps/sn/app/components/ui/YearRangeSelectBox.tsx +++ b/apps/sn/app/components/ui/YearRangeSelectBox.tsx @@ -64,7 +64,7 @@ export function YearRangeSelectBox({ minYear = 1900, maxYear = new Date().getFullYear(), className = "", - selectClass = "rounded-lg bg-white" + selectClass = "w-24 rounded-lg bg-white" }: YearRangeSelectBoxProps) { // 시작년도 배열 const getStartYearArray = () => { @@ -90,7 +90,7 @@ export function YearRangeSelectBox({ return (
{ return ( -
+
{titleNm}
{ setSelect4(''); setSelect5(''); setFormResetKey(prevKey => prevKey + 1); // FileUploadForm 재마운트를 위해 key 변경 - // FileUploadForm 내부의 파일명 표시 등을 초기화하려면 - // FileUploadForm 컴포넌트 자체에 reset 로직 또는 key 변경을 통한 재마운트 전략이 필요할 수 있습니다. - // 현재 구조에서는 FileUploadForm의 내부 상태를 직접 초기화하기 어렵습니다. - // 가장 간단한 방법은 FileUploadForm에 key prop을 주고, 초기화 시 key를 변경하여 강제로 재렌더링하는 것입니다. - // 예: setFormResetKey(prev => prev + 1) }; // FileUploadForm의 onFileSelect prop으로 전달될 콜백 함수 @@ -212,6 +207,10 @@ const IrSetting = () => { anlsInfo: input2, // 분석정보 atflCd: file1?.atflCd, // 첨부파일CD (오수관망도) atflId: file1?.atflId, // 첨부파일ID (오수관망도) + atflInpNm: file1?.file?.name, // 오수관망도 파일명 + atflHrPttnNm: file3?.file?.name, // 오수량 시간패턴 파일명 + atflMpngNm: file2?.file?.name, // 수용가-맨홀 매칭결과 파일명 + atflOilqNm: file4?.file?.name, // 유량자료 파일명 tbSnRcptrMhlMpng: matchingResultData, // 수용가-맨홀 매칭결과 tbSnHrPttn: timePatternData, // 오수량 시간패턴 tbSnOilqData: flowRateData, // 유량자료 diff --git a/apps/sn/app/ii/rdii/page.tsx b/apps/sn/app/ii/rdii/page.tsx index 7abaa7814..b51219f71 100644 --- a/apps/sn/app/ii/rdii/page.tsx +++ b/apps/sn/app/ii/rdii/page.tsx @@ -4,18 +4,17 @@ import { postData } from '@/components/lib/api' import FileUploadForm from "@/components/ui/fileUploadForm" import FormSection from "@/components/ui/formSection" import BaseLayout from "@/ii/BaseLayout" -import { UiTable, filePicked } from "@common/business_components/ui" +import { filePicked } from "@common/business_components/ui" import { Button, DatePicker, Input } from "@common/components/ui" import { zodResolver } from "@hookform/resolvers/zod" +import { Label } from '@radix-ui/react-label' import { useState } from "react" import { useFieldArray, useForm } from "react-hook-form" import { z } from "zod" import { excelToMatchingResultData, excelToRainData } from '../../components/lib/utils/excelToJson' -import { EditableFormTable, type EditableTableHeadItem } from '../../components/ui/EditableFormTable'; -import { Label } from '@radix-ui/react-label' +import { EditableFormTable, type EditableTableHeadItem } from '../../components/ui/EditableFormTable' -// TODO: 컴포넌트 호출 ~ 필요 코드 수정해야댐 // zod 스키마 정의 const formSchema = z.object({ enoCd: z.string(), // 환경청코드 @@ -46,9 +45,8 @@ const formSchema = z.object({ date: z.date(), // date: z.coerce.date(), }) - +// zod 스키마 타입 추론 type FormSchemaType = z.infer; - // 기본 폼 값 정의 const defaultFormValues: FormSchemaType = { enoCd: "", @@ -82,8 +80,6 @@ interface UploadedFileInfo { file: File | null; atflCd: string | null; atflId: string | null; - // 필요하다면 파일 이름 등 추가 정보 저장 가능 - // fileName: string; } // 초기 파일 정보 상태 @@ -94,7 +90,6 @@ export default function RTKForm() { // FileUploadForm에서 전달받은 파일 정보를 저장할 상태 배열 // 각 인덱스는 FileUploadForm의 fileIdx와 매칭됨 - // 예: 0: 오수관망도, 1: 수용가-맨홀, 2: 강우자료 const [uploadedFilesData, setUploadedFilesData] = useState([ initialFileInfo, // 0: 오수관망도 initialFileInfo, // 1: 수용가-맨홀 매칭결과 @@ -106,34 +101,6 @@ export default function RTKForm() { resolver: zodResolver(formSchema), defaultValues: defaultFormValues }); - // const form = useForm>({ - // resolver: zodResolver(formSchema), - // defaultValues: { - // enoCd: "", // 환경청코드 - // ctpvCd: "", // 시도코드 - // sggCd: "", // 시군구코드 - // swageTmplntCd: "", // 하수처리장코드 - // swtrmtZoneCd: "", // 하수처리구역코드 - // rtkSource: "", // RTK계수 출처 - // rdiiArea: 0, // RDII 기여면적 - // unitFactors: [ - // { response: "Short-Term", R: 0, T: 0, K: 0 }, - // { response: "Medium-Term", R: 0, T: 0, K: 0 }, - // { response: "Long-Term", R: 0, T: 0, K: 0 }, - // ], - // initialDepths: [ - // { response: "Short-Term", Dmax: 0, Drec: 0, Do: 0 }, - // { response: "Medium-Term", Dmax: 0, Drec: 0, Do: 0 }, - // { response: "Long-Term", Dmax: 0, Drec: 0, Do: 0 }, - // ], - // // osumap: undefined, - // // matching: undefined, - // aplcnYm: "", - // rate: 0, - // // rain: undefined, - // analysisInfo: "", - // } - // }); // 폼 초기화 함수 const resetAllForms = () => { @@ -246,34 +213,37 @@ export default function RTKForm() { swtrmtZoneCd: "", // 하수처리구역코드 atflCd: file1?.atflCd, // 첨부파일CD (오수관망도) atflId: file1?.atflId, // 첨부파일ID (오수관망도) + atflInpNm: file1?.file?.name || "", // 오수관망도 파일명 + atflMpngNm: file2?.file?.name || "", // 수용가-맨홀 매칭결과 파일명 + atflRainNm: file3?.file?.name || "", // 강우자료 파일명 cntbArea: parseFloat("rdiiArea") || null, // RDII 기여면적(ha) srcNm: "", // 출처이름 (RTK계수 출처) - shortPrdR: parseFloat(formData.unitFactors[0]?.R !== undefined ? String(formData.unitFactors[0]?.R) : "0") || null, // 단기간R - shortPrdT: parseFloat(formData.unitFactors[0]?.T !== undefined ? String(formData.unitFactors[0]?.T) : "0") || null, // 단기간T - shortPrdK: parseFloat(formData.unitFactors[0]?.K !== undefined ? String(formData.unitFactors[0]?.K) : "0") || null, // 단기간K + shortPrdR: parseFloat(formData.unitFactors[0]?.R !== undefined ? formData.unitFactors[0]?.R : "0") || null, // 단기간R + shortPrdT: parseFloat(formData.unitFactors[0]?.T !== undefined ? formData.unitFactors[0]?.T : "0") || null, // 단기간T + shortPrdK: parseFloat(formData.unitFactors[0]?.K !== undefined ? formData.unitFactors[0]?.K : "0") || null, // 단기간K - mdPrdR: parseFloat(formData.unitFactors[1]?.R !== undefined ? String(formData.unitFactors[1]?.R) : "0") || null, // 중간기간R - mdPrdT: parseFloat(formData.unitFactors[1]?.T !== undefined ? String(formData.unitFactors[1]?.T) : "0") || null, // 중간기간T - mdPrdK: parseFloat(formData.unitFactors[1]?.K !== undefined ? String(formData.unitFactors[1]?.K) : "0") || null, // 중간기간K + mdPrdR: parseFloat(formData.unitFactors[1]?.R !== undefined ? formData.unitFactors[1]?.R : "0") || null, // 중간기간R + mdPrdT: parseFloat(formData.unitFactors[1]?.T !== undefined ? formData.unitFactors[1]?.T : "0") || null, // 중간기간T + mdPrdK: parseFloat(formData.unitFactors[1]?.K !== undefined ? formData.unitFactors[1]?.K : "0") || null, // 중간기간K - longPrdR: parseFloat(formData.unitFactors[2]?.R !== undefined ? String(formData.unitFactors[2]?.R) : "0") || null, // 장기간R - longPrdT: parseFloat(formData.unitFactors[2]?.T !== undefined ? String(formData.unitFactors[2]?.T) : "0") || null, // 장기간T - longPrdK: parseFloat(formData.unitFactors[2]?.K !== undefined ? String(formData.unitFactors[2]?.K) : "0") || null, // 장기간K + longPrdR: parseFloat(formData.unitFactors[2]?.R !== undefined ? formData.unitFactors[2]?.R : "0") || null, // 장기간R + longPrdT: parseFloat(formData.unitFactors[2]?.T !== undefined ? formData.unitFactors[2]?.T : "0") || null, // 장기간T + longPrdK: parseFloat(formData.unitFactors[2]?.K !== undefined ? formData.unitFactors[2]?.K : "0") || null, // 장기간K - shortPrdMaxDpth: parseFloat(formData.initialDepths[0]?.Dmax !== undefined ? String(formData.initialDepths[0]?.Dmax) : "0") || null, // 단기간최대깊이 - shortPrdRcvryRt: parseFloat(formData.initialDepths[0]?.Drec !== undefined ? String(formData.initialDepths[0]?.Drec) : "0") || null, // 단기간회복비율 - shortPrdBgngDpth: parseFloat(formData.initialDepths[0]?.Do !== undefined ? String(formData.initialDepths[0]?.Do) : "0") || null, // 단기간시작깊이 + shortPrdMaxDpth: parseFloat(formData.initialDepths[0]?.Dmax !== undefined ? formData.initialDepths[0]?.Dmax : "0") || null, // 단기간최대깊이 + shortPrdRcvryRt: parseFloat(formData.initialDepths[0]?.Drec !== undefined ? formData.initialDepths[0]?.Drec : "0") || null, // 단기간회복비율 + shortPrdBgngDpth: parseFloat(formData.initialDepths[0]?.Do !== undefined ? formData.initialDepths[0]?.Do : "0") || null, // 단기간시작깊이 - mdPrdMaxDpth: parseFloat(formData.initialDepths[1]?.Dmax !== undefined ? String(formData.initialDepths[1]?.Dmax) : "0") || null, // 중간기간최대깊이 - mdPrdRcvryRt: parseFloat(formData.initialDepths[1]?.Drec !== undefined ? String(formData.initialDepths[1]?.Drec) : "0") || null, // 중간기간회복비율 - mdPrdBgngDpth: parseFloat(formData.initialDepths[1]?.Do !== undefined ? String(formData.initialDepths[1]?.Do) : "0") || null, // 중간기간시작깊이 + mdPrdMaxDpth: parseFloat(formData.initialDepths[1]?.Dmax !== undefined ? formData.initialDepths[1]?.Dmax : "0") || null, // 중간기간최대깊이 + mdPrdRcvryRt: parseFloat(formData.initialDepths[1]?.Drec !== undefined ? formData.initialDepths[1]?.Drec : "0") || null, // 중간기간회복비율 + mdPrdBgngDpth: parseFloat(formData.initialDepths[1]?.Do !== undefined ? formData.initialDepths[1]?.Do : "0") || null, // 중간기간시작깊이 - longTermMaxDpth: parseFloat(formData.initialDepths[2]?.Dmax !== undefined ? String(formData.initialDepths[2]?.Dmax) : "0") || null, // 장기간최대깊이 - longTermRcvryRt: parseFloat(formData.initialDepths[2]?.Drec !== undefined ? String(formData.initialDepths[2]?.Drec) : "0") || null, // 장기간회복비율 - longTermBgngDpth: parseFloat(formData.initialDepths[2]?.Do !== undefined ? String(formData.initialDepths[2]?.Do) : "0") || null, // 장기간시작깊이 + longTermMaxDpth: parseFloat(formData.initialDepths[2]?.Dmax !== undefined ? formData.initialDepths[2]?.Dmax : "0") || null, // 장기간최대깊이 + longTermRcvryRt: parseFloat(formData.initialDepths[2]?.Drec !== undefined ? formData.initialDepths[2]?.Drec : "0") || null, // 장기간회복비율 + longTermBgngDpth: parseFloat(formData.initialDepths[2]?.Do !== undefined ? formData.initialDepths[2]?.Do : "0") || null, // 장기간시작깊이 - dtrwSwtcRt: parseFloat(formData.rate !== undefined ? String(formData.rate) : "0") || null, // 오수전환율 + dtrwSwtcRt: parseFloat(formData.rate !== undefined ? formData.rate : "0") || null, // 오수전환율 anlsInfo: "", // 분석정보 tbSnRcptrMhlMpng: matchingResultData, // 수용가-맨홀 매칭결과 @@ -332,10 +302,10 @@ export default function RTKForm() { {[
- + - +
@@ -360,7 +330,7 @@ export default function RTKForm() {
-
+
handleFileSelection(0, file, cd, id)} @@ -369,7 +339,7 @@ export default function RTKForm() { accept={""} fileIdx={0} />
-
+
handleFileSelection(1, file, cd, id)} @@ -378,21 +348,7 @@ export default function RTKForm() { accept={".xls, .xlsx, .xlsm, .xltx"} fileIdx={1} />
- - { - if (date) { - form.setValue("date", date, { shouldValidate: true }); - } - }} - mode={"single"} - /> - - - - -
+
handleFileSelection(2, file, cd, id)} @@ -401,8 +357,23 @@ export default function RTKForm() { accept={".xls, .xlsx, .xlsm, .xltx"} fileIdx={2} />
+ + + + + { + if (date) { + form.setValue("date", date, { shouldValidate: true }); + } + }} + mode={"single"} + className="ml-5" + /> + - +
diff --git a/apps/sn/app/map/SearchModal.tsx b/apps/sn/app/map/SearchModal.tsx index b817e5d2e..3fe733cfe 100644 --- a/apps/sn/app/map/SearchModal.tsx +++ b/apps/sn/app/map/SearchModal.tsx @@ -438,7 +438,7 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature
= ({ open, onOpenChange, onFeature { + set시도(sidoId); + set시군구(0); + }} onSigunguChange={set시군구} /> @@ -851,7 +854,7 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature
({ val: w.val, text: w.text }))} @@ -896,12 +899,15 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature { + set시도(sidoId); + set시군구(0); + }} onSigunguChange={set시군구} /> ({ val: opt.val, text: opt.text }))} onSelectValue={val => set처리구역(String(val))} @@ -1010,7 +1016,7 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature z-[101] `} body={renderBody()} - headerTitle="검색" + // headerTitle="검색" // 필요시 footerContent 등 추가 /> );