도시침수 및 노후하수 관로 api작업 완료(테스트필요)

apps/sn/app/components/lib/common/apiHelpers.ts

@@ -10,9 +10,5 @@ export const searchData = async<T extends Record<string, any>>(url: string, para
             }, {} as Record<string, string>)
     );
     const data = await getData(`${url}?${params.toString()}`);
-    if (data) {
+    return data && data.content
-        console.log(data.content)
-        // TODO: data 들어오면 data 보여주게 작업필요 ~ ! 
-        data.content && console.log(data)
-    }
 }

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

@@ -1,32 +1,34 @@
 "use client"
-import { FileUpload, SelectBox } from '@common/business_components/ui';
+import { SelectBox } from '@common/business_components/ui';
-import { Button, Input } from '@common/components/ui';
+import { Button } from '@common/components/ui';
 import React, { useState } from 'react'
 import type { HttpResponse, Upload } from "tus-js-client";
 import { FileUploader } from "@common/components";
 import { handleUpload } from "@utils";
+import { set } from 'react-hook-form';
 
-const FileUploadForm = ({ title, onSubmit }: { title: string, onSubmit:(files:FileList, year:string, quarter:string) => void }) => {
+const FileUploadForm = ({ title, onSubmit }: { title: string, onSubmit: (files: string, year: string, quarter: string, code:string, id:string) => void }) => {
-
+    const [atflCd, setAtflCd] = useState<string | null>(null);
+    const [atflId, setAtflId] = useState<string | null>(null);
     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);
-        console.log(atflCd, atflId, orgnlFileNm);
+        setAtflCd(atflCd);
-      };
+        setAtflId(atflId);
-    
+    };
+
     // 현재 년도부터 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 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 [files, setFiles] = useState<File | null>(null);
     const [selectedYear, setSelectedYear] = useState<string>(yearOptions[0]?.val || '');
-    const [selectedQuarter, setSelectedQuarter] = useState<string>(quater[0]?.val || '');   
+    const [selectedQuarter, setSelectedQuarter] = useState<string>(quater[0]?.val || '');
     const [upload, setUpload] = useState<Upload | null>(null);
 
     return (
@@ -37,50 +39,48 @@ const FileUploadForm = ({ title, onSubmit }: { title: string, onSubmit:(files:Fi
             <div className="card p-6">
                 <div className="grid grid-col-2 items-center space-x-4">
                     <div className='flex'>
-                    <SelectBox
+                        <SelectBox
-                        className="w-50 mr-3 ml-4"
+                            className="w-50 mr-3 ml-4"
-                        selectClass="rounded-lg bg-white"
+                            selectClass="rounded-lg bg-white"
-                        label="년도"
+                            label="년도"
-                        selectArray={yearOptions}
+                            selectArray={yearOptions}
-                        onSelectValue={(value: string | number) => setSelectedYear(String(value))}
+                            onSelectValue={(value: string | number) => setSelectedYear(String(value))}
-                    /><SelectBox
+                        /><SelectBox
-                        className="w-50"
+                            className="w-50"
-                        selectClass="rounded-lg bg-white"
+                            selectClass="rounded-lg bg-white"
-                        label="분기"
+                            label="분기"
-                        selectArray={quater}
+                            selectArray={quater}
-                        onSelectValue={(value: string | number) => setSelectedQuarter(String(value))}
+                            onSelectValue={(value: string | number) => setSelectedQuarter(String(value))}
-                    />
+                        />
-                    <div className='flex ml-5 items-center'>
+                        <div className='flex ml-5 items-center'>
                             <div className="w-[80px] mr-4">
-                            <FileUploader
+                                <FileUploader
-                            id="atflCd"
+                                    id="atflCd"
-                            className="!h-auto !max-w-none flex-col !items-start"
+                                    className="!h-auto !max-w-none flex-col !items-start"
-                            accept=".jpeg,.jpg,.png"
+                                    accept=".jpeg,.jpg,.png"
-                            onUpload={(e) => {
+                                    onUpload={(e) => {
-                                const selectedFiles = e.target.files;
+                                        const selectedFiles = e.target.files;
-                                if (!selectedFiles) return;
+                                        if (!selectedFiles) return
+                                        const fileArray = selectedFiles
+                                        setFiles(selectedFiles[0] || null);
+                                        if (fileArray[0]) {
+                                            handleUpload(selectedFiles, {
+                                                handleUploadStart: setUpload,
+                                                handleSuccess: setUpload,
+                                                handleResponse: handleUploadResponse(fileArray[0]),
+                                            });
+                                        }
 
-                                const fileArray = Array.from(selectedFiles);
+                                    }}
-                                if(!fileArray){
+                                    customPreview={<></>}
-                                    setFiles(fileArray);
+                                />
-                                }
-                                if (fileArray[0]) {
-                                    handleUpload(selectedFiles, {
-                                        handleUploadStart: setUpload,
-                                        handleSuccess: setUpload,
-                                        handleResponse: handleUploadResponse(fileArray[0]),
-                                    });
-                                }
-
-                            }}
-                            customPreview={<></>}
-                            />
                             </div>
                             <Button
                                 className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700"
                                 size="sm"
                                 onClick={() => {
-                                    if (!files?.[0]) {
+                                    console.log(files && files.name)
+                                    if (!files) {
                                         alert('파일을 선택해주세요.');
                                         return;
                                     }
@@ -89,9 +89,10 @@ const FileUploadForm = ({ title, onSubmit }: { title: string, onSubmit:(files:Fi
                                         return;
                                     }
                                     if (!selectedQuarter) {
-                                        alert('분기기를 선택해주세요.');
+                                        alert('분기를 선택해주세요.');
                                         return;
                                     }
+                                    onSubmit(files.name, selectedYear, selectedQuarter, atflCd || '', atflId || '');
                                 }}
                             >
                                 등록

apps/sn/app/oper/floodPre/page.tsx

@@ -1,16 +1,15 @@
 'use client'
 import { SearchDiv, SearchFormLeft, SearchFormRight, UiTable } from '@common/business_components/ui'
 import { Button, DatePicker, Input, Label } from '@common/components/ui'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import FileUploadForm from '../../components/ui/fileUploadForm'
 import ListDiv from '@common/business_components/ui/list_div'
 import ContentLayout from '@/components/ui/contentLayout'
-import { tableData } from '../oldPp/page'
 import { searchData } from '@/components/lib/common/apiHelpers'
 import { tableHeadlist } from '..'
 import { handleDownload } from '@/components/lib/utils/fileDownload'
-import { handleUpload } from '@/components/lib/utils/fileUploadUtil'
 import { formatDate } from '@/components/lib/utils/date'
+import { postData } from '@/components/lib/api'
 
 const Page = () => {
     const [fromDate, setFromDate] = useState(new Date())
@@ -20,83 +19,105 @@ const Page = () => {
     const [usr, setUsr] = useState('')
     const [pjNm, setpjNm] = useState('')
     const [fileNm, setFileNm] = useState('')
-    // TODO: 초기값 세팅필요
+    const [atflId, setAtflId] = useState('')
+    const [atflCd, setAtflCd] = useState('')
+    const [tableData, setTableData] = useState<any>()
+    useEffect(() => {
+        const fetchData = async () => {
+            const data = await searchData('v1/sbmrgPrevnt', {
+                fromRegDt: formatDate(new Date()),
+                toRegDt: formatDate(new Date()),
+                page: '0',
+                size: '10'
+            })
+            setTableData(data)
+        }
+        fetchData()
+    }, [])
     const isChckFile = () => {
         if (fileNm === '' || fileNm === undefined) {
             alert('파일을 선택해주세요')
         }
-        // TODO: 추후 파일코드 동적으로 세팅
+        handleDownload(`/attach-service/api/v1/download/${atflId}`, fileNm)
-        handleDownload('/attach-service/api/v1/download/6066b08c-2a55-438c-b8ff-2aed9739a0c6', fileNm)
     }
-    //TODO: 파일 업로드 처리
+    const registFile = async (fileNm: string, year: string, quater: string, cd: string, id: string) => {
-return (
+        const data = await postData('api/v1/sbmrgPrevnt', {
-    <ContentLayout title='도시침수 예방사업'>
+            atflNm: fileNm,
-        <SearchDiv>
+            mngYr: year,
-            <SearchFormLeft>
+            mngQu: quater,
-                <div className='flex items-center gap-4'>
+            atflCd: cd,
-                    <div className='flex items-center gap-2'>
+            atflId: id
-                        <Label className="w-20 text-xl text-gray-600">등록기간</Label>
+        })
-                        <DatePicker mode={'single'}
+        if (data.ok) { setAtflId(data.atflId); setAtflCd(data.atflCd) }
-                            selected={fromDate}
+    }
-                            onSelect={(date: Date | undefined) => { if (date) setFromDate(date) }} />
+    return (
-                        <span>~</span>
+        <ContentLayout title='도시침수 예방사업'>
-                        <DatePicker mode={'single'}
+            <SearchDiv>
-                            selected={toDate}
+                <SearchFormLeft>
-                            onSelect={(date: Date | undefined) => { if (date) setToDate(date) }} />
+                    <div className='flex items-center gap-4'>
+                        <div className='flex items-center gap-2'>
+                            <Label className="w-20 text-xl text-gray-600">등록기간</Label>
+                            <DatePicker mode={'single'}
+                                selected={fromDate}
+                                onSelect={(date: Date | undefined) => { if (date) setFromDate(date) }} />
+                            <span>~</span>
+                            <DatePicker mode={'single'}
+                                selected={toDate}
+                                onSelect={(date: Date | undefined) => { if (date) setToDate(date) }} />
+                        </div>
+                        <div className='flex items-center'>
+                            <Label className="w-20 text-xl text-gray-600">관리년도</Label>
+                            <Input
+                                className='w-[100px]'
+                                value={manageYear}
+                                onChange={(e) => setManageYear(e.target.value)}
+                            />
+                            <span>~</span>
+                            <Input
+                                className='w-[100px]'
+                                value={mngQu}
+                                onChange={(e) => setMngQu(e.target.value)}
+                            />
+                        </div>
+                        <div className='flex items-center'>
+                            <Label className="w-20 text-xl text-gray-600">등록자</Label>
+                            <Input
+                                className='w-[100px]'
+                                value={usr}
+                                onChange={(e) => setUsr(e.target.value)}
+                            />
+                        </div>
+                        <div className='flex items-center'>
+                            <Label className="w-20 text-xl text-gray-600">파일명</Label>
+                            <Input
+                                className='w-[100px]'
+                                value={pjNm}
+                                onChange={(e) => setpjNm(e.target.value)}
+                            />
+                        </div>
                     </div>
-                    <div className='flex items-center'>
+                </SearchFormLeft>
-                        <Label className="w-20 text-xl text-gray-600">관리년도</Label>
+                <SearchFormRight>
-                        <Input
+                    <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" onClick={() => { const data = searchData('v1/sbmrgPrevnt', { fromRegDt: formatDate(fromDate), fromMngYr: manageYear, toMngYr: mngQu, toRegDt: formatDate(toDate), atflNm: pjNm, rgtrNm: usr, page: '0', size: '10' }); setTableData(data)}} >조회</Button>
-                            className='w-[100px]'
+                </SearchFormRight>
-                            value={manageYear}
+            </SearchDiv>
-                            onChange={(e) => setManageYear(e.target.value)}
+            <ListDiv className="mt-4">
-                        />
+                <div className="card-header flex items-center justify-between">
-                        <span>~</span>
+                    <h3 className="text-2xl font-medium">사업정보 등록현황</h3>
-                        <Input
+                    <div>
-                            className='w-[100px]'
+                        <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>
-                            value={mngQu}
+                        <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={() => { }} >삭제</Button>
-                            onChange={(e) => setMngQu(e.target.value)}
-                        />
-                    </div>
-                    <div className='flex items-center'>
-                        <Label className="w-20 text-xl text-gray-600">등록자</Label>
-                        <Input
-                            className='w-[100px]'
-                            value={usr}
-                            onChange={(e) => setUsr(e.target.value)}
-                        />
-                    </div>
-                    <div className='flex items-center'>
-                        <Label className="w-20 text-xl text-gray-600">파일명</Label>
-                        <Input
-                            className='w-[100px]'
-                            value={pjNm}
-                            onChange={(e) => setpjNm(e.target.value)}
-                        />
                     </div>
                 </div>
-            </SearchFormLeft>
+                <UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={10} total={10} cellClick={(index) => { if (index != null) { const fileName = tableData[index]?.fileNm ?? ""; setFileNm(fileName) } }} onPageChange={function (page: number): void {
-            <SearchFormRight>
+                    throw new Error('Function not implemented.')
-                <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" onClick={() => { searchData('v1/sbmrgPrevnt', { fromRegDt: formatDate(fromDate), fromMngYr: manageYear, toMngYr: mngQu, toRegDt: formatDate(toDate), atflNm: pjNm, rgtrNm: usr, page: '0', size: '10' }) }} >조회</Button>
+                }}></UiTable>
-            </SearchFormRight>
+            </ListDiv>
-        </SearchDiv>
+            <ListDiv className="mt-4">
-        <ListDiv className="mt-4">
+                <FileUploadForm title='도시침수 예방사업 사업추진현황 등록' onSubmit={async () => { await registFile }} />
-            <div className="card-header flex items-center justify-between">
+            </ListDiv>
-                <h3 className="text-2xl font-medium">사업정보 등록현황</h3>
+        </ContentLayout>
-                <div>
+    )
-                    <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>
-                    <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={() => { }} >삭제</Button>
-                </div>
-            </div>
-            <UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={10} total={10} cellClick={(index) => { if (index != null) { const fileName = tableData[index]?.fileNm ?? ""; setFileNm(fileName) } }} onPageChange={function (page: number): void {
-                throw new Error('Function not implemented.')
-            }}></UiTable>
-        </ListDiv>
-        <ListDiv className="mt-4">
-            <FileUploadForm title='도시침수 예방사업 사업추진현황 등록' onSubmit={()=>{}}/>
-        </ListDiv>
-    </ContentLayout>
-)
 }
 
 export default Page

apps/sn/app/oper/oldPp/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { SearchDiv, SearchFormLeft, SearchFormRight, UiTable } from '@common/business_components/ui'
 import { Button, DatePicker, Input, Label } from '@common/components/ui'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import FileUploadForm from '../../components/ui/fileUploadForm'
 import ListDiv from '@common/business_components/ui/list_div'
 import ContentLayout from '@/components/ui/contentLayout'
@@ -9,9 +9,7 @@ import { tableHeadlist } from '..'
 import { handleDownload } from '@/components/lib/utils/fileDownload'
 import { searchData } from '@/components/lib/common/apiHelpers'
 import { formatDate } from '@/components/lib/utils/date'
-// TODO: 임시 id
+import { postData } from '@/components/lib/api'
-
-export const tableData = [{ 'no': '1', 'fileNm': '2023년 노후하수관로 정비사업', 'mngYr': '2023', 'mngQu': '1', 'registDt': '2023-10-01', 'registUsr': '홍길동' },]
 const Page = () => {
     const [fromDate, setFromDate] = useState<Date>(new Date());
     const [toDate, setToDate] = useState<Date>(new Date());
@@ -20,15 +18,39 @@ const Page = () => {
     const [usr, setUsr] = useState('')
     const [pjNm, setpjNm] = useState('')
     const [fileNm, setFileNm] = useState('')
-   const isChckFile = () => {
+    const [atflId, setAtflId] = useState('')
-           if (fileNm === '' || fileNm === undefined) {
+    const [atflCd, setAtflCd] = useState('')
-               alert('파일을 선택해주세요')
+    const [tableData, setTableData] = useState<any>()
-               return false
+     useEffect(() => {
-           }
+            const fetchData = async () => {
-           // TODO: 추후 파일코드 동적으로 세팅
+                const data = await searchData('v1/dcrpPpl', {
-           handleDownload('/sn/attach-service/api/v1/download/6066b08c-2a55-438c-b8ff-2aed9739a0c6', fileNm)
+                    fromRegDt: formatDate(new Date()),
-           return true
+                    toRegDt: formatDate(new Date()),
-       }
+                    page: '0',
+                    size: '10'
+                })
+                setTableData(data)
+            }
+            fetchData()
+        }, [])
+    const isChckFile = () => {
+        if (fileNm === '' || fileNm === undefined) {
+            alert('파일을 선택해주세요')
+            return false
+        }
+        handleDownload(`/sn/attach-service/api/v1/download/${atflId}}`, fileNm)
+        return true
+    }
+    const registFile = async (fileNm:string, year: string, quater: string,cd: string, id: string) => {
+         const data = await postData('api/v1/dcrpPpl', {
+                   atflNm: fileNm,
+                   mngYr: year,
+                   mngQu: quater,
+                   atflCd: cd,
+                   atflId: id
+               })
+               if (data.ok) { setAtflId(data.atflId); setAtflCd(data.atflCd) }
+    }
     return (
         <ContentLayout title='노후 하수관로 정비사업'>
             <SearchDiv>
@@ -77,7 +99,7 @@ const Page = () => {
                     </div>
                 </SearchFormLeft>
                 <SearchFormRight>
-                    <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 mr-2" size="sm" onClick={() => { searchData('v1/dcrpPpl', { fromRegDt: formatDate(fromDate), fromMngYr: manageYear, toMngYr: mngQu, toRegDt: formatDate(toDate), atflNm: pjNm, rgtrNm: usr, page: '0', size: '10' }) }}>조회</Button>
+                    <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 mr-2" size="sm" onClick={() => { const data = searchData('v1/dcrpPpl', { fromRegDt: formatDate(fromDate), fromMngYr: manageYear, toMngYr: mngQu, toRegDt: formatDate(toDate), atflNm: pjNm, rgtrNm: usr, page: '0', size: '10' }); setTableData(data) }}>조회</Button>
                 </SearchFormRight>
             </SearchDiv>
             <ListDiv className="mt-4">
@@ -93,7 +115,7 @@ const Page = () => {
                 }}></UiTable>
             </ListDiv>
             <ListDiv className="mt-4">
-                <FileUploadForm title='노후 하수관로 정비사업 주진현황 등록' onSubmit={() => { }} />
+                <FileUploadForm title='노후 하수관로 정비사업 주진현황 등록' onSubmit={() => { registFile }} />
             </ListDiv>
         </ContentLayout>
     )