침수예방 데이터 조회 기능 추가

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

@@ -1,16 +1,31 @@
 'use client'
 import { ContentsDiv, MainDiv, SearchDiv, SearchFormLeft, SearchFormRight, SearchInput, Title, UiTable } from '@common/business_components/ui'
 import { Button, DatePicker, Input, Label } from '@common/components/ui'
-import React, { useRef, useState } from 'react'
+import React, { use, useRef, 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, tableHeadlist } from '../oldPp/page'
+import { getData } from '@/components/lib/api'
 
 const Page = () => {
     const [selectedDate, setSelectedDate] = useState(new Date())
-    const [company, setCompany] = useState('')
+    const [manageYear, setManageYear] = useState('')
+    const [mngQu, setMngQu] = useState('')
+    const [usr, setUsr] = useState('')
     const [pjNm, setpjNm] = useState('')
+    // TODO: 초기값 세팅필요
+    const searchData = async (url: string, paramObj: Record<string, string>) => {
+        if (manageYear || usr || pjNm) {
+            const params = new URLSearchParams(paramObj);
+            const data = await getData(`${url}?${params.toString()}`);
+            if (data) {
+                console.log(data.content)
+                // TODO: data 들어오면 data 보여주게 작업필요 ~ ! 
+                data.content && console.log(data)
+            }
+        }
+    }
     return (
         <ContentLayout title='도시침수 예방사업'>
             <SearchDiv>
@@ -26,12 +41,28 @@ const Page = () => {
                                 selected={selectedDate}
                                 onSelect={(date: Date | undefined) => { if (date) setSelectedDate(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)}
+                            />
+                        </div>
+                        <div className='flex items-center'>
+                            <Label className="w-20 text-xl text-gray-600">분기</Label>
+                            <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={company}
-                                onChange={(e) => setCompany(e.target.value)}
+                                value={usr}
+                                onChange={(e) => setUsr(e.target.value)}
                             />
                         </div>
                         <div className='flex items-center'>
@@ -45,7 +76,8 @@ 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" size="sm">조회</Button>
+                    <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', {
+                        mngYr: manageYear,mngQu: mngQu,page: '0',size: '10'})}} >조회</Button>
                 </SearchFormRight>
             </SearchDiv>
             <ListDiv className="mt-4">
@@ -56,7 +88,7 @@ const Page = () => {
                         <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>
                     </div>
                 </div>
-                <UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={10} total={20} children={undefined} cellClick={() => { }} onPageChange={function (page: number): void {
+                <UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={10} total={10} children={undefined} cellClick={() => { }} onPageChange={function (page: number): void {
                     throw new Error('Function not implemented.')
                 }}></UiTable>
             </ListDiv>