From a88a68c21286a6f09eb1b120e9ffadb97d970aca Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Thu, 24 Apr 2025 10:16:23 +0900 Subject: [PATCH 1/9] =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=EC=82=AC=ED=95=AD=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/components/ui/fileUploadForm.tsx | 58 +++++++++++--------- apps/sn/app/oper/floodPre/page.tsx | 21 ++----- apps/sn/app/oper/oldPp/page.tsx | 44 ++++++++++++--- 3 files changed, 72 insertions(+), 51 deletions(-) diff --git a/apps/sn/app/components/ui/fileUploadForm.tsx b/apps/sn/app/components/ui/fileUploadForm.tsx index dd3575302..e111d8362 100644 --- a/apps/sn/app/components/ui/fileUploadForm.tsx +++ b/apps/sn/app/components/ui/fileUploadForm.tsx @@ -1,10 +1,10 @@ "use client" import { FileUpload, SelectBox } from '@common/business_components/ui'; -import { Button } from '@common/components/ui'; +import { Button, Input } from '@common/components/ui'; import React, { useState } from 'react' -const FileUploadForm = ({title}:{title:string}) => { +const FileUploadForm = ({ title }: { title: string }) => { const [files, setFiles] = useState(null); const [selectedYear, setSelectedYear] = useState(''); @@ -20,35 +20,41 @@ const FileUploadForm = ({title}:{title:string}) => {

{title}

-
-
- -
+
+
setSelectedYear(String(value))} + /> setSelectedYear(String(value))} /> - +
+
+
+ +
+ +
diff --git a/apps/sn/app/oper/floodPre/page.tsx b/apps/sn/app/oper/floodPre/page.tsx index 3c0303609..d2c5fb848 100644 --- a/apps/sn/app/oper/floodPre/page.tsx +++ b/apps/sn/app/oper/floodPre/page.tsx @@ -5,19 +5,8 @@ import React, { useRef, useState } from 'react' 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: '파일명' }, - { id: 'manageYear', title: '기준년도' }, - { id: 'registDt', title: '등록 일자' }, - { id: 'registUsr', title: '등록자' } +import { tableData, tableHeadlist } from '../oldPp/page' -] -const tableData = [ - { 'no': '1', 'fileNm': '파일명', 'manageYear': '2023', 'registDt': '2025-04-16', 'registUsr': 'me' }, - { 'no': '2', 'fileNm': '파일명', 'manageYear': '2024', 'registDt': '2025-04-16', 'registUsr': 'me2' }, - { 'no': '3', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3' } -] const Page = () => { const [selectedDate, setSelectedDate] = useState(new Date()) const [company, setCompany] = useState('') @@ -28,7 +17,7 @@ const Page = () => {
- + { if (date) setSelectedDate(date) }} /> @@ -38,7 +27,7 @@ const Page = () => { onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} />
- + { />
- + {
- { }} onPageChange={function (page: number): void { + { }} onPageChange={function (page: number): void { throw new Error('Function not implemented.') }}> diff --git a/apps/sn/app/oper/oldPp/page.tsx b/apps/sn/app/oper/oldPp/page.tsx index 832942752..3dd169245 100644 --- a/apps/sn/app/oper/oldPp/page.tsx +++ b/apps/sn/app/oper/oldPp/page.tsx @@ -1,26 +1,36 @@ 'use client' import { ContentsDiv, MainDiv, SearchDiv, SearchFormLeft, SearchFormRight, SelectBox, Title, UiTable } from '@common/business_components/ui' -import { Button, DatePicker, Label } from '@common/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 -const tableHeadlist = [ +export const tableHeadlist = [ { id: 'no', title: 'NO' }, { id: 'fileNm', title: '파일명' }, - { id: 'manageYear', title: '관리년도' }, + { id: 'manageYear', title: '년도' }, + { id: 'bungi', title: '분기' }, { id: 'registDt', title: '등록 일자' }, { id: 'registUsr', title: '등록자' } ] -const tableData = [ - { 'no': '1', 'fileNm': '파일명', 'manageYear': '2023', 'registDt': '2025-04-16', 'registUsr': 'me' }, - { 'no': '2', 'fileNm': '파일명', 'manageYear': '2024', 'registDt': '2025-04-16', 'registUsr': 'me2' }, - { 'no': '3', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3' } +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(new Date()); + const [company, setCompany] = useState('') + const [pjNm, setpjNm] = useState('') return ( @@ -35,6 +45,22 @@ const Page = () => { { if (date) setSelectedDate(date) }} /> +
+ + setCompany(e.target.value)} + /> +
+
+ + setpjNm(e.target.value)} + /> +
@@ -43,14 +69,14 @@ const Page = () => { -
+

사업정보 등록현황

- { }} onPageChange={function (page: number): void { + { }} onPageChange={function (page: number): void { throw new Error('Function not implemented.') }}> From 0556f73c769f11dea1d38d0fdf0c8303f2b3122f Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Fri, 25 Apr 2025 14:29:13 +0900 Subject: [PATCH 2/9] =?UTF-8?q?ii=EB=B6=84=EC=84=9D=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=84=A4=EA=B3=84=20=EB=B3=80=EA=B2=BD=ED=86=A0?= =?UTF-8?q?=EB=8C=80=EB=A1=9C=20=ED=99=94=EB=A9=B4=EC=9E=AC=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/components/ui/formSection.tsx | 2 +- apps/sn/app/ii/BaseLayout.tsx | 68 ++++---- apps/sn/app/ii/baseinfo/observe/page.tsx | 101 ------------ apps/sn/app/ii/baseinfo/polygon/page.tsx | 96 ----------- apps/sn/app/ii/baseinfo/regist/page.tsx | 99 ------------ apps/sn/app/ii/ir/irsetting/page.tsx | 114 -------------- apps/sn/app/ii/ir/measureDataUpload/page.tsx | 98 ------------ apps/sn/app/ii/irsetting/page.tsx | 61 +++++++ .../app/ii/{baseinfo/mock => rdii}/page.tsx | 101 +++++------- apps/sn/app/ii/rdii/rain/page.tsx | 54 ------- apps/sn/app/ii/rdii/rdiisetting/page.tsx | 149 ------------------ apps/sn/app/ii/result/page.tsx | 64 ++++++++ apps/sn/app/map/page.tsx | 1 + apps/sn/app/page.tsx | 21 +-- 14 files changed, 200 insertions(+), 829 deletions(-) delete mode 100644 apps/sn/app/ii/baseinfo/observe/page.tsx delete mode 100644 apps/sn/app/ii/baseinfo/polygon/page.tsx delete mode 100644 apps/sn/app/ii/baseinfo/regist/page.tsx delete mode 100644 apps/sn/app/ii/ir/irsetting/page.tsx delete mode 100644 apps/sn/app/ii/ir/measureDataUpload/page.tsx create mode 100644 apps/sn/app/ii/irsetting/page.tsx rename apps/sn/app/ii/{baseinfo/mock => rdii}/page.tsx (57%) delete mode 100644 apps/sn/app/ii/rdii/rain/page.tsx delete mode 100644 apps/sn/app/ii/rdii/rdiisetting/page.tsx create mode 100644 apps/sn/app/ii/result/page.tsx diff --git a/apps/sn/app/components/ui/formSection.tsx b/apps/sn/app/components/ui/formSection.tsx index b4e578aae..28e4618f7 100644 --- a/apps/sn/app/components/ui/formSection.tsx +++ b/apps/sn/app/components/ui/formSection.tsx @@ -10,7 +10,7 @@ interface FormSectionProps { const FormSection = ({ children, titleNm, form, name }: FormSectionProps) => { return ( -
+
{titleNm}
{ +const BaseLayout = ({ children,titleName, form, onSubmitEvent, graphBtn=false, searchBox }: BaseLayout) => { return ( - { }} selectClass={undefined} /> - { }} selectClass='' /> - { }} selectClass='' /> - { }} selectClass='' /> + { }} selectClass={undefined} /> + { }} selectClass='' /> + { }} selectClass='' /> + { }} selectClass='' /> - - - + {searchBox?.searchChk ? : null}

{titleName.firstCardTitle}

+
+ {graphBtn ? : null} + {/* 그래프 있을 시 */} + {graphBtn ? : null} +
{/* 폼 정보 입력 칸 */} - {children} -
- -
+ {children?.[0]}
- + {children?.[1] != null ?

{titleName.secondCardTitle}

-
- - {/* 그래프 있을 시 */} - {graphBtn ? : null} -
- { tableInfoData.cellClickFunc(e) }} - onPageChange={(e) => { tableInfoData.onPageChangeFunc(e) }} - /> - +
{children?.[1]}
+ : null} ) } diff --git a/apps/sn/app/ii/baseinfo/observe/page.tsx b/apps/sn/app/ii/baseinfo/observe/page.tsx deleted file mode 100644 index 16bd24fb2..000000000 --- a/apps/sn/app/ii/baseinfo/observe/page.tsx +++ /dev/null @@ -1,101 +0,0 @@ -"use client" - -import { z } from "zod" -import { useForm, useFieldArray } from "react-hook-form" -import { zodResolver } from "@hookform/resolvers/zod" -import { FormField, SelectBox } from "@common/business_components/ui" -import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Input, DatePicker } from "@common/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(), -}) -const region:{text:string,val:number}[] = [{text:'양평', val:1},{text:'강남',val:2},{text:'test',val:3}] -export default function RTKForm() { - const form = useForm>({ - resolver: zodResolver(formSchema), - defaultValues: { - region: "", - inputdate: new Date(), - rtkSource: "", - } - }) - const [selectedDate, setSelectedDate] = useState(new Date()) - // 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: ()=>{}}} > - {/* 기본 정보 입력 폼 */} -
-
-
○ 처리구역
- ( - {}} selectClass="" className="w-[150px]"/> - )} - /> -
- -
-
○ 입력일
- ( - { 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 deleted file mode 100644 index ca252fcc4..000000000 --- a/apps/sn/app/ii/baseinfo/polygon/page.tsx +++ /dev/null @@ -1,96 +0,0 @@ -'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 deleted file mode 100644 index b8dbf6205..000000000 --- a/apps/sn/app/ii/baseinfo/regist/page.tsx +++ /dev/null @@ -1,99 +0,0 @@ -"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 diff --git a/apps/sn/app/ii/ir/irsetting/page.tsx b/apps/sn/app/ii/ir/irsetting/page.tsx deleted file mode 100644 index 95d99943c..000000000 --- a/apps/sn/app/ii/ir/irsetting/page.tsx +++ /dev/null @@ -1,114 +0,0 @@ -'use client' -import React, { useState } from 'react' -import BaseLayout from '../../BaseLayout' -import { FormField, SelectBox } from '@common/business_components/ui' -import { DatePicker, Input } from '@common/components/ui' -import { z } from 'zod' -import { zodResolver } from '@hookform/resolvers/zod' -import { useForm } from 'react-hook-form' -import FormSection from '@/components/ui/formSection' -const formSchema = z.object({ - region: z.string(), - suyeonga: z.number(), - inputdate: z.coerce.date(), - rtkSource: z.string(), -}) -const region: { text: string, val: number }[] = [{ text: '양평', val: 1 }, { text: '강남', val: 2 }, { text: 'test', val: 3 }] -const IrSetting = () => { - const form = useForm>({ - resolver: zodResolver(formSchema), - defaultValues: { - region: "", - suyeonga: 0, - inputdate: new Date(), - rtkSource: "", - } - }) - console.log('test') - // TODO: 임시 데이터 - const rtxNmHeadlist = [ - { id: 'nm', title: '분석번호' }, - { id: 'hasu', title: '하수처리장' }, - { id: 'region', title: '처리구역' }, - { id: 'sangsu', title: '상수사용량' }, - { id: 'wjsghks', title: '오수 전환율' }, - { id: 'tnsdhtn', title: '순오수량' }, - { id: 'rkddn', title: '강우 유출량' }, - { id: 'rdii', title: 'RDII' } - ] - const rtxNmDataList = [ - { "nm": '1', 'hasu': '', 'region': '처리', 'sangsu': '파일', 'wjsghks': '', 'tnsdhtn': '', 'rkddn': '', 'rdii': '' } - ] - const [selectedDate, setSelectedDate] = useState(new Date()) - return ( - { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, cellClickFunc: () => { }, onPageChangeFunc: () => { } }}> -
- { }} selectClass={undefined} className='w-[150px]' /> -
-
○ 오수 전환율
- ( - - )} - /> -
-
-
○ 수용가 수
- ( - { }} selectClass={undefined} className='w-[150px]' /> - )} - /> -
-
-
○ 수용가-맨홀 매칭
- ( -
- -
- )} - /> -
-
-
○ 상수사용량 정보
- ( - { if (date) setSelectedDate(date) }} - mode={"single"} className='w-[150px]' - /> - )} - /> -
-
-
○ 관망도 자료
- ( -
- -
- )} - /> -
-
- - ) -} - -export default IrSetting \ No newline at end of file diff --git a/apps/sn/app/ii/ir/measureDataUpload/page.tsx b/apps/sn/app/ii/ir/measureDataUpload/page.tsx deleted file mode 100644 index a7a461437..000000000 --- a/apps/sn/app/ii/ir/measureDataUpload/page.tsx +++ /dev/null @@ -1,98 +0,0 @@ -'use client' -import React, { useState } from 'react' -import BaseLayout from '../../BaseLayout' -import { FormField, SelectBox } from '@common/business_components/ui' -import { DatePicker, Input } from '@common/components/ui' -import { z } from 'zod' -import { zodResolver } from '@hookform/resolvers/zod' -import { useForm } from 'react-hook-form' -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 MeasureDataUpload = () => { - const form = useForm>({ - resolver: zodResolver(formSchema), - defaultValues: { - region: "", - inputdate: new Date(), - rtkSource: "", - } - }) - // TODO: 임시 데이터 - const rtxNmHeadlist = [ - { id: 'fileNm', title: '파일명' }, - { id: 'status', title: '상태' }, - { id: 'code', title: '지정코드' }, - { id: 'cjfl', title: '처리' }, - { id: 'add', title: '추가' }, - { id: 'update', title: '변경' }, - { id: 'error', title: '오류' }, - { id: 'skip', title: 'Skip' } - ] - const rtxNmDataList = [ - { "status": '상태', 'code': '123824', 'cjfl': '처리', 'fileNm': '파일', 'add': '', 'update': '', 'error': '', 'skip': '' } - ] - const [selectedDate, setSelectedDate] = useState(new Date()) - return ( - { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, cellClickFunc: () => { }, onPageChangeFunc: () => { } }}> -
-
-
○ 처리구역
- ( - { }} selectClass={undefined} className='w-[150px]' /> - )} - /> -
- -
-
○ 입력일
- ( - { if (date) setSelectedDate(date) }} - mode={"single"} className='w-[150px]' - /> - )} - /> -
-
-
○ 관로 관리번호
- ( - - )} - /> -
-
-
○ 파일위치
- ( -
- -
- )} - /> -
-
- - ) -} - -export default MeasureDataUpload \ No newline at end of file diff --git a/apps/sn/app/ii/irsetting/page.tsx b/apps/sn/app/ii/irsetting/page.tsx new file mode 100644 index 000000000..1a9d1d70c --- /dev/null +++ b/apps/sn/app/ii/irsetting/page.tsx @@ -0,0 +1,61 @@ +'use client' +import React, { useState } from 'react' +import { FormField, SelectBox } from '@common/business_components/ui' +import { Button, DatePicker, Input } from '@common/components/ui' +import { z } from 'zod' +import { zodResolver } from '@hookform/resolvers/zod' +import { useForm } from 'react-hook-form' +import FormSection from '@/components/ui/formSection' +import BaseLayout from '../BaseLayout' +const formSchema = z.object({ + managenm: z.string(), + region: z.string(), + suyeonga: z.number(), + inputdate: z.coerce.date(), + rtkSource: z.string(), + suyeongaPlace: z.string() +}) +const region: { text: string, val: number }[] = [{ text: '양평', val: 1 }, { text: '강남', val: 2 }, { text: 'test', val: 3 }] +const IrSetting = () => { + const form = useForm>({ + resolver: zodResolver(formSchema), + defaultValues: { + managenm: "", + region: "", + suyeonga: 0, + inputdate: new Date(), + rtkSource: "", + suyeongaPlace: "" + } + }) + const [selectedDate, setSelectedDate] = useState(new Date()) + return ( + { } } graphBtn={false}> +
+ + +
+ +
+ +
+
+
+ +
+
+ +
+ + { if (date) setSelectedDate(date) }} mode={"single"} /> + + +
+ +
+
+ + ) +} + +export default IrSetting \ No newline at end of file diff --git a/apps/sn/app/ii/baseinfo/mock/page.tsx b/apps/sn/app/ii/rdii/page.tsx similarity index 57% rename from apps/sn/app/ii/baseinfo/mock/page.tsx rename to apps/sn/app/ii/rdii/page.tsx index 0d9b4f46c..9a04102e7 100644 --- a/apps/sn/app/ii/baseinfo/mock/page.tsx +++ b/apps/sn/app/ii/rdii/page.tsx @@ -1,15 +1,14 @@ "use client" -import { z } from "zod" +import { date, 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 { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Input, Button, DatePicker } 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" +import React, { useState } from "react" import BaseLayout from "@/ii/BaseLayout" +import FormSection from "@/components/ui/formSection" + // TODO: 컴포넌트 호출 ~ 필요 코드 수정해야댐 // zod 스키마 정의 const formSchema = z.object({ @@ -27,7 +26,11 @@ const formSchema = z.object({ Dmax: z.string(), Drec: z.string(), Do: z.string(), - })) + })), + suyeonga: z.string(), + rate: z.string(), + date: z.coerce.date(), + rain: z.string(), }) export default function RTKForm() { @@ -79,64 +82,23 @@ export default function RTKForm() { { 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) } - + const [selectedDate, setSelectedDate] = useState(new Date()) return ( - { }} graphBtn={false} tableInfoData={{ headList: rtxNmHeadlist, tableData: [{}], cellClickFunc: () => { }, onPageChangeFunc: () => { } }}> -
-
-
○ 처리구역
- ( - { }} selectClass="" className="w-[150px]" /> - )} - /> -
-
-
○ RDII 기여면적(ha)
- ( - - )} - /> -
-
-
○ RTK계수 출처
- ( - - )} - /> -
-
- - {/* 테이블 컨테이너 */} -
+ { }} graphBtn={false}> + {[
+
+ +
○ 단위도 계수
@@ -169,7 +131,26 @@ export default function RTKForm() {
+
+
+ +
+
+ +
+ + { if (date) setSelectedDate(date) }} mode={"single"} /> + + +
+ +
+
+
+ +
+ ]} ) } diff --git a/apps/sn/app/ii/rdii/rain/page.tsx b/apps/sn/app/ii/rdii/rain/page.tsx deleted file mode 100644 index e74560b66..000000000 --- a/apps/sn/app/ii/rdii/rain/page.tsx +++ /dev/null @@ -1,54 +0,0 @@ -'use client' -import React, { useState } from 'react' -import BaseLayout from '../../BaseLayout' -import { FormField, SelectBox } from '@common/business_components/ui' -import { DatePicker, Input } from '@common/components/ui' -import { z } from 'zod' -import { zodResolver } from '@hookform/resolvers/zod' -import { useForm } from 'react-hook-form' -const formSchema = z.object({ - region: z.string(), -}) -const region: { text: string, val: number }[] = [{ text: '양평', val: 1 }, { text: '강남', val: 2 }, { text: 'test', val: 3 }] -const RainDataUpload = () => { - const form = useForm>({ - resolver: zodResolver(formSchema), - defaultValues: { - region: "", - } - }) - // TODO: 임시 데이터 - const rtxNmHeadlist = [ - { id: 'fileNm', title: '파일명' }, - { id: 'status', title: '상태' }, - { id: 'code', title: '지정코드' }, - { id: 'cjfl', title: '처리' }, - { id: 'add', title: '추가' }, - { id: 'update', title: '변경' }, - { id: 'error', title: '오류' }, - { id: 'skip', title: 'Skip' } - ] - const rtxNmDataList = [ - { "status": '상태', 'code': '123824', 'cjfl': '처리', 'fileNm': '파일', 'add': '', 'update': '', 'error': '', 'skip': '' } - ] - return ( - { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, cellClickFunc: () => { }, onPageChangeFunc: () => { } }}> -
-
-
○ 파일위치
- ( -
- -
- )} - /> -
-
- - ) -} - -export default RainDataUpload \ No newline at end of file diff --git a/apps/sn/app/ii/rdii/rdiisetting/page.tsx b/apps/sn/app/ii/rdii/rdiisetting/page.tsx deleted file mode 100644 index dd4eb367c..000000000 --- a/apps/sn/app/ii/rdii/rdiisetting/page.tsx +++ /dev/null @@ -1,149 +0,0 @@ -'use client' -import BaseLayout from '@/ii/BaseLayout' -import { FormField, SelectBox } from '@common/business_components/ui' -import { DatePicker, Input } from '@common/components/ui' -import { zodResolver } from '@hookform/resolvers/zod' -import React, { useState } from 'react' -import { useForm } from 'react-hook-form' -import { z } from 'zod' -const formSchema = z.object({ - region: z.string(), - suyeonga:z.number(), - meter:z.string(), - inputdate: z.coerce.date(), - inpSource:z.string(), - rtkSource: z.string(), -}) -const region: { text: string, val: number }[] = [{ text: '양평', val: 1 }, { text: '강남', val: 2 }, { text: 'test', val: 3 }] -const RdiiSetting = () => { - const form = useForm>({ - resolver: zodResolver(formSchema), - defaultValues: { - region: "", - meter:"", - suyeonga:0, - inputdate: new Date(), - inpSource:"", - rtkSource: "", - } - }) - // TODO: 임시 데이터 - const rtxNmHeadlist = [ - { id: 'nm', title: '분석번호' }, - { id: 'hasu', title: '하수처리장' }, - { id: 'region', title: '처리구역' }, - { id: 'sangsu', title: '상수사용량' }, - { id: 'wjsghks', title: '오수 전환율' }, - { id: 'tnsdhtn', title: '순오수량' }, - { id: 'rkddn', title: '강우 유출량' }, - { id: 'rdii', title: 'RDII' } - ] - const rtxNmDataList = [ - { "nm": '1', 'hasu': '', 'region': '처리', 'sangsu': '파일', 'wjsghks': '', 'tnsdhtn': '', 'rkddn': '', 'rdii': '' } - ] - const [selectedDate, setSelectedDate] = useState(new Date()) - return ( - { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, cellClickFunc: () => { }, onPageChangeFunc: () => { } }}> -
-
-
○ 처리구역
- ( - { }} selectClass={undefined} className='w-[150px]' /> - )} - /> -
-
-
○ 상수사용량 정보
- ( - { if (date) setSelectedDate(date) }} - mode={"single"} className='w-[150px]' - /> - )} - /> -
-
-
○ 관망도자료
- ( -
- -
- )} - /> -
-
-
○ RDII 기여면적(ha)
- ( - - )} - /> -
-
-
○ 오수 전환율
- ( - - )} - /> -
-
-
○ 강우자료
- ( -
- -
- )} - /> -
-
-
○ 수용가 수
- ( - { }} selectClass={undefined} className='w-[150px] h-[3.2rem]' /> - )} - /> -
-
-
○ 수용가-맨홀 매칭
- ( - { }} selectClass={undefined} className='h-[3.2rem] w-[150px]' /> - )} - /> -
-
- - ) -} - -export default RdiiSetting \ No newline at end of file diff --git a/apps/sn/app/ii/result/page.tsx b/apps/sn/app/ii/result/page.tsx new file mode 100644 index 000000000..f42f2ab29 --- /dev/null +++ b/apps/sn/app/ii/result/page.tsx @@ -0,0 +1,64 @@ +'use client' +import React, { useState } from 'react' +import { FormField, SelectBox, UiTable } from '@common/business_components/ui' +import { Button, DatePicker, Input } from '@common/components/ui' +import { z } from 'zod' +import { zodResolver } from '@hookform/resolvers/zod' +import { useForm } from 'react-hook-form' +import FormSection from '@/components/ui/formSection' +import BaseLayout from '../BaseLayout' +import { title } from 'process' +const formSchema = z.object({ + managenm: z.string(), + region: z.string(), + suyeonga: z.number(), + inputdate: z.coerce.date(), + rtkSource: z.string(), + suyeongaPlace: z.string() +}) +// TODO: 분석구분에 따라서 테이블 컬럼 변경필요 +const tableColumn = [ + { id: 'no', title: '번호' }, + { id: 'hasu', title: '하수처리장' }, + { id: 'guyeok', title: '처리구역' }, + { id: 'sangsu', title: '상수 사용량' }, + { id: 'rate', title: '오수 전환율' }, + { id: 'water', title: '순오수량' }, + { id: 'measureWater', title: '측정하수량' }, + { id: 'ii', title: '침입수량' }, + { id: 'date', title: '분석일자' }, + { id: 'usr', title: '분석자' } +] +const tableInfoData = [{ 'no': '1', 'hasu': '양평하수처리장', 'guyeok': '양평', 'sangsu': '1000', 'rate': '0.5', 'water': '500', 'measureWater': '1000', 'ii': '500', 'date': '2023-10-01', 'usr': '홍길동' }] +const Result = () => { + const form = useForm>({ + resolver: zodResolver(formSchema), + defaultValues: { + managenm: "", + region: "", + suyeonga: 0, + inputdate: new Date(), + rtkSource: "", + suyeongaPlace: "" + } + }) + return ( + { }} graphBtn={true}> + {[
+
○ 침입수 산정결과 현황
+ { }} + onPageChange={(e) => { }} + /> +
]} + + ) +} + +export default Result \ No newline at end of file diff --git a/apps/sn/app/map/page.tsx b/apps/sn/app/map/page.tsx index 4dbb90c49..7339d0ac0 100644 --- a/apps/sn/app/map/page.tsx +++ b/apps/sn/app/map/page.tsx @@ -10,6 +10,7 @@ import { mapService } from "@service"; const Map = () => { const [treeData, setTreeData] = useState([]); // 초기값을 객체 또는 null로 설정 + const [selectedFeature,setSelectedFeature] = useState(null); // 선택된 피처 상태 const fetchData = async () => { try { diff --git a/apps/sn/app/page.tsx b/apps/sn/app/page.tsx index 0ae1eb678..db70f7dfa 100644 --- a/apps/sn/app/page.tsx +++ b/apps/sn/app/page.tsx @@ -14,24 +14,9 @@ export default function Home() {

I/I 분석(기초정보 설정)

- - - - -
-
-
-

I/I 분석(침입수 분석)

-
- - -
-
-
-

I/I 분석(RDII 분석)

-
- - + + +
From fb0d462c0f3224bc367b6495e388d19f260a8294 Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Fri, 25 Apr 2025 16:46:17 +0900 Subject: [PATCH 3/9] test --- apps/sn/app/ii/irsetting/page.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/sn/app/ii/irsetting/page.tsx b/apps/sn/app/ii/irsetting/page.tsx index 1a9d1d70c..44218dd25 100644 --- a/apps/sn/app/ii/irsetting/page.tsx +++ b/apps/sn/app/ii/irsetting/page.tsx @@ -30,9 +30,11 @@ const IrSetting = () => { }) const [selectedDate, setSelectedDate] = useState(new Date()) return ( - { } } graphBtn={false}> + { }} graphBtn={false}>
- + + { if (date) setSelectedDate(date);}} mode={"single"} /> +
From 939c1921cf5f72722646430dfa106fdbd7ba47fa Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Fri, 25 Apr 2025 18:29:56 +0900 Subject: [PATCH 4/9] =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/ii/irsetting/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/sn/app/ii/irsetting/page.tsx b/apps/sn/app/ii/irsetting/page.tsx index 44218dd25..16b44ea95 100644 --- a/apps/sn/app/ii/irsetting/page.tsx +++ b/apps/sn/app/ii/irsetting/page.tsx @@ -30,7 +30,7 @@ const IrSetting = () => { }) const [selectedDate, setSelectedDate] = useState(new Date()) return ( - { }} graphBtn={false}> + { }} graphBtn={false}>
{ if (date) setSelectedDate(date);}} mode={"single"} /> From f95b093d81065b75072459418be891ddc514acc6 Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Mon, 28 Apr 2025 16:01:29 +0900 Subject: [PATCH 5/9] =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/oper/floodPre/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/sn/app/oper/floodPre/page.tsx b/apps/sn/app/oper/floodPre/page.tsx index d2c5fb848..cc114197f 100644 --- a/apps/sn/app/oper/floodPre/page.tsx +++ b/apps/sn/app/oper/floodPre/page.tsx @@ -12,7 +12,7 @@ const Page = () => { const [company, setCompany] = useState('') const [pjNm, setpjNm] = useState('') return ( - +
From 611a06faae9c76937a895ccda2085c29468c73c7 Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Mon, 28 Apr 2025 16:10:13 +0900 Subject: [PATCH 6/9] =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/oper/floodPre/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/sn/app/oper/floodPre/page.tsx b/apps/sn/app/oper/floodPre/page.tsx index cc114197f..cf7f1529b 100644 --- a/apps/sn/app/oper/floodPre/page.tsx +++ b/apps/sn/app/oper/floodPre/page.tsx @@ -12,7 +12,7 @@ const Page = () => { const [company, setCompany] = useState('') const [pjNm, setpjNm] = useState('') return ( - +
From f84cce9c7d70368ad21ae19ba9ef593646bf7e00 Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Mon, 28 Apr 2025 16:39:46 +0900 Subject: [PATCH 7/9] test --- apps/sn/app/oper/floodPre/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/sn/app/oper/floodPre/page.tsx b/apps/sn/app/oper/floodPre/page.tsx index cf7f1529b..d2c5fb848 100644 --- a/apps/sn/app/oper/floodPre/page.tsx +++ b/apps/sn/app/oper/floodPre/page.tsx @@ -12,7 +12,7 @@ const Page = () => { const [company, setCompany] = useState('') const [pjNm, setpjNm] = useState('') return ( - +
From 11fd638b192255784bb127f4bfad143ad970c1a7 Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Tue, 29 Apr 2025 11:07:31 +0900 Subject: [PATCH 8/9] =?UTF-8?q?=ED=95=98=EC=88=98=EA=B4=80=EB=A1=9C=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=ED=8C=9D=EC=97=85=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/components/verticalTable.tsx | 128 ++++++++++++ apps/sn/app/map/featureClickEventPopup.tsx | 192 ++++++++++++++++++ .../business_components/src/ui/map/Gis.js | 11 +- 3 files changed, 330 insertions(+), 1 deletion(-) create mode 100644 apps/sn/app/components/verticalTable.tsx create mode 100644 apps/sn/app/map/featureClickEventPopup.tsx diff --git a/apps/sn/app/components/verticalTable.tsx b/apps/sn/app/components/verticalTable.tsx new file mode 100644 index 000000000..ee27224ac --- /dev/null +++ b/apps/sn/app/components/verticalTable.tsx @@ -0,0 +1,128 @@ +import UiPageNations from "@common/business_components/ui/table/uiPageNations"; +import { Table, TableBody, TableCell, TableRow } from "@common/components"; +import { useEffect, useState } from "react"; + +type UiTableProps = { + headName: React.ReactNode | undefined; + tableData: { [key: string]: string | number | boolean | object }[]; + headlist: UiHeadProps[]; + pageSize: number; + total: number; + children: React.ReactNode | undefined; + cellClick: ((index: number | undefined, headId: string) => void) | undefined; + onPageChange: (page: number) => void; + className?: string; + resetPageNo?: boolean; + isEditable?: boolean; +}; + +type UiHeadProps = { + id: string; + title: string; + align?: string; + type?: string; + options?: string[]; +}; + +export function VerticalTable({ + tableData, + headlist, + pageSize, + total, + children, + headName, + cellClick, + onPageChange, + className = "", + resetPageNo = false, + isEditable = false, +}: UiTableProps) { + const [cur, setCur] = useState(1); + const [formData, setFormData] = useState<{ [key: string]: string | number | boolean }>({}); + + useEffect(() => { + if (resetPageNo) { + setCur(1); + onPageChange(1); + } + }, [onPageChange, resetPageNo]); + + useEffect(() => { + if (tableData.length > 0 && tableData[0]) { + setFormData(tableData[0] as { [key: string]: string | number | boolean }); + } + }, [tableData]); + + const handleInputChange = (id: string, value: string | number | boolean) => { + setFormData((prev) => ({ + ...prev, + [id]: value, + })); + }; + + const handlePageChange = (page: number) => { + setCur(page); + onPageChange(page); + }; + + return ( + <> + {headName ? ( +
+

{headName}

+
+ ) : null} +
+ + + {headlist?.map((head) => ( + + {/* 컬럼 제목 */} + + {head.title} + + {/* 데이터 값 또는 입력 필드 */} + + {isEditable ? ( + head.type === "select" ? ( + + ) : head.type === "input" ? ( + handleInputChange(head.id, e.target.value)} + className="w-full text-xl border-radius-0 border border-gray-300 rounded-sm px-2 py-1" + /> + ) : ( + {formData[head.id] ?? "-"} + ) + ) : ( + {formData[head.id] ?? "-"} + )} + + + ))} + +
+ {total > 0 && ( + + )} +
+ + ); +} \ No newline at end of file diff --git a/apps/sn/app/map/featureClickEventPopup.tsx b/apps/sn/app/map/featureClickEventPopup.tsx new file mode 100644 index 000000000..f30d4cd78 --- /dev/null +++ b/apps/sn/app/map/featureClickEventPopup.tsx @@ -0,0 +1,192 @@ +'use client' +import { VerticalTable } from "@/components/verticalTable"; +import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components/ui"; +import { useState } from "react"; +const RxTableColumn = [ + { id: 'FTR_CDE', title: '지형지물부호' }, + { id: 'FTR_IDN', title: '관리번호' }, + { id: 'HJD_CDE', title: '행정읍면동코드' }, + { id: 'SHT_NUM', title: '도엽번호' }, + { id: 'MNG_CDE', title: '관리기관코드' }, + { id: 'IST_YMD', title: '설치일자' }, + { id: 'SBA_CDE', title: '하수관용도' }, + { id: 'MOP_CDE', title: '관재질' }, + { id: 'LIT_CDE', title: '규모' }, + { id: 'FOR_CDE', title: '시설물형태' }, + { id: 'STD_DIP', title: '관경' }, + { id: 'STD_HOL', title: '가로길이' }, + { id: 'STD_VEL', title: '세로길이' }, + { id: 'BYC_LEN', title: '연장' }, + { id: 'BEG_DEP', title: '시점깊이' }, + { id: 'END_DEP', title: '종점깊이' }, + { id: 'SBK_HSL', title: '시점관저고' }, + { id: 'SBL_HSL', title: '종점관저고' }, + { id: 'PIP_SLP', title: '평균구배' }, + { id: 'SPH_LIN', title: '차선통로수' }, + { id: 'BST_ARA', title: '우수배수면적' }, + { id: 'DRT_ARA', title: '오수배수면적' }, + { id: 'SBQ_SPD', title: '우천시유속' }, + { id: 'SBR_SPD', title: '청천시유속' }, + { id: 'CNT_NUM', title: '공사번호' }, + { id: 'BOM_CDE', title: '시점맨홀지형지물부호' }, + { id: 'BOM_IDN', title: '시점맨홀관리번호' }, + { id: 'EOM_CDE', title: '중점맨홀지형지물부호' }, + { id: 'EOM_IDN', title: '중점맨홀관리번호' }, + { id: 'SYS_CHK', title: '대장초기화여부' }, + { id: 'PIP_LBL', title: '관라벨' }, + { id: 'IQT_CDE', title: '탐사구분' }, + { id: 'ORG_IDN', title: '기관관리번호' }, + { id: 'SRV_CHK', title: '인입관 유무' } +]; +const tableData = [ + { + FTR_CDE: "001", + FTR_IDN: "관리번호001", + HJD_CDE: "행정코드001", + SHT_NUM: "도엽번호001", + MNG_CDE: "관리기관001", + IST_YMD: "2025-04-16", + SBA_CDE: "하수관용도001", + MOP_CDE: "관재질001", + LIT_CDE: "규모001", + FOR_CDE: "시설물형태001", + STD_DIP: "300mm", + STD_HOL: "500mm", + STD_VEL: "1.2m/s", + BYC_LEN: "100m", + BEG_DEP: "1.5m", + END_DEP: "2.0m", + SBK_HSL: "50m", + SBL_HSL: "48m", + PIP_SLP: "2%", + SPH_LIN: "2개", + BST_ARA: "200㎡", + DRT_ARA: "150㎡", + SBQ_SPD: "3.5m/s", + SBR_SPD: "2.0m/s", + CNT_NUM: "공사번호001", + BOM_CDE: "맨홀지형지물부호001", + BOM_IDN: "맨홀관리번호001", + EOM_CDE: "중점맨홀지형지물부호001", + EOM_IDN: "중점맨홀관리번호001", + SYS_CHK: "초기화여부001", + PIP_LBL: "관라벨001", + IQT_CDE: "탐사구분001", + ORG_IDN: "기관관리번호001", + SRV_CHK: "인입관 유무001", + }, +]; +const inputColumn = [ + { id: "title", title: "설치주제", type: "select", options: ["BTL", "재정사업"] }, + { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] }, + { id: "basu", title: "배수구역", type: "input" }, + { id: "bungu", title: "배수분구", type: "input" }, + { id: "wltjs", title: "지선/간선", type: "select", options: ["지선", "간선"] }, + { id: "flow", title: "흐름방식", type: "select", options: ["자연유하", "압송"] }, + { id: "place", title: "매설위치", type: "select", options: ["도로", "하상"] }, +]; + +const FeatureClickEventPopup = ({ onClose }: { onClose: () => void }) => { + // TODO: 런타임 에러 해결 필요 + const [repairData, setRepairData] = useState([ + { year: "2025", type: "개대체" }, + { year: "2025", type: "보수" }, + ]); + + const [cleaningData, setCleaningData] = useState([ + { year: "2025", type: "청소" }, + { year: "2025", type: "준설" }, + ]); + + const [inspectionData, setInspectionData] = useState([ + { year: "2025", type: "관로기술진단" }, + { year: "2025", type: "관로기술진단" }, + ]); + const handleInputChange = (section: string, index: number, field: string, value: string) => { + const updateData = (data: { year: string; type: string }[], setData: React.Dispatch>) => { + const updated = [...data]; + if (updated[index]) { + updated[index][field as keyof typeof updated[number]] = value; + } + setData(updated); + }; + + if (section === "repair") { + updateData(repairData, setRepairData); + } else if (section === "cleaning") { + updateData(cleaningData, setCleaningData); + } else if (section === "inspection") { + updateData(inspectionData, setInspectionData); + } + }; + + const renderSection = (title: string, data: { year: string; type: string }[], sectionKey: string) => ( +
+ {/* 섹션 제목 */} +
+

{title}

+
+ {/* 테이블 */} +
+ + + + 년도 + 구분 + + + + {data.map((row, index) => ( + + + handleInputChange(sectionKey, index, "year", e.target.value)} + className="w-full text-xl border-radius-0 px-3 py-2 text-base text-center leading-normal" + /> + + {row.type} + + ))} + +
+
+
+ ); + return ( + + ) +} +export default FeatureClickEventPopup; \ No newline at end of file diff --git a/packages/common/business_components/src/ui/map/Gis.js b/packages/common/business_components/src/ui/map/Gis.js index 2b5f9fc35..4361fda09 100644 --- a/packages/common/business_components/src/ui/map/Gis.js +++ b/packages/common/business_components/src/ui/map/Gis.js @@ -14,6 +14,7 @@ import GisLonLat from './GisLonLat'; import GisToolBar from './GisToolBar'; import GisTab from './GisTab'; import MapToggleBtn from './MapToggleBtn'; +import FeatureClickEventPopup from '@/map/featureClickEventPopup'; export const GisContext = createContext({gisCore: null, gisMap: null, treeData:null, checkedLayerIds:null}); export const useGisContext = () => useContext(GisContext); @@ -22,11 +23,14 @@ function Gis({ treeData = [], isSearch = false }) { const mapRef = useRef(); const [mapObject, setMapObject] = useState({}); const [tabVisible, setTabVisible] = useState(true); + const [isOpen, setIsOpen] = useState(true); // 팝업 열기/닫기 상태 const gisCore = useMemo(() => new GisApp.core({ targetId: mapRef.current }), []); //const [treeData, setTreeData] = useState([]); const checkedLayerIds = useRef([]); let gisMap = null; - + const closePopup = () => { + setIsOpen(false); // 팝업 닫기 + }; useEffect(() => { if (!mapRef.current) return; @@ -131,6 +135,11 @@ function Gis({ treeData = [], isSearch = false }) {
+ {isOpen && ( + + )}
From 525307d1ee392efef669de8f912620e6158d142b Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Wed, 30 Apr 2025 10:49:07 +0900 Subject: [PATCH 9/9] =?UTF-8?q?=ED=94=BC=EC=B3=90=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=EC=8B=9C=20=EB=AA=A8=EB=8B=AC=20=EC=98=A4=ED=94=88=20=ED=95=98?= =?UTF-8?q?=EA=B3=A0=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=82=98=EC=98=A4?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=9E=91=EC=97=85(=EB=B3=80=EA=B2=BD?= =?UTF-8?q?=ED=95=84=EC=9A=94)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/components/verticalTable.tsx | 4 +- apps/sn/app/map/featureClickEventPopup.tsx | 92 +++---------------- apps/sn/app/map/table.ts | 40 ++++++++ .../business_components/src/ui/map/Gis.js | 17 +++- .../src/ui/map/GisContent.js | 4 +- .../src/ui/map/GisSelect.js | 6 +- 6 files changed, 77 insertions(+), 86 deletions(-) create mode 100644 apps/sn/app/map/table.ts diff --git a/apps/sn/app/components/verticalTable.tsx b/apps/sn/app/components/verticalTable.tsx index ee27224ac..b792f3426 100644 --- a/apps/sn/app/components/verticalTable.tsx +++ b/apps/sn/app/components/verticalTable.tsx @@ -39,15 +39,15 @@ export function VerticalTable({ }: UiTableProps) { const [cur, setCur] = useState(1); const [formData, setFormData] = useState<{ [key: string]: string | number | boolean }>({}); - useEffect(() => { if (resetPageNo) { setCur(1); onPageChange(1); } }, [onPageChange, resetPageNo]); - + useEffect(() => { + console.log('data',tableData) if (tableData.length > 0 && tableData[0]) { setFormData(tableData[0] as { [key: string]: string | number | boolean }); } diff --git a/apps/sn/app/map/featureClickEventPopup.tsx b/apps/sn/app/map/featureClickEventPopup.tsx index f30d4cd78..545bc1697 100644 --- a/apps/sn/app/map/featureClickEventPopup.tsx +++ b/apps/sn/app/map/featureClickEventPopup.tsx @@ -2,80 +2,7 @@ import { VerticalTable } from "@/components/verticalTable"; import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components/ui"; import { useState } from "react"; -const RxTableColumn = [ - { id: 'FTR_CDE', title: '지형지물부호' }, - { id: 'FTR_IDN', title: '관리번호' }, - { id: 'HJD_CDE', title: '행정읍면동코드' }, - { id: 'SHT_NUM', title: '도엽번호' }, - { id: 'MNG_CDE', title: '관리기관코드' }, - { id: 'IST_YMD', title: '설치일자' }, - { id: 'SBA_CDE', title: '하수관용도' }, - { id: 'MOP_CDE', title: '관재질' }, - { id: 'LIT_CDE', title: '규모' }, - { id: 'FOR_CDE', title: '시설물형태' }, - { id: 'STD_DIP', title: '관경' }, - { id: 'STD_HOL', title: '가로길이' }, - { id: 'STD_VEL', title: '세로길이' }, - { id: 'BYC_LEN', title: '연장' }, - { id: 'BEG_DEP', title: '시점깊이' }, - { id: 'END_DEP', title: '종점깊이' }, - { id: 'SBK_HSL', title: '시점관저고' }, - { id: 'SBL_HSL', title: '종점관저고' }, - { id: 'PIP_SLP', title: '평균구배' }, - { id: 'SPH_LIN', title: '차선통로수' }, - { id: 'BST_ARA', title: '우수배수면적' }, - { id: 'DRT_ARA', title: '오수배수면적' }, - { id: 'SBQ_SPD', title: '우천시유속' }, - { id: 'SBR_SPD', title: '청천시유속' }, - { id: 'CNT_NUM', title: '공사번호' }, - { id: 'BOM_CDE', title: '시점맨홀지형지물부호' }, - { id: 'BOM_IDN', title: '시점맨홀관리번호' }, - { id: 'EOM_CDE', title: '중점맨홀지형지물부호' }, - { id: 'EOM_IDN', title: '중점맨홀관리번호' }, - { id: 'SYS_CHK', title: '대장초기화여부' }, - { id: 'PIP_LBL', title: '관라벨' }, - { id: 'IQT_CDE', title: '탐사구분' }, - { id: 'ORG_IDN', title: '기관관리번호' }, - { id: 'SRV_CHK', title: '인입관 유무' } -]; -const tableData = [ - { - FTR_CDE: "001", - FTR_IDN: "관리번호001", - HJD_CDE: "행정코드001", - SHT_NUM: "도엽번호001", - MNG_CDE: "관리기관001", - IST_YMD: "2025-04-16", - SBA_CDE: "하수관용도001", - MOP_CDE: "관재질001", - LIT_CDE: "규모001", - FOR_CDE: "시설물형태001", - STD_DIP: "300mm", - STD_HOL: "500mm", - STD_VEL: "1.2m/s", - BYC_LEN: "100m", - BEG_DEP: "1.5m", - END_DEP: "2.0m", - SBK_HSL: "50m", - SBL_HSL: "48m", - PIP_SLP: "2%", - SPH_LIN: "2개", - BST_ARA: "200㎡", - DRT_ARA: "150㎡", - SBQ_SPD: "3.5m/s", - SBR_SPD: "2.0m/s", - CNT_NUM: "공사번호001", - BOM_CDE: "맨홀지형지물부호001", - BOM_IDN: "맨홀관리번호001", - EOM_CDE: "중점맨홀지형지물부호001", - EOM_IDN: "중점맨홀관리번호001", - SYS_CHK: "초기화여부001", - PIP_LBL: "관라벨001", - IQT_CDE: "탐사구분001", - ORG_IDN: "기관관리번호001", - SRV_CHK: "인입관 유무001", - }, -]; +import { CommonTableColumn } from "./table"; const inputColumn = [ { id: "title", title: "설치주제", type: "select", options: ["BTL", "재정사업"] }, { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] }, @@ -86,7 +13,7 @@ const inputColumn = [ { id: "place", title: "매설위치", type: "select", options: ["도로", "하상"] }, ]; -const FeatureClickEventPopup = ({ onClose }: { onClose: () => void }) => { +const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData:any }) => { // TODO: 런타임 에러 해결 필요 const [repairData, setRepairData] = useState([ { year: "2025", type: "개대체" }, @@ -119,7 +46,18 @@ const FeatureClickEventPopup = ({ onClose }: { onClose: () => void }) => { updateData(inspectionData, setInspectionData); } }; - + function transformFeatureDataToArray(featureData: any, keys: string[]) { + // 필요한 키만 추출하여 새로운 객체 생성 + const transformedData = keys.reduce((acc, key) => { + acc[key] = featureData[key] !== undefined ? featureData[key] : "N/A"; // 값이 없으면 "N/A"로 처리 + return acc; + }, {} as Record); + + // 배열로 감싸서 반환 + return [transformedData]; + } + const keys = CommonTableColumn.map((column) => column.id); + const transformedFeatureData = transformFeatureDataToArray(featureData, keys); const renderSection = (title: string, data: { year: string; type: string }[], sectionKey: string) => (
{/* 섹션 제목 */} @@ -170,7 +108,7 @@ const FeatureClickEventPopup = ({ onClose }: { onClose: () => void }) => {
- new GisApp.core({ targetId: mapRef.current }), []); //const [treeData, setTreeData] = useState([]); const checkedLayerIds = useRef([]); let gisMap = null; const closePopup = () => { setIsOpen(false); // 팝업 닫기 + setFeatureData(null) }; + const handleFeatureSelect = (data) => { + console.log('check',data) + setFeatureData(data); // 선택된 피처 데이터 저장 + setIsOpen(true); // 팝업 열기 + }; + useEffect(() => { if (!mapRef.current) return; @@ -101,7 +109,7 @@ function Gis({ treeData = [], isSearch = false }) { //setTreeData(data); const layerItems = getLayerItems(layerCode); - //setEditLayerItems(prev => [...layerItems]); + //setEditLayerItems(prev => [...layerItems]) }, [treeData]); const getLayerItems= (layerCode) => { @@ -135,8 +143,10 @@ function Gis({ treeData = [], isSearch = false }) {
- {isOpen && ( + + {isOpen && featureData && ( )} @@ -144,7 +154,6 @@ function Gis({ treeData = [], isSearch = false }) { -
diff --git a/packages/common/business_components/src/ui/map/GisContent.js b/packages/common/business_components/src/ui/map/GisContent.js index e58efcaad..686a3ae70 100644 --- a/packages/common/business_components/src/ui/map/GisContent.js +++ b/packages/common/business_components/src/ui/map/GisContent.js @@ -8,7 +8,7 @@ import './lib/css/gis.edit.css'; import MapToggleBtn from './MapToggleBtn'; import GisEdit from './GisEdit'; -export default function GisContent({ edit = false }) { +export default function GisContent({ edit = false,onFeatureSelect }) { const { gisMap, gisCore } = useGisContext(); const [visibleComponents, setVisibleComponents] = useState({}); const addressResultLayer = useRef(null); @@ -54,7 +54,7 @@ export default function GisContent({ edit = false }) { {/* */} {/* { */} {/* */} - + {/* {edit && } */} ); diff --git a/packages/common/business_components/src/ui/map/GisSelect.js b/packages/common/business_components/src/ui/map/GisSelect.js index ae4e15966..3b430fa02 100644 --- a/packages/common/business_components/src/ui/map/GisSelect.js +++ b/packages/common/business_components/src/ui/map/GisSelect.js @@ -3,7 +3,7 @@ import GisApp from './lib/gis.core'; import GisOlSelect from './lib/gis.select'; import { useContext } from 'react'; import { GisContext } from './Gis'; -export default React.memo(function GisSelect() { +export default React.memo(function GisSelect({ onFeatureSelect }) { const { gisMap } = useContext(GisContext); const select = new GisOlSelect(gisMap); GisApp.Module.select = select; @@ -13,6 +13,10 @@ export default React.memo(function GisSelect() { select.getSelectedInfo(function (features) { //clickFeature(features[0]); + if(features.length > 0) { + const layer = features[0]; + onFeatureSelect(layer.getProperties()); //피쳐 속성데이터 상위컴포넌트로 전달 + } }); return ( <>