90 lines
5.4 KiB
TypeScript
90 lines
5.4 KiB
TypeScript
'use client'
|
|
import { ContentsDiv, MainDiv, SearchDiv, SearchFormLeft, SearchFormRight, SelectBox, Title, UiTable } from '@common/business_components/ui'
|
|
import { Button, DatePicker, Input, Label } from '@common/components/ui'
|
|
import React, { useState } from 'react'
|
|
import FileUploadForm from '../../components/ui/fileUploadForm'
|
|
import ListDiv from '@common/business_components/ui/list_div'
|
|
import ContentLayout from '@/components/ui/contentLayout'
|
|
// TODO: 임시 id
|
|
export const tableHeadlist = [
|
|
{ id: 'no', title: 'NO' },
|
|
{ id: 'fileNm', title: '파일명' },
|
|
{ id: 'manageYear', title: '년도' },
|
|
{ id: 'bungi', title: '분기' },
|
|
{ id: 'registDt', title: '등록 일자' },
|
|
{ id: 'registUsr', title: '등록자' }
|
|
|
|
]
|
|
export const tableData = [
|
|
{ 'no': '1', 'fileNm': '파일명', 'manageYear': '2023', 'registDt': '2025-04-16', 'registUsr': 'me', 'bungi': '1분기' },
|
|
{ 'no': '2', 'fileNm': '파일명', 'manageYear': '2024', 'registDt': '2025-04-16', 'registUsr': 'me2', 'bungi': '1분기' },
|
|
{ 'no': '3', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3', 'bungi': '1분기' },
|
|
{ 'no': '4', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3', 'bungi': '1분기' },
|
|
{ 'no': '5', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3', 'bungi': '1분기' },
|
|
{ 'no': '6', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3', 'bungi': '1분기' },
|
|
{ 'no': '7', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3', 'bungi': '1분기' },
|
|
{ 'no': '8', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3', 'bungi': '1분기' },
|
|
{ 'no': '9', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3', 'bungi': '1분기' },
|
|
{ 'no': '10', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3', 'bungi': '1분기' }
|
|
]
|
|
const Page = () => {
|
|
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
|
|
const [company, setCompany] = useState('')
|
|
const [pjNm, setpjNm] = useState('')
|
|
return (
|
|
<ContentLayout title='노후 하수관로 정비사업'>
|
|
<SearchDiv>
|
|
<SearchFormLeft>
|
|
<div className='flex items-center gap-4'>
|
|
<div className='flex items-center space-x-2'>
|
|
<Label className="w-20 text-xl text-gray-600">등록기간</Label>
|
|
<DatePicker mode={'single'}
|
|
selected={selectedDate}
|
|
onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} />
|
|
<span>~</span>
|
|
<DatePicker mode={'single'}
|
|
selected={selectedDate}
|
|
onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} />
|
|
<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)}
|
|
/>
|
|
</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>
|
|
</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" >조회</Button>
|
|
</SearchFormRight>
|
|
</SearchDiv>
|
|
<ListDiv className="mt-4">
|
|
<div className="card-header flex items-center justify-between">
|
|
<h3 className="text-2xl font-medium">사업정보 등록현황</h3>
|
|
<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" >파일 다운로드</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" >삭제</Button>
|
|
</div>
|
|
</div>
|
|
<UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={10} total={20} children={undefined} cellClick={() => { }} onPageChange={function (page: number): void {
|
|
throw new Error('Function not implemented.')
|
|
}}></UiTable>
|
|
</ListDiv>
|
|
<ListDiv className="mt-4">
|
|
<FileUploadForm title='노후 하수관로 정비사업 주진현황 등록' />
|
|
</ListDiv>
|
|
</ContentLayout>
|
|
)
|
|
}
|
|
|
|
export default Page |