Merge commit 'c8be143b7c9daef227b0f0378b2e443264e6f8d8' into iipbs/sn/oi

apps/sn/app/components/ui/fileUploadForm.tsx

@@ -1,44 +1,62 @@
 "use client"
-import { SelectBox } from '@common/business_components/ui';
-import { Button, Input } from '@common/components/ui';
-import React, { useState, useId } from 'react'
-import type { HttpResponse, Upload } from "tus-js-client";
 import { FileUploader } from "@common/components";
+import { Button } from '@common/components/ui';
 import { handleUpload } from "@utils";
-import { set } from 'react-hook-form';
+import { useId, useState } from 'react';
+import type { HttpResponse, Upload } from "tus-js-client";
 
 interface FileUploadFormProps {
-    onSubmit: (files: string, year: string, quarter: string, code: string, id: string) => void;
+    onSubmit?: (files: string, year: string, quarter: string, code: string, id: string) => void;
+    onFileSelect?: (file: File | null, atflCd: string | null, atflId: string | null) => void; // 파일 선택 시 호출될 콜백 추가
     showButton?: boolean; // 버튼 표시 여부 (기본값 true)
     showPreview?: boolean; // 파일명 프리뷰 표시 여부
     accept?: string; // 파일 형식 지정
+    fileIdx?: number; // 부모가 어떤 FileUploadForm인지 구분하기 위한 인덱스
 }
 
-const FileUploadForm = ({ onSubmit, showButton = true, showPreview = false, accept = ".jpeg,.jpg,.png", }: FileUploadFormProps) => {
-    const [atflCd, setAtflCd] = useState<string | null>(null);
-    const [atflId, setAtflId] = useState<string | null>(null);
+const FileUploadForm = ({
+    onSubmit,
+    onFileSelect,
+    showButton = true,
+    showPreview = false,
+    accept = ".jpeg, .jpg, .png",
+    fileIdx // props에서 fileIdx 받기
+}: FileUploadFormProps) => {
+    const [internalAtflCd, setInternalAtflCd] = useState<string | null>(null);
+    const [internalAtflId, setInternalAtflId] = useState<string | null>(null);
+    const [currentFile, setCurrentFile] = useState<File | null>(null); // 현재 선택된 파일을 저장할 상태
     const [fileName, setFileName] = useState<string>('');
-    const handleUploadResponse = (file: File) => async (res: HttpResponse) => {
-        const fileInfo = res.getHeader("X-File-Info");
-        if (!fileInfo) return;
-        const { atflCd, atflId } = JSON.parse(fileInfo) ?? {};
-        const orgnlFileNm = file.name;
-        setFileName(orgnlFileNm);
-        setAtflCd(atflCd);
-        setAtflId(atflId);
-    };
+    const [files, setFiles] = useState<FileList | null>(null);
+    const [upload, setUpload] = useState<Upload | null>(null);
+    const uniqueId = useId(); // 각 FileUploadForm 인스턴스에 대한 고유 ID 생성
 
+    const quater = [{ text: '1분기', val: '1' }, { text: '2분기', val: '2' }, { text: '3분기', val: '3' }, { text: '4분기', val: '4' }];
     // 현재 년도부터 10년 전까지의 년도 옵션 생성
     const yearOptions = Array.from({ length: 10 }, (_, i) => {
         const year = new Date().getFullYear() - i;
         return { text: `${year}년`, val: year.toString() };
     });
-    const quater = [{ text: '1분기', val: '1' }, { text: '2분기', val: '2' }, { text: '3분기', val: '3' }, { text: '4분기', val: '4' }]
-    const [files, setFiles] = useState<FileList | null>(null);
     const [selectedYear, setSelectedYear] = useState<string>(yearOptions[0]?.val || '');
     const [selectedQuarter, setSelectedQuarter] = useState<string>(quater[0]?.val || '');
-    const [upload, setUpload] = useState<Upload | null>(null);
-    const uniqueId = useId(); // 각 FileUploadForm 인스턴스에 대한 고유 ID 생성
+
+    const internalHandleUploadResponse = (file: File) => async (res: HttpResponse) => {
+        const fileInfo = res.getHeader("X-File-Info");
+        if (!fileInfo) {
+            if (onFileSelect) onFileSelect(file, null, null);
+            return;
+        }
+        const { atflCd: newAtflCd, atflId: newAtflId } = JSON.parse(fileInfo) ?? {};
+        const orgnlFileNm = file.name;
+        console.log(`FileUploadForm (idx: ${fileIdx ?? 'N/A'}) - orgnlFileNm:`, orgnlFileNm, 'New AtflCd:', newAtflCd, 'New AtflId:', newAtflId);
+        setFileName(orgnlFileNm);
+        setInternalAtflCd(newAtflCd);
+        setInternalAtflId(newAtflId);
+
+        if (onFileSelect) {
+            onFileSelect(file, newAtflCd, newAtflId);
+        }
+    };
+
 
     return (
         <div> {/* 컴포넌트 루트 div */}
@@ -51,16 +69,34 @@ const FileUploadForm = ({ onSubmit, showButton = true, showPreview = false, acce
                             accept={accept}
                             onUpload={(e) => {
                                 const selectedFiles = e.target.files;
-                                if (!selectedFiles) return;
+                                if (!selectedFiles || selectedFiles.length === 0) {
+                                    setFiles(null);
+                                    setCurrentFile(null);
+                                    setInternalAtflCd(null);
+                                    setInternalAtflId(null);
+                                    if (onFileSelect) {
+                                        onFileSelect(null, null, null); // 파일 선택 취소 시 null 전달
+                                    }
+                                    return;
+                                }
+
+                                const firstFile = selectedFiles[0];
+                                if (!firstFile) return; // 타입스크립트 undefined 가능성 제거
 
                                 setFiles(selectedFiles);
-                                if (selectedFiles[0]) {
-                                    handleUpload(selectedFiles, {
-                                        handleUploadStart: setUpload,
-                                        handleSuccess: setUpload,
-                                        handleResponse: handleUploadResponse(selectedFiles[0]),
-                                    });
+                                setCurrentFile(firstFile);
+
+                                if (onFileSelect) {
+                                    onFileSelect(firstFile, internalAtflCd, internalAtflId);
                                 }
+
+                                handleUpload(selectedFiles, {
+                                    handleUploadStart: setUpload,
+                                    handleSuccess: setUpload,
+                                    // handleResponse는 tus-js-client의 Upload 인스턴스 콜백과 연동 필요
+                                    // 여기서는 handleUpload 유틸리티가 응답을 직접 처리한다고 가정
+                                    handleResponse: internalHandleUploadResponse(firstFile),
+                                });
                             }}
                             customPreview={
                                 showPreview ? (
@@ -73,13 +109,13 @@ const FileUploadForm = ({ onSubmit, showButton = true, showPreview = false, acce
                             }
                         />
                     </div>
-                    {showButton ? (
+                    {showButton ? ( // showButton이 true일 때만 버튼 렌더링
                         <Button
                             className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700"
                             size="sm"
                             onClick={() => {
                                 console.log(files?.[0]?.name)
-                                if (!files) {
+                                if (!currentFile) {
                                     alert('파일을 선택해주세요.');
                                     return;
                                 }
@@ -91,10 +127,13 @@ const FileUploadForm = ({ onSubmit, showButton = true, showPreview = false, acce
                                     alert('분기를 선택해주세요.');
                                     return;
                                 }
-                                const fileNm = files?.[0]?.name || '';
-                                onSubmit(fileNm, selectedYear, selectedQuarter, atflCd || '', atflId || '');
-                                setFiles(null); // 파일 업로드 후 파일 목록 초기화
-                                setFileName(''); // 파일명 초기화   
+                                const fileNm = currentFile.name;
+                                if (onSubmit) {
+                                    // 부모에게 전달할 때는 내부 상태인 internalAtflCd, internalAtflId 사용
+                                    onSubmit(fileNm, selectedYear, selectedQuarter, internalAtflCd || '', internalAtflId || '');
+                                    setFiles(null); // 파일 업로드 후 파일 목록 초기화
+                                    setFileName(''); // 파일명 초기화
+                                }
                             }}
                         >
                             등록

apps/sn/app/ii/irsetting/page.tsx

@@ -1,17 +1,15 @@
 'use client'
-import React, { useRef, useState } from 'react'
-import { Button, DatePicker, Input, FileUploader } from '@common/components/ui'
-import { z } from 'zod'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import FormSection from '@/components/ui/formSection'
-import BaseLayout from '../BaseLayout'
-import { filePicked, FileUpload } from '@common/business_components/ui'
-import { excelToflowRateData, excelToMatchingResultData, excelToTimePatternData } from '../../components/lib/utils/excelToJson'
-import { handleUpload } from '../../components/lib/utils/fileUploadUtil'
-import type { HttpResponse, Upload } from "tus-js-client";
+import { postData } from '@/components/lib/api'
 import FileUploadForm from '@/components/ui/fileUploadForm'
-import { deleteData, getData, postData } from '@/components/lib/api'
+import FormSection from '@/components/ui/formSection'
+import { filePicked } from '@common/business_components/ui'
+import { Button, DatePicker, Input } from '@common/components/ui'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { excelToflowRateData, excelToMatchingResultData, excelToTimePatternData } from '../../components/lib/utils/excelToJson'
+import BaseLayout from '../BaseLayout'
 
 const formSchema = z.object({
     managenm: z.string(),
@@ -22,7 +20,21 @@ const formSchema = z.object({
     suyeongaPlace: z.string(),
     pattern: z.string()
 })
-const region: { text: string, val: number }[] = [{ text: '양평', val: 1 }, { text: '강남', val: 2 }, { text: 'test', val: 3 }]
+
+// 각 파일 업로드 폼의 데이터를 저장할 인터페이스 정의
+interface UploadedFileInfo {
+    file: File | null;
+    atflCd: string | null;
+    atflId: string | null;
+    // 필요하다면 파일 이름 등 추가 정보 저장 가능
+    // fileName: string;
+}
+
+// 초기 파일 정보 상태
+const initialFileInfo: UploadedFileInfo = { file: null, atflCd: null, atflId: null };
+
+const region: { text: string, val: number }[] = [{ text: '양평', val: 1 }, { text: '강남', val: 2 }, { text: 'test', val: 3 }];
+
 const IrSetting = () => {
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
@@ -37,32 +49,16 @@ const IrSetting = () => {
         }
     })
 
-    const handleUploadResponse = (file: File) => async (res: HttpResponse) => {
-        const fileInfo = res.getHeader("X-File-Info");
-        if (!fileInfo) return;
-        const { atflCd, atflId } = JSON.parse(fileInfo) ?? {};
-        const orgnlFileNm = file.name;
-        console.log('orgnlFileNm', orgnlFileNm, atflCd, atflId);
-        setAtflCd(atflCd);
-        setAtflId(atflId);
-    };
-
-    // const fileInputRef1 = useRef<HTMLInputElement>(null);
-    // const fileInputRef2 = useRef<HTMLInputElement>(null);
-    // const fileInputRef3 = useRef<HTMLInputElement>(null);
-    // const fileInputRef4 = useRef<HTMLInputElement>(null);
-    const [fileInfos, setFileInfos] = useState([
-        { atflId: null, atflCd: null }, // 파일1
-        { atflId: null, atflCd: null }, // 파일2
-        { atflId: null, atflCd: null }, // 파일3
-        { atflId: null, atflCd: null }, // 파일4
+    // FileUploadForm에서 전달받은 파일 정보를 저장할 상태 배열
+    // 각 인덱스는 FileUploadForm의 fileIdx와 매칭됨
+    // 예: 0: 오수관망도, 1: 수용가-맨홀, 2: 오수량 시간패턴, 3: 유량자료
+    const [uploadedFilesData, setUploadedFilesData] = useState<UploadedFileInfo[]>([
+        initialFileInfo, // 0: 오수관망도
+        initialFileInfo, // 1: 수용가-맨홀 매칭결과
+        initialFileInfo, // 2: 오수량 시간패턴
+        initialFileInfo  // 3: 유량자료 등록
     ]);
-    const fileInputRef1 = useRef<HTMLInputElement>(null);
-    const fileInputRef2 = useRef<HTMLInputElement>(null);
-    const fileInputRef3 = useRef<HTMLInputElement>(null);
-    const [atflCd, setAtflCd] = useState<string | null>(null);
-    const [atflId, setAtflId] = useState<string | null>(null);
-    const [upload, setUpload] = useState<Upload | null>(null);
+
     const [selectedDate, setSelectedDate] = useState(new Date());
     const [input1, setInput1] = useState('');
     const [input2, setInput2] = useState('');
@@ -70,71 +66,167 @@ const IrSetting = () => {
     const [select2, setSelect2] = useState('');
     const [select3, setSelect3] = useState('');
     const [select4, setSelect4] = useState('');
+    const [select5, setSelect5] = useState('');
+    const [formResetKey, setFormResetKey] = useState(0); // FileUploadForm 리셋을 위한 key 상태
 
-    const registFile = async (
-        fileNm: string,
-        year: string,
-        quater: string,
-        cd: string,
-        id: string,
-        fileIdx: number // 추가: 파일 구분용 인덱스
-    ) => {
-        const data = await postData('v1/sbmrgPrevnt', {
-            atflNm: fileNm,
-            mngYr: year,
-            mngQu: quater,
-            atflCd: cd,
-            atflId: id
+    // 폼 초기화 함수
+    const resetAllForms = () => {
+        form.reset({ // react-hook-form 초기화
+            managenm: "",
+            region: "",
+            suyeonga: 0,
+            inputdate: new Date(),
+            rtkSource: "",
+            suyeongaPlace: "",
+            pattern: ""
         });
+        setUploadedFilesData([ // 파일 업로드 상태 초기화
+            initialFileInfo,
+            initialFileInfo,
+            initialFileInfo,
+            initialFileInfo
+        ]);
+        setSelectedDate(new Date()); // 날짜 선택 초기화
+        setInput1(''); // 입력 필드 초기화
+        setInput2(''); // 입력 필드 초기화
+        setSelect1(''); // 선택 필드 초기화
+        setSelect2('');
+        setSelect3('');
+        setSelect4('');
+        setSelect5('');
+        setFormResetKey(prevKey => prevKey + 1); // FileUploadForm 재마운트를 위해 key 변경
+        // FileUploadForm 내부의 파일명 표시 등을 초기화하려면
+        // FileUploadForm 컴포넌트 자체에 reset 로직 또는 key 변경을 통한 재마운트 전략이 필요할 수 있습니다.
+        // 현재 구조에서는 FileUploadForm의 내부 상태를 직접 초기화하기 어렵습니다.
+        // 가장 간단한 방법은 FileUploadForm에 key prop을 주고, 초기화 시 key를 변경하여 강제로 재렌더링하는 것입니다.
+        // 예: <FileUploadForm key={formResetKey} ... /> setFormResetKey(prev => prev + 1)
+    };
+
+    // FileUploadForm의 onFileSelect prop으로 전달될 콜백 함수
+    const handleFileSelection = (
+        index: number, // FileUploadForm의 fileIdx 값
+        selectedFile: File | null,
+        cd: string | null,
+        id: string | null
+    ) => {
+        setUploadedFilesData(prevData => {
+            const newData = [...prevData];
+            newData[index] = {
+                file: selectedFile,
+                atflCd: cd,
+                atflId: id,
+            };
+            return newData;
+        });
+        console.log(`Page: File data received for form index ${index}`, { fileName: selectedFile?.name, cd, id });
+    };
+
+
+    const registFile = async (analysisData: any) => {
+        console.log("Submitting combined analysis data to backend:", analysisData);
+        // 추후 API 엔드포인트에 맞게 URL 수정 필요
+        const data = await postData('v1/inftwtAnls', analysisData);
         if (data.ok) {
-            setFileInfos(prev =>
-                prev.map((info, idx) =>
-                    idx === fileIdx
-                        ? { atflId: data.atflId, atflCd: data.atflCd }
-                        : info
-                )
-            );
+            alert("분석 데이터가 성공적으로 제출되었습니다.");
+            resetAllForms(); // 성공 시 폼 초기화 함수 호출
+        } else {
+            alert("분석 데이터 제출 중 오류가 발생했습니다.");
+            // resetAllForms(); // 실패 시 폼 초기화 함수 호출
         }
     };
 
     // 버튼 클릭 핸들러
     const handleAnalysisClick = async () => {
-        const file1 = fileInputRef1.current?.files?.[0];
-        const fileRefs = [fileInputRef1, fileInputRef2, fileInputRef3];
-        const files = fileRefs.map(ref => ref.current?.files?.[0]);
-        const [file2, file3, file4] = files;
+        console.log(uploadedFilesData);
+        const file1 = uploadedFilesData[0]; // 오수관망도
+        const file2 = uploadedFilesData[1]; // 수용가-맨홀 매칭결과
+        const file3 = uploadedFilesData[2]; // 오수량 시간패턴
+        const file4 = uploadedFilesData[3];      // 유량자료
 
-        // if (!fileInputRef1.current?.files?.[0] || files.some(f => !f)) {
-        //     alert('모든 파일을 select해주세요.');
-        //     return;
-        // }
+        console.log("오수관망도 정보:", file1?.file);
+        console.log("수용가-맨홀 매칭결과 정보:", file2);
+        console.log("오수량 시간패턴 정보:", file3);
+        console.log("유량자료 정보:", file4);
 
+        // 모든 필수 파일이 선택되었는지 확인 (UploadedFileInfo 객체와 그 안의 file 객체 모두 확인)
+        if (!file1?.file || !file2?.file || !file3?.file || !file4?.file) {
+            alert('모든 분석용 파일을 선택해주세요.');
+            return;
+        }
+
+        // filePickers 구성 시 uploadedFilesData의 file 객체 사용
         const filePickers = [
+            // filePicked 유틸리티가 File 객체를 직접 받는지, ArrayBuffer 등을 받는지 확인 필요
+            // 여기서는 File 객체를 받고, 내부적으로 ArrayBuffer로 변환하여 parser에 전달한다고 가정
             { file: file2, parser: excelToMatchingResultData },
             { file: file3, parser: excelToTimePatternData },
             { file: file4, parser: excelToflowRateData }
+            // 오수관망도 파일은 파싱 대상이 아닐 수 있으므로, 필요에 따라 추가/제외
         ];
 
-        console.log(file2);
-        console.log(file3);
-        console.log(file4);
+        try {
+            const parsedResults = await Promise.all(
+                filePickers.map(async ({ file, parser }) => {
+                    if (!file || !file.file) return null; // fileInfo 객체 및 file 객체 null 체크
 
-        const [json2, json3, json4] = await Promise.all(
-            filePickers.map(async ({ file, parser }) => {
-                if (!file) return null;
-                const res = await filePicked(file, 0);
-                return res !== undefined ? parser(res) : null;
-            })
-        );
+                    // filePicked 함수에 File 객체와 headerNum 전달
+                    const jsonData = await filePicked(file.file, 0);
 
+                    if (jsonData === undefined) {
+                        console.warn(`Warning: filePicked returned undefined for ${file.file.name}`);
+                        return {
+                            fileName: file.file.name,
+                            atflCd: file.atflCd,
+                            atflId: file.atflId,
+                            parsedData: null // 또는 적절한 기본값
+                        };
+                    }
 
-        // console.log(file1);
-        // console.log(json2);
-        // console.log(json3);
-        // console.log(json4);
-        console.log(`선택된 날짜: ${selectedDate}`);
-        console.log(`오수전환율: ${input1}`);
-        console.log(`분석 정보: ${input2}`);
+                    // jsonData를 각 parser 함수로 처리
+                    // parser 함수가 filePicked가 반환하는 JSON 형식을 직접 처리한다고 가정
+                    const parsedDataBySpecificFunction = parser(jsonData);
+
+                    return {
+                        fileName: file.file.name,
+                        atflCd: file.atflCd,
+                        atflId: file.atflId,
+                        parsedData: parsedDataBySpecificFunction
+                    };
+                })
+            );
+
+            // 각 파싱 결과 접근
+            const matchingResultData = parsedResults.find(r => r && r.fileName === file2.file?.name)?.parsedData;
+            const timePatternData = parsedResults.find(r => r && r.fileName === file3.file?.name)?.parsedData;
+            const flowRateData = parsedResults.find(r => r && r.fileName === file4.file?.name)?.parsedData;
+
+            // 새로운 JSON 데이터 생성
+            const combinedAnalysisData = {
+                enoCd: select1, // 환경청코드
+                ctpvCd: select2, // 시도코드
+                sggCd: select3, // 시군구코드
+                swageTmplntCd: select4, // 하수처리장코드
+                swtrmtZoneCd: select5, // 하수처리구역코드
+                aplcnYmd: selectedDate.toISOString(), // 적용연월
+                dtrwSwtcRt: input1, // 오수전환율
+                anlsInfo: input2, // 분석정보
+                atflCd: file1?.atflCd, // 첨부파일CD
+                atflId: file1?.atflId, // 첨부파일ID
+                tbSnRcptrMhlMpng: matchingResultData, // 수용가-맨홀 매칭결과
+                tbSnHrPttn: timePatternData, // 오수량 시간패턴
+                tbSnOilqData: flowRateData, // 유량자료
+            };
+
+            console.log("통합 분석 데이터 (JSON):", combinedAnalysisData);
+
+            // 수정된 registFile 함수를 호출하여 combinedAnalysisData를 전송합니다.
+            await registFile(combinedAnalysisData);
+
+        } catch (error) {
+            console.error("파일 파싱 중 오류 발생:", error);
+            alert("파일 처리 중 오류가 발생했습니다.");
+            return;
+        }
     }
 
     return (
@@ -148,26 +240,32 @@ const IrSetting = () => {
                 <div className="grid gap-4">
                     <FormSection name='suyeongaPlace' form={form} titleNm='▷ 오수관망도'>
                         <FileUploadForm
-                            onSubmit={async (file, year, quater, cd, id) => { await registFile(file, year, quater, cd, id, 0) }}
+                            key={`file-upload-0-${formResetKey}`} // 폼 초기화를 위한 key
+                            onFileSelect={(file, cd, id) => handleFileSelection(0, file, cd, id)}
                             showButton={false}
                             showPreview={true}
-                            accept={""} />
+                            accept={""}
+                            fileIdx={0} />
                     </FormSection>
                     <FormSection name='suyeonga' form={form} titleNm='▷ 수용가-맨홀 매칭결과'>
-                        {/* <FileUploadForm
-                            onSubmit={async (file, year, quater, cd, id) => { await registFile(file, year, quater, cd, id, 1) }}
+                        <FileUploadForm
+                            key={`file-upload-1-${formResetKey}`} // 폼 초기화를 위한 key
+                            onFileSelect={(file, cd, id) => handleFileSelection(1, file, cd, id)}
                             showButton={false}
                             showPreview={true}
-                            accept={".xls, .xlsx, .xlsm, .xltx"} /> */}
-                        <Input id="fileNm" ref={fileInputRef1} type="file" accept=".xls, .xlsx, .xlsm, .xltx" />
+                            accept={".xls, .xlsx, .xlsm, .xltx"}
+                            fileIdx={1} />
+                        {/* <Input id="fileNm" ref={fileInputRef1} type="file" accept=".xls, .xlsx, .xlsm, .xltx" /> */}
                     </FormSection>
                     <FormSection name='pattern' form={form} titleNm='▷ 오수량 시간패턴'>
-                        {/* <FileUploadForm
-                            onSubmit={async (file, year, quater, cd, id) => { await registFile(file, year, quater, cd, id, 2) }}
+                        <FileUploadForm
+                            key={`file-upload-2-${formResetKey}`} // 폼 초기화를 위한 key
+                            onFileSelect={(file, cd, id) => handleFileSelection(2, file, cd, id)}
                             showButton={false}
                             showPreview={true}
-                            accept={".xls, .xlsx, .xlsm, .xltx"} /> */}
-                        <Input id="fileNm" ref={fileInputRef2} type="file" accept=".xls, .xlsx, .xlsm, .xltx" />
+                            accept={".xls, .xlsx, .xlsm, .xltx"}
+                            fileIdx={2} />
+                        {/* <Input id="fileNm" ref={fileInputRef2} type="file" accept=".xls, .xlsx, .xlsm, .xltx" /> */}
                     </FormSection>
                     <FormSection
                         name='inputdate'
@@ -218,12 +316,14 @@ const IrSetting = () => {
                 <div className="flex items-center gap-4">
                     <FormSection
                         name='region' form={form} titleNm='▷ 유량자료 등록'>
-                        {/* <FileUploadForm
-                            onSubmit={async (file, year, quater, cd, id) => { await registFile(file, year, quater, cd, id, 3) }}
+                        <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"} /> */}
-                        <Input id="fileNm" ref={fileInputRef3} type="file" accept=".xls, .xlsx, .xlsm, .xltx" />
+                            accept={".xls, .xlsx, .xlsm, .xltx"}
+                            fileIdx={3} />
+                        {/* <Input id="fileNm" ref={fileInputRef3} type="file" accept=".xls, .xlsx, .xlsm, .xltx" /> */}
                     </FormSection>
                     <div className="flex justify-center mt-1">
                         <Button type="submit" onClick={handleAnalysisClick}>침입수분석 실행</Button>