페이지 레이아웃 조정
This commit is contained in:
JIeunhuh
@@ -9,7 +9,8 @@ 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"
|
||||
|
||||
import BaseLayout from "@/ii/BaseLayout"
|
||||
// TODO: 컴포넌트 호출 ~ 필요 코드 수정해야댐
|
||||
// zod 스키마 정의
|
||||
const formSchema = z.object({
|
||||
region: z.string(),
|
||||
@@ -91,135 +92,84 @@ export default function RTKForm() {
|
||||
}
|
||||
|
||||
return (
|
||||
<ContentLayout title="모의정보 설정">
|
||||
<SearchDiv>
|
||||
<SearchFormLeft>
|
||||
<SelectBox className="col-span-3" label='' selectArray={[{ text: '한강 유역청', val: '1' }]} onSelectValue={(val) => {}} selectClass={undefined}/>
|
||||
<SelectBox label='' selectArray={[{ text: '경기도', val: '1' }]} className="col-span-3" onSelectValue={() => { }} selectClass='' />
|
||||
<SelectBox label='' selectArray={[{ text: '양평군', val: '1' }]} className="col-span-3" onSelectValue={() => { }} selectClass='' />
|
||||
<SelectBox label='' selectArray={[{ text: '양평하수처리장', val: '1' }]} className="col-span-3" onSelectValue={() => { }} selectClass='' />
|
||||
</SearchFormLeft>
|
||||
<SearchFormRight>
|
||||
<Button>조회</Button>
|
||||
</SearchFormRight>
|
||||
</SearchDiv>
|
||||
<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={() => { }}
|
||||
<BaseLayout titleName={{ mainTitle: '모의정보 설정', firstCardTitle: '모의정보 설정', secondCardTitle: 'RTX계수 입력현황' }} form={form} onSubmitEvent={() => { }} graphBtn={false} tableInfoData={{ headList: rtxNmHeadlist, tableData: [{}], cellClickFunc: () => { }, onPageChangeFunc: () => { } }}>
|
||||
<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 }) => (
|
||||
<SelectBox label="" selectArray={[{ text: '양평', val: 1 }]} onSelectValue={() => { }} selectClass="" className="w-[150px]" />
|
||||
)}
|
||||
/>
|
||||
</ListDiv>
|
||||
</ContentLayout>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ RDII 기여면적(ha)</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rdiiArea"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
className="h-10 text-center text-xl w-[150px]"
|
||||
placeholder=""
|
||||
type=""
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ RTK계수 출처</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rtkSource"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
className="h-10 text-center text-xl w-[250px]"
|
||||
placeholder=""
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 테이블 컨테이너 */}
|
||||
<div className="mt-[1.2rem]">
|
||||
<div className="grid grid-cols-2">
|
||||
<div>
|
||||
<div className="mb-[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>
|
||||
</BaseLayout >
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user