106 lines
4.8 KiB
TypeScript
106 lines
4.8 KiB
TypeScript
'use client'
|
|
import ContentLayout from '@/components/ui/contentLayout'
|
|
import { SearchDiv, SearchFormLeft, SelectBox, SearchFormRight, Form, UiTable } from '@common/business_components/ui'
|
|
import ListDiv from '@common/business_components/ui/list_div'
|
|
import { Button } from '@common/components/ui'
|
|
import React, { type ReactNode } from 'react'
|
|
import { SelectBox2 } from '@common/business_components/ui/select/index-2'
|
|
|
|
type TitleName = {
|
|
mainTitle: string
|
|
firstCardTitle: string
|
|
secondCardTitle?: string
|
|
}
|
|
type SelectBox = {
|
|
labelNm?: Label
|
|
searchChk?: boolean
|
|
title?: string // SearchDiv의 제목 (선택 사항)
|
|
}
|
|
type Label = {
|
|
first: string
|
|
second: string
|
|
third: string
|
|
fourth: string
|
|
}
|
|
type BaseLayout = {
|
|
children?: ReactNode[]
|
|
titleName: TitleName
|
|
form: any
|
|
onSubmitEvent: Function
|
|
graphBtn?: boolean
|
|
firstDivBtn?: boolean
|
|
searchBox?: SelectBox
|
|
}
|
|
// TODO: 나중에 이벤트 추가되면 파라미터 추가 필요 ?
|
|
/**
|
|
*
|
|
* @param children
|
|
* @param titleName : 메인 타이틀, 첫번째 요소 타이틀, 두번째 요소 타이틀
|
|
* @param form : zod 스키마
|
|
* @param onSubmitEvent : 폼 이벤트 처리
|
|
* @param graphBtn : 하단에 그래프 버튼 유무 처리
|
|
* @returns
|
|
*/
|
|
const BaseLayout = ({ children, titleName, form, onSubmitEvent, graphBtn = false, searchBox }: BaseLayout) => {
|
|
return (
|
|
<ContentLayout title={titleName.mainTitle}>
|
|
<ListDiv>
|
|
{/* searchBox.title이 있으면 h3 태그로 제목을 표시합니다. */}
|
|
{searchBox?.title && (
|
|
<div className="card-header">
|
|
<h3 className="text-2xl font-medium">{searchBox.title}</h3>
|
|
<div>
|
|
{graphBtn ? <Button className="!mr-[1.2rem]">다운로드</Button> : null}
|
|
{/* 그래프 있을 시 */}
|
|
{graphBtn ? <Button className="!mr-[1.2rem]">삭제</Button> : null}
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center w-full">
|
|
<div className="flex-1">
|
|
<SearchFormLeft>
|
|
<SelectBox2 label={searchBox?.labelNm?.first ?? ''} selectArray={[{ text: '한강 유역청', val: '1' }]} className="col-span-2" onSelectValue={(val) => { }} selectClass={undefined} />
|
|
<SelectBox2 label={searchBox?.labelNm?.second ?? ''} selectArray={[{ text: '경기도', val: '1' }]} className="col-span-2" onSelectValue={() => { }} selectClass='' />
|
|
<SelectBox2 label={searchBox?.labelNm?.third ?? ''} selectArray={[{ text: '양평군', val: '1' }]} className="col-span-3" onSelectValue={() => { }} selectClass='' />
|
|
<SelectBox2 label={searchBox?.labelNm?.fourth ?? ''} selectArray={[{ text: '양평하수처리장', val: '1' }]} className="col-span-3" onSelectValue={() => { }} selectClass='' />
|
|
</SearchFormLeft>
|
|
</div>
|
|
{searchBox?.searchChk ? <SearchFormRight><Button>조회</Button></SearchFormRight> : null}
|
|
</div>
|
|
</ListDiv>
|
|
<ListDiv>
|
|
<div className="card-header">
|
|
<h3 className="text-2xl font-medium">{titleName.firstCardTitle}</h3>
|
|
<div>
|
|
{graphBtn ? <Button className="!mr-[1.2rem]">다운로드</Button> : null}
|
|
{/* 그래프 있을 시 */}
|
|
{graphBtn ? <Button className="!mr-[1.2rem]">삭제</Button> : null}
|
|
</div>
|
|
</div>
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmitEvent)}>
|
|
<div className="card !m-[1.2rem]">
|
|
{/* 폼 정보 입력 칸 */}
|
|
{children?.[0]}
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
</ListDiv>
|
|
{
|
|
children?.[1] != null ? <ListDiv>
|
|
<div className="card-header flex items-center justify-between">
|
|
<h3 className="text-2xl font-medium">{titleName?.secondCardTitle}</h3>
|
|
<div>
|
|
{graphBtn ? <Button className="!mr-[1.2rem]">다운로드</Button> : null}
|
|
{/* 그래프 있을 시 */}
|
|
{graphBtn ? <Button className="!mr-[1.2rem]">삭제</Button> : null}
|
|
</div>
|
|
</div>
|
|
<div className="card !m-[1.2rem]">{children?.[1]}</div>
|
|
</ListDiv> : null
|
|
}
|
|
</ContentLayout >
|
|
)
|
|
}
|
|
|
|
export default BaseLayout |