feat:

- 침입수 분석, RDII 분석 버튼 위치 변경 및 레이아웃 변경 - RDII 분석 null 값 입력 문제 수정
2025-06-10 14:10:17 +09:00
parent 28830ac66d
commit 761c3f8c4c
3 changed files with 62 additions and 36 deletions
@@ -36,6 +36,7 @@ type BaseLayout = {
    form: any
    onSubmitEvent: Function
    graphBtn?: boolean
+    analysisBtn?: string
    firstDivBtn?: boolean
    selectBox?: SelectBox
    showDatePicker?: boolean;
@@ -55,6 +56,7 @@ type BaseLayout = {
    // Excel 다운로드 관련 props 추가
    onExcelDownload?: () => void;
    onDeleteFile?: () => void;
+    onAnalysis?: () => void;
    selectedRowData?: any;
 }
 // TODO: 나중에 이벤트 추가되면 파라미터 추가 필요 ?
@@ -73,6 +75,7 @@ const BaseLayout = ({
    form,
    onSubmitEvent,
    graphBtn = false,
+    analysisBtn,
    selectBox,
    showDatePicker = false,
    enoCd,
@@ -91,6 +94,7 @@ const BaseLayout = ({
    // Excel 다운로드 관련 props 추가
    onExcelDownload,
    onDeleteFile,
+    onAnalysis,
    selectedRowData
 }: BaseLayout) => {

@@ -228,16 +232,18 @@ const BaseLayout = ({
                            <SelectBox2 label={"하수처리장"} value={selectedSwageTreatmentPlant} selectArray={treatmentFacilityOptions} className="col-span-3" selectClass="rounded-lg bg-white truncate" onSelectValue={(val) => onSwageTreatmentPlantChange?.(val)} />
                            <SelectBox2 label={"하수처리구역"} value={selectedSwageProcessingZone} selectArray={processingZoneOptions} className="col-span-3" selectClass="rounded-lg bg-white truncate" onSelectValue={(val) => onSwageProcessingZoneChange?.(val)} />
                        </GovSidoSigunguSearchForm>
-                        {selectBox?.searchChk ? <SearchFormRight><Button onClick={() => selectBox.onSearchClick?.()}>조회</Button></SearchFormRight> : null}
+                        {selectBox?.searchChk ? <SearchFormRight><Button size="sm" onClick={() => selectBox.onSearchClick?.()}>조회</Button></SearchFormRight> : null}
                    </div>
                </ListDiv>
                <ListDiv>
                    <div className="card-header">
                        <h3 className="text-2xl font-medium">{titleName.firstCardTitle}</h3>
                        <div>
-                            {graphBtn ? <Button className="px-4 py-2 !mr-[1.2rem] bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" onClick={isChckFile}>파일 다운로드</Button> : null}
+                            {graphBtn ? <Button className="px-4 py-2 !mr-[1.2rem] bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" onClick={isChckFile}>파일 다운로드</Button> : null}
                            {/* 그래프 있을 시 */}
-                            {graphBtn ? <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" onClick={isDeleteFile}>삭제</Button> : null}
+                            {graphBtn ? <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" onClick={isDeleteFile}>삭제</Button> : null}
+                            {/* 분석 버튼 */}
+                            {analysisBtn ? <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" onClick={onAnalysis}>{analysisBtn}</Button> : null}
                        </div>
                    </div>
                    <Form {...form}>
@@ -254,9 +260,9 @@ const BaseLayout = ({
                        <div className="card-header flex items-center justify-between">
                            <h3 className="text-2xl font-medium">{titleName?.secondCardTitle}</h3>
                            <div>
-                                {graphBtn ? <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]">파일 다운로드</Button> : null}
+                                {graphBtn ? <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm">파일 다운로드</Button> : null}
                                {/* 그래프 있을 시 */}
-                                {graphBtn ? <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]">삭제</Button> : null}
+                                {graphBtn ? <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm">삭제</Button> : null}
                            </div>
                        </div>
                        <div className="card !m-[1.2rem]">{children?.[1]}</div>
@@ -3,7 +3,8 @@ import { postData } from '@/components/lib/api'
 import FileUploadForm from '@/components/ui/fileUploadForm'
 import FormSection from '@/components/ui/formSection'
 import { DatePicker, filePicked } from '@common/business_components/ui'
-import { Button, Input } from '@common/components/ui'
+import ListDiv from '@common/business_components/ui/list_div'
+import { Input } from '@common/components/ui'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
@@ -147,6 +148,7 @@ const IrSetting = () => {
        // 모든 필수 파일이 선택되었는지 확인 (UploadedFileInfo 객체와 그 안의 file 객체 모두 확인)
        // 유량자료는 선택값
        if (!file1?.file || !file2?.file || !file3?.file) {
+            setIsLoadingResult(false);
            alert('모든 분석용 파일을 선택해주세요.');
            return;
        }
@@ -240,10 +242,11 @@ const IrSetting = () => {
    return (
        <>
            <BaseLayout
-                titleName={{ mainTitle: '침입수 분석', firstCardTitle: '침입수 분석 자료 입력', secondCardTitle: '실측자료 등록' }}
+                titleName={{ mainTitle: '침입수 분석', firstCardTitle: '침입수 분석 자료 입력' }}
                form={form}
                onSubmitEvent={() => { }}
                graphBtn={false}
+                analysisBtn={'침입수분석 실행'}
                selectBox={{ title: '분석 대상지역 선택' }}
                enoCd={select1}
                setEnoCd={setSelect1}
@@ -256,8 +259,9 @@ const IrSetting = () => {
                selectedSwageProcessingZone={select5}
                onSwageProcessingZoneChange={setSelect5}
                isLoading={isLoadingResult}
+                onAnalysis={handleAnalysisClick}
            >
-                <div className="grid gap-4">
+                {[<div className="grid gap-4">
                    <FormSection name='suyeongaPlace' form={form} titleNm='▷ 오수관망도'>
                        <FileUploadForm
                            key={`file-upload-0-${formResetKey}`} // 폼 초기화를 위한 key
@@ -338,8 +342,22 @@ const IrSetting = () => {
                            onChange={(e) => setInput2(e.target.value)}
                            className="ml-5 h-[3.2rem] text-center text-xl w-[150px]" />
                    </FormSection>
-                </div>
-                <div className="flex items-center gap-4">
+                    <ListDiv>
+                        <div className="card !m-[1.2rem]">
+                            <FormSection name='region' form={form} titleNm='▷ 유량자료 등록'>
+                                <FileUploadForm
+                                key={`file-upload-3-${formResetKey}`} // 폼 초기화를 위한 key
+                                onFileSelect={(file, cd, id) => handleFileSelection(3, file, cd, id)}
+                                showButton={false}
+                                showPreview={true}
+                                accept={".xls, .xlsx, .xlsm, .xltx"}
+                                fileIdx={3} 
+                                />
+                            </FormSection>
+                        </div>
+                    </ListDiv>
+                </div>]}
+                {/* <div className="flex items-center gap-4">
                    <FormSection
                        name='region' form={form} titleNm='▷ 유량자료 등록'>
                        <FileUploadForm
@@ -351,9 +369,9 @@ const IrSetting = () => {
                            fileIdx={3} />
                    </FormSection>
                    <div className="flex justify-center mt-1">
-                        <Button type="submit" onClick={handleAnalysisClick}>침입수분석 실행</Button>
+                        <Button size="sm" type="submit" onClick={handleAnalysisClick}>침입수분석 실행</Button>
                    </div>
-                </div>
+                </div> */}
            </BaseLayout>
        </>
    )
@@ -5,7 +5,7 @@ import FileUploadForm from "@/components/ui/fileUploadForm"
 import FormSection from "@/components/ui/formSection"
 import BaseLayout from "@/ii/BaseLayout"
 import { DatePicker, filePicked } from "@common/business_components/ui"
-import { Button, Input } from "@common/components/ui"
+import { Input } from "@common/components/ui"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { Label } from '@radix-ui/react-label'
 import { useState } from "react"
@@ -175,6 +175,7 @@ export default function RTKForm() {

        // 모든 필수 파일이 선택되었는지 확인
        if (!file1?.file || !file2?.file || !file3?.file) {
+            setIsLoadingResult(false);
            alert('모든 분석용 파일을 선택해주세요.');
            return;
        }
@@ -235,31 +236,31 @@ export default function RTKForm() {
                cntbArea: parseFloat(formData.rdiiArea) || null, // RDII 기여면적(ha)
                srcNm: formData.rtkSource, // 출처이름 (RTK계수 출처)

-                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
+                shortPrdR: parseFloat(formData.unitFactors[0]?.R || "0"),
+                shortPrdT: parseFloat(formData.unitFactors[0]?.T || "0"),
+                shortPrdK: parseFloat(formData.unitFactors[0]?.K || "0"),

-                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
+                mdPrdR: parseFloat(formData.unitFactors[1]?.R || "0"),
+                mdPrdT: parseFloat(formData.unitFactors[1]?.T || "0"),
+                mdPrdK: parseFloat(formData.unitFactors[1]?.K || "0"),

-                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
+                longPrdR: parseFloat(formData.unitFactors[2]?.R || "0"),
+                longPrdT: parseFloat(formData.unitFactors[2]?.T || "0"),
+                longPrdK: parseFloat(formData.unitFactors[2]?.K || "0"),

-                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, // 단기간시작깊이
+                shortPrdMaxDpth: parseFloat(formData.initialDepths[0]?.Dmax || "0"),
+                shortPrdRcvryRt: parseFloat(formData.initialDepths[0]?.Drec || "0"),
+                shortPrdBgngDpth: parseFloat(formData.initialDepths[0]?.Do || "0"),

-                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, // 중간기간시작깊이
+                mdPrdMaxDpth: parseFloat(formData.initialDepths[1]?.Dmax || "0"),
+                mdPrdRcvryRt: parseFloat(formData.initialDepths[1]?.Drec || "0"),
+                mdPrdBgngDpth: parseFloat(formData.initialDepths[1]?.Do || "0"),

-                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, // 장기간시작깊이
+                longTermMaxDpth: parseFloat(formData.initialDepths[2]?.Dmax || "0"),
+                longTermRcvryRt: parseFloat(formData.initialDepths[2]?.Drec || "0"),
+                longTermBgngDpth: parseFloat(formData.initialDepths[2]?.Do || "0"),

-                drtwSwtcRt: parseFloat(formData.rate !== undefined ? formData.rate : "0") || null, // 오수전환율
+                drtwSwtcRt: parseFloat(formData.rate || "0"), // 오수전환율
                anlsInfo: formData.analysisInfo, // 분석정보

                tbSnRcptrMhlMpng: matchingResultData, // 수용가-맨홀 매칭결과
@@ -322,7 +323,7 @@ export default function RTKForm() {
            form={form} // react-hook-form 인스턴스 전달
            onSubmitEvent={() => { }} // BaseLayout의 form 태그에 연결될 onSubmit
            graphBtn={false}
-            // select 상태 및 핸들러 전달
+            analysisBtn={'RDII분석 실행'}
            enoCd={select1}
            setEnoCd={setSelect1}
            ctpvCd={select2}
@@ -334,6 +335,7 @@ export default function RTKForm() {
            selectedSwageProcessingZone={select5}
            onSwageProcessingZoneChange={setSelect5}
            isLoading={isLoadingResult}
+            onAnalysis={handleAnalysisClick}
        >
            {[<div className="space-y-[1.2rem] overflow-x-auto pt-4 pb-4 px-2" key="form-section">
                <div className="grid grid-cols-2 gap-4">
@@ -426,9 +428,9 @@ export default function RTKForm() {
                        <Input {...form.register("analysisInfo")} className="h-12 text-center text-xl w-[225px] ml-5" />
                    </FormSection>
                </div>
-                <div className="flex justify-end mt-1">
-                    <Button type="submit" onClick={handleAnalysisClick}>RDII분석 실행</Button>
-                </div>
+                {/* <div className="flex justify-end mt-1">
+                    <Button size="sm" type="submit" onClick={handleAnalysisClick}>RDII분석 실행</Button>
+                </div> */}
            </div>
            ]}
        </BaseLayout >