공통 레이아웃 작업 및 모의정보설정/관망도 등록화면 작업중
This commit is contained in:
JIeunhuh
@@ -0,0 +1,18 @@
|
||||
import { ContentsDiv, MainDiv, Title } from '@common/business_components/ui'
|
||||
import React, { type ReactNode } from 'react'
|
||||
type LayoutNode = {
|
||||
children : ReactNode
|
||||
title : string
|
||||
}
|
||||
const ContentLayout = ({children, title} : LayoutNode) => {
|
||||
return (
|
||||
<MainDiv>
|
||||
<Title title={title} />
|
||||
<ContentsDiv>
|
||||
{children}
|
||||
</ContentsDiv>
|
||||
</MainDiv>
|
||||
)
|
||||
}
|
||||
|
||||
export default ContentLayout
|
||||
@@ -0,0 +1,214 @@
|
||||
"use client"
|
||||
|
||||
import { z } from "zod"
|
||||
import { useForm, useFieldArray } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, FormUi } from "@common/business_components/ui"
|
||||
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Input, Button } from "@common/components/ui"
|
||||
import { UiTable } from "@common/business_components/ui"
|
||||
import React from "react"
|
||||
import ContentLayout from "@/components/ui/contentLayout"
|
||||
import ListDiv from "@common/business_components/ui/list_div"
|
||||
|
||||
// zod 스키마 정의
|
||||
const formSchema = z.object({
|
||||
region: z.string(),
|
||||
rdiiArea: z.string(),
|
||||
rtkSource: z.string(),
|
||||
unitFactors: z.array(z.object({
|
||||
response: z.string(),
|
||||
R: z.string(),
|
||||
T: z.string(),
|
||||
K: z.string(),
|
||||
})),
|
||||
initialDepths: z.array(z.object({
|
||||
response: z.string(),
|
||||
Dmax: z.string(),
|
||||
Drec: z.string(),
|
||||
Do: z.string(),
|
||||
}))
|
||||
})
|
||||
|
||||
export default function RTKForm() {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
region: "",
|
||||
rdiiArea: "",
|
||||
rtkSource: "",
|
||||
unitFactors: [
|
||||
{ response: "Short-Term", R: "", T: "", K: "" },
|
||||
{ response: "Medium-Term", R: "", T: "", K: "" },
|
||||
{ response: "Long-Term", R: "", T: "", K: "" },
|
||||
],
|
||||
initialDepths: [
|
||||
{ response: "Short-Term", Dmax: "", Drec: "", Do: "" },
|
||||
{ response: "Medium-Term", Dmax: "", Drec: "", Do: "" },
|
||||
{ response: "Long-Term", Dmax: "", Drec: "", Do: "" },
|
||||
],
|
||||
}
|
||||
})
|
||||
|
||||
const { fields: unitFactorFields } = useFieldArray({
|
||||
control: form.control,
|
||||
name: "unitFactors"
|
||||
})
|
||||
|
||||
const { fields: initialDepthFields } = useFieldArray({
|
||||
control: form.control,
|
||||
name: "initialDepths"
|
||||
})
|
||||
|
||||
const onSubmit = (data: z.infer<typeof formSchema>) => {
|
||||
console.log("✅ 제출 데이터:", data)
|
||||
}
|
||||
|
||||
// 단위도 계수 테이블 설정
|
||||
const unitFactorHeadlist = [
|
||||
{ id: 'response', title: 'Response' },
|
||||
{ id: 'R', title: 'R' },
|
||||
{ id: 'T', title: 'T' },
|
||||
{ id: 'K', title: 'K' }
|
||||
]
|
||||
|
||||
// 초기 차단 깊이 테이블 설정
|
||||
const initialDepthHeadlist = [
|
||||
{ id: 'response', title: 'Response' },
|
||||
{ id: 'Dmax', title: 'Dmax' },
|
||||
{ id: 'Drec', title: 'Drec' },
|
||||
{ id: 'Do', title: 'Do' }
|
||||
]
|
||||
const rtxNmHeadlist = [
|
||||
{ id: 'no', title: '번호' },
|
||||
{ id: 'hasu', title: '하수처리장' },
|
||||
{ id: 'guyeok', title: '처리구역' },
|
||||
{ id: 'cnfcj', title: '출처' },
|
||||
{ id: 'time', title: '입력시간' }
|
||||
]
|
||||
// 테이블 페이지 변경 핸들러
|
||||
const handlePageChange = (page: number) => {
|
||||
console.log('Page changed:', page)
|
||||
}
|
||||
|
||||
return (
|
||||
<ContentLayout title="모의정보 설정">
|
||||
<ListDiv>
|
||||
<div className="card-header">
|
||||
<h3 className="text-2xl font-medium">모의정보 설정</h3>
|
||||
</div>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<div className="card !m-[1.2rem]">
|
||||
{/* 기본 정보 입력 폼 */}
|
||||
<div className="space-y-[1.2rem]">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="region"
|
||||
render={({ field }) => (
|
||||
<FormUi label="○ 처리구역" className="flex items-center">
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<SelectTrigger className="w-[150px]">
|
||||
<SelectValue placeholder="선택하세요" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="양평">양평</SelectItem>
|
||||
<SelectItem value="강남">강남</SelectItem>
|
||||
<SelectItem value="마포">마포</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rdiiArea"
|
||||
render={({ field }) => (
|
||||
<FormUi label="○ RDII 기여면적(ha)" className="flex items-center">
|
||||
<Input
|
||||
className="h-10 text-center text-xl w-[150px]"
|
||||
placeholder=""
|
||||
type=""
|
||||
{...field}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rtkSource"
|
||||
render={({ field }) => (
|
||||
<FormUi label="○ RTK계수 출처" className="flex items-center">
|
||||
<Input
|
||||
className="h-10 text-center text-xl w-[250px]"
|
||||
placeholder=""
|
||||
{...field}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 테이블 컨테이너 */}
|
||||
<div className="mt-[1.2rem]">
|
||||
<div className="grid grid-cols-2">
|
||||
<div>
|
||||
<div className="mb-[1.2rem] gap-[1.2rem] text-xl font-medium">○ 단위도 계수</div>
|
||||
<UiTable
|
||||
headName=""
|
||||
className="w-[400px]"
|
||||
tableData={unitFactorFields}
|
||||
headlist={unitFactorHeadlist}
|
||||
pageSize={10}
|
||||
total={0}
|
||||
onPageChange={handlePageChange}
|
||||
cellClick={undefined}
|
||||
>
|
||||
{null}
|
||||
</UiTable>
|
||||
</div>
|
||||
<div>
|
||||
<div className="mb-[1.2rem] text-xl font-medium">○ 초기 차단 깊이</div>
|
||||
<UiTable
|
||||
headName=""
|
||||
className="w-[400px]"
|
||||
tableData={initialDepthFields}
|
||||
headlist={initialDepthHeadlist}
|
||||
pageSize={10}
|
||||
total={0}
|
||||
onPageChange={handlePageChange}
|
||||
cellClick={undefined}
|
||||
>
|
||||
{null}
|
||||
</UiTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end mt-[1.2rem]">
|
||||
<Button type="submit">저장</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</ListDiv>
|
||||
<ListDiv>
|
||||
<div className="card-header flex items-center justify-between">
|
||||
<h3 className="text-2xl font-medium">RTX계수 입력현황</h3>
|
||||
<Button type="submit" className="!mx-[1.2rem]">삭제</Button>
|
||||
</div>
|
||||
<UiTable
|
||||
headName=''
|
||||
headlist={rtxNmHeadlist}
|
||||
tableData={[]}
|
||||
total={0}
|
||||
pageSize={10}
|
||||
children={undefined}
|
||||
cellClick={() => { }}
|
||||
onPageChange={() => { }}
|
||||
/>
|
||||
</ListDiv>
|
||||
</ContentLayout>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
"use client"
|
||||
|
||||
import { z } from "zod"
|
||||
import { useForm, useFieldArray } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { FileUpload, Form, FormControl, FormField, FormItem, FormLabel, FormMessage, FormUi, SearchDiv, SearchFormLeft, SearchFormRight, SearchInput, SelectBox } from "@common/business_components/ui"
|
||||
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Input, Button, DatePicker, Label } from "@common/components/ui"
|
||||
import { UiTable } from "@common/business_components/ui"
|
||||
import React, { useState } from "react"
|
||||
import ContentLayout from "@/components/ui/contentLayout"
|
||||
import ListDiv from "@common/business_components/ui/list_div"
|
||||
|
||||
// zod 스키마 정의
|
||||
const formSchema = z.object({
|
||||
region: z.string(),
|
||||
inputdate: z.coerce.date(),
|
||||
rtkSource: z.string(),
|
||||
})
|
||||
|
||||
export default function RTKForm() {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
region: "",
|
||||
inputdate: new Date(),
|
||||
rtkSource: "",
|
||||
}
|
||||
})
|
||||
const [selectedDate, setSelectedDate] = useState(new Date())
|
||||
const onSubmit = (data: z.infer<typeof formSchema>) => {
|
||||
console.log("✅ 제출 데이터:", data)
|
||||
}
|
||||
// TODO: 임시 데이터
|
||||
const rtxNmHeadlist = [
|
||||
{ id: 'no', title: '번호' },
|
||||
{ id: 'hasu', title: '하수처리장' },
|
||||
{ id: 'guyeok', title: '처리구역' },
|
||||
{ id: 'fileNm', title: '파일명' },
|
||||
{ id: 'time', title: '입력시간' }
|
||||
]
|
||||
const rtxNmDataList = [
|
||||
{ "no": '1', 'hasu': '하수처리장', 'guyeok': '처리구역', 'fileNm': '파일', 'time': '2025-04-18' }
|
||||
]
|
||||
const handlePageChange = (page: number) => {
|
||||
console.log('Page changed:', page)
|
||||
}
|
||||
|
||||
return (
|
||||
<ContentLayout title="관망도 등록">
|
||||
<SearchDiv>
|
||||
<SearchFormRight>
|
||||
<SelectBox label='시설검색' selectArray={[{ text: '한강 유역청', val: '1' }]} className='!mr-2' onSelectValue={() => { }} selectClass='w-[250px]' />
|
||||
<SelectBox label='' selectArray={[{ text: '경기도', val: '1' }]} className='!mr-2' onSelectValue={() => { }} selectClass='w-[200px]' />
|
||||
<SelectBox label='' selectArray={[{ text: '양평군', val: '1' }]} className='!mr-2' onSelectValue={() => { }} selectClass='w-[200px]' />
|
||||
<SelectBox label='' selectArray={[{ text: '양평하수처리장', val: '1' }]} className='' onSelectValue={() => { }} selectClass='w-[250px]' />
|
||||
</SearchFormRight>
|
||||
</SearchDiv>
|
||||
<ListDiv>
|
||||
<div className="card-header">
|
||||
<h3 className="text-2xl font-medium">SWMM5 파일 업로드</h3>
|
||||
</div>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<div className="card !m-[1.2rem]">
|
||||
{/* 기본 정보 입력 폼 */}
|
||||
<div className="space-y-[1.2rem]">
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 처리구역</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="region"
|
||||
render={({ field }) => (
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<SelectTrigger className="w-[150px]">
|
||||
<SelectValue placeholder="선택하세요" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="양평">양평</SelectItem>
|
||||
<SelectItem value="강남">강남</SelectItem>
|
||||
<SelectItem value="마포">마포</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ RDII 기여면적(ha)</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="inputdate"
|
||||
render={({ field }) => (
|
||||
<DatePicker
|
||||
selected={selectedDate}
|
||||
onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }}
|
||||
mode={"single"}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 파일위치</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rtkSource"
|
||||
render={({ field }) => (
|
||||
<div className="w-[150px]">
|
||||
<Input id="picture" type="file"/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 비고</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rtkSource"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
className="h-17 text-center text-xl w-[200px]"
|
||||
placeholder=""
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex justify-end mt-1">
|
||||
<Button type="submit">자료업로드</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</ListDiv>
|
||||
<ListDiv>
|
||||
<div className="card-header flex items-center justify-between">
|
||||
<h3 className="text-2xl font-medium">SWMM 파일 업로드현황</h3>
|
||||
<Button type="submit" className="!mx-[1.2rem]">삭제</Button>
|
||||
</div>
|
||||
<UiTable
|
||||
headName=''
|
||||
headlist={rtxNmHeadlist}
|
||||
tableData={rtxNmDataList}
|
||||
total={0}
|
||||
pageSize={10}
|
||||
children={undefined}
|
||||
cellClick={() => { }}
|
||||
onPageChange={() => { }}
|
||||
/>
|
||||
</ListDiv>
|
||||
</ContentLayout>
|
||||
)
|
||||
}
|
||||
@@ -2,8 +2,9 @@
|
||||
import { ContentsDiv, MainDiv, SearchDiv, SearchFormLeft, SearchFormRight, SearchInput, Title, UiTable } from '@common/business_components/ui'
|
||||
import { Button, DatePicker, Input } from '@common/components/ui'
|
||||
import React, { useRef, useState } from 'react'
|
||||
import FileUploadForm from '../../components/fileUploadForm'
|
||||
import FileUploadForm from '../../components/ui/fileUploadForm'
|
||||
import ListDiv from '@common/business_components/ui/list_div'
|
||||
import ContentLayout from '@/components/ui/contentLayout'
|
||||
const tableHeadlist = [
|
||||
{ id: 'no', title: 'NO' },
|
||||
{ id: 'fileNm', title: '파일명' },
|
||||
@@ -22,9 +23,7 @@ const Page = () => {
|
||||
const [company, setCompany] = useState('')
|
||||
const [pjNm, setpjNm] = useState('')
|
||||
return (
|
||||
<MainDiv>
|
||||
<Title title='도시침수 예방사업' />
|
||||
<ContentsDiv>
|
||||
<ContentLayout title='도시침수 예방사업'>
|
||||
<SearchDiv>
|
||||
<SearchFormLeft>
|
||||
<div className='flex items-center space-x-4'>
|
||||
@@ -72,8 +71,7 @@ const Page = () => {
|
||||
<ListDiv className="mt-4">
|
||||
<FileUploadForm title='도시침수 예방사업 사업추진현황 등록' />
|
||||
</ListDiv>
|
||||
</ContentsDiv>
|
||||
</MainDiv>
|
||||
</ContentLayout>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -2,8 +2,9 @@
|
||||
import { ContentsDiv, MainDiv, SearchDiv, SearchFormLeft, SearchFormRight, SelectBox, Title, UiTable } from '@common/business_components/ui'
|
||||
import { Button, DatePicker } from '@common/components/ui'
|
||||
import React, { useState } from 'react'
|
||||
import FileUploadForm from '../../components/fileUploadForm'
|
||||
import FileUploadForm from '../../components/ui/fileUploadForm'
|
||||
import ListDiv from '@common/business_components/ui/list_div'
|
||||
import ContentLayout from '@/components/ui/contentLayout'
|
||||
// TODO: 임시 id
|
||||
const tableHeadlist = [
|
||||
{ id: 'no', title: 'NO' },
|
||||
@@ -21,9 +22,7 @@ const tableData = [
|
||||
const Page = () => {
|
||||
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
|
||||
return (
|
||||
<MainDiv>
|
||||
<Title title='노후 하수관로 정비사업'/>
|
||||
<ContentsDiv>
|
||||
<ContentLayout title='노후 하수관로 정비사업'>
|
||||
<SearchDiv>
|
||||
<SearchFormLeft>
|
||||
<div className='flex items-center space-x-2'>
|
||||
@@ -51,8 +50,7 @@ const Page = () => {
|
||||
<ListDiv className="mt-4">
|
||||
<FileUploadForm title='노후 하수관로 정비사업 주진현황 등록'/>
|
||||
</ListDiv>
|
||||
</ContentsDiv>
|
||||
</MainDiv>
|
||||
</ContentLayout>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user