From fa9f97122680712c7b1fdbbca541cec1fefe3d8d Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Fri, 28 Mar 2025 11:34:08 +0900 Subject: [PATCH 01/54] =?UTF-8?q?dialog=20=EC=83=81=EB=8B=A8=20=EC=A0=9C?= =?UTF-8?q?=EB=AA=A9=20=EC=97=86=EC=9C=BC=EB=A9=B4=20=EC=A0=9C=EB=AA=A9?= =?UTF-8?q?=EC=97=86=EC=9D=B4=20=EB=AA=A8=EB=8B=AC=20=EC=B6=9C=EB=A0=A5?= =?UTF-8?q?=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_components/src/ui/dialog_ui/index.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/common/business_components/src/ui/dialog_ui/index.tsx b/packages/common/business_components/src/ui/dialog_ui/index.tsx index 27c67458d..7609e2908 100644 --- a/packages/common/business_components/src/ui/dialog_ui/index.tsx +++ b/packages/common/business_components/src/ui/dialog_ui/index.tsx @@ -1,17 +1,17 @@ -import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@common/components"; +import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTrigger } from "@common/components"; type ModalType = { bodyClass: string; butNm: string; - title: string; + title: string | undefined; body: React.ReactNode; open?: boolean; onOpenChange?: (open: boolean) => void; } export function UiModal({ bodyClass, butNm, title, body, open, onOpenChange }: ModalType) { - const dialogProps = open !== undefined && onOpenChange !== undefined - ? { open, onOpenChange } + const dialogProps = open !== undefined && onOpenChange !== undefined && title !== undefined + ? { open, onOpenChange, title } : {}; return ( @@ -23,7 +23,6 @@ export function UiModal({ bodyClass, butNm, title, body, open, onOpenChange }: M - {title} @@ -37,7 +36,6 @@ export function UiModal({ bodyClass, butNm, title, body, open, onOpenChange }: M - {title} From 554ad2c5a893fde561e65e91003d1d2efa71f99c Mon Sep 17 00:00:00 2001 From: leedj312 Date: Fri, 28 Mar 2025 18:02:13 +0900 Subject: [PATCH 02/54] =?UTF-8?q?searInput=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=EC=9D=BC=EB=8B=A8=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EB=B8=94=20=ED=97=A4=EB=8D=94=20=3F=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/search_input/index.tsx | 19 ++++++++++++++++--- .../src/ui/table/index.tsx | 2 +- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/common/business_components/src/ui/search_input/index.tsx b/packages/common/business_components/src/ui/search_input/index.tsx index 0da6cffdc..bd634aa21 100644 --- a/packages/common/business_components/src/ui/search_input/index.tsx +++ b/packages/common/business_components/src/ui/search_input/index.tsx @@ -3,13 +3,26 @@ import React from "react"; const SearchInput = React.forwardRefvoid}>(({className, label, textValue, setText}, ref) => { const changeText=(e:React.ChangeEvent)=>{ - if(e?.target?.value) setText(e.target.value) - } + + if(e?.target?.value){ + + setText(e.target.value) + } + + + + } + + const keyUp=(e:any)=>{ + if(e.keyCode===8 && e.target.value.length==1){ + setText('') + } + } return (
{label && } - +
) }); diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index b8c2706bc..9635a7e21 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -36,7 +36,7 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa {tableData?.map((el: { [key: string]: string | number | boolean }, index) => ( - {headlist.map((head) => ( + {headlist?.map((head) => ( cellClick && cellClick(index)} key={head.id + index}>{el[head.id]} ))} From 5afc8da9a8022ccdaf34261dff99842d3bdf333b Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Tue, 1 Apr 2025 11:23:46 +0900 Subject: [PATCH 03/54] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=EA=B0=80=20?= =?UTF-8?q?=EB=A7=8E=EC=95=84=EB=8F=84=2010=EA=B0=9C=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EB=84=98=EB=B2=84=EB=A1=9C=20=EB=8B=A4=EC=9D=8C,?= =?UTF-8?q?=EC=9D=B4=EC=A0=84=EC=9C=BC=EB=A1=9C=20=EB=84=98=EC=96=B4?= =?UTF-8?q?=EA=B0=80=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/table/index.tsx | 112 +++++++++++------- 1 file changed, 70 insertions(+), 42 deletions(-) diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index 9635a7e21..99199d163 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -1,50 +1,78 @@ -import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components"; -import UiPageNations from "./uiPageNations"; +'use client'; -type UiTableProps = { - headName: React.ReactNode | undefined; - tableData: { [key: string]: string | number | boolean }[]; - headlist: UiHeadProps[]; - pageSize: number; +import { useEffect, useState } from "react"; +import { + Pagination, + PaginationContent, + PaginationItem, + PaginationPrevious, + PaginationLink, + PaginationNext +} from "./lib/pagination"; + +interface CommonPageNationsProps { total: number; - children: React.ReactNode | undefined; - cellClick : ((index:number|undefined)=>void) | undefined; + cur: number; + pageSize: number; } -type UiHeadProps = { - id: string; - title: string; -} +export default function UiPageNations(commonPageNationsProps: CommonPageNationsProps) { + const [pageProps, setPageProps] = useState(commonPageNationsProps); -export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick }: UiTableProps) { - const cur = 1; + useEffect(() => { + setPageProps(commonPageNationsProps); + }, [commonPageNationsProps]); + + const totalPages = Math.ceil(pageProps.total / pageProps.pageSize); + const pagesPerGroup = 10; + const currentGroup = Math.floor((pageProps.cur - 1) / pagesPerGroup); + const startPage = currentGroup * pagesPerGroup + 1; + const endPage = Math.min(startPage + pagesPerGroup - 1, totalPages); + + const handlePageChange = (page: number) => { + setPageProps({ ...pageProps, cur: page }); + }; return ( - <> - {headName ?
-

{headName}

-
: <>} -
- - - {children ? <>{children} : - {headlist?.map((head) => ( - {head.title} - ))} - } - - - {tableData?.map((el: { [key: string]: string | number | boolean }, index) => ( - - {headlist?.map((head) => ( - cellClick && cellClick(index)} key={head.id + index}>{el[head.id]} - ))} - - ))} - -
- {total <= 0 ? <> : } -
- + + + + {/* 이전 그룹으로 이동 */} + + { + if (startPage > 1) handlePageChange(startPage - 1); + }} + /> + + + {/* 현재 그룹 페이지들 표시 */} + { + Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i).map((pageNum) => ( + + handlePageChange(pageNum)} + > + {pageNum} + + + )) + } + + {/* 다음 그룹으로 이동 */} + + { + if (endPage < totalPages) handlePageChange(endPage + 1); + }} + /> + + + + ); -} +} \ No newline at end of file From f88e582b5e36b6a15871ca5b5ad48926e5d9fa22 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Tue, 1 Apr 2025 11:37:00 +0900 Subject: [PATCH 04/54] =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=20=EC=9E=98?= =?UTF-8?q?=EB=AA=BB=20commit=EC=9B=90=EB=B3=B5,=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EB=84=A4=EC=9D=B4=EC=85=98=20=EC=9E=AC=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/table/index.tsx | 112 +++++++----------- .../src/ui/table/uiPageNations.tsx | 96 ++++++++++----- 2 files changed, 106 insertions(+), 102 deletions(-) diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index 99199d163..9635a7e21 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -1,78 +1,50 @@ -'use client'; +import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components"; +import UiPageNations from "./uiPageNations"; -import { useEffect, useState } from "react"; -import { - Pagination, - PaginationContent, - PaginationItem, - PaginationPrevious, - PaginationLink, - PaginationNext -} from "./lib/pagination"; - -interface CommonPageNationsProps { - total: number; - cur: number; +type UiTableProps = { + headName: React.ReactNode | undefined; + tableData: { [key: string]: string | number | boolean }[]; + headlist: UiHeadProps[]; pageSize: number; + total: number; + children: React.ReactNode | undefined; + cellClick : ((index:number|undefined)=>void) | undefined; } -export default function UiPageNations(commonPageNationsProps: CommonPageNationsProps) { - const [pageProps, setPageProps] = useState(commonPageNationsProps); +type UiHeadProps = { + id: string; + title: string; +} - useEffect(() => { - setPageProps(commonPageNationsProps); - }, [commonPageNationsProps]); - - const totalPages = Math.ceil(pageProps.total / pageProps.pageSize); - const pagesPerGroup = 10; - const currentGroup = Math.floor((pageProps.cur - 1) / pagesPerGroup); - const startPage = currentGroup * pagesPerGroup + 1; - const endPage = Math.min(startPage + pagesPerGroup - 1, totalPages); - - const handlePageChange = (page: number) => { - setPageProps({ ...pageProps, cur: page }); - }; +export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick }: UiTableProps) { + const cur = 1; return ( - - - - {/* 이전 그룹으로 이동 */} - - { - if (startPage > 1) handlePageChange(startPage - 1); - }} - /> - - - {/* 현재 그룹 페이지들 표시 */} - { - Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i).map((pageNum) => ( - - handlePageChange(pageNum)} - > - {pageNum} - - - )) - } - - {/* 다음 그룹으로 이동 */} - - { - if (endPage < totalPages) handlePageChange(endPage + 1); - }} - /> - - - - + <> + {headName ?
+

{headName}

+
: <>} +
+ + + {children ? <>{children} : + {headlist?.map((head) => ( + {head.title} + ))} + } + + + {tableData?.map((el: { [key: string]: string | number | boolean }, index) => ( + + {headlist?.map((head) => ( + cellClick && cellClick(index)} key={head.id + index}>{el[head.id]} + ))} + + ))} + +
+ {total <= 0 ? <> : } +
+ ); -} \ No newline at end of file +} diff --git a/packages/common/business_components/src/ui/table/uiPageNations.tsx b/packages/common/business_components/src/ui/table/uiPageNations.tsx index a7b788d71..99199d163 100644 --- a/packages/common/business_components/src/ui/table/uiPageNations.tsx +++ b/packages/common/business_components/src/ui/table/uiPageNations.tsx @@ -1,46 +1,78 @@ -'use client' - +'use client'; import { useEffect, useState } from "react"; -import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationLink, PaginationNext } from "./lib/pagination"; - +import { + Pagination, + PaginationContent, + PaginationItem, + PaginationPrevious, + PaginationLink, + PaginationNext +} from "./lib/pagination"; interface CommonPageNationsProps { - total: number; - cur: number; - pageSize: number; + total: number; + cur: number; + pageSize: number; } export default function UiPageNations(commonPageNationsProps: CommonPageNationsProps) { - - const [pageProps, setPageProps] = useState(commonPageNationsProps); + const [pageProps, setPageProps] = useState(commonPageNationsProps); + useEffect(() => { + setPageProps(commonPageNationsProps); + }, [commonPageNationsProps]); - useEffect(() => { - setPageProps(commonPageNationsProps); - } ,[commonPageNationsProps]); + const totalPages = Math.ceil(pageProps.total / pageProps.pageSize); + const pagesPerGroup = 10; + const currentGroup = Math.floor((pageProps.cur - 1) / pagesPerGroup); + const startPage = currentGroup * pagesPerGroup + 1; + const endPage = Math.min(startPage + pagesPerGroup - 1, totalPages); + const handlePageChange = (page: number) => { + setPageProps({ ...pageProps, cur: page }); + }; - return( - - - - - + return ( + + + + {/* 이전 그룹으로 이동 */} + + { + if (startPage > 1) handlePageChange(startPage - 1); + }} + /> + + + {/* 현재 그룹 페이지들 표시 */} { - Array.from({length:Math.ceil(commonPageNationsProps.total/commonPageNationsProps.pageSize)},(_,i)=>i+1).map((el,index)=>( - - {el} - - )) - } - - + Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i).map((pageNum) => ( + + handlePageChange(pageNum)} + > + {pageNum} + - - - - - - ); + )) + } + + {/* 다음 그룹으로 이동 */} + + { + if (endPage < totalPages) handlePageChange(endPage + 1); + }} + /> + + + + + ); } \ No newline at end of file From 05b3b0675f59e3e2fe19d4c740561bbc48c739fd Mon Sep 17 00:00:00 2001 From: truthwing Date: Tue, 1 Apr 2025 13:12:17 +0900 Subject: [PATCH 05/54] =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=EC=97=90=20ob?= =?UTF-8?q?ject=20=ED=83=80=EC=9E=85=EB=8F=84=20=EB=B0=9B=EC=9D=84=20?= =?UTF-8?q?=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/common/business_components/src/ui/table/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index 9635a7e21..d536a1f2f 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -3,7 +3,7 @@ import UiPageNations from "./uiPageNations"; type UiTableProps = { headName: React.ReactNode | undefined; - tableData: { [key: string]: string | number | boolean }[]; + tableData: { [key: string]: string | number | boolean | object}[]; headlist: UiHeadProps[]; pageSize: number; total: number; @@ -34,7 +34,7 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa } - {tableData?.map((el: { [key: string]: string | number | boolean }, index) => ( + {tableData?.map((el: { [key: string]: string | number | boolean | object}, index) => ( {headlist?.map((head) => ( cellClick && cellClick(index)} key={head.id + index}>{el[head.id]} From 2323c67131d5449e9abd0be78dcfc16bf2d65025 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Tue, 1 Apr 2025 14:20:05 +0900 Subject: [PATCH 06/54] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=88=98=EC=A0=95=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_components/src/ui/table/index.tsx | 13 +++++++++---- .../src/ui/table/uiPageNations.tsx | 17 ++++++++--------- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index 9635a7e21..5413fbf78 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -1,4 +1,5 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components"; +import { useState } from "react"; import UiPageNations from "./uiPageNations"; type UiTableProps = { @@ -9,6 +10,7 @@ type UiTableProps = { total: number; children: React.ReactNode | undefined; cellClick : ((index:number|undefined)=>void) | undefined; + onPageChange: (page: number) => void; } type UiHeadProps = { @@ -16,9 +18,12 @@ type UiHeadProps = { title: string; } -export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick }: UiTableProps) { - const cur = 1; - +export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick, onPageChange }: UiTableProps) { + const [cur, setCur] = useState(1); + const handlePageChange = (page: number) => { + setCur(page); + onPageChange(page); + } return ( <> {headName ?
@@ -43,7 +48,7 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa ))} - {total <= 0 ? <> : } + {total <= 0 ? <> : }
); diff --git a/packages/common/business_components/src/ui/table/uiPageNations.tsx b/packages/common/business_components/src/ui/table/uiPageNations.tsx index 99199d163..891fc4c81 100644 --- a/packages/common/business_components/src/ui/table/uiPageNations.tsx +++ b/packages/common/business_components/src/ui/table/uiPageNations.tsx @@ -1,19 +1,18 @@ 'use client'; import { useEffect, useState } from "react"; -import { - Pagination, - PaginationContent, - PaginationItem, - PaginationPrevious, - PaginationLink, - PaginationNext -} from "./lib/pagination"; +import { PaginationNext } from "./lib/pagination"; +import { PaginationLink } from "./lib/pagination"; +import { PaginationPrevious } from "./lib/pagination"; +import { PaginationItem } from "./lib/pagination"; +import { PaginationContent } from "./lib/pagination"; +import { Pagination } from "./lib/pagination"; interface CommonPageNationsProps { total: number; cur: number; pageSize: number; + onPageChange: (page: number) => void; } export default function UiPageNations(commonPageNationsProps: CommonPageNationsProps) { @@ -30,7 +29,7 @@ export default function UiPageNations(commonPageNationsProps: CommonPageNationsP const endPage = Math.min(startPage + pagesPerGroup - 1, totalPages); const handlePageChange = (page: number) => { - setPageProps({ ...pageProps, cur: page }); + pageProps.onPageChange(page); }; return ( From 8fd441bcbfadf5c0b54248e4e320863401960536 Mon Sep 17 00:00:00 2001 From: truthwing Date: Wed, 2 Apr 2025 17:45:38 +0900 Subject: [PATCH 07/54] =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=20=ED=81=AC?= =?UTF-8?q?=EA=B8=B0=20=EC=A0=84=EC=B2=B4=EB=A1=9C=20=EC=9E=A1=EA=B2=8C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20=EC=99=84=EB=A3=8C.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/common/business_components/src/ui/list_div/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/common/business_components/src/ui/list_div/index.tsx b/packages/common/business_components/src/ui/list_div/index.tsx index a096a4c04..2c437e1af 100644 --- a/packages/common/business_components/src/ui/list_div/index.tsx +++ b/packages/common/business_components/src/ui/list_div/index.tsx @@ -2,7 +2,7 @@ function ListDiv(props: {children: React.ReactNode}) { return ( -
+
{props.children}
) From f66bbed334a48c9c5fa4bda633cb5e9c3865c86a Mon Sep 17 00:00:00 2001 From: leedj312 Date: Wed, 2 Apr 2025 18:18:28 +0900 Subject: [PATCH 08/54] =?UTF-8?q?date=20picker=20ko=20/=20=20=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EB=B8=94=20classname=20=20hight=20=EB=B6=80=EB=B6=84?= =?UTF-8?q?=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/business_components/src/ui/date_picker/index.tsx | 2 ++ packages/common/business_components/src/ui/table/index.tsx | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/common/business_components/src/ui/date_picker/index.tsx b/packages/common/business_components/src/ui/date_picker/index.tsx index 16aa2c075..a7694789b 100644 --- a/packages/common/business_components/src/ui/date_picker/index.tsx +++ b/packages/common/business_components/src/ui/date_picker/index.tsx @@ -9,6 +9,7 @@ import type { DayPickerSingleProps } from "react-day-picker"; import { Button, Calendar, Popover, PopoverContent, PopoverTrigger } from "@common/components/ui"; import { cn } from "../../lib/utils"; import { FormControl } from "../form"; +import { ko } from "date-fns/locale"; type DatePickerProps = DayPickerSingleProps & { field: { value: Date; onChange: (date: Date | undefined) => void } ,selectClass:string|undefined }; @@ -41,6 +42,7 @@ export function DatePicker({ field, selectClass }: DatePickerProps) { selected={field?.value} onSelect={field?.onChange} initialFocus + locale={ko} /> diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index 9635a7e21..10a1a5ef2 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -24,7 +24,7 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa {headName ?

{headName}

: <>} -
+
{children ? <>{children} : From 6e10389b33db5ef634274a36d0e106c149db0d59 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Thu, 3 Apr 2025 17:52:10 +0900 Subject: [PATCH 09/54] =?UTF-8?q?=EB=8B=A4=EC=8B=9C=20commit?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/common/business_components/src/ui/table/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index 70240f125..8ac91c7ec 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -24,6 +24,8 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa setCur(page); onPageChange(page); } + const style = cellClick ? 'cursor-pointer' : ''; + return ( <> {headName ?
@@ -42,7 +44,7 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa {tableData?.map((el: { [key: string]: string | number | boolean | object}, index) => ( {headlist?.map((head) => ( - cellClick && cellClick(index)} key={head.id + index}>{el[head.id]} + cellClick && cellClick(index)} key={head.id + index}>{el[head.id]} ))} ))} From 6e390199b3518f0b88641c01b0b5dc91ac8e32bc Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Thu, 3 Apr 2025 18:22:36 +0900 Subject: [PATCH 10/54] =?UTF-8?q?max=20=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/common/business_components/src/ui/table/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index 8ac91c7ec..c04b26a6f 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -31,7 +31,7 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa {headName ?

{headName}

: <>} -
+
{children ? <>{children} : From 7c1cc6df65822576ae95cd3fd5839da8ba7a59ee Mon Sep 17 00:00:00 2001 From: leedj312 Date: Thu, 3 Apr 2025 18:26:39 +0900 Subject: [PATCH 11/54] =?UTF-8?q?datepicker=20=ED=95=9C=EA=B8=80=20?= =?UTF-8?q?=EB=B0=8F=20=EC=84=A0=ED=83=9D=ED=9B=84=20=ED=8C=9D=EC=98=A4?= =?UTF-8?q?=EB=B2=84=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/date_picker/index.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/common/business_components/src/ui/date_picker/index.tsx b/packages/common/business_components/src/ui/date_picker/index.tsx index a7694789b..8fcd9b52e 100644 --- a/packages/common/business_components/src/ui/date_picker/index.tsx +++ b/packages/common/business_components/src/ui/date_picker/index.tsx @@ -10,12 +10,23 @@ import { Button, Calendar, Popover, PopoverContent, PopoverTrigger } from "@comm import { cn } from "../../lib/utils"; import { FormControl } from "../form"; import { ko } from "date-fns/locale"; +import { useState } from "react"; type DatePickerProps = DayPickerSingleProps & { field: { value: Date; onChange: (date: Date | undefined) => void } ,selectClass:string|undefined }; + export function DatePicker({ field, selectClass }: DatePickerProps) { + + + const [open, setOpen] = useState(false); + + const handleSelect = (date: Date | undefined) => { + field.onChange(date); // React Hook Form 업데이트 + setOpen(false); + }; + return ( - +
{children ? <>{children} : From 55370f21d2bb8cbbec1ddf49032a08dd8fd4f3c1 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Mon, 7 Apr 2025 15:08:47 +0900 Subject: [PATCH 15/54] =?UTF-8?q?=EC=9B=90=EB=B3=B5...?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/common/business_components/src/ui/table/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index 6fd5f9c36..d5c69e8ae 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -19,7 +19,7 @@ type UiHeadProps = { title: string; } -export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick, onPageChange, className }: UiTableProps) { +export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick, onPageChange }: UiTableProps) { const [cur, setCur] = useState(1); const handlePageChange = (page: number) => { setCur(page); @@ -32,7 +32,7 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa {headName ?

{headName}

: <>} -
+
{children ? <>{children} : From 02a3a47ad0a5ecd2acc02506205e0a8696d314f7 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Mon, 7 Apr 2025 15:12:58 +0900 Subject: [PATCH 16/54] =?UTF-8?q?=EC=9B=90=EB=B3=B52?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/common/business_components/src/ui/table/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index d5c69e8ae..08941bc5f 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -11,7 +11,6 @@ type UiTableProps = { children: React.ReactNode | undefined; cellClick : ((index:number|undefined)=>void) | undefined; onPageChange: (page: number) => void; - className : string | undefined; } type UiHeadProps = { From 18d7698c03c2c029ec81de13fc87177bf61a0da2 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Mon, 7 Apr 2025 15:32:20 +0900 Subject: [PATCH 17/54] =?UTF-8?q?=ED=91=9C=20className=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20(=ED=98=B8=EC=B6=9C=EC=8B=9C=20=EC=86=8D=EC=84=B1?= =?UTF-8?q?=EC=97=86=EC=96=B4=EB=8F=84=20=EC=98=A4=EB=A5=98=20x)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/common/business_components/src/ui/table/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index 08941bc5f..a5191eca6 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -11,6 +11,7 @@ type UiTableProps = { children: React.ReactNode | undefined; cellClick : ((index:number|undefined)=>void) | undefined; onPageChange: (page: number) => void; + className?: string; } type UiHeadProps = { @@ -18,7 +19,7 @@ type UiHeadProps = { title: string; } -export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick, onPageChange }: UiTableProps) { +export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick, onPageChange, className = '' }: UiTableProps) { const [cur, setCur] = useState(1); const handlePageChange = (page: number) => { setCur(page); @@ -31,7 +32,7 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa {headName ?

{headName}

: <>} -
+
{children ? <>{children} : From 0a5ea769716d3c85f917de8deca45cc3dc472f35 Mon Sep 17 00:00:00 2001 From: truthwing Date: Mon, 7 Apr 2025 17:18:10 +0900 Subject: [PATCH 18/54] =?UTF-8?q?css=20=EC=A0=81=EC=9A=A9=EB=90=98?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95.=20table=EC=97=90=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=EC=8B=9C=20opacity=20=EC=A0=81=EC=9A=A9.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/business_components/package.json | 2 +- .../common/business_components/src/base.css | 61 +- .../business_components/src/diveicon.css | 1799 ----------------- .../common/business_components/src/index.css | 11 - .../src/ui/table/index.tsx | 26 +- .../business_components/tailwind.config.js | 93 +- 6 files changed, 26 insertions(+), 1966 deletions(-) delete mode 100644 packages/common/business_components/src/diveicon.css delete mode 100644 packages/common/business_components/src/index.css diff --git a/packages/common/business_components/package.json b/packages/common/business_components/package.json index ce78d2a6b..5120980c2 100644 --- a/packages/common/business_components/package.json +++ b/packages/common/business_components/package.json @@ -63,7 +63,7 @@ "eslint-plugin-react-refresh": "^0.4.16", "eslint-plugin-storybook": "^0.11.2", "globals": "^15.14.0", - "postcss": "^8.5.1", + "postcss": "^8.5.3", "prettier": "^3.4.2", "prettier-plugin-tailwindcss": "^0.6.11", "storybook": "^8.5.3", diff --git a/packages/common/business_components/src/base.css b/packages/common/business_components/src/base.css index daaa92719..ab1424be8 100644 --- a/packages/common/business_components/src/base.css +++ b/packages/common/business_components/src/base.css @@ -1,69 +1,10 @@ @import "@common/assets/styles/base.css"; @import "@common/assets/styles/diveicon.css"; -@import "@common/assets/styles/components.css"; @tailwind base; @tailwind components; @tailwind utilities; -@layer base { - :root { - --background: #ffffff; - --foreground: #0a0a0a; - --card: #ffffff; - --card-foreground: #0a0a0a; - --popover: #ffffff; - --popover-foreground: #0a0a0a; - --primary: #2094fa; - --primary-foreground: #fafafa; - --secondary: #f5f5f5; - --secondary-foreground: #0f1e33; - --muted: #f5f5f5; - --muted-foreground: #737373; - --accent: #f5f5f5; - --accent-foreground: #0f1e33; - --destructive: #ff4141; - --destructive-foreground: #fafafa; - --border: #e5e5e5; - --input: #e5e5e5; - --label: #666666; - --ring: #0a0a0a; - --chart-1: #d95b43; - --chart-2: #299392; - --chart-3: #263e4d; - --chart-4: #dfb938; - --chart-5: #f08634; - --radius: 1rem; - } - [data-mode="dark"] { - --background: #0a0a0a; - --foreground: #fafafa; - --card: #0a0a0a; - --card-foreground: #fafafa; - --popover: #0a0a0a; - --popover-foreground: #fafafa; - --primary: #2094fa; - --primary-foreground: #171717; - --secondary: #262626; - --secondary-foreground: #fafafa; - --muted: #262626; - --muted-foreground: #a2a2a2; - --accent: #262626; - --accent-foreground: #fafafa; - --destructive: #b22222; - --destructive-foreground: #fafafa; - --border: #262626; - --input: #262626; - --label: #f1f1f1; - --ring: #d4d4d4; - --chart-1: #3399ff; - --chart-2: #339966; - --chart-3: #ff9933; - --chart-4: #cc66ff; - --chart-5: #ff3399; - } -} - @layer base { * { @apply border-border; @@ -74,4 +15,4 @@ body { @apply bg-background text-foreground; } -} \ No newline at end of file +} diff --git a/packages/common/business_components/src/diveicon.css b/packages/common/business_components/src/diveicon.css deleted file mode 100644 index cce8cdaef..000000000 --- a/packages/common/business_components/src/diveicon.css +++ /dev/null @@ -1,1799 +0,0 @@ -@font-face { - font-family: "diveicon"; - src: url("../public/assets/fonts/diveicon.eot?stp8eo"); - src: - url("../public/assets/fonts/diveicon.eot?stp8eo#iefix") - format("embedded-opentype"), - url("../public/assets/fonts/diveicon.ttf?stp8eo") format("truetype"), - url("../public/assets/fonts/diveicon.woff?stp8eo") format("woff"), - url("../public/assets/fonts/diveicon.svg?stp8eo#diveicon") format("svg"); - font-weight: normal; - font-style: normal; - font-display: block; -} - -i.diveicon { - /* use !important to prevent issues with browser extensions that change fonts */ - font-family: "diveicon" !important; - speak: never; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.di-account-box:before { - content: "\e8f3"; -} -.di-account-circle:before { - content: "\e901"; -} -.di-add-image:before { - content: "\e902"; -} -.di-add-Note:before { - content: "\e903"; -} -.di-alarm-add:before { - content: "\e904"; -} -.di-alarm-clock:before { - content: "\e905"; -} -.di-alarm-off:before { - content: "\e906"; -} -.di-alarm-on:before { - content: "\e908"; -} -.di-alarm:before { - content: "\e909"; -} -.di-alternate:before { - content: "\e90a"; -} -.di-analytics:before { - content: "\e90b"; -} -.di-android:before { - content: "\e90c"; -} -.di-announcement:before { - content: "\e90d"; -} -.di-app-indicator:before { - content: "\e90e"; -} -.di-app-list:before { - content: "\e90f"; -} -.di-app-square:before { - content: "\e910"; -} -.di-apple:before { - content: "\e911"; -} -.di-apps-square:before { - content: "\e912"; -} -.di-apps:before { - content: "\e913"; -} -.di-archive-fill:before { - content: "\e914"; -} -.di-archive:before { - content: "\e915"; -} -.di-arrow-90left-down:before { - content: "\e916"; -} -.di-arrow-90left-up:before { - content: "\e917"; -} -.di-arrow-90left:before { - content: "\e918"; -} -.di-arrow-90right-down:before { - content: "\e919"; -} -.di-arrow-90right-up:before { - content: "\e91a"; -} -.di-arrow-90right:before { - content: "\e91b"; -} -.di-arrow-back-square-fill:before { - content: "\e91c"; -} -.di-arrow-back:before { - content: "\e91d"; -} -.di-arrow-down-square-fill:before { - content: "\e91e"; -} -.di-arrow-down-square:before { - content: "\e91f"; -} -.di-arrow-down:before { - content: "\e920"; -} -.di-arrow-forward-square-fill:before { - content: "\e921"; -} -.di-arrow-forward:before { - content: "\e922"; -} -.di-arrow-left-right:before { - content: "\e923"; -} -.di-arrow-left-square-fill:before { - content: "\e924"; -} -.di-arrow-left-square:before { - content: "\e925"; -} -.di-arrow-left:before { - content: "\e926"; -} -.di-arrow-lr-up-down:before { - content: "\e927"; -} -.di-arrow-reflash:before { - content: "\e928"; -} -.di-arrow-reset:before { - content: "\e929"; -} -.di-arrow-right-square-fill:before { - content: "\e92a"; -} -.di-arrow-right-square:before { - content: "\e92b"; -} -.di-arrow-right:before { - content: "\e92c"; -} -.di-arrow-up-down:before { - content: "\e92d"; -} -.di-arrow-up-square-fill:before { - content: "\e92e"; -} -.di-arrow-up-square:before { - content: "\e92f"; -} -.di-arrow-up:before { - content: "\e930"; -} -.di-arrows-angle-contract:before { - content: "\e931"; -} -.di-arrows-angle-expand:before { - content: "\e932"; -} -.di-arrows-fullscreen:before { - content: "\e933"; -} -.di-aspect-ratio-fill:before { - content: "\e934"; -} -.di-aspect-ratio:before { - content: "\e935"; -} -.di-assignment-ind:before { - content: "\e936"; -} -.di-assignment-turned-in:before { - content: "\e937"; -} -.di-assignment:before { - content: "\e938"; -} -.di-asterisk:before { - content: "\e939"; -} -.di-atm:before { - content: "\e93a"; -} -.di-badge-4k-fill:before { - content: "\e93b"; -} -.di-badge-4k:before { - content: "\e93c"; -} -.di-badge-8k-fill:before { - content: "\e93d"; -} -.di-badge-8k:before { - content: "\e93e"; -} -.di-badge-ad-fill:before { - content: "\e93f"; -} -.di-badge-ad:before { - content: "\e940"; -} -.di-badge-cc-fill:before { - content: "\e941"; -} -.di-badge-cc:before { - content: "\e942"; -} -.di-badge-hd-fill:before { - content: "\e943"; -} -.di-badge-hd:before { - content: "\e944"; -} -.di-badge-tm-fill:before { - content: "\e945"; -} -.di-badge-tm:before { - content: "\e946"; -} -.di-bag-check-fill:before { - content: "\e947"; -} -.di-bag-check:before { - content: "\e948"; -} -.di-bag-fill:before { - content: "\e949"; -} -.di-bag:before { - content: "\e94a"; -} -.di-bags:before { - content: "\e94b"; -} -.di-bar-chart-fill:before { - content: "\e94c"; -} -.di-bar-chart:before { - content: "\e94d"; -} -.di-battery-charging:before { - content: "\e94e"; -} -.di-battery-emty:before { - content: "\e94f"; -} -.di-battery-full:before { - content: "\e950"; -} -.di-battery-harf:before { - content: "\e951"; -} -.di-bell-alert-box-fill:before { - content: "\e952"; -} -.di-bell-alert-box:before { - content: "\e953"; -} -.di-bell-alert-fill:before { - content: "\e954"; -} -.di-bell-alert:before { - content: "\e955"; -} -.di-bell-notification-fill:before { - content: "\e956"; -} -.di-bell-notification-on-fill:before { - content: "\e957"; -} -.di-bell-notification-on:before { - content: "\e958"; -} -.di-bell-notification:before { - content: "\e959"; -} -.di-bike:before { - content: "\e95a"; -} -.di-bluetooth:before { - content: "\e95b"; -} -.di-boat:before { - content: "\e95c"; -} -.di-book:before { - content: "\e95d"; -} -.di-bookmark-check-fill:before { - content: "\e95e"; -} -.di-bookmark-check:before { - content: "\e95f"; -} -.di-bookmark-fill:before { - content: "\e960"; -} -.di-bookmark-new-fill:before { - content: "\e961"; -} -.di-bookmark-new:before { - content: "\e962"; -} -.di-bookmark-star-fill:before { - content: "\e963"; -} -.di-bookmark-star:before { - content: "\e964"; -} -.di-bookmark:before { - content: "\e965"; -} -.di-boostzone:before { - content: "\e966"; -} -.di-box-arrow-backup:before { - content: "\e967"; -} -.di-box-arrow-download:before { - content: "\e968"; -} -.di-box-arrow-link-blank:before { - content: "\e969"; -} -.di-box-arrow-upload:before { - content: "\e96a"; -} -.di-box-seam:before { - content: "\e96b"; -} -.di-box:before { - content: "\e96c"; -} -.di-braces:before { - content: "\e96d"; -} -.di-briefcase-fill:before { - content: "\e96e"; -} -.di-briefcase:before { - content: "\e96f"; -} -.di-brightness-fill:before { - content: "\e970"; -} -.di-brightness:before { - content: "\e971"; -} -.di-broadcast-pin:before { - content: "\e972"; -} -.di-broadcast:before { - content: "\e973"; -} -.di-bug-fill:before { - content: "\e974"; -} -.di-bug:before { - content: "\e975"; -} -.di-building:before { - content: "\e976"; -} -.di-bus:before { - content: "\e977"; -} -.di-calculator-fill:before { - content: "\e978"; -} -.di-calculator:before { - content: "\e979"; -} -.di-calendar-check-fill:before { - content: "\e97a"; -} -.di-calendar-check:before { - content: "\e97b"; -} -.di-calendar-day-fill:before { - content: "\e97c"; -} -.di-calendar-day:before { - content: "\e97d"; -} -.di-calendar-event-fill:before { - content: "\e97e"; -} -.di-calendar-event:before { - content: "\e97f"; -} -.di-calendar-fill:before { - content: "\e980"; -} -.di-calendar-week-fill:before { - content: "\e981"; -} -.di-calendar-week:before { - content: "\e982"; -} -.di-calendar:before { - content: "\e983"; -} -.di-call-end:before { - content: "\e984"; -} -.di-call:before { - content: "\e985"; -} -.di-camera-fill:before { - content: "\e986"; -} -.di-camera-video-fill:before { - content: "\e987"; -} -.di-camera-video:before { - content: "\e988"; -} -.di-camera:before { - content: "\e989"; -} -.di-car:before { - content: "\e98a"; -} -.di-card-fill:before { - content: "\e98b"; -} -.di-card:before { - content: "\e98c"; -} -.di-caret-down-fill:before { - content: "\e98d"; -} -.di-caret-down-square-fill:before { - content: "\e98e"; -} -.di-caret-down-square:before { - content: "\e98f"; -} -.di-caret-left-fill:before { - content: "\e990"; -} -.di-caret-left-square-fill:before { - content: "\e991"; -} -.di-caret-left-square:before { - content: "\e992"; -} -.di-caret-right-fill:before { - content: "\e993"; -} -.di-caret-right-square-fill:before { - content: "\e994"; -} -.di-caret-right-square:before { - content: "\e995"; -} -.di-caret-up-fill:before { - content: "\e996"; -} -.di-caret-up-square-fill:before { - content: "\e997"; -} -.di-caret-up-square:before { - content: "\e998"; -} -.di-cart-fill:before { - content: "\e999"; -} -.di-cart:before { - content: "\e99a"; -} -.di-cash-stack:before { - content: "\e99b"; -} -.di-cash:before { - content: "\e99c"; -} -.di-cast:before { - content: "\e99d"; -} -.di-cctv:before { - content: "\e99e"; -} -.di-chat-box-left-dots-fill:before { - content: "\e99f"; -} -.di-chat-box-left-dots:before { - content: "\e9a0"; -} -.di-chat-box-left-fill:before { - content: "\e9a1"; -} -.di-chat-box-left-text-fill:before { - content: "\e9a2"; -} -.di-chat-box-left-text:before { - content: "\e9a3"; -} -.di-chat-box-left:before { - content: "\e9a4"; -} -.di-chat-box-right-dots-fill:before { - content: "\e9a5"; -} -.di-chat-box-right-dots:before { - content: "\e9a6"; -} -.di-chat-box-right-fill:before { - content: "\e9a7"; -} -.di-chat-box-right-text-fill:before { - content: "\e9a8"; -} -.di-chat-box-right-text:before { - content: "\e9a9"; -} -.di-chat-box-right:before { - content: "\e9aa"; -} -.di-chat-circle-left-dot-fill:before { - content: "\e9ab"; -} -.di-chat-circle-left-dot:before { - content: "\e9ac"; -} -.di-chat-circle-left-fill:before { - content: "\e9ad"; -} -.di-chat-circle-left-text-fill:before { - content: "\e9ae"; -} -.di-chat-circle-left-text:before { - content: "\e9af"; -} -.di-chat-circle-left:before { - content: "\e9b0"; -} -.di-chat-circle-right-dot-fill:before { - content: "\e9b1"; -} -.di-chat-circle-right-dot:before { - content: "\e9b2"; -} -.di-chat-circle-right-fill:before { - content: "\e9b3"; -} -.di-chat-circle-right-text-fill:before { - content: "\e9b4"; -} -.di-chat-circle-right-text:before { - content: "\e9b5"; -} -.di-chat-circle-right:before { - content: "\e9b6"; -} -.di-check-box:before { - content: "\e9b7"; -} -.di-check-circle-fill:before { - content: "\e9b8"; -} -.di-check-circle-line:before { - content: "\e9b9"; -} -.di-check-circle:before { - content: "\e9ba"; -} -.di-check-square-fill:before { - content: "\e9bb"; -} -.di-check-square-line:before { - content: "\e9bc"; -} -.di-check-square:before { - content: "\e9bd"; -} -.di-check:before { - content: "\e9be"; -} -.di-chevron-bar-contract:before { - content: "\e9bf"; -} -.di-chevron-bar-down:before { - content: "\e9c0"; -} -.di-chevron-bar-expand:before { - content: "\e9c1"; -} -.di-chevron-bar-left:before { - content: "\e9c2"; -} -.di-chevron-bar-right:before { - content: "\e9c3"; -} -.di-chevron-bar-up:before { - content: "\e9c4"; -} -.di-chevron-contract:before { - content: "\e9c5"; -} -.di-chevron-double-down:before { - content: "\e9c6"; -} -.di-chevron-double-left:before { - content: "\e9c7"; -} -.di-chevron-double-right:before { - content: "\e9c8"; -} -.di-chevron-double-up:before { - content: "\e9c9"; -} -.di-chevron-down:before { - content: "\e9ca"; -} -.di-chevron-expand:before { - content: "\e9cb"; -} -.di-chevron-left:before { - content: "\e9cc"; -} -.di-chevron-right:before { - content: "\e9cd"; -} -.di-chevron-up:before { - content: "\e9ce"; -} -.di-clipboard-check:before { - content: "\e9cf"; -} -.di-clipboard-data:before { - content: "\e9d0"; -} -.di-clipboard-text:before { - content: "\e9d1"; -} -.di-clipboard:before { - content: "\e9d2"; -} -.di-clock-fill:before { - content: "\e9d3"; -} -.di-clock-history:before { - content: "\e9d4"; -} -.di-clock:before { - content: "\e9d5"; -} -.di-cloud-arrow-down-fill:before { - content: "\e9d6"; -} -.di-cloud-arrow-down:before { - content: "\e9d7"; -} -.di-cloud-arrow-up-fill:before { - content: "\e9d8"; -} -.di-cloud-arrow-up:before { - content: "\e9d9"; -} -.di-cloud-check-fill:before { - content: "\e9da"; -} -.di-cloud-check:before { - content: "\e9db"; -} -.di-cloud-fill:before { - content: "\e9dc"; -} -.di-cloud:before { - content: "\e9dd"; -} -.di-code-square:before { - content: "\e9de"; -} -.di-code:before { - content: "\e9df"; -} -.di-collection-fill:before { - content: "\e9e0"; -} -.di-collection:before { - content: "\e9e1"; -} -.di-compass-fill:before { - content: "\e9e2"; -} -.di-compass:before { - content: "\e9e3"; -} -.di-cone:before { - content: "\e9e4"; -} -.di-controller-fill:before { - content: "\e9e5"; -} -.di-controller:before { - content: "\e9e6"; -} -.di-copyright-sign:before { - content: "\e9e7"; -} -.di-copyright-symbol:before { - content: "\e9e8"; -} -.di-COVID-19-fill:before { - content: "\e9e9"; -} -.di-COVID-19:before { - content: "\e9ea"; -} -.di-cpu-fill:before { - content: "\e9eb"; -} -.di-cpu:before { - content: "\e9ec"; -} -.di-crop:before { - content: "\e9ed"; -} -.di-cup-fill:before { - content: "\e9ee"; -} -.di-cup-straw:before { - content: "\e9ef"; -} -.di-cup:before { - content: "\e9f0"; -} -.di-cursor-fill:before { - content: "\e9f1"; -} -.di-cursor-text:before { - content: "\e9f2"; -} -.di-cursor:before { - content: "\e9f3"; -} -.di-dash-circle-fill:before { - content: "\e9f4"; -} -.di-dash-circle:before { - content: "\e9f5"; -} -.di-dash-square-fill:before { - content: "\e9f6"; -} -.di-dash-square:before { - content: "\e9f7"; -} -.di-dash:before { - content: "\e9f8"; -} -.di-dashboard:before { - content: "\e9f9"; -} -.di-diagram:before { - content: "\e9fa"; -} -.di-diamond-fill:before { - content: "\e9fb"; -} -.di-diamond:before { - content: "\e9fc"; -} -.di-diamond2:before { - content: "\e9fd"; -} -.di-display-fill:before { - content: "\e9fe"; -} -.di-display:before { - content: "\e9ff"; -} -.di-dns:before { - content: "\ea00"; -} -.di-door-closed-fill:before { - content: "\ea01"; -} -.di-door-closed:before { - content: "\ea02"; -} -.di-download_app:before { - content: "\ea03"; -} -.di-download:before { - content: "\ea04"; -} -.di-email-fill-notification:before { - content: "\ea05"; -} -.di-email-fill-open:before { - content: "\ea06"; -} -.di-email-fill:before { - content: "\ea07"; -} -.di-email-notification:before { - content: "\ea08"; -} -.di-email-open:before { - content: "\ea09"; -} -.di-email:before { - content: "\ea0a"; -} -.di-emergenc_call:before { - content: "\ea0b"; -} -.di-emergenc:before { - content: "\ea0c"; -} -.di-exclamation-chat-fill:before { - content: "\ea0d"; -} -.di-exclamation-chat:before { - content: "\ea0e"; -} -.di-exclamation-circle-fill:before { - content: "\ea0f"; -} -.di-exclamation-circle:before { - content: "\ea10"; -} -.di-exclamation-diamond-fill:before { - content: "\ea11"; -} -.di-exclamation-diamond:before { - content: "\ea12"; -} -.di-exclamation-square-circle:before { - content: "\ea13"; -} -.di-exclamation-square-fill:before { - content: "\ea14"; -} -.di-exclamation-square:before { - content: "\ea15"; -} -.di-exclamation-triangle-fill:before { - content: "\ea16"; -} -.di-exclamation-triangle:before { - content: "\ea17"; -} -.di-exclamation:before { - content: "\ea18"; -} -.di-exclude:before { - content: "\ea19"; -} -.di-face-id:before { - content: "\ea1a"; -} -.di-facebook-circle:before { - content: "\ea1b"; -} -.di-facebook-square:before { - content: "\ea1c"; -} -.di-favorite-hart:before { - content: "\ea1d"; -} -.di-favorite-star:before { - content: "\ea1e"; -} -.di-file-copy:before { - content: "\ea1f"; -} -.di-file-excel:before { - content: "\ea20"; -} -.di-file-image:before { - content: "\ea21"; -} -.di-file-keynote:before { - content: "\ea22"; -} -.di-file-numbers:before { - content: "\ea23"; -} -.di-file-powerpoint:before { - content: "\ea24"; -} -.di-file-text:before { - content: "\ea25"; -} -.di-file-word:before { - content: "\ea26"; -} -.di-file:before { - content: "\ea27"; -} -.di-filter-circle-fill:before { - content: "\ea28"; -} -.di-filter-circle:before { - content: "\ea29"; -} -.di-filter-left:before { - content: "\ea2a"; -} -.di-filter-right:before { - content: "\ea2b"; -} -.di-filter-square-fill:before { - content: "\ea2c"; -} -.di-filter-square:before { - content: "\ea2d"; -} -.di-filter:before { - content: "\ea2e"; -} -.di-finder-folder:before { - content: "\ea2f"; -} -.di-finder:before { - content: "\ea30"; -} -.di-fingerprint:before { - content: "\ea31"; -} -.di-flag-fill:before { - content: "\ea32"; -} -.di-flag:before { - content: "\ea33"; -} -.di-flashlight:before { - content: "\ea34"; -} -.di-folder-check:before { - content: "\ea35"; -} -.di-folder-delet:before { - content: "\ea36"; -} -.di-folder-fill:before { - content: "\ea37"; -} -.di-folder-open-fill:before { - content: "\ea38"; -} -.di-folder-open:before { - content: "\ea39"; -} -.di-folder-plus:before { - content: "\ea3a"; -} -.di-folder-share:before { - content: "\ea3b"; -} -.di-folder-x:before { - content: "\ea3c"; -} -.di-folder:before { - content: "\ea3d"; -} -.di-font:before { - content: "\ea3e"; -} -.di-fullscreen-exit:before { - content: "\ea3f"; -} -.di-fullscreen:before { - content: "\ea40"; -} -.di-gear-fill:before { - content: "\ea41"; -} -.di-gear-square-fill:before { - content: "\ea42"; -} -.di-gear-system-update:before { - content: "\ea43"; -} -.di-gear:before { - content: "\ea44"; -} -.di-gem:before { - content: "\ea45"; -} -.di-geo-alt:before { - content: "\ea46"; -} -.di-geo-location:before { - content: "\ea47"; -} -.di-geo-my-location:before { - content: "\ea48"; -} -.di-gift-fill:before { - content: "\ea49"; -} -.di-gift:before { - content: "\ea4a"; -} -.di-graph-down:before { - content: "\ea4b"; -} -.di-graph-up:before { - content: "\ea4c"; -} -.di-grid-2-fill:before { - content: "\ea4d"; -} -.di-grid-3-fill:before { - content: "\ea4e"; -} -.di-grid:before { - content: "\ea4f"; -} -.di-grip-horizontal:before { - content: "\ea50"; -} -.di-grip-vertical:before { - content: "\ea51"; -} -.di-group:before { - content: "\ea52"; -} -.di-group2:before { - content: "\ea53"; -} -.di-hand-index:before { - content: "\ea54"; -} -.di-harf:before { - content: "\ea55"; -} -.di-hart-fill:before { - content: "\ea56"; -} -.di-hart-half:before { - content: "\ea57"; -} -.di-hash:before { - content: "\ea58"; -} -.di-hdd-network:before { - content: "\ea59"; -} -.di-hdd:before { - content: "\ea5a"; -} -.di-hexagon-fill:before { - content: "\ea5b"; -} -.di-hexagon-harf:before { - content: "\ea5c"; -} -.di-hexagon:before { - content: "\ea5d"; -} -.di-history:before { - content: "\ea5e"; -} -.di-home-fill:before { - content: "\ea5f"; -} -.di-home:before { - content: "\ea60"; -} -.di-hotel_bed:before { - content: "\ea61"; -} -.di-hotel:before { - content: "\ea62"; -} -.di-image-fill:before { - content: "\ea63"; -} -.di-image:before { - content: "\ea64"; -} -.di-images:before { - content: "\ea65"; -} -.di-info-box:before { - content: "\ea66"; -} -.di-info-circle:before { - content: "\ea67"; -} -.di-info-fill:before { - content: "\ea68"; -} -.di-info:before { - content: "\ea69"; -} -.di-instagram-circle:before { - content: "\ea6a"; -} -.di-instagram-fill:before { - content: "\ea6b"; -} -.di-instagram:before { - content: "\ea6c"; -} -.di-intersect:before { - content: "\ea6d"; -} -.di-justify-left:before { - content: "\ea6e"; -} -.di-justify-right:before { - content: "\ea6f"; -} -.di-justify:before { - content: "\ea70"; -} -.di-kakao-alim-talk:before { - content: "\ea71"; -} -.di-kakao-circle:before { - content: "\ea72"; -} -.di-kakao-firend-talk:before { - content: "\ea73"; -} -.di-kakao-story-circle:before { - content: "\ea74"; -} -.di-kakao-story:before { - content: "\ea75"; -} -.di-kakao-talk:before { - content: "\ea76"; -} -.di-key:before { - content: "\ea77"; -} -.di-keyboard:before { - content: "\ea78"; -} -.di-label:before { - content: "\ea79"; -} -.di-language:before { - content: "\ea7a"; -} -.di-laptop-fill:before { - content: "\ea7b"; -} -.di-laptop:before { - content: "\ea7c"; -} -.di-layer-back:before { - content: "\ea7d"; -} -.di-layer-front:before { - content: "\ea7e"; -} -.di-layer:before { - content: "\ea7f"; -} -.di-lightning-fill:before { - content: "\ea80"; -} -.di-lightning:before { - content: "\ea81"; -} -.di-list-check:before { - content: "\ea82"; -} -.di-list:before { - content: "\ea83"; -} -.di-local-airport-land:before { - content: "\ea84"; -} -.di-local-airport:before { - content: "\ea85"; -} -.di-local-atm:before { - content: "\ea86"; -} -.di-local-bar:before { - content: "\ea87"; -} -.di-local-cafe:before { - content: "\ea88"; -} -.di-local-dining:before { - content: "\ea89"; -} -.di-local-ev-station:before { - content: "\ea8a"; -} -.di-local-fastfood:before { - content: "\ea8b"; -} -.di-local-gas-station:before { - content: "\ea8c"; -} -.di-local-hospital:before { - content: "\ea8d"; -} -.di-local-laundry:before { - content: "\ea8e"; -} -.di-local-library:before { - content: "\ea8f"; -} -.di-local-museum:before { - content: "\ea90"; -} -.di-local-restaurant:before { - content: "\ea91"; -} -.di-local-store:before { - content: "\ea92"; -} -.di-lock-open:before { - content: "\ea93"; -} -.di-lock:before { - content: "\ea94"; -} -.di-map-fill:before { - content: "\ea95"; -} -.di-map:before { - content: "\ea96"; -} -.di-menu-close-fill:before { - content: "\ea97"; -} -.di-menu-close:before { - content: "\ea98"; -} -.di-menu-open-fill:before { - content: "\ea99"; -} -.di-menu-open:before { - content: "\ea9a"; -} -.di-mic-fill:before { - content: "\ea9b"; -} -.di-mic-mute-fill:before { - content: "\ea9c"; -} -.di-mic-mute:before { - content: "\ea9d"; -} -.di-mic:before { - content: "\ea9e"; -} -.di-minus:before { - content: "\ea9f"; -} -.di-mobile-android:before { - content: "\eaa0"; -} -.di-mobile-flip:before { - content: "\eaa1"; -} -.di-mobile-fold:before { - content: "\eaa2"; -} -.di-mobile-ios:before { - content: "\eaa3"; -} -.di-mobile-pad:before { - content: "\eaa4"; -} -.di-mobile-store:before { - content: "\eaa5"; -} -.di-mobile:before { - content: "\eaa6"; -} -.di-moon-crescent:before { - content: "\eaa7"; -} -.di-moon-half:before { - content: "\eaa8"; -} -.di-moon:before { - content: "\eaa9"; -} -.di-more-horiz:before { - content: "\eaaa"; -} -.di-more-vert:before { - content: "\eaab"; -} -.di-movie-fill:before { - content: "\eaac"; -} -.di-movie:before { - content: "\eaad"; -} -.di-music-backward-fill:before { - content: "\eaae"; -} -.di-music-backward:before { - content: "\eaaf"; -} -.di-music-forward-fill:before { - content: "\eab0"; -} -.di-music-forward:before { - content: "\eab1"; -} -.di-music-list:before { - content: "\eab2"; -} -.di-music-pause-fill:before { - content: "\eab3"; -} -.di-music-pause:before { - content: "\eab4"; -} -.di-music-play-fill:before { - content: "\eab5"; -} -.di-music-play:before { - content: "\eab6"; -} -.di-music-stop-fill:before { - content: "\eab7"; -} -.di-music-stop:before { - content: "\eab8"; -} -.di-music:before { - content: "\eab9"; -} -.di-naver-blog:before { - content: "\eaba"; -} -.di-naver-circle:before { - content: "\eabb"; -} -.di-naver:before { - content: "\eabc"; -} -.di-news:before { - content: "\eabd"; -} -.di-option:before { - content: "\eabe"; -} -.di-paperclip:before { - content: "\eabf"; -} -.di-payment:before { - content: "\eac0"; -} -.di-pen-fill:before { - content: "\eac1"; -} -.di-pen:before { - content: "\eac2"; -} -.di-pencil-fill:before { - content: "\eac3"; -} -.di-pencil-square:before { - content: "\eac4"; -} -.di-pencil:before { - content: "\eac5"; -} -.di-person-fill:before { - content: "\eac6"; -} -.di-person:before { - content: "\eac7"; -} -.di-personal-information:before { - content: "\eac8"; -} -.di-pet:before { - content: "\eac9"; -} -.di-power:before { - content: "\eaca"; -} -.di-print:before { - content: "\eacb"; -} -.di-problem:before { - content: "\eacc"; -} -.di-profile-smile:before { - content: "\eacd"; -} -.di-profile:before { - content: "\eace"; -} -.di-push-assemble:before { - content: "\eacf"; -} -.di-push-fill:before { - content: "\ead0"; -} -.di-push-notification:before { - content: "\ead1"; -} -.di-push:before { - content: "\ead2"; -} -.di-question-answer:before { - content: "\ead3"; -} -.di-question-circle-fill:before { - content: "\ead4"; -} -.di-question-circle:before { - content: "\ead5"; -} -.di-question-diamond-fill:before { - content: "\ead6"; -} -.di-question-diamond:before { - content: "\ead7"; -} -.di-question-square-fill:before { - content: "\ead8"; -} -.di-question-square:before { - content: "\ead9"; -} -.di-question:before { - content: "\eada"; -} -.di-radio:before { - content: "\eadb"; -} -.di-receipt:before { - content: "\eadc"; -} -.di-refresh-fill:before { - content: "\eadd"; -} -.di-refresh:before { - content: "\eade"; -} -.di-reset-fill:before { - content: "\eadf"; -} -.di-reset:before { - content: "\eae0"; -} -.di-rotation-lock:before { - content: "\eae1"; -} -.di-rotation:before { - content: "\eae2"; -} -.di-rwis:before { - content: "\eae3"; -} -.di-search:before { - content: "\eae4"; -} -.di-server:before { - content: "\eae5"; -} -.di-share:before { - content: "\eae6"; -} -.di-shield:before { - content: "\eae7"; -} -.di-shift-fill:before { - content: "\eae8"; -} -.di-shift:before { - content: "\eae9"; -} -.di-shuffle:before { - content: "\eaea"; -} -.di-silent:before { - content: "\eaeb"; -} -.di-sim:before { - content: "\eaec"; -} -.di-slash:before { - content: "\eaed"; -} -.di-sliders:before { - content: "\eaee"; -} -.di-smart-watch:before { - content: "\eaef"; -} -.di-sort-alpha-down-alt:before { - content: "\eaf0"; -} -.di-sort-alpha-down:before { - content: "\eaf1"; -} -.di-sort-alpha-up-alt:before { - content: "\eaf2"; -} -.di-sort-alpha-up:before { - content: "\eaf3"; -} -.di-sort-down-alt:before { - content: "\eaf4"; -} -.di-sort-down:before { - content: "\eaf5"; -} -.di-sort-numeric-down-alt:before { - content: "\eaf6"; -} -.di-sort-numeric-down:before { - content: "\eaf7"; -} -.di-sort-numeric-up-alt:before { - content: "\eaf8"; -} -.di-sort-numeric-up:before { - content: "\eaf9"; -} -.di-sort-up-alt:before { - content: "\eafa"; -} -.di-sort-up:before { - content: "\eafb"; -} -.di-sound:before { - content: "\eafc"; -} -.di-soundwave:before { - content: "\eafd"; -} -.di-square-fill:before { - content: "\eafe"; -} -.di-square:before { - content: "\eaff"; -} -.di-star-circle:before { - content: "\eb00"; -} -.di-star-fill:before { - content: "\eb01"; -} -.di-star:before { - content: "\eb02"; -} -.di-statistics-circle:before { - content: "\eb03"; -} -.di-statistics:before { - content: "\eb04"; -} -.di-sticky-fill:before { - content: "\eb05"; -} -.di-sticky:before { - content: "\eb06"; -} -.di-stoplights-fill:before { - content: "\eb07"; -} -.di-stoplights:before { - content: "\eb08"; -} -.di-sunny:before { - content: "\eb09"; -} -.di-tab:before { - content: "\eb0a"; -} -.di-table:before { - content: "\eb0b"; -} -.di-terminal-fill:before { - content: "\eb0c"; -} -.di-terminal:before { - content: "\eb0d"; -} -.di-ternnel:before { - content: "\eb0e"; -} -.di-textarea-t:before { - content: "\eb0f"; -} -.di-textarea:before { - content: "\eb10"; -} -.di-thermometer-full:before { - content: "\eb11"; -} -.di-thermometer-half:before { - content: "\eb12"; -} -.di-thermometer:before { - content: "\eb13"; -} -.di-time-end:before { - content: "\eb14"; -} -.di-time-full:before { - content: "\eb15"; -} -.di-time-start:before { - content: "\eb16"; -} -.di-toggle-off:before { - content: "\eb17"; -} -.di-toggle-on:before { - content: "\eb18"; -} -.di-toggle:before { - content: "\eb19"; -} -.di-train:before { - content: "\eb1a"; -} -.di-trash-fill:before { - content: "\eb1b"; -} -.di-trash:before { - content: "\eb1c"; -} -.di-truck-fill:before { - content: "\eb1d"; -} -.di-truck:before { - content: "\eb1e"; -} -.di-ui-checks-grid:before { - content: "\eb1f"; -} -.di-ui-radios-grid:before { - content: "\eb20"; -} -.di-upload:before { - content: "\eb21"; -} -.di-vibration:before { - content: "\eb22"; -} -.di-vms:before { - content: "\eb23"; -} -.di-volume-down-fill:before { - content: "\eb24"; -} -.di-volume-down:before { - content: "\eb25"; -} -.di-volume-mute-fill:before { - content: "\eb26"; -} -.di-volume-mute:before { - content: "\eb27"; -} -.di-volume-off-fill:before { - content: "\eb28"; -} -.di-volume-off:before { - content: "\eb29"; -} -.di-volume-up-fill:before { - content: "\eb2a"; -} -.di-volume-up:before { - content: "\eb2b"; -} -.di-weather-cloud-fill:before { - content: "\eb2c"; -} -.di-weather-cloud:before { - content: "\eb2d"; -} -.di-weather-cloudy-gusts:before { - content: "\eb2e"; -} -.di-weather-cloudy-windy:before { - content: "\eb2f"; -} -.di-weather-cloudy:before { - content: "\eb30"; -} -.di-weather-fahrenheit:before { - content: "\eb31"; -} -.di-weather-fog:before { - content: "\eb32"; -} -.di-weather-hail:before { - content: "\eb33"; -} -.di-weather-humidity:before { - content: "\eb34"; -} -.di-weather-hurricane:before { - content: "\eb35"; -} -.di-weather-lightning:before { - content: "\eb36"; -} -.di-weather-rain:before { - content: "\eb37"; -} -.di-weather-rainny:before { - content: "\eb38"; -} -.di-weather-snow:before { - content: "\eb39"; -} -.di-weather-snowflake:before { - content: "\eb3a"; -} -.di-weather-sunny-overcast:before { - content: "\eb3b"; -} -.di-weather-sunny:before { - content: "\eb3c"; -} -.di-weather-thunderstorm:before { - content: "\eb3d"; -} -.di-weather-umbrella:before { - content: "\eb3e"; -} -.di-weather-windy:before { - content: "\eb3f"; -} -.di-whater:before { - content: "\eb40"; -} -.di-whather-celsius:before { - content: "\eb41"; -} -.di-wifi-1:before { - content: "\eb42"; -} -.di-wifi-2:before { - content: "\eb43"; -} -.di-wifi-off:before { - content: "\eb44"; -} -.di-wifi:before { - content: "\eb45"; -} -.di-window:before { - content: "\eb46"; -} -.di-x-circle-fill:before { - content: "\eb47"; -} -.di-x-circle:before { - content: "\eb48"; -} -.di-x-square-fill:before { - content: "\eb49"; -} -.di-x-square:before { - content: "\eb4a"; -} -.di-x:before { - content: "\eb4b"; -} -.di-zoom-in:before { - content: "\eb4c"; -} -.di-zoom-out:before { - content: "\eb4d"; -} -.di-server-line:before { - content: "\e907"; -} diff --git a/packages/common/business_components/src/index.css b/packages/common/business_components/src/index.css deleted file mode 100644 index 46896e552..000000000 --- a/packages/common/business_components/src/index.css +++ /dev/null @@ -1,11 +0,0 @@ - -@layer base {} - -@layer base { - * { - @apply border-border outline-ring/50; - } - body { - @apply bg-background text-foreground; - } -} \ No newline at end of file diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index a5191eca6..834db2347 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -1,5 +1,5 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import UiPageNations from "./uiPageNations"; type UiTableProps = { @@ -21,12 +21,25 @@ type UiHeadProps = { export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick, onPageChange, className = '' }: UiTableProps) { const [cur, setCur] = useState(1); + const [idx, setIdx] = useState(0); const handlePageChange = (page: number) => { setCur(page); onPageChange(page); } - const style = cellClick ? 'cursor-pointer' : ''; + const handleCellClick = (index: number) => { + if (cellClick) { + console.log("cellClick", index); + cellClick(index); + setIdx(index); + } + }; +useEffect(() => { + + console.log("idx", idx); + console.log("idx", idx); + + },[idx]) return ( <> {headName ?
@@ -42,10 +55,11 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa } - {tableData?.map((el: { [key: string]: string | number | boolean | object}, index) => ( - + {tableData?.map((el: { [key: string]: any}, index) => ( + {headlist?.map((head) => ( - cellClick && cellClick(index)} key={head.id + index}>{el[head.id]} + // handleCellClick(index)} key={head.id + index}>{el[head.id]} + handleCellClick(index)} key={head.id + index}>{el[head.id]} ))} ))} @@ -55,4 +69,4 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa
); -} +} \ No newline at end of file diff --git a/packages/common/business_components/tailwind.config.js b/packages/common/business_components/tailwind.config.js index f30c9f77a..9ce3117a0 100644 --- a/packages/common/business_components/tailwind.config.js +++ b/packages/common/business_components/tailwind.config.js @@ -1,93 +1,8 @@ +import presetConfig from "../../../tailwind.config.preset"; + /** @type {import('tailwindcss').Config} */ export default { - darkMode: ["class", "[data-mode='dark']"], - content: ["./src/**/*.{ts,tsx,js,jsx}", "./.storybook/**/*.{ts,tsx,js,jsx}"], - theme: { - extend: { - borderRadius: { - lg: "var(--radius)", - md: "calc(var(--radius) - 2px)", - sm: "calc(var(--radius) - 4px)", - }, - colors: { - background: "var(--background)", - foreground: "var(--foreground)", - card: { - DEFAULT: "var(--card)", - foreground: "var(--card-foreground)", - }, - popover: { - DEFAULT: "var(--popover)", - foreground: "var(--popover-foreground)", - }, - primary: { - DEFAULT: "var(--primary)", - foreground: "var(--primary-foreground)", - }, - secondary: { - DEFAULT: "var(--secondary)", - foreground: "var(--secondary-foreground)", - }, - muted: { - DEFAULT: "var(--muted)", - foreground: "var(--muted-foreground)", - }, - accent: { - DEFAULT: "var(--accent)", - foreground: "var(--accent-foreground)", - }, - destructive: { - DEFAULT: "var(--destructive)", - foreground: "var(--destructive-foreground)", - }, - border: "var(--border)", - input: "var(--input)", - label: "var(--label)", - ring: "var(--ring)", - chart: { - 1: "var(--chart-1)", - 2: "var(--chart-2)", - 3: "var(--chart-3)", - 4: "var(--chart-4)", - 5: "var(--chart-5)", - }, - }, - keyframes: { - "accordion-down": { - from: { height: "0" }, - to: { height: "var(--radix-accordion-content-height)" }, - }, - "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: "0" }, - }, - "spin-parent": { - from: { transform: "translate(-50%,-50%) rotate(0deg)" }, - to: { transform: "translate(-50%,-50%) rotate(360deg)" }, - }, - "spin-child": { - from: { transform: "translate(0,0) rotate(0deg)" }, - to: { transform: "translate(0,0) rotate(360deg)" }, - }, - }, - animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out", - "spin-parent": "spin-parent 6s linear infinite", - "spin-child": "spin-child 1s ease-in-out infinite", - }, - backgroundImage: { - "gradient-blue": "linear-gradient(.25turn, #2094fa, #00e5dd)", - "gradient-blue-hover": - "linear-gradient(.25turn, #2298ff, #01dcda, #00e8b4)", - "gradient-green": "linear-gradient(.25turn, #00bad0, #00eb6f)", - "gradient-green-hover": "linear-gradient(.25turn, #00bad0, #12fe81)", - "gradient-red": "linear-gradient(.25turn, #ff487c, #ffc425)", - "gradient-red-hover": "linear-gradient(.25turn, #ff487c, #ffea3a)", - "gradient-purple": "linear-gradient(.25turn, #be30d7, #ff9264)", - "gradient-purple-hover": "linear-gradient(.25turn, #be30d7, #ffaf5a)", - }, - }, - }, + presets: [presetConfig], + content: ["./src/**/*.{ts,tsx,js,jsx}"], plugins: [require("tailwindcss-animate")], }; From dc4c1e93b14ed73e7ec2e5b5dcbb4c4bef7776b6 Mon Sep 17 00:00:00 2001 From: leedj312 Date: Mon, 7 Apr 2025 17:53:12 +0900 Subject: [PATCH 19/54] =?UTF-8?q?datePicker=20value=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_components/src/ui/date_picker/index.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/common/business_components/src/ui/date_picker/index.tsx b/packages/common/business_components/src/ui/date_picker/index.tsx index 8fcd9b52e..d3a6a05c1 100644 --- a/packages/common/business_components/src/ui/date_picker/index.tsx +++ b/packages/common/business_components/src/ui/date_picker/index.tsx @@ -24,7 +24,6 @@ export function DatePicker({ field, selectClass }: DatePickerProps) { field.onChange(date); // React Hook Form 업데이트 setOpen(false); }; - return ( @@ -39,7 +38,12 @@ export function DatePicker({ field, selectClass }: DatePickerProps) { ):selectClass} > {field?.value ? ( - format(field?.value, "PPP", { locale: ko }) + format( + field.value instanceof Date && !isNaN(field.value.getTime()) + ? field.value + : new Date() + + , "PPP", { locale: ko }) ) : ( Pick a date )} From 5898d454aa5a0b0a78e5aaac7087ad58db7c5ff4 Mon Sep 17 00:00:00 2001 From: leedj312 Date: Wed, 9 Apr 2025 10:14:07 +0900 Subject: [PATCH 20/54] =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=ED=8A=B8=EB=A6=AC?= =?UTF-8?q?=EA=B1=B0=20=EB=B3=80=EA=B2=BD=EC=9C=BC=EB=A1=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=ED=85=8C=EC=9D=B4=EB=B8=94=20=EC=85=80?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=ED=8C=8C?= =?UTF-8?q?=EB=9D=BC=EB=AF=B8=ED=84=B0=EC=B6=94=EA=B0=80(=EC=85=80=20head?= =?UTF-8?q?=EA=B0=92)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/dialog_ui/index.tsx | 33 ++++--------------- .../src/ui/table/index.tsx | 19 +++++------ 2 files changed, 14 insertions(+), 38 deletions(-) diff --git a/packages/common/business_components/src/ui/dialog_ui/index.tsx b/packages/common/business_components/src/ui/dialog_ui/index.tsx index 7609e2908..ef611fa40 100644 --- a/packages/common/business_components/src/ui/dialog_ui/index.tsx +++ b/packages/common/business_components/src/ui/dialog_ui/index.tsx @@ -1,50 +1,29 @@ import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTrigger } from "@common/components"; +import { useState } from "react"; type ModalType = { bodyClass: string; - butNm: string; - title: string | undefined; body: React.ReactNode; open?: boolean; onOpenChange?: (open: boolean) => void; } -export function UiModal({ bodyClass, butNm, title, body, open, onOpenChange }: ModalType) { - const dialogProps = open !== undefined && onOpenChange !== undefined && title !== undefined - ? { open, onOpenChange, title } - : {}; - +export function UiModal({ bodyClass, body, open, onOpenChange }: ModalType) { + return ( <> - {!open && ( - - - - + + - {body} + {(open && body)} - )} - {open && ( - - - - - - - {body} - - - - - )} ); } diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index 834db2347..802c59ac0 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -9,7 +9,7 @@ type UiTableProps = { pageSize: number; total: number; children: React.ReactNode | undefined; - cellClick : ((index:number|undefined)=>void) | undefined; + cellClick : ((index:number|undefined, headId:string)=>void )| undefined; onPageChange: (page: number) => void; className?: string; } @@ -26,20 +26,17 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa setCur(page); onPageChange(page); } - const handleCellClick = (index: number) => { + + + const handleCellClick = (index: number,headId:string )=> { if (cellClick) { - console.log("cellClick", index); - cellClick(index); + cellClick(index,headId); setIdx(index); } + + }; -useEffect(() => { - - console.log("idx", idx); - console.log("idx", idx); - - },[idx]) return ( <> {headName ?
@@ -59,7 +56,7 @@ useEffect(() => { {headlist?.map((head) => ( // handleCellClick(index)} key={head.id + index}>{el[head.id]} - handleCellClick(index)} key={head.id + index}>{el[head.id]} + handleCellClick(index,head.id)} key={head.id + index}>{el[head.id]} ))} ))} From e4dda6e50b219e1bcb8daedd252dcecd4cca010f Mon Sep 17 00:00:00 2001 From: leedj312 Date: Wed, 9 Apr 2025 17:25:46 +0900 Subject: [PATCH 21/54] =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=20=EC=B4=88=EA=B8=B0=EA=B0=92=20-1=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/common/business_components/src/ui/table/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index 802c59ac0..368abc5cc 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -21,7 +21,7 @@ type UiHeadProps = { export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick, onPageChange, className = '' }: UiTableProps) { const [cur, setCur] = useState(1); - const [idx, setIdx] = useState(0); + const [idx, setIdx] = useState(-1); const handlePageChange = (page: number) => { setCur(page); onPageChange(page); From 21a25de096a9048867288c8471eb3ccc5b39a5e9 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Thu, 10 Apr 2025 16:18:29 +0900 Subject: [PATCH 22/54] =?UTF-8?q?UiModal=20noheaderYn,=20noFooterYn=20?= =?UTF-8?q?=EC=9D=84=20=EB=84=A3=EC=9C=BC=EB=A9=B4=20=ED=97=A4=EB=8D=94?= =?UTF-8?q?=EC=99=80=20=ED=92=8B=ED=84=B0=EC=98=81=EC=97=AD=20=EC=95=88?= =?UTF-8?q?=EB=B3=B4=EC=9D=B4=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/dialog_ui/index.tsx | 36 ++++++++++++++----- 1 file changed, 27 insertions(+), 9 deletions(-) diff --git a/packages/common/business_components/src/ui/dialog_ui/index.tsx b/packages/common/business_components/src/ui/dialog_ui/index.tsx index ef611fa40..0f14c211e 100644 --- a/packages/common/business_components/src/ui/dialog_ui/index.tsx +++ b/packages/common/business_components/src/ui/dialog_ui/index.tsx @@ -6,22 +6,40 @@ type ModalType = { body: React.ReactNode; open?: boolean; onOpenChange?: (open: boolean) => void; + noHeaderYn?: 'N' | 'Y'; + noFooterYn?: 'N' | 'Y'; + headerTitle?: string; + footerContent?: React.ReactNode; } -export function UiModal({ bodyClass, body, open, onOpenChange }: ModalType) { +export function UiModal({ + bodyClass, + body, + open, + onOpenChange, + noHeaderYn = 'N', + noFooterYn = 'N', + headerTitle, + footerContent +}: ModalType) { return ( <> - - - - - - {(open && body)} - - + {noHeaderYn === 'N' && ( + + + {headerTitle} + + + )} + {(open && body)} + {noFooterYn === 'N' && ( + + {footerContent} + + )} From 0267ffb0d999e65434b96fe0def0136083c866ae Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Fri, 11 Apr 2025 17:38:41 +0900 Subject: [PATCH 23/54] =?UTF-8?q?UiTable=EC=97=90=EC=84=9C=20header?= =?UTF-8?q?=EC=86=8D=EC=84=B1=EC=97=90=20align=20right=20=EC=9D=B4=20?= =?UTF-8?q?=EC=9E=88=EC=9D=84=20=EC=9A=B0=EC=B8=A1=EC=A0=95=EB=A0=AC=20?= =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_components/src/ui/table/index.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index 368abc5cc..ae93cd46f 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -17,6 +17,7 @@ type UiTableProps = { type UiHeadProps = { id: string; title: string; + align?: string; } export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick, onPageChange, className = '' }: UiTableProps) { @@ -55,8 +56,16 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa {tableData?.map((el: { [key: string]: any}, index) => ( {headlist?.map((head) => ( - // handleCellClick(index)} key={head.id + index}>{el[head.id]} - handleCellClick(index,head.id)} key={head.id + index}>{el[head.id]} + handleCellClick(index, head.id)} + key={head.id + index} + > + {el[head.id]} + ))} ))} From a5c3405049094e015c7e159e4b1c65a4b851396b Mon Sep 17 00:00:00 2001 From: YangJinSoo94 Date: Mon, 14 Apr 2025 14:28:53 +0900 Subject: [PATCH 24/54] =?UTF-8?q?=EC=9E=AC=EC=A1=B0=ED=9A=8C=ED=96=88?= =?UTF-8?q?=EC=9D=84=20=EA=B2=BD=EC=9A=B0=20resetPageNo=20prop=EC=97=90=20?= =?UTF-8?q?=EB=94=B0=EB=9D=BC=201=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20?= =?UTF-8?q?=EB=8F=8C=EC=95=84=EA=B0=80=EB=8F=84=EB=A1=9D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/table/index.tsx | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index ae93cd46f..fc0d5adfb 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -12,6 +12,7 @@ type UiTableProps = { cellClick : ((index:number|undefined, headId:string)=>void )| undefined; onPageChange: (page: number) => void; className?: string; + resetPageNo?: boolean; } type UiHeadProps = { @@ -20,22 +21,27 @@ type UiHeadProps = { align?: string; } -export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick, onPageChange, className = '' }: UiTableProps) { +export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick, onPageChange, className = '', resetPageNo = false }: UiTableProps) { const [cur, setCur] = useState(1); const [idx, setIdx] = useState(-1); + + useEffect(() => { + if (resetPageNo) { + setCur(1); + onPageChange(1); + } + }, [onPageChange, resetPageNo]); + const handlePageChange = (page: number) => { setCur(page); onPageChange(page); } - const handleCellClick = (index: number,headId:string )=> { if (cellClick) { cellClick(index,headId); setIdx(index); } - - }; return ( @@ -53,8 +59,8 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa } - {tableData?.map((el: { [key: string]: any}, index) => ( - + {tableData?.map((el: { [key: string]: string | number | boolean | object}, index) => ( + {headlist?.map((head) => ( handleCellClick(index, head.id)} key={head.id + index} > - {el[head.id]} + {String(el[head.id] ?? '')} ))} From 42b6dfc616c308e474a354de305ed6bb6dc89e80 Mon Sep 17 00:00:00 2001 From: leedj312 Date: Wed, 16 Apr 2025 11:07:54 +0900 Subject: [PATCH 25/54] =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=20=ED=97=A4?= =?UTF-8?q?=EB=8D=94=20=EA=B3=A0=EC=A0=95=20=EB=B0=8F=20=EC=84=A0=ED=83=9D?= =?UTF-8?q?=20=EC=8B=9C=20text=20bold=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/common/business_components/src/ui/table/index.tsx | 6 +++--- packages/common/components/src/ui/table/index.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index fc0d5adfb..c8ba18765 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -50,8 +50,8 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa

{headName}

: <>}
-
- +
+ {children ? <>{children} : {headlist?.map((head) => ( {head.title} @@ -64,7 +64,7 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa {headlist?.map((head) => ( handleCellClick(index, head.id)} diff --git a/packages/common/components/src/ui/table/index.tsx b/packages/common/components/src/ui/table/index.tsx index 797f48dfd..082b2e33b 100644 --- a/packages/common/components/src/ui/table/index.tsx +++ b/packages/common/components/src/ui/table/index.tsx @@ -29,7 +29,7 @@ const TableHeader = React.forwardRef< HTMLTableSectionElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( - + )); TableHeader.displayName = "TableHeader"; From f9cd3c579da5039202dbcc4de6c85e6ec6e0a6d3 Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Wed, 16 Apr 2025 17:35:59 +0900 Subject: [PATCH 26/54] =?UTF-8?q?=EC=82=AC=EC=97=85=EC=9D=B4=EB=A0=A5=20-?= =?UTF-8?q?=20=EB=85=B8=ED=9B=84=ED=95=98=EC=88=98=EA=B4=80=EB=A1=9C=20/?= =?UTF-8?q?=20=EB=8F=84=EC=8B=9C=EC=B9=A8=EC=88=98=20=EC=98=88=EB=B0=A9?= =?UTF-8?q?=EC=82=AC=EC=97=85=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84(=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=B2=98=EB=A6=AC=20?= =?UTF-8?q?=EB=B0=8F=20=EB=A1=9C=EC=A7=81=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/fileUploadForm.tsx | 58 ++++++++++ apps/sn/app/oper/floodPre/page.tsx | 80 ++++++++++++++ .../sn/app/oper/oldPp/excelDown/excelDown.tsx | 9 ++ apps/sn/app/oper/oldPp/page.tsx | 59 ++++++++++ apps/sn/app/page.tsx | 8 +- pnpm-lock.yaml | 103 +++++++++++++++++- 6 files changed, 312 insertions(+), 5 deletions(-) create mode 100644 apps/sn/app/components/fileUploadForm.tsx create mode 100644 apps/sn/app/oper/floodPre/page.tsx create mode 100644 apps/sn/app/oper/oldPp/excelDown/excelDown.tsx create mode 100644 apps/sn/app/oper/oldPp/page.tsx diff --git a/apps/sn/app/components/fileUploadForm.tsx b/apps/sn/app/components/fileUploadForm.tsx new file mode 100644 index 000000000..dd3575302 --- /dev/null +++ b/apps/sn/app/components/fileUploadForm.tsx @@ -0,0 +1,58 @@ +"use client" +import { FileUpload, SelectBox } from '@common/business_components/ui'; + +import { Button } from '@common/components/ui'; +import React, { useState } from 'react' + +const FileUploadForm = ({title}:{title:string}) => { + const [files, setFiles] = useState(null); + const [selectedYear, setSelectedYear] = useState(''); + + // 현재 년도부터 10년 전까지의 년도 옵션 생성 + const yearOptions = Array.from({ length: 10 }, (_, i) => { + const year = new Date().getFullYear() - i; + return { text: `${year}년`, val: year.toString() }; + }); + + return ( +
+
+

{title}

+
+
+
+
+ +
+ setSelectedYear(String(value))} + /> + +
+
+
+ ) +} + +export default FileUploadForm \ No newline at end of file diff --git a/apps/sn/app/oper/floodPre/page.tsx b/apps/sn/app/oper/floodPre/page.tsx new file mode 100644 index 000000000..79ef43f76 --- /dev/null +++ b/apps/sn/app/oper/floodPre/page.tsx @@ -0,0 +1,80 @@ +'use client' +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 ListDiv from '@common/business_components/ui/list_div' +const tableHeadlist = [ + { id: 'no', title: 'NO' }, + { id: 'fileNm', title: '파일명' }, + { id: 'manageYear', 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' } +] +const Page = () => { + const [selectedDate, setSelectedDate] = useState(new Date()) + const [company, setCompany] = useState('') + const [pjNm, setpjNm] = useState('') + return ( + + + <ContentsDiv> + <SearchDiv> + <SearchFormLeft> + <div className='flex items-center space-x-4'> + <div className='flex items-center gap-2'> + <span className='whitespace-nowrap'>수행기간</span> + <DatePicker mode={'single'} + selected={selectedDate} + onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} /> + <span>~</span> + <DatePicker mode={'single'} + selected={selectedDate} + onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} /> + </div> + </div> + </SearchFormLeft> + <SearchFormRight> + <div className='flex mx-4'> + <div className='flex items-center mx-2'> + <span className='whitespace-nowrap'>수행사</span> + <Input + className='w-[70px] ml-2' + value={company} + onChange={(e) => setCompany(e.target.value)} + /> + </div> + <div className='flex items-center'> + <span className='whitespace-nowrap'>사업명</span> + <Input + className='w-[70px] ml-2' + value={pjNm} + onChange={(e) => setpjNm(e.target.value)} + /> + </div> + </div> + <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" >조회</Button> + <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" >파일 다운로드</Button> + <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" >삭제</Button> + </SearchFormRight> + </SearchDiv> + <ListDiv className="mt-4"> + <UiTable headName='사업정보 등록 현황' tableData={tableData} headlist={tableHeadlist} pageSize={20} total={20} children={undefined} cellClick={() => { }} onPageChange={function (page: number): void { + throw new Error('Function not implemented.') + }}></UiTable> + </ListDiv> + <ListDiv className="mt-4"> + <FileUploadForm title='도시침수 예방사업 사업추진현황 등록' /> + </ListDiv> + </ContentsDiv> + </MainDiv> + ) +} + +export default Page \ No newline at end of file diff --git a/apps/sn/app/oper/oldPp/excelDown/excelDown.tsx b/apps/sn/app/oper/oldPp/excelDown/excelDown.tsx new file mode 100644 index 000000000..d1bd5cc70 --- /dev/null +++ b/apps/sn/app/oper/oldPp/excelDown/excelDown.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +const ExcelDown = () => { + return ( + <div>excelDown</div> + ) +} + +export default ExcelDown \ No newline at end of file diff --git a/apps/sn/app/oper/oldPp/page.tsx b/apps/sn/app/oper/oldPp/page.tsx new file mode 100644 index 000000000..cc0e00aeb --- /dev/null +++ b/apps/sn/app/oper/oldPp/page.tsx @@ -0,0 +1,59 @@ +'use client' +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 ListDiv from '@common/business_components/ui/list_div' +// TODO: 임시 id +const tableHeadlist = [ + { id: 'no', title: 'NO' }, + { id: 'fileNm', title: '파일명' }, + { id: 'manageYear', 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' } +] +const Page = () => { + const [selectedDate, setSelectedDate] = useState<Date>(new Date()); + return ( + <MainDiv> + <Title title='노후 하수관로 정비사업'/> + <ContentsDiv> + <SearchDiv> + <SearchFormLeft> + <div className='flex items-center space-x-2'> + <span className='w-20 whitespace-nowrap'>등록기간</span> + <DatePicker mode={'single'} + selected={selectedDate} + onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} /> + <span>~</span> + <DatePicker mode={'single'} + selected={selectedDate} + onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} /> + </div> + </SearchFormLeft> + <SearchFormRight> + <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 mr-2" size="sm" >조회</Button> + <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 mr-2" size="sm" >파일 다운로드</Button> + <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" >삭제</Button> + </SearchFormRight> + </SearchDiv> + <ListDiv className="mt-4"> + <UiTable headName='사업정보 등록 현황' tableData={tableData} headlist={tableHeadlist} pageSize={20} total={20} children={undefined} cellClick={() => { }} onPageChange={function (page: number): void { + throw new Error('Function not implemented.') + }}></UiTable> + </ListDiv> + <ListDiv className="mt-4"> + <FileUploadForm title='노후 하수관로 정비사업 주진현황 등록'/> + </ListDiv> + </ContentsDiv> + </MainDiv> + ) +} + +export default Page \ No newline at end of file diff --git a/apps/sn/app/page.tsx b/apps/sn/app/page.tsx index dd54ce3f9..e6811fb42 100644 --- a/apps/sn/app/page.tsx +++ b/apps/sn/app/page.tsx @@ -4,10 +4,10 @@ import { Button } from "@common/components/ui"; export default function Home() { return ( - <div className="grid grid-cols-12 gap-2"> - <div className="col-span-2"> - <Link href={"/oper/pplines"}><Button>관로시설</Button></Link> - </div> + <div className="flex flex-row gap-4 p-4"> + <Link href={"/oper/pplines"}><Button>관로시설</Button></Link> + <Link href={"/oper/floodPre"}><Button>도시침수 예방사업</Button></Link> + <Link href={"/oper/oldPp"}><Button>노후 하수관로 정비사업</Button></Link> </div> ); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 82f59a6cd..baa723e45 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -140,6 +140,106 @@ importers: specifier: ^5 version: 5.6.3 + apps/sn: + dependencies: + '@common/assets': + specifier: workspace:* + version: link:../../packages/common/assets + '@common/business_components': + specifier: workspace:* + version: link:../../packages/common/business_components + '@common/components': + specifier: workspace:* + version: link:../../packages/common/components + '@frontend-opensource/use-react-hooks': + specifier: ^1.1.4 + version: 1.1.4 + '@hookform/resolvers': + specifier: ^4.1.3 + version: 4.1.3(react-hook-form@7.54.2) + '@radix-ui/react-label': + specifier: ^2.1.2 + version: 2.1.2(@types/react-dom@18.3.5)(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-slot': + specifier: ^1.1.2 + version: 1.1.2(@types/react@18.3.18)(react@18.3.1) + '@tanstack/react-query': + specifier: ^5.67.1 + version: 5.67.1(react@18.3.1) + '@tanstack/react-table': + specifier: ^8.21.2 + version: 8.21.2(react-dom@18.3.1)(react@18.3.1) + axios: + specifier: ^1.8.1 + version: 1.8.1 + chart.js: + specifier: ^4.4.8 + version: 4.4.8 + dayjs: + specifier: ^1.11.13 + version: 1.11.13 + js-cookie: + specifier: ^3.0.5 + version: 3.0.5 + next: + specifier: 15.1.7 + version: 15.1.7(react-dom@18.3.1)(react@18.3.1) + react-chartjs-2: + specifier: ^5.3.0 + version: 5.3.0(chart.js@4.4.8)(react@18.3.1) + react-hook-form: + specifier: ^7.54.2 + version: 7.54.2(react@18.3.1) + tailwindcss-animate: + specifier: ^1.0.7 + version: 1.0.7(tailwindcss@3.4.17) + zod: + specifier: ^3.24.2 + version: 3.24.2 + zustand: + specifier: ^5.0.3 + version: 5.0.3(@types/react@18.3.18)(react@18.3.1) + devDependencies: + '@eslint/eslintrc': + specifier: ^3 + version: 3.3.0 + '@faker-js/faker': + specifier: ^9.5.0 + version: 9.5.0 + '@types/js-cookie': + specifier: ^3.0.6 + version: 3.0.6 + '@types/node': + specifier: ^22.13.1 + version: 22.13.9 + '@types/webpack': + specifier: ^5.28.5 + version: 5.28.5 + eslint: + specifier: ^9 + version: 9.21.0 + eslint-config-next: + specifier: 15.1.7 + version: 15.1.7(eslint@9.21.0)(typescript@5.6.3) + postcss: + specifier: ^8 + version: 8.5.3 + prettier: + specifier: ^3.4.2 + version: 3.5.2 + prettier-plugin-tailwindcss: + specifier: ^0.6.11 + version: 0.6.11(prettier@3.5.2) + steiger: + specifier: ^0.5.5 + version: 0.5.5(typescript@5.6.3) + tailwindcss: + specifier: ^3.4.1 + version: 3.4.17 + typescript: + specifier: ^5 + version: 5.6.3 + apps/wr: dependencies: '@common/business_components': @@ -1320,6 +1420,7 @@ packages: /@faker-js/faker@9.5.0: resolution: {integrity: sha512-3qbjLv+fzuuCg3umxc9/7YjrEXNaKwHgmig949nfyaTx8eL4FAsvFbu+1JcFUj1YAXofhaDn6JdEUBTYuk0Ssw==} engines: {node: '>=18.0.0', npm: '>=9.0.0'} + deprecated: Please update to a newer version dev: true /@feature-sliced/filesystem@2.4.0: @@ -6083,7 +6184,7 @@ packages: resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==} engines: {node: '>= 10.13.0'} dependencies: - '@types/node': 22.13.5 + '@types/node': 22.13.9 merge-stream: 2.0.0 supports-color: 8.1.1 dev: true From 2e1601b87d007df688273d9c4a986d603ee81d54 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 <jschrome782@gmail.com> Date: Thu, 17 Apr 2025 09:08:41 +0900 Subject: [PATCH 27/54] =?UTF-8?q?searchFormLeft=20=EB=B3=80=ED=99=98=20(?= =?UTF-8?q?=EC=9C=A0=EC=97=AD,=ED=96=89=EC=A0=95=20=EA=B5=AC=EB=B6=84?= =?UTF-8?q?=EB=B3=84=20=EA=B2=80=EC=83=89=EB=8B=A8=20=EC=84=B8=ED=8C=85)?= =?UTF-8?q?=20[=EC=B6=94=ED=9B=84=20md=ED=8C=8C=EC=9D=BC=EC=9E=91=EC=84=B1?= =?UTF-8?q?=EC=98=88=EC=A0=95]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/search_form_left/index.tsx | 274 +++++++++++++++++- 1 file changed, 270 insertions(+), 4 deletions(-) diff --git a/packages/common/business_components/src/ui/search_form_left/index.tsx b/packages/common/business_components/src/ui/search_form_left/index.tsx index 950306231..9dcf23eb7 100644 --- a/packages/common/business_components/src/ui/search_form_left/index.tsx +++ b/packages/common/business_components/src/ui/search_form_left/index.tsx @@ -1,11 +1,277 @@ -import React from 'react' +import React, { useState } from 'react'; +import type { SelectDataType } from '../search_input_select'; +import { SelectBox } from '../select'; -function SearchFormLeft(props: {children: React.ReactNode}) { +/** + * 검색 폼 왼쪽 컴포넌트 타입 + * + * @param isShowPart 구분 조회 여부 + * @param children 자식 컴포넌트 + * @param selectSidoData 시도 데이터 + * @param selectSigunData 시군구 데이터 + * @param selectRegionData 유역 데이터 + * @param selectUnitWaterShedData 단위유역 데이터 + * @param selectMiddleRegionData 중권역 데이터 + * @param selectEnvPartData 환경청 데이터 + * @param selectEnvPartSidoData 환경청 시도 데이터 + * @param selectEnvPartSigunData 환경청 시군구 데이터 + * @param setRtnPartValue 부분 값 변경 핸들러 + */ +type SearchFormLeftProps = { + isShowPart?: boolean | undefined; + children: React.ReactNode; + selectSidoData?: SelectDataType[] | []; + selectSigunData?: SelectDataType[] | []; + selectRegionData?: SelectDataType[] | []; + selectUnitWaterShedData?: SelectDataType[] | []; + selectMiddleRegionData?: SelectDataType[] | []; + selectEnvPartData?: EnvPartSelectDataType[] | []; + selectEnvPartSidoData?: SelectDataType[] | []; + selectEnvPartSigunData?: SelectDataType[] | []; + + setRtnPartValue?: (value: string) => void; + setRtnSidoValue?: (value: string) => void; + setRtnSigunValue?: (value: string) => void; + setRtnRegionValue?: (value: string) => void; + setRtnUnitWaterShedValue?: (value: string) => void; + setRtnMiddleRegionValue?: (value: string) => void; + setRtnEnvPartValue?: (value: string) => void; + setRtnEnvPartSidoValue?: (value: string) => void; + setRtnEnvPartSigunValue?: (value: string) => void; +} + +type EnvPartSelectDataType = SelectDataType & { + adstDliStrCd: string, +} + +const selectPartData:SelectDataType[] = [ + { text: "행정별", val: '0' }, + { text: "유역별", val: '01' }, + { text: "환경청별", val: '02' }, +]; + +function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], selectSigunData = [], selectRegionData = [], selectUnitWaterShedData = [], selectMiddleRegionData = [], selectEnvPartData = [], selectEnvPartSidoData = [], selectEnvPartSigunData = [], setRtnPartValue, setRtnSidoValue, setRtnSigunValue, setRtnRegionValue, setRtnUnitWaterShedValue, setRtnMiddleRegionValue, setRtnEnvPartValue, setRtnEnvPartSidoValue, setRtnEnvPartSigunValue }: SearchFormLeftProps) { + const [partValue, setPartValue] = useState<string>('0'); + const [showPart, setShowPart] = useState<string>(''); + const [sidoValue, setSidoValue] = useState<string>('0'); + const [sigunValue, setSigunValue] = useState<string>('0'); + const [regionValue, setRegionValue] = useState<string>('0'); + const [unitWaterShedValue, setUnitWaterShedValue] = useState<string>('0'); + const [middleRegionValue, setMiddleRegionValue] = useState<string>('0'); + const [envPartValue, setEnvPartValue] = useState<string>('0'); + const [envPartSidoValue, setEnvPartSidoValue] = useState<string>('0'); + const [envPartSigunValue, setEnvPartSigunValue] = useState<string>('0'); + + const [filteredSigunData, setFilteredSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]); + const [filteredUnitWaterShedData, setFilteredUnitWaterShedData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]); + const [filteredMiddleRegionData, setFilteredMiddleRegionData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]); + + const [filteredEnvPartData, setFilteredEnvPartData] = useState<EnvPartSelectDataType[]>([{ text: "전체", val: '0', adstDliStrCd:'' }]); + const [filteredEnvPartSidoData, setFilteredEnvPartSidoData] = useState<EnvPartSelectDataType[]>([{ text: "전체", val: '0', adstDliStrCd:'' }]); + const [filteredEnvPartSigunData, setFilteredEnvPartSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]); + + const [filteredEnvPartSigunDataSelected, setFilteredEnvPartSigunDataSelected] = useState<SelectDataType[]>([]); + + // 시군구 세팅 + const initializeSigunData = (sidoCd: string) => { + if (sidoCd === '0') { + setSigunValue('0'); + setFilteredSigunData([{ text: "전체", val: '0' }]); + } else { + const newFilteredData = [ + { text: "전체", val: '0' }, + ...selectSigunData.filter((item: SelectDataType) => item.val.substring(0, 2) === sidoCd) + ]; + setSigunValue('0'); + setFilteredSigunData(newFilteredData); + } + } + + // 단위유역 세팅 + const initializeUnitWaterShedData = (regionCd: string) => { + if(regionCd === '0') { + setUnitWaterShedValue('0'); + setFilteredUnitWaterShedData([{ text: "전체", val: '0' }]); + } else { + const newFilteredData = [ + { text: "전체", val: '0' }, + ...selectUnitWaterShedData.filter((item: SelectDataType) => item.val.substring(0, 1) === regionCd) + ]; + setUnitWaterShedValue('0'); + setFilteredUnitWaterShedData(newFilteredData); + } + } + + // 중권역 세팅 + const initializeMiddleRegionData = (unitWaterShedCd: string) => { + if(unitWaterShedCd === '0') { + setMiddleRegionValue('0'); + setFilteredMiddleRegionData([{ text: "전체", val: '0' }]); + } else { + const newFilteredData = [ + { text: "전체", val: '0' }, + ...selectMiddleRegionData.filter((item: SelectDataType) => item.val.substring(0, 2) === unitWaterShedCd) + ]; + setMiddleRegionValue('0'); + setFilteredMiddleRegionData(newFilteredData); + } + } + + // 환경청 세팅 - 시도 + const initializeCityDataByEnvPartSido = (envPartCd: string) => { + const foundEnvPart = selectEnvPartData.find((item: EnvPartSelectDataType) => item.val === envPartCd); + const cityArray = foundEnvPart?.adstDliStrCd.toString().split('|').join('').split(','); + + // 시군구 데이터 + const envSigunData = selectSigunData.filter((item: SelectDataType) => cityArray?.includes(item.val)); + + // 환경청 시도 데이터 + const sidoArray = [...new Set(envSigunData.map((item: SelectDataType) => item.val.substring(0, 2)))]; + const envSidoData = selectSidoData.filter((item: SelectDataType) => sidoArray?.includes(item.val)); + setFilteredEnvPartSigunDataSelected(envSigunData); + + setFilteredEnvPartSidoData([ + { text: "전체", val: '0', adstDliStrCd:'' }, + ...envSidoData.map((item: SelectDataType) => ({ text: item.text, val: item.val, adstDliStrCd:'' })) + ]); + } + + // 환경청 세팅 - 시군구 + const initializeCityDataByEnvPartSigun = (sidoCd: string) => { + const envSigunData = filteredEnvPartSigunDataSelected.filter((item: SelectDataType) => item.val.substring(0, 2) === sidoCd); + setFilteredEnvPartSigunData([ + { text: "전체", val: '0'}, + ...envSigunData.map((item: SelectDataType) => ({ text: item.text, val: item.val })) + ]); + } + + const onSelectValue = (val: string, type: string) => { + switch(type) { + case 'part': + setPartValue(val); + if (setRtnPartValue) { + setRtnPartValue(val); + } + // 구분 + if(val == '01') { + setShowPart('01'); + initializeMiddleRegionData('0'); + initializeUnitWaterShedData('0'); + } else if(val == '02') { + setShowPart('02'); + setFilteredEnvPartData([ + { text: "전체", val: '0', adstDliStrCd:'' }, + ...selectEnvPartData.filter((item: EnvPartSelectDataType) => item.val !== null && item.adstDliStrCd !== '') + ]); + setEnvPartValue('0'); + onSelectValue(selectEnvPartSidoData[0]?.val || '0', 'envPartSido'); + onSelectValue(selectEnvPartSigunData[0]?.val || '0', 'envPartSigun'); + } else { + setShowPart('0'); + initializeSigunData('0'); + onSelectValue(selectSigunData[0]?.val || '0', 'sigun'); + } + + // 다른 selectbox 전체로 초기화 + onSelectValue(selectSidoData[0]?.val || '0', 'sido'); + onSelectValue(selectSigunData[0]?.val || '0', 'sigun'); + break; + case 'sido': + setSidoValue(val); + if (setRtnSidoValue) { + setRtnSidoValue(val); + } + initializeSigunData(val); + onSelectValue(selectSigunData[0]?.val || '0', 'sigun'); + break; + case 'sigun': + if (setRtnSigunValue) { + setRtnSigunValue(val); + } + setSigunValue(val); + break; + + // 유역 세팅 + case 'region' : + setRegionValue(val); + if (setRtnRegionValue) { + setRtnRegionValue(val); + } + initializeUnitWaterShedData(val); + onSelectValue(selectUnitWaterShedData[0]?.val || '0', 'unitWaterShed'); + break; + case 'unitWaterShed' : + setUnitWaterShedValue(val); + if (setRtnUnitWaterShedValue) { + setRtnUnitWaterShedValue(val); + } + initializeMiddleRegionData(val); + onSelectValue(selectMiddleRegionData[0]?.val || '0', 'middleRegion'); + break; + case 'middleRegion' : + setMiddleRegionValue(val); + if (setRtnMiddleRegionValue) { + setRtnMiddleRegionValue(val); + } + break; + + // 환경청 세팅 + case 'envPart' : + setEnvPartValue(val); + if (setRtnEnvPartValue) { + setRtnEnvPartValue(val); + } + onSelectValue(selectEnvPartSidoData[0]?.val || '0', 'envPartSido'); + onSelectValue(selectEnvPartSigunData[0]?.val || '0', 'envPartSigun'); + initializeCityDataByEnvPartSido(val); + break; + case 'envPartSido' : + setEnvPartSidoValue(val); + if (setRtnEnvPartSidoValue) { + setRtnEnvPartSidoValue(val); + } + onSelectValue(selectEnvPartSigunData[0]?.val || '0', 'envPartSigun'); + initializeCityDataByEnvPartSigun(val); + break; + case 'envPartSigun' : + setEnvPartSigunValue(val); + if (setRtnEnvPartSigunValue) { + setRtnEnvPartSigunValue(val); + } + break; + } + } + return ( + isShowPart ? ( <div className="grid grid-cols-12 gap-4 w-4/5 mx-4"> - {props.children} + <SelectBox className="col-span-3" label={'구분'} selectArray={selectPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'part')} value={partValue} selectClass={undefined}/> + {showPart === '01' ? ( + <> + <SelectBox className="col-span-3" label={'유역'} selectArray={selectRegionData} onSelectValue={(val) => onSelectValue(val.toString(), 'region')} value={regionValue} selectClass={undefined}/> + <SelectBox className="col-span-3" label={'단위유역'} selectArray={filteredUnitWaterShedData} onSelectValue={(val) => onSelectValue(val.toString(), 'unitWaterShed')} value={unitWaterShedValue} selectClass={undefined}/> + <SelectBox className="col-span-3" label={'중권역'} selectArray={filteredMiddleRegionData} onSelectValue={(val) => onSelectValue(val.toString(), 'middleRegion')} value={middleRegionValue} selectClass={undefined}/> + </> + ) : showPart === '02' ? ( + <> + <SelectBox className="col-span-3" label={'환경청'} selectArray={filteredEnvPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPart')} value={envPartValue} selectClass={undefined}/> + <SelectBox className="col-span-3" label={'시도'} selectArray={filteredEnvPartSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSido')} value={envPartSidoValue} selectClass={undefined}/> + <SelectBox className="col-span-3" label={'시군구'} selectArray={filteredEnvPartSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSigun')} value={envPartSigunValue} selectClass={undefined}/> + </> + ) : ( + <> + <SelectBox className="col-span-3" label={'시도'} selectArray={selectSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'sido')} value={sidoValue} selectClass={undefined}/> + <SelectBox className="col-span-3" label={'시군구'} selectArray={filteredSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'sigun')} value={sigunValue} selectClass={undefined}/> + </> + )} + {children} </div> + ) : ( + <div className="grid grid-cols-12 gap-4 w-4/5 mx-4"> + {children} + </div> + ) ) } -export { SearchFormLeft }; \ No newline at end of file +export { SearchFormLeft }; From 68f4734f3b61a0b74d44de28f696011557b907e1 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 <jschrome782@gmail.com> Date: Thu, 17 Apr 2025 10:11:42 +0900 Subject: [PATCH 28/54] =?UTF-8?q?searchFormLeft=20=ED=95=84=EC=9A=94?= =?UTF-8?q?=EC=97=86=EB=8A=94=20=ED=94=84=EB=A1=9C=ED=8D=BC=ED=8B=B0=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/search_form_left/index.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/common/business_components/src/ui/search_form_left/index.tsx b/packages/common/business_components/src/ui/search_form_left/index.tsx index 9dcf23eb7..27b49ed8b 100644 --- a/packages/common/business_components/src/ui/search_form_left/index.tsx +++ b/packages/common/business_components/src/ui/search_form_left/index.tsx @@ -36,8 +36,6 @@ type SearchFormLeftProps = { setRtnUnitWaterShedValue?: (value: string) => void; setRtnMiddleRegionValue?: (value: string) => void; setRtnEnvPartValue?: (value: string) => void; - setRtnEnvPartSidoValue?: (value: string) => void; - setRtnEnvPartSigunValue?: (value: string) => void; } type EnvPartSelectDataType = SelectDataType & { @@ -50,7 +48,7 @@ const selectPartData:SelectDataType[] = [ { text: "환경청별", val: '02' }, ]; -function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], selectSigunData = [], selectRegionData = [], selectUnitWaterShedData = [], selectMiddleRegionData = [], selectEnvPartData = [], selectEnvPartSidoData = [], selectEnvPartSigunData = [], setRtnPartValue, setRtnSidoValue, setRtnSigunValue, setRtnRegionValue, setRtnUnitWaterShedValue, setRtnMiddleRegionValue, setRtnEnvPartValue, setRtnEnvPartSidoValue, setRtnEnvPartSigunValue }: SearchFormLeftProps) { +function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], selectSigunData = [], selectRegionData = [], selectUnitWaterShedData = [], selectMiddleRegionData = [], selectEnvPartData = [], setRtnPartValue, setRtnSidoValue, setRtnSigunValue, setRtnRegionValue, setRtnUnitWaterShedValue, setRtnMiddleRegionValue, setRtnEnvPartValue, setRtnEnvPartSidoValue, setRtnEnvPartSigunValue }: SearchFormLeftProps) { const [partValue, setPartValue] = useState<string>('0'); const [showPart, setShowPart] = useState<string>(''); const [sidoValue, setSidoValue] = useState<string>('0'); @@ -164,8 +162,7 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel ...selectEnvPartData.filter((item: EnvPartSelectDataType) => item.val !== null && item.adstDliStrCd !== '') ]); setEnvPartValue('0'); - onSelectValue(selectEnvPartSidoData[0]?.val || '0', 'envPartSido'); - onSelectValue(selectEnvPartSigunData[0]?.val || '0', 'envPartSigun'); + initializeCityDataByEnvPartSido('0'); } else { setShowPart('0'); initializeSigunData('0'); @@ -221,17 +218,16 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel if (setRtnEnvPartValue) { setRtnEnvPartValue(val); } - onSelectValue(selectEnvPartSidoData[0]?.val || '0', 'envPartSido'); - onSelectValue(selectEnvPartSigunData[0]?.val || '0', 'envPartSigun'); initializeCityDataByEnvPartSido(val); + onSelectValue(filteredEnvPartSidoData[0]?.val || '0', 'envPartSido'); break; case 'envPartSido' : setEnvPartSidoValue(val); if (setRtnEnvPartSidoValue) { setRtnEnvPartSidoValue(val); } - onSelectValue(selectEnvPartSigunData[0]?.val || '0', 'envPartSigun'); initializeCityDataByEnvPartSigun(val); + onSelectValue(filteredEnvPartSigunData[0]?.val || '0', 'envPartSigun'); break; case 'envPartSigun' : setEnvPartSigunValue(val); From d2beda89c8daf97d0705ef2a9011f165e29e30c7 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 <jschrome782@gmail.com> Date: Thu, 17 Apr 2025 10:14:34 +0900 Subject: [PATCH 29/54] =?UTF-8?q?searchFormLeft=20=EC=8B=A4=EC=88=98?= =?UTF-8?q?=EB=A1=9C=20=EB=8D=94=20=EB=B9=A0=EC=A7=84=20=ED=94=84=EB=A1=9C?= =?UTF-8?q?=ED=8D=BC=ED=8B=B0=20=EB=8B=A4=EC=8B=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_components/src/ui/search_form_left/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/common/business_components/src/ui/search_form_left/index.tsx b/packages/common/business_components/src/ui/search_form_left/index.tsx index 27b49ed8b..3292ed936 100644 --- a/packages/common/business_components/src/ui/search_form_left/index.tsx +++ b/packages/common/business_components/src/ui/search_form_left/index.tsx @@ -36,6 +36,8 @@ type SearchFormLeftProps = { setRtnUnitWaterShedValue?: (value: string) => void; setRtnMiddleRegionValue?: (value: string) => void; setRtnEnvPartValue?: (value: string) => void; + setRtnEnvPartSidoValue?: (value: string) => void; + setRtnEnvPartSigunValue?: (value: string) => void; } type EnvPartSelectDataType = SelectDataType & { From c3d2804471df90e4b643ea20ed17eb11b84a3791 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 <jschrome782@gmail.com> Date: Thu, 17 Apr 2025 10:46:40 +0900 Subject: [PATCH 30/54] =?UTF-8?q?searchform=20left=20md=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=20=EC=9E=91=EC=84=B1=20(=EC=B4=88=EC=95=88)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/search_form_left/searchFormLeft.md | 325 ++++++++++++++++++ 1 file changed, 325 insertions(+) create mode 100644 packages/common/business_components/src/ui/search_form_left/searchFormLeft.md diff --git a/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md b/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md new file mode 100644 index 000000000..18b95b13f --- /dev/null +++ b/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md @@ -0,0 +1,325 @@ +## SearchFormLeft 모듈 +#### 검색영역 좌측 모듈로 행정별, 유역별, 환경청을 선택했을 때 검색 영역을 세팅해주고 childnode를 붙여서 출력해주는 모듈 +#### 1. 컴포넌트 호출방법 +```js +import { SearchFormLeft } from "@common/business_components"; +..... +<SearchFormLeft + isShowPart={true} + selectSidoData={selectSidoData} + selectSigunData={selectSigunData} + selectRegionData={selectRegionData} + selectUnitWaterShedData={selectUnitWaterShedData} + selectMiddleRegionData={selectMiddleRegionData} + selectEnvPartData={selectEnvPartData} + selectEnvPartSidoData={selectEnvPartSidoData} + selectEnvPartSigunData={selectEnvPartSigunData} + setRtnPartValue={(value) => { + setPartValue(value); + }} + setRtnSidoValue={(value) => { + setSidoValue(value); + }} + setRtnSigunValue={(value) => { + setSigunValue(value); + }} + setRtnRegionValue={(value) => { + setRegionValue(value); + }} + setRtnUnitWaterShedValue={(value) => { + setUntitWaterShedValue(value); + }} + setRtnMiddleRegionValue={(value) => { + setMiddleRegionValue(value); + }} + setRtnEnvPartValue={(value) => { + setEnvPartValue(value); + }} + setRtnEnvPartSidoValue={(value) => { + setEnvPartSidoValue(value); + }} + setRtnEnvPartSigunValue={(value) => { + setEnvPartSigunValue(value); + }} +> +``` +  ㆍisShowPart : 검색단에서 구분(행정별,유역별,환경청별) 세팅 여부(보일 경우 : Y, 아닐경우 : N 혹은 미첨부) + +  ㆍselectSidoData : 전체 시도 데이터 + +  ㆍselectSigunData : 전체 시군구구 데이터 + +  ㆍselectRegionData : 전체 유역역 데이터 + +  ㆍselectUnitWaterShedData : 전체 단위유역 데이터 + +  ㆍselectMiddleRegionData : 전체 중권역 데이터 + +  ㆍselectEnvPartData : 환경청 전체 데이터 + +  ㆍsetRtnPartValue : 선택한 구분 set함수(조회시 페이지에서 사용) + +  ㆍsetRtnSidoValue : 선택한 시도 set함수(조회시 페이지에서 사용) + +  ㆍsetRtnSigunValue : 선택한 시군구 set함수(조회시 페이지에서 사용) + +  ㆍsetRtnRegionValue : 선택한 유역 set함수(조회시 페이지에서 사용) + +  ㆍsetRtnUnitWaterShedValue : 선택한 단위유역 set함수(조회시 페이지에서 사용) + +  ㆍsetRtnMiddleRegionValue : 선택한 중유역 set함수(조회시 페이지에서 사용) + +  ㆍsetRtnEnvPartValue : 선택한 환경청 set함수(조회시 페이지에서 사용) + +  ㆍsetRtnEnvPartSidoValue : 선택한 환경청의 시도 set함수(조회시 페이지에서 사용) + +  ㆍsetRtnEnvPartSidoValue : 선택한 환경청 시도의 시군구 set함수(조회시 페이지에서 사용) + +#### 2. 세팅방법 +```js +/** + * store - index.js + * ※ 업무파트별로 common/폴더에 스토어를 만들어놓는걸 추천! + * ※ fetch 구문은 각자가 개발 후 return 된 데이터 타입만 맞추면 된다. + */ + +// 시도 API 호출 함수 추가 +const fetchSidoData = async (): Promise<SelectDataType[]> => { + try { + const res = await getFetch('fo', '/addr/city', null); + const data = res.data; + selectSidoData = [ + { text: "전체", val: '0'}, + ...data.map((item: sidoDataType) => ({ + text: item.sido || '', + val: String(item.adstDstrCd) || '' + })) + ]; + return selectSidoData; + } catch (error) { + console.error('시도 데이터를 가져오는데 실패했습니다:', error); + return selectSidoData; + } +}; + +// 시군구 API 호출 함수 추가 +const fetchSigunData = async (): Promise<SelectDataType[]> => { + try { + const res = await getFetch('fo', '/addr/sgg', null); + const data = res.data; + selectSigunData = [ + { text: "전체", val: '0' }, + ...data + .map((item: sigunDataType) => ({ + text: item.gugun || '', + val: String(item.adstDstrCd) || '' + })) + ]; + return selectSigunData; + } catch (error) { + console.error('시군구 데이터를 가져오는데 실패했습니다:', error); + return selectSigunData; + } +}; + +// 권역 API 호출 함수 추가 +const fetchRegionData = async (): Promise<SelectDataType[]> => { + try { + const res = await getFetch('fo', '/addr/sarea', null); + const data = res.data; + return [ + { text: "전체", val: '0'}, + ...data.map((item: regionDataType) => ({ + text: item.rvbsn || '', + val: String(item.rvbsnCd) || '' + })) + ]; + } catch (error) { + console.error('권역 데이터를 가져오는데 실패했습니다:', error); + return selectRegionData; + } +}; + +// 중권역 API 호출 함수 추가 +const fetchMiddleRegionData = async (): Promise<SelectDataType[]> => { + try { + const res = await getFetch('fo', '/addr/midArea', null); + const data = res.data; + return [ + { text: "전체", val: '0' }, + ...data + .map((item: middleRegionDataType) => ({ + text: item.mdmbsn || '', + val: String(item.rvbsnCd) || '' + })) + ]; + } catch (error) { + console.error('중권역 데이터를 가져오는데 실패했습니다:', error); + return selectMiddleRegionData; + } +}; + +// 단위유역 API 호출 함수 추가 +const fetchUnitWaterShedData = async (): Promise<SelectDataType[]> => { + try { + const res = await getFetch('fo', '/addr/largeArea', null); + const data = res.data; + return [ + { text: "전체", val: '0' }, + ...data + .map((item: unitWaterShedDataType) => ({ + text: item.lgbsn || '', + val: String(item.rvbsnCd) || '' + })) + ]; + } catch (error) { + console.error('단위유역 데이터를 가져오는데 실패했습니다:', error); + return selectUnitWaterShedData; + } +}; + +// 환경청 데이터 +const fetchEnvPartData = async (): Promise<envPartSelectDataType[]> => { + try { + const res = await getFetch('fo', '/addr/govArea', null); + const data = res.data; + selectEnvPartData = [ + { text: "전체", val: '0', adstDliStrCd: '' }, + ...data + .map((item: envPartDataType) => ({ + text: item.lclgvrnmntNm || '', + val: String(item.lclgvrnmntCd) || '', + adstDliStrCd: item.adstDliStrCd || '' + })) + ]; + return selectEnvPartData; + } catch (error) { + console.error('환경청 데이터를 가져오는데 실패했습니다:', error); + return selectEnvPartData; + } +}; + +....... + +// 타입 및 state 반환 +export type CommonType = { + Common: { + isInit: boolean; + selectSidoData: SelectDataType[]; + selectSigunData: SelectDataType[]; + selectPartData: SelectDataType[]; + selectUpdownData: SelectDataType[]; + selectOperationData: SelectDataType[]; + selectFacilityPartData: SelectDataType[]; + selectSearchYear: SelectDataType[]; + selectUnitWaterShedData: SelectDataType[]; + selectRegionData: SelectDataType[]; + selectMiddleRegionData: SelectDataType[]; + selectEnvPartSidoData: SelectDataType[]; + selectEnvPartSigunData: SelectDataType[]; + selectFlowTerm: SelectDataType[]; + selectFlowPanel: SelectDataType[]; + selectEnvPartData: envPartSelectDataType[]; + } +} + +export const commonState:CommonType = { + Common: { + isInit: false, + selectSidoData: selectSidoData, + selectSigunData: selectSigunData, + selectPartData: selectPartData, + selectUpdownData: selectUpdownData, + selectOperationData: selectOperationData, + selectFacilityPartData: selectFacilityPartData, + selectSearchYear: selectSearchYear, + selectRegionData: selectRegionData, + selectUnitWaterShedData: selectUnitWaterShedData, + selectMiddleRegionData: selectMiddleRegionData, + selectEnvPartSidoData : selectEnvPartSidoData, + selectEnvPartSigunData : selectEnvPartSigunData, + selectFlowTerm: selectFlowTerm, + selectFlowPanel: selectFlowPanel, + selectEnvPartData : selectEnvPartData, + } +} + +..... + +// action export +export type CommonAction = { + initializeCommonData: () => Promise<void>; +} + +....... + +// reducer 세팅 +export const CommonReducer:(set:any)=>CommonAction=(set: any) => { + return { + // 시도 변경 이벤트 + initializeCommonData: async () => { + const promiseSet = await Promise.all([fetchSidoData(), fetchSigunData(), fetchRegionData(), fetchUnitWaterShedData(), fetchMiddleRegionData(), fetchEnvPartData()]); + const [sidoData, sggData, regionData, unitData, midData, envData] = promiseSet; + set((state: CommonType) => ({ + Common: { + ...state.Common, + selectSidoData: sidoData, + selectSigunData: sggData, + selectRegionData: regionData, + selectMiddleRegionData: midData, + selectUnitWaterShedData: unitData, + selectEnvPartData: envData + } + }) + )}, + } +} +``` +```js +/** + * page.tsx + */ + +....... + +// store에서 액션 호출 (각 페이지 유형별로 세팅) +const { + .... + ,initializeCommonData + .... +} = useFoStore((state) => state); + +....... + +// 데이터 반환 +const { + isInit, + selectPartData, + selectUpdownData, + selectOperationData, + selectFacilityPartData, + selectSidoData, + selectSigunData, + selectRegionData, + selectUnitWaterShedData, + selectMiddleRegionData, + selectEnvPartData, +} = Common; + +....... + +// 페이지 내에서 사용할 수 있게 state 설정 +const [partValue, setPartValue] = useState<string>("0"); +const [sidoValue, setSidoValue] = useState<string>("0"); +const [sigunValue, setSigunValue] = useState<string>("0"); +const [regionValue, setRegionValue] = useState<string>("0"); +const [untitWaterShedValue, setUntitWaterShedValue] = useState<string>("0"); +const [middleRegionValue, setMiddleRegionValue] = useState<string>("0"); +const [envPartValue, setEnvPartValue] = useState<string>("0"); +const [envPartSidoValue, setEnvPartSidoValue] = useState<string>("0"); +const [envPartSigunValue, setEnvPartSigunValue] = useState<string>("0"); + +<!-- 컴포넌트 호출 --> +``` + + From 00548eb914a1874bec09d08826b9fd4dac8a0f83 Mon Sep 17 00:00:00 2001 From: truthwing <truthplumage@gmail.com> Date: Thu, 17 Apr 2025 11:35:35 +0900 Subject: [PATCH 31/54] =?UTF-8?q?search=20=ED=8F=BC=20=ED=98=95=ED=83=9C?= =?UTF-8?q?=20=EC=88=98=EC=A0=95.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/dialog_ui/index.tsx | 3 +-- .../src/ui/search_form/index.tsx | 2 +- .../src/ui/search_form_left/index.tsx | 4 ++-- .../src/ui/search_form_right/index.tsx | 6 +++--- .../src/ui/search_input/index.tsx | 6 +++--- .../src/ui/search_input_select/index.tsx | 10 +++++----- .../src/ui/select/index.tsx | 4 ++-- .../src/ui/select/lib/selectBox.tsx | 20 ++++++------------- .../src/ui/table/index.tsx | 2 +- 9 files changed, 24 insertions(+), 33 deletions(-) diff --git a/packages/common/business_components/src/ui/dialog_ui/index.tsx b/packages/common/business_components/src/ui/dialog_ui/index.tsx index 0f14c211e..b9e341279 100644 --- a/packages/common/business_components/src/ui/dialog_ui/index.tsx +++ b/packages/common/business_components/src/ui/dialog_ui/index.tsx @@ -1,5 +1,4 @@ -import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTrigger } from "@common/components"; -import { useState } from "react"; +import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader } from "@common/components"; type ModalType = { bodyClass: string; diff --git a/packages/common/business_components/src/ui/search_form/index.tsx b/packages/common/business_components/src/ui/search_form/index.tsx index 3bcd94171..b7588903c 100644 --- a/packages/common/business_components/src/ui/search_form/index.tsx +++ b/packages/common/business_components/src/ui/search_form/index.tsx @@ -1,7 +1,7 @@ function SearchDiv ({children}:{ children: React.ReactNode; }) { return ( <div className="flex card card-border !mt-6"> - {children} + {children} </div> ) } diff --git a/packages/common/business_components/src/ui/search_form_left/index.tsx b/packages/common/business_components/src/ui/search_form_left/index.tsx index 3292ed936..91aaf2201 100644 --- a/packages/common/business_components/src/ui/search_form_left/index.tsx +++ b/packages/common/business_components/src/ui/search_form_left/index.tsx @@ -242,7 +242,7 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel return ( isShowPart ? ( - <div className="grid grid-cols-12 gap-4 w-4/5 mx-4"> + <div className="grid grid-cols-12 gap-5 w-11/12 m-4"> <SelectBox className="col-span-3" label={'구분'} selectArray={selectPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'part')} value={partValue} selectClass={undefined}/> {showPart === '01' ? ( <> @@ -265,7 +265,7 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel {children} </div> ) : ( - <div className="grid grid-cols-12 gap-4 w-4/5 mx-4"> + <div className="grid grid-cols-12 gap-5 w-5/6 m-4"> {children} </div> ) diff --git a/packages/common/business_components/src/ui/search_form_right/index.tsx b/packages/common/business_components/src/ui/search_form_right/index.tsx index 676b90849..fda7eefd6 100644 --- a/packages/common/business_components/src/ui/search_form_right/index.tsx +++ b/packages/common/business_components/src/ui/search_form_right/index.tsx @@ -1,11 +1,11 @@ -import React from 'react' +import React from 'react'; function SearchFormRight(props: {children: React.ReactNode}) { return ( - <div className="w-1/5 mx-5 flex items-center justify-end space-x-2"> + <div className="w-1/12 mx-5 flex flex-col items-center justify-center space-x-2"> {props.children} </div> ) } -export { SearchFormRight }; \ No newline at end of file +export { SearchFormRight }; diff --git a/packages/common/business_components/src/ui/search_input/index.tsx b/packages/common/business_components/src/ui/search_input/index.tsx index bd634aa21..06ffce4ff 100644 --- a/packages/common/business_components/src/ui/search_input/index.tsx +++ b/packages/common/business_components/src/ui/search_input/index.tsx @@ -21,9 +21,9 @@ const SearchInput = React.forwardRef<HTMLInputElement, {className:string, label: return ( <div className={className+" flex items-center"} > - {label && <Label className="w-20 text-base text-gray-600">{label}</Label>} - <Input className="flex-1 ml-8 w-3/4 h-10 border rounded" value={textValue} onChange={changeText} onKeyUp={keyUp}></Input> + {label && <Label className="w-20 text-xl text-gray-600">{label}</Label>} + <Input className="!text-lg flex-1 w-3/4 h-14 border rounded" value={textValue} onChange={changeText} onKeyUp={keyUp}></Input> </div> ) }); -export { SearchInput }; \ No newline at end of file +export { SearchInput }; diff --git a/packages/common/business_components/src/ui/search_input_select/index.tsx b/packages/common/business_components/src/ui/search_input_select/index.tsx index 5a386b77b..bf8787356 100644 --- a/packages/common/business_components/src/ui/search_input_select/index.tsx +++ b/packages/common/business_components/src/ui/search_input_select/index.tsx @@ -24,12 +24,12 @@ const SearchInputSelect = React.forwardRef<HTMLInputElement, {className:string, return ( <div className={className+" flex items-center"} > - {label && <Label className="w-20 text-base text-gray-600">{label}</Label>} + {label && <Label className="w-20 text-xl text-gray-600">{label}</Label>} <div className="flex w-full items-center"> - <Input className="w-2/3 text-lg h-10 p-2 border rounded" value={textValue} onChange={changeText} /> + <Input className="w-2/3 text-xl h-14 p-2 border rounded" value={textValue} onChange={changeText} /> <Select onValueChange={onSelectValue} value={selectValue}> - <SelectTrigger className="ml-2 w-1/3 text-lg" > - <SelectValue placeholder={selectData?.[0]?.text ?? ""} /> + <SelectTrigger className="ml-2 w-1/3" > + <SelectValue placeholder={selectData?.[0]?.text ?? ""} /> </SelectTrigger> {/* <SelectContent ref={refs ? (refs as unknown as RefType)?.selectValue : null}> */} <SelectContent > @@ -42,4 +42,4 @@ const SearchInputSelect = React.forwardRef<HTMLInputElement, {className:string, </div> ) }); -export { SearchInputSelect }; \ No newline at end of file +export { SearchInputSelect }; diff --git a/packages/common/business_components/src/ui/select/index.tsx b/packages/common/business_components/src/ui/select/index.tsx index b03932256..ee6296677 100644 --- a/packages/common/business_components/src/ui/select/index.tsx +++ b/packages/common/business_components/src/ui/select/index.tsx @@ -23,7 +23,7 @@ const SelectBox = React.forwardRef< return ( <div className={className+" flex items-center"} ref={ref}> - {label && <Label className="w-20 text-base text-gray-600">{label}</Label>} + {label && <Label className="w-20 text-xl text-gray-600">{label}</Label>} <Select onValueChange={onSelectValue} value={value !== undefined ? String(value) : undefined}> <SelectTrigger className={selectClass?selectClass:"flex-1 p-2 border rounded"}> <SelectValue placeholder={placeHolder} /> @@ -38,4 +38,4 @@ const SelectBox = React.forwardRef< ) }) -export { SelectBox }; \ No newline at end of file +export { SelectBox }; diff --git a/packages/common/business_components/src/ui/select/lib/selectBox.tsx b/packages/common/business_components/src/ui/select/lib/selectBox.tsx index 08e3abed3..cc4bac4d1 100644 --- a/packages/common/business_components/src/ui/select/lib/selectBox.tsx +++ b/packages/common/business_components/src/ui/select/lib/selectBox.tsx @@ -1,6 +1,6 @@ -import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown, ChevronUp } from "lucide-react" +import * as React from "react" import { cn } from "../../../lib/utils" @@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef< <SelectPrimitive.Trigger ref={ref} className={cn( - "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", + "flex h-13 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-xl ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className )} {...props} @@ -103,7 +103,7 @@ const SelectLabel = React.forwardRef< >(({ className, ...props }, ref) => ( <SelectPrimitive.Label ref={ref} - className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} + className={cn("py-1.5 pl-8 pr-2 text-lg font-semibold", className)} {...props} /> )) @@ -116,7 +116,7 @@ const SelectItem = React.forwardRef< <SelectPrimitive.Item ref={ref} className={cn( - "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", + "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-lg outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className )} {...props} @@ -145,14 +145,6 @@ const SelectSeparator = React.forwardRef< SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { - Select, - SelectGroup, - SelectValue, - SelectTrigger, - SelectContent, - SelectLabel, - SelectItem, - SelectSeparator, - SelectScrollUpButton, - SelectScrollDownButton, + Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } + diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index c8ba18765..f6da92d7f 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -51,7 +51,7 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa </div> : <></>} <div className={`card !m-[1.2rem] !p-0r ${className}`}> <Table variant="secondary"> - <TableHeader > + <TableHeader className="font-bold"> {children ? <>{children}</> : <TableRow> {headlist?.map((head) => ( <TableHead key={head.id}>{head.title}</TableHead> From dd4a4e1ec8796286268dc49e353fbcb33d9f1ee2 Mon Sep 17 00:00:00 2001 From: truthwing <truthplumage@gmail.com> Date: Thu, 17 Apr 2025 13:08:51 +0900 Subject: [PATCH 32/54] =?UTF-8?q?=EC=A0=84=EB=B6=80=EB=8B=A4=20=EC=99=B8?= =?UTF-8?q?=EB=B6=80=20=EB=B2=84=ED=8A=BC=EC=9D=B8=20=EA=B2=BD=EC=9A=B0?= =?UTF-8?q?=EB=8F=84=20=EC=B2=98=EB=A6=AC.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_components/src/ui/search_form_left/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/common/business_components/src/ui/search_form_left/index.tsx b/packages/common/business_components/src/ui/search_form_left/index.tsx index 91aaf2201..448f2df04 100644 --- a/packages/common/business_components/src/ui/search_form_left/index.tsx +++ b/packages/common/business_components/src/ui/search_form_left/index.tsx @@ -265,7 +265,7 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel {children} </div> ) : ( - <div className="grid grid-cols-12 gap-5 w-5/6 m-4"> + <div className="grid grid-cols-12 gap-5 w-11/12 m-4"> {children} </div> ) From 67b3ba87886b5e8b91225b8a03e715b9da7ccc60 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 <jschrome782@gmail.com> Date: Thu, 17 Apr 2025 16:56:22 +0900 Subject: [PATCH 33/54] =?UTF-8?q?=ED=97=A4=EB=8D=94=20=ED=83=80=EC=9E=85?= =?UTF-8?q?=EC=9D=B4=20number=EC=9D=BC=20=EA=B2=BD=EC=9A=B0=20=EC=9A=B0?= =?UTF-8?q?=EC=B8=A1=EC=A0=95=EB=A0=AC=20=EB=B0=8F=20=EC=84=B8=EC=9E=90?= =?UTF-8?q?=EB=A6=AC=EC=88=98=20=EB=81=8A=EC=96=B4=EC=A3=BC=EB=8A=94=20?= =?UTF-8?q?=EA=B1=B0=20=EA=B0=9C=EB=B0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/common/business_components/src/ui/table/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index f6da92d7f..994b9a827 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -63,14 +63,14 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa <TableRow key={index + "row"}> {headlist?.map((head) => ( <TableCell - className={`${head.align === 'right' ? 'text-right' : 'text-center'} ${ + className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : typeof el[head.id] === 'number' ? 'text-right' : 'text-center'} ${ cellClick && idx === index ? '!font-[1000] cursor-pointer' : cellClick ? 'cursor-pointer' : '' }`} onClick={() => handleCellClick(index, head.id)} key={head.id + index} > - {String(el[head.id] ?? '')} + {typeof el[head.id] === 'number' ? String(el[head.id]).replace(/\B(?=(\d{3})+(?!\d))/g, ",") : String(el[head.id] ?? '')} </TableCell> ))} </TableRow> From 4e0fef85f36c00f8a77d4dfa9a0c4ac8ba9c6c19 Mon Sep 17 00:00:00 2001 From: JIeunhuh <entks301@naver.com> Date: Fri, 18 Apr 2025 16:06:52 +0900 Subject: [PATCH 34/54] =?UTF-8?q?=EA=B3=B5=ED=86=B5=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=9E=91=EC=97=85=20=EB=B0=8F=20=EB=AA=A8?= =?UTF-8?q?=EC=9D=98=EC=A0=95=EB=B3=B4=EC=84=A4=EC=A0=95/=EA=B4=80?= =?UTF-8?q?=EB=A7=9D=EB=8F=84=20=EB=93=B1=EB=A1=9D=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/components/ui/contentLayout.tsx | 18 ++ .../components/{ => ui}/fileUploadForm.tsx | 0 apps/sn/app/ii/mock/page.tsx | 214 ++++++++++++++++++ apps/sn/app/ii/observe/page.tsx | 155 +++++++++++++ apps/sn/app/oper/floodPre/page.tsx | 10 +- apps/sn/app/oper/oldPp/page.tsx | 10 +- 6 files changed, 395 insertions(+), 12 deletions(-) create mode 100644 apps/sn/app/components/ui/contentLayout.tsx rename apps/sn/app/components/{ => ui}/fileUploadForm.tsx (100%) create mode 100644 apps/sn/app/ii/mock/page.tsx create mode 100644 apps/sn/app/ii/observe/page.tsx diff --git a/apps/sn/app/components/ui/contentLayout.tsx b/apps/sn/app/components/ui/contentLayout.tsx new file mode 100644 index 000000000..738e26b16 --- /dev/null +++ b/apps/sn/app/components/ui/contentLayout.tsx @@ -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 \ No newline at end of file diff --git a/apps/sn/app/components/fileUploadForm.tsx b/apps/sn/app/components/ui/fileUploadForm.tsx similarity index 100% rename from apps/sn/app/components/fileUploadForm.tsx rename to apps/sn/app/components/ui/fileUploadForm.tsx diff --git a/apps/sn/app/ii/mock/page.tsx b/apps/sn/app/ii/mock/page.tsx new file mode 100644 index 000000000..530e2049e --- /dev/null +++ b/apps/sn/app/ii/mock/page.tsx @@ -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> + ) +} diff --git a/apps/sn/app/ii/observe/page.tsx b/apps/sn/app/ii/observe/page.tsx new file mode 100644 index 000000000..55379f04e --- /dev/null +++ b/apps/sn/app/ii/observe/page.tsx @@ -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> + ) +} diff --git a/apps/sn/app/oper/floodPre/page.tsx b/apps/sn/app/oper/floodPre/page.tsx index 79ef43f76..f24a0b274 100644 --- a/apps/sn/app/oper/floodPre/page.tsx +++ b/apps/sn/app/oper/floodPre/page.tsx @@ -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> ) } diff --git a/apps/sn/app/oper/oldPp/page.tsx b/apps/sn/app/oper/oldPp/page.tsx index cc0e00aeb..42b2a3e59 100644 --- a/apps/sn/app/oper/oldPp/page.tsx +++ b/apps/sn/app/oper/oldPp/page.tsx @@ -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> ) } From e79348ea11646de81a7a726f917ed212d674fc57 Mon Sep 17 00:00:00 2001 From: JIeunhuh <entks301@naver.com> Date: Fri, 18 Apr 2025 16:17:26 +0900 Subject: [PATCH 35/54] =?UTF-8?q?=EC=A1=B0=ED=9A=8C=20=EB=B0=95=EC=8A=A4?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/ii/mock/page.tsx | 13 ++++++++++++- apps/sn/app/ii/observe/page.tsx | 11 +++++++---- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/apps/sn/app/ii/mock/page.tsx b/apps/sn/app/ii/mock/page.tsx index 530e2049e..119def875 100644 --- a/apps/sn/app/ii/mock/page.tsx +++ b/apps/sn/app/ii/mock/page.tsx @@ -3,7 +3,7 @@ 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 { 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" @@ -92,6 +92,17 @@ 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> diff --git a/apps/sn/app/ii/observe/page.tsx b/apps/sn/app/ii/observe/page.tsx index 55379f04e..f35e4a4dc 100644 --- a/apps/sn/app/ii/observe/page.tsx +++ b/apps/sn/app/ii/observe/page.tsx @@ -48,11 +48,14 @@ 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> - <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]' /> + <Button>조회</Button> </SearchFormRight> </SearchDiv> <ListDiv> From 4a6681fe3a645bb8b2f26422071ae0caa93f2ce5 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 <jschrome782@gmail.com> Date: Fri, 18 Apr 2025 17:01:15 +0900 Subject: [PATCH 36/54] =?UTF-8?q?=EA=B2=80=EC=83=89=EC=98=81=EC=97=AD=20?= =?UTF-8?q?=EC=B4=88=EA=B8=B0=ED=99=94=EA=B0=80=20=EC=95=88=EB=90=98?= =?UTF-8?q?=EB=8A=94=20=EB=AC=B8=EC=A0=9C=EB=A1=9C=20=EC=9E=AC=EB=B0=B0?= =?UTF-8?q?=ED=8F=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/search_form_left/index.tsx | 43 +++++++++++++++++-- 1 file changed, 40 insertions(+), 3 deletions(-) diff --git a/packages/common/business_components/src/ui/search_form_left/index.tsx b/packages/common/business_components/src/ui/search_form_left/index.tsx index 448f2df04..de1a6773e 100644 --- a/packages/common/business_components/src/ui/search_form_left/index.tsx +++ b/packages/common/business_components/src/ui/search_form_left/index.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import type { SelectDataType } from '../search_input_select'; import { SelectBox } from '../select'; @@ -38,6 +38,7 @@ type SearchFormLeftProps = { setRtnEnvPartValue?: (value: string) => void; setRtnEnvPartSidoValue?: (value: string) => void; setRtnEnvPartSigunValue?: (value: string) => void; + resetTrigger?: boolean; } type EnvPartSelectDataType = SelectDataType & { @@ -50,7 +51,7 @@ const selectPartData:SelectDataType[] = [ { text: "환경청별", val: '02' }, ]; -function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], selectSigunData = [], selectRegionData = [], selectUnitWaterShedData = [], selectMiddleRegionData = [], selectEnvPartData = [], setRtnPartValue, setRtnSidoValue, setRtnSigunValue, setRtnRegionValue, setRtnUnitWaterShedValue, setRtnMiddleRegionValue, setRtnEnvPartValue, setRtnEnvPartSidoValue, setRtnEnvPartSigunValue }: SearchFormLeftProps) { +function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], selectSigunData = [], selectRegionData = [], selectUnitWaterShedData = [], selectMiddleRegionData = [], selectEnvPartData = [], setRtnPartValue, setRtnSidoValue, setRtnSigunValue, setRtnRegionValue, setRtnUnitWaterShedValue, setRtnMiddleRegionValue, setRtnEnvPartValue, setRtnEnvPartSidoValue, setRtnEnvPartSigunValue, resetTrigger = false }: SearchFormLeftProps) { const [partValue, setPartValue] = useState<string>('0'); const [showPart, setShowPart] = useState<string>(''); const [sidoValue, setSidoValue] = useState<string>('0'); @@ -239,7 +240,43 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel break; } } - + + // 리셋 함수 + const resetAllValues = () => { + setPartValue('0'); + setShowPart(''); + setSidoValue('0'); + setSigunValue('0'); + setRegionValue('0'); + setUnitWaterShedValue('0'); + setMiddleRegionValue('0'); + setEnvPartValue('0'); + setEnvPartSidoValue('0'); + setEnvPartSigunValue('0'); + + setFilteredSigunData([{ text: "전체", val: '0' }]); + setFilteredUnitWaterShedData([{ text: "전체", val: '0' }]); + setFilteredMiddleRegionData([{ text: "전체", val: '0' }]); + setFilteredEnvPartData([{ text: "전체", val: '0', adstDliStrCd: '' }]); + setFilteredEnvPartSidoData([{ text: "전체", val: '0', adstDliStrCd: '' }]); + setFilteredEnvPartSigunData([{ text: "전체", val: '0' }]); + + if (setRtnPartValue) setRtnPartValue('0'); + if (setRtnSidoValue) setRtnSidoValue('0'); + if (setRtnSigunValue) setRtnSigunValue('0'); + if (setRtnRegionValue) setRtnRegionValue('0'); + if (setRtnUnitWaterShedValue) setRtnUnitWaterShedValue('0'); + if (setRtnMiddleRegionValue) setRtnMiddleRegionValue('0'); + if (setRtnEnvPartValue) setRtnEnvPartValue('0'); + if (setRtnEnvPartSidoValue) setRtnEnvPartSidoValue('0'); + if (setRtnEnvPartSigunValue) setRtnEnvPartSigunValue('0'); + }; + + // 리셋 트리거 변경 감지 + useEffect(() => { + resetAllValues(); + }, [resetTrigger]); + return ( isShowPart ? ( <div className="grid grid-cols-12 gap-5 w-11/12 m-4"> From eeea80f712b6365bb284088876cf7c4ff52383b6 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 <jschrome782@gmail.com> Date: Fri, 18 Apr 2025 17:40:20 +0900 Subject: [PATCH 37/54] searchformleft md v1 --- .../src/ui/search_form_left/searchFormLeft.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md b/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md index 18b95b13f..6083341ff 100644 --- a/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md +++ b/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md @@ -3,7 +3,22 @@ #### 1. 컴포넌트 호출방법 ```js import { SearchFormLeft } from "@common/business_components"; + ..... + +// state 지정 +const [partValue, setPartValue] = useState<string>("0"); +const [sidoValue, setSidoValue] = useState<string>("0"); +const [sigunValue, setSigunValue] = useState<string>("0"); +const [regionValue, setRegionValue] = useState<string>("0"); +const [untitWaterShedValue, setUntitWaterShedValue] = useState<string>("0"); +const [middleRegionValue, setMiddleRegionValue] = useState<string>("0"); +const [envPartValue, setEnvPartValue] = useState<string>("0"); +const [envPartSidoValue, setEnvPartSidoValue] = useState<string>("0"); +const [envPartSigunValue, setEnvPartSigunValue] = useState<string>("0"); + +..... + <SearchFormLeft isShowPart={true} selectSidoData={selectSidoData} From d61962996c9f9d9cb1fc7ddc22bd005ba0a3aa0a Mon Sep 17 00:00:00 2001 From: JIeunhuh <entks301@naver.com> Date: Mon, 21 Apr 2025 13:29:07 +0900 Subject: [PATCH 38/54] =?UTF-8?q?=EA=B3=B5=ED=86=B5=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=EB=A1=9C=20=EB=93=B1=EB=A1=9D=20=ED=9B=84=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EA=B5=AC=ED=98=84(i/i=20=EB=B6=84=EC=84=9D=20>>=20?= =?UTF-8?q?=EA=B8=B0=EC=B4=88=EC=A0=95=EB=B3=B4=20=EC=84=A4=EC=A0=95)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/ii/BaseLayout.tsx | 91 +++++++++ apps/sn/app/ii/baseinfo/mock/page.tsx | 225 +++++++++++++++++++++++ apps/sn/app/ii/baseinfo/observe/page.tsx | 114 ++++++++++++ apps/sn/app/ii/baseinfo/polygon/page.tsx | 96 ++++++++++ apps/sn/app/ii/baseinfo/regist/page.tsx | 99 ++++++++++ 5 files changed, 625 insertions(+) create mode 100644 apps/sn/app/ii/BaseLayout.tsx create mode 100644 apps/sn/app/ii/baseinfo/mock/page.tsx create mode 100644 apps/sn/app/ii/baseinfo/observe/page.tsx create mode 100644 apps/sn/app/ii/baseinfo/polygon/page.tsx create mode 100644 apps/sn/app/ii/baseinfo/regist/page.tsx 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 ( + <ContentLayout title={titleName.mainTitle}> + <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">{titleName.firstCardTitle}</h3> + </div> + <Form {...form}> + <form onSubmit={form.handleSubmit(onSubmitEvent)}> + <div className="card !m-[1.2rem]"> + {/* 폼 정보 입력 칸 */} + {children} + <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">{titleName.secondCardTitle}</h3> + <div> + <Button className="!mx-[1.2rem]">삭제</Button> + {/* 그래프 있을 시 */} + {graphBtn ? <Button className="!mr-[1.2rem]">그래프</Button> : null} + </div> + </div> + <UiTable + headName='' + headlist={tableInfoData.headList} + tableData={tableInfoData.tableData} + total={0} + pageSize={10} + children={undefined} + cellClick={(e) => { tableInfoData.cellClickFunc(e) }} + onPageChange={(e) => { tableInfoData.onPageChangeFunc(e) }} + /> + </ListDiv> + </ContentLayout> + ) +} + +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<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="모의정보 설정"> + <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={() => { }} + /> + </ListDiv> + </ContentLayout> + ) +} 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<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 ( + <BaseLayout titleName={{mainTitle: "관망도 등록",firstCardTitle: "SWMM5 파일 업로드",secondCardTitle: "SWMM 파일 업로드현황"}} form={form} onSubmitEvent={()=>{}} graphBtn={false} tableInfoData={{headList: rtxNmHeadlist, tableData: rtxNmDataList, 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 }) => ( + <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">○ 입력일</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> + </BaseLayout> + ) +} 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<z.infer<typeof formSchema>>({ + 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 ( + <BaseLayout titleName={{ mainTitle: '티센 폴리곤 등록', firstCardTitle: '맨홀별 티센 폴리곤(shape파일) 업로드', secondCardTitle: '수용가-맨홀 매칭 파일 업로드 현황' }} form={form} onSubmitEvent={() => { }} graphBtn={false} tableInfoData={{ headList:rtxNmHeadlist, tableData:rtxNmDataList, 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={region} onSelectValue={() => { } } selectClass={undefined} className='w-[150px]'/> + )} + /> + </div> + + <div className="grid grid-cols-[120px_1fr] items-center"> + <div className="text-xl font-medium">○ 입력일</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> + </BaseLayout> + ) +} + +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<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' } + ] + + return ( + <BaseLayout titleName={{ mainTitle: "수용가-맨홀 등록", firstCardTitle: "수용가-맨홀 매칭 Shape파일 업로드", secondCardTitle: "수용가-맨홀 매칭 Shape파일 업로드 현황" }} form={form} onSubmitEvent={onSubmit} graphBtn={false} tableInfoData={{ + headList: rtxNmHeadlist, tableData: rtxNmDataList, 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 }) => ( + <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">○ 입력일</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> + </BaseLayout> + ) +} + +export default RegistForm \ No newline at end of file From 0ff24d8eafc38655a3b8c3aab9e506407a9fa7d7 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 <jschrome782@gmail.com> Date: Mon, 21 Apr 2025 13:58:31 +0900 Subject: [PATCH 39/54] =?UTF-8?q?=EA=B3=B5=ED=86=B5=EA=B2=80=EC=83=89?= =?UTF-8?q?=EB=8B=A8=20=EC=98=81=EC=97=AD=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_components/src/ui/search_form_left/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/common/business_components/src/ui/search_form_left/index.tsx b/packages/common/business_components/src/ui/search_form_left/index.tsx index de1a6773e..e40ec3825 100644 --- a/packages/common/business_components/src/ui/search_form_left/index.tsx +++ b/packages/common/business_components/src/ui/search_form_left/index.tsx @@ -274,8 +274,10 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel // 리셋 트리거 변경 감지 useEffect(() => { - resetAllValues(); - }, [resetTrigger]); + if (resetTrigger) { + resetAllValues(); + } + }, [resetAllValues, resetTrigger]); return ( isShowPart ? ( From 32b68df7f3adaa29ba29eda879f1eb5af0f25c08 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 <jschrome782@gmail.com> Date: Mon, 21 Apr 2025 14:24:02 +0900 Subject: [PATCH 40/54] =?UTF-8?q?=EC=97=91=EC=85=80=20=EB=8B=A4=EC=9A=B4?= =?UTF-8?q?=EB=A1=9C=EB=93=9C=20business=5Fcompo=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/business_components/package.json | 1 + .../src/ui/excel_download/index.tsx | 16 +++++ .../business_components/src/ui/index.ts | 3 +- pnpm-lock.yaml | 65 ++++++++++++++++++- 4 files changed, 83 insertions(+), 2 deletions(-) create mode 100644 packages/common/business_components/src/ui/excel_download/index.tsx diff --git a/packages/common/business_components/package.json b/packages/common/business_components/package.json index 5120980c2..1f02a708e 100644 --- a/packages/common/business_components/package.json +++ b/packages/common/business_components/package.json @@ -42,6 +42,7 @@ "recharts": "^2.15.1", "sonner": "^2.0.1", "tailwind-merge": "^3.0.1", + "xlsx": "^0.18.5", "zod": "^3.24.2" }, "devDependencies": { diff --git a/packages/common/business_components/src/ui/excel_download/index.tsx b/packages/common/business_components/src/ui/excel_download/index.tsx new file mode 100644 index 000000000..d1370b95c --- /dev/null +++ b/packages/common/business_components/src/ui/excel_download/index.tsx @@ -0,0 +1,16 @@ +import * as XLSX from 'xlsx'; + +type ExcelDownloadProps = { + data : JSON | JSON[]; + fileName : string; + sheetNameArray : string[]; +} + +export const downloadExcel = ({ data, fileName = new Date().getTime().toString()+'.xlsx', sheetNameArray = ["Sheet1"] }: ExcelDownloadProps) => { + const worksheet = XLSX.utils.json_to_sheet(Array.isArray(data) ? data : [data]); + const workbook = XLSX.utils.book_new(); + XLSX.utils.book_append_sheet(workbook, worksheet, sheetNameArray[0]); + //let buffer = XLSX.write(workbook, { bookType: "xlsx", type: "buffer" }); + //XLSX.write(workbook, { bookType: "xlsx", type: "binary" }); + XLSX.writeFile(workbook, fileName+'.xlsx'); + }; \ No newline at end of file diff --git a/packages/common/business_components/src/ui/index.ts b/packages/common/business_components/src/ui/index.ts index c3022740d..e2273e8e5 100644 --- a/packages/common/business_components/src/ui/index.ts +++ b/packages/common/business_components/src/ui/index.ts @@ -16,4 +16,5 @@ export * from "./search_form_right"; export * from "./table_div"; export * from "./list_div"; export * from "./tab"; -export * from "./dialog_ui" \ No newline at end of file +export * from "./dialog_ui"; +export * from "./excel_download"; \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 82f59a6cd..62c43bac1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -266,6 +266,9 @@ importers: tailwind-merge: specifier: ^3.0.1 version: 3.0.2 + xlsx: + specifier: ^0.18.5 + version: 0.18.5 zod: specifier: ^3.24.2 version: 3.24.2 @@ -325,7 +328,7 @@ importers: specifier: ^15.14.0 version: 15.15.0 postcss: - specifier: ^8.5.1 + specifier: ^8.5.3 version: 8.5.3 prettier: specifier: ^3.4.2 @@ -3853,6 +3856,11 @@ packages: hasBin: true dev: true + /adler-32@1.3.1: + resolution: {integrity: sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==} + engines: {node: '>=0.8'} + dev: false + /ajv-formats@2.1.1(ajv@8.17.1): resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==} peerDependencies: @@ -4236,6 +4244,14 @@ packages: /caniuse-lite@1.0.30001701: resolution: {integrity: sha512-faRs/AW3jA9nTwmJBSO1PQ6L/EOgsB5HMQQq4iCu5zhPgVVgO/pZRHlmatwijZKetFw8/Pr4q6dEN8sJuq8qTw==} + /cfb@1.2.2: + resolution: {integrity: sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==} + engines: {node: '>=0.8'} + dependencies: + adler-32: 1.3.1 + crc-32: 1.2.2 + dev: false + /chai@5.2.0: resolution: {integrity: sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw==} engines: {node: '>=12'} @@ -4325,6 +4341,11 @@ packages: engines: {node: '>=6'} dev: false + /codepage@1.15.0: + resolution: {integrity: sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==} + engines: {node: '>=0.8'} + dev: false + /color-convert@2.0.1: resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} engines: {node: '>=7.0.0'} @@ -4402,6 +4423,12 @@ packages: typescript: 5.6.3 dev: true + /crc-32@1.2.2: + resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==} + engines: {node: '>=0.8'} + hasBin: true + dev: false + /cross-spawn@7.0.6: resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} engines: {node: '>= 8'} @@ -5516,6 +5543,11 @@ packages: mime-types: 2.1.35 dev: false + /frac@1.1.2: + resolution: {integrity: sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==} + engines: {node: '>=0.8'} + dev: false + /fraction.js@4.3.7: resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} dev: true @@ -7571,6 +7603,13 @@ packages: whatwg-url: 7.1.0 dev: true + /ssf@0.11.2: + resolution: {integrity: sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==} + engines: {node: '>=0.8'} + dependencies: + frac: 1.1.2 + dev: false + /stable-hash@0.0.4: resolution: {integrity: sha512-LjdcbuBeLcdETCrPn9i8AYAZ1eCtu4ECAWtP7UleOiZ9LzVxRzzUZEoZ8zB24nhkQnDWyET0I+3sWokSDS3E7g==} dev: true @@ -8535,11 +8574,21 @@ packages: dependencies: isexe: 2.0.0 + /wmf@1.0.2: + resolution: {integrity: sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==} + engines: {node: '>=0.8'} + dev: false + /word-wrap@1.2.5: resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==} engines: {node: '>=0.10.0'} dev: true + /word@0.3.0: + resolution: {integrity: sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==} + engines: {node: '>=0.8'} + dev: false + /wrap-ansi@7.0.0: resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==} engines: {node: '>=10'} @@ -8569,6 +8618,20 @@ packages: optional: true dev: true + /xlsx@0.18.5: + resolution: {integrity: sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==} + engines: {node: '>=0.8'} + hasBin: true + dependencies: + adler-32: 1.3.1 + cfb: 1.2.2 + codepage: 1.15.0 + crc-32: 1.2.2 + ssf: 0.11.2 + wmf: 1.0.2 + word: 0.3.0 + dev: false + /y18n@5.0.8: resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==} engines: {node: '>=10'} From 5e27300f1437c4182038124986d901119cb39e84 Mon Sep 17 00:00:00 2001 From: JIeunhuh <entks301@naver.com> Date: Mon, 21 Apr 2025 14:27:12 +0900 Subject: [PATCH 41/54] =?UTF-8?q?i/i=20=EB=B6=84=EC=84=9D=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=EB=A7=8C=20=EC=9A=B0=EC=84=A0=EC=99=84?= =?UTF-8?q?=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/ii/BaseLayout.tsx | 2 +- apps/sn/app/ii/ir/irsetting/page.tsx | 109 +++++++++ apps/sn/app/ii/ir/measureDataUpload/page.tsx | 98 ++++++++ apps/sn/app/ii/mock/page.tsx | 225 ------------------- apps/sn/app/ii/observe/page.tsx | 158 ------------- apps/sn/app/ii/rdii/rain/page.tsx | 54 +++++ apps/sn/app/ii/rdii/rdiisetting/page.tsx | 149 ++++++++++++ 7 files changed, 411 insertions(+), 384 deletions(-) create mode 100644 apps/sn/app/ii/ir/irsetting/page.tsx create mode 100644 apps/sn/app/ii/ir/measureDataUpload/page.tsx delete mode 100644 apps/sn/app/ii/mock/page.tsx delete mode 100644 apps/sn/app/ii/observe/page.tsx create mode 100644 apps/sn/app/ii/rdii/rain/page.tsx create mode 100644 apps/sn/app/ii/rdii/rdiisetting/page.tsx diff --git a/apps/sn/app/ii/BaseLayout.tsx b/apps/sn/app/ii/BaseLayout.tsx index fa40d274f..6c0dd52bc 100644 --- a/apps/sn/app/ii/BaseLayout.tsx +++ b/apps/sn/app/ii/BaseLayout.tsx @@ -68,7 +68,7 @@ const BaseLayout = ({ children, titleName, form, onSubmitEvent, graphBtn, tableI <div className="card-header flex items-center justify-between"> <h3 className="text-2xl font-medium">{titleName.secondCardTitle}</h3> <div> - <Button className="!mx-[1.2rem]">삭제</Button> + <Button className="!mr-[1.2rem]">삭제</Button> {/* 그래프 있을 시 */} {graphBtn ? <Button className="!mr-[1.2rem]">그래프</Button> : null} </div> diff --git a/apps/sn/app/ii/ir/irsetting/page.tsx b/apps/sn/app/ii/ir/irsetting/page.tsx new file mode 100644 index 000000000..8eec2a4fa --- /dev/null +++ b/apps/sn/app/ii/ir/irsetting/page.tsx @@ -0,0 +1,109 @@ +'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(), + 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<z.infer<typeof formSchema>>({ + resolver: zodResolver(formSchema), + defaultValues: { + region: "", + suyeonga:0, + 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 ( + <BaseLayout titleName={{ mainTitle: '침입수 산정', firstCardTitle: '침입수산정 기초자료 설정', secondCardTitle: '침입수 산정결과 현황' }} form={form} onSubmitEvent={() => { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, 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={region} onSelectValue={() => { }} selectClass={undefined} className='w-[150px]' /> + )} + /> + </div> + <div className="grid grid-cols-[120px_1fr] items-center"> + <div className="text-xl font-medium">○ 수용가 수</div> + <FormField + control={form.control} + name="suyeonga" + render={({ field }) => ( + <SelectBox label='' selectArray={[]} onSelectValue={() => { }} selectClass={undefined} className='w-[150px]' /> + )} + /> + </div> + <div className="grid grid-cols-[120px_1fr] items-center"> + <div className="text-xl font-medium">○ 상수사용량 정보</div> + <FormField + control={form.control} + name="inputdate" + render={({ field }) => ( + <DatePicker + selected={selectedDate} + onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} + mode={"single"} className='w-[150px]' + /> + )} + /> + </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-[3.2rem] text-center text-xl w-[150px]" + placeholder="" + {...field} + /> + )} + /> + </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> + </BaseLayout> + ) +} + +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 new file mode 100644 index 000000000..a7a461437 --- /dev/null +++ b/apps/sn/app/ii/ir/measureDataUpload/page.tsx @@ -0,0 +1,98 @@ +'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<z.infer<typeof formSchema>>({ + 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 ( + <BaseLayout titleName={{ mainTitle: '측정자료 등록', firstCardTitle: '하수측정자료 업로드', secondCardTitle: '하수측정자료 파일 업로드 현황' }} form={form} onSubmitEvent={() => { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, 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={region} onSelectValue={() => { }} selectClass={undefined} className='w-[150px]' /> + )} + /> + </div> + + <div className="grid grid-cols-[120px_1fr] items-center"> + <div className="text-xl font-medium">○ 입력일</div> + <FormField + control={form.control} + name="inputdate" + render={({ field }) => ( + <DatePicker + selected={selectedDate} + onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} + mode={"single"} className='w-[150px]' + /> + )} + /> + </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-[3.2rem] text-center text-xl w-[150px]" + placeholder="" + {...field} + /> + )} + /> + </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> + </BaseLayout> + ) +} + +export default MeasureDataUpload \ No newline at end of file diff --git a/apps/sn/app/ii/mock/page.tsx b/apps/sn/app/ii/mock/page.tsx deleted file mode 100644 index 119def875..000000000 --- a/apps/sn/app/ii/mock/page.tsx +++ /dev/null @@ -1,225 +0,0 @@ -"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<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="모의정보 설정"> - <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={() => { }} - /> - </ListDiv> - </ContentLayout> - ) -} diff --git a/apps/sn/app/ii/observe/page.tsx b/apps/sn/app/ii/observe/page.tsx deleted file mode 100644 index f35e4a4dc..000000000 --- a/apps/sn/app/ii/observe/page.tsx +++ /dev/null @@ -1,158 +0,0 @@ -"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> - <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">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> - ) -} diff --git a/apps/sn/app/ii/rdii/rain/page.tsx b/apps/sn/app/ii/rdii/rain/page.tsx new file mode 100644 index 000000000..e74560b66 --- /dev/null +++ b/apps/sn/app/ii/rdii/rain/page.tsx @@ -0,0 +1,54 @@ +'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<z.infer<typeof formSchema>>({ + 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 ( + <BaseLayout titleName={{ mainTitle: '강우자료 등록', firstCardTitle: '강우자료 업로드', secondCardTitle: '강우자료 파일 업로드 현황' }} form={form} onSubmitEvent={() => { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, 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 }) => ( + <div className="w-[150px]"> + <Input id="picture" type="file" /> + </div> + )} + /> + </div> + </div> + </BaseLayout> + ) +} + +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 new file mode 100644 index 000000000..16f080c56 --- /dev/null +++ b/apps/sn/app/ii/rdii/rdiisetting/page.tsx @@ -0,0 +1,149 @@ +'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<z.infer<typeof formSchema>>({ + resolver: zodResolver(formSchema), + defaultValues: { + region: "", + meter:"", + suyeonga:0, + inputdate: new Date(), + inpSource:"", + 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 ( + <BaseLayout titleName={{ mainTitle: '침입수 산정', firstCardTitle: '침입수산정 기초자료 설정', secondCardTitle: '침입수 산정결과 현황' }} form={form} onSubmitEvent={() => { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, 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={region} onSelectValue={() => { }} selectClass={undefined} className='w-[150px]' /> + )} + /> + </div> + <div className="grid grid-cols-[120px_1fr] items-center"> + <div className="text-xl font-medium">○ RDII 기여면적(ha)</div> + <FormField + control={form.control} + name="meter" + render={({ field }) => ( + <Input + className="h-[3.2rem] text-center text-xl w-[150px]" + placeholder="" + {...field} + /> + )} + /> + </div> + <div className="grid grid-cols-[120px_1fr] items-center"> + <div className="text-xl font-medium">○ 수용가 수</div> + <FormField + control={form.control} + name="suyeonga" + render={({ field }) => ( + <SelectBox label='' selectArray={[]} onSelectValue={() => { }} selectClass={undefined} className='w-[150px] h-[3.2rem]' /> + )} + /> + </div> + <div className="grid grid-cols-[120px_1fr] items-center"> + <div className="text-xl font-medium">○ 상수사용량 정보</div> + <FormField + control={form.control} + name="inputdate" + render={({ field }) => ( + <DatePicker + selected={selectedDate} + onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} + mode={"single"} className='w-[150px]' + /> + )} + /> + </div> + <div className="grid grid-cols-[120px_1fr] items-center"> + <div className="text-xl font-medium">○ 오수 전환율</div> + <FormField + control={form.control} + name="inpSource" + render={({ field }) => ( + <Input + className="h-[3.2rem] text-center text-xl w-[150px]" + placeholder="" + {...field} + /> + )} + /> + </div> + <div className="grid grid-cols-[120px_1fr] items-center"> + <div className="text-xl font-medium">○ 오수 전환율</div> + <FormField + control={form.control} + name="inpSource" + render={({ field }) => ( + <SelectBox label='' selectArray={[{'text':'매칭(양평).shp','val':'1'}]} onSelectValue={() => { }} selectClass={undefined} className='h-[3.2rem] w-[150px]' /> + )} + /> + </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="inpSource" + render={({ field }) => ( + <div className="w-[150px]"> + <Input id="picture" type="file" /> + </div> + )} + /> + </div> + </div> +</BaseLayout> + ) +} + +export default RdiiSetting \ No newline at end of file From fa46ad678414685be1c1c805bccb934b679b2c29 Mon Sep 17 00:00:00 2001 From: YangJinSoo94 <jschrome782@gmail.com> Date: Mon, 21 Apr 2025 15:04:34 +0900 Subject: [PATCH 42/54] =?UTF-8?q?=EA=B2=80=EC=83=89=EC=98=81=EC=97=AD=20?= =?UTF-8?q?=EC=B4=88=EA=B8=B0=ED=99=94=20=EC=98=A4=EB=A5=98=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_components/src/ui/search_form_left/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/common/business_components/src/ui/search_form_left/index.tsx b/packages/common/business_components/src/ui/search_form_left/index.tsx index e40ec3825..c4c3c1daa 100644 --- a/packages/common/business_components/src/ui/search_form_left/index.tsx +++ b/packages/common/business_components/src/ui/search_form_left/index.tsx @@ -276,8 +276,12 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel useEffect(() => { if (resetTrigger) { resetAllValues(); + // 리셋 후 트리거를 false로 설정 + if (setRtnPartValue) { + setRtnPartValue('0'); + } } - }, [resetAllValues, resetTrigger]); + }, [resetTrigger]); return ( isShowPart ? ( From b9ee38a907a8db7827ac5ea5e516a8c88c70301a Mon Sep 17 00:00:00 2001 From: YangJinSoo94 <jschrome782@gmail.com> Date: Mon, 21 Apr 2025 15:06:47 +0900 Subject: [PATCH 43/54] =?UTF-8?q?=EA=B2=80=EC=83=89=EC=98=81=EC=97=AD=20?= =?UTF-8?q?=EC=B4=88=EA=B8=B0=ED=99=94=20=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../business_components/src/ui/search_form_left/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/common/business_components/src/ui/search_form_left/index.tsx b/packages/common/business_components/src/ui/search_form_left/index.tsx index c4c3c1daa..248e8f625 100644 --- a/packages/common/business_components/src/ui/search_form_left/index.tsx +++ b/packages/common/business_components/src/ui/search_form_left/index.tsx @@ -315,4 +315,4 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel ) } -export { SearchFormLeft }; +export { SearchFormLeft }; \ No newline at end of file From 4233e86dbb4185c1167bcd9210ff986c187a84f1 Mon Sep 17 00:00:00 2001 From: JIeunhuh <entks301@naver.com> Date: Mon, 21 Apr 2025 15:17:58 +0900 Subject: [PATCH 44/54] =?UTF-8?q?=EB=A9=94=EC=9D=B8=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EC=97=90=20=EB=A7=81=ED=81=AC=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/ii/BaseLayout.tsx | 2 +- apps/sn/app/page.tsx | 34 ++++++++++++++++++++++++++++++---- 2 files changed, 31 insertions(+), 5 deletions(-) diff --git a/apps/sn/app/ii/BaseLayout.tsx b/apps/sn/app/ii/BaseLayout.tsx index 6c0dd52bc..2a346ed07 100644 --- a/apps/sn/app/ii/BaseLayout.tsx +++ b/apps/sn/app/ii/BaseLayout.tsx @@ -39,7 +39,7 @@ const BaseLayout = ({ children, titleName, form, onSubmitEvent, graphBtn, tableI <ContentLayout title={titleName.mainTitle}> <SearchDiv> <SearchFormLeft> - <SelectBox className="col-span-3" label='' selectArray={[{ text: '한강 유역청', val: '1' }]} onSelectValue={(val) => { }} selectClass={undefined} /> + <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='' /> diff --git a/apps/sn/app/page.tsx b/apps/sn/app/page.tsx index e6811fb42..0ae1eb678 100644 --- a/apps/sn/app/page.tsx +++ b/apps/sn/app/page.tsx @@ -4,10 +4,36 @@ import { Button } from "@common/components/ui"; export default function Home() { return ( - <div className="flex flex-row gap-4 p-4"> - <Link href={"/oper/pplines"}><Button>관로시설</Button></Link> - <Link href={"/oper/floodPre"}><Button>도시침수 예방사업</Button></Link> - <Link href={"/oper/oldPp"}><Button>노후 하수관로 정비사업</Button></Link> + <div> + <div><h3 className="text-2xl text-bold gap-4 mx-4">운영정보 관리</h3> + <div className="flex flex-row gap-4 p-4"> + <Link href={"/oper/pplines"}><Button>관로시설</Button></Link> + <Link href={"/oper/floodPre"}><Button>도시침수 예방사업</Button></Link> + <Link href={"/oper/oldPp"}><Button>노후 하수관로 정비사업</Button></Link> + </div> + </div> + <div><h3 className="text-2xl text-bold gap-4 mx-4">I/I 분석(기초정보 설정)</h3> + <div className="flex flex-row gap-4 p-4"> + <Link href={"/ii/baseinfo/mock"}><Button>모의정보 설정</Button></Link> + <Link href={"/ii/baseinfo/observe"}><Button>관망도 등록</Button></Link> + <Link href={"/ii/baseinfo/polygon"}><Button>티센 폴리곤 등록</Button></Link> + <Link href={"/ii/baseinfo/regist"}><Button>수용가-맨홀 등록</Button></Link> + </div> + </div> + <div> + <h3 className="text-2xl text-bold gap-4 mx-4">I/I 분석(침입수 분석)</h3> + <div className="flex flex-row gap-4 p-4"> + <Link href={"/ii/ir/measureDataUpload"}><Button>하수측정자료 업로드</Button></Link> + <Link href={"/ii/ir/irsetting"}><Button>침입수 산정</Button></Link> + </div> + </div> + <div> + <h3 className="text-2xl text-bold gap-4 mx-4">I/I 분석(RDII 분석)</h3> + <div className="flex flex-row gap-4 p-4"> + <Link href={"/ii/rdii/rain"}><Button>강우자료 등록</Button></Link> + <Link href={"/ii/rdii/rdiisetting"}><Button>rdii 산정</Button></Link> + </div> + </div> </div> ); } From 84147da3c5f1f5505aa389ee31540c2eed9451ee Mon Sep 17 00:00:00 2001 From: YangJinSoo94 <jschrome782@gmail.com> Date: Mon, 21 Apr 2025 16:24:55 +0900 Subject: [PATCH 45/54] =?UTF-8?q?md=20=ED=8C=8C=EC=9D=BC=20=EC=97=85?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/search_form_left/searchFormLeft.md | 115 ++++++++++++------ 1 file changed, 75 insertions(+), 40 deletions(-) diff --git a/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md b/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md index 6083341ff..04531c27f 100644 --- a/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md +++ b/packages/common/business_components/src/ui/search_form_left/searchFormLeft.md @@ -16,47 +16,28 @@ const [middleRegionValue, setMiddleRegionValue] = useState<string>("0"); const [envPartValue, setEnvPartValue] = useState<string>("0"); const [envPartSidoValue, setEnvPartSidoValue] = useState<string>("0"); const [envPartSigunValue, setEnvPartSigunValue] = useState<string>("0"); - +const [resetTrigger, setResetTrigger] = useState<boolean>(false); ..... -<SearchFormLeft - isShowPart={true} - selectSidoData={selectSidoData} - selectSigunData={selectSigunData} - selectRegionData={selectRegionData} - selectUnitWaterShedData={selectUnitWaterShedData} - selectMiddleRegionData={selectMiddleRegionData} - selectEnvPartData={selectEnvPartData} - selectEnvPartSidoData={selectEnvPartSidoData} - selectEnvPartSigunData={selectEnvPartSigunData} - setRtnPartValue={(value) => { - setPartValue(value); - }} - setRtnSidoValue={(value) => { - setSidoValue(value); - }} - setRtnSigunValue={(value) => { - setSigunValue(value); - }} - setRtnRegionValue={(value) => { - setRegionValue(value); - }} - setRtnUnitWaterShedValue={(value) => { - setUntitWaterShedValue(value); - }} - setRtnMiddleRegionValue={(value) => { - setMiddleRegionValue(value); - }} - setRtnEnvPartValue={(value) => { - setEnvPartValue(value); - }} - setRtnEnvPartSidoValue={(value) => { - setEnvPartSidoValue(value); - }} - setRtnEnvPartSigunValue={(value) => { - setEnvPartSigunValue(value); - }} +<SearchFormLeft isShowPart={true} + selectSidoData={selectSidoData} + selectSigunData={selectSigunData} + selectRegionData={selectRegionData} + selectUnitWaterShedData={selectUnitWaterShedData} + selectMiddleRegionData={selectMiddleRegionData} + selectEnvPartData={selectEnvPartData} + setRtnPartValue={setPartValue} + setRtnSidoValue={setSidoValue} + setRtnSigunValue={setSigunValue} + setRtnRegionValue={setRegionValue} + setRtnUnitWaterShedValue={setUntitWaterShedValue} + setRtnMiddleRegionValue={setMiddleRegionValue} + setRtnEnvPartValue={setEnvPartValue} + setRtnEnvPartSidoValue={setEnvPartSidoValue} + setRtnEnvPartSigunValue={setEnvPartSigunValue} + resetTrigger={resetTrigger} > + ```   ㆍisShowPart : 검색단에서 구분(행정별,유역별,환경청별) 세팅 여부(보일 경우 : Y, 아닐경우 : N 혹은 미첨부) @@ -88,7 +69,11 @@ const [envPartSigunValue, setEnvPartSigunValue] = useState<string>("0");   ㆍsetRtnEnvPartSidoValue : 선택한 환경청의 시도 set함수(조회시 페이지에서 사용) -  ㆍsetRtnEnvPartSidoValue : 선택한 환경청 시도의 시군구 set함수(조회시 페이지에서 사용) +  ㆍsetRtnEnvPartSigunValue : 선택한 환경청 시도의 시군구 set함수(조회시 페이지에서 사용) + +  ㆍresetTrigger : 초기화 trigger 변수 + + #### 2. 세팅방법 ```js @@ -333,8 +318,58 @@ const [middleRegionValue, setMiddleRegionValue] = useState<string>("0"); const [envPartValue, setEnvPartValue] = useState<string>("0"); const [envPartSidoValue, setEnvPartSidoValue] = useState<string>("0"); const [envPartSigunValue, setEnvPartSigunValue] = useState<string>("0"); +const [resetTrigger, setResetTrigger] = useState<boolean>(false); -<!-- 컴포넌트 호출 --> +<!-- 초기화 기능 --> +const resetVal = () => { + console.log('=== 초기화 ==='); + console.log(selectSidoData); + + // SelectBox 초기화 - 각 selectArray의 첫 번째 옵션 값 사용 + const initialPartValue = selectPartData[0]?.val || "0"; + const initialSidoValue = selectSidoData[0]?.val || "0"; + const initialSigunValue = selectSigunData[0]?.val || "0"; + const initialRegionValue = selectRegionData[0]?.val || "0"; + const initialUnitWaterShedValue = selectUnitWaterShedData[0]?.val || "0"; + const initialMiddleRegionValue = selectMiddleRegionData[0]?.val || "0"; + const initialEnvPartValue = selectEnvPartData[0]?.val || "0"; + const initialEnvPartSidoValue = selectEnvPartData[0]?.val || "0"; + const initialEnvPartSigunValue = selectEnvPartData[0]?.val || "0"; + + // 상태값 설정 + setPartValue(initialPartValue); + setSidoValue(initialSidoValue); + setSigunValue(initialSigunValue); + setRegionValue(initialRegionValue); + setUntitWaterShedValue(initialUnitWaterShedValue); + setMiddleRegionValue(initialMiddleRegionValue); + setEnvPartValue(initialEnvPartValue); + setEnvPartSidoValue(initialEnvPartSidoValue); + setEnvPartSigunValue(initialEnvPartSigunValue); + + // 리셋 후 트리거를 false로 설정 + setTimeout(() => { + setResetTrigger(false); + }, 0); + } + +// 조회 함수 +const chkVal = useCallback(() => { + setResetPage(true); + // 조회 funciton + searchFcltyQltyList(1); +}, [searchFcltyQltyList]); + +// 그리드 page 넘어갈 때 필요한 함수 +const handlePageChange = useCallback((page: number) => { + setResetPage(false); + searchFcltyQltyList(page); +}, [searchFcltyQltyList]); + +// 테이블 호출 컴포넌트 +<UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"시설별 수질현황"} tableData={mainList} headlist={upHeadList2} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange}> + <HeadMakeColSpan upHeadList={upHeadList2} layoutNum={layoutNum}/> +</UiTable> ``` From 5f666eb4edbf660a44c3bf81b72515b8641147d3 Mon Sep 17 00:00:00 2001 From: JIeunhuh <entks301@naver.com> Date: Mon, 21 Apr 2025 17:15:56 +0900 Subject: [PATCH 46/54] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/ii/baseinfo/observe/page.tsx | 21 +----- apps/sn/app/ii/ir/irsetting/page.tsx | 64 +++++++++------- apps/sn/app/ii/rdii/rdiisetting/page.tsx | 94 ++++++++++++------------ 3 files changed, 89 insertions(+), 90 deletions(-) diff --git a/apps/sn/app/ii/baseinfo/observe/page.tsx b/apps/sn/app/ii/baseinfo/observe/page.tsx index 86caf198f..16bd24fb2 100644 --- a/apps/sn/app/ii/baseinfo/observe/page.tsx +++ b/apps/sn/app/ii/baseinfo/observe/page.tsx @@ -3,9 +3,8 @@ 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 { 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" @@ -15,7 +14,7 @@ const formSchema = z.object({ 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<z.infer<typeof formSchema>>({ resolver: zodResolver(formSchema), @@ -26,9 +25,6 @@ export default function RTKForm() { } }) const [selectedDate, setSelectedDate] = useState(new Date()) - const onSubmit = (data: z.infer<typeof formSchema>) => { - console.log("✅ 제출 데이터:", data) - } // TODO: 임시 데이터 const rtxNmHeadlist = [ { id: 'no', title: '번호' }, @@ -54,16 +50,7 @@ export default function RTKForm() { 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> + <SelectBox label='' selectArray={region} onSelectValue={()=>{}} selectClass="" className="w-[150px]"/> )} /> </div> diff --git a/apps/sn/app/ii/ir/irsetting/page.tsx b/apps/sn/app/ii/ir/irsetting/page.tsx index 8eec2a4fa..865864d4c 100644 --- a/apps/sn/app/ii/ir/irsetting/page.tsx +++ b/apps/sn/app/ii/ir/irsetting/page.tsx @@ -40,7 +40,7 @@ const IrSetting = () => { const [selectedDate, setSelectedDate] = useState(new Date()) return ( <BaseLayout titleName={{ mainTitle: '침입수 산정', firstCardTitle: '침입수산정 기초자료 설정', secondCardTitle: '침입수 산정결과 현황' }} form={form} onSubmitEvent={() => { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, cellClickFunc: () => { }, onPageChangeFunc: () => { } }}> - <div className="space-y-[1.2rem]"> + <div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-[120px_1fr] items-center"> <div className="text-xl font-medium">○ 처리구역</div> <FormField @@ -51,30 +51,6 @@ const IrSetting = () => { )} /> </div> - <div className="grid grid-cols-[120px_1fr] items-center"> - <div className="text-xl font-medium">○ 수용가 수</div> - <FormField - control={form.control} - name="suyeonga" - render={({ field }) => ( - <SelectBox label='' selectArray={[]} onSelectValue={() => { }} selectClass={undefined} className='w-[150px]' /> - )} - /> - </div> - <div className="grid grid-cols-[120px_1fr] items-center"> - <div className="text-xl font-medium">○ 상수사용량 정보</div> - <FormField - control={form.control} - name="inputdate" - render={({ field }) => ( - <DatePicker - selected={selectedDate} - onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} - mode={"single"} className='w-[150px]' - /> - )} - /> - </div> <div className="grid grid-cols-[120px_1fr] items-center"> <div className="text-xl font-medium">○ 오수 전환율</div> <FormField @@ -90,7 +66,43 @@ const IrSetting = () => { /> </div> <div className="grid grid-cols-[120px_1fr] items-center"> - <div className="text-xl font-medium">○ 파일위치</div> + <div className="text-xl font-medium">○ 수용가 수</div> + <FormField + control={form.control} + name="suyeonga" + render={({ field }) => ( + <SelectBox label='' selectArray={[]} onSelectValue={() => { }} selectClass={undefined} className='w-[150px]' /> + )} + /> + </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="inputdate" + render={({ field }) => ( + <DatePicker + selected={selectedDate} + onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} + mode={"single"} className='w-[150px]' + /> + )} + /> + </div> + <div className="grid grid-cols-[120px_1fr] items-center"> + <div className="text-xl font-medium">○ 관망도 자료</div> <FormField control={form.control} name="rtkSource" diff --git a/apps/sn/app/ii/rdii/rdiisetting/page.tsx b/apps/sn/app/ii/rdii/rdiisetting/page.tsx index 16f080c56..50686395e 100644 --- a/apps/sn/app/ii/rdii/rdiisetting/page.tsx +++ b/apps/sn/app/ii/rdii/rdiisetting/page.tsx @@ -44,7 +44,7 @@ const RdiiSetting = () => { const [selectedDate, setSelectedDate] = useState(new Date()) return ( <BaseLayout titleName={{ mainTitle: '침입수 산정', firstCardTitle: '침입수산정 기초자료 설정', secondCardTitle: '침입수 산정결과 현황' }} form={form} onSubmitEvent={() => { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, cellClickFunc: () => { }, onPageChangeFunc: () => { } }}> - <div className="space-y-[1.2rem]"> + <div className="grid grid-cols-3 gap-4"> <div className="grid grid-cols-[120px_1fr] items-center"> <div className="text-xl font-medium">○ 처리구역</div> <FormField @@ -55,30 +55,6 @@ const RdiiSetting = () => { )} /> </div> - <div className="grid grid-cols-[120px_1fr] items-center"> - <div className="text-xl font-medium">○ RDII 기여면적(ha)</div> - <FormField - control={form.control} - name="meter" - render={({ field }) => ( - <Input - className="h-[3.2rem] text-center text-xl w-[150px]" - placeholder="" - {...field} - /> - )} - /> - </div> - <div className="grid grid-cols-[120px_1fr] items-center"> - <div className="text-xl font-medium">○ 수용가 수</div> - <FormField - control={form.control} - name="suyeonga" - render={({ field }) => ( - <SelectBox label='' selectArray={[]} onSelectValue={() => { }} selectClass={undefined} className='w-[150px] h-[3.2rem]' /> - )} - /> - </div> <div className="grid grid-cols-[120px_1fr] items-center"> <div className="text-xl font-medium">○ 상수사용량 정보</div> <FormField @@ -93,6 +69,32 @@ const RdiiSetting = () => { )} /> </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">○ RDII 기여면적(ha)</div> + <FormField + control={form.control} + name="meter" + render={({ field }) => ( + <Input + className="h-[3.2rem] text-center text-xl w-[150px]" + placeholder="" + {...field} + /> + )} + /> + </div> <div className="grid grid-cols-[120px_1fr] items-center"> <div className="text-xl font-medium">○ 오수 전환율</div> <FormField @@ -107,28 +109,6 @@ const RdiiSetting = () => { )} /> </div> - <div className="grid grid-cols-[120px_1fr] items-center"> - <div className="text-xl font-medium">○ 오수 전환율</div> - <FormField - control={form.control} - name="inpSource" - render={({ field }) => ( - <SelectBox label='' selectArray={[{'text':'매칭(양평).shp','val':'1'}]} onSelectValue={() => { }} selectClass={undefined} className='h-[3.2rem] w-[150px]' /> - )} - /> - </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 @@ -141,6 +121,26 @@ const RdiiSetting = () => { )} /> </div> + <div className="grid grid-cols-[120px_1fr] items-center"> + <div className="text-xl font-medium">○ 수용가 수</div> + <FormField + control={form.control} + name="suyeonga" + render={({ field }) => ( + <SelectBox label='' selectArray={[]} onSelectValue={() => { }} selectClass={undefined} className='w-[150px] h-[3.2rem]' /> + )} + /> + </div> + <div className="grid grid-cols-[120px_1fr] items-center"> + <div className="text-xl font-medium">○ 수용가-맨홀 매칭</div> + <FormField + control={form.control} + name="inpSource" + render={({ field }) => ( + <SelectBox label='' selectArray={[{'text':'매칭(양평).shp','val':'1'}]} onSelectValue={() => { }} selectClass={undefined} className='h-[3.2rem] w-[150px]' /> + )} + /> + </div> </div> </BaseLayout> ) From 1bb6ae08d284183db6b5eec22838cdae6fbb7146 Mon Sep 17 00:00:00 2001 From: JIeunhuh <entks301@naver.com> Date: Tue, 22 Apr 2025 09:36:37 +0900 Subject: [PATCH 47/54] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/ii/baseinfo/mock/page.tsx | 210 ++++++++++---------------- 1 file changed, 80 insertions(+), 130 deletions(-) diff --git a/apps/sn/app/ii/baseinfo/mock/page.tsx b/apps/sn/app/ii/baseinfo/mock/page.tsx index 119def875..0d9b4f46c 100644 --- a/apps/sn/app/ii/baseinfo/mock/page.tsx +++ b/apps/sn/app/ii/baseinfo/mock/page.tsx @@ -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 > ) } From 893dc8502ad6b6aac64b269938661461b2f03b23 Mon Sep 17 00:00:00 2001 From: JIeunhuh <entks301@naver.com> Date: Tue, 22 Apr 2025 11:23:02 +0900 Subject: [PATCH 48/54] =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=9C=84=EC=B9=98?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/oper/floodPre/page.tsx | 97 +++++++++++++++--------------- apps/sn/app/oper/oldPp/page.tsx | 49 ++++++++------- 2 files changed, 78 insertions(+), 68 deletions(-) diff --git a/apps/sn/app/oper/floodPre/page.tsx b/apps/sn/app/oper/floodPre/page.tsx index f24a0b274..3c0303609 100644 --- a/apps/sn/app/oper/floodPre/page.tsx +++ b/apps/sn/app/oper/floodPre/page.tsx @@ -1,6 +1,6 @@ 'use client' import { ContentsDiv, MainDiv, SearchDiv, SearchFormLeft, SearchFormRight, SearchInput, Title, UiTable } from '@common/business_components/ui' -import { Button, DatePicker, Input } from '@common/components/ui' +import { Button, DatePicker, Input, Label } from '@common/components/ui' import React, { useRef, useState } from 'react' import FileUploadForm from '../../components/ui/fileUploadForm' import ListDiv from '@common/business_components/ui/list_div' @@ -24,54 +24,57 @@ const Page = () => { const [pjNm, setpjNm] = useState('') return ( <ContentLayout title='도시침수 예방사업'> - <SearchDiv> - <SearchFormLeft> - <div className='flex items-center space-x-4'> - <div className='flex items-center gap-2'> - <span className='whitespace-nowrap'>수행기간</span> - <DatePicker mode={'single'} - selected={selectedDate} - onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} /> - <span>~</span> - <DatePicker mode={'single'} - selected={selectedDate} - onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} /> - </div> + <SearchDiv> + <SearchFormLeft> + <div className='flex items-center gap-4'> + <div className='flex items-center gap-2'> + <Label className="w-20 text-xl text-gray-600">수행기간</Label> + <DatePicker mode={'single'} + selected={selectedDate} + onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} /> + <span>~</span> + <DatePicker mode={'single'} + selected={selectedDate} + onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} /> </div> - </SearchFormLeft> - <SearchFormRight> - <div className='flex mx-4'> - <div className='flex items-center mx-2'> - <span className='whitespace-nowrap'>수행사</span> - <Input - className='w-[70px] ml-2' - value={company} - onChange={(e) => setCompany(e.target.value)} - /> - </div> - <div className='flex items-center'> - <span className='whitespace-nowrap'>사업명</span> - <Input - className='w-[70px] ml-2' - value={pjNm} - onChange={(e) => setpjNm(e.target.value)} - /> - </div> + <div className='flex items-center'> + <Label className="w-20 text-xl text-gray-600">수행사</Label> + <Input + className='w-[100px]' + value={company} + onChange={(e) => setCompany(e.target.value)} + /> </div> - <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" >조회</Button> - <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" >파일 다운로드</Button> - <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" >삭제</Button> - </SearchFormRight> - </SearchDiv> - <ListDiv className="mt-4"> - <UiTable headName='사업정보 등록 현황' tableData={tableData} headlist={tableHeadlist} pageSize={20} total={20} children={undefined} cellClick={() => { }} onPageChange={function (page: number): void { - throw new Error('Function not implemented.') - }}></UiTable> - </ListDiv> - <ListDiv className="mt-4"> - <FileUploadForm title='도시침수 예방사업 사업추진현황 등록' /> - </ListDiv> - </ContentLayout> + <div className='flex items-center'> + <Label className="w-20 text-xl text-gray-600">사업명</Label> + <Input + className='w-[100px]' + value={pjNm} + onChange={(e) => setpjNm(e.target.value)} + /> + </div> + </div> + </SearchFormLeft> + <SearchFormRight> + <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm">조회</Button> + </SearchFormRight> + </SearchDiv> + <ListDiv className="mt-4"> + <div className="card-header flex items-center justify-between"> + <h3 className="text-2xl font-medium">사업정보 등록현황</h3> + <div> + <Button className="px-4 py-2 !mr-[1.2rem] bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" >파일 다운로드</Button> + <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" >삭제</Button> + </div> + </div> + <UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={20} total={20} children={undefined} cellClick={() => { }} onPageChange={function (page: number): void { + throw new Error('Function not implemented.') + }}></UiTable> + </ListDiv> + <ListDiv className="mt-4"> + <FileUploadForm title='도시침수 예방사업 사업추진현황 등록' /> + </ListDiv> + </ContentLayout> ) } diff --git a/apps/sn/app/oper/oldPp/page.tsx b/apps/sn/app/oper/oldPp/page.tsx index 42b2a3e59..832942752 100644 --- a/apps/sn/app/oper/oldPp/page.tsx +++ b/apps/sn/app/oper/oldPp/page.tsx @@ -1,6 +1,6 @@ 'use client' import { ContentsDiv, MainDiv, SearchDiv, SearchFormLeft, SearchFormRight, SelectBox, Title, UiTable } from '@common/business_components/ui' -import { Button, DatePicker } from '@common/components/ui' +import { Button, DatePicker, 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' @@ -22,11 +22,12 @@ const tableData = [ const Page = () => { const [selectedDate, setSelectedDate] = useState<Date>(new Date()); return ( - <ContentLayout title='노후 하수관로 정비사업'> - <SearchDiv> - <SearchFormLeft> + <ContentLayout title='노후 하수관로 정비사업'> + <SearchDiv> + <SearchFormLeft> + <div className='flex items-center gap-4'> <div className='flex items-center space-x-2'> - <span className='w-20 whitespace-nowrap'>등록기간</span> + <Label className="w-20 text-xl text-gray-600">등록기간</Label> <DatePicker mode={'single'} selected={selectedDate} onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} /> @@ -35,22 +36,28 @@ const Page = () => { selected={selectedDate} onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} /> </div> - </SearchFormLeft> - <SearchFormRight> - <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 mr-2" size="sm" >조회</Button> - <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 mr-2" size="sm" >파일 다운로드</Button> - <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" >삭제</Button> - </SearchFormRight> - </SearchDiv> - <ListDiv className="mt-4"> - <UiTable headName='사업정보 등록 현황' tableData={tableData} headlist={tableHeadlist} pageSize={20} total={20} children={undefined} cellClick={() => { }} onPageChange={function (page: number): void { - throw new Error('Function not implemented.') - }}></UiTable> - </ListDiv> - <ListDiv className="mt-4"> - <FileUploadForm title='노후 하수관로 정비사업 주진현황 등록'/> - </ListDiv> - </ContentLayout> + </div> + </SearchFormLeft> + <SearchFormRight> + <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 mr-2" size="sm" >조회</Button> + </SearchFormRight> + </SearchDiv> + <ListDiv className="mt-4"> + <div className="card-header flex items-center justify-between"> + <h3 className="text-2xl font-medium">사업정보 등록현황</h3> + <div> + <Button className="px-4 py-2 !mr-[1.2rem] bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" >파일 다운로드</Button> + <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" >삭제</Button> + </div> + </div> + <UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={20} total={20} children={undefined} cellClick={() => { }} onPageChange={function (page: number): void { + throw new Error('Function not implemented.') + }}></UiTable> + </ListDiv> + <ListDiv className="mt-4"> + <FileUploadForm title='노후 하수관로 정비사업 주진현황 등록' /> + </ListDiv> + </ContentLayout> ) } From db6c3620c201df3438cd7a455138eaa52b1dab03 Mon Sep 17 00:00:00 2001 From: JIeunhuh <entks301@naver.com> Date: Tue, 22 Apr 2025 13:21:52 +0900 Subject: [PATCH 49/54] =?UTF-8?q?=ED=8F=BC=20=ED=98=95=EC=8B=9D=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/components/ui/formSection.tsx | 24 +++++++++++++++++++++++ apps/sn/app/ii/ir/irsetting/page.tsx | 16 ++++----------- 2 files changed, 28 insertions(+), 12 deletions(-) create mode 100644 apps/sn/app/components/ui/formSection.tsx diff --git a/apps/sn/app/components/ui/formSection.tsx b/apps/sn/app/components/ui/formSection.tsx new file mode 100644 index 000000000..b4e578aae --- /dev/null +++ b/apps/sn/app/components/ui/formSection.tsx @@ -0,0 +1,24 @@ +import { FormField } from '@common/business_components/ui' +import React, { type ReactElement } from 'react' + +interface FormSectionProps { + children: ReactElement + titleNm: string + form: any + name: string +} + +const FormSection = ({ children, titleNm, form, name }: FormSectionProps) => { + return ( + <div className="grid grid-cols-[120px_1fr] items-center"> + <div className="text-xl font-medium">{titleNm}</div> + <FormField + control={form.control} + name={name} + render={({ field }) => children} + /> + </div> + ) +} + +export default FormSection \ 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 index 865864d4c..e43a63835 100644 --- a/apps/sn/app/ii/ir/irsetting/page.tsx +++ b/apps/sn/app/ii/ir/irsetting/page.tsx @@ -6,9 +6,10 @@ 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(), + suyeonga: z.number(), inputdate: z.coerce.date(), rtkSource: z.string(), }) @@ -18,7 +19,7 @@ const IrSetting = () => { resolver: zodResolver(formSchema), defaultValues: { region: "", - suyeonga:0, + suyeonga: 0, inputdate: new Date(), rtkSource: "", } @@ -41,16 +42,7 @@ const IrSetting = () => { return ( <BaseLayout titleName={{ mainTitle: '침입수 산정', firstCardTitle: '침입수산정 기초자료 설정', secondCardTitle: '침입수 산정결과 현황' }} form={form} onSubmitEvent={() => { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, cellClickFunc: () => { }, onPageChangeFunc: () => { } }}> <div className="grid grid-cols-2 gap-4"> - <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={region} onSelectValue={() => { }} selectClass={undefined} className='w-[150px]' /> - )} - /> - </div> + <FormSection name='region' form={form} titleNm='○ 처리구역'><SelectBox label='' selectArray={region} onSelectValue={() => { }} selectClass={undefined} className='w-[150px]' /></FormSection> <div className="grid grid-cols-[120px_1fr] items-center"> <div className="text-xl font-medium">○ 오수 전환율</div> <FormField From 4f34a8ffa0cde853c3ead431c7700bbfcaef5a6f Mon Sep 17 00:00:00 2001 From: JIeunhuh <entks301@naver.com> Date: Wed, 23 Apr 2025 10:44:54 +0900 Subject: [PATCH 50/54] sn ci/cd --- apps/sn/.github/workflows/sn_build.yml | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 apps/sn/.github/workflows/sn_build.yml diff --git a/apps/sn/.github/workflows/sn_build.yml b/apps/sn/.github/workflows/sn_build.yml new file mode 100644 index 000000000..51d9f5d98 --- /dev/null +++ b/apps/sn/.github/workflows/sn_build.yml @@ -0,0 +1,19 @@ +name: iipbs_sn + +on: + push: + branches: [iipbs/sn/dev] + +jobs: + build: + runs-on: ubuntu-20.04 + steps: + - uses: appleboy/ssh-action@master + with: + port: 11022 + host: con.mind-one.co.kr + username: mindone + password: mindone!23 + script: | + cd ./iipbs/front + sh ./frontStartSn.sh \ No newline at end of file From 6632636e5a1eda5832cbed3215ebb36ed82b40a0 Mon Sep 17 00:00:00 2001 From: JIeunhuh <entks301@naver.com> Date: Wed, 23 Apr 2025 10:47:40 +0900 Subject: [PATCH 51/54] sn ci/cd --- {apps/sn/.github => .github}/workflows/sn_build.yml | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename {apps/sn/.github => .github}/workflows/sn_build.yml (100%) diff --git a/apps/sn/.github/workflows/sn_build.yml b/.github/workflows/sn_build.yml similarity index 100% rename from apps/sn/.github/workflows/sn_build.yml rename to .github/workflows/sn_build.yml From 4a5101770336ee3d83f9b91a72d493a83fa15068 Mon Sep 17 00:00:00 2001 From: JIeunhuh <entks301@naver.com> Date: Wed, 23 Apr 2025 10:52:08 +0900 Subject: [PATCH 52/54] test --- apps/sn/app/ii/ir/irsetting/page.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/sn/app/ii/ir/irsetting/page.tsx b/apps/sn/app/ii/ir/irsetting/page.tsx index e43a63835..9b4a413cc 100644 --- a/apps/sn/app/ii/ir/irsetting/page.tsx +++ b/apps/sn/app/ii/ir/irsetting/page.tsx @@ -24,6 +24,7 @@ const IrSetting = () => { rtkSource: "", } }) + console.log('test') // TODO: 임시 데이터 const rtxNmHeadlist = [ { id: 'fileNm', title: '파일명' }, From 3c7dad233fb4d53cc4cf624b5136f34180754742 Mon Sep 17 00:00:00 2001 From: JIeunhuh <entks301@naver.com> Date: Wed, 23 Apr 2025 10:59:00 +0900 Subject: [PATCH 53/54] test --- apps/sn/app/ii/ir/irsetting/page.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/apps/sn/app/ii/ir/irsetting/page.tsx b/apps/sn/app/ii/ir/irsetting/page.tsx index 9b4a413cc..95d99943c 100644 --- a/apps/sn/app/ii/ir/irsetting/page.tsx +++ b/apps/sn/app/ii/ir/irsetting/page.tsx @@ -27,21 +27,21 @@ const IrSetting = () => { console.log('test') // 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' } + { 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 = [ - { "status": '상태', 'code': '123824', 'cjfl': '처리', 'fileNm': '파일', 'add': '', 'update': '', 'error': '', 'skip': '' } + { "nm": '1', 'hasu': '', 'region': '처리', 'sangsu': '파일', 'wjsghks': '', 'tnsdhtn': '', 'rkddn': '', 'rdii': '' } ] const [selectedDate, setSelectedDate] = useState(new Date()) return ( - <BaseLayout titleName={{ mainTitle: '침입수 산정', firstCardTitle: '침입수산정 기초자료 설정', secondCardTitle: '침입수 산정결과 현황' }} form={form} onSubmitEvent={() => { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, cellClickFunc: () => { }, onPageChangeFunc: () => { } }}> + <BaseLayout titleName={{ mainTitle: '침입수 산정', firstCardTitle: '침입수 산정 기초자료 설정', secondCardTitle: '침입수 산정결과 현황' }} form={form} onSubmitEvent={() => { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, cellClickFunc: () => { }, onPageChangeFunc: () => { } }}> <div className="grid grid-cols-2 gap-4"> <FormSection name='region' form={form} titleNm='○ 처리구역'><SelectBox label='' selectArray={region} onSelectValue={() => { }} selectClass={undefined} className='w-[150px]' /></FormSection> <div className="grid grid-cols-[120px_1fr] items-center"> From f5c33e80aee667a22f4c1b6035abd66020d03eb6 Mon Sep 17 00:00:00 2001 From: JIeunhuh <entks301@naver.com> Date: Wed, 23 Apr 2025 11:10:41 +0900 Subject: [PATCH 54/54] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=98=A4?= =?UTF-8?q?=ED=83=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/ii/rdii/rdiisetting/page.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/apps/sn/app/ii/rdii/rdiisetting/page.tsx b/apps/sn/app/ii/rdii/rdiisetting/page.tsx index 50686395e..dd4eb367c 100644 --- a/apps/sn/app/ii/rdii/rdiisetting/page.tsx +++ b/apps/sn/app/ii/rdii/rdiisetting/page.tsx @@ -29,21 +29,21 @@ const RdiiSetting = () => { }) // 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' } + { 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 = [ - { "status": '상태', 'code': '123824', 'cjfl': '처리', 'fileNm': '파일', 'add': '', 'update': '', 'error': '', 'skip': '' } + { "nm": '1', 'hasu': '', 'region': '처리', 'sangsu': '파일', 'wjsghks': '', 'tnsdhtn': '', 'rkddn': '', 'rdii': '' } ] const [selectedDate, setSelectedDate] = useState(new Date()) return ( - <BaseLayout titleName={{ mainTitle: '침입수 산정', firstCardTitle: '침입수산정 기초자료 설정', secondCardTitle: '침입수 산정결과 현황' }} form={form} onSubmitEvent={() => { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, cellClickFunc: () => { }, onPageChangeFunc: () => { } }}> + <BaseLayout titleName={{ mainTitle: 'RDII 산정', firstCardTitle: 'RDII산정 기초자료 설정', secondCardTitle: 'RDII 산정결과 현황' }} form={form} onSubmitEvent={() => { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, cellClickFunc: () => { }, onPageChangeFunc: () => { } }}> <div className="grid grid-cols-3 gap-4"> <div className="grid grid-cols-[120px_1fr] items-center"> <div className="text-xl font-medium">○ 처리구역</div>