diff --git a/apps/sn/app/ii/BaseLayout.tsx b/apps/sn/app/ii/BaseLayout.tsx new file mode 100644 index 000000000..fa40d274f --- /dev/null +++ b/apps/sn/app/ii/BaseLayout.tsx @@ -0,0 +1,91 @@ +'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' +type TitleName = { + mainTitle: string + firstCardTitle: string + secondCardTitle: string +} +type TableInfoData = { + headList: { id: string; title: string; align?: string; }[] + tableData: { [key: string]: string | number | boolean | object }[]; + cellClickFunc: Function + onPageChangeFunc: Function +} +type BaseLayout = { + children: ReactNode + titleName: TitleName + form: any + onSubmitEvent: Function + graphBtn: boolean + tableInfoData: TableInfoData +} +// TODO: 나중에 이벤트 추가되면 파라미터 추가 필요 ? +/** + * + * @param children + * @param titleName : 메인 타이틀, 첫번째 요소 타이틀, 두번째 요소 타이틀 + * @param form : zod 스키마 + * @param onSubmitEvent : 폼 이벤트 처리 + * @param graphBtn : 하단에 그래프 버튼 유무 처리 + * @param tableInfoData : 하단 테이블 관련 props 항목 + * @returns + */ +const BaseLayout = ({ children, titleName, form, onSubmitEvent, graphBtn, tableInfoData }: BaseLayout) => { + return ( + + + + { }} selectClass={undefined} /> + { }} selectClass='' /> + { }} selectClass='' /> + { }} selectClass='' /> + + + + + + +
+

{titleName.firstCardTitle}

+
+
+ +
+ {/* 폼 정보 입력 칸 */} + {children} +
+ +
+
+
+ + + +
+

{titleName.secondCardTitle}

+
+ + {/* 그래프 있을 시 */} + {graphBtn ? : null} +
+
+ { tableInfoData.cellClickFunc(e) }} + onPageChange={(e) => { tableInfoData.onPageChangeFunc(e) }} + /> + + + ) +} + +export default BaseLayout \ No newline at end of file diff --git a/apps/sn/app/ii/baseinfo/mock/page.tsx b/apps/sn/app/ii/baseinfo/mock/page.tsx new file mode 100644 index 000000000..119def875 --- /dev/null +++ b/apps/sn/app/ii/baseinfo/mock/page.tsx @@ -0,0 +1,225 @@ +"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, SearchDiv, SearchFormLeft, SearchFormRight, SelectBox } 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>({ + 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) => { + 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 ( + + + + {}} selectClass={undefined}/> + { }} selectClass='' /> + { }} selectClass='' /> + { }} selectClass='' /> + + + + + + +
+

모의정보 설정

+
+
+ +
+ {/* 기본 정보 입력 폼 */} +
+ ( + + + + )} + /> + + ( + + + + )} + /> + + ( + + + + )} + /> +
+ + {/* 테이블 컨테이너 */} +
+
+
+
○ 단위도 계수
+ + {null} + +
+
+
○ 초기 차단 깊이
+ + {null} + +
+
+
+ +
+ +
+
+
+ + + +
+

RTX계수 입력현황

+ +
+ { }} + onPageChange={() => { }} + /> + + + ) +} diff --git a/apps/sn/app/ii/baseinfo/observe/page.tsx b/apps/sn/app/ii/baseinfo/observe/page.tsx new file mode 100644 index 000000000..86caf198f --- /dev/null +++ b/apps/sn/app/ii/baseinfo/observe/page.tsx @@ -0,0 +1,114 @@ +"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 BaseLayout from "@/ii/BaseLayout" + +// zod 스키마 정의 +const formSchema = z.object({ + region: z.string(), + inputdate: z.coerce.date(), + rtkSource: z.string(), +}) + +export default function RTKForm() { + const form = useForm>({ + resolver: zodResolver(formSchema), + defaultValues: { + region: "", + inputdate: new Date(), + rtkSource: "", + } + }) + const [selectedDate, setSelectedDate] = useState(new Date()) + const onSubmit = (data: z.infer) => { + 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 ( + {}} graphBtn={false} tableInfoData={{headList: rtxNmHeadlist, tableData: rtxNmDataList, cellClickFunc: ()=>{}, onPageChangeFunc: ()=>{}}} > + {/* 기본 정보 입력 폼 */} +
+
+
○ 처리구역
+ ( + + )} + /> +
+ +
+
○ 입력일
+ ( + { if (date) setSelectedDate(date) }} + mode={"single"} + /> + )} + /> +
+
+
○ 파일위치
+ ( +
+ +
+ )} + /> +
+
+
○ 비고
+ ( + + )} + /> +
+
+ + ) +} diff --git a/apps/sn/app/ii/baseinfo/polygon/page.tsx b/apps/sn/app/ii/baseinfo/polygon/page.tsx new file mode 100644 index 000000000..ca252fcc4 --- /dev/null +++ b/apps/sn/app/ii/baseinfo/polygon/page.tsx @@ -0,0 +1,96 @@ +'use client' +import React, { useState } from 'react' +import { z } from 'zod' +import { zodResolver } from '@hookform/resolvers/zod' +import { useForm } from 'react-hook-form' +import { FormField, SelectBox } from '@common/business_components/ui' +import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DatePicker, Input } from '@common/components/ui' +import BaseLayout from '@/ii/BaseLayout' +// zod 스키마 정의 +const formSchema = z.object({ + region: z.string(), + inputdate: z.coerce.date(), + rtkSource: z.string(), +}) +const region:{text:string,val:number}[] = [{text:'양평', val:1},{text:'강남',val:2},{text:'test',val:3}] +const Page = () => { + const form = useForm>({ + resolver: zodResolver(formSchema), + defaultValues: { + region: "", + inputdate: new Date(), + rtkSource: "", + } + }) + // 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 [selectedDate, setSelectedDate] = useState(new Date()) + return ( + { }} graphBtn={false} tableInfoData={{ headList:rtxNmHeadlist, tableData:rtxNmDataList, cellClickFunc: () => { }, onPageChangeFunc: () => { } }}> +
+
+
○ 처리구역
+ ( + { } } selectClass={undefined} className='w-[150px]'/> + )} + /> +
+ +
+
○ 입력일
+ ( + { if (date) setSelectedDate(date) }} + mode={"single"} + /> + )} + /> +
+
+
○ 파일위치
+ ( +
+ +
+ )} + /> +
+
+
○ 비고
+ ( + + )} + /> +
+
+ + ) +} + +export default Page \ No newline at end of file diff --git a/apps/sn/app/ii/baseinfo/regist/page.tsx b/apps/sn/app/ii/baseinfo/regist/page.tsx new file mode 100644 index 000000000..b8dbf6205 --- /dev/null +++ b/apps/sn/app/ii/baseinfo/regist/page.tsx @@ -0,0 +1,99 @@ +"use client" +import { z } from "zod" +import { FormField} from '@common/business_components/ui' +import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DatePicker, Input } from '@common/components/ui' +import React, { useState } from 'react' +import { zodResolver } from "@hookform/resolvers/zod" +import { useForm } from "react-hook-form" +import BaseLayout from "@/ii/BaseLayout" + +// zod 스키마 정의 +const formSchema = z.object({ + region: z.string(), + inputdate: z.coerce.date(), + rtkSource: z.string(), +}) + +function RegistForm() { + const form = useForm>({ + resolver: zodResolver(formSchema), + defaultValues: { + region: "", + inputdate: new Date(), + rtkSource: "", + } + }) + const [selectedDate, setSelectedDate] = useState(new Date()) + const onSubmit = (data: z.infer) => { + 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' } + ] + + return ( + { }, onPageChangeFunc: () => { } + }}> + {/* 기본 정보 입력 폼 */} +
+
+
○ 처리구역
+ ( + + )} + /> +
+ +
+
○ 입력일
+ ( + { if (date) setSelectedDate(date) }} + mode={"single"} + /> + )} + /> +
+
+
○ 파일위치
+ ( +
+ +
+ )} + /> +
+
+ + ) +} + +export default RegistForm \ No newline at end of file