diff --git a/.idea/.gitignore b/.idea/.gitignore deleted file mode 100644 index c3f502a19..000000000 --- a/.idea/.gitignore +++ /dev/null @@ -1,8 +0,0 @@ -# 디폴트 무시된 파일 -/shelf/ -/workspace.xml -# 에디터 기반 HTTP 클라이언트 요청 -/httpRequests/ -# Datasource local storage ignored files -/dataSources/ -/dataSources.local.xml diff --git a/app/pages/flowRate/modal/page.tsx b/app/pages/flowRate/modal/page.tsx deleted file mode 100644 index e69de29bb..000000000 diff --git a/apps/dm/.env.development b/apps/dm/.env.development new file mode 100644 index 000000000..622545fd6 --- /dev/null +++ b/apps/dm/.env.development @@ -0,0 +1,19 @@ +NEXT_PUBLIC_SITE_ID = DM +NEXT_PUBLIC_PORT = 3000 +NEXT_PUBLIC_PROXY_HOST = http://localhost:3000 +NEXT_PUBLIC_SERVER_API_URL = http://con.mind-one.co.kr:11080/api/v1 +NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11082/api/v1 +NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000 +NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload +NEXT_PUBLIC_CLAIM_NAME = Authorization +NEXT_PUBLIC_AUTH_USER_ID = token-id +NEXT_PUBLIC_ACCESS_TOKEN = access-token +NEXT_PUBLIC_REFRESH_TOKEN = refresh-token + + + +NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service/api # 개발 서버 API +# NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.128:8883/sewerage-service/api # 최용성 +#NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.66:8883/sewerage-service/api # 박이정 + + diff --git a/apps/dm/.env.local b/apps/dm/.env.local new file mode 100644 index 000000000..622545fd6 --- /dev/null +++ b/apps/dm/.env.local @@ -0,0 +1,19 @@ +NEXT_PUBLIC_SITE_ID = DM +NEXT_PUBLIC_PORT = 3000 +NEXT_PUBLIC_PROXY_HOST = http://localhost:3000 +NEXT_PUBLIC_SERVER_API_URL = http://con.mind-one.co.kr:11080/api/v1 +NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11082/api/v1 +NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000 +NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload +NEXT_PUBLIC_CLAIM_NAME = Authorization +NEXT_PUBLIC_AUTH_USER_ID = token-id +NEXT_PUBLIC_ACCESS_TOKEN = access-token +NEXT_PUBLIC_REFRESH_TOKEN = refresh-token + + + +NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service/api # 개발 서버 API +# NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.128:8883/sewerage-service/api # 최용성 +#NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.66:8883/sewerage-service/api # 박이정 + + diff --git a/apps/dm/.env.production b/apps/dm/.env.production new file mode 100644 index 000000000..8a552821e --- /dev/null +++ b/apps/dm/.env.production @@ -0,0 +1,17 @@ +NEXT_PUBLIC_SITE_ID = DM +NEXT_PUBLIC_PORT = 3000 +NEXT_PUBLIC_PROXY_HOST = http://wr.hasuon.or.kr +NEXT_PUBLIC_SERVER_API_URL = http://apigateway.iipbs-dev.svc.cluster.local:8000/api/v1 +NEXT_PUBLIC_FO_SERVER_API_URL = http://apigateway.iipbs-dev.svc.cluster.local:8000/operation-service/api/v1 +NEXT_PUBLIC_CS_SERVER_API_URL = http://apigateway.iipbs-dev.svc.cluster.local:8000 +NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload +NEXT_PUBLIC_GEOSERVER_URL = http://172.29.143.87:8080/geoserver +NEXT_PUBLIC_LX_GEOSERVER_URL = http://172.29.143.87:8080/geoserver_swl +NEXT_PUBLIC_CLAIM_NAME = Authorization +NEXT_PUBLIC_AUTH_USER_ID = token-id +NEXT_PUBLIC_ACCESS_TOKEN = access-token +NEXT_PUBLIC_REFRESH_TOKEN = refresh-token + +NEXT_PUBLIC_SEWERAGE_API_URL = http://apigateway.iipbs-dev.svc.cluster.local:8000/sewerage-service/api + + diff --git a/apps/dm/.gitignore b/apps/dm/.gitignore new file mode 100644 index 000000000..c1b3c4e38 --- /dev/null +++ b/apps/dm/.gitignore @@ -0,0 +1,39 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/.pnp +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/versions + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files (can opt-in for committing if needed) + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/apps/dm/app/base.tsx b/apps/dm/app/base.tsx new file mode 100644 index 000000000..3905c9952 --- /dev/null +++ b/apps/dm/app/base.tsx @@ -0,0 +1,22 @@ +"use client"; + +import { BaseLayout } from "@common/components"; +import type { MenuItem } from "./store/common"; +import { useDmStore } from "./store"; +import { useRouter } from "next/navigation"; + +export default function Base({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + const { getMenuAuth } = useDmStore((state) => state); + + const router = useRouter(); + const handleClick = (id:MenuItem) =>{ + getMenuAuth(id.menuCd); + router.push(id.urlPath); + } + + return {children}; +} diff --git a/apps/dm/app/common/transValueFormat.tsx b/apps/dm/app/common/transValueFormat.tsx new file mode 100644 index 000000000..4d76d84e0 --- /dev/null +++ b/apps/dm/app/common/transValueFormat.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +type CommonProps = { + value: string | number | ''; + format: string; +} + +export default function TransValueFormat({value='', format=''}: CommonProps) { + return ( + format === 'yyyyMMdd' ? + <>{value.toString().substring(0,4)+'-'+value.toString().substring(4,6)+'-'+value.toString().substring(6,8)} + : format === 'number' ? + <>{String(value ?? '').includes('.') + ? String(value).split('.').map((part, index) => + index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part + ).join('.') + : String(value ?? '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")} + : format === 'float1' ? + <>{String(value ?? '').includes('.') + ? String(value).split('.').map((part, index) => + index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part + ).join('.') + : String(value ?? '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")} + : <>{value} + ) +} \ No newline at end of file diff --git a/apps/dm/app/favicon.ico b/apps/dm/app/favicon.ico new file mode 100644 index 000000000..718d6fea4 Binary files /dev/null and b/apps/dm/app/favicon.ico differ diff --git a/apps/dm/app/globals.css b/apps/dm/app/globals.css new file mode 100644 index 000000000..f30aa3031 --- /dev/null +++ b/apps/dm/app/globals.css @@ -0,0 +1,70 @@ +@import "../../../packages/common/components/src/base.css"; + +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --radius: 0.5rem + } + .dark { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55% + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/apps/dm/app/layout.tsx b/apps/dm/app/layout.tsx new file mode 100644 index 000000000..7c0f47a30 --- /dev/null +++ b/apps/dm/app/layout.tsx @@ -0,0 +1,20 @@ +"use client" +import Base from "./base"; +import "./globals.css"; +import { StoreProvider } from "./store"; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + + + {children} + + + + ); +} \ No newline at end of file diff --git a/apps/dm/app/page.tsx b/apps/dm/app/page.tsx new file mode 100644 index 000000000..fdb323086 --- /dev/null +++ b/apps/dm/app/page.tsx @@ -0,0 +1,36 @@ +"use client" + +import Link from 'next/link'; +import { Button } from '@common/components/ui'; + +export default function Home() { + return ( + <> +
+ + + + + + +
+
+ +
+ + ); +} diff --git a/apps/dm/app/pages/sdmMng/sdmApplyList/page.tsx b/apps/dm/app/pages/sdmMng/sdmApplyList/page.tsx new file mode 100644 index 000000000..2dda06008 --- /dev/null +++ b/apps/dm/app/pages/sdmMng/sdmApplyList/page.tsx @@ -0,0 +1,196 @@ +"use client" +import { Table, TableBody, TableCell, TableRow } from '@common/components/ui/table'; + +import { useDmStore } from '@/app/store'; +import { ContentsDiv, Title, UiModal, UiTable } from '@common/business_components/ui'; +import ListDiv from '@common/business_components/ui/list_div'; +import { useEffect, useState } from 'react'; +import { Toaster } from 'react-hot-toast'; +import SdmLogin from '../sdmLogin/page'; +import type { DemandCompType } from '@/app/store/sdmMng'; +import TransValueFormat from '@/app/common/transValueFormat'; + +const TABLE_STYLES = { + header: "text-center border border-[var(--border)] bg-[rgb(234,243,251)] text-[rgb(100,119,132)] whitespace-pre-line", + cell: "text-right whitespace-pre-line", + fullWidth: "text-center border border-[var(--border)] bg-[rgb(234,243,251)] text-[rgb(100,119,132)] whitespace-pre-line", + table: "fixed w-full" +} as const; + +type SdmApplyProps = { + sdmNo : string; +} + +export default function SdmApplyList({}: SdmApplyProps) { + const {getSdmInfoStatusList, Sdm, Common} = useDmStore((state) => state); + const {successLogin, sdmInfoStatusList, upHeadSdmInfoStatus} = Sdm; + const {selectSidoData, selectSigunData} = Common; + const [isLogin, setIsLogin] = useState(false); + const [isLoginStorageInfo, setIsLoginStorageInfo] = useState(false); + const [sdmApplyDetail, setSdmApplyDetail] = useState({} as DemandCompType); + const [transformedList, setTransformedList] = useState([]); + + useEffect(() => { + console.log('sessionStorage : ',sessionStorage.getItem('user')); + const user = sessionStorage.getItem('user'); + if (user) { + setIsLoginStorageInfo(true); + } + }, []); + + useEffect(() => { + if (successLogin || isLoginStorageInfo) { + setIsLogin(true); + const user = sessionStorage.getItem('user'); + if (user) { + try { + const userData = JSON.parse(user); + getSdmInfoStatusList(userData.dmdInfoId); + } catch (error) { + console.error('Error parsing user data:', error); + } + } + } + }, [successLogin, getSdmInfoStatusList, isLoginStorageInfo]); + + // 데이터 변환을 위한 별도의 useEffect + useEffect(() => { + if (sdmInfoStatusList.length > 0) { + const newTransformedList = sdmInfoStatusList.map((item: DemandCompType) => ({ + ...item, + ctpvCd: selectSidoData.find(sido => sido.val === item.ctpvCd?.trim())?.text || '', + sggCd: selectSigunData.find(sigun => sigun.val === item.sggCd?.trim())?.text || '' + })); + setTransformedList(newTransformedList); + } + }, [sdmInfoStatusList, selectSidoData, selectSigunData]); + + const onClickSdmStatus = (index: number | undefined) => { + if (index !== undefined) { + const selectedStatus = transformedList[index]; + if (selectedStatus) { + setSdmApplyDetail(selectedStatus); + } + } + } + + return ( + <> + + <ContentsDiv> + <ListDiv> + <div className="overflow-y-scroll h-[250px]"> + <div className="h-[110%] w-[99%]"> + <UiTable + headName='수요정보 신청현황' + tableData={transformedList} + headlist={upHeadSdmInfoStatus} + pageSize={0} + total={0} + cellClick={(index) => onClickSdmStatus(index)} + onPageChange={() => {}} + /> + </div> + </div> + </ListDiv> + <ListDiv> + <div className="card-header"> + <h3 className="text-2xl font-medium text-label">수요신청 상세현황</h3> + </div> + <div className={`card !m-[1.2rem] !p-0r`}> + <Table variant="secondary" style={{ tableLayout: 'fixed', width: '100%' }}> + <TableBody> + <TableRow> + <TableCell colSpan={1} className={TABLE_STYLES.header}>요구시기</TableCell> + <TableCell colSpan={2} className={TABLE_STYLES.cell}>{sdmApplyDetail?.dmndTmng?.toString()}</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.header}>요구수량(m³/일)</TableCell> + <TableCell colSpan={2} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.dmndQty} format="number"/>}</TableCell> + </TableRow> + <TableRow> + <TableCell colSpan={1} className={TABLE_STYLES.header}>사용용도</TableCell> + <TableCell colSpan={2} className={TABLE_STYLES.cell}>{sdmApplyDetail?.useUsgCd}</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.header}>희망단가(원/m³)</TableCell> + <TableCell colSpan={2} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.wntUntprc} format="number"/>}</TableCell> + </TableRow> + <TableRow> + <TableCell colSpan={6} className={TABLE_STYLES.fullWidth}>요구수량</TableCell> + </TableRow> + <TableRow> + <TableCell colSpan={1} className={TABLE_STYLES.header}>총대장균군수(개/100ml)</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.grssClfg} format="number"/>}</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.header}>결합잔류염소(mg/L)​</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.combResdch} format="number"/>}</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.header}>탁도(NTU)</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.trbt} format="number"/>}</TableCell> + </TableRow> + <TableRow> + <TableCell colSpan={1} className={TABLE_STYLES.header}>생물학적 산소요구량(BOD)(mg/L)</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.blgcOxygDmndQnt} format="number"/>}</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.header}>냄새</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.smll} format="number"/>}</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.header}>색도(도)</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.crmty} format="number"/>}</TableCell> + </TableRow> + <TableRow> + <TableCell colSpan={1} className={TABLE_STYLES.header}>총질소(T-N)(mg/L)</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.tn} format="number"/>}</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.header}>총인(T-P)(mg/L)​</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.tph} format="number"/>}</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.header}>수소이온농도(pH)​</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.ph} format="number"/>}</TableCell> + </TableRow> + <TableRow> + <TableCell colSpan={1} className={TABLE_STYLES.header}>염화물(mgCL/L)​</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.clIonQnt} format="number"/>}</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.header}>전기전도도(㎲/cm)​</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.cdtnv} format="number"/>}</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.header}>비고</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.cell}>{sdmApplyDetail?.rmrk}</TableCell> + </TableRow> + <TableRow> + <TableCell colSpan={6} className={TABLE_STYLES.fullWidth}>공급처 후보지​</TableCell> + </TableRow> + <TableRow> + <TableCell colSpan={1} className={TABLE_STYLES.header}>후보지1</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.cell}></TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.header}>후보지2</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.cell}></TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.header}>후보지3</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.cell}></TableCell> + </TableRow> + </TableBody> + </Table> + </div> + </ListDiv> + <ListDiv> + <div className="card-header"> + <h3 className="text-2xl font-medium text-label">수요신청 진행상태</h3> + </div> + <div className={`card !m-[1.2rem] !p-0r`}> + <Table variant="secondary" style={{ tableLayout: 'fixed', width: '100%' }}> + <TableBody> + <TableRow> + <TableCell colSpan={1} className={TABLE_STYLES.header}>진행상태</TableCell> + <TableCell colSpan={2} className={TABLE_STYLES.cell}>{sdmApplyDetail?.status?.toString()}</TableCell> + <TableCell colSpan={1} className={TABLE_STYLES.header}>공급처매칭결과</TableCell> + <TableCell colSpan={2} className={TABLE_STYLES.cell}></TableCell> + </TableRow> + </TableBody> + </Table> + </div> + </ListDiv> + </ContentsDiv> + {!isLogin? + <UiModal + body={<SdmLogin/>} + bodyClass="sm:max-w-[90vw] w-[530px] h-[430px]" + open={!isLogin} + onOpenChange={(open) => !open && setIsLogin(false)} + noHeaderYn="Y" + noFooterYn="Y" + /> + :null} + <Toaster position="top-center" /> + </> + ); +} diff --git a/apps/dm/app/pages/sdmMng/sdmInfoInsert/modalSimilar/page.tsx b/apps/dm/app/pages/sdmMng/sdmInfoInsert/modalSimilar/page.tsx new file mode 100644 index 000000000..22418c7b7 --- /dev/null +++ b/apps/dm/app/pages/sdmMng/sdmInfoInsert/modalSimilar/page.tsx @@ -0,0 +1,166 @@ +"use client" + +import { useDmStore } from '@/app/store'; +import type { MoneyDetailType, SimilarCaseType } from '@/app/store/sdmMng'; +import { SelectBox, Title, UiTable } from '@common/business_components/ui'; +import { HeadMakeColSpan } from '@common/business_components/ui/table/HeadMakeColSpan'; +import { Table, TableBody, TableCell, TableHeader, TableRow } from '@common/components/ui/table'; +import { useEffect, useMemo, useState } from 'react'; + +type modalType = { + sply: number | 0; + usageCd: string | ''; + money: number | 0; +}; + +const searchUseTypeList = [ + { text: '공급량', val: 'S' }, + { text: '사용용도', val: 'U' }, +]; + +export default function ModalSimilarPage({ sply = 0, usageCd = '', money = 0 }: modalType) { + const { Sdm, getSimilarCaseList } = useDmStore((state) => state); + const [searchUseType, setSearchUseType] = useState<{text: string, value: string}>({text: '공급량', value: 'S'}); + const [moneyDetailList, setMoneyDetailList] = useState<MoneyDetailType[]>([]); + const { + upHeadSimilarCaseList, + similarCaseList, + upHeadMoneyDetailList, + } = Sdm; + + const rowSpans = useMemo(() => { + const spans: { [key: number]: number } = {}; + let currentValue = ''; + let currentSpan = 0; + let startIndex = 0; + + similarCaseList.forEach((item: SimilarCaseType, index: number) => { + if (item.ruseBizNm === currentValue + || item.bizBgngDate === currentValue + || item.bizEndDate === currentValue + || item.reqBizReuseFcltCst === currentValue) { + currentSpan++; + spans[startIndex] = currentSpan; + } else { + currentValue = item.ruseBizNm; + currentSpan = 1; + startIndex = index; + spans[index] = 1; + } + }); + + return spans; + }, [similarCaseList]); + + const handleCellClick = (index: number) => { + setMoneyDetailList([{ + reqBizGrssCst: similarCaseList[index]?.reqBizGrssCst ?? '', + reqBizReuseFcltCst: similarCaseList[index]?.reqBizReuseFcltCst ?? '', + reqBizPplCst: similarCaseList[index]?.reqBizPplCst ?? '', + reqBizArchCst: similarCaseList[index]?.reqBizArchCst ?? '', + reqBizMchnCst: similarCaseList[index]?.reqBizMchnCst ?? '', + reqBizMtrngCst: similarCaseList[index]?.reqBizMtrngCst ?? '', + reqBizGisCst: similarCaseList[index]?.reqBizGisCst ?? '', + reqBizCctvCst: similarCaseList[index]?.reqBizCctvCst ?? '', + reqBizCmcnCst: similarCaseList[index]?.reqBizCmcnCst ?? '', + reqBizWstCst: similarCaseList[index]?.reqBizWstCst ?? '', + reqBizDesignCst: similarCaseList[index]?.reqBizDesignCst ?? '', + reqBizSpvsCst: similarCaseList[index]?.reqBizSpvsCst ?? '', + reqBizSbsdCst: similarCaseList[index]?.reqBizSbsdCst ?? '', + reqBizEtc: similarCaseList[index]?.reqBizEtc ?? '', + prcmPlanNlep: similarCaseList[index]?.prcmPlanNlep ?? '', + prcmPlanLcep: similarCaseList[index]?.prcmPlanLcep ?? '', + prcmPlanBrdnCst: similarCaseList[index]?.prcmPlanBrdnCst ?? '', + prcmPlanEcqrRt: similarCaseList[index]?.prcmPlanEcqrRt ?? '', + prcmPlanGrssCst: similarCaseList[index]?.prcmPlanGrssCst ?? '', + clclnNlep: similarCaseList[index]?.clclnNlep ?? '', + clclnLcep: similarCaseList[index]?.clclnLcep ?? '', + clclnBrdnCst: similarCaseList[index]?.clclnBrdnCst ?? '', + clclnEcqrRt: similarCaseList[index]?.clclnEcqrRt ?? '', + clclnGrssCst: similarCaseList[index]?.clclnGrssCst ?? '' + }]); + } + + useEffect(() => { + const type = searchUseType.value; + getSimilarCaseList(type, type === 'S' ? sply : type === 'U' ? usageCd : money); + }, [getSimilarCaseList, money, searchUseType, sply, usageCd]); + + return ( + <div className="align-top w-[1360px] overflow-x-auto"> + <Title title="유사사례 조회" /> + <div className="overflow-x-auto h-[450px] w-full mt-8" tabIndex={0} aria-label="유사사례 테이블 영역"> + <div className="w-[150%]"> + <div className="card-header justify-self-start"> + <h3 className="text-2xl font-medium text-label">유사사례</h3> + <SelectBox + tabIndex={0} + aria-label="검색 기준 선택" + selectArray={searchUseTypeList} + value={searchUseType.value} + onSelectValue={(val) => { + setSearchUseType({text: searchUseTypeList.find(item => item.val === val)?.text ?? '', value: val.toString()}); + }} + className="w-[140px] ml-20" + label="" + selectClass="w-[140px]" + /> + </div> + <div className={`card !m-[1.2rem] !p-0r`}> + <Table variant="secondary"> + <TableHeader className="font-bold"> + <HeadMakeColSpan upHeadList={upHeadSimilarCaseList} /> + </TableHeader> + <TableBody className='text-center'> + {similarCaseList.length > 0 ? similarCaseList?.map((el: SimilarCaseType, index) => ( + <TableRow key={`similar-case-row-${index}-${el.ruseBizNm}-${el.bizBgngDate}`}> + {upHeadSimilarCaseList.map((head) => ( + head.id && head.id.length > 1 && ( + <TableCell + tabIndex={head.id === 'someClickableId' ? 0 : undefined} + role="button" + aria-label={`유사사례 ${head.id} 클릭 시 상세 정보 표시`} + className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : typeof el[head.id as keyof SimilarCaseType] === 'number' ? 'text-right' : 'text-center'} cursor-pointer`} + key={`similar-case-cell-${head.id}-${index}-${el.ruseBizNm}`} + rowSpan={(head.id === 'businessName' || head.id ==='businessDuration' || head.id === 'money') ? rowSpans[index] : undefined} + style={(head.id === 'businessName' || head.id === 'businessDuration' || head.id === 'money') && index > 0 && similarCaseList[index - 1]?.ruseBizNm === el.ruseBizNm ? { display: 'none' } : undefined} + onClick={() => handleCellClick(index)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + handleCellClick(index); + } + }} + > + {typeof el[head.id as keyof SimilarCaseType] !== 'number' + ? String(el[head.id as keyof SimilarCaseType] ?? '') + : String(el[head.id as keyof SimilarCaseType]).includes('.') + ? String(el[head.id as keyof SimilarCaseType]).split('.').map((part, index) => + index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part + ).join('.') + : String(el[head.id as keyof SimilarCaseType] ?? '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")} + </TableCell> + ) + ))} + </TableRow> + )) : <></>} + </TableBody> + </Table> + </div> + </div> + </div> + <div className="overflow-x-auto h-[270px] w-full mt-8"> + <div className="w-[130%]"> + <UiTable + headName={"사업비 상세정보"} + tableData={moneyDetailList} + headlist={upHeadMoneyDetailList} + pageSize={0} + total={0} + cellClick={undefined} + onPageChange={() => {}} + /> + </div> + </div> + </div> + ) +} \ No newline at end of file diff --git a/apps/dm/app/pages/sdmMng/sdmInfoInsert/page.tsx b/apps/dm/app/pages/sdmMng/sdmInfoInsert/page.tsx new file mode 100644 index 000000000..a0f905c35 --- /dev/null +++ b/apps/dm/app/pages/sdmMng/sdmInfoInsert/page.tsx @@ -0,0 +1,250 @@ +"use client"; + +import { useDmStore } from "@/app/store"; +import type { DemandCompType } from "@/app/store/sdmMng"; +import { SdmInfoRegForm } from "@/components/ui/sdmInfoInsertForm/component"; +import { UiModal } from "@common/business_components/ui/dialog_ui"; +import { Button } from "@common/components/ui"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { useSearchParams } from "next/navigation"; +import { Suspense, useEffect, useState } from "react"; +import { FormProvider, useForm, type SubmitHandler } from "react-hook-form"; +import { Toaster } from "react-hot-toast"; +import * as z from "zod"; +import SdmLogin from "../sdmLogin/page"; + +const createFormSchema = () => z.object({ + sdmNm: z.string() + .min(1, "수요처를 선택해주세요"), + demandYmd: z.date().optional(), + demandQnty: z.string() + .min(1, "요구수량을 입력해주세요") + .regex(/^[0-9]+$/, "요구수량은 숫자만 입력 가능합니다"), + usePurpose: z.string().optional(), + money: z.string() + .regex(/^[0-9]+$/, "희망단가는 숫자만 입력 가능합니다"), + /**요구수질 */ + reqWaterQlty : z.string().optional(), + grssClfg: z.string() + .min(1, "총대장균군수를 입력해주세요") + .regex(/^[0-9]+$/, "총대장균군수는 숫자만 입력 가능합니다"), + tn : z.string() + .min(1, "총질소를 입력해주세요") + .regex(/^[0-9]+$/, "총질소는 숫자만 입력 가능합니다"), + combResdch : z.string() + .min(1, "결합잔류염소를 입력해주세요") + .regex(/^[0-9]+$/, "결합잔류염소는 숫자만 입력 가능합니다"), + tph : z.string() + .min(1, "총인산물을 입력해주세요") + .regex(/^[0-9]+$/, "총인산물은 숫자만 입력 가능합니다"), + trbt : z.string() + .min(1, "탁도를 입력해주세요") + .regex(/^[0-9]+$/, "탁도는 숫자만 입력 가능합니다"), + ph : z.string() + .min(1, "수소이온농도를 입력해주세요") + .regex(/^[0-9]+$/, "수소이온농도는 숫자만 입력 가능합니다"), + bod : z.string() + .min(1, "생물학적 산소요구량을 입력해주세요") + .regex(/^[0-9]+$/, "생물학적 산소요구량은 숫자만 입력 가능합니다"), + /**컬럼확인필요 */ + clIonQnt : z.string() + .min(1, "염화물을 입력해주세요") + .regex(/^[0-9]+$/, "염화물은 숫자만 입력 가능합니다"), + smll : z.string() + .min(1, "냄새를 입력해주세요") + .regex(/^[0-9]+$/, "냄새는 숫자만 입력 가능합니다"), + cdtnv : z.string() + .min(1, "전기전도도를 입력해주세요") + .regex(/^[0-9]+$/, "전기전도도는 숫자만 입력 가능합니다"), + crmty : z.string() + .min(1, "색도를 입력해주세요") + .regex(/^[0-9]+$/, "색도는 숫자만 입력 가능합니다"), + rmrk : z.string().optional(), + /* telno: z.string() + .min(8, "전화번호는 8자 이상 입력해주세요") + .max(12, "전화번호는 12자 이내로 입력해주세요") + .regex(/^[0-9-]+$/, "전화번호는 숫자와 하이픈(-)만 입력 가능합니다"), */ + candidateTitle: z.string().optional(), +}); + +export type FormData = z.infer<ReturnType<typeof createFormSchema>>; + +function SdmInfoInsertContent() { + const searchParams = useSearchParams(); + const {insertSdmInfoData, Sdm} = useDmStore((state) => state); + const {successLogin} = Sdm; + const [ismoneyDisabled, setIsmoneyDisabled] = useState(false); + const formSchema = createFormSchema(); + + const [isLogin, setIsLogin] = useState(false); + const [facilityName, setFacilityName] = useState<string>(''); + const [defaultValues, setDefaultValues] = useState<FormData>({ + sdmNm: '', + demandYmd: new Date(), + demandQnty: '', + usePurpose: '', + money: '', + /**요구수질 */ + reqWaterQlty: '', + grssClfg: '', + tn: '', + combResdch: '', + tph: '', + trbt: '', + ph: '', + bod: '', + /**컬럼확인필요 */ + clIonQnt: '', + smll: '', + cdtnv: '', + crmty: '', + rmrk: '', + /** 후보지 제목 */ + candidateTitle: '', + }); + + useEffect(() => { + const user = sessionStorage.getItem('user'); + setDefaultValues(prev => ({ + ...prev, + sdmNm: searchParams.get('dmdCoNm') || '', + })); + sessionStorage.setItem('user', searchParams.get('dmdInfoId') || ''); + setIsLogin(user || searchParams.get('dmdInfoId') ? true : false); + }, [searchParams]); + + useEffect(() => { + const local = localStorage.getItem('user'); + if(local) { + setIsLogin(true); + } + }, []); + + const form = useForm<FormData>({ + resolver: zodResolver(formSchema), + defaultValues, + mode: "onChange", + }); + + // 로그인 성공 시 모달 닫기 및 폼 업데이트 + useEffect(() => { + if (successLogin) { + setIsLogin(true); + const user = sessionStorage.getItem('user'); + if (user) { + try { + const userData = JSON.parse(user); + if (userData.dmdCoNm) { + setFacilityName(userData.dmdCoNm); + form.setValue('sdmNm', userData.dmdCoNm); + } + } catch (error) { + console.error('Error parsing user data:', error); + } + } + } + }, [successLogin, form]); + + // 체크박스 상태가 변경될 때마다 money 필드의 에러를 초기화 + useEffect(() => { + if (ismoneyDisabled) { + form.clearErrors('money'); + form.setValue('money', ''); + } + }, [ismoneyDisabled, form]); + + const onSubmit: SubmitHandler<FormData> = async (data) => { + try { + // Transform form data to match API schema + const apiData : DemandCompType = { + dmdInfoId: JSON.parse(sessionStorage.getItem('user') || '{}')?.dmdInfoId?.toString() || searchParams.get('dmdInfoId') + (searchParams.get('bznmTotNo') || ''), + dmdInfoFk: JSON.parse(sessionStorage.getItem('user') || '{}')?.dmdInfoId?.toString() || searchParams.get('dmdInfoId') + (searchParams.get('bznmTotNo') || ''), + dmdCoNm: JSON.parse(sessionStorage.getItem('user') || '{}')?.dmdCoNm?.toString() || data.sdmNm, + ctpvCd: JSON.parse(sessionStorage.getItem('user') || '{}')?.ctpvCd?.toString() || searchParams.get('ctpvCd') || '', + sggCd: JSON.parse(sessionStorage.getItem('user') || '{}')?.sggCd?.toString() || searchParams.get('sggCd') || '', + daddr: JSON.parse(sessionStorage.getItem('user') || '{}')?.daddr?.toString() || searchParams.get('daddr') || '', + telno: JSON.parse(sessionStorage.getItem('user') || '{}')?.telno?.toString() || searchParams.get('telno') || '', + rgtr: JSON.parse(sessionStorage.getItem('user') || '{}')?.rgtr?.toString() || searchParams.get('rgtr') || '', + useUsgCd: data.usePurpose || '', + wntUntprc: Number(data.money) || '', + dmndTmng: data.demandYmd || new Date(), + dmndQty: Number(data.demandQnty) || '', + grssClfg: Number(data.grssClfg) || '', + tn: Number(data.tn) || '', + combResdch: Number(data.combResdch) || '', + tph: Number(data.tph) || '', + trbt: Number(data.trbt) || '', + ph: Number(data.ph) || '', + blgcOxygDmndQnt: Number(data.bod) || '', + clIonQnt: Number(data.clIonQnt) || '', + smll: Number(data.smll) || '', + cdtnv: Number(data.cdtnv) || '', + crmty: Number(data.crmty) || '', + rmrk: data.rmrk || '', + bzmnNo: "", + dmdAplyPswd: "", + index: 0, + reqDt: "", + dmdInfoSn: 0, + status : '', + }; + + await insertSdmInfoData(apiData); + } catch (error) { + console.error('Error submitting form:', error); + } + }; + + return ( + <div className="min-h-screen bg-gray-50"> + <div className="container mx-auto px-4 py-8"> + <div className="text-center mb-8"> + <h1 className="text-4xl font-bold text-gray-900 underline"> + 수요정보 등록 + </h1> + </div> + + <div className="max-w-3xl mx-auto bg-white rounded-lg shadow-md p-6"> + <FormProvider {...form}> + <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6"> + <SdmInfoRegForm + form={form} + onCheckboxChange={setIsmoneyDisabled} + facilityName={facilityName} + /> + <div className="flex justify-center pt-4"> + <Button + type="submit" + className="w-40 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition-colors duration-200" + > + 수요정보 등록 + </Button> + </div> + </form> + </FormProvider> + </div> + </div> + + {!isLogin? + <UiModal + body={<SdmLogin/>} + bodyClass="sm:max-w-[90vw] w-[530px] h-[430px]" + open={!isLogin} + onOpenChange={(open) => !open && setIsLogin(false)} + noHeaderYn="Y" + noFooterYn="Y" + /> + :null} + <Toaster position="top-center" /> + </div> + ); +} + +export default function MyForm() { + return ( + <Suspense fallback={<div>Loading...</div>}> + <SdmInfoInsertContent /> + </Suspense> + ); +} + diff --git a/apps/dm/app/pages/sdmMng/sdmInsert/page.tsx b/apps/dm/app/pages/sdmMng/sdmInsert/page.tsx new file mode 100644 index 000000000..040304347 --- /dev/null +++ b/apps/dm/app/pages/sdmMng/sdmInsert/page.tsx @@ -0,0 +1,69 @@ +"use client"; + +import { useDmStore } from "@/app/store"; +import type { DemandCompType } from "@/app/store/sdmMng"; +import SdmInsertForm from '@common/business_components/ui/sdmInsertForm'; +import { useRouter } from "next/navigation"; +import { useCallback, useEffect, useRef } from "react"; +import { Toaster } from "react-hot-toast"; + +export default function MyForm() { + const {Common, initializeCommonData, getDemandCompList, insertSdmData, Sdm} = useDmStore((state) => state); + const { selectSidoData, selectSigunData } = Common; + const { demandCompList, successNextPage } = Sdm; + const router = useRouter(); + const formDataRef = useRef<DemandCompType | null>(null); + + useEffect(() => { + initializeCommonData(); + }, [initializeCommonData]); + + useEffect(() => { + if (successNextPage && formDataRef.current) { + const data = formDataRef.current; + const queryParams = new URLSearchParams({ + dmdCoNm: data.dmdCoNm || '', + ctpvCd: data.ctpvCd || '', + sggCd: data.sggCd || '', + dmdInfoId: data.dmdInfoId || '', + daddr: data.daddr || '', + telno: data.telno || '', + }); + router.push(`/pages/sdmMng/sdmInfoInsert?${queryParams.toString()}`); + } + }, [successNextPage, router]); + + const callback = useCallback((searchText: string, pageCnt: number) => { + searchText = searchText.trim(); + if(searchText.length > 0) { + getDemandCompList(searchText, pageCnt); + } + }, [getDemandCompList]); + + const handleInsertSdmData = useCallback((data: import('@common/business_components/ui/sdmInsertForm/form').DemandCompType) => { + const convertedData: DemandCompType = { + ...data, + dmdInfoSn: '', + dmdInfoFk: '', + status: '', + }; + formDataRef.current = convertedData; + insertSdmData(convertedData).catch(error => { + console.error('Error inserting SDM data:', error); + }); + }, [insertSdmData]); + + return ( + <div className="min-h-screen bg-gray-50"> + <SdmInsertForm + selectSidoData={selectSidoData} + selectSigunData={selectSigunData} + dataList={demandCompList} + rtnValue={callback} + rtnInputData={handleInsertSdmData} + /> + <Toaster position="top-center" /> + </div> + ); +} + diff --git a/apps/dm/app/pages/sdmMng/sdmLogin/page.tsx b/apps/dm/app/pages/sdmMng/sdmLogin/page.tsx new file mode 100644 index 000000000..2fd6fc461 --- /dev/null +++ b/apps/dm/app/pages/sdmMng/sdmLogin/page.tsx @@ -0,0 +1,18 @@ +'use client' + +import { SdmLoginForm } from '@/components/ui/sdmLoginForm/component'; + +export default function SdmLogin() { + return ( + <div className="container mx-auto px-4 py-8"> + <div className="text-center mb-8"> + <h1 className="text-4xl font-bold text-gray-900 underline"> + 수요처 로그인 + </h1> + </div> + <div className="max-w-3xl mx-auto bg-white rounded-lg shadow-md p-6"> + <SdmLoginForm /> + </div> + </div> + ); +} \ No newline at end of file diff --git a/apps/dm/app/pages/wrAbout/page.tsx b/apps/dm/app/pages/wrAbout/page.tsx new file mode 100644 index 000000000..e52549e66 --- /dev/null +++ b/apps/dm/app/pages/wrAbout/page.tsx @@ -0,0 +1,335 @@ +'use client'; + +import { useEffect, useRef, useState } from 'react'; +import Image from 'next/image'; + +const NAVS = [ + { id: 'card1', label: '물재이용이란' }, + { id: 'card2', label: '물재이용 필요성' }, + { id: 'card3', label: '빗물 재이용' }, + { id: 'card4', label: '중수 재이용' }, + { id: 'card5', label: '하수 재이용' }, + { id: 'card6', label: '물재이용 목표' }, +]; + +export default function WrAboutPage() { + const [activeIdx, setActiveIdx] = useState(0); + const navRefs = useRef<(HTMLLIElement | null)[]>([]); + const cardRefs = useRef<(HTMLElement | null)[]>([]); + + // 클릭 시 이동 + const handleNavClick = (idx: number) => { + setActiveIdx(idx); + const targetCard = cardRefs.current[idx]; + if (targetCard) { + targetCard.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + }; + + // 키보드 이벤트 처리 + const handleKeyDown = (e: React.KeyboardEvent, idx: number) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + handleNavClick(idx); + } + }; + + useEffect(() => { + const observerOptions = { + root: null, + rootMargin: '-200px 0px 0px 0px', // 상단에서 200px 지점을 기준으로 + threshold: 0 + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const idx = cardRefs.current.findIndex(ref => ref === entry.target); + if (idx !== -1) { + setActiveIdx(idx); + } + } + }); + }, observerOptions); + + // 각 카드 요소를 관찰 + cardRefs.current.forEach((card) => { + if (card) { + observer.observe(card); + } + }); + + return () => { + cardRefs.current.forEach((card) => { + if (card) { + observer.unobserve(card); + } + }); + }; + }, []); + + return ( + <main className="relative w-[950px] mx-auto pt-[100px] font-sans"> + {/* 사이드바 */} + <nav className="fixed left-[290px] top-[195px] w-[210px] z-50" aria-label="물재이용 정보 섹션 내비게이션"> + <ul role="list" className="relative space-y-6"> + {NAVS.map((nav, idx) => ( + <li + key={nav.id} + ref={(el) => { navRefs.current[idx] = el; }} + role="listitem" + tabIndex={0} + aria-current={idx === activeIdx ? 'true' : 'false'} + aria-label={`현재 위치: ${nav.label}`} + onClick={() => handleNavClick(idx)} + onKeyDown={(e) => handleKeyDown(e, idx)} + className={`nav-item relative pl-6 text-2xl font-bold text-gray-700 cursor-pointer transition-all duration-300 + after:content-[''] after:absolute after:top-6 after:left-[0.5rem] after:w-[2px] after:h-[24px] after:bg-[#C5C5C5] + ${idx === activeIdx ? 'text-4xl font-bold text-gray-900' : ''}`} + > + <span className={`absolute left-[0.5rem] top-1 w-4 h-4 rounded-full -translate-x-1/2 transition-all duration-300 + ${idx === activeIdx ? 'bg-blue-500 border-blue-500' : 'bg-white border-gray-400 border'}`}></span> + {nav.label} + </li> + ))} + </ul> + </nav> + + <article ref={(el) => { cardRefs.current[0] = el; }} className="card-wrap pl-[100px] mb-24 !pt-0" id="card1" aria-labelledby="card1-title"> + <h2 id="card1-title" className="relative text-center text-4xl font-bold text-gray-900 mb-6"> + <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span> + 물재이용이란 + </h2> + <section aria-labelledby="card1-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] "> + <h1 id="card1-desc" className="text-[#269DDA] text-4xl font-bold mb-8">물 재이용이 무엇인가요?</h1> + <p className="text-2xl font-bold mb-10 leading-relaxed"> + 물 재이용은 빗물, 오수, 하수처리수, 폐수처리수 및 발전소 온배수를<br /> + 물 재이용시설을 이용하여 처리하고, 그 처리된 물을 생활, 공업, 농업, 조경,<br /> + 하천 유지 등의 용도로 이용하는 것을 말합니다. + </p> + <Image + src="/img/wrAbout/img_01_1.png" + alt="이 이미지는 물 재이용 시스템의 개요를 나타냅니다. 가정, 공공기관, 하수처리장 등에서 발생한 생활하수, 빗물, 하수처리수를 물 재이용 시설에서 처리한 후, 청소나 화장실, 농업, 살수차, 하천 유지, 공장, 공원 및 골프장 등 다양한 용도로 활용하는 과정을 도식화한 것입니다." + width={800} + height={400} + className="w-[90%] mx-auto mb-8 rounded" + /> + <p className="text-center"> + 환경부는 2011년에 '물의 재이용 촉진 및 지원에 관한 법률'을 제정하여<br /> + 한국환경공단과 함께 물 재이용 확대 및 촉진을 위해 노력하고 있습니다. + </p> + </section> + </article> + + {/* 카드2 */} + <article ref={(el) => { cardRefs.current[1] = el; }} className="card-wrap pl-[100px] mb-24" id="card2" aria-labelledby="card2-title"> + <h2 id="card2-title" className="relative text-center text-4xl font-bold text-gray-900 mb-6"> + <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span> + 물재이용 필요성 + </h2> + <section aria-labelledby="card2-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] "> + <h1 id="card2-desc" className="text-[#EE7B62] text-4xl font-bold mb-8">물 재이용, 왜 필요한가요?</h1> + <p className="text-2xl font-bold mb-10 leading-relaxed"> + 빗물, 중수, 하수처리수는 지속적으로 이용 가능한 순환자원입니다.<br /> + 물 재이용을 통한 효율적인 수자원 활용은 물 스트레스국가인 우리나라에서<br />가뭄대응능력 향상 및 하천수질보전을 위해 반드시 필요한 일입니다. + </p> + <Image + src="/img/wrAbout/img_02_1.png" + alt="이 이미지는 기후변화로 인한 온도 상승 추이를 설명한다. 왼쪽에는 지구 그림과 온도계가 함께 표시되어 있으며, 지구 평균 기온은 지난 100년간 약 0.9℃ 상승했음을 나타낸다. 오른쪽에는 대한민국 지도와 함께 온도계가 있으며, 지난 100년간 약 1.8℃ 상승했음을 보여준다. 이는 지구 평균보다 2배 높은 수치이며, 자료 출처는 「기후변화 평가보고서 2020, 환경부·기상청」이다." + width={800} + height={400} + className="w-[90%] mx-auto mb-8 w-[80%]" + /> + <p className="text-2xl font-bold mb-10 leading-relaxed"> + - 우리나라의 기후변화 진행속도는 세계 평균을 상회하고 있습니다.<br /> + - 기후변화로 인한 국지적인 가뭄은 더욱 자주, 더욱 심하게 일어나고 있으며, 우리의 물 안보를 위협하고 있습니다. + </p> + <Image + src="/img/wrAbout/img_02_2.png" + alt="세계 평균 1인당 강수량은 15,044m³이며, 대한민국은 2,546m³로 약 1/6 수준입니다. 계절별 강수량은 봄 10%, 여름 70%, 가을 15%, 겨울 5%입니다. 이는 여름철에 강수량이 집중되는 문제를 나타냅니다." + width={800} + height={400} + className="w-[90%] mx-auto mb-8" + /> + <p className="text-2xl font-bold mb-10 leading-relaxed"> + - 우리나라의 1인당 강수량은 2,546㎥ 으로 세계 평균 15,044㎥의 약 1/6 수준입니다.<br /> + - 우리나라 강수량의 70%는 여름철에 집중되어 있어 이용 가능한 수자원확보가 어렵습니다. + </p> + <Image + src="/img/wrAbout/img_02_3.png" + alt="물 재이용은 환경을 보호하며 지속 가능한 발전이 가능하게 하고, 안정적인 수자원 확보, 깨끗하고 경제적인 공업용수 공급, 하천 수질 개선을 통한 생태계 회복에 기여합니다." + width={800} + height={400} + className="w-[93%] mx-auto" + /> + </section> + </article> + + {/* 카드3 */} + <article ref={(el) => { cardRefs.current[2] = el; }} className="card-wrap pl-[100px] mb-24" id="card3" aria-labelledby="card3-title"> + <h2 id="card3-title" className="relative text-center text-4xl font-bold text-gray-900 mb-6"> + <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span> + 빗물 재이용 + </h2> + <section aria-labelledby="card3-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] "> + <h1 id="card3-desc" className="text-[#269DDA] text-4xl font-bold mb-6">친환경 수자원 빗물,<br />편리하게 사용할 수 있어요!</h1> + <p className="text-2xl font-bold mb-10 leading-relaxed">가뭄을 극복하고 홍수를 예방하기 위해<br />비가 내릴 때 빗물을 모아두었다가 사용합니다.</p> + <Image + src="/img/wrAbout/img_03_1.png" + alt="주택 지붕에 내린 빗물을 저장조에 모아 조경용수, 화장실용수, 세척·살수용수로 재활용하는 과정을 보여줍니다." + width={800} + height={400} + className="w-[90%] mx-auto mb-6" + /> + <Image + src="/img/wrAbout/img_03_2.png" + alt="빗물이용" + width={200} + height={100} + className="mb-5 w-[20%]" + /> + <p className="text-2xl font-bold leading-relaxed"> + - 의무 설치대상: 지붕면적 1,000㎡ 이상의 운동장, 체육관, 공공업무시설 등<br /> + - 설 치 기 준: 집수시설, 처리시설, 빗물 저류조(지붕 집수면적 x 0.05m 이상)<br /> + - 활 용 용 도: 골프장 등의 조경용수, 화장실용수, 세척·살수용수 등 + </p> + </section> + </article> + + {/* 카드4 */} + <article ref={(el) => { cardRefs.current[3] = el; }} className="card-wrap pl-[100px] mb-24" id="card4" aria-labelledby="card4-title"> + <h2 id="card4-title" className="relative text-center text-4xl font-bold text-gray-900 mb-6"> + <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span> + 중수 재이용 + </h2> + <section aria-labelledby="card4-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] "> + <h1 id="card4-desc" className="text-[#9771B0] text-4xl font-bold mb-6">요모조모 쓸모 많은 중수,<br />알뜰하게 재이용할 수 있어요!</h1> + <p className="text-2xl font-bold mb-10 leading-relaxed">한번 사용한 물을 중수도 시설을 통해 재생하여<br />개별적 또는 지역적으로 재이용할 수 있습니다.</p> + <Image + src="/img/wrAbout/img_04_1.png" + alt="욕실, 세면대, 주방, 세탁기 등에서 발생한 생활용수를 중수도 시설에서 처리하여 화장실 변기용수와 조경용수로 재이용하는 시스템 흐름도입니다." + width={800} + height={400} + className="w-[90%] mx-auto mb-6" + /> + <Image + src="/img/wrAbout/img_04_2.png" + alt="중수재이용" + width={200} + height={100} + className="mb-5 w-[20%]" + /> + <p className="text-2xl font-bold leading-relaxed"> + - 의무 설치대상: 일정규모 이상의 대규모점포, 숙박/목욕장, 공장, 각종 개발사업 등<br /> + - 의무 재이용량: 물 사용량의 10% 이상<br /> + - 활 용 용 도: 청소·화장실용수, 세척·살수용수, 조경용수, 공업용수 등 + </p> + </section> + </article> + + {/* 카드5 */} + <article ref={(el) => { cardRefs.current[4] = el; }} className="card-wrap pl-[100px] mb-24" id="card5" aria-labelledby="card5-title"> + <h2 id="card5-title" className="relative text-center text-4xl font-bold text-gray-900 mb-6"> + <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span> + 하수 재이용 + </h2> + <section aria-labelledby="card5-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] "> + <h1 id="card5-desc" className="text-[#00A5B1] text-4xl font-bold mb-6">아직 할 일이 많은 하수처리수,<br />풍족하게 재이용할 수 있어요!</h1> + <p className="text-2xl font-bold mb-10 leading-relaxed">사용하고 버려져 공공하수처리장으로 모여든 물은<br />용도에 맞는 처리 후 재이용 할 수 있습니다.</p> + <Image + src="/img/wrAbout/img_05_1.png" + alt="주택과 건물에서 발생한 하수가 공공하수처리장을 거쳐 처리된 후, 물 재이용 시설에서 정화되어 공업용수, 하천유지용수, 농업용수, 세척·살수용수로 재활용됩니다." + width={800} + height={400} + className="w-[90%] mx-auto mb-6" + /> + <Image + src="/img/wrAbout/img_05_2.png" + alt="하수처리 재이용" + width={200} + height={100} + className="mb-5 w-[20%]" + /> + <p className="text-2xl font-bold leading-relaxed"> + - 의무 이용대상: 공공하수처리장(시설용량 5,000㎥/일 이상)<br /> + - 의무 재이용량: 일 하수처리량의 10% 이상<br /> + - 활 용 용 도: 공업용수, 하천유지용수, 농업용수 등 + </p> + </section> + </article> + + {/* 카드6 */} + <article ref={(el) => { cardRefs.current[5] = el; }} className="card-wrap pl-[100px] mb-24" id="card6" aria-labelledby="card6-title"> + <h2 id="card6-title" className="relative text-center text-4xl font-bold text-gray-900 mb-6"> + <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span> + 물재이용 목표 + </h2> + <section aria-labelledby="card6-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] "> + <h1 id="card6-desc" className="text-[#269DDA] text-4xl font-bold mb-6">2030년 물 재이용 목표를 위해<br />모두의 관심과 노력이 필요합니다.</h1> + <p className="text-2xl font-bold mb-6 leading-relaxed"> + 환경부는 2030년까지의 제2차 물 재이용 기본계획을 수립하여<br />한국환경공단과 함께 물 재이용 확대 및 촉진을 위해 노력하고 있습니다. + </p> + <Image + src="/img/wrAbout/img_06_1.png" + alt="지속가능한 물 재이용 정착으로 건전한 물순환 확산" + width={800} + height={400} + className="w-[80%] mx-auto mb-6" + /> + <div className="flex gap-3 flex-wrap justify-between bg-gray-100 p-6 rounded-lg mb-8"> + <div className="flex-1"> + <Image + src="/img/wrAbout/icon_01.png" + alt="" + width={70} + height={70} + className="mx-auto mb-4 w-[auto] h-[70px]" + /> + <h3 className="text-center font-semibold text-nowrap mb-2">도시 물 순환이용<br />체계로의 전환</h3> + <ul className="text-sm text-gray-600 leading-relaxed space-y-1"> + <li className="text-nowrap">- 지속가능한 물 순환이용체계 구축</li> + <li>- 물 재이용시설 관리체계 강화</li> + </ul> + </div> + <div className="flex-1 text-center"> + <Image + src="/img/wrAbout/icon_02.png" + alt="" + width={70} + height={70} + className="mx-auto mb-4 w-[auto] h-[70px]" + /> + <h3 className="text-center font-semibold text-nowrap mb-2">유역기반 하수처리수 재이용<br />수요확대 및 공급체계 구축</h3> + <ul className="text-sm text-gray-600 leading-relaxed space-y-1"> + <li>- 유역기반 통합물관리 연계 강화</li> + <li>- 하수처리수 재이용 공업용수 공급 활성화</li> + <li>- 하수처리수 재이용을 활용한 물순환 촉진</li> + </ul> + </div> + <div className="flex-1 text-center"> + <Image + src="/img/wrAbout/icon_03.png" + alt="" + width={70} + height={70} + className="mx-auto mb-4 w-[auto] h-[70px]" + /> + <h3 className="text-center font-semibold text-nowrap mb-2">물 재이용 인식제고<br />및 산업발전 기반 마련</h3> + <ul className="text-sm text-gray-600 leading-relaxed space-y-1"> + <li>- 물 재이용 교육 및 대국민 홍보 강화</li> + <li>- 핵심기술 육성 및 산업발전 지원 강화</li> + </ul> + </div> + </div> + <Image + src="/img/wrAbout/img_06_2.png" + alt="물 재이용량은 2014년 13.3억톤에서 2030년 25.9억톤까지 증가할 것으로 예상됩니다. 그에 따른 기대 효과로는 연간 상수대체 17.9억톤, 물산업 시장성장 약 2조3,541억 원, 건천화된 73개 하천 해소, 약 20,550명의 고용 효과가 포함됩니다." + width={800} + height={400} + className="w-[90%] mx-auto" + /> + </section> + </article> + </main> + ); +} diff --git a/apps/dm/app/pages/wrExample/page.tsx b/apps/dm/app/pages/wrExample/page.tsx new file mode 100644 index 000000000..066e0abe2 --- /dev/null +++ b/apps/dm/app/pages/wrExample/page.tsx @@ -0,0 +1,364 @@ +import Image from "next/image"; + +export default function WrExamplePage() { + return ( + <div className="bg-[#F1F6F9]"> + <div className="relative w-[950px] mx-auto pt-[50px] font-sans"> + <h2 className="relative text-center text-4xl font-bold text-gray-900 mb-6"> + <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 rounded-full"></span> + 물 재이용사례 + </h2> + </div> + <div className="bg-[#F1F6F9] text-gray-800"> + <div className="relative w-[950px] mx-auto pt-[50px] font-sans"> + {/* 카드 1 */} + <div className="card-wrap mb-24" id="card1"> + <h2 className="relative text-center text-4xl font-bold text-gray-900 mb-6"> + <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span> + 사업사례 1 + </h2> + <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]"> + {/* 사업명 */} + <section> + <h2 className="text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업명</h2> + <p className="text-2xl font-semibold text-gray-800 leading-relaxed"> + 경기권역 반도체 사업장 물 재이용 사업<br /> + : 삼성전자 반도체 사업장 하수재이용수 공급(재이용시설 설치, 공급망 구축 등) + </p> + </section> + {/* 사업 배경 및 목적 */} + <section className="mt-8"> + <h2 className="text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 배경 및 목적</h2> + <p className="text-2xl font-semibold text-gray-800 leading-relaxed"> + 삼성전자는 환경경영전략 실현과 반도체 공장의 안정적 용수 공급을 위해 하수 재이용수를 공업용수로 도입하기로 결정 + </p> + </section> + {/* 사업 주요 내용 */} + <section className="mt-8"> + <h2 className="text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 주요 내용</h2> + <p className="text-2xl font-semibold text-gray-800 leading-relaxed"> + 1단계 사업[화성·오산(12만㎥/일) → 삼성 화성·기흥(29년 공급)]<br /> + 2단계 사업[수원(21만㎥/일) → 삼성 평택(30년 공급)] + </p> + </section> + {/* 특이사항 */} + <section className="mt-8"> + <h2 className="text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">특이사항</h2> + <p className="text-2xl font-semibold text-gray-800 leading-relaxed"> + 본 사업은 광역 하수 재이용 공급망 구축의 첫 사업으로 초기 민관협의체를 구성·운영 후 관계기관(환경부, 경기도, 지자체, 공단, 수공, 삼성전자) 간 MOU 체결을 통해 사업을 추진하였으며, 반도체 사업장에 하수 재이용수를 공업용수로 공급하는 국내 첫 사업으로 위협부담 해소를 위해 사업을 단계별로 시행 + </p> + </section> + {/* 단계별 시각 정보 */} + <section className="bg-white px-4 mt-8"> + <Image + src="/img/wrExample/img_ex_01_1.png" + alt="사업단계 설명" + width={800} + height={400} + className="w-[100%] mx-auto mb-8" + /> + </section> + </div> + </div> + + {/* 카드2 */} + <div className="card-wrap mb-24" id="card2"> + <h2 className="relative text-center text-4xl font-bold text-gray-900 mb-6"> + <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span> + 사업사례 2 + </h2> + <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]"> + {/* 사업명 */} + <section> + <h2 className="text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업명</h2> + <p className="text-2xl font-semibold text-gray-800 leading-relaxed"> + 경기도 파주시 하수재이용<br /> + : 운정·금촌하수처리시설의 하수처리수를 막공법(U/F, R/O)으로 재처리하여 파주 LCD 산업단지내 3개 업체*에 공업용수 공급<br /><br /> + *LG디스플레이(P10공장), 희성전자, 엔비텍 등 + </p> + </section> + {/* 사업 방식 */} + <section className="mt-8"> + <h2 className="text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 방식</h2> + <p className="text-2xl font-semibold text-gray-800 leading-relaxed"> + 민간투자사업(시행사 : 파주그린허브(주), 운영사 : 테크로스) + </p> + </section> + {/* 사업 주요 내용 */} + <section className="mt-8"> + <h2 className="text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 주요 내용</h2> + <p className="text-2xl font-semibold text-gray-800 leading-relaxed"> + 처리공정 : 전처리분리막(U/F) + 역삼투서비(R/O)<br /> + 공급량 : 4만m³/일<br /> + 관로 : 13.6km<br /> + 사업비 : 651억원 + </p> + </section> + {/* 특이사항 */} + <section className="mt-8"> + <h2 className="text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">특이사항</h2> + <p className="text-2xl font-semibold text-gray-800 leading-relaxed"> + 하수처리수 재이용시설 자체 농축폐수 처리공정 개발 및 적용 성공사례 + </p> + <div className="grid grid-cols-1 gap-0 items-start"> + {/* 좌측 이미지 */} + <div> + <Image + src="/img/wrExample/img_ex_02_1.png" + alt="적용 성공사례 지도" + width={1000} + height={1200} + className="w-[100%] mx-auto" + /> + </div> + + {/* 우측 표 */} + <div className="space-y-3"> + {/* 하수처리수 공급 */} + <div> + <table className="min-w-full h-[500px]text-center border border-black"> + <colgroup> + <col style={{ width: "20%" }} /> + <col style={{ width: "40%" }} /> + <col style={{ width: "40%" }} /> + </colgroup> + <tbody> + <tr> + <td colSpan={3} className="bg-[#ffc000] h-[30px] text-xl text-white font-semibold text-center pt-[6px] pb-[6px] px-0">하수처리수 공급</td> + </tr> + <tr className="text-xl h-[30px]"> + <td className="text-xl h-[30px] border-black border p-1 font-bold">위치</td> + <td className="text-xl h-[30px] border-black border p-1 font-bold">금촌하수</td> + <td className="text-xl h-[30px] border-black border p-1 font-bold">운정하수</td> + </tr> + <tr className="text-sm"> + <td className="text-xl h-[30px] border-black border p-1 font-bold">시설용량</td> + <td className="text-xl h-[30px] border-black border p-1 font-bold">44,000㎥/일</td> + <td className="text-xl h-[30px] border-black border p-1 font-bold">60,000㎥/일</td> + </tr> + <tr className="text-sm"> + <td className="text-xl h-[30px] border-black border p-1 font-bold">유입량</td> + <td className="text-xl h-[30px] border-black border p-1 font-bold">27,000㎥/일<br />자연유하</td> + <td className="text-xl h-[30px] border-black border p-1 font-bold">30,000㎥/일<br />이송펌프장</td> + </tr> + </tbody> + </table> + {/* 첫 화살표 (자연유하 / 관로이송) */} + <div className="flex h-[30px] justify-between items-center my-3 px-4"> + <div className="flex text-xl items-center gap-1 text-orange-600 font-bold pl-6"> + <span>자연유하: 161m</span> + <Image + src="/img/wrExample/img_arrow_down_1.png" + alt="오른쪽 화살표" + width={24} + height={24} + className="h-6 w-6" + /> + </div> + <div className="flex text-xl items-center gap-1 text-orange-600 font-bold"> + <Image + src="/img/wrExample/img_arrow_down_1.png" + alt="왼쪽 화살표" + width={24} + height={24} + className="h-6 w-6" + /> + <span>관로이송: 3.2km</span> + </div> + </div> + </div> + + {/* 물재이용 처리시설 */} + <div> + <table className="min-w-full text-center border border-black"> + <colgroup> + <col style={{ width: "50%" }} /> + <col style={{ width: "50%" }} /> + </colgroup> + <tbody> + <tr> + <td colSpan={2} className="bg-[#00b050] text-xl h-[30px] text-white font-semibold text-center pt-[6px] pb-[6px] px-0">물재이용 처리시설</td> + </tr> + <tr className="text-sm"> + <td className="text-xl h-[30px] border-black border p-1 font-bold">유입유량</td> + <td className="text-xl h-[30px] border-black border p-1 font-bold">57,000㎥/일</td> + </tr> + <tr className="text-sm"> + <td className="text-xl h-[30px] border-black border p-1 font-bold">재이용시설</td> + <td className="text-xl h-[30px] border-black border p-1 font-bold">40,000㎥/일</td> + </tr> + <tr className="text-sm"> + <td className="text-xl h-[30px] border-black border p-1 font-bold">농축폐수처리</td> + <td className="text-xl h-[30px] border-black border p-1 font-bold">17,000㎥/일</td> + </tr> + </tbody> + </table> + {/* 두 번째 화살표 (공급관로) */} + <div className="flex flex-col items-center my-3"> + <div className="flex h-[30px] items-center gap-1 text-xl text-blue-600 font-semibold"> + <span>공급관로 L=10.4km</span> + <Image + src="/img/wrExample/img_arrow_down_2.png" + alt="아래 화살표" + width={24} + height={24} + className="h-6 w-6" + /> + </div> + </div> + </div> + + {/* 수요처 공급 */} + <div> + <table className="min-w-full text-center border border-black"> + <colgroup> + <col style={{ width: "50%" }} /> + <col style={{ width: "50%" }} /> + </colgroup> + <tbody> + <tr> + <td colSpan={2} className="bg-[#3399ff] h-[30px] text-xl text-white font-semibold text-center pt-[6px] pb-[6px] px-0">수요처 공급</td> + </tr> + <tr className="text-sm"> + <td className="text-xl h-[30px] border-black border p-1 font-bold">수요처</td> + <td className="text-xl h-[30px] border-black border p-1 font-bold">LG디스플레이 외 2개사</td> + </tr> + <tr className="text-sm"> + <td className="text-xl h-[30px] border-black border p-1 font-bold">수요량</td> + <td className="text-xl h-[30px] border-black border p-1 font-bold">40,000㎥/일</td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + </section> + </div> + </div> + + {/* 카드3 */} + <div className="card-wrap mb-24" id="card3"> + <h2 className="relative text-center text-4xl font-bold text-gray-900 mb-6"> + <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span> + 사업사례 3 + </h2> + <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]"> + {/* 사업명 */} + <section> + <h2 className="text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업명</h2> + <p className="text-2xl font-semibold text-gray-800 leading-relaxed"> + 충남 보령 하수재이용<br /> + : 보령·신보령화력발전소에 하루 1만톤의 탈황용수 공급을 위해 보령하수처리시설의 하수처리수 재이용 사업 추진 + </p> + </section> + {/* 사업 방식 */} + <section className="mt-8"> + <h2 className="text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 방식</h2> + <p className="text-2xl font-semibold text-gray-800 leading-relaxed"> + 2017년 한국환경공단과 사업대행 위 · 수탁 협약 체결 + </p> + </section> + {/* 사업 주요 내용 */} + <section className="mt-8"> + <h2 className="text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 주요 내용</h2> + <p className="text-2xl font-semibold text-gray-800 leading-relaxed"> + 처리공정 : 전처리분리막(U/F) + 역삼투서비(R/O)<br /> + 공급량 : 1만m3/일<br /> + 관로 : 8.7km<br /> + 사업비 : 315억원(국비 216억원, 재원협의(안)) + </p> + </section> + {/* 특이사항 */} + <section className="mt-8"> + <h2 className="text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">특이사항</h2> + <p className="text-2xl font-semibold text-gray-800 leading-relaxed"> + 국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 가뭄 시 지역사회 기여 차원에서 기관간 MOU (환경부, 충청남도, 보령시, 한국중부발전㈜)를 바탕 + 으로 추진 되어 경제성보다 공익성을 바탕으로 국가전력 기반시설의 안정적 운영 도모 + </p> + <div className="p-2"> + <Image + src="/img/wrExample/img_ex_03_1.png" + alt="국가전력 기반시설 설명" + width={700} + height={350} + className="w-[100%] mx-auto" + /> + </div> + </section> + </div> + </div> + + {/* 카드4 */} + <div className="card-wrap mb-24" id="card4"> + <h2 className="relative text-center text-4xl font-bold text-gray-900 mb-6"> + <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span> + 사업사례 4 + </h2> + <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]"> + {/* 사업명 */} + <section> + <h2 className="text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업명</h2> + <p className="text-2xl font-semibold text-gray-800 leading-relaxed"> + 경기도 수원시 빗물이용과 중수도 + </p> + </section> + {/* 사업 내용 */} + <section className="mt-8"> + <h2 className="text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 내용</h2> + <p className="text-2xl font-semibold text-gray-800 leading-relaxed"> + (빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기 도시 열섬효과 및 도로 비산먼지 저감<br /> +   ※ 시설 가동중 도로 노면 온도의 7.2 ~ 26.3℃ 감소 효과 확인(21.7월, 수원시청).<br /> +   다만, 가뭄기나 강우량이 적을 경우 빗물을 원활히 공급하기 다소 곤란<br /><br /> + - (중수도) 수원시청, 장안구청, 월드컵경기장에 빗물 연계 중수도를 화장실·조경용수 등으로 사용하여 수도요금 절감(연 7백~30백만원) + </p> + <div className="grid grid-cols-1 md:grid-cols-2 gap-2 items-start p-2"> + <div> + <Image + src="/img/wrExample/img_ex_04_1.png" + alt="월드컵경기장 인근도로 노면 살수 이미지" + width={350} + height={250} + className="w-[100%] mx-auto" + /> + <span className="text-xl block text-center font-semibold my-2">＜월드컵경기장 인근도로 노면 살수＞</span> + </div> + <div> + <Image + src="/img/wrExample/img_ex_04_2.png" + alt="주유기 모양의 빗물 공급기 이미지" + width={350} + height={250} + className="w-[100%] mx-auto" + /> + <span className="text-xl block text-center font-semibold my-2">＜주유기 모양의 빗물 공급기＞</span> + </div> + <div> + <Image + src="/img/wrExample/img_ex_04_3.png" + alt="빗물주유기에서 살수용수 공급 이미지" + width={350} + height={250} + className="w-[100%] mx-auto" + /> + <span className="text-xl block text-center font-semibold my-2">＜빗물주유기에서 살수용수 공급＞</span> + </div> + <div> + <Image + src="/img/wrExample/img_ex_04_4.png" + alt="빗물 공급기 및 빗물분사장치 위치" + width={350} + height={250} + className="w-[100%] mx-auto" + /> + <span className="text-xl block text-center font-semibold my-2">＜빗물 공급기 및 빗물분사장치 위치＞</span> + </div> + </div> + </section> + </div> + </div> + </div> + </div> + </div> + ); +} + diff --git a/apps/dm/app/pages/wrOverview/page.tsx b/apps/dm/app/pages/wrOverview/page.tsx new file mode 100644 index 000000000..f8aa3b933 --- /dev/null +++ b/apps/dm/app/pages/wrOverview/page.tsx @@ -0,0 +1,113 @@ +import Image from "next/image"; + +export default function WrOverviewPage() { + return ( + <div className="bg-[#F1F6F9]"> + <div className="relative w-[950px] mx-auto pt-[50px] font-sans"> + {/* 카드 1 - 물재이용 사업 추진 절차 */} + <div className="card-wrap mb-24" id="card1"> + <h2 className="relative text-center text-4xl font-bold text-gray-900 mb-6"> + <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span> + 물재이용 사업 추진 절차 + </h2> + <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]"> + <table className="table-fixed w-full text-center text-sm"> + <caption className="sr-only">물 재이용 추진 절차 상세 표</caption> + <colgroup> + <col style={{ width: "28%" }} /> + <col style={{ width: "2%" }} /> + <col style={{ width: "35%" }} /> + <col style={{ width: "5%" }} /> + <col style={{ width: "30%" }} /> + </colgroup> + <tbody> + {/* 1단계 */} + <tr><td></td><td></td><td className="text-xl bg-gray-100 font-bold py-3">타당성 조사</td><td></td><td></td></tr> + <tr><td></td><td></td><td className="text-xl font-bold text-center">↓</td><td></td><td></td></tr> + {/* 2단계 */} + <tr><td className="text-xl bg-yellow-400 text-black font-bold py-3">매칭시스템 신청</td><td></td><td className="text-xl bg-gray-100 font-bold py-3">사업계획(안) 수립</td><td></td><td></td></tr> + <tr><td></td><td></td><td className="text-xl font-bold text-center">↓</td><td></td><td></td></tr> + {/* 3단계 */} + <tr><td className="text-xl bg-yellow-400 text-black font-bold py-3">하수도정보시스템 신청</td><td></td><td className="text-xl bg-gray-100 font-bold py-3">국고지원 신청</td><td className="text-lg">→</td><td className="text-xl bg-green-200 font-bold py-3">기술검토<br />(한국환경공단)</td></tr> + <tr><td></td><td></td><td className="text-xl font-bold text-center">↓</td><td></td><td></td></tr> + {/* 4단계 */} + <tr><td></td><td></td><td className="text-xl bg-gray-100 font-bold py-3">국고지원 확정 통보</td><td></td><td></td></tr> + <tr><td></td><td></td><td className="text-xl font-bold text-center">↓</td><td></td><td></td></tr> + {/* 5단계 */} + <tr><td></td><td></td><td className="text-xl bg-gray-100 font-bold py-3">사업계획 수립(실시설계)</td><td></td><td></td></tr> + <tr><td></td><td></td><td className="text-xl font-bold text-center">↓</td><td></td><td></td></tr> + {/* 6단계 */} + <tr><td className="text-xl bg-yellow-400 text-black font-bold py-3">(행정관) 기술검토 신청</td><td></td><td className="text-xl bg-gray-100 font-bold py-3">재원협의<br />(지방환경관서장)</td><td className="text-lg">→</td><td className="text-xl bg-green-200 font-bold py-3">기술검토<br />(한국환경공단)</td></tr> + <tr><td></td><td></td><td className="text-xl font-bold text-center">↓</td><td></td><td></td></tr> + {/* 7단계 */} + <tr><td className="text-xl bg-yellow-400 text-black font-bold py-3">(행정관) 기술검토 신청</td><td></td><td className="text-xl bg-gray-100 font-bold py-3">설치승인<br />(시도지사)</td><td className="text-lg">→</td><td className="text-xl bg-green-200 font-bold py-3">기술검토<br />(한국환경공단)</td></tr> + <tr><td></td><td></td><td className="text-xl font-bold text-center">↓</td><td></td><td></td></tr> + {/* 8단계 */} + <tr><td></td><td></td><td className="text-xl bg-gray-100 font-bold py-3">공사시행</td><td></td><td></td></tr> + <tr><td></td><td></td><td className="text-xl font-bold text-center">↓</td><td></td><td></td></tr> + {/* 9단계 */} + <tr><td className="text-xl bg-yellow-400 text-black font-bold py-3">(행정관) 기술검토 신청</td><td></td><td className="text-xl bg-gray-100 font-bold py-3">준공(국고정산)</td><td className="text-lg">→</td><td className="text-xl bg-green-200 font-bold py-3">기술검토<br />(한국환경공단)</td></tr> + </tbody> + </table> + </div> + </div> + + {/* 카드 2 - 물재이용 매칭 시스템 */} + <div className="card-wrap mb-24" id="card2"> + <h2 className="relative text-center text-4xl font-bold text-gray-900 mb-6"> + <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span> + 물재이용 매칭 시스템이란? + </h2> + <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]"> + {/* 개요 */} + <section> + <h2 className="text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">개요</h2> + <p className="text-2xl font-bold text-gray-800 leading-relaxed"> + 기후변화 및 지자체의 개발속도 차이에 따라 물 자원의 수요-공급 불균형이 발생하여 빗물, 중수도, 하수처리 재처리수 등의 공급 여유가 있는 지자체의 재이용수를 부족한 지자체 수요처에 공급하여 불균형 해소를 통한 수자원 절약 및 물 자원 순환 + </p> + </section> + + {/* 구성 */} + <section className="mt-8"> + <h2 className="text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">구성</h2> + <ul className="list-[square] pl-6 text-2xl font-bold text-gray-800 leading-relaxed space-y-2"> + <li>공급자: 하수처리장, 빗물이용시설, 중수도 등</li> + <li>수요자: 산업체(냉각수), 공공시설(조경, 도로청소), 농민(농업용수) 등</li> + <li>시스템: 수질, 수량, 거리 기반 매칭, 중개</li> + <li>운영주체: 한국환경공단</li> + </ul> + </section> + + {/* 절차 */} + <section className="mt-8"> + <h2 className="text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 주요 내용</h2> + <p className="text-2xl font-bold text-gray-800 leading-relaxed"> + ① 공급자 등록 → ② 수요자 조건 입력 → ③ 매칭 검토 → ④ 시스템 매칭 → ⑤ 계약·공급 이행 + </p> + </section> + + {/* 기대효과 */} + <section className="mt-8"> + <h2 className="text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">기대효과</h2> + <ul className="list-[square] pl-6 text-2xl font-bold text-gray-800 leading-relaxed space-y-2"> + <li>물 자원 수요-공급 조정을 통한 효율적 분배</li> + <li>물 재이용시설 데이터 수집으로 체계적 관리</li> + <li>지자체, 사업시행자 등 재이용 정보 획득 용이</li> + </ul> + <div className="text-center my-6"> + <Image + src="/img/wrOverview/img_ov_01_1.png" + alt="하수 재이용 시스템 흐름도. 저장탱크에서 재처리된 물이 손 씻기, 수도, 세정 등에 공급되며 재이용 활성화를 통해 최적의 물공급 방안이 마련되는 과정을 시각화함." + width={650} + height={500} + className="h-[500px] mx-auto mb-4 rounded" + /> + <p className="text-2xl font-bold text-gray-800 mt-10">(하수 재이용 시스템 개요도)</p> + </div> + </section> + </div> + </div> + </div> + </div> + ); +} \ No newline at end of file diff --git a/apps/dm/app/pages/wrStatus/page.tsx b/apps/dm/app/pages/wrStatus/page.tsx new file mode 100644 index 000000000..dd7ec5552 --- /dev/null +++ b/apps/dm/app/pages/wrStatus/page.tsx @@ -0,0 +1,549 @@ +'use client'; + +import { CHART_FORM, MainChart, type ChartConfig } from '@common/business_components'; +import React, { useEffect, useRef, useState } from 'react'; + +interface RegionData { + name: string; + x: number; + y: number; + values: number[]; +} + +interface TableData { + region: string; + sewage: number; + rainwater: number; + reclaimed: number; + thermal: number; +} + + +const WrStatusPage: React.FC = () => { + const [selectedRegion, setSelectedRegion] = useState<string | null>(null); + const [hoveredRegion, setHoveredRegion] = useState<string | null>(null); + const [tooltipPosition, setTooltipPosition] = useState<{ x: number; y: number } | null>(null); + const svgContainerRef = useRef<HTMLDivElement>(null); + const [chartData] = useState<any[]>([ + { + label : '서울', + 하수 : 4, + 빗물 : 816, + 중수도 : 371, + 온배수 : 0 + }, + { + label : '부산', + 하수 : 13, + 빗물 : 68, + 중수도 : 20, + 온배수 : 1 + }, + { + label : '대구', + 하수 : 9, + 빗물 : 294, + 중수도 : 14, + 온배수 : 2 + }, + { + label : '인천', + 하수 : 17, + 빗물 : 165, + 중수도 : 35, + 온배수 : 15 + }, + { + label : '광주', + 하수 : 3, + 빗물 : 74, + 중수도 : 15, + 온배수 : 15 + }, + { + label : '대전', + 하수 : 2, + 빗물 : 52, + 중수도 : 11, + 온배수 : 20 + }, + { + label : '울산', + 하수 : 8, + 빗물 : 111, + 중수도 : 19, + 온배수 : 30 + }, + { + label : '세종', + 하수 : 9, + 빗물 : 65, + 중수도 : 0, + 온배수 : 0 + }, + { + label : '경기', + 하수 : 176, + 빗물 : 1009, + 중수도 : 252, + 온배수 : 40 + }, + { + label : '강원', + 하수 : 69, + 빗물 : 69, + 중수도 : 22, + 온배수 : 0 + }, + { + label : '충북', + 하수 : 38, + 빗물 : 17, + 중수도 : 91, + 온배수 : 0 + }, + { + label : '충남', + 하수 : 67, + 빗물 : 54, + 중수도 : 188, + 온배수 : 0 + }, + { + label : '전북', + 하수 : 55, + 빗물 : 33, + 중수도 : 220, + 온배수 : 0 + }, + { + label : '전남', + 하수 : 83, + 빗물 : 16, + 중수도 : 75, + 온배수 : 0 + }, + { + label : '경북', + 하수 : 81, + 빗물 : 37, + 중수도 : 70, + 온배수 : 0 + }, + { + label : '경남', + 하수 : 75, + 빗물 : 27, + 중수도 : 140, + 온배수 : 0 + }, + { + label : '제주', + 하수 : 8, + 빗물 : 47, + 중수도 : 64, + 온배수 : 0 + } + ]); + + const chartConfig = chartData.reduce((config, element) => { + config[element.label] = { + label: element.label, + color : "hsl(var(--chart-1))" + }; + return config; + }, {} as Record<string, { label: string; color: string; }>) satisfies ChartConfig; + + const chartOption = { + chartForm : CHART_FORM.BAR, + chartConfig : chartConfig, + chartData : chartData, + chartTitle : '', + chartClassName : "h-[300px] w-full", + graphSize : 40, + yFieldText : '개소수(건)', + showLegend : true + } + + const colorLegend = [ + { label: '하수', color: '#FF6B6B', key: 'sewage' }, + { label: '빗물', color: '#4ECDC4', key: 'rainwater' }, + { label: '중수도', color: '#45B7D1', key: 'reclaimed' }, + { label: '온배수', color: '#FED16A', key: 'thermal' }, + ]; + + const regionIdMap: Record<string, string> = { + 서울: '서울특별시', + 부산: '부산광역시', + 대구: '대구광역시', + 인천: '인천광역시', + 광주: '광주광역시', + 대전: '대전광역시', + 울산: '울산광역시', + 세종: '세종특별자치시', + 경기: '경기도', + 강원: '강원특별자치도', + 충북: '충청북도', + 충남: '충청남도', + 전북: '전라북도', + 전남: '전라남도', + 경북: '경상북도', + 경남: '경상남도', + 제주: '제주특별자치도' + }; + + const tableData: TableData[] = [ + { region: '서울특별시', sewage: 4, rainwater: 816, reclaimed: 371, thermal: 0 }, + { region: '부산광역시', sewage: 13, rainwater: 68, reclaimed: 20, thermal: 1 }, + { region: '대구광역시', sewage: 9, rainwater: 294, reclaimed: 14, thermal: 2 }, + { region: '인천광역시', sewage: 17, rainwater: 165, reclaimed: 35, thermal: 15 }, + { region: '광주광역시', sewage: 3, rainwater: 74, reclaimed: 15, thermal: 15 }, + { region: '대전광역시', sewage: 2, rainwater: 52, reclaimed: 11, thermal: 20 }, + { region: '울산광역시', sewage: 8, rainwater: 111, reclaimed: 19, thermal: 30 }, + { region: '세종특별자치시', sewage: 9, rainwater: 65, reclaimed: 0, thermal: 0 }, + { region: '경기도', sewage: 176, rainwater: 1009, reclaimed: 252, thermal: 40 }, + { region: '강원특별자치도', sewage: 69, rainwater: 69, reclaimed: 22, thermal: 0 }, + { region: '충청북도', sewage: 38, rainwater: 17, reclaimed: 91, thermal: 0 }, + { region: '충청남도', sewage: 67, rainwater: 54, reclaimed: 188, thermal: 0 }, + { region: '전라북도', sewage: 55, rainwater: 33, reclaimed: 220, thermal: 0 }, + { region: '전라남도', sewage: 83, rainwater: 16, reclaimed: 75, thermal: 0 }, + { region: '경상북도', sewage: 81, rainwater: 37, reclaimed: 70, thermal: 0 }, + { region: '경상남도', sewage: 75, rainwater: 27, reclaimed: 140, thermal: 0 }, + { region: '제주특별자치도', sewage: 8, rainwater: 47, reclaimed: 64, thermal: 0 }, + + ]; + + const regionData: RegionData[] = [ + { name: '서울', x: 170, y: 140, values: [0.3, 0.3, 0.2, 0.2] }, + { name: '인천', x: 120, y: 150, values: [0.3, 0.3, 0.2, 0.2] }, + { name: '경기', x: 210, y: 210, values: [0.3, 0.3, 0.2, 0.2] }, + { name: '강원', x: 330, y: 120, values: [0.3, 0.3, 0.2, 0.2] }, + { name: '충북', x: 260, y: 280, values: [0.3, 0.3, 0.2, 0.2] }, + { name: '충남', x: 100, y: 320, values: [0.3, 0.3, 0.2, 0.2] }, + { name: '세종', x: 180, y: 305, values: [0.3, 0.3, 0.2, 0.2] }, + { name: '대전', x: 195, y: 360, values: [0.3, 0.3, 0.2, 0.2] }, + { name: '전북', x: 170, y: 450, values: [0.3, 0.3, 0.2, 0.2] }, + { name: '전남', x: 160, y: 600, values: [0.3, 0.3, 0.2, 0.2] }, + { name: '광주', x: 120, y: 530, values: [0.3, 0.3, 0.2, 0.2] }, + { name: '경북', x: 400, y: 320, values: [0.3, 0.3, 0.2, 0.2] }, + { name: '경남', x: 310, y: 530, values: [0.3, 0.3, 0.2, 0.2] }, + { name: '대구', x: 350, y: 450, values: [0.3, 0.3, 0.2, 0.2] }, + { name: '울산', x: 450, y: 500, values: [0.3, 0.3, 0.2, 0.2] }, + { name: '부산', x: 420, y: 550, values: [0.3, 0.3, 0.2, 0.2] }, + { name: '제주', x: 60, y: 750, values: [0.3, 0.3, 0.2, 0.2] }, + ]; + + const handleMarkerClick = (regionId: string) => { + if (selectedRegion === regionId) { + setSelectedRegion(null); + } else { + setSelectedRegion(regionId); + } + }; + + + const createDonutMarker = (svg: SVGSVGElement, x: number, y: number, name: string, values: number[]) => { + const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FED16A']; + const radius = 26; + const innerRadius = 18; + // const regionId = regionIdMap[name]; + const regionId = regionIdMap[name]; + if (!regionId) { + console.warn(`Invalid region name: ${name}`); + return; + } + + const g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); + g.setAttribute('transform', `translate(${x}, ${y})`); + g.setAttribute('id', `marker-${name}`); + g.style.cursor = 'pointer'; + g.setAttribute('role', 'button'); + g.setAttribute('tabindex', '0'); + g.setAttribute('aria-label', `${name} 지역 선택`); + + const bg = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); + bg.setAttribute('r', radius.toString()); + bg.setAttribute('fill', 'white'); + bg.setAttribute('pointer-events', 'all'); + g.appendChild(bg); + + let startAngle = 0; + values.forEach((value, idx) => { + const endAngle = startAngle + value * 2 * Math.PI; + const x1 = radius * Math.sin(startAngle); + const y1 = -radius * Math.cos(startAngle); + const x2 = radius * Math.sin(endAngle); + const y2 = -radius * Math.cos(endAngle); + const largeArc = endAngle - startAngle > Math.PI ? 1 : 0; + const d = `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} L 0 0 Z`; + + const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); + path.setAttribute('d', d); + path.setAttribute('fill', colors[idx % colors.length] as string); + g.appendChild(path); + + startAngle = endAngle; + }); + + const center = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); + center.setAttribute('r', innerRadius.toString()); + center.setAttribute('fill', 'white'); + g.appendChild(center); + + const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); + text.setAttribute('x', '0'); + text.setAttribute('y', '2'); + text.setAttribute('text-anchor', 'middle'); + text.setAttribute('font-size', '13'); + text.setAttribute('font-weight', 'bold'); + text.setAttribute('dominant-baseline', 'middle'); + text.setAttribute('fill', 'black'); + text.textContent = name || ''; + g.appendChild(text); + + g.addEventListener('mouseenter', (e) => { + setHoveredRegion(regionId); + setTooltipPosition({ x: e.clientX, y: e.clientY }); + }); + + g.addEventListener('mouseleave', () => { + setHoveredRegion(null); + setTooltipPosition(null); + }); + + g.addEventListener('click', () => { + handleMarkerClick(regionId); + }); + + g.addEventListener('keydown', (e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + + const matrix = g.getScreenCTM(); + if (!matrix) return; // 또는 console.warn('matrix is null'); return; + + const point = svg.createSVGPoint(); + point.x = 0; + point.y = 0; + const transformed = point.matrixTransform(matrix); + + setTooltipPosition({ x: transformed.x, y: transformed.y }); + setHoveredRegion(regionId); + handleMarkerClick(regionId); + } + }); + + svg.appendChild(g); + }; + + useEffect(() => { + const loadSVG = async () => { + try { + const response = await fetch('/img/wrStatus/southKoreaMap.svg'); + const svgText = await response.text(); + + if (svgContainerRef.current) { + svgContainerRef.current.innerHTML = svgText; + + const svg = svgContainerRef.current.querySelector('svg') as SVGSVGElement; + if (svg) { + svg.style.width = '58%'; + svg.style.height = 'auto'; + svg.style.objectFit = 'contain'; + + // Set default fills + const paths = svg.querySelectorAll('path'); + paths.forEach(path => { + if (!path.getAttribute('fill') || path.getAttribute('fill') === 'none') { + path.setAttribute('fill', '#ffffff'); + } + }); + + // Create markers + regionData.forEach(region => { + createDonutMarker(svg, region.x, region.y, region.name, region.values); + }); + } + } + } catch (error) { + console.error('SVG 로딩 실패:', error); + if (svgContainerRef.current) { + svgContainerRef.current.innerHTML = "<p className='text-red-500'>SVG 로딩 실패</p>"; + } + } + }; + + loadSVG(); + }, []); + + useEffect(() => { + const svg = svgContainerRef.current?.querySelector('svg'); + if (svg) { + const paths = svg.querySelectorAll('path'); + paths.forEach(path => { + const pathId = path.getAttribute('id'); + if (pathId) { + if (selectedRegion === pathId) { + path.setAttribute('fill', '#2563eb'); + } else { + const original = '#ffffff'; + path.setAttribute('fill', original); + } + } + }); + } + }, [selectedRegion]); + + return ( + <div className="flex h-screen bg-[#F4F7FB] text-gray-800"> + {/* 우측 콘텐츠 영역 */} + <main className="flex-1 p-6 overflow-auto"> + {/* 상단 제목 */} + <div className="mb-6 flex justify-between items-center"> + <h2 className="text-2xl font-bold">물재이용 현황</h2> + <div className="text-sm text-gray-500">관리자 ▼</div> + </div> + + {/* 콘텐츠 본문 */} + <div className="grid grid-cols-1 xl:grid-cols-2 gap-4"> + {/* 지도 카드 */} + <div className="bg-white rounded-xl shadow border border-[#DBE2E6] overflow-hidden max-h-[900px]"> + {/* 타이틀 영역 */} + <div className="border-b border-[#DBE2E6] px-4 py-3"> + <h3 className="text-[12px] font-semibold">재이용시설개소수(2023)</h3> + <p className="text-[12px] text-[#999] font-medium">행정구역별 재이용시설 개소수 조회</p> + </div> + + {/* 본문 콘텐츠 */} + <div className="p-4"> + <div className="bg-[#E2EDF3] p-4 rounded shadow relative"> + <div className="flex justify-center"> + <div + ref={svgContainerRef} + className="w-full max-w-5xl max-h-[680px] overflow-y-auto block mx-auto" + aria-label="대한민국 지역별 재이용시설 분포도" + role="region" + tabIndex={0} + /> + </div> + + {typeof window !== 'undefined' && hoveredRegion && tooltipPosition && ( + <div + className="fixed bg-white text-[12px] text-gray-700 border border-gray-300 shadow-lg rounded px-3 py-2 z-50" + style={{ + top: tooltipPosition.y + 10, + left: tooltipPosition.x + 10, + pointerEvents: 'none', + }} + > + <div className="font-semibold mb-1">{hoveredRegion}</div> + <div className="space-y-1"> + {colorLegend.map(({ label, color, key }) => ( + <div key={key} className="flex items-center space-x-2"> + <span className="text-[12px] inline-block w-3 h-3 rounded-sm" style={{ backgroundColor: color }}></span> + <span className="text-[12px]"> + {label}:{' '} + {tableData.find(d => d.region === hoveredRegion)?.[key as keyof TableData] ?? '-'} + </span> + </div> + ))} + </div> + </div> + )} + + {/* 범례 */} + <div className="absolute bottom-2 right-2 bg-white rounded-lg shadow-md p-4 text-sm space-y-2"> + <div className="flex items-center space-x-2"> + <span className="inline-block w-4 h-4 rounded-sm" style={{backgroundColor: '#FF6B6B'}}></span> + <span className="text-[12px] text-gray-900">하수재이용시설 (총 717건)</span> + </div> + <div className="flex items-center space-x-2"> + <span className="inline-block w-4 h-4 rounded-sm" style={{backgroundColor: '#4ECDC4'}}></span> + <span className="text-[12px] text-gray-900">빗물이용시설 (총 3,730건)</span> + </div> + <div className="flex items-center space-x-2"> + <span className="inline-block w-4 h-4 rounded-sm" style={{backgroundColor: '#45B7D1'}}></span> + <span className="text-[12px] text-gray-900">중수도시설 (총 1,074건)</span> + </div> + <div className="flex items-center space-x-2"> + <span className="inline-block w-4 h-4 rounded-sm" style={{backgroundColor: '#FED16A'}}></span> + <span className="text-[12px] text-gray-900">온배수시설 (총 201건)</span> + </div> + </div> + </div> + </div> + </div> + + {/* 우측 콘텐츠 (표 + 차트) */} + <div className="col-span-1 flex flex-col space-y-4"> + {/* 재이용시설현황 표 */} + <div className="bg-white rounded-xl shadow border border-[#DBE2E6] overflow-hidden"> + {/* 타이틀 + 버튼 영역 */} + <div className="flex justify-between items-center border-b border-[#DBE2E6] px-4 py-3"> + <div> + <h3 className="text-[12px] font-semibold">재이용시설현황(2023)</h3> + <p className="text-[12px] text-[#999] font-medium">행정구역별 재이용시설 현황 비교</p> + </div> + </div> + <div className="p-4"> + <div className="rounded border border-[#DBE2E6] shadow overflow-auto max-h-[292px] p-4"> + <table className="min-w-full text-sm text-center"> + <caption className="sr-only text-[12px]">행정구역별 하수, 빗물, 중수도, 온배수 재이용시설 수</caption> + <thead className="bg-gray-50 text-xs text-gray-600 uppercase border-b"> + <tr> + <th className="text-[12px] font-semibold px-4 py-2">번호</th> + <th className="text-[12px] font-semibold px-4 py-2">시도</th> + <th className="text-[12px] font-semibold px-4 py-2">하수</th> + <th className="text-[12px] font-semibold px-4 py-2">빗물</th> + <th className="text-[12px] font-semibold px-4 py-2">중수도</th> + <th className="text-[12px] font-semibold px-4 py-2">온배수</th> + </tr> + </thead> + <tbody className="divide-y"> + {tableData.map((row, index) => ( + <tr key={index} className="hover:bg-gray-50"> + <td className="text-[12px] px-4 py-2 text-center"> + {index+1} + </td> + <td className="text-[12px]">{row.region}</td> + <td className="text-[12px]">{row.sewage}</td> + <td className="text-[12px]">{row.rainwater}</td> + <td className="text-[12px]">{row.reclaimed}</td> + <td className="text-[12px]">{row.thermal}</td> + </tr> + ))} + </tbody> + </table> + </div> + </div> + </div> + + {/* 재이용통계 차트 */} + <div className="bg-white rounded-xl shadow border border-[#DBE2E6] overflow-hidden"> + <div className="border-b border-[#DBE2E6] px-4 py-3"> + <h3 className="text-[12px] font-semibold">재이용통계(2023)</h3> + <p className="text-[12px] text-[#999] font-medium">항목별 통계 보기</p> + </div> + <div className="p-4 bg-[#f9fbfd]"> + <div className="h-[305px] text-gray-500"> + <MainChart + chartForm={chartOption.chartForm} + chartConfig={chartOption.chartConfig} + chartData={chartOption.chartData} + chartTitle={chartOption.chartTitle} + chartClassName={chartOption.chartClassName} + graphSize={chartOption.graphSize} + yFieldText={chartOption.yFieldText} + showLegend={chartOption.showLegend} + /> + </div> + </div> + </div> + </div> + </div> + </main> + </div> + ); +}; + +export default WrStatusPage; \ No newline at end of file diff --git a/apps/dm/app/store/common/index.tsx b/apps/dm/app/store/common/index.tsx new file mode 100644 index 000000000..cf4ce14d8 --- /dev/null +++ b/apps/dm/app/store/common/index.tsx @@ -0,0 +1,419 @@ +/**==================================== + * 보편적으로 쓰는 store 공간 + ====================================**/ + +import { fetchType, getFetch } from '@/components/ui/api'; + +/** + * STORE - TYPE + */ + +// selectBox +export type SelectDataType = { + text: string; + val: string; +} + +export interface MenuItem { + menuCd: number; + menuKornNm: string; + menuEngNm: string; + parentId: number | null; + sortSeq: number; + iconNm?: string; + children: MenuItem[] | null; + levelNo: number; + urlPath: string; + menuLnkgTypeCd: string; + menuLnkgSn: number; + menuPath: string; + qrcd: string; + useYn: string; + otptYn: string; + newWndwYn: string; + requiredUrlPath: boolean; +} + +// grid header +export type TableUpperProps = { + id: string; + title: string; + upName?: string; + upSequnce?: number; + align? : string; + row? : number; + rowSpan?: number; + colSpan?: number; +} + +// 시도 데이터 +export type sidoDataType = { + adstDstrCd: number, + sido: string, +} + +// 시군구 데이터 +export type sigunDataType = { + adstDstrCd: number, + gugun: string +} + +// 권역 데이터 +export type regionDataType = { + rvbsnCd: string, + rvbsn: string, +} + +// 단위유역 데이터 +export type unitWaterShedDataType = { + rvbsnCd: string, + lgbsn: string, +} + +// 중권역 데이터 +export type middleRegionDataType = { + rvbsnCd: string, + mdmbsn: string, +} + +// 환경청 데이터 +export type envPartDataType = { + lclgvrnmntCd: string, + lclgvrnmntNm: string, + adstDliStrCd: string, + adstDstrCd: string, +} + +export type envPartSelectDataType = SelectDataType & { + adstDliStrCd: string, +} + +/** + * STORE - DATA + */ + +// 시도 데이터 +let selectSidoData: SelectDataType[] = [ + { text: "전체", val: '0' } +]; + +// 시군구 데이터 +let selectSigunData: SelectDataType[] = [ + { text: "전체", val: '0' } +]; + +// 권역 데이터 +const selectRegionData: SelectDataType[] = [ + { text: "전체", val: '0' } +]; + +// 단위유역 데이터 +const selectUnitWaterShedData: SelectDataType[] = [ +]; + +// 환경청 데이터 +let selectEnvPartData: envPartSelectDataType[] = [ + { text: "전체", val: '0', adstDliStrCd: '' } +]; + +// 환경청 내 시도 데이터 +const selectEnvPartSidoData: SelectDataType[] = [ + { text: "전체", val: '0' } +]; + +// 환경청 내 시군구 데이터 +const selectEnvPartSigunData: SelectDataType[] = [ + { text: "전체", val: '0' } +]; + +// 구분 데이터 +// const selectPartData:SelectDataType[] = [ +// { text: "행정별", val: '0' }, +// { text: "유역별", val: '01' }, +// { text: "환경청별", val: '02' }, +// ]; + +// 상향 하향 데이터 +const selectUpdownData:SelectDataType[] = [ + { text: "전체", val: '0' }, + { text: "500이하", val: '499' }, + { text: "500이상", val: '500' }, +]; + +// 운영 상태 데이터 +const selectOperationData:SelectDataType[] = [ + { text: "전체", val: '0' }, + { text: "가동중", val: '1' }, + { text: "재가동", val: '2' }, + { text: "가동중지", val: '3' }, + { text: "시설폐쇄", val: '4' }, +]; + +// 시설 구분 데이터 +const selectFacilityPartData:SelectDataType[] = [ + { text: "전체", val: '0' }, + { text: "공공하수처리시설", val: 'SW' }, + { text: "오수처리장", val: 'SS' }, + { text: "개인하수처리시설", val: 'PB' }, + { text: "분뇨처리장", val: 'NS' }, + { text: "폐수처리장", val: 'LW' }, + { text: "침출수처리장", val: 'LC' }, + { text: "기타기초시설", val: 'ET' }, +]; + +// 년도 데이터 +const getYearData = () => { + const year = new Date().getFullYear(); + const year1 = year - 1; + const year2 = year - 2; + const year3 = year - 3; + const year4 = year - 4; + const year5 = year - 5; + return [ + { text: year1 + "년", val: year1.toString() }, + { text: year2 + "년", val: year2.toString() }, + { text: year3 + "년", val: year3.toString() }, + { text: year4 + "년", val: year4.toString() }, + { text: year5 + "년", val: year5.toString() }, + ] +} + +const selectSearchYear:SelectDataType[] = getYearData(); + +// 유량 기간 구분 +const selectFlowTerm : SelectDataType[] = [ + { text: "연간", val: '0' }, + { text: "하절기", val: '01' }, + { text: "동절기", val: '02' }, + { text: "청천시", val: '03' }, + { text: "강우시", val: '04' }, +]; + +// 유량 기간 구분 +const selectFlowPanel : SelectDataType[] = [ + { text: "전체", val: '0'}, + { text: "3mm미만", val: '1'}, + { text: "3~10mm미만", val: '2'}, + { text: "10~20mm미만", val: '3'}, + { text: "20~30mm미만", val: '4'}, + { text: "30~40mm미만", val: '5'}, + { text: "40~50mm미만", val: '6'}, + { text: "50~60mm미만", val: '7'}, + { text: "60mm이상", val: '8'}, +]; + +// 중권역 데이터 +const selectMiddleRegionData: SelectDataType[] = [ + { text: "전체", val: '0' } +]; + +/** + * STORE - API + */ + +// 시도 API 호출 함수 추가 +const fetchSidoData = async (): Promise<SelectDataType[]> => { + try { + const res = await getFetch(fetchType.COMMON, '/addr/city'); + 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(fetchType.COMMON, '/addr/sgg'); + 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(fetchType.COMMON, '/addr/sarea'); + 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(fetchType.COMMON, '/addr/midArea'); + 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(fetchType.COMMON, '/addr/largeArea'); + 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(fetchType.COMMON, '/addr/govArea'); + 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; + } +}; + +/**==================================== + * Store - expaort + ====================================*/ +export type CommonAction = { + initializeCommonData: () => Promise<void>; + getMenuAuth: (menuCd:number) => Promise<void>; +} + +export type CommonType = { + Common: { + isInit: boolean; + selectSidoData: SelectDataType[]; + selectSigunData: 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[]; + btnClass: string; + } +} + +export const CommonState:CommonType = { + Common: { + isInit: false, + selectSidoData: selectSidoData, + selectSigunData: selectSigunData, + selectUpdownData: selectUpdownData, + selectOperationData: selectOperationData, + selectFacilityPartData: selectFacilityPartData, + selectSearchYear: selectSearchYear, + selectRegionData: selectRegionData, + selectUnitWaterShedData: selectUnitWaterShedData, + selectMiddleRegionData: selectMiddleRegionData, + selectEnvPartSidoData : selectEnvPartSidoData, + selectEnvPartSigunData : selectEnvPartSigunData, + selectFlowTerm: selectFlowTerm, + selectFlowPanel: selectFlowPanel, + selectEnvPartData : selectEnvPartData, + btnClass: "p-4 m-2 text-white rounded-sm text-lg font-medium" + } +} + +export const CommonReducer:(set:any)=>CommonAction=(set: any) => { + return { + getMenuAuth : async (menuCd : number) =>{ + const response = await getFetch( + "local", + `/cms-service/api/v1/menu-authrts/pageinfo/${menuCd}` + ); + set((state: CommonType) => { + return { + ...state, + auth: { + mngAuthrtYn: response[0].mngAuthrtYn, + inqAuthrtYn: response[0].mngAuthrtYn, + regAuthrtYn: response[0].mngAuthrtYn, + mdfcnAuthrtYn: response[0].mngAuthrtYn, + delAuthrtYn: response[0].mngAuthrtYn, + }, + }; + }); + }, + // 시도 변경 이벤트 + 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 + } + }) + )}, + } +} + +export type CommonStore = CommonType & CommonAction; diff --git a/apps/dm/app/store/index.tsx b/apps/dm/app/store/index.tsx new file mode 100644 index 000000000..47170b3db --- /dev/null +++ b/apps/dm/app/store/index.tsx @@ -0,0 +1,42 @@ +'use client' + +import { type ReactNode, createContext, useContext, useRef } from 'react' +import { useStore } from 'zustand' +import { type DmStore, StoreZus } from './store' + + +export type StoreApi = ReturnType<typeof StoreZus> + +export const StoreContext = createContext<StoreApi | undefined>( + undefined, +) + +export interface StoreProviderProps { + children: ReactNode +} + +export const StoreProvider = ({ + children, +}: StoreProviderProps) => { + const storeRef = useRef<StoreApi | null>(null) + if (!storeRef.current) { + // Create store instance if not initialized + storeRef.current = StoreZus() as StoreApi + } + return ( + <StoreContext.Provider value={storeRef.current}> + {children} + </StoreContext.Provider> + ) +} + +export const useDmStore = <T,>( + selector: (store: DmStore) => T, +): T => { + const storeContext = useContext(StoreContext) + if (!storeContext) { + throw new Error(`useStore must be used within StoreProvider`) + } + + return useStore(storeContext, selector) +} \ No newline at end of file diff --git a/apps/dm/app/store/readme.md b/apps/dm/app/store/readme.md new file mode 100644 index 000000000..0710aa69b --- /dev/null +++ b/apps/dm/app/store/readme.md @@ -0,0 +1,121 @@ +# Zustand store +## Zustand 등록방법 +**-- index.tsx --** +### context 등록 +기본적으로 createContext를 통해 react에 context를 생성해서 react에서 사용할 수 있도록 해야함. +``` js +//StoreZus는 내부적으로 사용하기 위한 store파일에서 따로 생성함. +export type StoreApi = ReturnType<typeof StoreZus> +//react에서 사용하기 위한 context 생성. +export const StoreContext = createContext<StoreApi | undefined>( + undefined, +) +``` + +### component로 작성 +등록된 context를 component화 시키기 위한 작업 +```js +//외부에서 호출시 <StoreProvider> 형태로 호출. +//app이나 home에서 전체적인 사용이 되도록 작성해야함. +export const StoreProvider = ({ + children, +}: StoreProviderProps) => { + const storeRef = useRef<StoreApi>(null) + if (!storeRef.current) { + //StoreZus는 store.tsx를 봐야함. + storeRef.current = StoreZus() + } + return ( + <StoreContext.Provider value={storeRef.current}> + {children} + </StoreContext.Provider> + ) +} +``` + +### store 등록 +react에서 사용하는 store에 현재 context 등록 +```js +export const useWrStore = <T,>( + selector: (store: WrStore) => T, +): T => { + const storeContext = useContext(StoreContext) + if (!storeContext) { + throw new Error(`useStore must be used within StoreProvider`) + } + + return useStore(storeContext, selector) +} +``` + +## Zustand 사용방법 +**-- store.tsx, 폴더별 index.tsx --** +### 기본 store 생성 +index.tsx의 context에 사용되는 StoreZus를 추가하여 사용됨. + +외부에서 생성된 state, actions를 사용 가능한 구조 +```js +import { createStore } from 'zustand/vanilla'; +import { tableActionsExport, tableStateExport, type tableState, type tableType } from './publicReuseFaciltyInsert/index';//외부 파일 위치. +export type WrStore = tableType;//typescript이므로 사용되는 스크립트를 type1 & type2 형식으로 넣어야함. +//index.tsx에서 사용하는 store 생성. +export const StoreZus = (initState: tableState = tableStateExport) => { + return createStore<WrStore>()((set) => { + return { + //아래에서 사용하는 state & actions은 외부 폴더에서 가져다가 사용. + ...initState,//외부에 있는 기본 초기값 state + ...tableActionsExport(set)//외부에 있는 actions + } + }) +} +``` +### 외부 스토어 작성 방법 +외부 스토어는 export를 어떻게 할건지만 정하면됨. + +사용하는 store.tsx에서 import를 받기만 하면 사용가능. +#### 타입을 외부로 빼는 방법 +```js +export type tableState = { + isInit: boolean; + upHeadList: TableUpperProps[]; + publicReuseFacilityUper: PublicReuseFacility[]; +} +type tableActions = { + decrementList: () => void +} + +export type tableType = tableState & tableActions; +``` +#### 초기값 state를 외부로 빼는 방법 +```js +export const tableStateExport:tableState= { + isInit:false, + upHeadList: upHeadList, + publicReuseFacilityUper: publicReuseFacilityUper, +} +``` +#### actions를 외부로 빼는 방법 +```js +//tableActionsExport를 import 받아서 실행하여 return 된 값을 사용 +export const tableActionsExport:(set:any)=>tableActions= +//set을 통해 react store에 등록 +(set: any) => { + return { + //decrementList Object 형태로 전달 + decrementList: + //set 함수를 실행해서 react store에 등록 + ()=>set( + // store에 등록되는 함수 구조를 가지고 있음. + (state:tableState) => { + //actions 실질적인 로직 작성하는 곳. + return ( + { + upHeadList: state.upHeadList, + publicReuseFacilityUper: + state.publicReuseFacilityUper.slice(0, state.publicReuseFacilityUper.length - 1) + })} + ) + } +} +``` + diff --git a/apps/dm/app/store/sdmMng/index.tsx b/apps/dm/app/store/sdmMng/index.tsx new file mode 100644 index 000000000..e51c6b56a --- /dev/null +++ b/apps/dm/app/store/sdmMng/index.tsx @@ -0,0 +1,526 @@ +import { fetchType, getFetch, postFetch } from "@/components/ui/api"; +import type { SelectDataType } from "@common/business_components/ui"; +import type { TableUpperProps } from "../common"; +import toast from "react-hot-toast"; + +/**==================================== + * Store - 타입 +=====================================*/ +// 수요처 정보 +export type DemandCompType = { + index : number | ''; + dmdInfoId : string | ''; + dmdInfoFk : string | ''; + bzmnNo : string | ''; + dmdCoNm : string | ''; + daddr : string | ''; + telno : string | ''; + rgtr : string | ''; + useUsgCd : string | ''; + ctpvCd : string | ''; + sggCd : string | ''; + dmdAplyPswd : string | ''; + wntUntprc : number | ''; + dmndTmng : Date | ''; + dmndQty : number | ''; + grssClfg : number | ''; + tn : number | ''; + combResdch : number | ''; + tph : number | ''; + trbt : number | ''; + ph : number | ''; + blgcOxygDmndQnt : number | ''; + clIonQnt : number | ''; + smll : number | ''; + cdtnv : number | ''; + crmty : number | ''; + rmrk : string | ''; + reqDt : string | ''; + dmdInfoSn : number | ''; + status : string | ''; +} + +export type DemandMatchings = { + splyFcltFk : string | ''; + splyFcltFlg : string | ''; + pbnstRuseFcltBizFk : number | ''; + splyBgngDay : string | ''; + splyEndDay : string | ''; + splyCpct : number | ''; + splyFmYn : string | ''; + useUsgCd : string | ''; + dmdInfoSn : number | ''; + splyCndtList : string | ''; + mtchnCmptnYmd : string | ''; + rvwCmptnYmd : string | ''; + regDt : string | ''; + rgtr : string | ''; + mdfcnDt : string | ''; + mdfr : string | ''; +} + +// 유사사례 +export type SimilarCaseType = { + ruseBizNm : string | ''; + bizBgngDate : string | ''; + bizEndDate : string | ''; + splyFcltKnd : string | ''; + splyFcltNm : string | ''; + splyFcltCpct : string | ''; + dmdFcltNm : string | ''; + dmdFcltAddr : string | ''; + ruseFcltCpct : string | ''; + ruseFcltPplLen : string | ''; + ruseFcltUsg : string | ''; + ruseFcltSplyCpct : string | ''; + ruseFcltPrcsMsrc : string | ''; + grnteWqUsg : string | ''; + grnteWqGrssClfg : string | ''; + grnteWqCombResdch : string | ''; + grnteWqTrbt : string | ''; + grnteWqBod : string | ''; + grnteWqSmll : string | ''; + grnteWqCrmty : string | ''; + grnteWqTn : string | ''; + grnteWqTp : string | ''; + grnteWqPh : string | ''; + grnteWqClIonQnt : string | ''; + grnteWqCndctStat : string | ''; + grnteWqRmrk : string | ''; + reqBizReuseFcltCst : string | ''; + reqBizPplCst : string | ''; + reqBizArchCst : string | ''; + reqBizMchnCst : string | ''; + reqBizMtrngCst : string | ''; + reqBizGisCst : string | ''; + reqBizCctvCst : string | ''; + reqBizCmcnCst : string | ''; + reqBizWstCst : string | ''; + reqBizDesignCst : string | ''; + reqBizSpvsCst : string | ''; + reqBizSbsdCst : string | ''; + reqBizEtc : string | ''; + reqBizGrssCst : string | ''; + prcmPlanNlep : string | ''; + prcmPlanLcep : string | ''; + prcmPlanBrdnCst : string | ''; + prcmPlanEcqrRt : string | ''; + prcmPlanGrssCst : string | ''; + clclnNlep : string | ''; + clclnLcep : string | ''; + clclnBrdnCst : string | ''; + clclnEcqrRt : string | ''; + clclnGrssCst : string | ''; +} + +// 사업비 상세정보 +export type MoneyDetailType = { + reqBizGrssCst : string | ''; + reqBizReuseFcltCst : string | ''; + reqBizPplCst : string | ''; + reqBizArchCst : string | ''; + reqBizMchnCst : string | ''; + reqBizMtrngCst : string | ''; + reqBizGisCst : string | ''; + reqBizCctvCst : string | ''; + reqBizCmcnCst : string | ''; + reqBizWstCst : string | ''; + reqBizDesignCst : string | ''; + reqBizSpvsCst : string | ''; + reqBizSbsdCst : string | ''; + reqBizEtc : string | ''; + + /** 재원조달계획(백만원원) */ + prcmPlanGrssCst : string | ''; + prcmPlanNlep : string | ''; + prcmPlanLcep : string | ''; + prcmPlanBrdnCst : string | ''; + prcmPlanEcqrRt : string | ''; + /** 사업비 정산(백만원) */ + clclnGrssCst : string | ''; + clclnNlep : string | ''; + clclnLcep : string | ''; + clclnBrdnCst : string | ''; + clclnEcqrRt : string | ''; +} + +/**==================================== + * Store - 데이터 + ====================================*/ +// 수요처 정보 +const demandCompList : DemandCompType[] = [ +] + +// 사용용도 +const useTypesData : SelectDataType[] = [ + { text: '청소', val: "청소" }, + { text: "화장실용수", val: "화장실용수" }, + { text: "세척", val: "세척" }, + { text: "살수", val: "살수" }, + { text: "조경", val: "조경" }, + { text: "농업", val: "농업" }, + { text: "하천", val: "하천" }, + { text: "지하수", val: "지하수" }, + { text: "공업", val: "공업" }, +]; + +// 유사사례 모달 헤더 +export const similarCaseModalHeader: TableUpperProps[] = [ + { id: "ruseBizNm", title: "사업명", row: 0, rowSpan: 2 }, + { id: "bizBgngDate", title: "사업시작일", row: 0, rowSpan: 2 }, + { id: "bizEndDate", title: "사업종료일", row: 0, rowSpan: 2 }, + { id: "A", title: "공급처", row: 0, colSpan: 3 }, + { id: "splyFcltKnd", title: "시설종류", row: 1 }, + { id: "splyFcltNm", title: "공급처명", row: 1 }, + { id: "splyFcltCpct", title: "시설용량\n(㎥/일)", row: 1 }, + { id: "B", title: "수요처", row: 0, colSpan: 2 }, + { id: "dmdFcltNm", title: "수요처명", row: 1 }, + { id: "dmdFcltAddr", title: "주소", row: 1 }, + { id: "C", title: "재이용시설", row: 0, colSpan: 5 }, + { id: "ruseFcltCpct", title: "시설용량\n(㎥/일)", row: 1 }, + { id: "ruseFcltPplLen", title: "관로\n(km)", row: 1 }, + { id: "ruseFcltUsg", title: "용도", row: 1 }, + { id: "ruseFcltSplyCpct", title: "공급량\n(㎥/일)", row: 1 }, + { id: "ruseFcltPrcsMsrc", title: "처리공법", row: 1 }, + { id: "D", title: "보증수질", row: 0, colSpan: 13 }, + { id: "grnteWqUsg", title: "용도별", row: 1 }, + { id: "grnteWqGrssClfg", title: "총대장균군수\n(개/100ml)", row: 1 }, + { id: "grnteWqCombResdch", title: "결합잔류염소\n(mg/L)", row: 1 }, + { id: "grnteWqTrbt", title: "탁도\n(NTU)", row: 1 }, + { id: "grnteWqBod", title: "생물학적산소요구량\n(BOD)\n(mg/L)", row: 1 }, + { id: "grnteWqSmll", title: "냄새\n(개/100ml)", row: 1 }, + { id: "grnteWqCrmty", title: "색도\n(도)", row: 1 }, + { id: "grnteWqTn", title: "총질소\n(T-N)\n(mg/L)", row: 1 }, + { id: "grnteWqTp", title: "총인\n(T-P)\n(mg/L)", row: 1 }, + { id: "grnteWqPh", title: "수소이온농도\n(pH)", row: 1 }, + { id: "grnteWqClIonQnt", title: "염화물\n(mgCL/L)", row: 1 }, + { id: "grnteWqCndctStat", title: "전기전도도\n(μS/cm)", row: 1 }, + { id: "grnteWqRmrk", title: "비고", row: 1 }, + { id: "reqBizGrssCst", title: "소요사업비\n(백만원)", row: 0, rowSpan: 2 }, +] + +// 유사사례 데이터 +const similarCaseList : SimilarCaseType[] = [ + +] + +// 사업비 상세정보 모달 헤더 +export const moneyDetailModalHeader: TableUpperProps[] = [ + { id: "A", title: "소요사업비(백만원)", row: 0, colSpan: 14 }, + { id: "reqBizGrssCst", title: "총", row: 1, rowSpan: 2 }, + { id: "B", title: "토목", row: 1, colSpan: 2 }, + { id: "reqBizReuseFcltCst", title: "재이용시설", row: 2 }, + { id: "reqBizPplCst", title: "관로", row: 2 }, + { id: "reqBizArchCst", title: "건축", row: 1, rowSpan: 2 }, + { id: "reqBizMchnCst", title: "기계", row: 1, rowSpan: 2 }, + { id: "reqBizMtrngCst", title: "전기,계측", row: 1, rowSpan: 2 }, + { id: "reqBizGisCst", title: "GIS/DB", row: 1, rowSpan: 2 }, + { id: "reqBizCctvCst", title: "CCTV", row: 1, rowSpan: 2 }, + { id: "reqBizCmcnCst", title: "시공 및 준공", row: 1, rowSpan: 2 }, + { id: "reqBizWstCst", title: "폐기물", row: 1, rowSpan: 2 }, + { id: "reqBizDesignCst", title: "설계비", row: 1, rowSpan: 2 }, + { id: "reqBizSpvsCst", title: "감리비", row: 1, rowSpan: 2 }, + { id: "reqBizSbsdCst", title: "시설 부대비", row: 1, rowSpan: 2 }, + { id: "reqBizEtc", title: "기타", row: 1, rowSpan: 2 }, + { id: "C", title: "재원조달계획(백만원)", row: 0, colSpan: 5 }, + { id: "prcmPlanGrssCst", title: "총", row: 1, rowSpan: 2 }, + { id: "prcmPlanNlep", title: "국비", row: 1, rowSpan: 2 }, + { id: "prcmPlanLcep", title: "지방비", row: 1, rowSpan: 2 }, + { id: "prcmPlanBrdnCst", title: "원인자부담", row: 1, rowSpan: 2 }, + { id: "prcmPlanEcqrRt", title: "국고비율", row: 1, rowSpan: 2 }, + { id: "D", title: "사업비 정산(백만원)", row: 0, colSpan: 5 }, + { id: "clclnGrssCst", title: "총", row: 1, rowSpan: 2 }, + { id: "clclnNlep", title: "국비", row: 1, rowSpan: 2 }, + { id: "clclnLcep", title: "지방비", row: 1, rowSpan: 2 }, + { id: "clclnBrdnCst", title: "원인자부담", row: 1, rowSpan: 2 }, + { id: "clclnEcqrRt", title: "국고비율", row: 1, rowSpan: 2 }, +] + +// 사업비 상세정보 +const moneyDetailList : MoneyDetailType[] = [ +] + +// 수요정보 신청현황 헤더 +export const upHeadSdmInfoStatus: TableUpperProps[] = [ + { id: "index", title: "No."}, + { id: "ctpvCd", title: "시도", row: 0, rowSpan: 2 }, + { id: "sggCd", title: "시군구", row: 0, rowSpan: 2 }, + { id: "dmdCoNm", title: "회사명", row: 0, rowSpan: 2 }, + { id: "daddr", title: "공장주소", row: 0, rowSpan: 2 }, + { id: "telno", title: "전화번호", row: 0, rowSpan: 2 }, + { id: "dmndTmng", title: "신청일자", row: 0, rowSpan: 2 }, + { id: "status", title: "진행상태", row: 0, rowSpan: 2 }, +] + +// 수요정보 신청현황 데이터 + +/**==================================== + * Store - Api +=====================================*/ +// 수요처 등록 +const postSdmData = async (data: DemandCompType) => { + try { + await postFetch("/reuseFc/request", data); + toast.success("수요처 등록에 성공하였습니다."); + return true; + } catch (error) { + console.log(error); + toast.error("수요처 등록에 실패하였습니다."); + return false; + } +} + +// 수요정보 등록 +const postSdmInfoData = async (data: DemandCompType) => { + try { + await postFetch("/reuseFc/request/demandInfo", data); + toast.success('수요 정보 등록에 성공하였습니다.'); + } catch (error) { + console.log(error); + toast.error('수요 정보 등록에 실패하였습니다.'); + } +} + +const postSdmLoginData = async (data: DemandCompType) => { + try { + const res = await postFetch("/reuseFc/request/login", data); + const jsonData = await res.json(); + + const status = jsonData.status; + const loginData = jsonData.data; + let loginSuccess = false; + if(status === 200 && loginData != null) { + alert("수요처 로그인에 성공하였습니다."); + sessionStorage.setItem("user", JSON.stringify(loginData)); + loginSuccess = true; + } else if(status === 401) { + alert("패스워드가 틀렸습니다."); + loginSuccess = false; + } else { + alert("등록된 수요처가 없습니다."); + loginSuccess = false; + } + + return loginSuccess; + } catch (error) { + console.log(error); + alert("수요처 로그인에 실패하였습니다."); + } +} + +const getDemandCompList = async (searchText: string, pageCnt: number) => { + try { + const url = '/reuseFc/request/' + (searchText ? searchText : '') + '/' + pageCnt; + const res = await getFetch(fetchType.WR, url); + return { + data: res?.data || [], + count: res?.count || 0 + } + } catch (error) { + console.error(error+' 수요처 정보를 불러오지 못했습니다.'); + return { data: [], count: 0 }; + } +} + +const getSdmInfoStatusList = async (dmdInfoId : string) => { + try { + const url = '/reuseFc/request/' + dmdInfoId; + const res = await getFetch(fetchType.WR, url); + return res?.data || []; + } catch (error) { + console.error(error+' 수요정보 신청현황을 불러오지 못했습니다.'); + return []; + } +} + +// 유사사례 조회 +const fetchGetSimilarCaseList = async (part: string, value: number|string) => { + try { + const url = '/reuseFc/pubFcRuseCase/dm/' + part + '/' + (value ? value : 0); + const res = await getFetch(fetchType.WR, url); + return res?.data || []; + } catch (error) { + console.error(error+' 유사사례 조회에 실패하였습니다.'); + return []; + } +} + +/**==================================== + * Store - expaort + ====================================*/ +export type SdmActions = { + initializeSdmData: () => void; + insertSdmData: (data: DemandCompType) => Promise<void>; + insertSdmInfoData: (data: DemandCompType) => Promise<void>; + getDemandCompList: (searchText: string, pageCnt: number) => Promise<void>; + actionLogin: (data: DemandCompType) => Promise<void>; + getSdmInfoStatusList: (dmdInfoId: string) => Promise<void>; + getSimilarCaseList: (part: string, value: number|string) => Promise<void>; +} + +export type SdmType ={ + Sdm :{ + isInit: boolean; + useTypesData: SelectDataType[]; + demandCompList: DemandCompType[]; + upHeadSimilarCaseList: TableUpperProps[]; + similarCaseList: SimilarCaseType[]; + upHeadMoneyDetailList : TableUpperProps[]; + moneyDetailList: MoneyDetailType[]; + + // 수요정보 신청현황 + sdmInfoStatusList: DemandCompType[]; + upHeadSdmInfoStatus: TableUpperProps[]; + + // 로그인관련 + successNextPage : boolean; + successLogin: boolean; + } +} + +export const SdmState: SdmType = { + Sdm:{ + isInit:false, + useTypesData: useTypesData, + demandCompList: demandCompList, + upHeadSimilarCaseList: similarCaseModalHeader, + similarCaseList: similarCaseList, + upHeadMoneyDetailList : moneyDetailModalHeader, + moneyDetailList: moneyDetailList, + + // 수요정보 신청현황 + sdmInfoStatusList: [], + upHeadSdmInfoStatus: upHeadSdmInfoStatus, + + // 로그인관련 + successNextPage : false, + successLogin: false, + } +} + +export const SdmReducer = (set: any): SdmActions => { + return { + initializeSdmData: async () => { + }, + + insertSdmData: async (data: DemandCompType) => { + const preRes = await getSdmInfoStatusList(data.dmdInfoId); + if(preRes?.dmdInfoId) { + toast.error('이미 등록된 수요처입니다.'); + return; + } + + const res = await postSdmData(data); + if(res) { + set((state: SdmType) => ({ + Sdm: { + ...state.Sdm, + successNextPage: true, + } + })) + } + }, + + insertSdmInfoData: async (data: DemandCompType) => { + postSdmInfoData(data); + }, + + // 수요처 정보 + getDemandCompList: async (searchText: string, pageCnt: number) => { + const res = await getDemandCompList(searchText, pageCnt); + if(res.data.length === 0) { + set((state: SdmType) => ({ + Sdm: { + ...state.Sdm, + demandCompList: [], + } + })) + return; + } else { + set((state: SdmType) => ({ + Sdm: { + ...state.Sdm, + demandCompList: res.data, + } + })) + } + }, + + // 수요정보 신청현황 + getSdmInfoStatusList: async (dmdInfoId: string) => { + const res = await getSdmInfoStatusList(dmdInfoId); + if(res.length === 0) { + set((state: SdmType) => ({ + Sdm: { + ...state.Sdm, + sdmInfoStatusList: [], + } + })) + return; + } + const sdmInfoStatusList : DemandCompType[] = []; + + res.demandInfo.map((el: DemandCompType, index: number) => { + const matchingInfo = res.demandMatchings.find((matching: DemandMatchings) => matching.dmdInfoSn === el.dmdInfoSn); + const status = matchingInfo?.splyFcltFlg?.trim() === 'Sub' ? '검토' : matchingInfo?.splyFcltFlg?.trim() === 'matched' ? '매칭완료' : '신청'; + + const tmpData = { + ...el, + index: ++index, + bzmnNo: res.bzmnNo, + dmdCoNm: res.dmdCoNm, + dmdInfoId: res.dmdInfoId, + daddr: res.daddr, + telno: res.telno.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3'), + rgtr: res.rgtr, + ctpvCd: res.ctpvCd, + sggCd: res.sggCd, + useUsgCd: el.useUsgCd, + dmndTmng: el.dmndTmng, + dmdInfoSn : el.dmdInfoSn, + status : status + } + sdmInfoStatusList.push(tmpData); + }) + set((state: SdmType) => ({ + Sdm: { + ...state.Sdm, + sdmInfoStatusList: sdmInfoStatusList, + } + })) + }, + + actionLogin: async (data: DemandCompType) => { + const loginSuccess = await postSdmLoginData(data); + set((state: SdmType) => ({ + Sdm: { + ...state.Sdm, + successLogin: loginSuccess, + } + })) + }, + + // 유사사례 조회 + getSimilarCaseList: async (part: string, value: number|string) => { + const res = await fetchGetSimilarCaseList(part, value); + if(res && res.length !== 0) { + set((state: SdmType) => ({ + Sdm: { + ...state.Sdm, + similarCaseList: res, + } + })) + return; + }else{ + set((state: SdmType) => ({ + Sdm: { + ...state.Sdm, + similarCaseList: [], + } + })) + return; + } + } + } +} +export type SdmStore = SdmType & SdmActions; diff --git a/apps/dm/app/store/store.tsx b/apps/dm/app/store/store.tsx new file mode 100644 index 000000000..66b626aa3 --- /dev/null +++ b/apps/dm/app/store/store.tsx @@ -0,0 +1,19 @@ +import { createStore } from 'zustand/vanilla'; +import { CommonReducer, CommonState, type CommonStore, type CommonType } from './common'; +import { SdmReducer, SdmState, type SdmStore, type SdmType } from './sdmMng'; + +export type DmStore = CommonStore & SdmStore; +export type DmState = CommonType & SdmType; + +export const StoreZus = (initState: DmState= { + ...CommonState, + ...SdmState, +}) => { + return createStore<DmStore>()((set) => { + return { + ...initState, + ...CommonReducer(set), + ...SdmReducer(set) + } + }) +} \ No newline at end of file diff --git a/apps/dm/app/style/PublicReuseFaciltyInsert.module.css b/apps/dm/app/style/PublicReuseFaciltyInsert.module.css new file mode 100644 index 000000000..6fc6f75ee --- /dev/null +++ b/apps/dm/app/style/PublicReuseFaciltyInsert.module.css @@ -0,0 +1,9 @@ +.formInsideTitle{ + background-color: gray; + text-align: center; +} + + + +.smallTitle{ +} \ No newline at end of file diff --git a/apps/dm/components.json b/apps/dm/components.json new file mode 100644 index 000000000..d9ef0ae53 --- /dev/null +++ b/apps/dm/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.ts", + "css": "app/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "iconLibrary": "lucide" +} \ No newline at end of file diff --git a/apps/dm/components/toastFromUi.tsx b/apps/dm/components/toastFromUi.tsx new file mode 100644 index 000000000..24b0b985f --- /dev/null +++ b/apps/dm/components/toastFromUi.tsx @@ -0,0 +1,53 @@ + +import { Button } from "@common/components/ui"; +import Link from "next/link"; +import toast from "react-hot-toast"; + +export function ToastFormUi(body:string,title:string,url:string,buttonName:string){ + + //const router = useRouter(); + + return( + + toast.custom((t) => ( + + <div + className={`${ + t.visible ? 'animate-enter' : 'animate-leave' + } w-4/12 h-40 bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`} + > + <div className="w-full flex-1 py-10"> + <div className="flex items-start"> + <div className="flex-shrink-0 pt-0.5"> + + </div> + <div className="ml-3 flex-1"> + <p className="text-xl font-medium underline"> + {title} + </p> + <p className="mt-1 text-2xl"> + {body} + </p> + </div> + </div> + </div> + <div className="flex py-20"> + <Button + size='sm' + onClick={() => toast.dismiss(t.id)} + > + <Link href={url}> {buttonName}</Link> + </Button> + </div> + <div className="flex pl-4 pr-4 py-20"> + <Button + onClick={() => toast.dismiss(t.id)} + size='sm' + > + 닫기 + </Button> + </div> + </div> + )) + ) +} \ No newline at end of file diff --git a/apps/dm/components/ui/api/index.ts b/apps/dm/components/ui/api/index.ts new file mode 100644 index 000000000..51d06e700 --- /dev/null +++ b/apps/dm/components/ui/api/index.ts @@ -0,0 +1,72 @@ +//8880 +import { DEV_URL_FO, DEV_URL_WR } from "../config"; + +export const fetchType = { + COMMON: "common", + WR: "wr" +}; + +interface RequestParams { + [key: string]: unknown; +} + +export const getFetch = async (type: string, url: string) => { + const baseUrl = type === fetchType.COMMON ? DEV_URL_FO : DEV_URL_WR; + const response = await fetch(baseUrl + url, { + method: "GET", + headers: { + accept: "application/json", + }, + }); + + if (!response.ok) { + throw new Error(`오류 발생: ${response.status}`); + } + const res = await response.json(); + return res; +}; + +export const postFetch = async (url: string, params: RequestParams) => { + const response = await fetch(DEV_URL_WR + url, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(params), + }); + + if (!response.ok) { + throw new Error(`오류 발생: ${response.status}`); + } + return response; +}; + +export const putFetch = async (url: string, params: RequestParams) => { + const response = await fetch(DEV_URL_WR + url, { + method: "PUT", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(params), + }); + + if (!response.ok) { + throw new Error(`오류 발생: ${response.status}`); + } + return response; +}; + +export const deleteFetch = async (url: string, params: RequestParams) => { + const response = await fetch(DEV_URL_WR + url, { + method: "DELETE", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(params), + }); + + if (!response.ok) { + throw new Error(`오류 발생: ${response.status}`); + } + return response; +}; \ No newline at end of file diff --git a/apps/dm/components/ui/common/searhDemandInput/component.tsx b/apps/dm/components/ui/common/searhDemandInput/component.tsx new file mode 100644 index 000000000..5598129a7 --- /dev/null +++ b/apps/dm/components/ui/common/searhDemandInput/component.tsx @@ -0,0 +1,103 @@ +import { useDmStore } from '@/app/store'; +import type { DemandCompType } from '@/app/store/sdmMng'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; + +type thisProps = { + label: string | undefined; + initValue: string | undefined; + setValue : (dmdCoNm?: string) => void; + setRtnData : (rtnData: DemandCompType[]) => void; +} + +export default function SearchInputText({label=undefined, initValue=undefined, setValue=()=>{}, setRtnData=()=>{}} :thisProps) { + + const { getDemandCompList, Sdm } = useDmStore((state) => state); + + const { + demandCompList + } = Sdm; + + const [isOpen, setIsOpen] = useState(false); + const [textValue, setTextValue] = useState(initValue || ''); + const wrapperRef = useRef<HTMLDivElement>(null); + const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => { + const value = e.target.value; + setTextValue(value); + setValue(value); + if (value) { + setIsOpen(true); + getDemandCompList(value, 20); + } else { + setIsOpen(false); + } + }, [getDemandCompList, setValue]); + + const handleSuggestionClick = useCallback((dmdCoNm: string) => { + setTextValue(dmdCoNm); + setValue(dmdCoNm); + setIsOpen(false); + setRtnData(demandCompList); + }, [demandCompList, setRtnData, setValue]); + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) { + setIsOpen(false); + } + }; + + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, []); + + return ( + <div ref={wrapperRef}> + <input + type="text" + value={textValue} + onChange={handleInputChange} + /* onFocus={() => setIsOpen(true)} */ + className="w-full h-[3.2rem] !text-xl pl-3 text-gray-600 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + placeholder={`${label}을(를) 입력하세요`} + /> + {isOpen && ( + <div className=" z-1 w-full mt-2 bg-white border border-gray-300 rounded-md shadow-lg h-90 overflow-auto"> + <div className="max-h-72"> + {demandCompList && demandCompList.length > 0 ? demandCompList.map((item : DemandCompType, index : number) => ( + <div + key={index} + className="!text-xl w-full text-left px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto" + onClick={() => handleSuggestionClick(item.dmdCoNm)} + role="button" + tabIndex={0} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + handleSuggestionClick(item.dmdCoNm); + } + }} + > + {item.dmdInfoId.substring(10,14) !== '0000' ? ( + <> + <span className="text-gray-500">사업자번호 : </span> {item.dmdInfoId.substring(0,10)}  + <span className="text-gray-500">종사업자번호 : </span> {item.dmdInfoId.substring(10,14)}  + </> + ) : ( + <> + <span className="text-gray-500">사업자번호 : </span> {item.dmdInfoId.substring(0,10)}  + </> + )} + <span className="float-right">{item.dmdCoNm}</span> + </div> + )) : ( + <div className="!text-xl w-full px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto"> + 검색 결과가 없습니다. + </div> + )} + </div> + </div> + )} + </div> + ) +} \ No newline at end of file diff --git a/apps/dm/components/ui/config/index.ts b/apps/dm/components/ui/config/index.ts new file mode 100644 index 000000000..2ed4ef03d --- /dev/null +++ b/apps/dm/components/ui/config/index.ts @@ -0,0 +1,5 @@ +import { PROXY_HOST, SERVER_API_FO_URL, SERVER_API_WR_URL } from "@/src/shared/config/env"; + +export const LOCAL_URL = PROXY_HOST; +export const DEV_URL_FO = SERVER_API_FO_URL; +export const DEV_URL_WR = SERVER_API_WR_URL; diff --git a/apps/dm/components/ui/sdmInfoInsertForm/AccessibleFormField.tsx b/apps/dm/components/ui/sdmInfoInsertForm/AccessibleFormField.tsx new file mode 100644 index 000000000..d2dfc00cb --- /dev/null +++ b/apps/dm/components/ui/sdmInfoInsertForm/AccessibleFormField.tsx @@ -0,0 +1,34 @@ +import { FormUi } from "@common/business_components/ui"; +import type { ReactNode } from "react"; +import type { ControllerRenderProps, FieldError, FieldValues, Path } from "react-hook-form"; + + +interface AccessibleFormFieldProps<T extends FieldValues> { + field: ControllerRenderProps<T, Path<T>>; + label: string; + required?: boolean; + error?: FieldError; + inputComponent: ReactNode; +} + +export function AccessibleFormField<T extends FieldValues>({ + label, + required = false, + error, + inputComponent, +}: AccessibleFormFieldProps<T>) { + const labelText = required ? `${label} *` : label; + + return ( + <FormUi label={labelText}> + <div> + {inputComponent} + {error?.message && Array.from(new Set(error.message.split('\n'))).map((msg, idx) => ( + <p key={idx} className="text-red-500 text-sm mt-1" role="alert"> + {msg} + </p> + ))} + </div> + </FormUi> + ); +} diff --git a/apps/dm/components/ui/sdmInfoInsertForm/component.tsx b/apps/dm/components/ui/sdmInfoInsertForm/component.tsx new file mode 100644 index 000000000..79d53db80 --- /dev/null +++ b/apps/dm/components/ui/sdmInfoInsertForm/component.tsx @@ -0,0 +1,572 @@ +import ModalSimilarPage from "@/app/pages/sdmMng/sdmInfoInsert/modalSimilar/page"; +import type { FormData } from "@/app/pages/sdmMng/sdmInfoInsert/page"; +import { useDmStore } from "@/app/store"; +import { CANDIDATE, DatePicker, FormField, FormLabel, FormUi, SelectBox, UiModal } from "@common/business_components"; +import { Input } from "@common/components"; +import { Button } from "@common/components/ui"; +import { useSearchParams } from "next/navigation"; +import { useCallback, useEffect, useState } from "react"; +import { AccessibleFormField } from "./AccessibleFormField"; +import type { ControllerRenderProps, UseFormReturn } from "react-hook-form"; +import SearchInputText from "../common/searhDemandInput/component"; +import type { DemandCompType } from "@/app/store/sdmMng"; + +export interface SdmInfoRegFormProps { + form: UseFormReturn<FormData>; + onCheckboxChange?: (checked: boolean) => void; + facilityName?: string; +} + +type FieldComponent = (field: ControllerRenderProps<FormData, keyof FormData>) => JSX.Element; + +export function SdmInfoRegForm({ form, onCheckboxChange, facilityName }: SdmInfoRegFormProps) { + const { initializeCommonData, Sdm } = useDmStore((state) => state); + const { useTypesData } = Sdm; + const searchParams = useSearchParams(); + + const [sdmNmValue, setSdmNmValue] = useState<string>(searchParams.get('dmdCoNm') || ''); + const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(false); + const [isSimilarCase, setIsSimilarCase] = useState(false); + const [key, setKey] = useState(0); + + //모달 조회에 필요한 데이터 + const [sply, setSply] = useState<number>(0); + const [usageCd, setUsageCd] = useState<string>('청소'); + const [money, setMoney] = useState<number>(0); + + useEffect(() => { + initializeCommonData(); + }, [initializeCommonData]); + + useEffect(() => { + if (useTypesData && useTypesData.length > 0) { + setTimeout(() => { + form.setValue('usePurpose', useTypesData[0]?.val?.toString() || ''); + }, 500); + } + }, [useTypesData, form]); + + useEffect(() => { + if (facilityName) { + setSdmNmValue(facilityName); + form.setValue('sdmNm', facilityName); + setKey(prev => prev + 1); + } + }, [facilityName, form]); + + const searchCandidate = (e: React.MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + } + + const searchSimilarCase = (e: React.MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + setIsSimilarCase(true); + } + + const handleCheckboxChange = (checked: boolean) => { + setIsBznmTotNoDisabled(checked); + onCheckboxChange?.(checked); + }; + + // 시설 선택시 이벤트 + const selectComp = useCallback((rtnData: DemandCompType[]) => { + const rtnCompData = rtnData?.[0]; + form.setValue('sdmNm', rtnCompData?.dmdCoNm || ''); + }, [form]); + + const formFields: Array<{ + name: keyof FormData; + label: string; + component: FieldComponent | undefined; + formIndex: number; + required?: boolean; + }> = [ + { + name: "sdmNm", + label: "수요처선택", + formIndex: 0, + required: true, + component: (field) => ( + <div key={key}> + <SearchInputText + label="수요처명" + setValue={(val) => { + setSdmNmValue(val || ''); + field.onChange(val || ''); + }} + setRtnData={selectComp} + initValue={facilityName || sdmNmValue} + {...field} + /> + </div> + ) + }, + { + name: "demandYmd", + label: "요구시기", + formIndex: 0, + required: true, + component: (field) => ( + <div className="w-full"> + <DatePicker + mode="single" + selected={field.value as Date} + onSelect={(date) => { + field.onChange(date as Date); + }} + className="w-full" + defaultMonth={field.value as Date} + field={{ + value: field.value as Date, + onChange: (date: Date | undefined) => { + field.onChange(date as Date); + } + }} + selectClass={undefined} + /> + </div> + ) + }, + { + name: "demandQnty", + label: "요구수량(㎥/d)", + formIndex: 0, + required: true, + component: (field) => ( + <Input + placeholder="요구수량(㎥/d)을 입력하세요" + type="text" + className="!text-xl text-gray-600" + value={field.value as string} + onChange={(e) => { + field.onChange(e); + setSply(Number(e.target.value)); + }} + onBlur={field.onBlur} + name={field.name} + ref={field.ref} + /> + ) + }, + { + name: "usePurpose", + label: "사용용도", + formIndex: 0, + required: true, + component: (field) => ( + <SelectBox + selectClass={undefined} + label="" + selectArray={useTypesData} + onSelectValue={(val) => { + field.onChange(val.toString()); + setUsageCd(val.toString()); + }} + className="" + value={field.value as string} + /> + ) + }, + { + name: "money", + label: "희망단가(원/m3)", + formIndex: 0, + required: true, + component: (field) => ( + <AccessibleFormField + field={field} + label="희망단가(원/㎥)" + required={true} + error={form.formState.errors.money} + inputComponent={ + <FormUi + onCheckboxChange={handleCheckboxChange} + isDisabled={isBznmTotNoDisabled} + > + <Input + placeholder="희망단가(원/㎥)을 입력하세요" + type="text" + className="!text-xl text-gray-600" + value={field.value as string} + onChange={(e) => { + field.onChange(e); + setMoney(Number(e.target.value)); + }} + onBlur={field.onBlur} + name={field.name} + ref={field.ref} + /> + </FormUi> + } + /> + ) + }, + { + name: "reqWaterQlty", + label: "요구수질", + formIndex: 0, + required: true, + component: undefined + }, + { + name: "grssClfg", + label: "총대장균군수(개/100ml)", + formIndex: 1, + required: true, + component: (field) => ( + <Input + placeholder="총대장균군수를 입력하세요" + type="text" + className="!text-xl text-gray-600" + value={field.value as string} + onChange={field.onChange} + onBlur={field.onBlur} + name={field.name} + ref={field.ref} + /> + ) + }, + { + name: "tn", + label: "총질소(T-N)(mg/L)", + formIndex: 1, + required: true, + component: (field) => ( + <Input + placeholder="총질소를 입력하세요" + type="text" + className="!text-xl text-gray-600" + value={field.value as string} + onChange={field.onChange} + onBlur={field.onBlur} + name={field.name} + ref={field.ref} + /> + ) + }, + { + name: "combResdch", + label: "결합잔류염소(mg/L)", + formIndex: 1, + required: true, + component: (field) => ( + <Input + placeholder="결합잔류염소를 입력하세요" + type="text" + className="!text-xl text-gray-600" + value={field.value as string} + onChange={field.onChange} + onBlur={field.onBlur} + name={field.name} + ref={field.ref} + /> + ) + }, + { + name: "tph", + label: "총인(T-P)(mg/L)", + formIndex: 1, + required: true, + component: (field) => ( + <Input + placeholder="총인을 입력하세요" + type="text" + className="!text-xl text-gray-600" + value={field.value as string} + onChange={field.onChange} + onBlur={field.onBlur} + name={field.name} + ref={field.ref} + /> + ) + }, + { + name: "trbt", + label: "탁도(NTU)", + formIndex: 1, + required: true, + component: (field) => ( + <Input + placeholder="탁도를 입력하세요" + type="text" + className="!text-xl text-gray-600" + value={field.value as string} + onChange={field.onChange} + onBlur={field.onBlur} + name={field.name} + ref={field.ref} + /> + ) + }, + { + name: "ph", + label: "수소이온농도(pH)", + formIndex: 1, + required: true, + component: (field) => ( + <Input + placeholder="수소이온농도를 입력하세요" + type="text" + className="!text-xl text-gray-600" + value={field.value as string} + onChange={field.onChange} + onBlur={field.onBlur} + name={field.name} + ref={field.ref} + /> + ) + }, + { + name: "bod", + label: "생물학적 산소요구량(BOD)(mg/L)", + formIndex: 1, + required: true, + component: (field) => ( + <Input + placeholder="생물학적 산소요구량을 입력하세요" + type="text" + className="!text-xl text-gray-600" + value={field.value as string} + onChange={field.onChange} + onBlur={field.onBlur} + name={field.name} + ref={field.ref} + /> + ) + }, + { + name: "clIonQnt", + label: "염화물(mgCL/L)", + formIndex: 1, + required: true, + component: (field) => ( + <Input + placeholder="염화물을 입력하세요" + type="text" + className="!text-xl text-gray-600" + value={field.value as string} + onChange={field.onChange} + onBlur={field.onBlur} + name={field.name} + ref={field.ref} + /> + ) + }, + { + name: "smll", + label: "냄새", + formIndex: 1, + required: true, + component: (field) => ( + <Input + placeholder="냄새를 입력하세요" + type="text" + className="!text-xl text-gray-600" + value={field.value as string} + onChange={field.onChange} + onBlur={field.onBlur} + name={field.name} + ref={field.ref} + /> + ) + }, + { + name: "cdtnv", + label: "전기전도도(㎲/cm)", + formIndex: 1, + required: true, + component: (field) => ( + <Input + placeholder="전기전도도를 입력하세요" + type="text" + className="!text-xl text-gray-600" + value={field.value as string} + onChange={field.onChange} + onBlur={field.onBlur} + name={field.name} + ref={field.ref} + /> + ) + }, + { + name: "crmty", + label: "색도(도)", + formIndex: 1, + required: true, + component: (field) => ( + <Input + placeholder="색도를 입력하세요" + type="text" + className="!text-xl text-gray-600" + value={field.value as string} + onChange={field.onChange} + onBlur={field.onBlur} + name={field.name} + ref={field.ref} + /> + ) + }, + { + name: "rmrk", + label: "비고", + formIndex: 1, + required: true, + component: (field) => ( + <Input + placeholder="비고를 입력하세요" + type="text" + className="!text-xl text-gray-600" + value={field.value as string} + onChange={field.onChange} + onBlur={field.onBlur} + name={field.name} + ref={field.ref} + /> + ) + }, + { + name: "candidateTitle", + label: CANDIDATE || "공급처 후보지 선택(필수아님)", + formIndex: 2, + component: (field) => ( + <div> + <div className="-mt-14 float-right flex gap-10"> + <Button className={'bg-gray-200'} onClick={searchCandidate}> + 후보지 조회 + </Button> + <Button className={'bg-gray-200'} onClick={searchSimilarCase}> + 유사사례 + </Button> + </div> + <div className="flex justify-center gap-10 mt-5"> + <Input + placeholder="후보지1" + type="text" + className="!text-xl w-[130px] text-gray-600" + value={field.value as string} + onChange={field.onChange} + onBlur={field.onBlur} + name={field.name} + ref={field.ref} + /> + <Input + placeholder="후보지2" + type="text" + className="!text-xl w-[130px] text-gray-600" + value={field.value as string} + onChange={field.onChange} + onBlur={field.onBlur} + name={field.name} + ref={field.ref} + /> + <Input + placeholder="후보지3" + type="text" + className="!text-xl w-[130px] text-gray-600" + value={field.value as string} + onChange={field.onChange} + onBlur={field.onBlur} + name={field.name} + ref={field.ref} + /> + </div> + </div> + ) + }, + ]; + + const normalFields = formFields.filter(f => f.formIndex === 0 && f.component); + const groupFields = formFields.filter(f => f.formIndex === 1 && f.component); + const candidateFields = formFields.filter(f => f.formIndex === 2 && f.component); + + return ( + <> + {normalFields.map(({ name, label, component, required }) => ( + component ? ( + <FormField + key={name} + control={form.control} + name={name} + render={({ field }) => ( + name === 'money' ? component(field) : ( + // <FormUi label={label}> + // {component(field)} + // </FormUi> + <AccessibleFormField + field={field} + label={label} + required={required} + error={form.formState.errors[name]} + inputComponent={component(field)} + /> + ) + )} + /> + ) : null + ))} + + {groupFields.length > 0 && ( + <div className="mt-10"> + <FormLabel className="text-xl">요구수질</FormLabel> + <div className="flex flex-wrap justify-start gap-10 mt-3 mb-3"> + {groupFields.map(({ name, label, component, required }) => ( + <div key={name} className="min-w-[180px]"> + <FormField + control={form.control} + name={name} + render={({ field }) => ( + // <FormUi label={label}> + // {component?.(field)} + // </FormUi> + <AccessibleFormField + field={field} + label={label} + required={required} + error={form.formState.errors[name]} + inputComponent={component?.(field)} + /> + )} + /> + </div> + ))} + </div> + </div> + )} + + {candidateFields.map(({ name, label, component, required }, index) => ( + component ? ( + <FormField + key={name + index} + control={form.control} + name={name} + render={({ field }) => ( + // <FormUi label={label}> + // {component(field)} + // </FormUi> + <AccessibleFormField + field={field} + label={label} + required={required} + error={form.formState.errors[name]} + inputComponent={component?.(field)} + /> + )} + /> + ) : null + ))} + + {isSimilarCase && ( + <UiModal + body={<ModalSimilarPage sply={sply} usageCd={usageCd} money={money} />} + bodyClass="sm:max-w-[100vw] w-[1400px] h-[900px]" + open={isSimilarCase} + onOpenChange={(open) => !open && setIsSimilarCase(false)} + noHeaderYn="Y" + noFooterYn="Y" + /> + )} + </> + ); +} \ No newline at end of file diff --git a/apps/dm/components/ui/sdmLoginForm/component.tsx b/apps/dm/components/ui/sdmLoginForm/component.tsx new file mode 100644 index 000000000..b9cc305a9 --- /dev/null +++ b/apps/dm/components/ui/sdmLoginForm/component.tsx @@ -0,0 +1,148 @@ +import { useDmStore } from "@/app/store"; +import type { DemandCompType } from "@/app/store/sdmMng"; +import { BZNM_TOT_NO, FormField, FormUi } from "@common/business_components"; +import { Button, Input } from "@common/components"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { sha512 } from 'js-sha512'; +import { useEffect, useState } from "react"; +import { FormProvider, useForm, type ControllerRenderProps } from "react-hook-form"; +import * as z from "zod"; + +export function SdmLoginForm() { + type FormData = z.infer<ReturnType<typeof createFormSchema>>; + type FieldComponent = (field: ControllerRenderProps<FormData, keyof FormData>) => JSX.Element; + const createFormSchema = () => z.object({ + dmdInfoId: z.string() + .min(1, "사업자등록번호를 입력해주세요") + .regex(/^\d{10}$/, "사업자등록번호는 10자리 숫자만 입력 가능합니다"), + bznmTotNo: isBznmTotNoDisabled + ? z.string().optional() + : z.string().length(4, "종사업자등록번호는 4자리 숫자만 입력 가능합니다"), + password: z.string() + .min(1, "비밀번호를 입력해주세요") + .min(8, "비밀번호는 8자 이상 입력해주세요") + .max(16, "비밀번호는 16자 이내로 입력해주세요"), + rgtr: z.string().optional(), + dmdAplyPswd: z.string().optional(), + }); + + const { actionLogin, initializeCommonData } = useDmStore((state) => state); + const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(false); + const formSchema = createFormSchema(); + + useEffect(() => { + initializeCommonData(); + }, [initializeCommonData]); + + const defaultValues: FormData = { + dmdInfoId: '', + bznmTotNo: '', + password: '', + rgtr: '', + dmdAplyPswd: '', + }; + + const form = useForm<FormData>({ + resolver: zodResolver(formSchema), + defaultValues, + mode: "onChange", + }); + + const handleCheckboxChange = (checked: boolean) => { + setIsBznmTotNoDisabled(checked); + }; + + const handleLogin = () => { + const data = form.getValues(); + const passwordStr = sha512.hex(data.password) + data.dmdAplyPswd = passwordStr; + const param = { + dmdInfoId: data.dmdInfoId + (isBznmTotNoDisabled ? '0000' : data.bznmTotNo), + dmdAplyPswd: data.dmdAplyPswd, + } + actionLogin(param as unknown as DemandCompType); + }; + + const formFields: Array<{ + name: keyof FormData; + label: string; + component: FieldComponent | undefined; + }> = [ + { + name: "dmdInfoId", + label: "사업자등록번호", + component: (field) => ( + <Input + placeholder="사업자등록번호를 입력하세요" + type="text" + className="!mt-5 !mb-5 !text-xl text-gray-600" + {...field} + /> + ) + }, + { + name: "bznmTotNo", + label: BZNM_TOT_NO || "종사업자등록번호", + component: (field) => ( + <FormUi + label="종사업자등록번호" + onCheckboxChange={handleCheckboxChange} + isDisabled={isBznmTotNoDisabled} + > + <Input + placeholder="여러사업장이 있을 경우 입력해주세요" + type="text" + className="!mt-5 !text-xl text-gray-600" + disabled={isBznmTotNoDisabled} + {...field} + /> + </FormUi> + ) + }, + { + name: "password", + label: "비밀번호", + component: (field) => ( + <Input + placeholder="비밀번호를 입력하세요" + type="password" + className="!mt-5 !mb-5 !text-xl text-gray-600" + {...field} + /> + ) + } + ]; + + return ( + <> + <div> + <FormProvider {...form}> + {formFields.map(({ name, label, component }) => ( + <FormField + key={name} + control={form.control} + name={name} + render={({ field }) => ( + label==='종사업자등록번호' ? + <> + {component && component(field)} + </> + : <FormUi label={label}> + {component && component(field)} + </FormUi> + )} + /> + ))} + </FormProvider> + <div className="flex justify-center pt-4"> + <Button + onClick={handleLogin} + className="w-32 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition-colors duration-200" + > + 로그인 + </Button> + </div> + </div> + </> + ); +} \ No newline at end of file diff --git a/apps/dm/eslint.config.mjs b/apps/dm/eslint.config.mjs new file mode 100644 index 000000000..29e63f653 --- /dev/null +++ b/apps/dm/eslint.config.mjs @@ -0,0 +1,20 @@ +import { dirname } from "path"; +import { fileURLToPath } from "url"; +import { FlatCompat } from "@eslint/eslintrc"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = dirname(__filename); + +const compat = new FlatCompat({ + baseDirectory: __dirname, +}); + +const eslintConfig = [ + ...compat.extends("next/core-web-vitals", "next/typescript"), + {rules:{ + // other rules.. + "@typescript-eslint/no-explicit-any": "off", + }}, +]; + +export default eslintConfig; diff --git a/apps/dm/middleware.ts b/apps/dm/middleware.ts new file mode 100644 index 000000000..9d914de2d --- /dev/null +++ b/apps/dm/middleware.ts @@ -0,0 +1,128 @@ +import { NextRequest, NextResponse } from "next/server"; +import { CLAIM_NAME, AUTH_USER_ID } from "./src/shared/config"; + +// const CLAIM_NAME = "Authorization"; +// const AUTH_USER_ID = "token-id"; +const serverApiUrl = process.env.NEXT_PUBLIC_CS_SERVER_API_URL; +const GEOSERVER_URL = process.env.NEXT_PUBLIC_GEOSERVER_URL || ""; +const LX_GEOSERVER_URL = process.env.NEXT_PUBLIC_LX_GEOSERVER_URL || ""; +const SEWERAGE_API_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL || ""; + +export function middleware(req: NextRequest) { + const pathname = req.nextUrl.pathname; + console.log(`[Middleware] Request URL: ${req.url}`); + const searchParams = req.nextUrl.searchParams; + + // if (pathname.startsWith("/server")) { + // const queryParams = searchParams.toString(); + // const newUrl = `${serverApiUrl}${pathname.replace("/server", "")}${ + // queryParams ? `?${queryParams}` : "" + // }`; + // console.log(`[Middleware] Rewriting from '/server' path to: ${newUrl}`); + // return NextResponse.rewrite(new URL(newUrl)); + // } + + if (pathname.startsWith("/server")) { + const decodedParams = Array.from(searchParams.entries()) + .map(([key, value]) => `${key}=${decodeURIComponent(value)}`) + .join("&"); + + console.log(' sesesesesesevereveraserwereqwrewbrtkehjwrtg server') + const newUrl = `${serverApiUrl}${pathname.replace("/server", "")}${ + decodedParams ? `?${decodedParams}` : "" + }`; + return NextResponse.rewrite(new URL(newUrl)); + } + + + if (pathname.startsWith("/attach-service")) { + const requestHeaders = new Headers(req.headers); + // const token = + // "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhMGVjN2EwNy03NTJhLTRmN2YtODlhNi04NTRlNjNkMmUzYTAiLCJhdXRob3JpdGllcyI6IlJPTEVfQURNSU4sUk9MRV9BTk9OWU1PVVMiLCJtbmdyWW4iOiJZIiwiZXhwIjoxNzUyMTM1OTk3fQ.itGY6M6mC2iwKvEpXw2KS6354T_B_OFz4hD26ResIgwJhpwiDJCMuSXD-rZ3AarmAIKd0udpCuJR7UlvFMN2ww"; + // const userId = "a0ec7a07-752a-4f7f-89a6-854e63d2e3a0"; + const token = req.cookies.get(CLAIM_NAME)?.value; + const userId = req.cookies.get(AUTH_USER_ID)?.value; + const newUrl = `${serverApiUrl}${pathname}`; + + //wr:dev: pathname /attach-service/api/v1/tus/upload/5e60b70a-956e-40c3-be5a-cdd3100bf8ad + //http://dev.onasys.co.kr:8000/attach-service/api/v1/tus/upload/5e60b70a-956e-40c3-be5a-cdd3100bf8ad + if (token) requestHeaders.set(CLAIM_NAME, token); + if (userId) requestHeaders.set(AUTH_USER_ID, userId); + + console.log( + `[Middleware] Rewriting from '/attach-service' path to: ${newUrl}` + ); + return NextResponse.rewrite(new URL(newUrl), { + headers: requestHeaders, + }); + } + + if (pathname.startsWith("/user-service")) { + const requestHeaders = new Headers(req.headers); + const newUrl = `${serverApiUrl}${pathname}`; + + console.log( + `[Middleware] Rewriting from '/user-service' path to: ${newUrl}` + ); + return NextResponse.rewrite(new URL(newUrl), { + headers: requestHeaders + }); + } + + if (pathname.startsWith("/geoserver")) { + let queryParams = searchParams.toString(); + const typename = searchParams.get("TYPENAME"); + console.log("typename ", typename); + + let newUrl = `${GEOSERVER_URL}${pathname.replace("/geoserver", "")}${queryParams ? `?${queryParams}` : ""}`; + + if ( + typename == "hasudo:tb_il_swage_prcs_fclt" //하수처리시설 + || typename == "hasudo:tb_ms_swage_prcs_zone" //하수처리구역 + || typename == "hasudo:tb_ms_sbmrg_dngr_map" //침수위험지도 + || typename == "hasudo:tb_ms_flood_dngr_map" //도시침수지도 + ) { + newUrl = `${GEOSERVER_URL}${pathname.replace("/geoserver", "")}${queryParams ? `?${queryParams}` : ""}`; + } + else if ( + typename == "hasudo:tb_ms_swage_ppl" //관로 + || typename == "hasudo:tb_ms_swage_mhl" //맨홀 + || typename == "hasudo:tb_ms_swage_pmstn" //펌프장 + || typename == "hasudo:tb_ms_stofcbr" //우수토실 + ) { + newUrl = `${LX_GEOSERVER_URL}${pathname.replace("/geoserver", "")}${queryParams ? `?${queryParams}` : ""}`; + } + else if ( + typename == "hasudo:om_dt_untrt_swg_rain" //중점우수토실 + || typename == "hasudo:om_wqlt_station" //관측소 + || typename == "hasudo:tb_wr_bdst_ruse_fclt" //재이용시설 + || typename == "hasudo:tb_wr_rnwtr_utztn_fclt" //빗물이용시설 + || typename == "hasudo:tb_wr_rswtr_fclt" //중수도시설 + || typename == "hasudo:tb_wr_htdfl_fclt" //온배수시설 + || typename == "hasudo:tb_wr_ruse_fclt_dmd_co" //수요처 + || typename == "hasudo:tb_wr_tmpr_dmd_co" //잠재수요처 + ){ + const url = req.nextUrl.clone(); + url.searchParams.set('TYPENAME', typename.replace("hasudo:","")); + queryParams = url.searchParams.toString(); + newUrl = `${SEWERAGE_API_URL}/v1/map/geometry${queryParams ? `?${queryParams}` : ""}`; + } + + console.log(`[Middleware] Rewriting from '/geoserver' path to: ${newUrl}`); + return NextResponse.rewrite(new URL(newUrl)); + } + + if (pathname.startsWith("/sewerage-service")) { + const queryParams = searchParams.toString(); + const newUrl = `${SEWERAGE_API_URL}${pathname.replace("/sewerage-service/api", "")}${queryParams ? `?${queryParams}` : "" + }`; + console.log(`[Middleware] Rewriting from '/geoserver' path to: ${newUrl}`); + return NextResponse.rewrite(new URL(newUrl)); + } + + return NextResponse.next(); +} + +export const config = { + matcher: ["/server/:path*", "/user-service/:path*", "/attach-service/:path*", "/geoserver/:path*", "/sewerage-service/:path*"], +}; diff --git a/apps/dm/next.config.ts b/apps/dm/next.config.ts new file mode 100644 index 000000000..48fc8dacb --- /dev/null +++ b/apps/dm/next.config.ts @@ -0,0 +1,34 @@ +import type { NextConfig } from "next"; + +const subDomain = + process.env.NEXT_PUBLIC_SUB_DOMAIN || "http://localhost:3000"; + +const nextConfig: NextConfig = { + output: "standalone", + async rewrites() { + return { + beforeFiles: [ + { + source: "/_next/static/:path*", + destination: `${subDomain}/_next/static/:path*`, + has: [ + { + type: "header", + key: "referer", + value: "(.*)/pst(.*)", + }, + ], + }, + ], + afterFiles: [ + { + source: "/pst/:path*", + destination: `${subDomain}/pst/:path*`, + }, + ], + fallback: [], + }; + }, +}; + +export default nextConfig; diff --git a/apps/dm/package.json b/apps/dm/package.json new file mode 100644 index 000000000..2fdff5dbc --- /dev/null +++ b/apps/dm/package.json @@ -0,0 +1,37 @@ +{ + "name": "dm", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev --turbopack", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "@common/assets": "workspace:*", + "@common/business_components": "workspace:*", + "@common/components": "workspace:*", + "@hookform/resolvers": "^4.1.3", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "js-cookie": "^3.0.5", + "js-sha512": "^0.9.0", + "lucide-react": "^0.474.0", + "next": "15.1.7", + "react-hook-form": "^7.54.2", + "react-hot-toast": "^2.5.2", + "tailwind-merge": "^3.0.1", + "tailwindcss-animate": "^1.0.7", + "zod": "^3.24.2" + }, + "devDependencies": { + "@eslint/eslintrc": "^3", + "@types/webpack": "^5.28.5", + "eslint": "^9", + "eslint-config-next": "15.1.7", + "postcss": "^8", + "tailwindcss": "^3.4.1", + "typescript": "^5" + } +} diff --git a/apps/dm/postcss.config.mjs b/apps/dm/postcss.config.mjs new file mode 100644 index 000000000..1a69fd2a4 --- /dev/null +++ b/apps/dm/postcss.config.mjs @@ -0,0 +1,8 @@ +/** @type {import('postcss-load-config').Config} */ +const config = { + plugins: { + tailwindcss: {}, + }, +}; + +export default config; diff --git a/apps/dm/public/file.svg b/apps/dm/public/file.svg new file mode 100644 index 000000000..004145cdd --- /dev/null +++ b/apps/dm/public/file.svg @@ -0,0 +1 @@ +<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg> \ No newline at end of file diff --git a/apps/dm/public/fonts/NotoSansKR-Black.otf b/apps/dm/public/fonts/NotoSansKR-Black.otf new file mode 100644 index 000000000..2b54d195e Binary files /dev/null and b/apps/dm/public/fonts/NotoSansKR-Black.otf differ diff --git a/apps/dm/public/fonts/NotoSansKR-Black.woff b/apps/dm/public/fonts/NotoSansKR-Black.woff new file mode 100644 index 000000000..90ef00381 Binary files /dev/null and b/apps/dm/public/fonts/NotoSansKR-Black.woff differ diff --git a/apps/dm/public/fonts/NotoSansKR-Black.woff2 b/apps/dm/public/fonts/NotoSansKR-Black.woff2 new file mode 100644 index 000000000..8953c8fa7 Binary files /dev/null and b/apps/dm/public/fonts/NotoSansKR-Black.woff2 differ diff --git a/apps/dm/public/fonts/NotoSansKR-Bold.otf b/apps/dm/public/fonts/NotoSansKR-Bold.otf new file mode 100644 index 000000000..2b78dd845 Binary files /dev/null and b/apps/dm/public/fonts/NotoSansKR-Bold.otf differ diff --git a/apps/dm/public/fonts/NotoSansKR-Bold.woff b/apps/dm/public/fonts/NotoSansKR-Bold.woff new file mode 100644 index 000000000..74b20d49c Binary files /dev/null and b/apps/dm/public/fonts/NotoSansKR-Bold.woff differ diff --git a/apps/dm/public/fonts/NotoSansKR-Bold.woff2 b/apps/dm/public/fonts/NotoSansKR-Bold.woff2 new file mode 100644 index 000000000..216f94dad Binary files /dev/null and b/apps/dm/public/fonts/NotoSansKR-Bold.woff2 differ diff --git a/apps/dm/public/fonts/NotoSansKR-Light.otf b/apps/dm/public/fonts/NotoSansKR-Light.otf new file mode 100644 index 000000000..ecab31abc Binary files /dev/null and b/apps/dm/public/fonts/NotoSansKR-Light.otf differ diff --git a/apps/dm/public/fonts/NotoSansKR-Light.woff b/apps/dm/public/fonts/NotoSansKR-Light.woff new file mode 100644 index 000000000..40aabd2a4 Binary files /dev/null and b/apps/dm/public/fonts/NotoSansKR-Light.woff differ diff --git a/apps/dm/public/fonts/NotoSansKR-Light.woff2 b/apps/dm/public/fonts/NotoSansKR-Light.woff2 new file mode 100644 index 000000000..6b7cd1307 Binary files /dev/null and b/apps/dm/public/fonts/NotoSansKR-Light.woff2 differ diff --git a/apps/dm/public/fonts/NotoSansKR-Medium.otf b/apps/dm/public/fonts/NotoSansKR-Medium.otf new file mode 100644 index 000000000..371959d51 Binary files /dev/null and b/apps/dm/public/fonts/NotoSansKR-Medium.otf differ diff --git a/apps/dm/public/fonts/NotoSansKR-Medium.woff b/apps/dm/public/fonts/NotoSansKR-Medium.woff new file mode 100644 index 000000000..e15aae09e Binary files /dev/null and b/apps/dm/public/fonts/NotoSansKR-Medium.woff differ diff --git a/apps/dm/public/fonts/NotoSansKR-Medium.woff2 b/apps/dm/public/fonts/NotoSansKR-Medium.woff2 new file mode 100644 index 000000000..b97668034 Binary files /dev/null and b/apps/dm/public/fonts/NotoSansKR-Medium.woff2 differ diff --git a/apps/dm/public/fonts/NotoSansKR-Regular.otf b/apps/dm/public/fonts/NotoSansKR-Regular.otf new file mode 100644 index 000000000..7ba76b49c Binary files /dev/null and b/apps/dm/public/fonts/NotoSansKR-Regular.otf differ diff --git a/apps/dm/public/fonts/NotoSansKR-Regular.woff b/apps/dm/public/fonts/NotoSansKR-Regular.woff new file mode 100644 index 000000000..40fab257c Binary files /dev/null and b/apps/dm/public/fonts/NotoSansKR-Regular.woff differ diff --git a/apps/dm/public/fonts/NotoSansKR-Regular.woff2 b/apps/dm/public/fonts/NotoSansKR-Regular.woff2 new file mode 100644 index 000000000..61d064695 Binary files /dev/null and b/apps/dm/public/fonts/NotoSansKR-Regular.woff2 differ diff --git a/apps/dm/public/fonts/NotoSansKR-Thin.otf b/apps/dm/public/fonts/NotoSansKR-Thin.otf new file mode 100644 index 000000000..06c566278 Binary files /dev/null and b/apps/dm/public/fonts/NotoSansKR-Thin.otf differ diff --git a/apps/dm/public/fonts/NotoSansKR-Thin.woff b/apps/dm/public/fonts/NotoSansKR-Thin.woff new file mode 100644 index 000000000..40723731f Binary files /dev/null and b/apps/dm/public/fonts/NotoSansKR-Thin.woff differ diff --git a/apps/dm/public/fonts/NotoSansKR-Thin.woff2 b/apps/dm/public/fonts/NotoSansKR-Thin.woff2 new file mode 100644 index 000000000..7835c23ed Binary files /dev/null and b/apps/dm/public/fonts/NotoSansKR-Thin.woff2 differ diff --git a/apps/dm/public/globe.svg b/apps/dm/public/globe.svg new file mode 100644 index 000000000..567f17b0d --- /dev/null +++ b/apps/dm/public/globe.svg @@ -0,0 +1 @@ +<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg> \ No newline at end of file diff --git a/apps/dm/public/img/wrAbout/icon_01.png b/apps/dm/public/img/wrAbout/icon_01.png new file mode 100644 index 000000000..30eff5745 Binary files /dev/null and b/apps/dm/public/img/wrAbout/icon_01.png differ diff --git a/apps/dm/public/img/wrAbout/icon_02.png b/apps/dm/public/img/wrAbout/icon_02.png new file mode 100644 index 000000000..36401729f Binary files /dev/null and b/apps/dm/public/img/wrAbout/icon_02.png differ diff --git a/apps/dm/public/img/wrAbout/icon_03.png b/apps/dm/public/img/wrAbout/icon_03.png new file mode 100644 index 000000000..87f48c444 Binary files /dev/null and b/apps/dm/public/img/wrAbout/icon_03.png differ diff --git a/apps/dm/public/img/wrAbout/img_01_1.png b/apps/dm/public/img/wrAbout/img_01_1.png new file mode 100644 index 000000000..9aab4e824 Binary files /dev/null and b/apps/dm/public/img/wrAbout/img_01_1.png differ diff --git a/apps/dm/public/img/wrAbout/img_02_1.png b/apps/dm/public/img/wrAbout/img_02_1.png new file mode 100644 index 000000000..3d61c6e5d Binary files /dev/null and b/apps/dm/public/img/wrAbout/img_02_1.png differ diff --git a/apps/dm/public/img/wrAbout/img_02_2.png b/apps/dm/public/img/wrAbout/img_02_2.png new file mode 100644 index 000000000..c8283053e Binary files /dev/null and b/apps/dm/public/img/wrAbout/img_02_2.png differ diff --git a/apps/dm/public/img/wrAbout/img_02_3.png b/apps/dm/public/img/wrAbout/img_02_3.png new file mode 100644 index 000000000..f5ba9d81e Binary files /dev/null and b/apps/dm/public/img/wrAbout/img_02_3.png differ diff --git a/apps/dm/public/img/wrAbout/img_03_1.png b/apps/dm/public/img/wrAbout/img_03_1.png new file mode 100644 index 000000000..a7534ae68 Binary files /dev/null and b/apps/dm/public/img/wrAbout/img_03_1.png differ diff --git a/apps/dm/public/img/wrAbout/img_03_2.png b/apps/dm/public/img/wrAbout/img_03_2.png new file mode 100644 index 000000000..6b4faca7d Binary files /dev/null and b/apps/dm/public/img/wrAbout/img_03_2.png differ diff --git a/apps/dm/public/img/wrAbout/img_04_1.png b/apps/dm/public/img/wrAbout/img_04_1.png new file mode 100644 index 000000000..a160072bd Binary files /dev/null and b/apps/dm/public/img/wrAbout/img_04_1.png differ diff --git a/apps/dm/public/img/wrAbout/img_04_2.png b/apps/dm/public/img/wrAbout/img_04_2.png new file mode 100644 index 000000000..374fc55bf Binary files /dev/null and b/apps/dm/public/img/wrAbout/img_04_2.png differ diff --git a/apps/dm/public/img/wrAbout/img_05_1.png b/apps/dm/public/img/wrAbout/img_05_1.png new file mode 100644 index 000000000..1418fa92d Binary files /dev/null and b/apps/dm/public/img/wrAbout/img_05_1.png differ diff --git a/apps/dm/public/img/wrAbout/img_05_2.png b/apps/dm/public/img/wrAbout/img_05_2.png new file mode 100644 index 000000000..0c2f92396 Binary files /dev/null and b/apps/dm/public/img/wrAbout/img_05_2.png differ diff --git a/apps/dm/public/img/wrAbout/img_06_1.png b/apps/dm/public/img/wrAbout/img_06_1.png new file mode 100644 index 000000000..08acf4971 Binary files /dev/null and b/apps/dm/public/img/wrAbout/img_06_1.png differ diff --git a/apps/dm/public/img/wrAbout/img_06_2.png b/apps/dm/public/img/wrAbout/img_06_2.png new file mode 100644 index 000000000..19b150b7c Binary files /dev/null and b/apps/dm/public/img/wrAbout/img_06_2.png differ diff --git a/apps/dm/public/img/wrExample/icon_01.png b/apps/dm/public/img/wrExample/icon_01.png new file mode 100644 index 000000000..30eff5745 Binary files /dev/null and b/apps/dm/public/img/wrExample/icon_01.png differ diff --git a/apps/dm/public/img/wrExample/icon_02.png b/apps/dm/public/img/wrExample/icon_02.png new file mode 100644 index 000000000..36401729f Binary files /dev/null and b/apps/dm/public/img/wrExample/icon_02.png differ diff --git a/apps/dm/public/img/wrExample/icon_03.png b/apps/dm/public/img/wrExample/icon_03.png new file mode 100644 index 000000000..87f48c444 Binary files /dev/null and b/apps/dm/public/img/wrExample/icon_03.png differ diff --git a/apps/dm/public/img/wrExample/img_01_1.png b/apps/dm/public/img/wrExample/img_01_1.png new file mode 100644 index 000000000..9aab4e824 Binary files /dev/null and b/apps/dm/public/img/wrExample/img_01_1.png differ diff --git a/apps/dm/public/img/wrExample/img_02_1.png b/apps/dm/public/img/wrExample/img_02_1.png new file mode 100644 index 000000000..3d61c6e5d Binary files /dev/null and b/apps/dm/public/img/wrExample/img_02_1.png differ diff --git a/apps/dm/public/img/wrExample/img_02_2.png b/apps/dm/public/img/wrExample/img_02_2.png new file mode 100644 index 000000000..c8283053e Binary files /dev/null and b/apps/dm/public/img/wrExample/img_02_2.png differ diff --git a/apps/dm/public/img/wrExample/img_02_3.png b/apps/dm/public/img/wrExample/img_02_3.png new file mode 100644 index 000000000..f5ba9d81e Binary files /dev/null and b/apps/dm/public/img/wrExample/img_02_3.png differ diff --git a/apps/dm/public/img/wrExample/img_03_1.png b/apps/dm/public/img/wrExample/img_03_1.png new file mode 100644 index 000000000..a7534ae68 Binary files /dev/null and b/apps/dm/public/img/wrExample/img_03_1.png differ diff --git a/apps/dm/public/img/wrExample/img_03_2.png b/apps/dm/public/img/wrExample/img_03_2.png new file mode 100644 index 000000000..6b4faca7d Binary files /dev/null and b/apps/dm/public/img/wrExample/img_03_2.png differ diff --git a/apps/dm/public/img/wrExample/img_04_1.png b/apps/dm/public/img/wrExample/img_04_1.png new file mode 100644 index 000000000..a160072bd Binary files /dev/null and b/apps/dm/public/img/wrExample/img_04_1.png differ diff --git a/apps/dm/public/img/wrExample/img_04_2.png b/apps/dm/public/img/wrExample/img_04_2.png new file mode 100644 index 000000000..374fc55bf Binary files /dev/null and b/apps/dm/public/img/wrExample/img_04_2.png differ diff --git a/apps/dm/public/img/wrExample/img_05_1.png b/apps/dm/public/img/wrExample/img_05_1.png new file mode 100644 index 000000000..1418fa92d Binary files /dev/null and b/apps/dm/public/img/wrExample/img_05_1.png differ diff --git a/apps/dm/public/img/wrExample/img_05_2.png b/apps/dm/public/img/wrExample/img_05_2.png new file mode 100644 index 000000000..0c2f92396 Binary files /dev/null and b/apps/dm/public/img/wrExample/img_05_2.png differ diff --git a/apps/dm/public/img/wrExample/img_06_1.png b/apps/dm/public/img/wrExample/img_06_1.png new file mode 100644 index 000000000..08acf4971 Binary files /dev/null and b/apps/dm/public/img/wrExample/img_06_1.png differ diff --git a/apps/dm/public/img/wrExample/img_06_2.png b/apps/dm/public/img/wrExample/img_06_2.png new file mode 100644 index 000000000..19b150b7c Binary files /dev/null and b/apps/dm/public/img/wrExample/img_06_2.png differ diff --git a/apps/dm/public/img/wrExample/img_arrow_down_1.png b/apps/dm/public/img/wrExample/img_arrow_down_1.png new file mode 100644 index 000000000..9e8fb76c6 Binary files /dev/null and b/apps/dm/public/img/wrExample/img_arrow_down_1.png differ diff --git a/apps/dm/public/img/wrExample/img_arrow_down_2.png b/apps/dm/public/img/wrExample/img_arrow_down_2.png new file mode 100644 index 000000000..2002bb607 Binary files /dev/null and b/apps/dm/public/img/wrExample/img_arrow_down_2.png differ diff --git a/apps/dm/public/img/wrExample/img_ex_01_1.png b/apps/dm/public/img/wrExample/img_ex_01_1.png new file mode 100644 index 000000000..9d6bfb002 Binary files /dev/null and b/apps/dm/public/img/wrExample/img_ex_01_1.png differ diff --git a/apps/dm/public/img/wrExample/img_ex_02_1.png b/apps/dm/public/img/wrExample/img_ex_02_1.png new file mode 100644 index 000000000..70c1f8ed2 Binary files /dev/null and b/apps/dm/public/img/wrExample/img_ex_02_1.png differ diff --git a/apps/dm/public/img/wrExample/img_ex_03_1.png b/apps/dm/public/img/wrExample/img_ex_03_1.png new file mode 100644 index 000000000..c981fa9fb Binary files /dev/null and b/apps/dm/public/img/wrExample/img_ex_03_1.png differ diff --git a/apps/dm/public/img/wrExample/img_ex_04_1.png b/apps/dm/public/img/wrExample/img_ex_04_1.png new file mode 100644 index 000000000..f5547820e Binary files /dev/null and b/apps/dm/public/img/wrExample/img_ex_04_1.png differ diff --git a/apps/dm/public/img/wrExample/img_ex_04_2.png b/apps/dm/public/img/wrExample/img_ex_04_2.png new file mode 100644 index 000000000..b102942ee Binary files /dev/null and b/apps/dm/public/img/wrExample/img_ex_04_2.png differ diff --git a/apps/dm/public/img/wrExample/img_ex_04_3.png b/apps/dm/public/img/wrExample/img_ex_04_3.png new file mode 100644 index 000000000..50ca8045f Binary files /dev/null and b/apps/dm/public/img/wrExample/img_ex_04_3.png differ diff --git a/apps/dm/public/img/wrExample/img_ex_04_4.png b/apps/dm/public/img/wrExample/img_ex_04_4.png new file mode 100644 index 000000000..6e6d0c294 Binary files /dev/null and b/apps/dm/public/img/wrExample/img_ex_04_4.png differ diff --git a/apps/dm/public/img/wrOverview/img_ov_01_1.png b/apps/dm/public/img/wrOverview/img_ov_01_1.png new file mode 100644 index 000000000..e59a10192 Binary files /dev/null and b/apps/dm/public/img/wrOverview/img_ov_01_1.png differ diff --git a/apps/dm/public/img/wrStatus/icon_favorit_off.png b/apps/dm/public/img/wrStatus/icon_favorit_off.png new file mode 100644 index 000000000..4de0b3ebc Binary files /dev/null and b/apps/dm/public/img/wrStatus/icon_favorit_off.png differ diff --git a/apps/dm/public/img/wrStatus/icon_favorit_on.png b/apps/dm/public/img/wrStatus/icon_favorit_on.png new file mode 100644 index 000000000..f2edfa4e9 Binary files /dev/null and b/apps/dm/public/img/wrStatus/icon_favorit_on.png differ diff --git a/apps/dm/public/img/wrStatus/icon_right.png b/apps/dm/public/img/wrStatus/icon_right.png new file mode 100644 index 000000000..fef56226c Binary files /dev/null and b/apps/dm/public/img/wrStatus/icon_right.png differ diff --git a/apps/dm/public/img/wrStatus/southKoreaMap.svg b/apps/dm/public/img/wrStatus/southKoreaMap.svg new file mode 100644 index 000000000..7b3c170e3 --- /dev/null +++ b/apps/dm/public/img/wrStatus/southKoreaMap.svg @@ -0,0 +1,19 @@ +<svg width="506" height="785" viewBox="0 0 506 785" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path id="전라북도" d="M273.567 425.516L274.188 429.893L276.776 436.366L272.497 444.123L262.388 453.507L253.164 454.538L241.456 466.408L234.164 484.969L234.199 489.884L228.425 500.23L234.578 510.92L233.336 516.076L236.637 519.971L228.736 529.825L229.207 534.786L222.445 540.171L212.531 530.741L203.135 532.139L199.017 538.372L191.864 536.768L186.861 538.819L178.752 536.126L178.43 533.686L170.644 532.093L159.695 536.699L152.358 532.517L155.785 526.261L152.174 521.77L153.301 515.491L150.678 509.923L146.09 512.799L143.398 518.848L135.29 516.167L133.266 509.43L123.122 503.816L114.117 508.754L114.416 513.612L109.16 518.184L110.057 521.77L99.1308 527.9L94.1739 524.096L89.24 525.711L90.4706 530.077L82.9604 529.126L82.5924 520.2L79.1881 518.573L78.9811 511.447L73.0925 508.709L79.9126 497.056L93.1848 491.912L98.1302 491.935L102.064 487.913L106.906 492.153L107.423 488.944L103.754 484.98L84.6165 484.969L78.9811 480.489L80.7752 474.141L98.1762 464.196L104.306 451.112L124.123 456.68L124.364 451.33L120.201 449.978L113.634 443.859L122.673 440.548L127.63 441.453L130.552 436.286L130.149 434.155L121.098 437.409L112.541 435.621L109.608 438.749L102.627 436.057L103.168 425.779L97.0031 422.823L98.6938 419.707L117.038 419.237L140.604 407.436L141.846 399.336L147.608 396.54L155.164 396.987L161.248 399.45L167.044 409.808L173.347 412.283L175.969 408.822L181.513 407.757L188.08 409.132L193.911 406.187L199.305 404.835L211.634 423.27L214.555 422.606L217.936 428.438L226.436 427.853L227.85 421.93L235.429 423.018L236.499 426.776L240.11 422.606L239.455 417.221L243.837 416.854L245.033 420.097L246.447 420.452L247.678 417.897L250.461 417.771L253.969 423.362L256.798 423.408L260.49 425.837L270.254 423.305L273.567 425.516Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path id="서울특별시" d="M200.823 161.685L192.036 164.378L194.072 156.747L192.485 153.378L193.393 150.686L190.909 149.792L191.588 144.407L187.309 142.391L180.777 141.039L177.177 150.021L175.153 150.239L172.22 146.195L167.24 149.403L165.687 156.747L152.829 155.315L150.828 157.641L147.895 163.473L153.531 165.054L154.209 170.427L152.852 171.55L153.531 174.919L158.706 174.243L162.985 182.32L167.263 181.873L171.093 183.225L181.007 179.41L181.455 182.549L182.352 184.566L189.333 181.209H191.818L194.072 179.628L196.993 178.287L195.187 173.349L200.823 167.07V161.685Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path id="인천광역시" d="M126.722 162.453L125.376 165.054L126.285 167.517L129.068 166.875L130.782 169.98L126.423 172.1L128.079 180.303L131.702 186.914L140.259 190.214L146.768 178.951L143.398 173.578L143.168 168.411H145.422L147.895 163.472L150.828 157.641L146.55 157.423L134.381 146.871L130.103 148.899V150.468L123.582 153.608L126.722 162.453Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path id="경기도" d="M286.172 172.455L282.618 168.537L274.475 166.394L258.259 155.177H251.036L253.521 145.977L246.769 140.363L252.393 134.313L252.163 123.715L263.653 116.359L262.756 104.466L256.235 100.88L254.613 97.1337L244.285 90.3394L245.194 80.463L243.837 75.5249L228.299 78.2174L224.469 65.8777L210.725 60.275L199.029 45.0137L185.504 55.3368L181.904 64.984L169.517 74.4021L165.687 81.3567L155.336 89.6634L146.55 93.9256L142.72 111.421L133.933 122.42L120.201 123.543L118.165 152.255L123.582 153.607L130.103 150.468V148.898L134.381 146.87L146.55 157.423L150.828 157.64L152.829 155.315L165.687 156.747L167.24 149.403L172.22 146.194L175.153 150.239L177.177 150.021L180.777 141.039L187.309 142.391L191.588 144.407L190.909 149.792L193.393 150.686L192.485 153.378L194.072 156.747L192.036 164.377L200.823 161.685V167.07L195.187 173.349L196.993 178.287L194.072 179.627L191.818 181.208H189.333L182.352 184.566L181.455 182.549L181.007 179.41L171.093 183.225L167.263 181.873L162.985 182.32L158.706 174.242L153.531 174.918L152.852 171.55L154.209 170.427L153.531 165.053L147.895 163.472L145.422 168.41H143.168L143.398 173.578L146.768 178.951L140.258 190.214L135.405 195.748L153.082 208.569L146.09 211.937L138.211 210.815L129.206 212.167L130.552 216.876L127.182 223.83L130.782 226.305L129.885 230.785L138.441 228.539L142.49 224.953L147.447 228.986L141.593 231.232L142.49 242.678L145.422 249.403L144.065 254.124L149.252 260.62L154.209 273.418L163.859 268.698L177.844 266.91L186.642 262.648L195.866 266.234L206.228 275.435L209.161 270.496L216.993 268.847L235.061 253.677L244.745 255.464L256.177 245.198L259.375 238.416L263.078 241.417L265.873 236.25L271.543 231.908L272.21 222.261L275.142 219.121L275.372 204.765L281.595 187.659L281.226 179.857L284.378 177.164L286.172 172.455Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-miterlimit="10"/> +<path id="강원특별자치도" d="M210.047 41.6452L215.912 42.3212L220.858 38.2882L231.669 45.2429L235.05 40.7515L253.291 44.3377L274.234 40.0755L292.256 42.3212L300.583 47.7062L308.472 45.4606L320.629 47.0302L337.064 46.5834L349.462 40.3047L358.916 29.7638L363.873 7.99466L369.612 1.81909L372.545 7.88009L377.502 18.4324L378.399 28.9733L386.622 42.7681L396.754 72.1679L401.481 87.6469L412.971 107.617L425.357 133.419L450.579 165.054L449.452 169.98L458.009 180.533L456.882 187.029L483.23 235.952L486.83 254.101L472.419 262.648L463 270.726L451.258 261.972L442.022 264.665L429.406 259.956L421.079 267.586L409.141 259.727L404.863 267.357L392.027 262.946L386.622 260.254L380.538 259.807L370.635 251.649H359.813L353.062 244.775L341.572 244.694L348.105 233.707L323.102 230.785L312.072 236.399L307.564 226.076L296.534 225.893L292.923 238.267L279.639 239.092L274.464 240.432L271.543 231.908L272.21 222.261L275.143 219.121L275.373 204.765L281.595 187.659L281.227 179.857L284.378 177.164L286.172 172.455L282.618 168.537L274.475 166.394L258.248 155.177H251.036L253.521 145.977L246.758 140.363L252.394 134.313L252.164 123.715L263.653 116.359L262.756 104.466L256.235 100.88L254.613 97.1337L244.285 90.3394L245.194 80.4631L243.837 75.5249L228.299 78.2174L224.458 65.8777L210.725 60.275L199.029 45.0137L210.047 41.6452Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path id="경상북도" d="M481.264 504.297L493.903 466.82L494.57 458.742L501.551 447.972L504.346 437.535L500.206 434.052L496.594 439.219L484.012 447.205L476.813 439.322L483.759 430.019L480.378 392.77L488.268 377.074L489.843 341.395L497.721 321.196L492.995 303.482V271.619L486.83 254.101L472.419 262.648L463 270.726L451.257 261.972L442.022 264.665L429.405 259.956L421.079 267.586L409.141 259.726L404.862 267.357L392.027 262.946L382.194 265.111L374.902 272.742L364.77 277.99L358.479 289.206L361.17 295.588L350.163 302.841L333.464 290.467L327 298.556L319.295 295.623L314.763 298.544L308.725 298.922L304.424 307.378L308.898 313.599L304.286 315.616L299.685 311.422L282.871 316.945L289.243 323.155L288.012 328.471L281.893 323.522L270.254 330.304L279.053 336.205L283.446 343.733L279.421 348.671L277.845 365.605L279.869 370.176L273.567 377.612L273.498 381.783L278.075 384.762L280.41 380.912L287.598 388.382L297.995 386.87L299.801 398.155L290.519 397.491L290.002 406.92L282.791 421.804L273.636 425.527L274.188 429.893L276.775 436.366L272.497 444.123L279.041 453.357L291.209 459.602L300.479 459.682L303.492 466.809L311.612 474.829L312.693 483.995L306.586 488.841L312.82 492.84L330.393 492.164L339.56 499.164L335.5 483.903L343.067 485.702L344.689 483.181L339.111 476.272L343.389 468.424L350.14 467.53L352.004 464.471L340.077 458.96L347.886 446.437L354.097 443.894L352.165 452.269L355.546 454.286L358.479 452.04L362.079 440.823L369.957 439.7L375.592 437.237L382.803 436.332L388.301 439.104L389.474 443.951L389.784 450.883L391.13 454.068L388.784 462.535L384.598 463.257L383.24 466.408L382.93 470.681L379.871 474.027L380.101 477.178L378.513 484.35L369.06 485.702V482.104L361.618 482.631L355.316 490.697L358.099 499.313L387.3 511.252L404.264 502.006L418.675 505.81L422.033 502.716L430.372 501.376L435.674 491.568L446.358 490.617L456.939 494.421L455.593 500.929L462.126 502.728L466.853 500.482L473.592 500.253L481.264 504.297Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path id="충청북도" d="M274.464 240.432L279.639 239.092L292.923 238.267L296.534 225.893L307.564 226.042L312.072 236.399L323.102 230.785L348.105 233.707L341.572 244.694L353.062 244.774L359.813 251.649H370.635L380.538 259.807L386.622 260.253L392.027 262.946L382.194 265.203L374.902 272.742L364.77 277.99L358.479 289.206L361.17 295.588L350.164 302.841L333.464 290.467L327 298.556L319.295 295.623L314.763 298.544L308.725 298.922L304.424 307.378L308.898 313.599L304.286 315.616L299.686 311.423L282.871 316.945L289.243 323.155L288.012 328.471L281.893 323.522L270.254 330.304L279.053 336.205L283.446 343.733L279.421 348.671L277.845 365.605L279.869 370.176L273.567 377.612L273.498 381.783L278.075 384.762L280.41 380.912L287.598 388.382L297.995 386.87L299.801 398.155L290.462 397.594L290.002 406.92L282.791 421.804L273.567 425.608L270.254 423.305L260.49 425.837L256.798 423.408L253.969 423.362L250.461 417.771L247.678 417.897L246.447 420.452L245.033 420.096L243.837 416.854L240.122 412.225L238.144 402.67L240.053 401.467L237.994 394.191L233.014 385.896L226.505 385.415L224.584 382.172L231.554 362.42L234.946 359.75L234.268 357.046L228.954 356.084V350.527L225.93 346.047L221.18 349.988L217.821 349.037L216.016 343.32L212.013 342.713V335.586L209.863 332.607L210.058 330.866L207.091 327.818L203.71 320.852L201.007 318.618L204.561 309.234L213.819 300.779L219.581 301.626L222.042 298.315L210.323 278.517L206.228 275.435L209.161 270.496L216.993 268.847L235.061 253.677L244.745 255.464L256.177 245.198L259.375 238.416L263.078 241.417L265.873 236.25L271.543 231.908L274.464 240.432Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path id="충청남도" d="M226.505 385.415L219.397 392.942L215.567 391.04L214.762 388.038L212.197 386.434V380.603L210.392 380.144L209.092 385.713L204.308 392.266L198.81 386.331L198.672 379.927L195.164 377.521L195.682 371.322L198.672 367.587L197.994 365.502L200.052 356.118L194.244 346.207L197.407 341.727L194.681 339.997L192.899 329.835L185.239 318.835L187.493 311.434L185.239 304.479L188.206 302.841L195.153 306.496L204.561 309.234L213.819 300.778L219.581 301.626L222.042 298.315L210.323 278.517L206.228 275.435L195.866 266.234L186.642 262.648L177.844 266.91L163.859 268.698L154.209 273.418L145.917 273.132L137.13 255.418L131.955 258.317L129.609 252.898L118.66 250.251L107.4 241.498L103.685 241.624L100.465 246.103L101.443 252.004L103.478 257.126L102.374 257.882L98.1419 250.664L91.6668 247.604L85.6403 247.364L80.6259 250.48L86.2844 253.746L82.857 255.877L87.9865 260.047L90.3672 260.849L90.7928 263.748L84.5707 269.568L76.198 280.281L72.3681 278.425L78.5787 265.501L77.0375 263.702L78.1301 256.163L76.1405 253.299L71.5861 267.128L68.6878 268.812L65.0765 263.324L60.8211 265.936L61.2696 273.968L59.8435 275.606L56.6922 274.827L52.6554 277.898L47.7214 291.097L48.1585 292.506L51.8618 292.323L52.0228 286.147L57.3593 288.565L60.108 293.606L52.9659 295.863L52.8969 298.762L58.6474 299.931L62.8338 298.498L64.858 295.313L68.7108 294.992L67.3997 300.767L71.3675 304.342L69.0558 313.29L73.1732 319.145L74.1853 344.958L85.3643 346.952L79.0272 321.413L81.2354 317.483L75.2089 312.843L76.888 311.044L77.7966 304.433L79.7173 302.99L81.799 311.56L86.0313 314.653L88.9871 312.797L91.9544 306.965L93.668 308.421L91.8739 316.681L95.7037 343.606L92.9664 349.782L100.879 357.287V359.292L94.2776 362.053L97.0493 382.86L89.7692 391.052L90.9883 393.618L94.105 391.04L101.949 393.756L107.964 401.1L106.779 403.77L111.702 416.281L117.038 419.237L140.604 407.436L141.846 399.336L147.608 396.54L155.164 396.987L161.248 399.45L167.102 409.773L173.405 412.237L175.969 408.822L181.513 407.757L188.08 409.132L193.911 406.187L199.305 404.835L211.634 423.27L214.555 422.606L217.937 428.437L226.436 427.853L227.85 421.93L235.43 423.018L236.499 426.776L240.11 422.606L239.455 417.221L243.837 416.854L240.122 412.225L238.144 402.67L240.053 401.467L237.994 394.191L233.014 385.896L226.505 385.415Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path id="세종특별자치시" d="M204.561 309.234L201.007 318.618L203.71 320.852L207.091 327.818L210.058 330.866L209.863 332.607L212.013 335.586V342.713L210.84 349.633L209.253 350.928L207.919 354.8L200.052 356.118L194.244 346.207L197.407 341.727L194.681 339.997L192.899 329.835L185.239 318.835L187.493 311.434L185.239 304.479L188.206 302.841L195.153 306.496L204.561 309.234Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path id="대전광역시" d="M200.052 356.118L207.919 354.8L209.253 350.928L210.84 349.633L212.013 342.713L216.016 343.32L217.821 349.037L221.18 349.988L225.93 346.047L228.954 350.527V356.084L234.268 357.046L234.946 359.75L231.554 362.42L224.584 382.172L226.505 385.415L219.397 392.942L215.567 391.04L214.762 388.039L212.197 386.435V380.603L210.392 380.144L209.092 385.713L204.308 392.266L198.81 386.331L198.672 379.927L195.164 377.521L195.682 371.322L198.672 367.587L197.994 365.502L200.052 356.118Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path id="대구광역시" d="M361.619 482.631L369.06 482.104V485.702L378.514 484.35L380.101 477.178L379.871 474.027L382.93 470.681L383.24 466.408L384.598 463.257L388.784 462.535L391.13 454.068L389.785 450.883L389.474 443.951L388.301 439.105L382.803 436.332L375.592 437.237L369.957 439.7L362.079 440.823L358.479 452.04L355.546 454.286L352.165 452.269L354.097 443.894L347.886 446.437L340.077 458.96L352.004 464.471L350.141 467.53L343.389 468.424L339.111 476.273L344.689 483.181L343.067 485.702L335.5 483.903L339.56 499.164L350.819 496.472L355.316 490.697L361.619 482.631Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path id="울산광역시" d="M459.136 556.349L456.663 554.332L454.19 547.377L446.496 545.327L444.161 538.326L439.204 536.699L432.361 528.06L420.515 521.724L416.858 516.465L422.769 511.183L422.033 502.716L430.372 501.376L435.674 491.568L446.358 490.617L456.939 494.421L455.593 500.929L462.126 502.728L466.853 500.482L473.592 500.253L481.264 504.297L481.206 506.761L483.012 511.252L481.666 515.743L481.885 522.469L478.963 528.977L474.455 532.116L473.109 526.731L471.683 524.13L471.752 531.669L465.898 535.702L467.704 538.624L467.474 544.685L465.001 548.718L466.347 550.517L462.597 552.797L459.136 556.349Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path id="부산광역시" d="M446.496 545.327L454.19 547.378L456.663 554.332L459.136 556.349L453.857 558.216L449.233 567.336L449.452 570.258L438.871 583.503L432.338 581.922L429.187 585.737L430.993 588.876L430.935 591.569L426.484 591.351L423.103 587.983L415.673 597.412L412.522 595.384L411.395 600.322L408.244 601.216L406.887 596.954L408.692 585.29L402.93 591.5L399.434 589.151L395.409 592.245L391.004 591.122L391.13 586.722L386.909 580.959L403.908 570.682L411.959 570.854L416.203 568.253L418.077 564.197L433.132 556.039L435.754 549.554L443.046 549.99L446.496 545.327Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path id="경상남도" d="M272.497 444.123L262.388 453.506L253.164 454.538L241.456 466.408L234.164 484.969L234.199 489.884L228.425 500.23L234.578 510.92L233.336 516.076L236.637 519.971L228.736 529.825L229.207 534.786L222.445 540.171L225.907 549.085L227.712 563.888L233.589 569.742L239.639 582.506L245.251 586.676L246.769 593.001L242.652 598.684L255.2 603.026L258.892 602.797L264.838 597.286L265.321 595.075L267.793 596.198L268.242 598.89L272.095 597.676L274.326 598.89L277.132 597.263L274.498 590.824L276.799 589.919L278.846 590.492L280.145 586.39L285.091 584.946L282.434 589.243L282.216 599.784L280.881 606.509L289.795 611.218L291.968 615.297L293.245 615.939L297.098 614.243L299.778 615.492L301.319 615.263L303.849 609.076L309.692 609.557L312.613 614.369L316.742 612.376L320.042 607.185L322.297 613.693L317.041 616.088L318.248 619.525L323.067 621.003L324.999 619.525L327.024 621.278L326.794 628.725L321.492 627.373L320.042 628.954L324.585 632.793L327.208 639.369L329.738 640.538L332.061 638.636L333.165 632.735L331.854 628.806L334.787 627.488L338.628 620.155L336.259 617.222L333.947 621.324L331.808 620.419L334.545 606.532L334.235 603.828L341.216 602.476L344.252 598.936L338.962 593.952L330.635 595.522L328.887 598.214L325.448 598.661L328.312 593.345L340.296 589.403L339.18 585.794L351.578 584.981L354.12 586.699L355.857 594.181L361.998 591.706L355.857 572.194L359.422 567.565L361.032 568.379L359.917 574.841L362.159 579.813L366.645 580.478L369.807 584.076L371.21 580.26L373.189 581.841L372.2 587.318L377.697 589.69L385.196 588.384L386.035 590.583L391.004 591.122L391.13 586.722L386.909 580.959L403.908 570.682L411.924 570.842L416.202 568.253L418.077 564.197L433.097 556.039L435.754 549.554L443.011 549.978L446.496 545.327L444.161 538.326L439.204 536.699L432.361 528.06L420.515 521.724L416.858 516.465L422.77 511.183L422.033 502.716L418.675 505.81L404.264 502.006L387.3 511.252L358.099 499.313L355.316 490.697L350.647 496.598L339.56 499.164L330.393 492.164L312.843 492.771L306.586 488.841L312.693 483.995L311.612 474.829L303.492 466.809L300.479 459.682L291.209 459.602L279.041 453.358L272.497 444.123Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path id="전라남도" d="M238.224 616.271L235.165 615.859L225.619 619.64L224.043 615.824L217.81 608.721L222.019 601.239L224.055 605.272L229.127 606.991L239.593 598.1L242.675 598.695L246.781 593.012L245.263 586.677L239.65 582.517L233.601 569.754L227.724 563.899L225.918 549.096L222.456 540.182L212.554 530.764L203.146 532.162L199.04 538.395L191.875 536.791L186.872 538.842L178.764 536.149L178.442 533.709L170.656 532.105L159.707 536.711L152.369 532.529L155.796 526.273L152.197 521.781L153.324 515.503L150.69 509.934L146.113 512.81L143.41 518.871L135.302 516.179L133.277 509.442L123.145 503.828L114.14 508.766L114.439 513.796L109.183 518.195L110.08 521.781L99.1539 527.911L94.197 524.096L89.2515 525.723L90.4821 530.077L82.972 529.126L82.6039 520.2L79.2111 518.573L79.0041 511.447L73.1156 508.709L68.4347 513.509L69.5618 516.649L72.1725 518.39L71.0914 519.353L66.445 518.172L61.0855 529.068L56.7611 531.222L51.9997 541.992L60.89 543.608L58.0838 548.271L64.7314 560.279L69.3433 562.18V565.767L64.1678 571.828L62.6152 565.526L54.4839 564.655L53.4143 566.03L55.8296 569.364L59.7744 571.679L58.7508 574.073L54.2539 575.643L53.3453 578.782L47.8364 580.822L46.8243 586.631L52.4483 590.446L54.9325 588.212L57.6352 581.246L58.7623 588.647L59.6594 600.987L54.2539 608.618L54.2884 613.155L52.4368 618.047L64.6048 623.879L76.4279 634.408L73.1616 634.878L70.4589 632.862L69.5618 636.906L63.2592 627.488L54.0239 623.455L52.4483 629.516L55.151 634.901L58.7623 636.241L61.4651 642.967L57.1867 642.52L50.8726 634.443L47.7213 621.656L43.5465 615.95L37.1289 627.488L40.2572 641.019L44.5586 647.012L46.8128 646.336L50.5736 648.879L51.7697 652.649L54.4724 652.397L57.1752 650.151L63.2592 658.457L61.9251 669.537L66.859 671.015L63.9263 677.74L60.9015 680.8L61.6836 682.908L66.6405 683.584L66.7785 691.535L76.7729 690.321L80.8328 684.042L80.6028 680.674L95.0135 672.825L93.6564 667.44L99.959 665.87L103.375 660.039L102.869 645.877L105.376 643.654L107.182 647.47L106.963 656.441L104.939 665.859L108.09 671.244L116.877 675.277L118.901 671.691L125.204 673.49L127.458 668.998L130.609 669.674L129.885 660.382L133.542 658.904L134.255 656.235L133.082 654.081L136.245 645.442L142.996 643.643L148.183 638.934L155.382 635.348L159.96 636.837L163.939 635.577L167.09 629.069L172.266 627.946L174.29 630.41H181.501L182.18 636.688L180.156 641.844L175.67 642.44L174.52 636.688L169.575 636.917L167.55 644.101L169.103 648.02L165.975 653.978L162.145 653.302L163.272 648.363L161.627 646.714L156.509 663.843L169.115 666.088L171.599 672.596L175.199 677.305L183.307 675.506L186.688 669.228L192.324 665.641L193.221 661.597L188.494 658.973L189.172 655.994L196.832 656.67L199.753 658.469L202.824 655.88L201.329 647.023L188.379 634.397L188.724 630.203L191.875 627.064L189.621 624.372L194.348 619.88L190.944 617.509L192.542 616.294H200.65L206.056 614.278L206.504 610.015L209.207 612.032L210.104 621.003L214.348 624.177L216.407 630.203L212.807 636.711L210.817 644.8L213.025 649.28L216.694 649.223L221.352 651.961L222.249 647.47L221.122 643.654L223.595 635.806L227.425 632.438L232.336 636.998L238.684 634.019L239.363 629.081L242.066 625.265L243.871 619.204L241.629 615.836L238.247 616.283L238.224 616.271ZM145.871 561.275L143.617 563.968L142.938 567.554C141.604 568.883 135.727 571.816 135.727 571.816H131.449L128.516 569.8C126.779 570.59 121.305 571.816 121.305 571.816L118.372 573.833L110.494 572.939L110.275 569.8L111.563 568.562L107.124 564.415L95.1861 563.074L97.0492 558.995L96.9917 554.767L100.373 553.198L98.5674 548.707C99.8555 548.328 105.997 546.908 105.997 546.908V544.215L110.505 541.523H113.887V545.109L116.589 546.461L117.602 545.349L134.163 542.646L138.671 548.707V552.293L142.559 555.146L145.883 558.571V561.264L145.871 561.275Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-miterlimit="10"/> +<path id="광주광역시" d="M98.5788 548.707C99.8669 548.329 106.008 546.908 106.008 546.908V544.215L110.517 541.523H113.898V545.109L116.601 546.461L117.613 545.35L134.174 542.646L138.683 548.707V552.293L142.57 555.146L145.894 558.572V561.264L143.64 563.957L142.961 567.543C141.627 568.872 135.762 571.805 135.762 571.805H131.483L128.55 569.789C126.814 570.579 121.339 571.805 121.339 571.805L118.407 573.822L110.528 572.928L110.31 569.789L111.598 568.551L107.159 564.403L95.2205 563.063L97.0836 558.984L97.0261 554.756L100.407 553.187L98.6018 548.695L98.5788 548.707Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path id="제주특별자치도" d="M50.8266 732.613L44.9726 734.641H36.1858L33.2646 738.009L20.1994 742.718L14.794 748.321L1.49878 759.091L3.75298 772.107L17.0482 783.095L21.5451 778.615L45.1911 778.844L50.8266 781.983L64.1103 779.062L69.2973 776.151L84.3866 775.693L91.8163 772.336L95.1976 771.878L99.9245 763.353L109.16 754.165L108.481 740.026L96.0947 730.379L83.248 729.027L77.854 730.597L65.2374 730.826L50.8266 732.613Z" fill="white" stroke="#E2EDF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +</svg> diff --git a/apps/dm/public/next.svg b/apps/dm/public/next.svg new file mode 100644 index 000000000..5174b28c5 --- /dev/null +++ b/apps/dm/public/next.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg> \ No newline at end of file diff --git a/apps/dm/public/vercel.svg b/apps/dm/public/vercel.svg new file mode 100644 index 000000000..770539603 --- /dev/null +++ b/apps/dm/public/vercel.svg @@ -0,0 +1 @@ +<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg> \ No newline at end of file diff --git a/apps/dm/public/window.svg b/apps/dm/public/window.svg new file mode 100644 index 000000000..b2b2a44f6 --- /dev/null +++ b/apps/dm/public/window.svg @@ -0,0 +1 @@ +<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg> \ No newline at end of file diff --git a/apps/dm/src/entities/auth/api/login-service.ts b/apps/dm/src/entities/auth/api/login-service.ts new file mode 100644 index 000000000..614aadbf9 --- /dev/null +++ b/apps/dm/src/entities/auth/api/login-service.ts @@ -0,0 +1,79 @@ +import type { LoginService, ILogin } from "../model/login-interface"; +import { tokenManager } from "../lib/token-manager"; +import {PROXY_HOST, ACCESS_TOKEN, AUTH_USER_ID,SITE_ID, CLAIM_NAME, ENDPOINT, JWT_EXPIRATION_TIME } from "../../../shared/config"; + +export class LoginApiService implements LoginService { + private static instance: LoginApiService; + + private constructor() {} + + public static getInstance(): LoginApiService { + if (!LoginApiService.instance) { + LoginApiService.instance = new LoginApiService(); + } + return LoginApiService.instance; + } + + public async login(payload: ILogin): Promise<void> { + try { + console.log(' ENDPOINT.USER_SERVICE.LOGIN ', ENDPOINT.USER_SERVICE.LOGIN) + const response = await fetch( PROXY_HOST+ ENDPOINT.USER_SERVICE.LOGIN, { + method: "POST", + body: JSON.stringify({ + userId: payload.userId, + password: payload.password, + }), + }); + // const data = response.headers.get(ACCESS_TOKEN); + const accessToken = response.headers.get(ACCESS_TOKEN); + const tokenId = response.headers.get(AUTH_USER_ID); + + console.log('accessToken ', accessToken) + console.log('tokenId ', tokenId) + + if (!accessToken || !tokenId) { + throw new Error("Missing required authentication tokens"); + } + + tokenManager.setToken(CLAIM_NAME, accessToken); + tokenManager.setToken(AUTH_USER_ID, tokenId); + tokenManager.setToken("site-id-key", SITE_ID); + tokenManager.setupRefreshTimer( + () => this.silentRefresh(), + JWT_EXPIRATION_TIME, + ); + } catch (error) { + + console.log(' login err ' , error) + throw new Error(`Login failed: ${error}`); + } + } + + + public async silentRefresh(): Promise<void> { + console.log(' silentRefresh ') + + try { + const response = await fetch(PROXY_HOST+ + `${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`, + { method: "PUT" }, + ); + + const data = await response.json(); + const accessToken = data[ACCESS_TOKEN]; + const tokenId = data[AUTH_USER_ID]; + + if (!accessToken || !tokenId) { + throw new Error("Missing required authentication tokens"); + } + + tokenManager.setToken(CLAIM_NAME, accessToken); + tokenManager.setToken(AUTH_USER_ID, tokenId); + } catch (error) { + tokenManager.clearAuthToken(); + throw new Error(`Silent refresh failed: ${error}`); + } + } +} + +export const LoginApi = LoginApiService.getInstance(); diff --git a/apps/dm/src/entities/auth/index.ts b/apps/dm/src/entities/auth/index.ts new file mode 100644 index 000000000..9dc9dd368 --- /dev/null +++ b/apps/dm/src/entities/auth/index.ts @@ -0,0 +1,2 @@ +export { LoginApi } from "./api/login-service"; +//export { AuthWrapper } from "./lib/auth-wrapper"; diff --git a/apps/dm/src/entities/auth/lib/auth-wrapper.tsx b/apps/dm/src/entities/auth/lib/auth-wrapper.tsx new file mode 100644 index 000000000..678ff50d5 --- /dev/null +++ b/apps/dm/src/entities/auth/lib/auth-wrapper.tsx @@ -0,0 +1,45 @@ +// "use client"; + +// import { useEffect } from "react"; +// import { useRouter } from "next/navigation"; +// import { LoginApi } from "../api/login-service"; + +// const AuthWrapper = ({ children }: { children: React.ReactNode }) => { +// const router = useRouter(); +// const { userInfo, setUserInfo } = useUserStore((state) => state); + +// async function authCheck() { +// const userId = getCookie(AUTH_USER_ID); +// if (!userId) { +// throw new Error("Missing required authentication tokens"); +// } + +// const response = await client.get<IUserInfo>( +// `${ENDPOINT.USER_SERVICE.USERS}/info/me`, +// ); +// if (!userInfo) setUserInfo(response.data); +// } + +// useEffect(() => { +// (async () => { +// try { +// await authCheck(); +// } catch (error) { +// console.error(error); + +// try { +// await LoginApi.silentRefresh(); +// await authCheck(); +// } catch (refreshError) { +// console.error("Token refresh failed:", refreshError); +// setUserInfo(null); +// router.push("/auth/login"); +// } +// } +// })(); +// }, []); + +// return <>{children}</>; +// }; + +// export { AuthWrapper }; diff --git a/apps/dm/src/entities/auth/lib/token-manager.ts b/apps/dm/src/entities/auth/lib/token-manager.ts new file mode 100644 index 000000000..40d32f33e --- /dev/null +++ b/apps/dm/src/entities/auth/lib/token-manager.ts @@ -0,0 +1,59 @@ +import { AUTH_USER_ID, CLAIM_NAME } from "@/src/shared/config"; +import { getCookie, removeCookie, setCookie } from "@/src/shared/lib/cookie"; + +export class TokenManager { + private static instance: TokenManager; + private refreshTimer: NodeJS.Timeout | null = null; + + private constructor() {} + + public static getInstance(): TokenManager { + if (!TokenManager.instance) { + TokenManager.instance = new TokenManager(); + } + return TokenManager.instance; + } + + public getToken(key: string): string | undefined { + return getCookie(key); + } + + public setToken(key: string, value: string): void { + setCookie(key, value, { + secure: window.location.protocol === "https:", + sameSite: "lax", + }); + } + + public removeToken(key: string): void { + removeCookie(key); + } + + public setupRefreshTimer( + callback: () => Promise<void>, + expirationTime: number, + ): void { + if (this.refreshTimer) { + clearTimeout(this.refreshTimer); + } + + this.refreshTimer = setTimeout(() => { + callback().catch((error) => { + console.error("Silent refresh failed:", error); + this.clearAuthToken(); + }); + }, expirationTime - 60000); + } + + public clearAuthToken(): void { + if (this.refreshTimer) { + clearTimeout(this.refreshTimer); + this.refreshTimer = null; + } + + this.removeToken(CLAIM_NAME); + this.removeToken(AUTH_USER_ID); + } +} + +export const tokenManager = TokenManager.getInstance(); diff --git a/apps/dm/src/entities/auth/model/login-interface.ts b/apps/dm/src/entities/auth/model/login-interface.ts new file mode 100644 index 000000000..5aaf53044 --- /dev/null +++ b/apps/dm/src/entities/auth/model/login-interface.ts @@ -0,0 +1,9 @@ +export interface ILogin { + userId: string; + password: string; +} + +export interface LoginService { + login(payload: ILogin): Promise<void>; + silentRefresh(): Promise<void>; +} diff --git a/apps/dm/src/shared/config/api.ts b/apps/dm/src/shared/config/api.ts new file mode 100644 index 000000000..3eba9fa91 --- /dev/null +++ b/apps/dm/src/shared/config/api.ts @@ -0,0 +1,56 @@ +import { PROXY_HOST } from "./env"; + +export const BASE_URL = `${PROXY_HOST}/server`; + +export const ENDPOINT = { + ATTACH_SERVICE: { + TUS_UPLOAD: "/attach-service/api/v1/tus/upload", + EDITOR_UPLOAD: "/attach-service/api/v1/upload/editor", + IMAGES: "/attach-service/api/v1/images", + MOVIE_THUMBNAIL: "/attach-service/api/v1/movie/thumbnail", + ATTACHMENTS: "/attach-service/api/v1/atfl/attachments", + DOWNLOAD: "/attach-service/api/v1/atflcd/download", + STREAM_VIDEO: "/attach-service/api/v1/stream/video", + }, + USER_SERVICE: { + LOGIN: "/user-service/login", + USERS: "/user-service/api/v1/users", + SILENT_REFRESH: "/user-service/api/v1/users/token/refresh", + AUTHORIZATIONS: "/user-service/api/v1/authorizations", + ROLE_AUTHORIZATIONS: "/user-service/api/v1/role-authorizations", + ROLES: "/user-service/api/v1/roles", + }, + CMS_SERVICE: { + SITES: "/cms-service/api/v1/sites", + IPS: "/cms-service/api/v1/site-ips", + DOMAINS: "/cms-service/api/v1/site-dmns", + POSTINGS: "/cms-service/api/v1/site-pstgs", + CODE: "/cms-service/api/v1/code/cache", + MENUS: "/cms-service/api/v1/menus", + MENU_ROLES: "/cms-service/api/v1/menu-roles", + MENU_AUTHRTS: "/cms-service/api/v1/menu-authrts", + CONTENTS: "/cms-service/api/v1/contents", + CONTENTS_DETAILS: "/cms-service/api/v1/contents-details", + ORGANIZATIONS: "/cms-service/api/v1/ognzs", + USER_ORGANIZATION: "/cms-service/api/v1/user-ognz", + IMAGES: "/cms-service/api/v1/images", + BANNERS: "/cms-service/api/v1/bnrs", + TEMPLATE: "/cms-service/api/v1/tmplt", + TERMS: "/cms-service/api/v1/trms", + LWPO_CODE: "/cms-service/api/v1/lwpo-cds", + UP_CODE: "/cms-service/api/v1/up-codes", + POPUPS: "/cms-service/api/v1/popups", + SCHEDULES: "/cms-service/api/v1/schdls", + SURVEY: "/cms-service/api/v1/srvy", + SURVEY_QUESTION: "/cms-service/api/v1/srvy-qitem", + SURVEY_ARTICLE: "/cms-service/api/v1/srvy-artcl", + }, + BOARD_SERVICE: { + BBS: "/board-service/api/v1/bbs", + BBS_TEMPLATES: "/board-service/api/v1/bbsTmplt", + POSTS: "/board-service/api/v1/posts", + POSTS_COMMENTS: "/board-service/api/v1/posts-cmnts", + }, +}; + +export const JWT_EXPIRATION_TIME = 1800000; diff --git a/apps/dm/src/shared/config/env.ts b/apps/dm/src/shared/config/env.ts new file mode 100644 index 000000000..b01588df0 --- /dev/null +++ b/apps/dm/src/shared/config/env.ts @@ -0,0 +1,13 @@ +export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "DM"; +export const PORT = process.env.NEXT_PUBLIC_PORT || "3000"; +export const PROXY_HOST = process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`; +export const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL ||'http://con.mind-one.co.kr:11035/api/v1'; +export const SERVER_API_FO_URL = process.env.NEXT_PUBLIC_FO_SERVER_API_URL||' http://con.mind-one.co.kr:11082/api/v1'; +export const SERVER_API_WR_URL = process.env.NEXT_PUBLIC_WR_SERVER_API_URL||' http://con.mind-one.co.kr:11080/api/v1'; +export const SERVER_API_CS_URL = process.env.NEXT_PUBLIC_CS_SERVER_API_URL||'http://dev.onasys.co.kr:8000'; +export const SERVER_API_CS_TUS_URL = process.env.NEXT_PUBLIC_CS_TUS_UPLOAD ||'/attach-service/api/v1/tus/upload' +export const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization"; +export const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token"; +export const REFRESH_TOKEN =process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token"; +export const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id"; +export const SERVER_SEWERAGE_API_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL; \ No newline at end of file diff --git a/apps/dm/src/shared/config/index.ts b/apps/dm/src/shared/config/index.ts new file mode 100644 index 000000000..3ac40ddb4 --- /dev/null +++ b/apps/dm/src/shared/config/index.ts @@ -0,0 +1,2 @@ +export * from "./api"; +export * from "./env"; \ No newline at end of file diff --git a/apps/dm/src/shared/lib/cookie.ts b/apps/dm/src/shared/lib/cookie.ts new file mode 100644 index 000000000..48254bb18 --- /dev/null +++ b/apps/dm/src/shared/lib/cookie.ts @@ -0,0 +1,30 @@ +import Cookies from "js-cookie"; + + +export function getCookie(name: string): string | undefined { + if (typeof window === "undefined") { + return undefined; + } + return Cookies.get(name); +} + +export function setCookie( + name: string, + value: string, + options?: Cookies.CookieAttributes, +): void { + if (typeof window === "undefined") { + return; + } + Cookies.set(name, value, options); +} + +export function removeCookie( + name: string, + options?: Cookies.CookieAttributes, +): void { + if (typeof window === "undefined") { + return; + } + Cookies.remove(name, options); +} diff --git a/apps/dm/tailwind.config.ts b/apps/dm/tailwind.config.ts new file mode 100644 index 000000000..d3eabd953 --- /dev/null +++ b/apps/dm/tailwind.config.ts @@ -0,0 +1,66 @@ +import baseConfig from "../../packages/common/components/tailwind.config"; + +import type { Config } from "tailwindcss"; + +export default { + darkMode: ["class"], + presets: [baseConfig], + content: [ + "./app/**/*.{js,ts,jsx,tsx,mdx}", + "./components/**/*.{js,ts,jsx,tsx,mdx}", + "../../packages/common/components/src/ui/**/*.{js,ts,jsx,tsx,mdx}", + "../../packages/common/business_components/src/ui/**/*.{js,ts,jsx,tsx,mdx}", + ], + plugins: [require("tailwindcss-animate")], + theme: { + extend: { + borderRadius: { + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)' + }, + colors: { + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + card: { + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))' + }, + popover: { + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))' + }, + primary: { + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))' + }, + secondary: { + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))' + }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))' + }, + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))' + }, + destructive: { + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))' + }, + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + chart: { + '1': 'hsl(var(--chart-1))', + '2': 'hsl(var(--chart-2))', + '3': 'hsl(var(--chart-3))', + '4': 'hsl(var(--chart-4))', + '5': 'hsl(var(--chart-5))' + } + } + } + } +} satisfies Config; diff --git a/apps/dm/tsconfig.json b/apps/dm/tsconfig.json new file mode 100644 index 000000000..493584782 --- /dev/null +++ b/apps/dm/tsconfig.json @@ -0,0 +1,54 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig", + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "noImplicitAny": false, + "baseUrl": ".", + "target": "ES2017", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "verbatimModuleSyntax": true, + "strictNullChecks": true, + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./*"], + "@common/components/*": ["../../packages/common/components/src/*"], + "@common/components": ["../../packages/common/components/src/index"], + "@common/business_components/*": [ + "../../packages/common/business_components/src/*" + ], + "@common/business_components": [ + "../../packages/common/business_components/src/index" + ], + "@common/network": ["../../packages/common/network"] + } + }, + "include": [ + ".eslintrc.*", + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + "**/*.mts", + "**/*.js", + "**/*.cjs", + "**/*.mjs", + "**/*.jsx", + "**/*.json", + ".next/types/**/*.ts" + ], + "exclude": ["**/node_modules", "**/.*/*"] +} diff --git a/apps/fo/.env.development b/apps/fo/.env.development index b270a2694..94488f0cd 100644 --- a/apps/fo/.env.development +++ b/apps/fo/.env.development @@ -1,7 +1,9 @@ NEXT_PUBLIC_SITE_ID = FO NEXT_PUBLIC_PORT = 11300 NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11300 -NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000 +NEXT_PUBLIC_SERVER_API_URL = http://con.mind-one.co.kr:11082/api/v1 +NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11080/api/v1 +NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000 NEXT_PUBLIC_GEOSERVER_URL = http://rsone.iptime.org:10010/geoserver NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver NEXT_PUBLIC_CLAIM_NAME = Authorization @@ -10,3 +12,5 @@ NEXT_PUBLIC_ACCESS_TOKEN = access-token NEXT_PUBLIC_REFRESH_TOKEN = refresh-token NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service/api # 개발 서버 API + + diff --git a/apps/fo/.env.local b/apps/fo/.env.local index ccb832d70..94488f0cd 100644 --- a/apps/fo/.env.local +++ b/apps/fo/.env.local @@ -1,7 +1,9 @@ NEXT_PUBLIC_SITE_ID = FO -NEXT_PUBLIC_PORT = 3000 -NEXT_PUBLIC_PROXY_HOST = http://localhost:3000 -NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000 +NEXT_PUBLIC_PORT = 11300 +NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11300 +NEXT_PUBLIC_SERVER_API_URL = http://con.mind-one.co.kr:11082/api/v1 +NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11080/api/v1 +NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000 NEXT_PUBLIC_GEOSERVER_URL = http://rsone.iptime.org:10010/geoserver NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver NEXT_PUBLIC_CLAIM_NAME = Authorization @@ -10,4 +12,5 @@ NEXT_PUBLIC_ACCESS_TOKEN = access-token NEXT_PUBLIC_REFRESH_TOKEN = refresh-token NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service/api # 개발 서버 API -#NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.128:8883/sewerage-service/api # 최용성 PC 서버 API + + diff --git a/apps/fo/.env.production b/apps/fo/.env.production new file mode 100644 index 000000000..16675eaec --- /dev/null +++ b/apps/fo/.env.production @@ -0,0 +1,28 @@ +# NEXT_PUBLIC_SITE_ID = WR +# NEXT_PUBLIC_PORT = 11301 +# NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11301 +# NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000 +# NEXT_PUBLIC_GEOSERVER_URL = http://rsone.iptime.org:10010/geoserver +# NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver +# NEXT_PUBLIC_CLAIM_NAME = Authorization +# NEXT_PUBLIC_AUTH_USER_ID = token-id +# NEXT_PUBLIC_ACCESS_TOKEN = access-token +# NEXT_PUBLIC_REFRESH_TOKEN = refresh-token + + + +NEXT_PUBLIC_SITE_ID = FO +NEXT_PUBLIC_PORT = 11300 +NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11300 +NEXT_PUBLIC_SERVER_API_URL = http://con.mind-one.co.kr:11082/api/v1 +NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11080/api/v1 +NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000 +NEXT_PUBLIC_GEOSERVER_URL = http://rsone.iptime.org:10010/geoserver +NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver +NEXT_PUBLIC_CLAIM_NAME = Authorization +NEXT_PUBLIC_AUTH_USER_ID = token-id +NEXT_PUBLIC_ACCESS_TOKEN = access-token +NEXT_PUBLIC_REFRESH_TOKEN = refresh-token +NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service/api # 개발 서버 API + + diff --git a/apps/fo/app/base.tsx b/apps/fo/app/base.tsx new file mode 100644 index 000000000..7bdf4f3e0 --- /dev/null +++ b/apps/fo/app/base.tsx @@ -0,0 +1,22 @@ +"use client"; + +import { BaseLayout } from "@common/components"; +import type { MenuItem } from "./store/common"; +import { useFoStore } from "./store"; +import { useRouter } from "next/navigation"; + +export default function Base({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + const { getMenuAuth } = useFoStore((state) => state); + + const router = useRouter(); + const handleClick = (id:MenuItem) =>{ + getMenuAuth(id.menuCd); + router.push(id.urlPath); + } + + return <BaseLayout handleMenuClick={handleClick}>{children}</BaseLayout>; +} diff --git a/apps/fo/app/components/api/config/env.ts b/apps/fo/app/components/api/config/env.ts index 22272ecd8..d419bfd1c 100644 --- a/apps/fo/app/components/api/config/env.ts +++ b/apps/fo/app/components/api/config/env.ts @@ -1,12 +1,5 @@ -const DEV_PORT_COMMON = "11081"; -const DEV_PORT_FO = "11082"; -const DEV_PORT_WR = "11080"; +import { PROXY_HOST, SERVER_API_URL, SERVER_API_WR_URL } from "@/src/shared/config/env"; -export const LOCAL_URL_COMMON = `http://192.168.1.129:${DEV_PORT_COMMON}/api/v1`; -export const DEV_URL_COMMON = `http://con.mind-one.co.kr:${DEV_PORT_COMMON}/api/v1`; - -export const LOCAL_URL_FO = `http://192.168.1.129:${DEV_PORT_FO}/api/v1`; -export const DEV_URL_FO = `http://con.mind-one.co.kr:${DEV_PORT_FO}/api/v1`; - -export const LOCAL_URL_WR = `http://192.168.1.129:${DEV_PORT_WR}/api/v1`; -export const DEV_URL_WR = `http://con.mind-one.co.kr:${DEV_PORT_WR}/api/v1`; +export const DEV_URL_FO = SERVER_API_URL; +export const LOCAL_URL = PROXY_HOST; +export const DEV_URL_WR = SERVER_API_WR_URL; \ No newline at end of file diff --git a/apps/fo/app/components/api/index.ts b/apps/fo/app/components/api/index.ts index fe8e54bb6..3bba85af2 100644 --- a/apps/fo/app/components/api/index.ts +++ b/apps/fo/app/components/api/index.ts @@ -1,8 +1,8 @@ -import { DEV_URL_COMMON, DEV_URL_FO, DEV_URL_WR } from "./config/env"; +import { DEV_URL_FO, DEV_URL_WR, LOCAL_URL } from "./config/env"; export const getFetch = async (part : string, url: string) => { let reqUrl = ""; - reqUrl = part === "fo" ? DEV_URL_FO+url : part === "wr" ? DEV_URL_WR+url : DEV_URL_COMMON+url; + reqUrl = part === "fo" ? DEV_URL_FO+url : part === 'local' ? LOCAL_URL+url : DEV_URL_WR+url; const response = await fetch(reqUrl , { method: "GET", headers: { @@ -32,7 +32,7 @@ export const getFetchAreaList = async (url: string) => { export const postFetch = async (part : string, url: string, params: unknown) => { let reqUrl = ""; - reqUrl = part === "fo" ? DEV_URL_FO+url : DEV_URL_COMMON+url; + reqUrl = part === "fo" ? DEV_URL_FO+url : DEV_URL_WR+url; const response = await fetch(reqUrl, { method: "POST", headers: { @@ -48,7 +48,7 @@ export const postFetch = async (part : string, url: string, params: unknown) => export const putFetch = async (part : string, url: string, params: unknown) => { let reqUrl = ""; - reqUrl = part === "fo" ? DEV_URL_FO+url : DEV_URL_COMMON+url; + reqUrl = part === "fo" ? DEV_URL_FO+url : DEV_URL_WR+url; const response = await fetch(reqUrl, { method: "PUT", headers: { @@ -64,7 +64,7 @@ export const putFetch = async (part : string, url: string, params: unknown) => { export const deleteFetch = async (part : string, url: string, params: unknown) => { let reqUrl = ""; - reqUrl = part === "fo" ? DEV_URL_FO+url : DEV_URL_COMMON+url; + reqUrl = part === "fo" ? DEV_URL_FO+url : DEV_URL_WR+url; const response = await fetch(reqUrl, { method: "DELETE", headers: { diff --git a/apps/fo/app/layout.tsx b/apps/fo/app/layout.tsx index 548ef77a9..352c25034 100644 --- a/apps/fo/app/layout.tsx +++ b/apps/fo/app/layout.tsx @@ -1,10 +1,8 @@ "use client" -import { BaseLayout } from "@common/components/ui"; +import Base from "./base"; import "./globals.css"; import { StoreProvider } from "./store"; - - export default function RootLayout({ children, }: Readonly<{ @@ -14,9 +12,7 @@ export default function RootLayout({ <html lang="en"> <body> <StoreProvider> - <BaseLayout> - {children} - </BaseLayout> + <Base>{children}</Base> </StoreProvider> </body> </html> diff --git a/apps/fo/app/pages/dashboardMain/page.tsx b/apps/fo/app/pages/dashboardMain/page.tsx index 3fa403d90..ccbf42c9d 100644 --- a/apps/fo/app/pages/dashboardMain/page.tsx +++ b/apps/fo/app/pages/dashboardMain/page.tsx @@ -51,8 +51,8 @@ export default function DashBoardFclty({ onFacilityChange, sidoSigun, facilityNm console.log('bscFctNm : ', bscFctNm); return ( - <> + <div className="z-50"> <SearchInput label={'시설명'} setValue={fncNextPage} sidoSigun={sidoSigun} fcltyName={bscFctNm}/> - </> + </div> ); } \ No newline at end of file diff --git a/apps/fo/app/store/common/index.tsx b/apps/fo/app/store/common/index.tsx index ceba9b651..5c07bcd6e 100644 --- a/apps/fo/app/store/common/index.tsx +++ b/apps/fo/app/store/common/index.tsx @@ -3,6 +3,8 @@ ====================================**/ import { getFetch } from "@/app/components/api"; +import { LoginApi } from "@/src/entities/auth"; +import type { ILogin } from "@/src/entities/auth/model/login-interface"; /** * STORE - TYPE @@ -63,6 +65,26 @@ export type envPartSelectDataType = SelectDataType & { adstDliStrCd: string, } +export interface MenuItem { + menuCd: number; + menuKornNm: string; + menuEngNm: string; + parentId: number | null; + sortSeq: number; + iconNm?: string; + children: MenuItem[] | null; + levelNo: number; + urlPath: string; + menuLnkgTypeCd: string; + menuLnkgSn: number; + menuPath: string; + qrcd: string; + useYn: string; + otptYn: string; + newWndwYn: string; + requiredUrlPath: boolean; +} + /** * STORE - DATA */ @@ -305,6 +327,7 @@ const fetchEnvPartData = async (): Promise<envPartSelectDataType[]> => { * Store - expaort ====================================*/ export type CommonAction = { + getMenuAuth : (menuCd : number) => Promise<void>; initializeCommonData: () => Promise<void>; } @@ -326,10 +349,18 @@ export type CommonType = { selectFlowPanel: SelectDataType[]; selectEnvPartData: envPartSelectDataType[]; btnClass: string; - } -} + }; -export const commonState:CommonType = { + auth: { + mngAuthrtYn: string; + inqAuthrtYn: string; + regAuthrtYn: string; + mdfcnAuthrtYn: string; + delAuthrtYn: string; + }; +}; + +export const commonState: CommonType = { Common: { isInit: false, selectSidoData: selectSidoData, @@ -341,22 +372,60 @@ export const commonState:CommonType = { selectRegionData: selectRegionData, selectUnitWaterShedData: selectUnitWaterShedData, selectMiddleRegionData: selectMiddleRegionData, - selectEnvPartSidoData : selectEnvPartSidoData, - selectEnvPartSigunData : selectEnvPartSigunData, + selectEnvPartSidoData: selectEnvPartSidoData, + selectEnvPartSigunData: selectEnvPartSigunData, selectFlowTerm: selectFlowTerm, selectFlowPanel: selectFlowPanel, - selectEnvPartData : selectEnvPartData, - btnClass: "p-4 m-2 text-white rounded-sm text-lg font-medium" - } -} + selectEnvPartData: selectEnvPartData, + btnClass: "p-4 m-2 text-white rounded-sm text-lg font-medium", + }, + + auth: { + mngAuthrtYn: "N", + inqAuthrtYn: "N", + regAuthrtYn: "N", + mdfcnAuthrtYn: "N", + delAuthrtYn: "N", + }, +}; export const CommonReducer:(set:(fn: (state: CommonType) => CommonType) => void)=>CommonAction=(set: (fn: (state: CommonType) => CommonType) => void) => { return { + // 메뉴 권한 확인 + getMenuAuth : async (menuCd : number) =>{ + const response = await getFetch( + "local", + `/cms-service/api/v1/menu-authrts/pageinfo/${menuCd}` + ); + set((state: CommonType) => { + return { + ...state, + auth: { + mngAuthrtYn: response[0].mngAuthrtYn, + inqAuthrtYn: response[0].mngAuthrtYn, + regAuthrtYn: response[0].mngAuthrtYn, + mdfcnAuthrtYn: response[0].mngAuthrtYn, + delAuthrtYn: response[0].mngAuthrtYn, + }, + }; + }); + }, + // 시도 변경 이벤트 initializeCommonData: async () => { + const payLoad : ILogin = { + userId: "tuser10003", + password: "test1234!" + }; + + console.log(payLoad.userId) + console.log(payLoad.password) + + LoginApi.login(payLoad); const promiseSet = await Promise.all([fetchSidoData(), fetchSigunData(), fetchRegionData(), fetchUnitWaterShedData(), fetchMiddleRegionData(), fetchEnvPartData()]); const [sidoData, sggData, regionData, unitData, midData, envData] = promiseSet; set((state: CommonType) => ({ + ...state, Common: { ...state.Common, selectSidoData: sidoData, @@ -371,4 +440,4 @@ export const CommonReducer:(set:(fn: (state: CommonType) => CommonType) => void) } } -export type CommonStore = CommonType & CommonAction; +export type CommonStore = CommonType & CommonAction; \ No newline at end of file diff --git a/apps/fo/app/store/dashboard/index.tsx b/apps/fo/app/store/dashboard/index.tsx index 8b04da6ff..09c7acec9 100644 --- a/apps/fo/app/store/dashboard/index.tsx +++ b/apps/fo/app/store/dashboard/index.tsx @@ -356,7 +356,7 @@ const upHeadListRainManage : TableUpperProps[] = [ { id: "A", title: "유입(㎥/일)", row:0, colSpan:2 }, { id: "inflAmnt", title: "유입유량", row:1 }, { id: "fctCpc", title: "시설용량대비", row:1 }, - { id: "B", title: "설계유입수질(㎎/L)", row:0, colSpan:5 }, + { id: "B", title: "설계유입수질(㎎/L)", row:0, colSpan:5 }, { id: "dsInflWqltBod", title: "BOD", row:1 }, { id: "dsInflWqltCod", title: "TOC\n(COD)", row:1 }, { id: "dsInflWqltSs", title: "SS", row:1 }, @@ -896,6 +896,49 @@ export const dataFormSetting=(item : OperationalStatusListProps)=> { DataForm({ type: 'float2', column: 'rainRate', item: item as unknown as Record<string, unknown>}); }; +const changeValue=(operationalStatus, data, keyTxt = 'INFL_AMNT')=>{ + operationalStatus.yearAvg = data.yearData ? (keyTxt.includes('_TP') || keyTxt.includes("_TN"))? data.yearData?Number(Math.round(data.yearData['AVG_'+keyTxt] * 1000) / 1000).toFixed(3).toString():'': data.yearData['AVG_'+keyTxt] : ''; + operationalStatus.yearMax = data.yearData ? (keyTxt.includes('_TP') || keyTxt.includes("_TN"))? data.yearData?Number(Math.round(data.yearData['MAX_'+keyTxt] * 1000) / 1000).toFixed(3).toString():'': data.yearData['MAX_'+keyTxt] : ''; + operationalStatus.yearMin = data.yearData ? (keyTxt.includes('_TP') || keyTxt.includes("_TN"))? data.yearData?Number(Math.round(data.yearData['MIN_'+keyTxt] * 1000) / 1000).toFixed(3).toString():'': data.yearData['MIN_'+keyTxt] : ''; + // 여름 + operationalStatus.summerAll = data.summer ? (keyTxt.includes('_TP') || keyTxt.includes("_TN"))? data.summer?Number(Math.round(data.summer['AVG_'+keyTxt] * 1000) / 1000).toFixed(3).toString():'': data.summer['AVG_'+keyTxt] : ''; + operationalStatus.summerThree = data.summerRainy ? (keyTxt.includes('_TP') || keyTxt.includes("_TN"))? data.summerRainy?Number(Math.round(data.summerRainy["AVG_" + keyTxt] * 1000) / 1000).toFixed(3).toString():'': data.summerRainy["AVG_" + keyTxt] : ''; + operationalStatus.summerRain = data.summerSunny ? (keyTxt.includes('_TP') || keyTxt.includes("_TN"))? data.summerSunny?Number(Math.round(data.summerSunny["AVG_" + keyTxt] * 1000) / 1000).toFixed(3).toString():'': data.summerSunny["AVG_" + keyTxt] : ''; + // 겨울 + operationalStatus.winterAll = data.winter ? (keyTxt.includes('_TP') || keyTxt.includes("_TN"))? data.winter?Number(Math.round(data.winter["AVG_" + keyTxt] * 1000) / 1000).toFixed(3).toString():'': data.winter["AVG_" + keyTxt] : ''; + operationalStatus.winterSunnyMin = data.winterSunny ? (keyTxt.includes('_TP') || keyTxt.includes("_TN"))? data.winterSunny?Number(Math.round(data.winterSunny["MIN_" + keyTxt] * 1000) / 1000).toFixed(3).toString():'': data.winterSunny["MIN_" + keyTxt] : ''; + operationalStatus.winterSunnyAvg = data.winterSunny ? (keyTxt.includes('_TP') || keyTxt.includes("_TN"))? data.winterSunny?Number(Math.round(data.winterSunny["AVG_" + keyTxt] * 1000) / 1000).toFixed(3).toString():'': data.winterSunny["AVG_" + keyTxt] : ''; + operationalStatus.winterSunnyMax = data.winterSunny ? (keyTxt.includes('_TP') || keyTxt.includes("_TN"))? data.winterSunny?Number(Math.round(data.winterSunny["MAX_" + keyTxt] * 1000) / 1000).toFixed(3).toString():'': data.winterSunny["MAX_" + keyTxt] : ''; + // 지하수 + operationalStatus.groundWaterAvg = 10; + operationalStatus.groundWaterSummer = 11; + operationalStatus.groundWaterWinter = 12; + // 오염물질 + // RDII 추정 = 하절기(6~8월) 중 최저 유입 BOD일때 유입유량 x ((동절기 청천시 유입BOD - 하절기(6~8월) 중 최저 유입BOD) / (동절기 청천시 유입BOD)) + const summerLowFlow = data.summerBod && data.summerBod.INFL_AMNT && data.summerBod.INFL_AMNT != 'null' ? Number(data.summerBod.INFL_AMNT) : 0; + const winterAvgBod = data.winterSunny && data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_BOD && data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_BOD != 'null' ? Number(data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_BOD) : 0; + const summerLowBod = data.summerBod && data.summerBod.MIN_INFL_ASSCT_BFR_WQLT_BOD && data.summerBod.MIN_INFL_ASSCT_BFR_WQLT_BOD != 'null' ? Number(data.summerBod.MIN_INFL_ASSCT_BFR_WQLT_BOD) : 0; + const summerLowRain = data.summerBod && data.summerBod.INFO_RN_DAY && data.summerBod.INFO_RN_DAY != 'null' ? Number(data.summerBod.INFO_RN_DAY) : 0; + operationalStatus.rdi = winterAvgBod === 0 ? 0 : summerLowFlow * ((winterAvgBod - summerLowBod) / winterAvgBod); + operationalStatus.rdiRain = summerLowRain; +} + +const calcValue = (operationalStatus, data, keyTxt='INFL_ASSCT_BFR_WQLT_TP') => { + // 연간 + operationalStatus.yearAvg = data.yearData ? Number(Math.round(data.yearData['AVG_'+keyTxt] * 1000) / 1000).toFixed(3).toString() : ''; + operationalStatus.yearMax = data.yearData ? Number(Math.round(data.yearData.MAX_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString() : ''; + operationalStatus.yearMin = data.yearData ? Number(Math.round(data.yearData.MIN_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString() : ''; + // 여름 + operationalStatus.summerAll = data.summer ? Number(Math.round(data.summer.AVG_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString() : ''; + operationalStatus.summerThree = data.summerRainy ? Number(Math.round(data.summerRainy.AVG_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString() : ''; + operationalStatus.summerRain = data.summerSunny ? Number(Math.round(data.summerSunny.AVG_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString() : ''; + // 겨울 + operationalStatus.winterAll = data.winter ? Number(Math.round(data.winter.AVG_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString() : ''; + operationalStatus.winterSunnyMin = data.winterSunny ? Number(Math.round(data.winterSunny.MIN_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString() : ''; + operationalStatus.winterSunnyAvg = data.winterSunny ? Number(Math.round(data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString() : ''; + operationalStatus.winterSunnyMax = data.winterSunny ? Number(Math.round(data.winterSunny.MAX_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString() : ''; +} + export const dashBoardReducer:(set:(fn: (state: DashBoardType) => DashBoardType) => void)=>DashBoardActions=(set: (fn: (state: DashBoardType) => DashBoardType) => void) => { return { initializeDashBoardData: async () => { @@ -969,18 +1012,33 @@ export const dashBoardReducer:(set:(fn: (state: DashBoardType) => DashBoardType) // 유량 - 유입 if (operationalStatusList?.[0]) { // 연간 - operationalStatusList[0].yearAvg = data.yearData===null?'':data.yearData.AVG_INFL_AMNT?data.yearData.AVG_INFL_AMNT:0+data.yearData.AVG_SUM_FLOW?data.yearData.AVG_SUM_FLOW:0+data.yearData.AVG_TP_INFL_WQLT_TP?data.yearData.AVG_TP_INFL_WQLT_TP:0; - operationalStatusList[0].yearMax = data.yearData===null?'':data.yearData.MAX_INFL_AMNT?data.yearData.MAX_INFL_AMNT:0+data.yearData.MAX_SUM_FLOW?data.yearData.MAX_SUM_FLOW:0+data.yearData.MAX_TP_INFL_WQLT_TP?data.yearData.MAX_TP_INFL_WQLT_TP:0; - operationalStatusList[0].yearMin = data.yearData===null?'':data.yearData.MIN_INFL_AMNT?data.yearData.MIN_INFL_AMNT:0+data.yearData.MIN_SUM_FLOW?data.yearData.MIN_SUM_FLOW:0+data.yearData.MIN_TP_INFL_WQLT_TP?data.yearData.MIN_TP_INFL_WQLT_TP:0; + const yearAvg = data.yearData===null?'':(data.yearData.AVG_INFL_AMNT?data.yearData.AVG_INFL_AMNT:0)+(data.yearData.AVG_SUM_FLOW?data.yearData.AVG_SUM_FLOW:0)+(data.yearData.AVG_RETURN_AMNT?data.yearData.AVG_RETURN_AMNT:0); + const yearMax = data.yearData===null?'':(data.yearData.MAX_INFL_AMNT?data.yearData.MAX_INFL_AMNT:0)+(data.yearData.MAX_SUM_FLOW?data.yearData.MAX_SUM_FLOW:0)+(data.yearData.MAX_RETURN_AMNT?data.yearData.MAX_RETURN_AMNT:0); + const yearMin = data.yearData===null?'':(data.yearData.MIN_INFL_AMNT?data.yearData.MIN_INFL_AMNT:0)+(data.yearData.MIN_SUM_FLOW?data.yearData.MIN_SUM_FLOW:0)+(data.yearData.MIN_RETURN_AMNT?data.yearData.MIN_RETURN_AMNT:0); + operationalStatusList[0].yearAvg = yearAvg; + operationalStatusList[0].yearMax = yearMax; + operationalStatusList[0].yearMin = yearMin; // 여름 - operationalStatusList[0].summerAll = data.summer===null?'':data.summer.AVG_INFL_AMNT?data.summer.AVG_INFL_AMNT:0+data.summer.AVG_SUM_FLOW?data.summer.AVG_SUM_FLOW:0+data.summer.AVG_TP_INFL_WQLT_TP?data.summer.AVG_TP_INFL_WQLT_TP:0; - operationalStatusList[0].summerThree = data.summerRainy===null?'':data.summerRainy.AVG_INFL_AMNT?data.summerRainy.AVG_INFL_AMNT:0+data.summerRainy.AVG_SUM_FLOW?data.summerRainy.AVG_SUM_FLOW:0+data.summerRainy.AVG_TP_INFL_WQLT_TP?data.summerRainy.AVG_TP_INFL_WQLT_TP:0; - operationalStatusList[0].summerRain = data.summerSunny===null?'':data.summerSunny.AVG_INFL_AMNT?data.summerSunny.AVG_INFL_AMNT:0+data.summerSunny.AVG_SUM_FLOW?data.summerSunny.AVG_SUM_FLOW:0+data.summerSunny.AVG_TP_INFL_WQLT_TP?data.summerSunny.AVG_TP_INFL_WQLT_TP:0; + operationalStatusList[0].summerAll = data.summer === null ? '' : ( + (data.summer.AVG_INFL_AMNT ? data.summer.AVG_INFL_AMNT : 0) + + (data.summer.AVG_SUM_FLOW ? data.summer.AVG_SUM_FLOW : 0) + + (data.summer.AVG_TP_INFL_WQLT_TP ? data.summer.AVG_TP_INFL_WQLT_TP : 0) + ); + operationalStatusList[0].summerThree = data.summerRainy === null ? '' : ( + (data.summerRainy.AVG_INFL_AMNT ? data.summerRainy.AVG_INFL_AMNT : 0) + + (data.summerRainy.AVG_SUM_FLOW ? data.summerRainy.AVG_SUM_FLOW : 0) + + (data.summerRainy.AVG_TP_INFL_WQLT_TP ? data.summerRainy.AVG_TP_INFL_WQLT_TP : 0) + ); + operationalStatusList[0].summerRain = data.summerSunny === null ? '' : ( + (data.summerSunny.AVG_INFL_AMNT ? data.summerSunny.AVG_INFL_AMNT : 0) + + (data.summerSunny.AVG_SUM_FLOW ? data.summerSunny.AVG_SUM_FLOW : 0) + + (data.summerSunny.AVG_TP_INFL_WQLT_TP ? data.summerSunny.AVG_TP_INFL_WQLT_TP : 0) + ); // 겨울 - operationalStatusList[0].winterAll = data.winter===null?'':data.winter.AVG_INFL_AMNT?data.winter.AVG_INFL_AMNT:0+data.winter.AVG_SUM_FLOW?data.winter.AVG_SUM_FLOW:0+data.winter.AVG_TP_INFL_WQLT_TP?data.winter.AVG_TP_INFL_WQLT_TP:0; - operationalStatusList[0].winterSunnyMin = data.winterSunny===null?'':data.winterSunny.MIN_INFL_AMNT?data.winterSunny.MIN_INFL_AMNT:0+data.winterSunny.MIN_SUM_FLOW?data.winterSunny.MIN_SUM_FLOW:0+data.winterSunny.MIN_TP_INFL_WQLT_TP?data.winterSunny.MIN_TP_INFL_WQLT_TP:0; - operationalStatusList[0].winterSunnyAvg = data.winterSunny===null?'':data.winterSunny.AVG_INFL_AMNT?data.winterSunny.AVG_INFL_AMNT:0+data.winterSunny.AVG_SUM_FLOW?data.winterSunny.AVG_SUM_FLOW:0+data.winterSunny.AVG_TP_INFL_WQLT_TP?data.winterSunny.AVG_TP_INFL_WQLT_TP:0; - operationalStatusList[0].winterSunnyMax = data.winterSunny===null?'':data.winterSunny.MAX_INFL_AMNT?data.winterSunny.MAX_INFL_AMNT:0+data.winterSunny.MAX_SUM_FLOW?data.winterSunny.MAX_SUM_FLOW:0+data.winterSunny.MAX_TP_INFL_WQLT_TP?data.winterSunny.MAX_TP_INFL_WQLT_TP:0; + operationalStatusList[0].winterAll = data.winter === null ? '' : (data.winter.AVG_INFL_AMNT ? data.winter.AVG_INFL_AMNT : 0) + (data.winter.AVG_SUM_FLOW ? data.winter.AVG_SUM_FLOW : 0) + (data.winter.AVG_TP_INFL_WQLT_TP ? data.winter.AVG_TP_INFL_WQLT_TP : 0); + operationalStatusList[0].winterSunnyMin = data.winterSunny === null ? '' : (data.winterSunny.MIN_INFL_AMNT ? data.winterSunny.MIN_INFL_AMNT : 0) + (data.winterSunny.MIN_SUM_FLOW ? data.winterSunny.MIN_SUM_FLOW : 0) + (data.winterSunny.MIN_TP_INFL_WQLT_TP ? data.winterSunny.MIN_TP_INFL_WQLT_TP : 0); + operationalStatusList[0].winterSunnyAvg = data.winterSunny === null ? '' : (data.winterSunny.AVG_INFL_AMNT ? data.winterSunny.AVG_INFL_AMNT : 0) + (data.winterSunny.AVG_SUM_FLOW ? data.winterSunny.AVG_SUM_FLOW : 0) + (data.winterSunny.AVG_TP_INFL_WQLT_TP ? data.winterSunny.AVG_TP_INFL_WQLT_TP : 0); + operationalStatusList[0].winterSunnyMax = data.winterSunny === null ? '' : (data.winterSunny.MAX_INFL_AMNT ? data.winterSunny.MAX_INFL_AMNT : 0) + (data.winterSunny.MAX_SUM_FLOW ? data.winterSunny.MAX_SUM_FLOW : 0) + (data.winterSunny.MAX_TP_INFL_WQLT_TP ? data.winterSunny.MAX_TP_INFL_WQLT_TP : 0); // 지하수 operationalStatusList[0].groundWaterAvg = 10; operationalStatusList[0].groundWaterSummer = 11; @@ -996,280 +1054,16 @@ export const dashBoardReducer:(set:(fn: (state: DashBoardType) => DashBoardType) dataFormSetting(operationalStatusList[0]); } - // 유량 - 순수하수 - if (operationalStatusList?.[1]) { - // 연간 - operationalStatusList[1].yearAvg = data.yearData?data.yearData.AVG_INFL_AMNT:''; - operationalStatusList[1].yearMax = data.yearData?data.yearData.MAX_INFL_AMNT:''; - operationalStatusList[1].yearMin = data.yearData?data.yearData.MIN_INFL_AMNT:''; - // 여름 - operationalStatusList[1].summerAll = data.summer?data.summer.AVG_INFL_AMNT:''; - operationalStatusList[1].summerThree = data.summerRainy?data.summerRainy.AVG_INFL_AMNT:''; - operationalStatusList[1].summerRain = data.summerSunny?data.summerSunny.AVG_INFL_AMNT:''; - // 겨울 - operationalStatusList[1].winterAll = data.winter?data.winter.AVG_INFL_AMNT:''; - operationalStatusList[1].winterSunnyMin = data.winterSunny?data.winterSunny.MIN_INFL_AMNT:''; - operationalStatusList[1].winterSunnyAvg = data.winterSunny?data.winterSunny.AVG_INFL_AMNT:''; - operationalStatusList[1].winterSunnyMax = data.winterSunny?data.winterSunny.MAX_INFL_AMNT:''; - // 지하수 - operationalStatusList[1].groundWaterAvg = 10; - operationalStatusList[1].groundWaterSummer = 11; - operationalStatusList[1].groundWaterWinter = 12; - // 오염물질 - // RDII 추정 = 하절기(6~8월) 중 최저 유입 BOD일때 유입유량 x ((동절기 청천시 유입BOD - 하절기(6~8월) 중 최저 유입BOD) / (동절기 청천시 유입BOD)) - const summerLowFlow = data.summerBod&&data.summerBod.INFL_AMNT&&data.summerBod.INFL_AMNT!='null'?Number(data.summerBod.INFL_AMNT):0; - const winterAvgBod = data.winterSunny&&data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_BOD&&data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_BOD!='null'?Number(data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_BOD):0; - const summerLowBod = data.summerBod&&data.summerBod.MIN_INFL_ASSCT_BFR_WQLT_BOD&&data.summerBod.MIN_INFL_ASSCT_BFR_WQLT_BOD!='null'?Number(data.summerBod.MIN_INFL_ASSCT_BFR_WQLT_BOD):0; - const summerLowRain = data.summerBod&&data.summerBod.INFO_RN_DAY&&data.summerBod.INFO_RN_DAY!='null'?Number(data.summerBod.INFO_RN_DAY):0; - operationalStatusList[1].rdi = winterAvgBod===0?0:summerLowFlow * ((winterAvgBod - summerLowBod) / winterAvgBod); - operationalStatusList[1].rdiRain = summerLowRain; - dataFormSetting(operationalStatusList[1]); - } - - // 유량 - 연계처리수 - if (operationalStatusList?.[2]) { - // 연간 - operationalStatusList[2].yearAvg = data.yearData?data.yearData.AVG_SUM_FLOW:''; - operationalStatusList[2].yearMax = data.yearData?data.yearData.MAX_SUM_FLOW:''; - operationalStatusList[2].yearMin = data.yearData?data.yearData.MIN_SUM_FLOW:''; - // 여름 - operationalStatusList[2].summerAll = data.summer?data.summer.AVG_SUM_FLOW:''; - operationalStatusList[2].summerThree = data.summerRainy?data.summerRainy.AVG_SUM_FLOW:''; - operationalStatusList[2].summerRain = data.summerSunny?data.summerSunny.AVG_SUM_FLOW:''; - // 겨울 - operationalStatusList[2].winterAll = data.winter?data.winter.AVG_SUM_FLOW:''; - operationalStatusList[2].winterSunnyMin = data.winterSunny?data.winterSunny.MIN_SUM_FLOW:''; - operationalStatusList[2].winterSunnyAvg = data.winterSunny?data.winterSunny.AVG_SUM_FLOW:''; - operationalStatusList[2].winterSunnyMax = data.winterSunny?data.winterSunny.MAX_SUM_FLOW:''; - // 지하수 - operationalStatusList[2].groundWaterAvg = 10; - operationalStatusList[2].groundWaterSummer = 11; - operationalStatusList[2].groundWaterWinter = 12; - // 오염물질 - // RDII 추정 = 하절기(6~8월) 중 최저 유입 BOD일때 유입유량 x ((동절기 청천시 유입BOD - 하절기(6~8월) 중 최저 유입BOD) / (동절기 청천시 유입BOD)) - const summerLowFlow = data.summerBod&&data.summerBod.INFL_AMNT&&data.summerBod.INFL_AMNT!='null'?Number(data.summerBod.INFL_AMNT):0; - const winterAvgBod = data.winterSunny&&data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_BOD&&data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_BOD!='null'?Number(data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_BOD):0; - const summerLowBod = data.summerBod&&data.summerBod.MIN_INFL_ASSCT_BFR_WQLT_BOD&&data.summerBod.MIN_INFL_ASSCT_BFR_WQLT_BOD!='null'?Number(data.summerBod.MIN_INFL_ASSCT_BFR_WQLT_BOD):0; - const summerLowRain = data.summerBod&&data.summerBod.INFO_RN_DAY&&data.summerBod.INFO_RN_DAY!='null'?Number(data.summerBod.INFO_RN_DAY):0; - operationalStatusList[2].rdi = winterAvgBod===0?0:summerLowFlow * ((winterAvgBod - summerLowBod) / winterAvgBod); - operationalStatusList[2].rdiRain = summerLowRain; - dataFormSetting(operationalStatusList[2]); - } - - // 유량 - 총인설비방류수 - if (operationalStatusList?.[3]) { - // 연간 - operationalStatusList[3].yearAvg = data.yearData?data.yearData.AVG_TP_INFL_WQLT_TP:''; - operationalStatusList[3].yearMax = data.yearData?data.yearData.MAX_TP_INFL_WQLT_TP:''; - operationalStatusList[3].yearMin = data.yearData?data.yearData.MIN_TP_INFL_WQLT_TP:''; - // 여름 - operationalStatusList[3].summerAll = data.summer?data.summer.AVG_TP_INFL_WQLT_TP:''; - operationalStatusList[3].summerThree = data.summerRainy?data.summerRainy.AVG_TP_INFL_WQLT_TP:''; - operationalStatusList[3].summerRain = data.summerSunny?data.summerSunny.AVG_TP_INFL_WQLT_TP:''; - // 겨울 - operationalStatusList[3].winterAll = data.winter?data.winter.AVG_TP_INFL_WQLT_TP:''; - operationalStatusList[3].winterSunnyMin = data.winterSunny?data.winterSunny.MIN_TP_INFL_WQLT_TP:''; - operationalStatusList[3].winterSunnyAvg = data.winterSunny?data.winterSunny.AVG_TP_INFL_WQLT_TP:''; - operationalStatusList[3].winterSunnyMax = data.winterSunny?data.winterSunny.MAX_TP_INFL_WQLT_TP:''; - // 지하수 - operationalStatusList[3].groundWaterAvg = 10; - operationalStatusList[3].groundWaterSummer = 11; - operationalStatusList[3].groundWaterWinter = 12; - // 오염물질 - // RDII 추정 = 하절기(6~8월) 중 최저 유입 BOD일때 유입유량 x ((동절기 청천시 유입BOD - 하절기(6~8월) 중 최저 유입BOD) / (동절기 청천시 유입BOD)) - const summerLowFlow = data.summerBod&&data.summerBod.INFL_AMNT&&data.summerBod.INFL_AMNT!='null'?Number(data.summerBod.INFL_AMNT):0; - const winterAvgBod = data.winterSunny&&data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_BOD&&data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_BOD!='null'?Number(data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_BOD):0; - const summerLowBod = data.summerBod&&data.summerBod.MIN_INFL_ASSCT_BFR_WQLT_BOD&&data.summerBod.MIN_INFL_ASSCT_BFR_WQLT_BOD!='null'?Number(data.summerBod.MIN_INFL_ASSCT_BFR_WQLT_BOD):0; - const summerLowRain = data.summerBod&&data.summerBod.INFO_RN_DAY&&data.summerBod.INFO_RN_DAY!='null'?Number(data.summerBod.INFO_RN_DAY):0; - operationalStatusList[3].rdi = winterAvgBod===0?0:summerLowFlow * ((winterAvgBod - summerLowBod) / winterAvgBod); - operationalStatusList[3].rdiRain = summerLowRain; - dataFormSetting(operationalStatusList[3]); - } - - // 유량 - 방류수 - if (operationalStatusList?.[4]) { - // 연간 - operationalStatusList[4].yearAvg = data.yearData?data.yearData.AVG_EFFL_AMNT:''; - operationalStatusList[4].yearMax = data.yearData?data.yearData.MAX_EFFL_AMNT:''; - operationalStatusList[4].yearMin = data.yearData?data.yearData.MIN_EFFL_AMNT:''; - // 여름 - operationalStatusList[4].summerAll = data.summer?data.summer.AVG_EFFL_AMNT:''; - operationalStatusList[4].summerThree = data.summerRainy?data.summerRainy.AVG_EFFL_AMNT:''; - operationalStatusList[4].summerRain = data.summerSunny?data.summerSunny.AVG_EFFL_AMNT:''; - // 겨울 - operationalStatusList[4].winterAll = data.winter?data.winter.AVG_EFFL_AMNT:''; - operationalStatusList[4].winterSunnyMin = data.winterSunny?data.winterSunny.MIN_EFFL_AMNT:''; - operationalStatusList[4].winterSunnyAvg = data.winterSunny?data.winterSunny.AVG_EFFL_AMNT:''; - operationalStatusList[4].winterSunnyMax = data.winterSunny?data.winterSunny.MAX_EFFL_AMNT:''; - // 지하수 - operationalStatusList[4].groundWaterAvg = 10; - operationalStatusList[4].groundWaterSummer = 11; - operationalStatusList[4].groundWaterWinter = 12; - // 오염물질 - // RDII 추정 = 하절기(6~8월) 중 최저 유입 BOD일때 유입유량 x ((동절기 청천시 유입BOD - 하절기(6~8월) 중 최저 유입BOD) / (동절기 청천시 유입BOD)) - const summerLowFlow = data.summerBod&&data.summerBod.INFL_AMNT&&data.summerBod.INFL_AMNT!='null'?Number(data.summerBod.INFL_AMNT):0; - const winterAvgBod = data.winterSunny&&data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_BOD&&data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_BOD!='null'?Number(data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_BOD):0; - const summerLowBod = data.summerBod&&data.summerBod.MIN_INFL_ASSCT_BFR_WQLT_BOD&&data.summerBod.MIN_INFL_ASSCT_BFR_WQLT_BOD!='null'?Number(data.summerBod.MIN_INFL_ASSCT_BFR_WQLT_BOD):0; - const summerLowRain = data.summerBod&&data.summerBod.INFO_RN_DAY&&data.summerBod.INFO_RN_DAY!='null'?Number(data.summerBod.INFO_RN_DAY):0; - operationalStatusList[4].rdi = winterAvgBod===0?0:summerLowFlow * ((winterAvgBod - summerLowBod) / winterAvgBod); - operationalStatusList[4].rdiRain = summerLowRain; - dataFormSetting(operationalStatusList[4]); - } - - /* - * 수질 - 유입(BOD) - */ - if (operationalStatusList?.[5]) { - // 연간 - operationalStatusList[5].yearAvg = data.yearData?data.yearData.AVG_INFL_ASSCT_BFR_WQLT_BOD:''; - operationalStatusList[5].yearMax = data.yearData?data.yearData.MAX_INFL_ASSCT_BFR_WQLT_BOD:''; - operationalStatusList[5].yearMin = data.yearData?data.yearData.MIN_INFL_ASSCT_BFR_WQLT_BOD:''; - dataFormSetting(operationalStatusList[5]); - // 여름 - operationalStatusList[5].summerAll = data.summer?data.summer.AVG_INFL_ASSCT_BFR_WQLT_BOD:''; - operationalStatusList[5].summerThree = data.summerRainy?data.summerRainy.AVG_INFL_ASSCT_BFR_WQLT_BOD:''; - operationalStatusList[5].summerRain = data.summerSunny?data.summerSunny.AVG_INFL_ASSCT_BFR_WQLT_BOD:''; - // 겨울 - operationalStatusList[5].winterAll = data.winter?data.winter.AVG_INFL_ASSCT_BFR_WQLT_BOD:''; - operationalStatusList[5].winterSunnyMin = data.winterSunny?data.winterSunny.MIN_INFL_ASSCT_BFR_WQLT_BOD:''; - operationalStatusList[5].winterSunnyAvg = data.winterSunny?data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_BOD:''; - operationalStatusList[5].winterSunnyMax = data.winterSunny?data.winterSunny.MAX_INFL_ASSCT_BFR_WQLT_BOD:''; - // 오염물질 - // RDII 추정 = 하절기(6~8월) 중 최저 유입 BOD일때 유입유량 x ((동절기 청천시 유입BOD - 하절기(6~8월) 중 최저 유입BOD) / (동절기 청천시 유입BOD)) - const summerLowFlow = data.summerBod&&data.summerBod.INFL_AMNT&&data.summerBod.INFL_AMNT!='null'?Number(data.summerBod.INFL_AMNT):0; - const winterAvgBod = data.winterSunny&&data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_BOD&&data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_BOD!='null'?Number(data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_BOD):0; - const summerLowBod = data.summerBod&&data.summerBod.MIN_INFL_ASSCT_BFR_WQLT_BOD&&data.summerBod.MIN_INFL_ASSCT_BFR_WQLT_BOD!='null'?Number(data.summerBod.MIN_INFL_ASSCT_BFR_WQLT_BOD):0; - const summerLowRain = data.summerBod&&data.summerBod.INFO_RN_DAY&&data.summerBod.INFO_RN_DAY!='null'?Number(data.summerBod.INFO_RN_DAY):0; - operationalStatusList[5].rdi = winterAvgBod===0?0:summerLowFlow * ((winterAvgBod - summerLowBod) / winterAvgBod); - operationalStatusList[5].rdiRain = summerLowRain; - dataFormSetting(operationalStatusList[5]); - } - - /** - * 수질-방류(BOD) - */ - if (operationalStatusList?.[6]) { - // 연간 - operationalStatusList[6].yearAvg = data.yearData?data.yearData.AVG_EFFL_WQLT_BOD:''; - operationalStatusList[6].yearMax = data.yearData?data.yearData.MAX_EFFL_WQLT_BOD:''; - operationalStatusList[6].yearMin = data.yearData?data.yearData.MIN_EFFL_WQLT_BOD:''; - dataFormSetting(operationalStatusList[6]); - // 여름 - operationalStatusList[6].summerAll = data.summer?data.summer.AVG_EFFL_WQLT_BOD:''; - operationalStatusList[6].summerThree = data.summerRainy?data.summerRainy.AVG_EFFL_WQLT_BOD:''; - operationalStatusList[6].summerRain = data.summerSunny?data.summerSunny.AVG_EFFL_WQLT_BOD:''; - // 겨울 - operationalStatusList[6].winterAll = data.winter?data.winter.AVG_EFFL_WQLT_BOD:''; - operationalStatusList[6].winterSunnyMin = data.winterSunny?data.winterSunny.MIN_EFFL_WQLT_BOD:''; - operationalStatusList[6].winterSunnyAvg = data.winterSunny?data.winterSunny.AVG_EFFL_WQLT_BOD:''; - operationalStatusList[6].winterSunnyMax = data.winterSunny?data.winterSunny.MAX_EFFL_WQLT_BOD:''; - dataFormSetting(operationalStatusList[6]); - } - - // 수질-유입(T-N) - if (operationalStatusList?.[7]) { - // 연간 - operationalStatusList[7].yearAvg = data.yearData?Number(Math.round(data.yearData.AVG_INFL_ASSCT_BFR_WQLT_TN * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[7].yearMax = data.yearData?Number(Math.round(data.yearData.MAX_INFL_ASSCT_BFR_WQLT_TN * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[7].yearMin = data.yearData?Number(Math.round(data.yearData.MIN_INFL_ASSCT_BFR_WQLT_TN * 1000) / 1000).toFixed(3).toString():''; - // 여름 - operationalStatusList[7].summerAll = data.summer?Number(Math.round(data.summer.AVG_INFL_ASSCT_BFR_WQLT_TN * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[7].summerThree = data.summerRainy?Number(Math.round(data.summerRainy.AVG_INFL_ASSCT_BFR_WQLT_TN * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[7].summerRain = data.summerSunny?Number(Math.round(data.summerSunny.AVG_INFL_ASSCT_BFR_WQLT_TN * 1000) / 1000).toFixed(3).toString():''; - // 겨울 - operationalStatusList[7].winterAll = data.winter?Number(Math.round(data.winter.AVG_INFL_ASSCT_BFR_WQLT_TN * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[7].winterSunnyMin = data.winterSunny?Number(Math.round(data.winterSunny.MIN_INFL_ASSCT_BFR_WQLT_TN * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[7].winterSunnyAvg = data.winterSunny?Number(Math.round(data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_TN * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[7].winterSunnyMax = data.winterSunny?Number(Math.round(data.winterSunny.MAX_INFL_ASSCT_BFR_WQLT_TN * 1000) / 1000).toFixed(3).toString():''; - } - - // 수질-방류(T-N) - if (operationalStatusList?.[8]) { - // 연간 - operationalStatusList[8].yearAvg = data.yearData?Number(Math.round(data.yearData.AVG_EFFL_WQLT_TN * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[8].yearMax = data.yearData?Number(Math.round(data.yearData.MAX_EFFL_WQLT_TN * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[8].yearMin = data.yearData?Number(Math.round(data.yearData.MIN_EFFL_WQLT_TN * 1000) / 1000).toFixed(3).toString():''; - // 여름 - operationalStatusList[8].summerAll = data.summer?Number(Math.round(data.summer.AVG_EFFL_WQLT_TN * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[8].summerThree = data.summerRainy?Number(Math.round(data.summerRainy.AVG_EFFL_WQLT_TN * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[8].summerRain = data.summerSunny?Number(Math.round(data.summerSunny.AVG_EFFL_WQLT_TN * 1000) / 1000).toFixed(3).toString():''; - // 겨울 - operationalStatusList[8].winterAll = data.winter?Number(Math.round(data.winter.AVG_EFFL_WQLT_TN * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[8].winterSunnyMin = data.winterSunny?Number(Math.round(data.winterSunny.MIN_EFFL_WQLT_TN * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[8].winterSunnyAvg = data.winterSunny?Number(Math.round(data.winterSunny.AVG_EFFL_WQLT_TN * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[8].winterSunnyMax = data.winterSunny?Number(Math.round(data.winterSunny.MAX_EFFL_WQLT_TN * 1000) / 1000).toFixed(3).toString():''; - } - - // 수질-유입(T-P) - if (operationalStatusList?.[9]) { - // 연간 - operationalStatusList[9].yearAvg = data.yearData?Number(Math.round(data.yearData.AVG_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[9].yearMax = data.yearData?Number(Math.round(data.yearData.MAX_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[9].yearMin = data.yearData?Number(Math.round(data.yearData.MIN_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - // 여름 - operationalStatusList[9].summerAll = data.summer?Number(Math.round(data.summer.AVG_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[9].summerThree = data.summerRainy?Number(Math.round(data.summerRainy.AVG_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[9].summerRain = data.summerSunny?Number(Math.round(data.summerSunny.AVG_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - // 겨울 - operationalStatusList[9].winterAll = data.winter?Number(Math.round(data.winter.AVG_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[9].winterSunnyMin = data.winterSunny?Number(Math.round(data.winterSunny.MIN_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[9].winterSunnyAvg = data.winterSunny?Number(Math.round(data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[9].winterSunnyMax = data.winterSunny?Number(Math.round(data.winterSunny.MAX_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - } - - // 수질-방류(T-P) - if (operationalStatusList?.[10]) { - // 연간 - operationalStatusList[10].yearAvg = data.yearData?Number(Math.round(data.yearData.AVG_EFFL_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[10].yearMax = data.yearData?Number(Math.round(data.yearData.MAX_EFFL_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[10].yearMin = data.yearData?Number(Math.round(data.yearData.MIN_EFFL_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - // 여름 - operationalStatusList[10].summerAll = data.summer?Number(Math.round(data.summer.AVG_EFFL_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[10].summerThree = data.summerRainy?Number(Math.round(data.summerRainy.AVG_EFFL_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[10].summerRain = data.summerSunny?Number(Math.round(data.summerSunny.AVG_EFFL_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - // 겨울 - operationalStatusList[10].winterAll = data.winter?Number(Math.round(data.winter.AVG_EFFL_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[10].winterSunnyMin = data.winterSunny?Number(Math.round(data.winterSunny.MIN_EFFL_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[10].winterSunnyAvg = data.winterSunny?Number(Math.round(data.winterSunny.AVG_EFFL_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[10].winterSunnyMax = data.winterSunny?Number(Math.round(data.winterSunny.MAX_EFFL_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - } - - /** - * 총인설비 - */ - // - // 유입 - if (operationalStatusList?.[11]) { - // 연간 - operationalStatusList[11].yearAvg = data.yearData?Number(Math.round(data.yearData.AVG_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[11].yearMax = data.yearData?Number(Math.round(data.yearData.MAX_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[11].yearMin = data.yearData?Number(Math.round(data.yearData.MIN_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - // 여름 - operationalStatusList[11].summerAll = data.summer?Number(Math.round(data.summer.AVG_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[11].summerThree = data.summerRainy?Number(Math.round(data.summerRainy.AVG_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[11].summerRain = data.summerSunny?Number(Math.round(data.summerSunny.AVG_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - // 겨울 - operationalStatusList[11].winterAll = data.winter?Number(Math.round(data.winter.AVG_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[11].winterSunnyMin = data.winterSunny?Number(Math.round(data.winterSunny.MIN_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[11].winterSunnyAvg = data.winterSunny?Number(Math.round(data.winterSunny.AVG_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[11].winterSunnyMax = data.winterSunny?Number(Math.round(data.winterSunny.MAX_INFL_ASSCT_BFR_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - } - - // 방류 - if (operationalStatusList?.[12]) { - // 연간 - operationalStatusList[12].yearAvg = data.yearData?Number(Math.round(data.yearData.AVG_EFFL_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[12].yearMax = data.yearData?Number(Math.round(data.yearData.MAX_EFFL_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[12].yearMin = data.yearData?Number(Math.round(data.yearData.MIN_EFFL_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - // 여름 - operationalStatusList[12].summerAll = data.summer?Number(Math.round(data.summer.AVG_EFFL_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[12].summerThree = data.summerRainy?Number(Math.round(data.summerRainy.AVG_EFFL_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[12].summerRain = data.summerSunny?Number(Math.round(data.summerSunny.AVG_EFFL_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - // 겨울 - operationalStatusList[12].winterAll = data.winter?Number(Math.round(data.winter.AVG_EFFL_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[12].winterSunnyMin = data.winterSunny?Number(Math.round(data.winterSunny.MIN_EFFL_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[12].winterSunnyAvg = data.winterSunny?Number(Math.round(data.winterSunny.AVG_EFFL_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; - operationalStatusList[12].winterSunnyMax = data.winterSunny?Number(Math.round(data.winterSunny.MAX_EFFL_WQLT_TP * 1000) / 1000).toFixed(3).toString():''; + for(let i=1; i<operationalStatusList.length; i++){ + const txtArray = ['1', 'INFL_AMNT', 'SUM_FLOW', 'RETURN_AMNT', 'EFFL_AMNT', 'INFL_ASSCT_BFR_WQLT_BOD', 'EFFL_WQLT_BOD', 'INFL_ASSCT_BFR_WQLT_TN', 'EFFL_WQLT_TN', 'INFL_ASSCT_BFR_WQLT_TP', 'EFFL_WQLT_TP', 'INFL_ASSCT_BFR_WQLT_TP', 'EFFL_WQLT_TP']; + if(operationalStatusList[i]){ + if(i < 7){ + changeValue(operationalStatusList[i], data, txtArray[i]); + dataFormSetting(operationalStatusList[i]!); + }else{ + calcValue(operationalStatusList[i], data, txtArray[i]); + } + } } } //const excelDownList: RainManageExcelType[] = []; @@ -1446,6 +1240,7 @@ export const dashBoardReducer:(set:(fn: (state: DashBoardType) => DashBoardType) const efflWqltTp = [0, 0, 0, 0, 0, 0, 0, 0, 0]; // Process the data and create rain management list res.data.wqltObjs.forEach((item: RainManageListProps) => { + // 강우일 if(Number(item.infoRnDay) < 3){ rainDate[1] = Number(rainDate[1] || 0) + 1; diff --git a/apps/fo/components.json b/apps/fo/components.json index dea737b85..33cf79ee5 100644 --- a/apps/fo/components.json +++ b/apps/fo/components.json @@ -12,6 +12,7 @@ }, "aliases": { "components": "@/components", + "src": "@/src", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", diff --git a/apps/fo/middleware.ts b/apps/fo/middleware.ts index c3e2a5bec..317c6a706 100644 --- a/apps/fo/middleware.ts +++ b/apps/fo/middleware.ts @@ -1,8 +1,8 @@ import { NextRequest, NextResponse } from "next/server"; +import { SERVER_API_CS_URL } from "./src/shared/config/env"; const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id"; const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization"; -const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL || ""; const GEOSERVER_URL = process.env.NEXT_PUBLIC_GEOSERVER_URL || ""; const LX_GEOSERVER_URL = process.env.NEXT_PUBLIC_LX_GEOSERVER_URL || ""; const SEWERAGE_API_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL || ""; @@ -14,7 +14,7 @@ export function middleware(req: NextRequest) { if (pathname.startsWith("/server")) { const queryParams = searchParams.toString(); - const newUrl = `${SERVER_API_URL}${pathname.replace("/server", "")}${ + const newUrl = `${SERVER_API_CS_URL}${pathname.replace("/server", "")}${ queryParams ? `?${queryParams}` : "" }`; console.log(`[Middleware] Rewriting from '/server' path to: ${newUrl}`); @@ -76,7 +76,7 @@ export function middleware(req: NextRequest) { const requestHeaders = new Headers(req.headers); const token = req.cookies.get(CLAIM_NAME)?.value; const userId = req.cookies.get(AUTH_USER_ID)?.value; - const newUrl = `${SERVER_API_URL}${pathname}`; + const newUrl = `${SERVER_API_CS_URL}${pathname}`; if (token) requestHeaders.set(CLAIM_NAME, token); if (userId) requestHeaders.set(AUTH_USER_ID, userId); @@ -91,7 +91,7 @@ export function middleware(req: NextRequest) { if (pathname.startsWith("/user-service")) { const requestHeaders = new Headers(req.headers); - const newUrl = `${SERVER_API_URL}${pathname}`; + const newUrl = `${SERVER_API_CS_URL}${pathname}`; console.log( `[Middleware] Rewriting from '/user-service' path to: ${newUrl}`, @@ -100,7 +100,9 @@ export function middleware(req: NextRequest) { headers: requestHeaders, }); } - + if (pathname === "/") { + return NextResponse.redirect(new URL("/pages/dashboard", req.url)); + } return NextResponse.next(); } @@ -111,5 +113,6 @@ export const config = { "/attach-service/:path*", "/user-service/:path*", "/cms-service/:path*", + "/" ], }; diff --git a/apps/fo/package.json b/apps/fo/package.json index 447e7d7a7..aedf37c33 100644 --- a/apps/fo/package.json +++ b/apps/fo/package.json @@ -13,6 +13,7 @@ "@common/components": "workspace:*", "@tailwindcss/vite": "^4.0.10", "html2canvas": "^1.4.1", + "js-cookie": "^3.0.5", "next": "15.1.7", "select": "^1.1.2", "webpack": "^5.98.0", diff --git a/apps/fo/src/entities/auth/api/login-service.ts b/apps/fo/src/entities/auth/api/login-service.ts new file mode 100644 index 000000000..fafb467e7 --- /dev/null +++ b/apps/fo/src/entities/auth/api/login-service.ts @@ -0,0 +1,81 @@ + +import type { LoginService, ILogin } from "../model/login-interface"; +import { tokenManager } from "../lib/token-manager"; +import {PROXY_HOST, ACCESS_TOKEN, AUTH_USER_ID,SITE_ID, CLAIM_NAME, ENDPOINT, JWT_EXPIRATION_TIME } from "../../../shared/config"; + +export class LoginApiService implements LoginService { + private static instance: LoginApiService; + + private constructor() {} + + public static getInstance(): LoginApiService { + if (!LoginApiService.instance) { + LoginApiService.instance = new LoginApiService(); + } + return LoginApiService.instance; + } + + public async login(payload: ILogin): Promise<void> { + try { + console.log(' ENDPOINT.USER_SERVICE.LOGIN ', ENDPOINT.USER_SERVICE.LOGIN) + console.log(payload.userId+' '+payload.password) + const response = await fetch( PROXY_HOST+ ENDPOINT.USER_SERVICE.LOGIN, { + method: "POST", + body: JSON.stringify({ + userId: payload.userId, + password: payload.password, + }), + }); + // const data = response.headers.get(ACCESS_TOKEN); + const accessToken = response.headers.get(ACCESS_TOKEN); + const tokenId = response.headers.get(AUTH_USER_ID); + + console.log('accessToken ', accessToken) + console.log('tokenId ', tokenId) + + if (!accessToken || !tokenId) { + throw new Error("Missing required authentication tokens"); + } + + tokenManager.setToken(CLAIM_NAME, accessToken); + tokenManager.setToken(AUTH_USER_ID, tokenId); + tokenManager.setToken("site-id-key", SITE_ID); + tokenManager.setupRefreshTimer( + () => this.silentRefresh(), + JWT_EXPIRATION_TIME, + ); + } catch (error) { + + console.log(' login err ' , error) + throw new Error(`Login failed: ${error}`); + } + } + + + public async silentRefresh(): Promise<void> { + console.log(' silentRefresh ') + + try { + const response = await fetch(PROXY_HOST+ + `${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`, + { method: "PUT" }, + ); + + const data = await response.json(); + const accessToken = data[ACCESS_TOKEN]; + const tokenId = data[AUTH_USER_ID]; + + if (!accessToken || !tokenId) { + throw new Error("Missing required authentication tokens"); + } + + tokenManager.setToken(CLAIM_NAME, accessToken); + tokenManager.setToken(AUTH_USER_ID, tokenId); + } catch (error) { + tokenManager.clearAuthToken(); + throw new Error(`Silent refresh failed: ${error}`); + } + } +} + +export const LoginApi = LoginApiService.getInstance(); diff --git a/apps/fo/src/entities/auth/index.ts b/apps/fo/src/entities/auth/index.ts new file mode 100644 index 000000000..9dc9dd368 --- /dev/null +++ b/apps/fo/src/entities/auth/index.ts @@ -0,0 +1,2 @@ +export { LoginApi } from "./api/login-service"; +//export { AuthWrapper } from "./lib/auth-wrapper"; diff --git a/apps/fo/src/entities/auth/lib/auth-wrapper.tsx b/apps/fo/src/entities/auth/lib/auth-wrapper.tsx new file mode 100644 index 000000000..678ff50d5 --- /dev/null +++ b/apps/fo/src/entities/auth/lib/auth-wrapper.tsx @@ -0,0 +1,45 @@ +// "use client"; + +// import { useEffect } from "react"; +// import { useRouter } from "next/navigation"; +// import { LoginApi } from "../api/login-service"; + +// const AuthWrapper = ({ children }: { children: React.ReactNode }) => { +// const router = useRouter(); +// const { userInfo, setUserInfo } = useUserStore((state) => state); + +// async function authCheck() { +// const userId = getCookie(AUTH_USER_ID); +// if (!userId) { +// throw new Error("Missing required authentication tokens"); +// } + +// const response = await client.get<IUserInfo>( +// `${ENDPOINT.USER_SERVICE.USERS}/info/me`, +// ); +// if (!userInfo) setUserInfo(response.data); +// } + +// useEffect(() => { +// (async () => { +// try { +// await authCheck(); +// } catch (error) { +// console.error(error); + +// try { +// await LoginApi.silentRefresh(); +// await authCheck(); +// } catch (refreshError) { +// console.error("Token refresh failed:", refreshError); +// setUserInfo(null); +// router.push("/auth/login"); +// } +// } +// })(); +// }, []); + +// return <>{children}</>; +// }; + +// export { AuthWrapper }; diff --git a/apps/fo/src/entities/auth/lib/token-manager.ts b/apps/fo/src/entities/auth/lib/token-manager.ts new file mode 100644 index 000000000..40d32f33e --- /dev/null +++ b/apps/fo/src/entities/auth/lib/token-manager.ts @@ -0,0 +1,59 @@ +import { AUTH_USER_ID, CLAIM_NAME } from "@/src/shared/config"; +import { getCookie, removeCookie, setCookie } from "@/src/shared/lib/cookie"; + +export class TokenManager { + private static instance: TokenManager; + private refreshTimer: NodeJS.Timeout | null = null; + + private constructor() {} + + public static getInstance(): TokenManager { + if (!TokenManager.instance) { + TokenManager.instance = new TokenManager(); + } + return TokenManager.instance; + } + + public getToken(key: string): string | undefined { + return getCookie(key); + } + + public setToken(key: string, value: string): void { + setCookie(key, value, { + secure: window.location.protocol === "https:", + sameSite: "lax", + }); + } + + public removeToken(key: string): void { + removeCookie(key); + } + + public setupRefreshTimer( + callback: () => Promise<void>, + expirationTime: number, + ): void { + if (this.refreshTimer) { + clearTimeout(this.refreshTimer); + } + + this.refreshTimer = setTimeout(() => { + callback().catch((error) => { + console.error("Silent refresh failed:", error); + this.clearAuthToken(); + }); + }, expirationTime - 60000); + } + + public clearAuthToken(): void { + if (this.refreshTimer) { + clearTimeout(this.refreshTimer); + this.refreshTimer = null; + } + + this.removeToken(CLAIM_NAME); + this.removeToken(AUTH_USER_ID); + } +} + +export const tokenManager = TokenManager.getInstance(); diff --git a/apps/fo/src/entities/auth/model/login-interface.ts b/apps/fo/src/entities/auth/model/login-interface.ts new file mode 100644 index 000000000..5aaf53044 --- /dev/null +++ b/apps/fo/src/entities/auth/model/login-interface.ts @@ -0,0 +1,9 @@ +export interface ILogin { + userId: string; + password: string; +} + +export interface LoginService { + login(payload: ILogin): Promise<void>; + silentRefresh(): Promise<void>; +} diff --git a/apps/fo/src/shared/config/api.ts b/apps/fo/src/shared/config/api.ts new file mode 100644 index 000000000..3eba9fa91 --- /dev/null +++ b/apps/fo/src/shared/config/api.ts @@ -0,0 +1,56 @@ +import { PROXY_HOST } from "./env"; + +export const BASE_URL = `${PROXY_HOST}/server`; + +export const ENDPOINT = { + ATTACH_SERVICE: { + TUS_UPLOAD: "/attach-service/api/v1/tus/upload", + EDITOR_UPLOAD: "/attach-service/api/v1/upload/editor", + IMAGES: "/attach-service/api/v1/images", + MOVIE_THUMBNAIL: "/attach-service/api/v1/movie/thumbnail", + ATTACHMENTS: "/attach-service/api/v1/atfl/attachments", + DOWNLOAD: "/attach-service/api/v1/atflcd/download", + STREAM_VIDEO: "/attach-service/api/v1/stream/video", + }, + USER_SERVICE: { + LOGIN: "/user-service/login", + USERS: "/user-service/api/v1/users", + SILENT_REFRESH: "/user-service/api/v1/users/token/refresh", + AUTHORIZATIONS: "/user-service/api/v1/authorizations", + ROLE_AUTHORIZATIONS: "/user-service/api/v1/role-authorizations", + ROLES: "/user-service/api/v1/roles", + }, + CMS_SERVICE: { + SITES: "/cms-service/api/v1/sites", + IPS: "/cms-service/api/v1/site-ips", + DOMAINS: "/cms-service/api/v1/site-dmns", + POSTINGS: "/cms-service/api/v1/site-pstgs", + CODE: "/cms-service/api/v1/code/cache", + MENUS: "/cms-service/api/v1/menus", + MENU_ROLES: "/cms-service/api/v1/menu-roles", + MENU_AUTHRTS: "/cms-service/api/v1/menu-authrts", + CONTENTS: "/cms-service/api/v1/contents", + CONTENTS_DETAILS: "/cms-service/api/v1/contents-details", + ORGANIZATIONS: "/cms-service/api/v1/ognzs", + USER_ORGANIZATION: "/cms-service/api/v1/user-ognz", + IMAGES: "/cms-service/api/v1/images", + BANNERS: "/cms-service/api/v1/bnrs", + TEMPLATE: "/cms-service/api/v1/tmplt", + TERMS: "/cms-service/api/v1/trms", + LWPO_CODE: "/cms-service/api/v1/lwpo-cds", + UP_CODE: "/cms-service/api/v1/up-codes", + POPUPS: "/cms-service/api/v1/popups", + SCHEDULES: "/cms-service/api/v1/schdls", + SURVEY: "/cms-service/api/v1/srvy", + SURVEY_QUESTION: "/cms-service/api/v1/srvy-qitem", + SURVEY_ARTICLE: "/cms-service/api/v1/srvy-artcl", + }, + BOARD_SERVICE: { + BBS: "/board-service/api/v1/bbs", + BBS_TEMPLATES: "/board-service/api/v1/bbsTmplt", + POSTS: "/board-service/api/v1/posts", + POSTS_COMMENTS: "/board-service/api/v1/posts-cmnts", + }, +}; + +export const JWT_EXPIRATION_TIME = 1800000; diff --git a/apps/fo/src/shared/config/env.ts b/apps/fo/src/shared/config/env.ts new file mode 100644 index 000000000..8baf1b0f0 --- /dev/null +++ b/apps/fo/src/shared/config/env.ts @@ -0,0 +1,14 @@ +export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "FO"; +export const PORT = process.env.NEXT_PUBLIC_PORT || "3000"; +export const PROXY_HOST = process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`; +export const SERVER_API_WR_URL = process.env.NEXT_PUBLIC_WR_SERVER_API_URL ||'http://con.mind-one.co.kr:11080/api/v1'; +export const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL||' http://con.mind-one.co.kr:11082/api/v1'; +export const SERVER_API_CS_URL = process.env.NEXT_PUBLIC_CS_SERVER_API_URL||'http://dev.onasys.co.kr:8000'; +export const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization"; +export const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token"; +export const REFRESH_TOKEN =process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token"; +export const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id"; +export const SERVER_SEWERAGE_API_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL; + + + diff --git a/apps/fo/src/shared/config/index.ts b/apps/fo/src/shared/config/index.ts new file mode 100644 index 000000000..cd83447d5 --- /dev/null +++ b/apps/fo/src/shared/config/index.ts @@ -0,0 +1,2 @@ +export * from "./api"; +export * from "./env"; diff --git a/apps/fo/src/shared/lib/cookie.ts b/apps/fo/src/shared/lib/cookie.ts new file mode 100644 index 000000000..4bc0fe142 --- /dev/null +++ b/apps/fo/src/shared/lib/cookie.ts @@ -0,0 +1,31 @@ + +import Cookies from "js-cookie"; + + +export function getCookie(name: string): string | undefined { + if (typeof window === "undefined") { + return undefined; + } + return Cookies.get(name); +} + +export function setCookie( + name: string, + value: string, + options?: Cookies.CookieAttributes, +): void { + if (typeof window === "undefined") { + return; + } + Cookies.set(name, value, options); +} + +export function removeCookie( + name: string, + options?: Cookies.CookieAttributes, +): void { + if (typeof window === "undefined") { + return; + } + Cookies.remove(name, options); +} diff --git a/apps/sn/.env.development b/apps/sn/.env.development index fab02e36c..f12d2c38e 100644 --- a/apps/sn/.env.development +++ b/apps/sn/.env.development @@ -1,12 +1,13 @@ NEXT_PUBLIC_SITE_ID = SN NEXT_PUBLIC_PORT = 11302 NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11302 +NEXT_PUBLIC_ADDR_URL = http://con.mind-one.co.kr:11082 NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000 NEXT_PUBLIC_GEOSERVER_URL = http://rsone.iptime.org:10010/geoserver NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver #TODO 운영에서 바꿔야 함 +NEXT_PUBLIC_DC_URL = https://apigateway.rsonesoft.com #자료관 데이터 NEXT_PUBLIC_CLAIM_NAME = Authorization NEXT_PUBLIC_AUTH_USER_ID = token-id NEXT_PUBLIC_ACCESS_TOKEN = access-token NEXT_PUBLIC_REFRESH_TOKEN = refresh-token - -NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service/api # 개발 서버 API +NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service/api # 개발 서버 API \ No newline at end of file diff --git a/apps/sn/.env.local b/apps/sn/.env.local index 2d8993cb5..253ed7528 100644 --- a/apps/sn/.env.local +++ b/apps/sn/.env.local @@ -5,12 +5,11 @@ NEXT_PUBLIC_ADDR_URL = http://con.mind-one.co.kr:11082 NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000 NEXT_PUBLIC_GEOSERVER_URL = http://rsone.iptime.org:10010/geoserver NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver -NEXT_PUBLIC_RSONE_DC_URL = https://apigateway.rsonesoft.com #자료관 데이터 +NEXT_PUBLIC_DC_URL = https://apigateway.rsonesoft.com #자료관 데이터 NEXT_PUBLIC_CLAIM_NAME = Authorization NEXT_PUBLIC_AUTH_USER_ID = token-id NEXT_PUBLIC_ACCESS_TOKEN = access-token NEXT_PUBLIC_REFRESH_TOKEN = refresh-token - NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service/api # 개발 서버 API #NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.128:8883/sewerage-service/api # 최용성 부장님 API -#NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.222:8883/sewerage-service/api # 박이정 차장님 API +#NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.222:8883/sewerage-service/api # 박이정 차장님 API \ No newline at end of file diff --git a/apps/sn/.env.production b/apps/sn/.env.production index 3e70e36ac..0ede28ed8 100644 --- a/apps/sn/.env.production +++ b/apps/sn/.env.production @@ -1,14 +1,13 @@ NEXT_PUBLIC_SITE_ID = SN -NEXT_PUBLIC_PORT = 3000 -NEXT_PUBLIC_PROXY_HOST = http://sn.hasuon.or.kr -NEXT_PUBLIC_SERVER_API_URL = http://apigateway.iipbs-dev.svc.cluster.local:8000 +NEXT_PUBLIC_PORT = 11302 +NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11302 +NEXT_PUBLIC_ADDR_URL = http://con.mind-one.co.kr:11082 +NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000 +NEXT_PUBLIC_GEOSERVER_URL = http://172.29.143.87:8080/geoserver +NEXT_PUBLIC_LX_GEOSERVER_URL = http://rsone.iptime.org:10010/geoserver_swl +NEXT_PUBLIC_DC_URL = https://apigateway.rsonesoft.com #자료관 데이터 NEXT_PUBLIC_CLAIM_NAME = Authorization NEXT_PUBLIC_AUTH_USER_ID = token-id NEXT_PUBLIC_ACCESS_TOKEN = access-token NEXT_PUBLIC_REFRESH_TOKEN = refresh-token - -NEXT_PUBLIC_GEOSERVER_URL = http://172.29.143.87:8080/geoserver -NEXT_PUBLIC_LX_GEOSERVER_URL = http://172.29.143.87:8080/geoserver_swl -NEXT_PUBLIC_SEWERAGE_API_URL= http://apigateway.iipbs-dev.svc.cluster.local:8000/sewerage-service/api -NEXT_PUBLIC_ADDR_URL = http://con.mind-one.co.kr:11082 -NEXT_PUBLIC_RSONE_DC_URL = https://apigateway.rsonesoft.com #자료관 데이터 \ No newline at end of file +NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service/api # 개발 서버 API diff --git a/apps/sn/app/(map-layout)/map/components/InputSection.tsx b/apps/sn/app/(map-layout)/map/components/InputSection.tsx index 209361293..539122d44 100644 --- a/apps/sn/app/(map-layout)/map/components/InputSection.tsx +++ b/apps/sn/app/(map-layout)/map/components/InputSection.tsx @@ -3,7 +3,7 @@ import React from "react"; interface InputSectionProps { title: string; - data: { year: string; type: string }[]; + data: { year: string; type: string, bizNm: string, bizType: string }[]; sectionKey: string; onInputChange: (section: string, index: number, field: string, value: string) => void; } @@ -13,21 +13,26 @@ const InputSection: React.FC<InputSectionProps> = ({ title, data, sectionKey, on <div> {/* 섹션 제목 */} <div className="card-header"> - <h3 className="text-2xl mx-3 font-medium text-label">{title}</h3> + <h3 className="text-2xl mx-3 font-medium text-label whitespace-nowrap">{title}</h3> </div> {/* 테이블 */} <div className="card !m-[1.2rem] !p-0r"> <Table variant="secondary" className="w-full"> <TableHeader> <TableRow> - <TableHead className="border border-gray-300 px-2 py-2 text-sm w-[80px]">년도</TableHead> - <TableHead className="border border-gray-300 px-2 py-2 text-sm w-auto">구분</TableHead> + <TableHead className="border border-gray-300 px-2 py-2 text-sm w-auto whitespace-nowrap">구분</TableHead> + <TableHead className="border border-gray-300 px-2 py-2 text-sm w-[80px] whitespace-nowrap">년도</TableHead> + <TableHead className="border border-gray-300 px-2 py-2 text-sm w-auto whitespace-nowrap">사업명</TableHead> + <TableHead className="border border-gray-300 px-2 py-2 text-sm w-auto whitespace-nowrap">유형</TableHead> </TableRow> </TableHeader> <TableBody> {data.map((row, index) => ( <TableRow key={index}> - <TableCell className="border border-gray-300 px-2 py-2 text-sm w-[80px]"> + <TableCell className="border border-gray-300 px-2 py-2 text-sm text-center leading-normal w-auto whitespace-nowrap"> + {row.type} + </TableCell> + <TableCell className="border border-gray-300 px-2 py-2 text-sm w-[80px] whitespace-nowrap"> <input type="text" value={row.year} @@ -35,8 +40,11 @@ const InputSection: React.FC<InputSectionProps> = ({ title, data, sectionKey, on className="w-full text-xl border-radius-0 px-3 py-2 text-base text-center leading-normal" /> </TableCell> - <TableCell className="border border-gray-300 px-2 py-2 text-sm text-center leading-normal w-auto"> - {row.type} + <TableCell className="border border-gray-300 px-2 py-2 text-sm text-center leading-normal w-auto whitespace-nowrap"> + {row.bizNm} + </TableCell> + <TableCell className="border border-gray-300 px-2 py-2 text-sm text-center leading-normal w-auto whitespace-nowrap"> + {row.bizType} </TableCell> </TableRow> ))} diff --git a/apps/sn/app/(map-layout)/map/components/common/index.ts b/apps/sn/app/(map-layout)/map/components/common/index.ts index 055c7062a..23602b632 100644 --- a/apps/sn/app/(map-layout)/map/components/common/index.ts +++ b/apps/sn/app/(map-layout)/map/components/common/index.ts @@ -49,8 +49,8 @@ export const handleInputChange = (section: string, value: string, dataMap: { [key: string]: { - data: { year: string; type: string }[]; - setData: React.Dispatch<React.SetStateAction<{ year: string; type: string }[]>>; + data: { year: string; type: string, bizNm: string, bizType: string }[]; + setData: React.Dispatch<React.SetStateAction<{ year: string; type: string, bizNm: string, bizType: string }[]>>; }; } ) => { diff --git a/apps/sn/app/(map-layout)/map/components/common/table.ts b/apps/sn/app/(map-layout)/map/components/common/table.ts index 6834e6b43..cabb95649 100644 --- a/apps/sn/app/(map-layout)/map/components/common/table.ts +++ b/apps/sn/app/(map-layout)/map/components/common/table.ts @@ -28,22 +28,17 @@ export const MsSwagePplCol = [ // { id: 'lyrTypeNm', title: '레이어타입명' }, ] export const MsSwagePplCol2 = [ - { id: 'fcltMngNo', title: '시설관리번호' }, - { id: 'instMngNo', title: '기관관리번호' }, + { id: 'fcltMngNo', title: '시설 관리번호' }, + { id: 'instMngNo', title: '기관 관리번호' }, { id: 'instlYmd', title: '설치일자' }, { id: 'mapshtNo', title: '도엽번호' }, { id: 'pdmt', title: '관경(mm)' }, { id: 'prlg', title: '연장(m)' }, { id: 'avgGrdn', title: '평균구배(m/m)' }, - { id: 'rnysnFvlc', title: '우기 시 유속(m/s)' }, - { id: 'clarFvlc', title: '건기 시 유속(m/s)' }, - { id: 'drtwMltvArea', title: '오수배수면적(m²)' }, - { id: 'exclnMltvArea', title: '우수배수면적(m²)' }, { id: 'tmptDpth', title: '시점깊이(m)' }, - { id: 'tmptMhlMngNo', title: '시점맨홀관리번호' }, + { id: 'tmptMhlMngNo', title: '시점맨홀 관리번호' }, { id: 'scendDpth', title: '종점깊이(m)' }, - { id: 'scendMhlMngNo', title: '종점맨홀관리번호' }, - { id: 'trflnCnt', title: '차선수' }, + { id: 'scendMhlMngNo', title: '종점맨홀 관리번호' }, { id: 'vrtcLen', title: '세로길이(m)' }, { id: 'wdthLen', title: '가로길이(m)' }, // { id: 'fcltyShpCd', title: '시설물형태코드' }, @@ -306,35 +301,35 @@ export const SwtrmtFcltCol2 = [ { id: 'rgnExpln', title: '지역설명' }, { id: 'cmcnYmd', title: '준공일자' }, { id: 'oprtngStrtYmd', title: '가동개시일자' }, - { id: 'clsgYmd', title: '폐쇄일자' }, + // { id: 'clsgYmd', title: '폐쇄일자' }, // { id: 'prcsMsrcCd', title: '처리공법코드' }, // { id: 'laeCd', title: '지자체코드' }, { id: 'laeNm', title: '지자체명' }, - { id: 'ctpvNm', title: '시도명' }, - { id: 'sggNm', title: '시군구명' }, + // { id: 'ctpvNm', title: '시도명' }, + // { id: 'sggNm', title: '시군구명' }, // { id: 'sareaCd', title: '권역코드' }, { id: 'sareaNm', title: '권역명' }, { id: 'lrgeSareaNm', title: '대권역명' }, { id: 'rvrNm', title: '하천명' }, - { id: 'addr', title: '주소' }, - { id: 'dtlAddr', title: '상세주소' }, - { id: 'rdnmAddr', title: '도로명주소' }, - { id: 'dtlRdnmAddr', title: '상세도로명주소' }, + // { id: 'addr', title: '주소' }, + // { id: 'dtlAddr', title: '상세주소' }, + // { id: 'rdnmAddr', title: '도로명주소' }, + // { id: 'dtlRdnmAddr', title: '상세도로명주소' }, { id: 'dschgWtstNm', title: '방류수계명' }, - { id: 'pllnArea', title: '부지면적(m²)' }, - { id: 'mngRprtvBzentyNm', title: '관리대행업제명' }, + // { id: 'pllnArea', title: '부지면적(m²)' }, + // { id: 'mngRprtvBzentyNm', title: '관리대행업체명' }, { id: 'swtrmtPpltnCnt', title: '하수처리인구수(인)' }, { id: 'prcsZoneAreaSum', title: '처리구역면적합계(m²)' }, - { id: 'xcrd', title: 'X좌표' }, - { id: 'ycrd', title: 'Y좌표' }, + // { id: 'xcrd', title: 'X좌표' }, + // { id: 'ycrd', title: 'Y좌표' }, // { id: 'oprtngSttsCd', title: '가동상태코드' }, { id: 'rprsMsrcCn', title: '대표공법내용' }, - { id: 'sttyCrtrBod', title: '법정기준생물화학적산소요구량(mg/L)' }, - { id: 'sttyCrtrToc', title: '법정기준TOC(mg/L)' }, - { id: 'sttyCrtrSs', title: '법정기준SS(mg/L)' }, - { id: 'sttyCrtrTn', title: '법정기준총질소(mg/L)' }, - { id: 'sttyCrtrTph', title: '법정기준총인(mg/L)' }, - { id: 'sttyCrtrClbclCnt', title: '법정기준대장균수(군수/100mL)' }, + // { id: 'sttyCrtrBod', title: '법정기준생물화학적산소요구량(mg/L)' }, + // { id: 'sttyCrtrToc', title: '법정기준TOC(mg/L)' }, + // { id: 'sttyCrtrSs', title: '법정기준SS(mg/L)' }, + // { id: 'sttyCrtrTn', title: '법정기준총질소(mg/L)' }, + // { id: 'sttyCrtrTph', title: '법정기준총인(mg/L)' }, + // { id: 'sttyCrtrClbclCnt', title: '법정기준대장균수(군수/100mL)' }, { id: 'bsnNm', title: '유역명' }, // { id: 'obsrvnSptCd', title: '관측지점코드' }, ]; diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx index b68684ffd..9c80bbdc5 100644 --- a/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx +++ b/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx @@ -3,6 +3,8 @@ import { VerticalTable } from '@/components/ui/verticalTable'; import React, { useState, useEffect } from 'react' import InputSection from '../InputSection'; import { handleInputChange } from '../common'; +import { getData } from "@/components/lib/api"; +// import { useBizByFcltStore } from "../../../../store/StoreProvider"; // 하수관로 const inputColumn = [ @@ -15,33 +17,98 @@ const inputColumn = [ { id: "layCd", title: "매설위치", type: "select", options: ["도로", "하상"] }, ]; +type operationDataType = { year: string; type: string, bizNm: string, bizType: string }; + const MsSwagePpl = ({ featureData, onSaveClick }: { featureData: any, onSaveClick?: () => void }) => { - const [repairData, setRepairData] = useState([ - { year: "2025", type: "개대체" }, - { year: "2025", type: "보수" }, - ]); - const [cleaningData, setCleaningData] = useState([ - { year: "2025", type: "청소" }, - { year: "2025", type: "준설" }, - ]); - const [inspectionData, setInspectionData] = useState([ - { year: "2025", type: "관로기술진단" }, - { year: "2025", type: "관로기술진단" }, - ]); + const [formData, setFormData] = useState<any>({}); + const [repairData, setRepairData] = useState<operationDataType[]>([]); + const [cleaningData, setCleaningData] = useState<operationDataType[]>([]); + const [inspectionData, setInspectionData] = useState<operationDataType[]>([]); const dataMap = { repair: { data: repairData, setData: setRepairData }, cleaning: { data: cleaningData, setData: setCleaningData }, inspection: { data: inspectionData, setData: setInspectionData }, }; - const [formData, setFormData] = useState<any>({}); - // featureData가 변경될 때 formData 초기화 + // const BIZ_SE_CD = useBizByFcltStore(state => state.BIZ_SE_CD); + const BIZ_SE_CD = [ + { lwpoCd: "100", lwpoCdNm: "관로기술진단" }, + { lwpoCd: "200", lwpoCdNm: "개대체" }, + { lwpoCd: "201", lwpoCdNm: "유지보수" }, + { lwpoCd: "203", lwpoCdNm: "청소, 준설" }, + { lwpoCd: "204", lwpoCdNm: "단순보수" }, + ]; + const BIZ_TY_CD = [ + { lwpoCd: "SV", lwpoCdNm: "용역" }, + { lwpoCd: "SF", lwpoCdNm: "자체" }, + { lwpoCd: "SC", lwpoCdNm: "공사" }, + ]; + + console.log('BIZ_SE_CD', BIZ_SE_CD); + + // 마운트 및 업데이트 시 API 호출 + useEffect(() => { if (featureData) { setFormData(featureData); } - }, [featureData]); + + const fetchAll = async () => { + const operationData = await getData(`v1/bizInfo/bizByFclt?mngInstCd=${featureData?.mng_inst_cd}&fcltMngNo=${featureData?.fclt_mng_no}&page=0&size=1`); + + let inspectionArr: operationDataType[] = []; + let cleaningArr: operationDataType[] = []; + let repairArr: operationDataType[] = []; + + if (Array.isArray(operationData)) { + operationData.forEach(item => { + if (!item.flfmt_yr) return; + // biz_se_cd에 해당하는 type명 찾기 + const seCodeObj = BIZ_SE_CD.find(code => code.lwpoCd === item.biz_se_cd); + const tyCodeObj = BIZ_TY_CD.find(code => code.lwpoCd === item.biz_ty_cd); + const seTypeName = seCodeObj ? seCodeObj.lwpoCdNm : ""; + const tyTypeName = tyCodeObj ? tyCodeObj.lwpoCdNm : ""; + switch (item.biz_se_cd) { + case "100": + inspectionArr.push({ + year: String(item.flfmt_yr), + type: seTypeName, + bizNm: String(item.biz_nm), + bizType: tyTypeName, + }); + break; + case "203": + cleaningArr.push({ + year: String(item.flfmt_yr), + type: seTypeName, + bizNm: String(item.biz_nm), + bizType: tyTypeName, + }); + break; + case "200": + case "201": + case "204": + repairArr.push({ + year: String(item.flfmt_yr), + type: seTypeName, + bizNm: String(item.biz_nm), + bizType: tyTypeName, + }); + break; + } + }); + } + + setInspectionData(inspectionArr); + setCleaningData(cleaningArr); + setRepairData(repairArr); + console.log('inspectionArr', inspectionArr); + console.log('cleaningArr', cleaningArr); + console.log('repairArr', repairArr); + }; + fetchAll(); + }, []); // 폼 데이터가 변경될 때 호출될 핸들러 const handleFormDataChange = (newFormData: any) => { @@ -56,6 +123,18 @@ const MsSwagePpl = ({ featureData, onSaveClick }: { featureData: any, onSaveClic } }; + // 변환 함수: 객체 → [{ year, type }] + // function convertToYearTypeArray(obj: any): { year: string, type: string }[] { + // if (!obj || typeof obj !== "object") return []; + // // 이미 배열이면 그대로 반환 + // if (Array.isArray(obj)) return obj; + // // 객체의 각 key를 type, value를 year로 변환 + // return Object.entries(obj).map(([type, year]) => ({ + // year: String(year ?? ""), + // type: String(type ?? ""), + // })); + // } + return ( <> diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/Ssc.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/Ssc.tsx index acc9cc657..52fc5523d 100644 --- a/apps/sn/app/(map-layout)/map/components/popupComponent/Ssc.tsx +++ b/apps/sn/app/(map-layout)/map/components/popupComponent/Ssc.tsx @@ -8,7 +8,7 @@ import { getData } from "@/components/lib/api"; import { formatDisplayData } from '@/components/lib/utils/formatDisplayValue'; const inputColumn = [ - { id: "prrtymngYn", title: "중점여부", type: "select", options: ["중점우수토실", "우수토실"] }, + { id: "prrtymngYn", title: "중점여부", type: "select", options: ["우수토실", "중점우수토실"] }, { id: "swtrmtZoneCd", title: "처리구역", type: "input" }, ]; diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx index adf85f1af..345aade49 100644 --- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx +++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx @@ -43,8 +43,8 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => { const chartForm = CHART_FORM.LINE; const chartConfig = { - chartData1: { label: '순오수량(m³/h)', color: "red", }, - chartData2: { label: '실측하수량(m³/h)', color: "orange", } + chartData1: { label: '순오수량', color: "red", }, + chartData2: { label: '실측하수량', color: "orange", } } as ChartConfig; useEffect(() => { @@ -150,25 +150,26 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => { </Button> {/* 상수사용량 적용연월 */} <div className="bg-white px-4 py-2 "> - <span className="text-2xl text-red-600 font-bold">상수사용량 적용연월</span> + <span className="text-2xl text-red-600 font-bold">● 상수사용량 적용연월</span> <div className="flex items-center mt-2"> - <span className="text-black text-xl font-bold"> + <span className="ml-5 text-black text-xl font-bold"> {(selectedAplcnYm) ? moment(selectedAplcnYm, "YYYYMM").format("YYYY-MM") : ""} </span> </div> </div> {/* 침입수량 분석결과 */} <div className="bg-white px-4 py-2 "> - <span className="text-2xl text-red-600 font-bold">침입수량 분석결과</span> + <span className="text-2xl text-red-600 font-bold">● 침입수량 산정결과</span> <div className="flex items-center mt-2"> - <span className="text-black text-xl font-bold">{inftwtQty}</span> + <span className="ml-5 text-black text-xl">침입수량 : </span> + <span className="w-[35px] inline-block text-right text-black text-xl font-bold">{inftwtQty}</span> <span className="ml-2 text-black text-xl">m³/d</span> </div> </div> </div> {/* 차트 */} <div className="h-[90%] bg-white text-3xl"> - <MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={chartData} chartTitle={'관로유량'} + <MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={chartData} chartTitle={'침입수량 그래프'} yFieldText2="시간" yFieldText="유량(m³/h)"/> </div> </div> @@ -256,7 +257,7 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => { 닫기 </button> <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={infilRsltChart}> - 분석결과 도표 + 선택조건 적용 </button> </div> </div>)} @@ -271,7 +272,7 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => { headerTitle="" bodyClass={` min-h-[50vh] - w-[50vw] + w-[55vw] max-w-none max-h-none overflow-visible diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx index c6792547f..9735c772f 100644 --- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx +++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx @@ -44,7 +44,7 @@ const RdiiChart = ({ pplMngNo }: ModalOpenProp) => { const chartForm = CHART_FORM.LINE; const chartConfig = { - chartData1: { label: 'RDII(m³/h)', color: "red", }, + chartData1: { label: 'RDII', color: "red", }, //chartData2: { label: '순오수량(m³/h)', color: "orange", }, } as ChartConfig; @@ -127,9 +127,9 @@ const RdiiChart = ({ pplMngNo }: ModalOpenProp) => { </Button> {/* 상수사용량 적용연월 */} <div className="bg-white px-4 py-2 "> - <span className="text-2xl text-red-600 font-bold">상수사용량 적용연월</span> + <span className="text-2xl text-red-600 font-bold">● 상수사용량 적용연월</span> <div className="flex items-center mt-2"> - <span className="text-black text-xl font-bold"> + <span className="ml-5 text-black text-xl font-bold"> {(aplcnYm)? moment(aplcnYm, "YYYYMM").format("YYYY-MM"):""} </span> </div> @@ -137,20 +137,22 @@ const RdiiChart = ({ pplMngNo }: ModalOpenProp) => { {/* 강우유입수량 분석결과 */} <div className="bg-white px-4 py-2 "> - <span className="text-2xl text-red-600 font-bold">강우유입수량 분석결과</span> + <span className="text-2xl text-red-600 font-bold">● 강우유입수량 분석결과</span> <div className="flex items-center mt-2"> - <span className="text-black text-xl font-bold">{rdiiQty}</span> - <span className="ml-2 text-black">m³/d</span> + <span className="w-[95px] inline-block text-right text-black text-xl">평균RDII : </span> + <span className="w-[30px] inline-block text-right text-black text-xl font-bold"> {rdiiQty}</span> + <span className="ml-2 text-black"> m³/d</span> </div> <div className="flex items-center mt-2"> - <span className="text-black text-xl font-bold">{totalVolume}</span> - <span className="ml-2 text-black">m³/mm</span> + <span className="w-[95px] inline-block text-right text-black text-xl">강우량대비RDII : </span> + <span className="w-[30px] inline-block text-right text-black text-xl font-bold"> {totalVolume}</span> + <span className="ml-2 text-black"> m³/mm</span> </div> </div> </div> {/* 차트 */} <div className="h-[90%] bg-white text-2xl"> - <MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={chartData} chartTitle={'관로유량'} + <MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={chartData} chartTitle={'RDII 그래프'} yFieldText2="시간" yFieldText="유량(m³/h)" /> </div> </div> @@ -242,7 +244,7 @@ const RdiiChart = ({ pplMngNo }: ModalOpenProp) => { 닫기 </button> <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={rdiiRsltChart}> - 분석결과 도표 + 선택조건 적용 </button> </div> </div>)} @@ -257,7 +259,7 @@ const RdiiChart = ({ pplMngNo }: ModalOpenProp) => { headerTitle="" bodyClass={` min-h-[50vh] - w-[50vw] + w-[55vw] max-w-none max-h-none overflow-visible diff --git a/apps/sn/app/(map-layout)/map/components/searchModalReportApi.ts b/apps/sn/app/(map-layout)/map/components/searchModalReportApi.ts index 9d1ae43e0..8cb349056 100644 --- a/apps/sn/app/(map-layout)/map/components/searchModalReportApi.ts +++ b/apps/sn/app/(map-layout)/map/components/searchModalReportApi.ts @@ -110,7 +110,8 @@ export const addFileName = async (data:FlattenedFolder[]) => { data.map(async (item) => { const filenameArr:ReportDataFile[] = await getDcFile(String(item.clsfSystmSn)); const f = filenameArr[0]; - const result = {...item, fileName:f?.fileTitle, regDate:f?.regDt, fileSn:f?.fileSn, filePath:""}; + //console.log("clsfSystmSn:", item.clsfSystmSn, "f:", f); + const result = {...item, fileName:f?.fileTitle, regDate:f?.regDt, fileSn:f?.fileSn, filePath:f?.filePath}; // if (f !== undefined && f.fileSn !== "") { // const fprcs = await getDcFileprcs(f?.fileSn); // if (fprcs.length>0) @@ -149,11 +150,12 @@ export const fileDownload = (data:Blob, fileName:string) => { // Blob데이터 link.remove(); window.URL.revokeObjectURL(url); } -export const getFileDownload = async (fileSn:string, fileName:string) => { - const fileprcsData = await getDcFileprcs(fileSn); // filePath 조회 - if (fileprcsData?.length === 0 ) { alert("filePath 조회 오류"); } - if (fileprcsData[0].filePath === "") alert("filePath 정보 없으므로 다운로드 불가"); - const blobData = await getDcFileDownload(fileprcsData[0].filePath); // 실제 다운로드 API +export const getFileDownload = async (fileSn:string, fileName:string, filePath:string) => { + //const fileprcsData = await getDcFileprcs(fileSn); // filePath 조회 + //if (fileprcsData?.length === 0 ) { alert("filePath 조회 오류"); } + //if (fileprcsData[0].filePath === "") alert("filePath 정보 없으므로 다운로드 불가"); + if (filePath === "") alert("filePath 정보 없으므로 다운로드 불가:filesn"+ fileSn); + const blobData = await getDcFileDownload(filePath); // 실제 다운로드 API fileDownload(blobData, fileName); } // 시도 데이터 diff --git a/apps/sn/app/(map-layout)/map/featureClickEventPopup.tsx b/apps/sn/app/(map-layout)/map/featureClickEventPopup.tsx index c0fe5c86e..3e8229310 100644 --- a/apps/sn/app/(map-layout)/map/featureClickEventPopup.tsx +++ b/apps/sn/app/(map-layout)/map/featureClickEventPopup.tsx @@ -6,7 +6,7 @@ import { useGisContext } from "@common/business_components/ui/map/Gis"; import { Button } from "@common/components/ui"; import { useEffect, useRef, useState, useCallback, useMemo } from "react"; import { getLayerContentComponent } from "./components/common"; -import { SwtrmtFcltCol, SwtrmtPrcsZoneCol, untrtSwgRainCol1, untrtSwgRainCol2, MsSwagePplCol, ExclnSewagePumpCol, MsSwageMhlCol, stofcbrCol, MS_SWAGE_MHL_CODES, DRTW_SEWAGE_PUMP_USE_CODES } from "./components/common/table"; +import { SwtrmtFcltCol, SwtrmtFcltCol2, SwtrmtPrcsZoneCol, SwtrmtPrcsZoneCol2, untrtSwgRainCol1, untrtSwgRainCol2, MsSwagePplCol, MsSwagePplCol2, ExclnSewagePumpCol, ExclnSewagePumpCol2, DrtwSewagePumpCol1, DrtwSewagePumpCol2, MsSwageMhlCol, MsSwageMhlCol2, stofcbrCol, stofcbrCol2, MS_SWAGE_MHL_CODES, DRTW_SEWAGE_PUMP_USE_CODES } from "./components/common/table"; import InfilChart from './components/popupComponent/chart/infilChart'; import RdiiChart from './components/popupComponent/chart/rdiiChart'; import { useInfilChartModalStore, useRdiiChartModalStore } from "./components/popupComponent/chartModalStore"; @@ -33,6 +33,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, const { setIsOpen: setIsModalInfil } = useInfilChartModalStore(); const { setIsOpen: setIsModalRdii } = useRdiiChartModalStore(); const [curPage, setCurPage] = useState(1); // 현재 페이지 상태 + const [isClicked, setIsClicked] = useState(true); // 클릭 여부 상태 // 🎯 관로관리번호 추출 const pplMngNo = featureData?.values_?.fclt_mng_no || ""; @@ -66,8 +67,9 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, } }); // console.log("featureLayer.get('lyrTyNm');", featureLayer.get('lyrTyNm')); - // SearchModal 클릭 이벤트와 Gis 클릭 이벤트 구분하기 + // SearchModal 클릭 이벤트 if (featureLayer.get('lyrNm') === null) { + setIsClicked(false); if (featureData.lyrTypeNm === 'tb_il_swage_prcs_fclt') result = '하수처리시설'; else if (featureData.lyrTypeNm === 'tb_ms_swage_prcs_zone') result = '하수처리구역'; else if (featureData.lyrTypeNm === 'tb_ms_stofcbr') result = '우수토실'; @@ -77,15 +79,17 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, const drtwPumpCode = DRTW_SEWAGE_PUMP_USE_CODES.find(code => code.text === '오수펌프장'); console.log('값 비교', featureData.values_.usg_cd.trim(), drtwPumpCode?.val); if (drtwPumpCode && featureData.values_.usg_cd.trim() === drtwPumpCode.val) { - setIsDrtwSewagePump(true); - } else { setIsDrtwSewagePump(false); + } else { + setIsDrtwSewagePump(true); } result = '하수펌프장'; } else if (featureData.lyrTypeNm === 'tb_ms_swage_mhl') result = '하수맨홀'; } else { + // Gis 레이어 클릭 이벤트 + setIsClicked(true); const lyrTyNm = featureLayer.get('lyrTyNm'); if (lyrTyNm === 'tb_il_swage_prcs_fclt') result = '하수처리시설'; else if (lyrTyNm === 'tb_ms_swage_prcs_zone') result = '하수처리구역'; @@ -96,9 +100,9 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, const drtwPumpCode = DRTW_SEWAGE_PUMP_USE_CODES.find(code => code.text === '오수펌프장'); console.log('값 비교', featureData.values_.usg_cd.trim(), drtwPumpCode?.val); if (drtwPumpCode && featureData.values_.usg_cd.trim() === drtwPumpCode.val) { - setIsDrtwSewagePump(true); - } else { setIsDrtwSewagePump(false); + } else { + setIsDrtwSewagePump(true); } result = '하수펌프장'; } @@ -135,15 +139,16 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, // 🎯 기본 데이터 포맷팅 const formattedData = formatDisplayData(data); - if (featureData.values_.fclt_mng_no) setLayerSpecificNm(featureData.values_.fclt_mng_no); - else if (featureData.values_.swtrmt_fclt_cd) setLayerSpecificNm(featureData.values_.swtrmt_fclt_cd); - else setLayerSpecificNm(featureData.values_.manage_no); + if (featureData?.values_?.fclt_mng_no) setLayerSpecificNm(featureData.values_.fclt_mng_no); + else if (featureData?.values_?.swtrmt_fclt_cd) setLayerSpecificNm(featureData.values_.swtrmt_fclt_cd); + else setLayerSpecificNm(featureData?.values_?.manage_no); setFetchData(formattedData); setTableData(formattedData); switch (selectedLayerName) { case '하수관로': - setHeadlist(MsSwagePplCol) + if (isClicked) setHeadlist(MsSwagePplCol) + else setHeadlist(MsSwagePplCol2) setButtonChk(true) // ✅ codeMapper 사용하여 API 결과도 변환 @@ -155,7 +160,8 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, // setTableData(mappedData); break; case '하수맨홀': - setHeadlist(MsSwageMhlCol) + if (isClicked) setHeadlist(MsSwageMhlCol) + else setHeadlist(MsSwageMhlCol2) setButtonChk(true) // ✅ codeMapper 사용하여 API 결과도 변환 @@ -167,10 +173,17 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, // setTableData(mappedData); break; case '하수펌프장': - setHeadlist(ExclnSewagePumpCol) + if (isDrtwSewagePump) { + if (isClicked) setHeadlist(DrtwSewagePumpCol1) + else setHeadlist(DrtwSewagePumpCol2) + } else { + if (isClicked) setHeadlist(ExclnSewagePumpCol) + else setHeadlist(ExclnSewagePumpCol2) + } + setButtonChk(true) - setTableData(codeMapper({ + setTableData(codeMapper({ layerName: selectedLayerName, data: { ...formattedData } })); @@ -178,15 +191,18 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, // setTableData(mappedData); break; case '하수처리시설': - setHeadlist(SwtrmtFcltCol); + if (isClicked) setHeadlist(SwtrmtFcltCol) + else setHeadlist(SwtrmtFcltCol2) setButtonChk(false) break; case '하수처리구역': - setHeadlist(SwtrmtPrcsZoneCol) + if (isClicked) setHeadlist(SwtrmtPrcsZoneCol) + else setHeadlist(SwtrmtPrcsZoneCol2) setButtonChk(false) break; case '우수토실': - setHeadlist(stofcbrCol) + if (isClicked) setHeadlist(stofcbrCol) + else setHeadlist(stofcbrCol2) setButtonChk(true) setIsMainSsc(false) break; @@ -477,7 +493,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, <Modal isModalOpen={isModalOpen} title="자체입력정보 저장" setIsModalOpen={setIsModalOpen} closeModal={handleModalClose} saveModal={handleModalSave}><div className="text-lg">정보를 저장하시겠습니까?</div></Modal> {ContentComponent && <ContentComponent - featureData={tableData} + featureData={fetchData} isMainSsc={isMainSsc} isDrtwSewagePump={isDrtwSewagePump} rainMeasureData={rainMeasureData} diff --git a/apps/sn/app/(map-layout)/map/page.tsx b/apps/sn/app/(map-layout)/map/page.tsx index 36f72a5da..9a1821d19 100644 --- a/apps/sn/app/(map-layout)/map/page.tsx +++ b/apps/sn/app/(map-layout)/map/page.tsx @@ -4,7 +4,7 @@ import Gis, { useGisContext } from "@common/business_components/ui/map/Gis"; import { getData } from "../../components/lib/api"; import { useCallback, useEffect, useRef, useState } from "react"; import GisApp from "@common/business_components/ui/map/lib/gis.core"; -import SearchModal from "./SearchModal"; +import SearchModal from "./searchModal/searchModal"; import FeatureClickEventPopup from "./featureClickEventPopup"; // 타입 정의 추가 @@ -115,22 +115,22 @@ const Map = () => { }; return ( <div className="bg-container"> - <Gis - treeData={treeData} - isSearch={true} - gisMaps={gisMaps} - isMiniMap={false} - searchView={SearchModal} - detailView={FeatureClickEventPopup} - onFeatureSelect={onFeatureSelect} - setIsOpen={setIsOpen} - setFeatureData={setFeatureData} - featureData={featureData} - setIsSearchModalOpen={setIsSearchModalOpen} - isOpen={isOpen} - isSearchModalOpen={isSearchModalOpen} - onCheckedLayersChange={undefined} - /> + <Gis + treeData={treeData} + isSearch={true} + gisMaps={gisMaps} + isMiniMap={false} + searchView={SearchModal} + detailView={FeatureClickEventPopup} + onFeatureSelect={onFeatureSelect} + setIsOpen={setIsOpen} + setFeatureData={setFeatureData} + featureData={featureData} + setIsSearchModalOpen={setIsSearchModalOpen} + isOpen={isOpen} + isSearchModalOpen={isSearchModalOpen} + onCheckedLayersChange={undefined} + /> </div> ); }; diff --git a/apps/sn/app/(map-layout)/map/SearchModal.tsx b/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx similarity index 67% rename from apps/sn/app/(map-layout)/map/SearchModal.tsx rename to apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx index e893fc036..9e23cf3cf 100644 --- a/apps/sn/app/(map-layout)/map/SearchModal.tsx +++ b/apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx @@ -1,18 +1,18 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useMemo } from 'react'; import axios from 'axios'; -import { UiModal, UiTable, DatePickerRange, SelectBox } from '@common/business_components/ui'; +import { UiModal, UiTable, DatePickerRange, SelectBox, UITab } from '@common/business_components/ui'; import { Button, Input, Label } from '@common/components'; -import { UiTable2 } from '@common/business_components/ui/table/index-2'; -import { UITab2 } from '@common/business_components/ui/tab/index-2'; import { SelectBox2 } from '@common/business_components/ui/select/index-2'; import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox'; import { SidoSigunguSelectBox } from '@/components/ui/SidoSigunguSelectBox'; -import { MsSwagePplCol2, SwtrmtFcltCol2, SwtrmtPrcsZoneCol2, MsSwageMhlCol2, ExclnSewagePumpCol2, stofcbrCol2 } from './components/common/table'; +import { MsSwagePplCol2, SwtrmtFcltCol2, SwtrmtPrcsZoneCol2, MsSwageMhlCol2, ExclnSewagePumpCol2, stofcbrCol2 } from '../components/common/table'; import LoadingOverlay from '@/components/ui/LoadingBar'; //import { useDcTree, flattenFolders, useSggCd, useCityCd } from './components/searchModalReportApi'; -import { useDcTree, flattenFolders, useSggCd, useCityCd, addFileName, getFileDownload } from './components/searchModalReportApi'; -import { useCityCdStore, type SelectDataType } from './commonStore'; -import { MS_SWAGE_PPL_USE_CODES, MS_SWAGE_PPL_CODES, MS_SWAGE_MHL_USE_CODES } from '../map/components/common/table'; +import { useDcTree, flattenFolders, useSggCd, useCityCd, addFileName, getFileDownload } from '../components/searchModalReportApi'; +import { useCityCdStore, type SelectDataType } from '../commonStore'; +import { MS_SWAGE_PPL_USE_CODES, MS_SWAGE_PPL_CODES, MS_SWAGE_MHL_USE_CODES } from '../components/common/table'; +// import { useBizByFcltStore } from "../../../store/StoreProvider"; +import { getData } from "@/components/lib/api"; const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}`; @@ -40,16 +40,44 @@ const WORK_TYPES = [ { val: "inspection", text: "점검 및 진단" }, ]; -const YEARS = Array.from({ length: 100 }, (_, i) => `${2025 - i}`); - -// 운영정보 +// 운영정보 - 사업 현황 const operationTableHeadlist = [ - { id: "no", title: "NO" }, - { id: "manageNumber", title: "관리번호" }, - { id: "diagnosisYear", title: "진단년도" }, - { id: "null1", title: "..." }, - { id: "null2", title: "..." }, - { id: "installationLocation", title: "매설위치" }, + { id: "bizNm", title: "사업명" }, + { id: "flfmtBgngYmd", title: "수행시작일자" }, + { id: "flfmtEndYmd", title: "수행종료일자" }, + { id: "flfmtYr", title: "수행년도" }, + { id: "bizTyCd", title: "사업유형" }, + { id: "bizAmt", title: "사업금액" }, +]; +// 운영정보 - 보수 및 갱신 결과표 +const operationMaintenanceTableHeadlist = [ + { id: "fcltMngNo", title: "관리번호" }, + { id: "usgCd", title: "용도" }, + { id: "mqltCd", title: "재질" }, + { id: "pdmt", title: "관경(mm)" }, + { id: "prlg", title: "연장(m)" }, + { id: "instlYmd", title: "설치일자" }, + // { id: "instlYmd", title: "사업구분" }, +]; +// 운영정보 - 청소 및 준설 결과표 +const operationCleaningTableHeadlist = [ + { id: "fcltMngNo", title: "관리번호" }, + { id: "usgCd", title: "용도" }, + { id: "mqltCd", title: "재질" }, + { id: "pdmt", title: "관경(mm)" }, + { id: "prlg", title: "연장(m)" }, + { id: "instlYmd", title: "설치일자" }, +]; +// 운영정보 - 점검 및 진단 결과표 +const operationInspectionTableHeadlist = [ + { id: "fcltMngNo", title: "관리번호" }, + { id: "usgCd", title: "용도" }, + { id: "mqltCd", title: "재질" }, + { id: "pdmt", title: "관경(mm)" }, + { id: "prlg", title: "연장(m)" }, + { id: "instlYmd", title: "설치일자" }, + { id: "strct_stat_grd", title: "구조적 상태등급" }, + { id: "oper_stat_grd", title: "운영적 상태등급" }, ]; // 하수도정비 기본계획 보고서 const reportTableHeadlist = [ @@ -89,12 +117,14 @@ const SearchModal: React.FC<SearchModalProps> = ({ onFeatureSelect, }) => { const [activeTab, setActiveTab] = useState(TABS[0]?.val ?? "basic"); + const [basicType, setBasicType] = useState(BASIC_TYPES[0]?.val ?? ""); const [workType, setWorkType] = useState(WORK_TYPES[0]?.val ?? ""); const [showTable, setShowTable] = useState(false); const [tableData, setTableData] = useState<any[]>([]); + const [detailTableData, setDetailTableData] = useState<any[]>([]); const [tableCount, setTableCount] = useState<number>(0); + const [detailTableCount, setDetailTableCount] = useState<number>(0); const [curPage, setCurPage] = useState(1); - const [basicType, setBasicType] = useState(BASIC_TYPES[0]?.val ?? ""); const [시도, set시도] = useState(0); const [시군구, set시군구] = useState(0); const [ctpvCd, setCtpvCd] = useState('0'); @@ -121,9 +151,11 @@ const SearchModal: React.FC<SearchModalProps> = ({ const [가동개시_종료_월, set가동개시_종료_월] = useState(''); const [가동개시_시작_일, set가동개시_시작_일] = useState(''); const [가동개시_종료_일, set가동개시_종료_일] = useState(''); - const [fromDate, setFromDate] = useState(() => { const date = new Date(); date.setDate(date.getDate() - 7); return date }) + // const [fromDate, setFromDate] = useState(() => { const date = new Date(); date.setDate(date.getDate() - 7); return date }) const [toDate, setToDate] = useState(new Date()) const [filteredSiguns, setFilteredSiguns] = useState<SelectDataType[]>([{ val: '0', text: '전체', sido: '0' }]); + // const [dynamicHeadlist, setDynamicHeadlist] = useState<{ id: string, title: string }[]>([]); + // const [dynamicHeadlist2, setDynamicHeadlist2] = useState<{ id: string, title: string }[]>([]); // 로딩바 const [isLoading, setIsLoading] = useState(false); @@ -138,31 +170,61 @@ const SearchModal: React.FC<SearchModalProps> = ({ const todayMonth = (today.getMonth() + 1).toString().padStart(2, "0"); const todayDate = today.getDate().toString().padStart(2, "0"); - const isDateInRanges = (date: Date) => { - const standYear = parseInt(fromDate.getFullYear().toString()); - const dateRanges = []; - dateRanges.push({ - start: new Date(standYear, 0, 1), - end: new Date(standYear, 11, 31) - }); + // const isDateInRanges = (date: Date) => { + // const standYear = parseInt(fromDate.getFullYear().toString()); + // const dateRanges = []; + // dateRanges.push({ + // start: new Date(standYear, 0, 1), + // end: new Date(standYear, 11, 31) + // }); - return dateRanges.some(range => { - const start = new Date(range.start); - const end = new Date(range.end); - return date >= start && date <= end; - }); - }; + // return dateRanges.some(range => { + // const start = new Date(range.start); + // const end = new Date(range.end); + // return date >= start && date <= end; + // }); + // }; - // UiTable2에 넘길 headlist를 BASIC_TYPES 값에 따라 분기 처리 - let dynamicHeadlist = MsSwagePplCol2; // default 값 - if (activeTab === 'operation') dynamicHeadlist = operationTableHeadlist; // 운영정보 - else if (activeTab === 'report') dynamicHeadlist = reportTableHeadlist; // 하수도정비기본계획보고서 - else if (basicType === 'tb_ms_swage_ppl') dynamicHeadlist = MsSwagePplCol2; // 하수관로 - else if (basicType === 'tb_il_swage_prcs_fclt') dynamicHeadlist = SwtrmtFcltCol2; // 하수처리시설 - else if (basicType === 'tb_ms_swage_prcs_zone') dynamicHeadlist = SwtrmtPrcsZoneCol2; // 하수처리구역 - else if (basicType === 'tb_ms_swage_mhl') dynamicHeadlist = MsSwageMhlCol2; // 하수맨홀 - else if (basicType === 'tb_ms_swage_pmstn') dynamicHeadlist = ExclnSewagePumpCol2; // 하수펌프장 - else if (basicType === 'tb_ms_stofcbr') dynamicHeadlist = stofcbrCol2; // 우수토실 + // const BIZ_TY_CD = useBizByFcltStore(state => state.BIZ_TY_CD); + const BIZ_TY_CD = [ + { lwpoCd: "0", lwpoCdNm: "전체" }, + { lwpoCd: "SV", lwpoCdNm: "용역" }, + { lwpoCd: "SF", lwpoCdNm: "자체" }, + { lwpoCd: "SC", lwpoCdNm: "공사" }, + ]; + console.log('BIZ_TY_CD', BIZ_TY_CD); + + const BIZ_TY_CD_SELECT_ARRAY = BIZ_TY_CD.map(item => ({ + val: item.lwpoCd, + text: item.lwpoCdNm, + })); + + const dynamicHeadlist = useMemo(() => { + if (activeTab === 'basic') { + if (basicType === 'tb_ms_swage_ppl') return MsSwagePplCol2; + if (basicType === 'tb_il_swage_prcs_fclt') return SwtrmtFcltCol2; + if (basicType === 'tb_ms_swage_prcs_zone') return SwtrmtPrcsZoneCol2; + if (basicType === 'tb_ms_swage_mhl') return MsSwageMhlCol2; + if (basicType === 'tb_ms_swage_pmstn') return ExclnSewagePumpCol2; + if (basicType === 'tb_ms_stofcbr') return stofcbrCol2; + + return []; + } + if (activeTab === 'operation') return operationTableHeadlist; + if (activeTab === 'report') return reportTableHeadlist; + + return []; + }, [activeTab, basicType, workType]); + + const dynamicHeadlist2 = useMemo(() => { + if (activeTab === 'operation') { + if (workType === 'maintenance') return operationMaintenanceTableHeadlist; + if (workType === 'cleaning') return operationCleaningTableHeadlist; + if (workType === 'inspection') return operationInspectionTableHeadlist; + } + + return []; + }, [activeTab, workType]); // 조회 버튼 클릭 시 1페이지로 이동하도록 수정 @@ -172,20 +234,33 @@ const SearchModal: React.FC<SearchModalProps> = ({ setShowTable(true); }; - // cellClick 함수 타입 지정 - const handleCellClick = (index?: number) => { + // 기본정보 테이블 cellClick 핸들러 + const handleBasicCellClick = (index?: number | undefined, headId?: String) => { if (typeof index === "number") { onFeatureSelect(tableData[index % 10]); // 10은 page size 하드 코딩한 숫자 onOpenChange(false); // SearchModal 닫기 } }; - // 하수도정비기본계획.table cellClick - const handleReportCellClick = (index: number) => { + // 운영정보 테이블 cellClick 핸들러 + const handleOperationCellClick = async (index?: number | undefined, headId?: String) => { + if (typeof index === "number") { + const res = await getData(`v1/bizInfo/fclts?bizId=${tableData[index % 5].bizId}`); + console.log('운영정보 cellClick 데이터:', res); + console.log('운영정보 length:', res.data.length); + setDetailTableData(res.data || []); + setDetailTableCount(res.count || 0); + } + }; + // 하수도정비기본계획 테이블 cellClick 핸들러 + const handleReportCellClick = (index: number | undefined, headId?: String) => { console.log(index); - const reportData = tableData[index]; - const fileName = reportData.fileName; - if (reportData.fileSn !== "") { - getFileDownload(reportData.fileSn, fileName); + if (typeof index === "number" && tableData[index]) { + const reportData = tableData[index]; + const fileName = reportData.fileName; + const filePath = reportData.filePath; + if (reportData.fileSn !== "") { + getFileDownload(reportData.fileSn, fileName, filePath); + } } }; @@ -204,7 +279,6 @@ const SearchModal: React.FC<SearchModalProps> = ({ useEffect(() => { // filterParams 초기화 - // setFilterParams({}); set시작1(""); set시작2(""); set종료1(""); @@ -224,7 +298,6 @@ const SearchModal: React.FC<SearchModalProps> = ({ setYearFilter({ 시작: "", 종료: "", - // 경과년도: "", }); setShowTable(false); setTableCount(0); @@ -232,6 +305,16 @@ const SearchModal: React.FC<SearchModalProps> = ({ // queryParams는 fetchFilteredData 내에서 매번 새로 생성되므로 별도 상태 초기화는 필요 없음 }, [activeTab, basicType, open]); + useEffect(() => { + setActiveTab(TABS[0]?.val ?? "basic"); + setBasicType(BASIC_TYPES[0]?.val ?? ""); + setWorkType(WORK_TYPES[0]?.val ?? ""); + setTableCount(0); + setTableData([]); + setDetailTableCount(0); + setDetailTableData([]); + }, [open]); + // 페이지 변경 시마다 데이터 fetch useEffect(() => { // showTable이 true일 때만 fetch (최초 렌더 방지) @@ -246,31 +329,66 @@ const SearchModal: React.FC<SearchModalProps> = ({ const fetchFilteredData = async () => { setIsLoading(true); // 로딩 시작 try { - const queryParams = new URLSearchParams({ - lyrTypeNm: basicType, - page: `${curPage - 1}`, - size: '10', - sort: 'string', - }); - console.log('basicType', basicType); - let cqlFilters: string[] = []; if (activeTab === 'basic') { + const queryParams = new URLSearchParams({ + lyrTypeNm: basicType, + page: `${curPage - 1}`, + size: '10', + sort: 'string', + }); + console.log('basicType', basicType); + if (basicType === 'tb_ms_swage_prcs_zone') cqlFilters = zoneCqlFilters(); // 하수처리구역 else if (basicType === 'tb_il_swage_prcs_fclt') cqlFilters = facilityCqlFilters(); // 하수처리시설 else if (basicType === 'tb_ms_swage_ppl') cqlFilters = pplCqlFilters(); // 하수관로 else if (basicType === 'tb_ms_swage_mhl') cqlFilters = mhCqlFilters(); // 하수맨홀 else if (basicType === 'tb_ms_swage_pmstn') cqlFilters = psmtnCqlFilters(); // 하수펌프장 else if (basicType === 'tb_ms_stofcbr') cqlFilters = otflCqlFilters(); // 우수토실 + + if (cqlFilters.length > 0) queryParams.append('cqlFiter', cqlFilters.join(' and ')); + + console.log('API URL:', `${API_URL}/v1/fclts?${queryParams.toString()}`); + const res = await axios.get(`${API_URL}/v1/fclts?${queryParams.toString()}`); + console.log('필터링된 API 결과(개수):', res.data.count); + console.log('필터링된 API 결과(데이터):', res.data.data); + setTableData(res.data.data || []); + setTableCount(res.data.count || []); + console.log('tableCount 상태 업데이트 후:', res.data.count); // tableCount 로그 추가 + } else if (activeTab === 'operation') { - cqlFilters = zoneCqlFilters(); - } else { - cqlFilters = reportCqlFilters(); - } + const RequestDTO: Record<string, string> = { + page: `${curPage - 1}`, + size: '5', + }; + if (변수1) RequestDTO.bizNm = 변수1; + if (변수2) RequestDTO.bizTyCd = 변수2; + // 수행기간 범위 + const startDate = getDateString( + yearFilter.시작, + 가동개시_시작_월, + 가동개시_시작_일, + "19000101", + ); + const endDate = getDateString( + yearFilter.종료, + 가동개시_종료_월, + 가동개시_종료_일, + `${todayYear}${todayMonth}${todayDate}`, + ); + RequestDTO.fromflfmtEndYmd = startDate; + RequestDTO.toflfmtEndYmd = endDate; - if (cqlFilters.length > 0) queryParams.append('cqlFiter', cqlFilters.join(' and ')); + const params = new URLSearchParams(RequestDTO).toString(); - if (activeTab === 'report') { + console.log('API URL:', `/v1/bizInfo?${params}`); + const res = await getData(`v1/bizInfo?${params}`); + console.log('필터링된 API 결과(개수):', res.totalElements); + console.log('필터링된 API 결과(데이터):', res.content); + setTableData(res.content || []); + setTableCount(res.totalElements || 0); + + } else if (activeTab === 'report') { //const reportOriginData = await getDcTree('경기도'); const reportData = flattenFolders(reportOriginData); let filterReportData = reportData; @@ -304,14 +422,6 @@ const SearchModal: React.FC<SearchModalProps> = ({ setTableData(filterReportData || []); }); setTableData(filterReportData || []); - } else { - console.log('API URL:', `${API_URL}/v1/fclts?${queryParams.toString()}`); - const res = await axios.get(`${API_URL}/v1/fclts?${queryParams.toString()}`); - console.log('필터링된 API 결과(개수):', res.data.count); - console.log('필터링된 API 결과(데이터):', res.data.data); - setTableData(res.data.data || []); - setTableCount(res.data.count || []); - console.log('tableCount 상태 업데이트 후:', res.data.count); // tableCount 로그 추가 } setShowTable(true); @@ -330,7 +440,6 @@ const SearchModal: React.FC<SearchModalProps> = ({ if (변수1) cqlFilters.push(`usg_cd='${변수1}'`); if (변수2) cqlFilters.push(`mqlt_cd='${변수2}'`); if (변수3) cqlFilters.push(`pbadms_emd_cd='${변수3}'`); - // if (변수4) cqlFilters.push(`경과년도='${변수4}'`); // 설치년도 범위 const startDate = getDateString( yearFilter.시작, @@ -358,7 +467,6 @@ const SearchModal: React.FC<SearchModalProps> = ({ return cqlFilters; }; - // 하수처리시설용 CQL 필터 생성 const facilityCqlFilters = () => { const cqlFilters: string[] = []; @@ -392,7 +500,6 @@ const SearchModal: React.FC<SearchModalProps> = ({ if (변수1) cqlFilters.push(`swtrmt_fclt_nm ILIKE '%${변수1}%'`); return cqlFilters; }; - // 하수처리구역용 CQL 필터 생성 const zoneCqlFilters = () => { const cqlFilters: string[] = []; @@ -402,7 +509,6 @@ const SearchModal: React.FC<SearchModalProps> = ({ if (변수2) cqlFilters.push(`swtrmt_fclt_nm ILIKE '%${변수2}%'`); return cqlFilters; }; - // 하수맨홀용 CQL 필터 생성 const mhCqlFilters = () => { const cqlFilters: string[] = []; @@ -430,7 +536,6 @@ const SearchModal: React.FC<SearchModalProps> = ({ return cqlFilters; }; - // 하수펌프장용 CQL 필터 생성 const psmtnCqlFilters = () => { const cqlFilters: string[] = []; @@ -450,7 +555,6 @@ const SearchModal: React.FC<SearchModalProps> = ({ cqlFilters.push( `instl_ymd >= '${startDate}' and instl_ymd <= '${endDate}'`, ); - // if (변수1) cqlFilters.push(`경과년도='${변수1}'`); // 일일처리용량 범위 if (시작1 && 종료1) cqlFilters.push(`daily_prcs_cpct BETWEEN ${시작1} AND ${종료1}`); @@ -464,7 +568,6 @@ const SearchModal: React.FC<SearchModalProps> = ({ return cqlFilters; }; - // 우수토실용 CQL 필터 생성 const otflCqlFilters = () => { const cqlFilters: string[] = []; @@ -484,45 +587,6 @@ const SearchModal: React.FC<SearchModalProps> = ({ cqlFilters.push( `instl_ymd >= '${startDate}' and instl_ymd <= '${endDate}'`, ); - // if (변수1) cqlFilters.push(`경과년도='${변수1}'`); - // if (변수2) cqlFilters.push(`하천명 ILIKE '%${변수1}%'`); - // 계획방류량 범위 - // if (시작1 && 종료1) - // cqlFilters.push(`계획방류량 BETWEEN ${시작1} AND ${종료1}`); - // else if (시작1) cqlFilters.push(`계획방류량 >= ${시작1}`); - // else if (종료1) cqlFilters.push(`계획방류량 <= ${종료1}`); - - return cqlFilters; - }; - - // 운영정보용 CQL 필터 생성 - const operationCqlFilters = () => { - const cqlFilters: string[] = []; - // 설치년도 범위 - const startDate = getDateString( - yearFilter.시작, - 가동개시_시작_월, - 가동개시_시작_일, - "19000101", - ); - const endDate = getDateString( - yearFilter.종료, - 가동개시_종료_월, - 가동개시_종료_일, - `${todayYear}${todayMonth}${todayDate}`, - ); - cqlFilters.push( - `설치시작년도 >= '${startDate}' and 설치시작년도 <= '${endDate}'`, - ); - return cqlFilters; - }; - - // 하수도정비기본계획보고서용 CQL 필터 생성 - const reportCqlFilters = () => { - const cqlFilters: string[] = []; - // 설치년도 범위 - if (ctpvCd) cqlFilters.push(`ctpv_cd='${ctpvCd}'`); - if (sigungu) cqlFilters.push(`sgg_cd='${sigungu}'`); return cqlFilters; }; @@ -530,18 +594,18 @@ const SearchModal: React.FC<SearchModalProps> = ({ const renderBody = () => ( <> {/* 탭 영역 */} - <UITab2 + <UITab defaultValue={TABS[0]?.val} tabList={TABS.map((tab) => ({ value: tab.val, - label: tab.text, - onClick: () => setActiveTab(tab.val), + label: tab.text }))} + onValueChange={(value: string) => setActiveTab(value)} > {/* 각각의 탭 영역 */} {/* 기본정보 탭 */} {activeTab === 'basic' && ( - <div className="relative border rounded-lg p-6 mt-4 w-full h-[23vh]"> + <div className="relative border rounded-lg p-6 mt-4 w-full h-[10vh]"> {/* 구분 */} <div className="mb-3 flex items-center justify-between gap-4"> <div className="flex items-center"> @@ -575,26 +639,9 @@ const SearchModal: React.FC<SearchModalProps> = ({ startLabel="설치년도" endLabel="" /> - - {/* 경과년도 */} - {/* <div className="flex items-center"> - <Label className="mr-2 w-auto text-xl text-gray-600"> - 경과년도 - </Label> - <Input - className='!text-xl w-[70px] placeholder:text-center mr-8' - placeholder="입력" - value={yearFilter.경과년도} - onChange={(e) => { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ""); - setYearFilter({ ...yearFilter, 경과년도: val }); - }} - /> - </div> */} {/* 용도 */} <SelectBox2 - className="w-60 mr-8 z-[102]" + className="ml-8 w-60 mr-8 z-[102]" selectClass="rounded-lg bg-white text-xl" label="용도" selectArray={MS_SWAGE_PPL_USE_CODES} @@ -614,28 +661,12 @@ const SearchModal: React.FC<SearchModalProps> = ({ set변수2(String(val)); }} /> - </div> - <div className="flex items-center mb-2"> - {/* 행정읍면동코드 */} - {/* <Label className="mr-2 w-auto text-xl text-gray-600"> - 행정읍면동코드 - </Label> - <Input - className="mr-8 w-[100px] !text-xl placeholder:text-center" - placeholder="입력" - value={변수3} - onChange={(e) => { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ""); - set변수3(val); - }} - /> */} {/* 관경 */} <Label className="mr-2 w-auto text-xl text-gray-600"> 관경(mm) </Label> <Input - className="w-[100px] !text-xl placeholder:text-center" + className="w-[60px] !text-xl placeholder:text-center" placeholder="입력" value={시작1} onChange={(e) => { @@ -646,7 +677,7 @@ const SearchModal: React.FC<SearchModalProps> = ({ /> <span className="mx-2 text-xl font-semibold">~</span> <Input - className="mr-8 w-[100px] !text-xl placeholder:text-center" + className="mr-8 w-[60px] !text-xl placeholder:text-center" placeholder="입력" value={종료1} onChange={(e) => { @@ -660,7 +691,7 @@ const SearchModal: React.FC<SearchModalProps> = ({ 연장(m) </Label> <Input - className="w-[100px] !text-xl placeholder:text-center" + className="w-[60px] !text-xl placeholder:text-center" placeholder="입력" value={시작2} onChange={(e) => { @@ -671,7 +702,7 @@ const SearchModal: React.FC<SearchModalProps> = ({ /> <span className="mx-2 text-xl font-semibold">~</span> <Input - className="mr-8 w-[100px] !text-xl placeholder:text-center" + className="mr-8 w-[60px] !text-xl placeholder:text-center" placeholder="입력" value={종료2} onChange={(e) => { @@ -680,12 +711,16 @@ const SearchModal: React.FC<SearchModalProps> = ({ set종료2(val); }} /> + {/* 조회 버튼 */} + <div className="flex-1 flex justify-end"> + <Button className="text-base py-2" onClick={handleSearch}>조회</Button> + </div> </div> </div> )} {/* 분기처리: 하수처리시설 */} {basicType === "tb_il_swage_prcs_fclt" && ( - <div className="mb-6"> + <div className="mb-3"> {/* 가동개시일자 */} <div className="mb-2 flex items-center"> <YearRangeSelectBox @@ -699,14 +734,12 @@ const SearchModal: React.FC<SearchModalProps> = ({ }) } startLabel="가동개시일자" - endLabel=" " + endLabel="" /> {/* 시설용량 */} - <Label className="mr-2 w-auto text-xl text-gray-600"> - 시설용량(㎥/d) - </Label> + <Label className="ml-8 mr-2 w-auto text-xl text-gray-600">시설용량(㎥/d)</Label> <Input - className="w-[100px] !text-xl placeholder:text-center" + className="w-[60px] !text-xl placeholder:text-center" placeholder="입력" value={시작1} onChange={(e) => { @@ -717,7 +750,7 @@ const SearchModal: React.FC<SearchModalProps> = ({ /> <span className="mx-2 text-xl font-semibold">~</span> <Input - className="mr-8 w-[100px] !text-xl placeholder:text-center" + className="mr-8 w-[60px] !text-xl placeholder:text-center" placeholder="입력" value={종료1} onChange={(e) => { @@ -726,14 +759,10 @@ const SearchModal: React.FC<SearchModalProps> = ({ set종료1(val); }} /> - </div> - <div className="mb-2 flex items-center"> {/* 처리구역 면적 */} - <Label className="mr-2 w-auto text-xl text-gray-600"> - 처리구역 면적(m²) - </Label> + <Label className="mr-2 w-auto text-xl text-gray-600">처리구역 면적(m²)</Label> <Input - className="w-[100px] !text-xl placeholder:text-center" + className="w-[60px] !text-xl placeholder:text-center" placeholder="입력" value={시작2} onChange={(e) => { @@ -744,7 +773,7 @@ const SearchModal: React.FC<SearchModalProps> = ({ /> <span className="mx-2 text-xl font-semibold">~</span> <Input - className="mr-8 w-[100px] !text-xl placeholder:text-center" + className="mr-8 w-[60px] !text-xl placeholder:text-center" placeholder="입력" value={종료2} onChange={(e) => { @@ -754,9 +783,7 @@ const SearchModal: React.FC<SearchModalProps> = ({ }} /> {/* 하수처리시설명 */} - <Label className="mr-2 w-auto text-xl text-gray-600"> - 하수처리시설명 - </Label> + <Label className="mr-2 w-auto text-xl text-gray-600">하수처리시설명</Label> <Input className="mr-8 w-[100px] !text-xl placeholder:text-center" placeholder="입력" @@ -765,6 +792,10 @@ const SearchModal: React.FC<SearchModalProps> = ({ set변수1(e.target.value); }} /> + {/* 조회 버튼 */} + <div className="flex-1 flex justify-end"> + <Button className="text-base py-2" onClick={handleSearch}>조회</Button> + </div> </div> </div> )} @@ -803,6 +834,10 @@ const SearchModal: React.FC<SearchModalProps> = ({ set변수2(e.target.value); }} /> + {/* 조회 버튼 */} + <div className="flex-1 flex justify-end"> + <Button className="text-base py-2" onClick={handleSearch}>조회</Button> + </div> </div> </div> )} @@ -824,23 +859,9 @@ const SearchModal: React.FC<SearchModalProps> = ({ startLabel="설치년도" endLabel="" /> - {/* 경과년도 */} - {/* <Label className="mr-2 w-auto text-xl text-gray-600"> - 경과년도 - </Label> - <Input - className="mr-8 w-[100px] !text-xl placeholder:text-center" - placeholder="입력" - value={yearFilter.경과년도} - onChange={(e) => { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ""); - setYearFilter({ ...yearFilter, 경과년도: val }); - }} - /> */} {/* 용도 */} <SelectBox2 - className="w-60 mr-8 z-[102]" + className="ml-8 w-60 mr-8 z-[102]" selectClass="rounded-lg bg-white text-xl" label="용도" selectArray={MS_SWAGE_MHL_USE_CODES} @@ -874,6 +895,10 @@ const SearchModal: React.FC<SearchModalProps> = ({ set종료1(val); }} /> + {/* 조회 버튼 */} + <div className="flex-1 flex justify-end"> + <Button className="text-base py-2" onClick={handleSearch}>조회</Button> + </div> </div> </div> )} @@ -889,20 +914,8 @@ const SearchModal: React.FC<SearchModalProps> = ({ startLabel="설치년도" endLabel="" /> - {/* 경과년도 */} - {/* <Label className="w-auto text-xl text-gray-600 mr-2">경과년도</Label> - <Input - className='!text-xl w-[100px] placeholder:text-center mr-8' - placeholder="입력" - value={yearFilter.경과년도} - onChange={(e) => { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - setYearFilter({ ...yearFilter, 경과년도: val }); - }} - /> */} {/* 일일처리용량 - 오수맨홀 */} - <Label className="mr-2 w-auto text-xl text-gray-600"> + <Label className="ml-8 mr-2 w-auto text-xl text-gray-600"> 일일처리용량(㎥) </Label> <Input @@ -951,6 +964,10 @@ const SearchModal: React.FC<SearchModalProps> = ({ set종료2(val); }} /> + {/* 조회 버튼 */} + <div className="flex-1 flex justify-end"> + <Button className="text-base py-2" onClick={handleSearch}>조회</Button> + </div> </div> </div> )} @@ -966,69 +983,19 @@ const SearchModal: React.FC<SearchModalProps> = ({ startLabel="설치년도" endLabel="" /> - {/* 경과년도 */} - {/* <Label className="w-auto text-xl text-gray-600 mr-2">경과년도</Label> - <Input - className='!text-xl w-[100px] placeholder:text-center mr-8' - placeholder="입력" - value={yearFilter.경과년도} - onChange={(e) => { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - setYearFilter({ ...yearFilter, 경과년도: val }); - }} - /> */} - {/* 하천명 */} - {/* <Label className="mr-2 w-auto text-xl text-gray-600"> - 하천명 - </Label> - <Input - className="mr-8 w-[100px] !text-xl placeholder:text-center" - placeholder="입력" - value={변수1} - onChange={(e) => { - set변수1(e.target.value); - }} - /> */} - {/* 계획방류량 */} - {/* <Label className="mr-2 w-auto text-xl text-gray-600"> - 계획방류량 - </Label> - <Input - className="w-[100px] !text-xl placeholder:text-center" - placeholder="입력" - value={시작1} - onChange={(e) => { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ""); - set시작1(val); - }} - /> - <span className="mx-2 text-xl font-semibold">~</span> - <Input - className="mr-8 w-[100px] !text-xl placeholder:text-center" - placeholder="입력" - value={종료1} - onChange={(e) => { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ""); - set종료1(val); - }} - /> */} + {/* 조회 버튼 */} + <div className="flex-1 flex justify-end"> + <Button className="text-base py-2" onClick={handleSearch}>조회</Button> + </div> </div> </div> )} - - {/* 조회 버튼 중앙 정렬 */} - <div className="absolute bottom-4 right-4 mr-2"> - <Button className="text-base py-2" onClick={handleSearch}>조회</Button> - </div> </div> )} {/* 운영정보 탭 */} {activeTab === 'operation' && ( - <div className="relative flex flex-col border rounded-lg p-6 mt-4 w-full h-[23vh]"> - <div className="flex items-center mb-6"> + <div className="relative flex flex-col border rounded-lg p-6 mt-4 w-full h-[10vh]"> + <div className="flex items-center mb-3"> <SelectBox2 className="w-60 mr-8" selectClass="rounded-lg bg-white text-xl" @@ -1040,50 +1007,48 @@ const SearchModal: React.FC<SearchModalProps> = ({ onSelectValue={(val) => setWorkType(String(val))} value={workType} /> - - {/* 수행기간 */} - {/* <YearRangeSelectBox + </div> + <div className="flex items-center mb-6"> + <Label className="mr-2 w-auto text-xl text-gray-600">사업명</Label> + <Input + className="w-[100px] !text-xl placeholder:text-center mr-4" + placeholder="입력" + value={변수1} + onChange={(e) => { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ""); + set변수1(val); + }} + /> + <YearRangeSelectBox start={yearFilter.시작} end={yearFilter.종료} - onChange={(range) => - setYearFilter({ - ...yearFilter, - 시작: range.start, - 종료: range.end, - }) - } + onChange={range => setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })} startLabel="수행기간" endLabel="" - /> */} - <DatePickerRange - mode="single" //고정 - selected={fromDate} // 처음에 선택할 날짜 - 타입은 date타입 - onSelect={(date: Date | undefined) => { if (date) setFromDate(date) }} // 선택했을 때 이벤트 (주로 set) - className="w-full p-1 border rounded bg-white" // 스타일 - disabled={(date) => !isDateInRanges(date)} // 선택못하게 하는 날짜 - 없으면 안넣어도 됨 - defaultMonth={fromDate} // 처음에 시작할 날짜 selected랑 같이 같은 날짜 넣으면 됨 /> - <span className='text-xl m-4'>~</span> - <DatePickerRange - mode="single" //고정 - selected={toDate} // 처음에 선택할 날짜 - 타입은 date타입 - onSelect={(date: Date | undefined) => { if (date) setFromDate(date) }} // 선택했을 때 이벤트 (주로 set) - className="w-full p-1 border rounded bg-white" // 스타일 - disabled={(date) => !isDateInRanges(date)} // 선택못하게 하는 날짜 - 없으면 안넣어도 됨 - defaultMonth={toDate} // 처음에 시작할 날짜 selected랑 같이 같은 날짜 넣으면 됨 + <SelectBox2 + className="ml-8 w-60 mr-8 z-[102]" + selectClass="rounded-lg bg-white text-xl" + label="사업 유형" + selectArray={BIZ_TY_CD_SELECT_ARRAY} + value={변수2} + onSelectValue={(val) => { + set변수2(String(val)); + }} /> - </div> - {/* 조회 버튼 중앙 정렬 */} - <div className="absolute bottom-4 right-4 mr-2"> - <Button className="text-base py-2" onClick={handleSearch}>조회</Button> + {/* 조회 버튼 */} + <div className="flex-1 flex justify-end"> + <Button className="text-base py-2" onClick={handleSearch}>조회</Button> + </div> </div> </div> )} {/* 하수도정비기본계획보고서 탭 */} {activeTab === 'report' && ( - <div className="relative flex flex-col border rounded-lg p-6 mt-4 w-full h-[23vh]"> + <div className="relative flex flex-col border rounded-lg p-6 mt-4 w-full h-[10vh]"> {/* 시도, 시군구, 하수처리구역 한 줄 */} - <div className="mb-6 flex items-center"> + <div className="flex items-center mb-3"> <SelectBox2 className="w-[150px] mr-8" selectClass="rounded-lg bg-white" @@ -1101,72 +1066,104 @@ const SearchModal: React.FC<SearchModalProps> = ({ onSelectValue={val => setSigungu(String(val))} /> </div> - <div className="flex justify-between items-center mb-6"> - <div className="flex items-center gap-4"> - <label className="inline-block w-auto whitespace-nowrap text-xl text-gray-600 mr-2">구분</label> - <Input - className='!text-xl w-[100px] placeholder:text-center mr-8' - placeholder="입력" - value={gubun} - onChange={(e) => { - // 숫자만 입력 허용 - const val = e.target.value; - setGubun(val); - }} - /> - <YearRangeSelectBox - start={yearFilter.시작} - end={yearFilter.종료} - onChange={range => setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })} - startLabel="승인년도" - endLabel="" - /> - </div> - - {/* 조회 버튼 중앙 정렬 */} - <div className="absolute bottom-4 right-4 mr-2"> + <div className="flex items-center mb-6"> + <label className="inline-block w-auto whitespace-nowrap text-xl text-gray-600 mr-2">구분</label> + <Input + className='!text-xl w-[100px] placeholder:text-center mr-8' + placeholder="입력" + value={gubun} + onChange={(e) => { + // 숫자만 입력 허용 + const val = e.target.value; + setGubun(val); + }} + /> + <YearRangeSelectBox + start={yearFilter.시작} + end={yearFilter.종료} + onChange={range => setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })} + startLabel="승인년도" + endLabel="" + /> + {/* 조회 버튼 */} + <div className="flex-1 flex justify-end"> <Button className="text-base py-2" onClick={handleSearch}>조회</Button> </div> </div> </div> )} - </UITab2> + {/* </UITab2> */} + </UITab> {/* 📋 결과 리스트 */} - <div className="h-[60vh] w-full space-y-2 overflow-hidden rounded-lg border"> - {/* 테이블 영역 (가로/세로 스크롤 가능) */} - <div className="flex-1 px-2 pb-2"> - <LoadingOverlay isLoading={isLoading} /> - <UiTable2 - headName={ - (() => { - const label = - activeTab === "basic" - ? BASIC_TYPES.find((type) => type.val === basicType)?.text - : activeTab === "operation" - ? WORK_TYPES.find((type) => type.val === workType)?.text - : activeTab === "report" - ? "하수도정비기본계획보고서" - : TABS.find((tab) => tab.val === activeTab)?.text; - return ( - <> - {label} 조회 결과 ({tableCount})건 - </> - ); + {/* 기본정보 탭, 하수도정비기본계획보고서 탭 */} + {(activeTab === 'basic' || activeTab === 'report') && ( + <div className="h-[80vh] w-full overflow-hidden rounded-lg border"> + {/* 테이블2 영역 (가로/세로 스크롤 가능) */} + <div className="flex-1 px-2 pb-2"> + <LoadingOverlay isLoading={isLoading} /> + <UiTable + headName={(() => { + const label = WORK_TYPES.find((type) => type.val === workType)?.text + return (<>{label} 조회 결과 ({tableCount})건</>); })() - } - tableData={tableData} - headlist={dynamicHeadlist} - pageSize={tableData.length < 10 ? tableData.length : 10} - total={tableCount} - children={undefined} - cellClick={(activeTab !== 'report') ? handleCellClick : handleReportCellClick} - onPageChange={setCurPage} - resetPageNo={false} - cur={curPage} - /> + } + tableData={tableData} + headlist={dynamicHeadlist} + pageSize={10} + total={tableCount} + cellClick={activeTab === 'report' ? handleReportCellClick : handleBasicCellClick} + onPageChange={setCurPage} + resetPageNo={false} + /> + </div> </div> - </div> + )} + {/* 운영정보 탭 */} + {activeTab === 'operation' && ( + <> + <div className="h-[35vh] w-full overflow-hidden rounded-lg border"> + <div className="flex-1 px-2 pb-2"> + <LoadingOverlay isLoading={isLoading} /> + <UiTable + headName={ + (() => { + const label = WORK_TYPES.find((type) => type.val === workType)?.text + return (<>{label} 사업 현황 ({tableCount})건</>); + })() + } + tableData={tableData} + headlist={dynamicHeadlist} + pageSize={5} + total={tableCount} + cellClick={handleOperationCellClick} + onPageChange={setCurPage} + resetPageNo={false} + /> + </div> + </div> + + <div className="h-[35vh] w-full overflow-hidden rounded-lg border"> + <div className="flex-1 px-2 pb-2"> + <LoadingOverlay isLoading={isLoading} /> + <UiTable + headName={(() => { + const label = WORK_TYPES.find((type) => type.val === workType)?.text + return (<>{label} 결과표 ({detailTableCount})건</>); + })() + } + tableData={detailTableData} + headlist={dynamicHeadlist2} + pageSize={5} + total={detailTableCount} + cellClick={undefined} + onPageChange={setCurPage} + resetPageNo={false} + /> + </div> + </div> + </> + )} </> ); diff --git a/apps/sn/app/(with-base-layout)/ii/BaseLayout.tsx b/apps/sn/app/(with-base-layout)/ii/BaseLayout.tsx index 86ae34f46..a1a0e701e 100644 --- a/apps/sn/app/(with-base-layout)/ii/BaseLayout.tsx +++ b/apps/sn/app/(with-base-layout)/ii/BaseLayout.tsx @@ -219,7 +219,7 @@ const BaseLayout = ({ <div className="flex items-center w-full"> {showDatePicker && ( // showDatePicker 값에 따라 DatePicker 렌더링 <> - <Label className="ml-4 w-20 text-xl text-gray-600 whitespace-nowrap">분석기간</Label> + <Label className="ml-4 w-20 text-xl text-gray-600 whitespace-nowrap">상수사용기간</Label> <DateMonthPicker field={{ value: aplcnYmFrom || (() => { // aplcnYm이 없으면 현재 연월을 기본값으로 설정 diff --git a/apps/sn/app/components/lib/api/index.ts b/apps/sn/app/components/lib/api/index.ts index 22a4b276a..8d8b8def7 100644 --- a/apps/sn/app/components/lib/api/index.ts +++ b/apps/sn/app/components/lib/api/index.ts @@ -1,5 +1,18 @@ -import {useState, useEffect} from 'react'; -const BASE_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL || ""; +import { useEffect, useState } from "react"; + +const BASE_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL || ''; + +export const getData = async (url: string, data?: object): Promise<any> => { + const res = await fetch(url.startsWith('/') ? `${url}` : `${BASE_URL}/${url}`, { + method: "GET", + body: JSON.stringify(data), + }); + if (res.ok) { + const data = await res.json(); + return data; + } + throw new Error('Failed to fetch data'); +}; export const postData = async (url: string, data: object): Promise<any> => { const options: RequestInit = { @@ -15,11 +28,6 @@ export const postData = async (url: string, data: object): Promise<any> => { if (res.ok) { const resData = await res.json(); return resData; - // const text = await res.text(); - // if (text) { - // return JSON.parse(text); // JSON 데이터가 있으면 파싱하여 반환 - // } - // return true; // 응답 본문이 비어 있으면 true 반환 } }; @@ -46,29 +54,6 @@ export const putData = async (url: string, data: object): Promise<any> => { return resData; }; -export const getData = async (url: string, data?: object): Promise<any> => { - const res = await fetch(url.startsWith('/') ? `${url}` : `${BASE_URL}/${url}`, { - method: "GET", - }); - if (res.ok) { - const data = await res.json(); - return data; - } - throw new Error('Failed to fetch data'); -}; - -export const getDcData = async (url: string, data?: object): Promise<any> => { - console.log(url); - const res = await fetch('/dc-service'+url, { - method: "GET", - }); - if (res.ok) { - const data = await res.json(); - return data; - } - throw new Error('Failed to fetch data'); -}; - export const deleteData = async (url: string, data?: object): Promise<any> => { const options: RequestInit = { method: "DELETE", @@ -82,6 +67,32 @@ export const deleteData = async (url: string, data?: object): Promise<any> => { return res; }; +// RSONE DC API 호출 +export const getDcData = async (url: string, data?: object): Promise<any> => { + console.log(url); + const res = await fetch('/dc-service' + url, { + method: "GET", + }); + if (res.ok) { + const data = await res.json(); + return data; + } + throw new Error('Failed to fetch data'); +}; + +// RSONE DC API 호출 +export const getCmsData = async (url: string, data?: object): Promise<any> => { + console.log(url); + const res = await fetch('/cms-service' + url, { + method: "GET", + }); + if (res.ok) { + const data = await res.json(); + return data; + } + throw new Error('Failed to fetch data'); +}; + export function getCookie(name:string) { const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)')); if (match && match[2]) { diff --git a/apps/sn/app/components/ui/YearRangeSelectBox.tsx b/apps/sn/app/components/ui/YearRangeSelectBox.tsx index 3dc8818fc..768bfd54c 100644 --- a/apps/sn/app/components/ui/YearRangeSelectBox.tsx +++ b/apps/sn/app/components/ui/YearRangeSelectBox.tsx @@ -90,7 +90,7 @@ export function YearRangeSelectBox({ return ( <div className={`flex items-center ${className}`}> <SelectBox2 - className="flex-1 mr-3 min-w-[120px] max-w-[170px]" + className="flex-1 mr-3" selectClass={selectClass} label={startLabel} selectArray={getStartYearArray()} @@ -99,7 +99,7 @@ export function YearRangeSelectBox({ /> <span className="font-semibold text-xl mx-2">~</span> <SelectBox2 - className="flex-1 ml-1 mr-6 min-w-[70px] max-w-[150px]" + className="flex-1 ml-1" selectClass={selectClass} label={endLabel} selectArray={getEndYearArray()} diff --git a/apps/sn/middleware.ts b/apps/sn/middleware.ts index 8fe638ebe..6ddf29f9f 100644 --- a/apps/sn/middleware.ts +++ b/apps/sn/middleware.ts @@ -7,7 +7,7 @@ const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL || ""; const SEWERAGE_API_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL || ""; const GEOSERVER_URL = process.env.NEXT_PUBLIC_GEOSERVER_URL || ""; const LX_GEOSERVER_URL = process.env.NEXT_PUBLIC_LX_GEOSERVER_URL || ""; -const RSONE_DC_URL = process.env.NEXT_PUBLIC_RSONE_DC_URL || ""; +const DC_URL = process.env.NEXT_PUBLIC_DC_URL || ""; export function middleware(req: NextRequest) { console.log("Middleware 진입:", req.nextUrl.pathname); @@ -106,7 +106,7 @@ export function middleware(req: NextRequest) { .map(([key, value]) => `${key}=${decodeURIComponent(value)}`) .join("&"); - const newUrl = `${RSONE_DC_URL}${pathname}${decodedParams ? `?${decodedParams}` : ""}`; + const newUrl = `${DC_URL}${pathname}${decodedParams ? `?${decodedParams}` : ""}`; console.log( `[Middleware] Rewriting from '/dc-service' path to: ${newUrl}`, ); diff --git a/apps/wr/.env.production b/apps/wr/.env.production index 7e40bdb76..0900b009d 100644 --- a/apps/wr/.env.production +++ b/apps/wr/.env.production @@ -1,31 +1,17 @@ -# NEXT_PUBLIC_SITE_ID = WR -# NEXT_PUBLIC_PORT = 11301 -# NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11301 -# NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000 -# NEXT_PUBLIC_GEOSERVER_URL = http://rsone.iptime.org:10010/geoserver -# NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver -# NEXT_PUBLIC_CLAIM_NAME = Authorization -# NEXT_PUBLIC_AUTH_USER_ID = token-id -# NEXT_PUBLIC_ACCESS_TOKEN = access-token -# NEXT_PUBLIC_REFRESH_TOKEN = refresh-token - - - NEXT_PUBLIC_SITE_ID = WR -NEXT_PUBLIC_PORT = 11301 -NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11301 -# NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000 -NEXT_PUBLIC_SERVER_API_URL = http://con.mind-one.co.kr:11080/api/v1 -NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11082/api/v1 -NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000 +NEXT_PUBLIC_PORT = 3000 +NEXT_PUBLIC_PROXY_HOST = http://wr.hasuon.or.kr +NEXT_PUBLIC_SERVER_API_URL = http://apigateway.iipbs-dev.svc.cluster.local:8000/api/v1 +NEXT_PUBLIC_FO_SERVER_API_URL = http://apigateway.iipbs-dev.svc.cluster.local:8000/operation-service/api/v1 +NEXT_PUBLIC_CS_SERVER_API_URL = http://apigateway.iipbs-dev.svc.cluster.local:8000 NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload -NEXT_PUBLIC_GEOSERVER_URL = http://rsone.iptime.org:10010/geoserver -NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver +NEXT_PUBLIC_GEOSERVER_URL = http://172.29.143.87:8080/geoserver +NEXT_PUBLIC_LX_GEOSERVER_URL = http://172.29.143.87:8080/geoserver_swl NEXT_PUBLIC_CLAIM_NAME = Authorization NEXT_PUBLIC_AUTH_USER_ID = token-id NEXT_PUBLIC_ACCESS_TOKEN = access-token NEXT_PUBLIC_REFRESH_TOKEN = refresh-token -NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service/api # 개발 서버 API +NEXT_PUBLIC_SEWERAGE_API_URL = http://apigateway.iipbs-dev.svc.cluster.local:8000/sewerage-service/api diff --git a/apps/wr/app/ruseFcltMng/fcltReg/pbnstReg/page.tsx b/apps/wr/app/ruseFcltMng/fcltReg/pbnstReg/page.tsx index 05714a336..4ac167f3f 100644 --- a/apps/wr/app/ruseFcltMng/fcltReg/pbnstReg/page.tsx +++ b/apps/wr/app/ruseFcltMng/fcltReg/pbnstReg/page.tsx @@ -371,6 +371,7 @@ export default function PublicReuseFaciltyInsert() { setIndexMng(index); }} indexMng={indexMng} + readonly={false} /> </TabsContent> <TabsContent className="max-h-full" value="buse"> diff --git a/apps/wr/app/stats/rainStat/page.tsx b/apps/wr/app/stats/rainStat/page.tsx index 591ea5fdf..17e2d4bae 100644 --- a/apps/wr/app/stats/rainStat/page.tsx +++ b/apps/wr/app/stats/rainStat/page.tsx @@ -16,50 +16,44 @@ import { import ListDiv from "@common/business_components/ui/list_div"; import { Button } from "@common/components/ui"; import { useEffect, useState } from "react"; +import toast from "react-hot-toast"; +import { useTranslation } from "react-i18next"; export default function RainStat() { const { code, rainStat, searchRainStatList } = useWrStore((state) => state); - const { rainStatList, excelList, rainDetailList } = rainStat; + const { rainStatList, rainDetailList } = rainStat; const [searchYear, setSearchYear] = useState<string>( String(new Date().getFullYear()) ); - const [exData, setExData] = useState<Array<Record<string, string | number>>>(); + //const [exData, setExData] = useState<Array<Record<string, string | number>>>(); const [bdstTable, setBdstTable] = useState<RainStatProps[]>(); + const { t } = useTranslation('base'); useEffect(() => { - searchRainStatList(searchYear); - }, [code.cityCd, code.sggCd, searchRainStatList]) + searchRainStatList(searchYear ,code.cityCd); + }, [code.cityCd, searchRainStatList]) const excelDetailDownLoad=() =>{ const sidoList = new Set<string>(); const sidoDataMap = new Map<string, (string | number)[]>(); // 시도별 데이터를 저장할 Map const sidoDetailMap = new Map<string, (string | number)[][]>(); // 시도별 상세 데이터를 저장할 Map - // 먼저 시도별 상세 데이터를 그룹화 - rainDetailList.forEach((item: RainStatProps[]) => { + // 복사된 배열을 사용 + const transformedRainDetailList = rainDetailList.map((originItem: RainStatProps[]) => { + const item = [...originItem]; // 원본 복사 const sidoVal = item.at(0)?.toString().trim(); const sigunVal = item.at(1)?.toString().trim(); - let sidoText = ''; - let sigunText = ''; - const sido = code.cityCd.find((city) => city.val === sidoVal); const sigun = code.sggCd.find((sgg) => sgg.val === sigunVal); - sidoText = sido?.text || ''; - sigunText = sigun?.text || ''; - - // 시도, 시군구 코드를 텍스트로 변환하여 데이터에 할당 - if (item.length > 0) { - item[0] = sidoText as unknown as RainStatProps; - } - if (item.length > 1) { - item[1] = sigunText as unknown as RainStatProps; - } - if (item.length > 2) { - item[2] = sidoText+' '+sigunText as unknown as RainStatProps; - } + const sidoText = sido?.text || ''; + const sigunText = sigun?.text || ''; + + if (item.length > 0) item[0] = sidoText as unknown as RainStatProps; + if (item.length > 1) item[1] = sigunText as unknown as RainStatProps; + if (item.length > 2) item[2] = `${sidoText} ${sigunText}` as unknown as RainStatProps; // 시도별 상세 데이터 수집 if (sidoText) { @@ -72,53 +66,40 @@ export default function RainStat() { // 시도별 합계 데이터 수집 if (sidoText && !sidoList.has(sidoText)) { sidoList.add(sidoText); - // 시도별 초기 데이터 구조 생성 (예: [시도명, 0, 0, 0, ...]) const initialData: (string | number)[] = [sidoText]; - // 데이터의 나머지 컬럼들을 0으로 초기화 (실제 컬럼 수에 맞게 조정 필요) for (let i = 1; i < item.length; i++) { initialData.push(0); } sidoDataMap.set(sidoText, initialData); } + + return item; }); - // 시도별 합계 계산 - rainDetailList.forEach((item: RainStatProps[]) => { + // 이후 합계 계산에서도 transformedRainDetailList 사용 + transformedRainDetailList.forEach((item: RainStatProps[]) => { const sidoText = item[0]?.toString(); if (sidoText && sidoDataMap.has(sidoText)) { const sidoData = sidoDataMap.get(sidoText)!; - // 각 컬럼의 값을 합계에 더하기 (1번 인덱스부터 시작) for (let i = 1; i < item.length && i < sidoData.length; i++) { if(i == 2){ sidoData[i] = '합계'; - } else if(i == 3){ - // 해당 시도의 데이터 개수를 계산 - const sidoDataCount = rainDetailList.filter((data: unknown[]) => + } else if (i == 3) { + const sidoDataCount = transformedRainDetailList.filter((data: unknown[]) => Array.isArray(data) && data.length > 0 && String(data[0]) === sidoText ).length; sidoData[i] = sidoDataCount; } else if( i == 4){ sidoData[i] = ''; - } else if(i == 6){ - // 법정 대상 건축물 개수 (인덱스 6이 'Y'인 경우) - const bumCnt = rainDetailList.filter((data: unknown[]) => + } else if (i == 6) { + const bumCnt = transformedRainDetailList.filter((data: unknown[]) => Array.isArray(data) && data.length > 6 && String(data[0]) === sidoText ).filter((data: unknown[]) => String(data[6]) === '대상').length; sidoData[i] = bumCnt; - } else if(i==8){ - const value = Number(item[8]) || 0; + } else if ([8, 11, 12, 14].includes(i)) { + const value = Number(item[i]) || 0; sidoData[i] = (Number(sidoData[i]) + value) as string | number; - } else if(i==11){ - const value = Number(item[11]) || 0; - sidoData[i] = (Number(sidoData[i]) + value) as string | number; - } else if(i==12){ - const value = Number(item[12]) || 0; - sidoData[i] = (Number(sidoData[i]) + value) as string | number; - } else if(i==14){ - const value = Number(item[14]) || 0; - sidoData[i] = (Number(sidoData[i]) + value) as string | number; - } - else { + } else { sidoData[i] = ''; } } @@ -144,7 +125,7 @@ export default function RainStat() { }); const sidoSummaryList = Array.from(sidoDataMap.values()); - const sidoTotalSummary = [['전체', '', '합계', 0, '', '', 0, '', '', 0, 0, 0, 0, 0, 0, '', 0]]; + const sidoTotalSummary = [['전국', '', '합계', 0, '', '', 0, '', '', 0, 0, 0, 0, 0, 0, '']]; sidoSummaryList.forEach((item: (string | number)[]) => { item.forEach((value: string | number, index: number) => { if(typeof value === 'number') { @@ -158,48 +139,77 @@ export default function RainStat() { // sidoSummaryList와 rainDetailList를 합쳐서 엑셀 데이터 생성 const excelData = [...sidoTotalSummary, ...sidoSummaryList, ...summaryExcelData]; + + console.log(' excelData ', excelData) excelDownload( excelData as unknown as [][], "빗물이용시설 통계", "sample_rainStats.xlsx", - "A1:V3", + "A1:O3", 4 ); } const excelClick = () => { + if(bdstTable){ + const tbData = bdstTable .map((item: RainStatProps) => { + return { + "시도": item.cityText, + "개소": item.tmp, + "설치비(백만원)": item.instlCst, + "저류조용량(m³/년)": item.dtfcltCpct, + "연간사용량(m³/년)": item.wtrUsqty, + "조경용수": item.lndwtr, + "청소화장실용수": item.cleanToilUswtr, + "세척살수용수": item.resn, + "농업용수": item.farmUswtr, + "공업용수": item.indstUswtr, + "친수용수": item.hydUswtr, + "기타": item.ithlEtcUswtr, + "연간운영비(백만원/년)": item.anlOperCst, + }; + }) downloadExcel({ - data: (exData as unknown as JSON[]) ?? [], + data: (tbData as unknown as JSON[]) ?? [], fileName: "재이용통계", sheetNameArray: ["Sheet1"], headerRange: "A1:M1" }) + }else{ + toast.error(t('excelDownErrMsg')); + } } - - useEffect(() => { - const transExcel = Array.isArray(excelList) ? excelList : [excelList]; - const excelData = tableData(transExcel, { code }); - const tbData = Array.isArray(excelData) - ? excelData.map((item: RainStatProps) => { - return { - "시도": item.cityText, - "개소": item.tmp, - "설치비(백만원)": item.instlCst, - "저류조용량(m³/년)": item.dtfcltCpct, - "연간사용량(m³/년)": item.wtrUsqty, - "조경용수": item.lndwtr, - "청소화장실용수": item.cleanToilUswtr, - "세척살수용수": item.resn, - "농업용수": item.farmUswtr, - "공업용수": item.indstUswtr, - "친수용수": item.hydUswtr, - "기타": item.ithlEtcUswtr, - "연간운영비(백만원/년)": item.anlOperCst, - }; - }) - : []; - setExData(tbData); - }, [code, excelList]) + + // useEffect(() => { + // if(excelList && excelList.length>0){ + // console.log('excelList ', excelList) + + // const transExcel = Array.isArray(excelList) ? excelList : [excelList]; + // const excelData = tableData(transExcel, { code }); + // const tbData = Array.isArray(excelData) + // ? excelData + // .filter((item: RainStatProps) => item.cityText !== '없음') + // .map((item: RainStatProps) => { + // return { + // "시도": item.cityText, + // "개소": item.tmp, + // "설치비(백만원)": item.instlCst, + // "저류조용량(m³/년)": item.dtfcltCpct, + // "연간사용량(m³/년)": item.wtrUsqty, + // "조경용수": item.lndwtr, + // "청소화장실용수": item.cleanToilUswtr, + // "세척살수용수": item.resn, + // "농업용수": item.farmUswtr, + // "공업용수": item.indstUswtr, + // "친수용수": item.hydUswtr, + // "기타": item.ithlEtcUswtr, + // "연간운영비(백만원/년)": item.anlOperCst, + // }; + // }) + // : []; + // setExData(tbData); + // } + // }, [code, excelList]) useEffect(() => { const transData = Array.isArray(rainStatList) ? rainStatList : [rainStatList]; @@ -208,11 +218,13 @@ export default function RainStat() { ? data.map((item: RainStatProps) => { return { ...item, - ctpvCd: item.cityText + ctpvCd: item.cityText==='전체'?'전국': item.cityText, + cityText: item.cityText==='전체'?'전국': item.cityText, }; }).filter((item: RainStatProps) => item.cityText !== '없음') : []; + setBdstTable(tbData); }, [code, rainStatList]); @@ -237,7 +249,7 @@ export default function RainStat() { /> </div> <div className="flex flex-row space-x-2 items-center"> - <Button className="" size={"sm"} onClick={()=>{searchRainStatList(searchYear);}}> + <Button className="" size={"sm"} onClick={() => { searchRainStatList(searchYear ,code.cityCd); }}> 조회 </Button> <Button className="" size={"sm"} onClick={() => excelClick()}> diff --git a/apps/wr/app/stats/rswtStat/page.tsx b/apps/wr/app/stats/rswtStat/page.tsx index c200d0319..99a8bc4f3 100644 --- a/apps/wr/app/stats/rswtStat/page.tsx +++ b/apps/wr/app/stats/rswtStat/page.tsx @@ -14,48 +14,26 @@ import { import ListDiv from "@common/business_components/ui/list_div"; import { Button } from "@common/components/ui"; import { useEffect, useState } from "react"; +import toast, { Toaster } from "react-hot-toast"; +import { useTranslation } from "react-i18next"; export default function RswtStat() { const { code, rswtStat, searchRswtStatList } = useWrStore((state) => state); - const { rswtStatList, excelList, rswtDetailList } = rswtStat; + const { rswtStatList, rswtDetailList } = rswtStat; const [rswtTable, setRswtTable] = useState<RswtStatProps[]>(); const [searchYear, setSearchYear] = useState<string>( String(new Date().getFullYear()) ); - const [excelData, setExceData] = useState<Record<string, string | number>[]>(); + const { t } = useTranslation('base'); useEffect(() => { - searchRswtStatList(searchYear) - }, [searchRswtStatList]) + searchRswtStatList(searchYear, code.cityCd) + }, [searchRswtStatList, code.cityCd]) const excelClick = () => { - downloadExcel({ - data: (excelData as unknown as JSON[]) ?? [], - fileName: "중수도재이용통계", - sheetNameArray: ["Sheet1"], - headerRange: "A1:N1" - }) - } - useEffect(() => { - const transData = Array.isArray(rswtStatList) ? rswtStatList : [rswtStatList]; - const data = tableData(transData, { code }); - const tbData = Array.isArray(data) - ? data.map((item: RswtStatProps) => { - return { - ...item, - ctpvCd: item.cityText - }; - }).filter((item: RswtStatProps) => item.cityText !== '없음') - : []; - setRswtTable(tbData); - }, [code, rswtStatList]) - - useEffect(() => { - const transExcel = Array.isArray(excelList) ? excelList : [excelList]; - const exData = tableData(transExcel, { code }); - const tbData = Array.isArray(exData) ? - exData.map((item: RswtStatProps) => { + if (rswtTable) { + const data = rswtTable.map((item: RswtStatProps) => { return { "시도": item.cityText, "개소": item.ctpvCnt, @@ -73,17 +51,44 @@ export default function RswtStat() { "기타": item.ithlEtcUswtr, "연간운영비(백만원/년)": item.anlOperCst, }; - }) : []; - setExceData(tbData); - }, [code, excelList]) + }) + + downloadExcel({ + data: (data as unknown as JSON[]) ?? [], + fileName: "중수도재이용통계", + sheetNameArray: ["Sheet1"], + headerRange: "A1:N1" + }) + } else { + toast.error(t("excelDownErrMsg")) + } + } + + useEffect(() => { + const transData = Array.isArray(rswtStatList) ? rswtStatList : [rswtStatList]; + const cityData = tableData(transData, { code }); + const tbData = Array.isArray(cityData) + ? cityData.map((item: RswtStatProps) => { + return { + ...item, + ctpvCd: item.cityText === '전체' ? '전국' : item.cityText, + cityText: item.cityText === '전체' ? '전국' : item.cityText + }; + }) : []; + + setRswtTable(tbData); + }, [code, rswtStatList]); + + const excelDetailDownLoad = () => { - const excelDetailDownLoad=() =>{ const sidoList = new Set<string>(); const sidoDataMap = new Map<string, (string | number)[]>(); // 시도별 데이터를 저장할 Map const sidoDetailMap = new Map<string, (string | number)[][]>(); // 시도별 상세 데이터를 저장할 Map // 먼저 시도별 상세 데이터를 그룹화 - rswtDetailList.forEach((item: RswtStatProps[]) => { + const transformedRswtDetailList = rswtDetailList.map((originItem: RswtStatProps[]) => { + // rswtDetailList.forEach((item: RswtStatProps[]) => { + const item = [...originItem]; // 원본 복사 const sidoVal = item.at(0)?.toString().trim(); const sigunVal = item.at(1)?.toString().trim(); let sidoText = ''; @@ -94,7 +99,7 @@ export default function RswtStat() { sidoText = sido?.text || ''; sigunText = sigun?.text || ''; - + // 시도, 시군구 코드를 텍스트로 변환하여 데이터에 할당 if (item.length > 0) { item[0] = sidoText as unknown as RswtStatProps; @@ -103,7 +108,7 @@ export default function RswtStat() { item[1] = sigunText as unknown as RswtStatProps; } if (item.length > 2) { - item[2] = sidoText+' '+sigunText as unknown as RswtStatProps; + item[2] = sidoText + ' ' + sigunText as unknown as RswtStatProps; } // 시도별 상세 데이터 수집 @@ -113,7 +118,7 @@ export default function RswtStat() { } sidoDetailMap.get(sidoText)!.push(item as unknown as (string | number)[]); } - + // 시도별 합계 데이터 수집 if (sidoText && !sidoList.has(sidoText)) { sidoList.add(sidoText); @@ -125,50 +130,51 @@ export default function RswtStat() { } sidoDataMap.set(sidoText, initialData); } + return item; }); // 시도별 합계 계산 - rswtDetailList.forEach((item: RswtStatProps[]) => { + transformedRswtDetailList.forEach((item: RswtStatProps[]) => { const sidoText = item[0]?.toString(); if (sidoText && sidoDataMap.has(sidoText)) { const sidoData = sidoDataMap.get(sidoText)!; // 각 컬럼의 값을 합계에 더하기 (1번 인덱스부터 시작) for (let i = 1; i < item.length && i < sidoData.length; i++) { - if(i == 2){ + if (i == 2) { sidoData[i] = '합계'; - } else if(i == 3){ + } else if (i == 3) { // 해당 시도의 데이터 개수를 계산 - const sidoDataCount = rswtDetailList.filter((data: unknown[]) => + const sidoDataCount = rswtDetailList.filter((data: unknown[]) => Array.isArray(data) && data.length > 0 && String(data[0]) === sidoText ).length; sidoData[i] = sidoDataCount; - } else if( i == 4){ + } else if (i == 4) { sidoData[i] = ''; - } else if(i == 6){ + } else if (i == 6) { // 법정 대상 건축물 개수 (인덱스 6이 'Y'인 경우) - const bumCnt = rswtDetailList.filter((data: unknown[]) => + const bumCnt = rswtDetailList.filter((data: unknown[]) => Array.isArray(data) && data.length > 6 && String(data[0]) === sidoText ).filter((data: unknown[]) => String(data[6]) === '대상').length; sidoData[i] = bumCnt; - } else if(i==9){ + } else if (i == 9) { const value = Number(item[9]) || 0; sidoData[i] = (Number(sidoData[i]) + value) as string | number; - } else if(i==10){ + } else if (i == 10) { const value = Number(item[10]) || 0; sidoData[i] = (Number(sidoData[i]) + value) as string | number; - } else if(i==11){ + } else if (i == 11) { const value = Number(item[11]) || 0; sidoData[i] = (Number(sidoData[i]) + value) as string | number; - } else if(i==12){ + } else if (i == 12) { const value = Number(item[12]) || 0; sidoData[i] = (Number(sidoData[i]) + value) as string | number; - }else if(i==13){ + } else if (i == 13) { const value = Number(item[13]) || 0; sidoData[i] = (Number(sidoData[i]) + value) as string | number; - } else if(i==14){ + } else if (i == 14) { const value = Number(item[14]) || 0; sidoData[i] = (Number(sidoData[i]) + value) as string | number; - } else if(i==16){ + } else if (i == 16) { const value = Number(item[16]) || 0; sidoData[i] = (Number(sidoData[i]) + value) as string | number; } else { @@ -177,15 +183,15 @@ export default function RswtStat() { } } }); - + // 시도별로 합계와 상세 데이터를 순서대로 배치 const summaryExcelData: (string | number)[][] = []; - + // 시도별로 순회하면서 합계와 상세 데이터를 추가 Array.from(sidoList).forEach((sidoText) => { const sidoSummary = sidoDataMap.get(sidoText); const sidoDetails = sidoDetailMap.get(sidoText) || []; - + if (sidoSummary) { // 시도 합계 데이터 추가 summaryExcelData.push(sidoSummary); @@ -197,10 +203,10 @@ export default function RswtStat() { }); const sidoSummaryList = Array.from(sidoDataMap.values()); - const sidoTotalSummary = [['전체', '', '합계', 0, '', '', 0, '', '', 0, 0, 0, 0, 0, 0, '', 0]]; + const sidoTotalSummary = [['전국', '', '합계', 0, '', '', 0, '', '', 0, 0, 0, 0, 0, 0, '']]; sidoSummaryList.forEach((item: (string | number)[]) => { item.forEach((value: string | number, index: number) => { - if(typeof value === 'number') { + if (typeof value === 'number') { if (sidoTotalSummary[0] && index < sidoTotalSummary[0].length) { sidoTotalSummary[0][index] = Number(sidoTotalSummary[0][index]) + Number(value); } @@ -209,13 +215,13 @@ export default function RswtStat() { }); // sidoSummaryList와 rainDetailList를 합쳐서 엑셀 데이터 생성 - const excelData = [...sidoTotalSummary,...sidoSummaryList, ...summaryExcelData]; + const excelData = [...sidoTotalSummary, ...sidoSummaryList, ...summaryExcelData]; excelDownload( excelData as unknown as [][], "중수도시설 통계", "sample_rswtStats.xlsx", - "A1:Q3", + "A1:P3", 4 ); } @@ -242,7 +248,7 @@ export default function RswtStat() { className="" size="sm" onClick={() => { - searchRswtStatList(searchYear) + searchRswtStatList(searchYear, code.cityCd) }} > 조회 @@ -283,6 +289,7 @@ export default function RswtStat() { </ListDiv> </div> </div> + <Toaster position="top-center"></Toaster> </ContentsDiv> </> ); diff --git a/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList.tsx b/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList.tsx index 29a2de0db..d216b88f6 100644 --- a/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList.tsx +++ b/apps/wr/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList.tsx @@ -195,7 +195,7 @@ export const rainChkgdnHeadListExport: TableUpperProps[] = [ title: "부과금액(천원)", upName: "feeHist", upSequnce: 3, - type: "number", + type: "text", edit: true, }, ]; diff --git a/apps/wr/app/store/stats/rainStat/index.tsx b/apps/wr/app/store/stats/rainStat/index.tsx index c54f1542e..ec46c2b4e 100644 --- a/apps/wr/app/store/stats/rainStat/index.tsx +++ b/apps/wr/app/store/stats/rainStat/index.tsx @@ -2,158 +2,215 @@ import { fetchType, getFetch } from "@/components/lib/api"; import type { TableUpperProps } from "../../common/type/header"; import { excelRainStat } from "./excel"; import { rainStatHeadListExport } from "./headList"; +import type { SelectDataType } from "@common/business_components/ui"; export type RainStatProps = { - cityText: string - ctpvCd: string //시도 - sggCd: string //시군구 - areaNm: string //행정구역명 - bdstNm: string //시설명 - bdstUsgCd: string //건축물용도코드 - daddr: string //주소 - lawTrgtYn: string //법적의무대상여부 - instlCmptnDt: string //설치완료일자 - instlCst: number //설치비용 - pntfColKnd: string //접수면종류 - filtrTrtmfctYn: string //여과등처리시설유무 - archArea: number //건축연면적 - dtfcltCpct: number //처리용량(저류조용량) - wtrUsqty: number //연간사용량 - utztnUsgCd: string //이용용도코드 - anlOperCst: number //연간운영비 - annRnwtQty: number //물사용량 - jungsudo: number //중수도​이용량 - dachae: number //대체수​이용량 - lndwtr: number //조경용수 - cleanToilUswtr: number //청소화장실용수 - resn: number //세척살수용수 - farmUswtr: number //농업용수 - indstUswtr: number //공업용수 - hydUswtr: number //친수용수 - ithlEtcUswtr: number //기타 - tmp: number //개소 - guideStats: GuideStatProps[] -} + cityText: string; + ctpvCd: string; //시도 + sggCd: string; //시군구 + areaNm: string; //행정구역명 + bdstNm: string; //시설명 + bdstUsgCd: string; //건축물용도코드 + daddr: string; //주소 + lawTrgtYn: string; //법적의무대상여부 + instlCmptnDt: string; //설치완료일자 + instlCst: number; //설치비용 + pntfColKnd: string; //접수면종류 + filtrTrtmfctYn: string; //여과등처리시설유무 + archArea: number; //건축연면적 + dtfcltCpct: number; //처리용량(저류조용량) + wtrUsqty: number; //연간사용량 + utztnUsgCd: string; //이용용도코드 + anlOperCst: number; //연간운영비 + annRnwtQty: number; //물사용량 + jungsudo: number; //중수도​이용량 + dachae: number; //대체수​이용량 + lndwtr: number; //조경용수 + cleanToilUswtr: number; //청소화장실용수 + resn: number; //세척살수용수 + farmUswtr: number; //농업용수 + indstUswtr: number; //공업용수 + hydUswtr: number; //친수용수 + ithlEtcUswtr: number; //기타 + tmp: number; //개소 + guideStats: GuideStatProps[]; +}; export type GuideStatProps = { - utztnUsgCd: string - splyUswtrUtztnQnt : number, - ruseFcltUtztnQnt: number -} + utztnUsgCd: string; + splyUswtrUtztnQnt: number; + ruseFcltUtztnQnt: number; +}; type ExcelType = { - [key: string]: string | number | undefined; + [key: string]: string | number | undefined; }; const excelDownList: ExcelType[] = []; const fetchRainStatList = async (year: string) => { - const res = await getFetch(fetchType.WR, `/reuseChk/rainy/stat/${year}`) - return res; -} + const res = await getFetch(fetchType.WR, `/reuseChk/rainy/stat/${year}`); + return res; +}; type rainStatActions = { - searchRainStatList: (year: string) => void -} + searchRainStatList: (year: string, city: SelectDataType[]) => void; +}; export type rainStatState = { - rainStat: { - rainStatHeadList: TableUpperProps[], - rainStatList: RainStatProps[], - excelList: ExcelType[] - rainDetailList : [][] - } -} + rainStat: { + rainStatHeadList: TableUpperProps[]; + rainStatList: RainStatProps[]; + excelList: ExcelType[]; + rainDetailList: [][]; + }; +}; export type rainStatType = rainStatState & rainStatActions; export const rainStatExport: rainStatState = { - rainStat: { - rainStatHeadList: rainStatHeadListExport, - rainStatList: [], - excelList: [], - rainDetailList : [] - } -} + rainStat: { + rainStatHeadList: rainStatHeadListExport, + rainStatList: [], + excelList: [], + rainDetailList: [], + }, +}; export const rainStatActionsExport = ( - set: (fn: (state: rainStatState) => rainStatState) => void + set: (fn: (state: rainStatState) => rainStatState) => void ) => { - return { - searchRainStatList: async (year: string) => { - const res = await fetchRainStatList(year); - const cityArr: any[] = []; - res.forEach((item: RainStatProps) => { + return { + searchRainStatList: async (year: string, city: SelectDataType[]) => { + const res = await fetchRainStatList(year); + const cityArr: any[] = []; + - let obj = cityArr.find((e) => { - return e.ctpvCd == item.ctpvCd - }) + res.filter((resFilter: RainStatProps) => + city.some((cityCd) => + resFilter.ctpvCd?.trim() === cityCd.val.trim() + ) + ) + .forEach((item: RainStatProps) => { + let obj = cityArr.find((e) => { + return e.ctpvCd == item.ctpvCd; + }); - if (obj) { - obj.instlCst += item.instlCst - obj.dtfcltCpct += item.dtfcltCpct - obj.wtrUsqty += item.wtrUsqty - obj.anlOperCst += item.anlOperCst - obj.tmp += 1 - } else { - obj = {}; - obj.ctpvCd = item.ctpvCd - obj.instlCst = item.instlCst - obj.tmp = 1 - obj.dtfcltCpct = item.dtfcltCpct - obj.wtrUsqty = item.wtrUsqty - obj.anlOperCst = item.anlOperCst + if (obj) { + obj.instlCst += item.instlCst; + obj.dtfcltCpct += item.dtfcltCpct; + obj.wtrUsqty += item.wtrUsqty; + obj.anlOperCst += item.anlOperCst; + obj.tmp += 1; + } else { + obj = {}; + obj.ctpvCd = item.ctpvCd; + obj.instlCst = item.instlCst; + obj.tmp = 1; + obj.dtfcltCpct = item.dtfcltCpct; + obj.wtrUsqty = item.wtrUsqty; + obj.anlOperCst = item.anlOperCst; - cityArr.push(obj) + cityArr.push(obj); + } + + if (item.guideStats && item.guideStats.length > 0) { + item.guideStats.forEach((guide: GuideStatProps) => { + rainStatHeadListExport.forEach((headItem: TableUpperProps) => { + if (headItem.title == guide.utztnUsgCd) { + if (!obj[headItem.id] || typeof obj[headItem.id] !== "number") + obj[headItem.id] = 0; + if (typeof obj[headItem.id] === "number") { + obj[headItem.id] += guide.ruseFcltUtztnQnt; + } } + }); + }); + } + }); - if (item.guideStats && item.guideStats.length > 0) { - item.guideStats.forEach((guide: GuideStatProps) => { - rainStatHeadListExport.forEach((headItem: TableUpperProps) => { + const totalObj = { + ctpvCd: "0", + tmp: 0, + instlCst: 0, //설치비 + dtfcltCpct: 0, //저류조용량 + bdstUsgCd: 0, //연간사용량 + lndwtr: 0, //조경용수 + cleanToilUswtr: 0, //청소화장실용수 + resn: 0, //세척살수용수 + farmUswtr: 0, //농업용수 + indstUswtr: 0, //공업용수 + hydUswtr: 0, //친수용수 + ithlEtcUswtr: 0, //기타 + anlOperCst: 0, //연간운영비 + } as any; - if (headItem.title == guide.utztnUsgCd) { - if (!obj[headItem.id] || typeof obj[headItem.id] !== "number") obj[headItem.id] = 0; - if (typeof obj[headItem.id] === "number") { + cityArr.forEach((item) => { + // if(item.ctpvCd === '0') return; // Skip total object if exists + totalObj.tmp += !isNaN(Number(item.tmp)) ? Number(item.tmp) : 0; + totalObj.instlCst += !isNaN(Number(item.instlCst)) + ? Number(item.instlCst) + : 0; + totalObj.dtfcltCpct += !isNaN(Number(item.dtfcltCpct)) + ? Number(item.dtfcltCpct) + : 0; + totalObj.bdstUsgCd += !isNaN(Number(item.bdstUsgCd)) + ? Number(item.bdstUsgCd) + : 0; + totalObj.lndwtr += !isNaN(Number(item.lndwtr)) + ? Number(item.lndwtr) + : 0; + totalObj.cleanToilUswtr += !isNaN(Number(item.cleanToilUswtr)) + ? Number(item.cleanToilUswtr) + : 0; + totalObj.resn += !isNaN(Number(item.resn)) ? Number(item.resn) : 0; + totalObj.farmUswtr += !isNaN(Number(item.farmUswtr)) + ? Number(item.farmUswtr) + : 0; + totalObj.indstUswtr += !isNaN(Number(item.indstUswtr)) + ? Number(item.indstUswtr) + : 0; + totalObj.hydUswtr += !isNaN(Number(item.hydUswtr)) + ? Number(item.hydUswtr) + : 0; + totalObj.ithlEtcUswtr += !isNaN(Number(item.ithlEtcUswtr)) + ? Number(item.ithlEtcUswtr) + : 0; + totalObj.anlOperCst += !isNaN(Number(item.anlOperCst)) + ? Number(item.anlOperCst) + : 0; - obj[headItem.id] += guide.ruseFcltUtztnQnt; - } - } - }); - }) - } - }) + excelDownList.push({ + ctpvCd: item.ctpvCd, + tmp: item.tmp, + instlCst: item.instlCst, //설치비 + dtfcltCpct: item.dtfcltCpct, //저류조용량 + bdstUsgCd: item.bdstUsgCd, //연간사용량 + lndwtr: item.lndwtr, //조경용수 + cleanToilUswtr: item.cleanToilUswtr, //청소화장실용수 + resn: item.resn, //세척살수용수 + farmUswtr: item.farmUswtr, //농업용수 + indstUswtr: item.indstUswtr, //공업용수 + hydUswtr: item.hydUswtr, //친수용수 + ithlEtcUswtr: item.ithlEtcUswtr, //기타 + anlOperCst: item.anlOperCst, //연간운영비 + }); + }); - cityArr.forEach(item => { - excelDownList.push({ - ctpvCd: item.ctpvCd, - tmp: item.tmp, - instlCst: item.instlCst, //설치비 - dtfcltCpct: item.dtfcltCpct, //저류조용량 - bdstUsgCd: item.bdstUsgCd, //연간사용량 - lndwtr: item.lndwtr, //조경용수 - cleanToilUswtr: item.cleanToilUswtr, //청소화장실용수 - resn: item.resn, //세척살수용수 - farmUswtr: item.farmUswtr, //농업용수 - indstUswtr: item.indstUswtr, //공업용수 - hydUswtr: item.hydUswtr, //친수용수 - ithlEtcUswtr: item.ithlEtcUswtr, //기타 - anlOperCst: item.anlOperCst, //연간운영비 - }) - }) - //상세 - const rainDetailList : RainStatProps[] = []; - res.forEach((item:RainStatProps) => { - const utztnUsgArray = new Array<string>(); - item.guideStats.forEach((guideStat) => { - utztnUsgArray.push(guideStat.utztnUsgCd); - }) - rainDetailList.push({ - ...item, - utztnUsgCd : utztnUsgArray.join(', '), - }) - }) - const excelDetailData = excelRainStat(rainDetailList); - /* const rainStatHeadList = data.map((item:RainStatProps) => ({ + //상세 + const rainDetailList: RainStatProps[] = []; + res.forEach((item: RainStatProps) => { + const utztnUsgArray = new Array<string>(); + item.guideStats.forEach((guideStat) => { + utztnUsgArray.push(guideStat.utztnUsgCd); + }); + rainDetailList.push({ + ...item, + utztnUsgCd: utztnUsgArray.join(", "), + }); + }); + const excelDetailData = excelRainStat(rainDetailList); + /* const rainStatHeadList = data.map((item:RainStatProps) => ({ ...item, ctpvCd:item.ctpvCd, sggCd:item.sggCd, @@ -172,14 +229,19 @@ export const rainStatActionsExport = ( way7:item.way7, yearMoney:item.yearMoney, })) */ - set((state: rainStatState) => ({ - rainStat: { - ...state.rainStat, - rainDetailList: excelDetailData as [][], - rainStatList: cityArr, - excelList: excelDownList - } - })); - } - } -} + + console.log(" cityArr ", cityArr); + console.log(" excelDownList ", excelDownList); + + cityArr.unshift(totalObj); + set((state: rainStatState) => ({ + rainStat: { + ...state.rainStat, + rainDetailList: excelDetailData as [][], + rainStatList: cityArr, + excelList: excelDownList, + }, + })); + }, + }; +}; diff --git a/apps/wr/app/store/stats/rswtStat/excel.tsx b/apps/wr/app/store/stats/rswtStat/excel.tsx index 7c6e2b4cc..00935b8fb 100644 --- a/apps/wr/app/store/stats/rswtStat/excel.tsx +++ b/apps/wr/app/store/stats/rswtStat/excel.tsx @@ -1,4 +1,5 @@ import type { RswtStatProps } from "."; +import { bdstUsgCd } from "../../common/code/basicCode"; export const excelRswtStat = (excelList:RswtStatProps[]) : (string | number)[][] => { const excelData: (string | number)[][] = []; @@ -14,7 +15,7 @@ export const excelRswtStat = (excelList:RswtStatProps[]) : (string | number)[][] String(item.bdstNm) ?? "", //건축물용도코드(빈칸) //String(item.bdstUsgCd) ?? "", - "", + bdstUsgCd.find((cd)=> cd.val === item.bdstUsgCd.toString())?.text ?? "", //건축물용도 //주소 String(item.daddr) ?? "", //법적의무대상여부 diff --git a/apps/wr/app/store/stats/rswtStat/index.tsx b/apps/wr/app/store/stats/rswtStat/index.tsx index af106c3b3..89c4089c0 100644 --- a/apps/wr/app/store/stats/rswtStat/index.tsx +++ b/apps/wr/app/store/stats/rswtStat/index.tsx @@ -6,7 +6,7 @@ import { excelRswtStat } from "./excel"; export type RswtStatProps = { cityText: string //시도명 ctpvCd: string //시도 - sggCd : string //시군구 + sggCd: string //시군구 areaNm: string //행정구역명 bdstNm: string //시설명 daddr: string //주소 @@ -26,9 +26,10 @@ export type RswtStatProps = { ithlEtcUswtr: number //기타 anlOperCst: number //연간운영비 guideStats: GuideStatProps[] - utztnUsgCd : string //이용코드 - lawTrgtYn : string //법적의무대상여부 - instlCmptnDt : string //설치완료일자 + utztnUsgCd: string //이용코드 + lawTrgtYn: string //법적의무대상여부 + instlCmptnDt: string //설치완료일자 + bdstUsgCd: number } export type GuideStatProps = { @@ -37,7 +38,7 @@ export type GuideStatProps = { } type rswtStatActions = { - searchRswtStatList: (year: string) => void; + searchRswtStatList: (year: string, city: { val: string; text: string }[]) => void; } export type ExcelType = { @@ -71,36 +72,44 @@ export const rswtStatActionsExport: (set: any) => rswtStatActions = ( set: any ) => { return { - searchRswtStatList: async (year: string) => { + searchRswtStatList: async (year: string, city: { val: string; text: string }[]) => { const res = await getFetch(fetchType.WR, `/reuseChk/reuseWater/stat/${year}`) - + const data = res.filter(item => { + const code = item.ctpvCd.trim(); + return city.some(el => el.val === code); + }); const cityArr: any[] = []; - res.forEach((item: RswtStatProps) => { + data.forEach((item: RswtStatProps) => { let obj = cityArr.find((e) => { return e.ctpvCd == item.ctpvCd }) if (obj) { - obj.ctpvCnt += 1 - obj.archArea += item.archArea - obj.filtrTrtmfctCpct += item.filtrTrtmfctCpct - obj.wtrUsqty += item.wtrUsqty - obj.rswtAltSum += (item.rswtrUsqty + item.altUswtrUtztnQnt) - obj.rswtrUsqty += item.rswtrUsqty - obj.altUswtrUtztnQnt += item.altUswtrUtztnQnt - obj.anlOperCst += item.anlOperCst + obj.ctpvCnt += 1 //개소 + // obj.archArea += item.archArea 건축면적 삭제 + obj.filtrTrtmfctCpct += item.filtrTrtmfctCpct //처리용량 + obj.wtrUsqty += item.wtrUsqty //물사용량 + obj.rswtAltSum += (item.rswtrUsqty + item.altUswtrUtztnQnt) //중수도+대체수 + obj.rswtrUsqty += item.rswtrUsqty //중수도사용량 + obj.altUswtrUtztnQnt += item.altUswtrUtztnQnt //대체수이용량 + obj.anlOperCst += item.anlOperCst //연간운영비용 } else { - obj = {}; - obj.ctpvCd = item.ctpvCd - obj.ctpvCnt = 1 - obj.archArea = item.archArea - obj.filtrTrtmfctCpct = item.filtrTrtmfctCpct - obj.wtrUsqty = item.wtrUsqty - obj.rswtAltSum = item.rswtrUsqty + item.altUswtrUtztnQnt - obj.rswtrUsqty = item.rswtrUsqty - obj.altUswtrUtztnQnt = item.altUswtrUtztnQnt - obj.anlOperCst = item.anlOperCst - + obj = { + ctpvCd: item.ctpvCd, + ctpvCnt: 1, + filtrTrtmfctCpct: item.filtrTrtmfctCpct, + wtrUsqty: item.wtrUsqty, + rswtAltSum: item.rswtrUsqty + item.altUswtrUtztnQnt, + rswtrUsqty: item.rswtrUsqty, + altUswtrUtztnQnt: item.altUswtrUtztnQnt, + anlOperCst: item.anlOperCst, + lndwtr: 0, + cleanToilUswtr: 0, + farmUswtr: 0, + indstUswtr: 0, + hydUswtr: 0, + ithlEtcUswtr: 0, + } cityArr.push(obj) } @@ -120,11 +129,47 @@ export const rswtStatActionsExport: (set: any) => rswtStatActions = ( } }); + const total: any = { + ctpvCd: "0", + ctpvCnt: 0, + filtrTrtmfctCpct: 0, + wtrUsqty: 0, + rswtAltSum: 0, + rswtrUsqty: 0, + altUswtrUtztnQnt: 0, + anlOperCst: 0, + lndwtr: 0, + cleanToilUswtr: 0, + farmUswtr: 0, + indstUswtr: 0, + hydUswtr: 0, + ithlEtcUswtr: 0, + }; + + cityArr.forEach(item => { + total.ctpvCnt += item.ctpvCnt; + total.archArea += item.archArea; + total.filtrTrtmfctCpct += item.filtrTrtmfctCpct; + total.wtrUsqty += item.wtrUsqty; + total.rswtAltSum += item.rswtAltSum; + total.rswtrUsqty += item.rswtrUsqty; + total.altUswtrUtztnQnt += item.altUswtrUtztnQnt; + total.anlOperCst += item.anlOperCst; + total.lndwtr += item.lndwtr; + total.cleanToilUswtr += item.cleanToilUswtr; + total.farmUswtr += item.farmUswtr; + total.indstUswtr += item.indstUswtr; + total.hydUswtr += item.hydUswtr; + total.ithlEtcUswtr += item.ithlEtcUswtr; + }); + + cityArr.unshift(total); + cityArr.forEach(item => { excelDownList.push({ ctpvCd: item.ctpvCd, ctpvCnt: item.ctpvCnt, - archArea: item.archArea, + // archArea: item.archArea, filtrTrtmfctCpct: item.filtrTrtmfctCpct, wtrUsqty: item.wtrUsqty, rswtAltSum: item.rswtAltSum, @@ -141,19 +186,18 @@ export const rswtStatActionsExport: (set: any) => rswtStatActions = ( }) //상세 - const rswtDetailList : RswtStatProps[] = []; - res.forEach((item:RswtStatProps) => { + const rswtDetailList: RswtStatProps[] = []; + res.forEach((item: RswtStatProps) => { const utztnUsgArray = new Array<string>(); item.guideStats.forEach((guideStat) => { utztnUsgArray.push(guideStat.utztnUsgCd); }) rswtDetailList.push({ ...item, - rswtAltSum : item.rswtrUsqty + item.altUswtrUtztnQnt, - utztnUsgCd : utztnUsgArray.join(', '), + rswtAltSum: item.rswtrUsqty + item.altUswtrUtztnQnt, + utztnUsgCd: utztnUsgArray.join(', '), }) }); - const excelDetailData = excelRswtStat(rswtDetailList); set((state: rswtStatState) => ({ rswtStat: { diff --git a/apps/wr/components/lib/func/TableData.tsx b/apps/wr/components/lib/func/TableData.tsx index 63f1db2f6..24e6349a9 100644 --- a/apps/wr/components/lib/func/TableData.tsx +++ b/apps/wr/components/lib/func/TableData.tsx @@ -3,7 +3,7 @@ import type { TableUpperProps } from "@/app/store/common/type/header"; import type { rainChkZodType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn"; import type { rswtChkZodType } from "@/app/store/prfmncReg/chkgdnReg/rswrtChkgdn"; import { Checkbox, Input, TableCell, TableRow } from "@common/components/ui"; -import { formatCommaNumber } from "./commom"; +import { formatCommaNumber, handleCommaNumberChange } from "./commom"; export const rainChkTableData = (chkData: rainChkZodType[]) => { // 1. chkgdnSn + utztnUsgCd 기준 누계 정보 만들기 @@ -142,7 +142,12 @@ export const chRowspanTable = ( ) : key === "order" ? ( ++order ) : ( - value + // value + (["anlOperCst", "dtfcltCpct", "prcsCpct"].includes(head.id)) ? ( + formatCommaNumber(value) + ) : ( + <>{value}</> + ) )} </TableCell> ); @@ -156,26 +161,44 @@ export const chRowspanTable = ( onClick={() => handleCellClick(rowIndex, head.id)} > {head.edit === true ? ( - <Input - className={`${head.type === "number" ? "text-right" : "text-center"} !text-xl`} - type={head.type} - onChange={(e) => { - handleChange(rowIndex, head.id, e.target.value); - }} - value={value || ""} - disabled={!selectedIds.includes(row.chkgdnSn)} - maxLength={numSize} - //input type number일때 slice 처리 - onInput={(e: React.ChangeEvent<HTMLInputElement>) => { - if (head.type === 'number' && e.target.value.length > numSize) { - e.target.value = e.target.value.slice(0, numSize); - } - }} - /> + (["levyAmt", "anlOperCst", "dtfcltCpct", "prcsCpct"].includes(head.id)) ? ( + <Input + className={`${head.type === "number" ? "text-right" : "text-center"} !text-xl`} + type={head.type} + onChange={(e) => { + handleCommaNumberChange(e, val => + handleChange(rowIndex, head.id, val)) + }} + value={formatCommaNumber(value) || ""} + disabled={!selectedIds.includes(row.chkgdnSn)} + maxLength={numSize} + onInput={(e: React.ChangeEvent<HTMLInputElement>) => { + if (head.type === 'number' && e.target.value.length > numSize) { + e.target.value = e.target.value.slice(0, numSize); + } + }} + /> + ) : ( + <Input + className={`${head.type === "number" ? "text-right" : "text-center"} !text-xl`} + type={head.type} + onChange={(e) => { + handleChange(rowIndex, head.id, e.target.value); + }} + value={value || ""} + disabled={!selectedIds.includes(row.chkgdnSn)} + maxLength={numSize} + onInput={(e: React.ChangeEvent<HTMLInputElement>) => { + if (head.type === 'number' && e.target.value.length > numSize) { + e.target.value = e.target.value.slice(0, numSize); + } + }} + /> + ) ) : ( - (head.id === "totalSplyUswtrUtztnQnt" || head.id === "totalRuseFcltUtztnQnt" || head.id === "splyUswtrUtztnQnt" || head.id === "ruseFcltUtztnQnt") ? ( - <span className="underline text-blue-600 cursor-pointer"> - {value} + (["totalSplyUswtrUtztnQnt", "totalRuseFcltUtztnQnt", "splyUswtrUtztnQnt", "ruseFcltUtztnQnt", "levyAmt"].includes(head.id)) ? ( + <span className={["totalSplyUswtrUtztnQnt", "totalRuseFcltUtztnQnt", "splyUswtrUtztnQnt", "ruseFcltUtztnQnt"].includes(head.id) ? "underline text-blue-600 cursor-pointer" : ""}> + {formatCommaNumber(value)} </span> ) : ( <>{value}</> @@ -183,7 +206,6 @@ export const chRowspanTable = ( )} </TableCell> ); - })} </TableRow> ))) : ( diff --git a/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx b/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx index 85fdd0c0b..5c1edb471 100644 --- a/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx +++ b/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx @@ -494,7 +494,7 @@ export function PbnstBuseForm({ sonClass="col-span-4" indexMng={indexMng} indexBiz={indexBiz} - formType={""} + readonly={false} /> </div> diff --git a/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/buseWaterQulity/buseWaterQulity.tsx b/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/buseWaterQulity/buseWaterQulity.tsx index cba4c4c81..121957b8e 100644 --- a/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/buseWaterQulity/buseWaterQulity.tsx +++ b/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/buseWaterQulity/buseWaterQulity.tsx @@ -13,7 +13,7 @@ export function BuseWaterQulity({ sonClass, indexMng, indexBiz, - formType, + readonly, }: { form: UseFormReturn<{ items: PbnstRegArrrayType }>; h1Title: string; @@ -22,7 +22,7 @@ export function BuseWaterQulity({ sonClass: string; indexMng: number; indexBiz: number; - formType?: string; + readonly?: boolean; }) { const [frontPHdata, setFrontPHdata] = useState("0"); const [backPHdata, setBackPHdata] = useState("0"); @@ -131,7 +131,7 @@ export function BuseWaterQulity({ ? `${field.value}` : "" } - readOnly={formType === "sttn" ? true : false} + readOnly={readonly} maxLength={6} /> <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none"> @@ -168,7 +168,7 @@ export function BuseWaterQulity({ ? `${field.value}` : "" } - readOnly={formType === "sttn" ? true : false} + readOnly={readonly} maxLength={6} /> {/* TODO: 총대장균군수 확인 필요*/} @@ -203,7 +203,7 @@ export function BuseWaterQulity({ ? `${field.value}` : "" } - readOnly={formType === "sttn" ? true : false} + readOnly={readonly} maxLength={6} /> <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none"> @@ -237,7 +237,7 @@ export function BuseWaterQulity({ ? `${field.value}` : "" } - readOnly={formType === "sttn" ? true : false} + readOnly={readonly} maxLength={6} /> <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none"> @@ -267,7 +267,7 @@ export function BuseWaterQulity({ field.onChange(String(e.target.value)); }} value={field.value ?? ""} - readOnly={formType === "sttn" ? true : false} + readOnly={readonly === "sttn" ? true : false} maxLength={txtSize} /> */} <SelectBox @@ -278,7 +278,7 @@ export function BuseWaterQulity({ { val: "불쾌하지않을것", text: "불쾌하지않을것" }, { val: "없음", text: "없음" }, ]} - readOnly={formType === "sttn" ? true : false} + readOnly={readonly} onSelectValue={(val) => { field.onChange(val); }} @@ -310,7 +310,7 @@ export function BuseWaterQulity({ ? `${field.value}` : "" } - readOnly={formType === "sttn" ? true : false} + readOnly={readonly} maxLength={6} /> <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none"> @@ -344,7 +344,7 @@ export function BuseWaterQulity({ ? `${field.value}` : "" } - readOnly={formType === "sttn" ? true : false} + readOnly={readonly} maxLength={6} /> <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none"> @@ -379,7 +379,7 @@ export function BuseWaterQulity({ ? `${field.value}` : "" } - readOnly={formType === "sttn" ? true : false} + readOnly={readonly} maxLength={6} /> <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none"> @@ -413,7 +413,7 @@ export function BuseWaterQulity({ ? `${field.value}` : "" } - readOnly={formType === "sttn" ? true : false} + readOnly={readonly} maxLength={7} /> <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none"> @@ -448,7 +448,7 @@ export function BuseWaterQulity({ ? `${field.value}` : "" } - readOnly={formType === "sttn" ? true : false} + readOnly={readonly} maxLength={7} /> <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none"> @@ -472,7 +472,7 @@ export function BuseWaterQulity({ isSetFrontPh(e.target.value) } value={frontPHdata ?? ""} - readOnly={formType === "sttn"} + readOnly={readonly} maxLength={3} /> <span className="text-xl">~</span> @@ -484,7 +484,7 @@ export function BuseWaterQulity({ isSetBackPh(e.target.value); }} value={backPHdata ?? ""} - readOnly={formType === "sttn"} + readOnly={readonly} maxLength={3} /> </div> diff --git a/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx b/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx index ee3fe8363..f7355bfd9 100644 --- a/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx +++ b/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx @@ -41,11 +41,13 @@ export function PbnstMngForm({ formType, indexMng, setIndexMng, + readonly }: { form: UseFormReturn<{ items: PbnstRegArrrayType }>; formType: string; indexMng: number; setIndexMng: (index: number) => void; + readonly:boolean }) { const { code, pbnst, fileDelete, fileDownLoad } = useWrStore( (state) => state @@ -293,7 +295,7 @@ export function PbnstMngForm({ field.onChange(String(e.target.value)); }} value={field.value ?? ""} - readOnly={formType === "sttn" ? true : false} + readOnly={readonly} maxLength={txtSize} /> </FormUi> @@ -374,7 +376,7 @@ export function PbnstMngForm({ handleCommaNumberChange(e, field.onChange); }} value={formatCommaNumber(field.value)} - readOnly={formType === "sttn" ? true : false} + readOnly={readonly} /> </FormUi> )} @@ -398,7 +400,7 @@ export function PbnstMngForm({ handleCommaNumberChange(e, field.onChange); }} value={formatCommaNumber(field.value)} - readOnly={formType === "sttn" ? true : false} + readOnly={readonly} /> </FormUi> )} @@ -421,7 +423,7 @@ export function PbnstMngForm({ handleCommaNumberChange(e, field.onChange); }} value={formatCommaNumber(field.value)} - readOnly={formType === "sttn" ? true : false} + readOnly={readonly} /> </FormUi> )} diff --git a/apps/wr/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal.tsx b/apps/wr/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal.tsx index 8275e472b..c0cbdda30 100644 --- a/apps/wr/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal.tsx +++ b/apps/wr/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal.tsx @@ -99,6 +99,7 @@ export function PbnstRegModal({ formType={"reg"} indexMng={indexMng} setIndexMng={setIndexMng} + readonly={false} /> </TabsContent> <TabsContent className="max-h-full" value="buse"> diff --git a/apps/wr/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal.tsx b/apps/wr/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal.tsx index 20a13dc31..b23a52056 100644 --- a/apps/wr/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal.tsx +++ b/apps/wr/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal.tsx @@ -35,7 +35,7 @@ import { useForm } from "react-hook-form"; import { z } from "zod"; export function PbnstSttnModal({ data, titleVisible }: { data: customPbnst; titleVisible?: boolean }) { - const { pbnstSttn, prfmnc , pbnstPrfmncSttn} = useWrStore((state) => state); + const { pbnstSttn, prfmnc, pbnstPrfmncSttn } = useWrStore((state) => state); const [fcltTab, setFcltTab] = useState<string>("fclt"); const [ruseTab, setRuseTab] = useState<string>("totalPrf"); const [ruseHeadList, setRuseHeadList] = useState<TableUpperProps[]>([]); @@ -67,10 +67,10 @@ export function PbnstSttnModal({ data, titleVisible }: { data: customPbnst; titl cusrAlotm: item.cusrAlotm ?? "-", etc: item.etc ?? "-", totalMoney: - Number(item.addr) + Number(item.gvsbs) + Number(item.lcep) + - Number(item.cusrAlotm), + Number(item.cusrAlotm) + + (isNaN(Number(item.etc)) ? 0 : Number(item.etc)), instlAprvSncnDt: item.instlAprvSncnDt?.toISOString ?? "-", bizCmcnDay: item.bizCmcnDay?.toISOString ?? "-", rprcsFcltCpct: item.rprcsFcltCpct ?? "-", @@ -167,8 +167,8 @@ export function PbnstSttnModal({ data, titleVisible }: { data: customPbnst; titl const getTablePrfData = (prfList: PrfType[]) => { const inUsageData = structuredClone(initValInUsage); const outUsageData = structuredClone(initValOutUsage); - const inSubtotal = structuredClone(subTotalObj); - const outSubtotal = structuredClone(subTotalObj); + const inSubtotal = { ...structuredClone(subTotalObj), 구분: "장내용수" }; + const outSubtotal = { ...structuredClone(subTotalObj), 구분: "장외용수" }; if (prfList) { prfList?.forEach((prfItem) => { @@ -216,7 +216,9 @@ export function PbnstSttnModal({ data, titleVisible }: { data: customPbnst; titl (usageTotalObj as any)[key] = val; } const tableData = [...inUsageData, ...outUsageData, usageTotalObj]; - + console.log("inusageData", inUsageData) + console.log("outUsageData", outUsageData) + console.log("tableData", tableData) setPrfData({ inPrf: inUsageData, outPrf: outUsageData, @@ -264,6 +266,7 @@ export function PbnstSttnModal({ data, titleVisible }: { data: customPbnst; titl formType={"sttn"} indexMng={indexMng} setIndexMng={setIndexMng} + readonly={true} /> <div className="px-6"> <div className=""> @@ -300,8 +303,8 @@ export function PbnstSttnModal({ data, titleVisible }: { data: customPbnst; titl }} > {fcltTab === "fclt" ? ( - <HeadMakeColSpan upHeadList={pbnstSttn.ruseFcltNodeList} /> - ) : undefined} + <HeadMakeColSpan upHeadList={pbnstSttn.ruseFcltNodeList} /> + ) : undefined} </UiTable> </TabsContent> </Tabs> @@ -323,22 +326,22 @@ export function PbnstSttnModal({ data, titleVisible }: { data: customPbnst; titl <TabsContent className="max-h-full" value={ruseTab}> {prfData && ( <ListDiv className="col-span-8 pr-6 "> - <ScrollArea className="h-[60vh]"> - <div className="card-header"> - <h3 className="text-2xl font-medium text-label"> - {"하수처리수재이용 실적(m³) 등록결과"} - </h3> - </div> - <Table variant="secondary"> - <TableHeader className="font-bold"> - {headMakeprfmnc(pbnstPrfmncSttn.monthSttnHeadList, [])} - </TableHeader> - <TableBody key={prfmnc.pageKey + 'pageKey'}> - {InputTableBody(prfData[ruseTab as keyof typeof prfData] || [], pbnstPrfmncSttn.monthSttnHeadList, setPrfData as any)} - </TableBody> - </Table> - </ScrollArea> - </ListDiv> + <ScrollArea className="h-[60vh]"> + <div className="card-header"> + <h3 className="text-2xl font-medium text-label"> + {"하수처리수재이용 실적(m³) 등록결과"} + </h3> + </div> + <Table variant="secondary"> + <TableHeader className="font-bold"> + {headMakeprfmnc(pbnstPrfmncSttn.monthSttnHeadList, [])} + </TableHeader> + <TableBody key={prfmnc.pageKey + 'pageKey'}> + {InputTableBody(prfData[ruseTab as keyof typeof prfData] || [], pbnstPrfmncSttn.monthSttnHeadList, setPrfData as any)} + </TableBody> + </Table> + </ScrollArea> + </ListDiv> )} </TabsContent> </Tabs> diff --git a/apps/wr/components/ui/modal/sttn/sttnDetailModal/coDatailModal.tsx b/apps/wr/components/ui/modal/sttn/sttnDetailModal/coDatailModal.tsx index 8ad5da057..1db650f09 100644 --- a/apps/wr/components/ui/modal/sttn/sttnDetailModal/coDatailModal.tsx +++ b/apps/wr/components/ui/modal/sttn/sttnDetailModal/coDatailModal.tsx @@ -421,11 +421,11 @@ export default function CoDetailModal({ <Input className={selectClass} placeholder="" - type="number" + type="text" onChange={(e) => { - field.onChange(e.target.value); + handleCommaNumberChange(e, field.onChange); }} - value={field.value ?? 0} + value={formatCommaNumber(field.value) ?? 0} min={0} readOnly={true} /> diff --git a/apps/wr/public/sample_rswtStats.xlsx b/apps/wr/public/sample_rswtStats.xlsx index 702c4cec0..bee059e26 100644 Binary files a/apps/wr/public/sample_rswtStats.xlsx and b/apps/wr/public/sample_rswtStats.xlsx differ diff --git a/package.json b/package.json index e02227317..9e318b357 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "packages/*" ], "scripts": { - "build": "turbo run build --filter=!cs", + "build": "turbo run build", "build:common": "turbo run build --filter=@common/*", "dev": "turbo run dev", "dev:cs": "turbo run dev --filter=cs", diff --git a/packages/common/business_components/src/ui/tab/index-2.tsx b/packages/common/business_components/src/ui/tab/index-2.tsx deleted file mode 100644 index 71c103835..000000000 --- a/packages/common/business_components/src/ui/tab/index-2.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { Tabs, TabsList, TabsTrigger } from '@common/components/ui'; -import React from 'react'; - -interface TabItem { - value: string; - label: string; - onClick?: () => void; -} - -interface UITabProps extends React.HTMLAttributes<HTMLDivElement> { - defaultValue?: string; - tabList: TabItem[]; - children: React.ReactNode; -} - -const UITab2 = React.forwardRef< - HTMLDivElement, - UITabProps ->(({defaultValue, tabList, children}, ref)=>{ - return ( - <Tabs defaultValue={defaultValue || tabList[0]?.value} className={"w-full"}> - <TabsList className="flex"> - {tabList.map((tab) => ( - <TabsTrigger - key={tab.value} - value={tab.value} - onClick={tab.onClick} - className="py-2 px-4 text-sm font-medium border-b-2 focus:outline-none data-[state=active]:border-blue-500 data-[state=active]:text-blue-600 data-[state=inactive]:border-transparent data-[state=inactive]:text-gray-500 hover:text-gray-700 hover:border-gray-300" - > - {tab.label} - </TabsTrigger> - ))} - </TabsList> - {children} - </Tabs> - ) -}) -export { UITab2 }; diff --git a/packages/common/business_components/src/ui/table/index-2.tsx b/packages/common/business_components/src/ui/table/index-2.tsx deleted file mode 100644 index 9756d2dfa..000000000 --- a/packages/common/business_components/src/ui/table/index-2.tsx +++ /dev/null @@ -1,155 +0,0 @@ -import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components"; -import { useEffect, useState } from "react"; -import UiPageNations from "./uiPageNations"; - -type UiTableProps = { - headName: React.ReactNode | undefined; - tableData: { [key: string]: string | number | boolean | object }[]; - headlist: UiHeadProps[]; - pageSize: number; - total: number; - children: React.ReactNode | undefined; - cellClick: ((index: number | undefined, headId: string) => void) | undefined; - onPageChange: (page: number) => void; - className?: string; - resetPageNo?: boolean; - cur?: number; - height?: string; // ✅ 추가된 prop -}; - -type UiHeadProps = { - id: string; - title: string; - align?: string; -}; - -export function UiTable2({ - tableData, - headlist, - pageSize, - total, - children, - headName, - cellClick, - onPageChange, - className = '', - resetPageNo = false, - cur, - height = '45vh', // ✅ 기본값 설정 -}: UiTableProps) { - const [idx, setIdx] = useState<number>(-1); - const [curState, setCurState] = useState<number>(cur ?? 1); - - useEffect(() => { - setCurState(cur ?? 1); - }, [cur]); - - useEffect(() => { - if (resetPageNo) { - setCurState(1); - onPageChange(1); - } - }, [onPageChange, resetPageNo]); - - const handlePageChange = (page: number) => { - setCurState(page); - onPageChange(page); - }; - - const handleCellClick = (index: number, headId: string) => { - if (cellClick) { - cellClick(index, headId); - setIdx(index); - } - }; - - const startIdx = (curState - 1) * pageSize; - - return ( - <> - {headName && ( - <div className="card-header"> - <div className="flex w-full items-center justify-between"> - <h3 className="text-2xl font-medium text-label">{headName}</h3> - </div> - </div> - )} - - <div className={`card !m-[1.2rem] !p-0 relative ${className}`}> - {/* ✅ 외부에서 조절 가능한 높이 적용 */} - <div className="overflow-auto" style={{ height }}> - <Table variant="secondary" className="w-full"> - <TableHeader className="bg-white"> - {children ? ( - <>{children}</> - ) : ( - <TableRow> - {headlist.map((head) => ( - <TableHead - key={head.id} - className="min-w-[120px] max-w-[180px] w-[150px] - text-center whitespace-nowrap overflow-hidden - text-ellipsis bg-white" - > - {head.title} - </TableHead> - ))} - </TableRow> - )} - </TableHeader> - - <TableBody className="text-center"> - {tableData.length > 0 ? ( - tableData.map((el, index) => ( - <TableRow key={index + "row"}> - {headlist.map((head) => ( - <TableCell - key={head.id + index} - className={` - ${head.align === 'right' - ? 'text-right' - : head.align === 'center' - ? 'text-center' - : 'text-center' - } - ${cellClick && idx === index ? '!font-[1000] cursor-pointer' : - cellClick ? 'cursor-pointer' : ''} - `} - onClick={() => handleCellClick(startIdx + index, head.id)} - > - {typeof el[head.id] === 'number' - ? String(el[head.id]).replace(/\B(?=(\d{3})+(?!\d))/g, ",") - : String(el[head.id] ?? '')} - </TableCell> - ))} - </TableRow> - )) - ) : ( - <TableRow> - <TableCell colSpan={headlist.length} className="p-0"> - {/* ✅ 높이 보장 + 가운데 정렬용 div */} - <div className="flex justify-center items-center text-gray-500" style={{ height: `calc(${height} - 70px)` }}> - <span className="text-xl">🔍 검색 결과가 없습니다.</span> - </div> - </TableCell> - </TableRow> - )} - </TableBody> - </Table> - </div> - - {/* 페이지네이션 하단 고정 */} - {( - <div className="sticky left-0 right-0 bottom-0 bg-white z-20 mt-5"> - <UiPageNations - total={total} - cur={curState} - pageSize={pageSize} - onPageChange={handlePageChange} - /> - </div> - )} - </div> - </> - ); -} diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index b4a66d839..de6fed944 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -1,14 +1,21 @@ -"use client" +"use client"; -import { Checkbox, Table, TableBody, TableCell, TableHeader, TableRow } from "@common/components"; +import { + Checkbox, + Table, + TableBody, + TableCell, + TableHeader, + TableRow, +} from "@common/components"; import { useEffect, useState, useRef } from "react"; import { HeadMakeColSpan } from "./HeadMakeColSpan"; import UiPageNations from "./uiPageNations"; import { Check } from "lucide-react"; -export type ChkClass={ - chk:boolean - readonly:boolean -} +export type ChkClass = { + chk: boolean; + readonly: boolean; +}; type UiTableProps = { headName: React.ReactNode | undefined; tableData: { [key: string]: any }[]; @@ -23,22 +30,35 @@ type UiTableProps = { boldArray?: number[]; resetSelection?: boolean; index?: number; -} +}; type UiHeadProps = { id: string; title: string; align?: string; visible?: boolean; -} +}; -export function UiTable({ tableData, headlist, pageSize, total, headName, children, cellClick, onPageChange, className = '', resetPageNo = false, boldArray = [], resetSelection = false, index = -1 }: UiTableProps) { +export function UiTable({ + tableData, + headlist, + pageSize, + total, + headName, + children, + cellClick, + onPageChange, + className = "", + resetPageNo = false, + boldArray = [], + resetSelection = false, + index = -1, +}: UiTableProps) { const [cur, setCur] = useState<number>(1); const [idx, setIdx] = useState<number>(index); const [headerHeight, setHeaderHeight] = useState<number>(0); const headerRef = useRef<HTMLTableSectionElement>(null); - useEffect(() => { if (resetPageNo) { setCur(1); @@ -54,14 +74,14 @@ export function UiTable({ tableData, headlist, pageSize, total, headName, childr useEffect(() => { if (headerRef.current) { - setHeaderHeight(headerRef.current.offsetHeight-5); + setHeaderHeight(headerRef.current.offsetHeight - 5); } }, [tableData, headlist]); const handlePageChange = (page: number) => { setCur(page); onPageChange(page); - } + }; const handleCellClick = (index: number, headId: string) => { if (cellClick) { @@ -70,91 +90,158 @@ export function UiTable({ tableData, headlist, pageSize, total, headName, childr } }; - return ( <> - {headName ? <div className="card-header"> - <h3 className="text-2xl font-medium text-label">{headName}</h3> - </div> : <></>} - <div className={`card !m-[1.2rem] !p-0r ${className}`}> + {headName ? ( + <div className="card-header"> + <h3 className="text-2xl font-medium text-label">{headName}</h3> + </div> + ) : ( + <></> + )} + <div className={`card !p-0r !m-[1.2rem] ${className}`}> <Table variant="secondary"> <TableHeader ref={headerRef} className="font-bold"> {children ? children : <HeadMakeColSpan upHeadList={headlist} />} </TableHeader> - <TableBody className='text-center'> - {tableData.length > 0 ? tableData?.map((el: Record<string, unknown>, index) => ( - <TableRow key={`row-${index}`}> - {headlist - .filter((item) => item.visible != false) - .map((head) => ( - head.id && head.id.length > 1 && ( - boldArray.includes(index) - ? - <TableCell - className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : 'text-center'} ${cellClick && idx === index ? '!font-[1000] cursor-pointer' : - cellClick ? 'cursor-pointer' : '' - } !font-bold sticky bg-secondary z-40`} - style={{ top: `${headerHeight + (index * 39)}px` }} - onClick={() => handleCellClick(index, head.id)} - key={`cell-${head.id}-${index}`} - > - {typeof el[head.id] !== 'number' ? String(el[head.id] ?? '') : String(el[head.id]).includes('.') - ? String(el[head.id]).split('.').map((part, index) => - index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part - ).join('.') - : String(el[head.id] ?? '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")} - </TableCell> - : - <TableCell - className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : 'text-center'} ${cellClick && idx === index ? '!font-[1000] cursor-pointer' : - cellClick ? 'cursor-pointer' : '' + <TableBody className="text-center"> + {tableData.length > 0 ? ( + tableData?.map((el: Record<string, unknown>, index) => ( + <TableRow key={`row-${index}`}> + {headlist + .filter((item) => item.visible != false) + .map( + (head) => + head.id && + head.id.length > 1 && + (boldArray.includes(index) ? ( + <TableCell + className={`${head.align === "right" ? "text-right" : head.align === "center" ? "text-center" : "text-center"} ${ + cellClick && idx === index + ? "cursor-pointer !font-[1000]" + : cellClick + ? "cursor-pointer" + : "" + } sticky z-40 bg-secondary !font-bold`} + style={{ top: `${headerHeight + index * 39}px` }} + onClick={() => handleCellClick(index, head.id)} + key={`cell-${head.id}-${index}`} + > + {typeof el[head.id] !== "number" + ? String(el[head.id] ?? "") + : String(el[head.id]).includes(".") + ? String(el[head.id]) + .split(".") + .map((part, index) => + index === 0 + ? part.replace( + /\B(?=(\d{3})+(?!\d))/g, + ",", + ) + : part, + ) + .join(".") + : String(el[head.id] ?? "").replace( + /\B(?=(\d{3})+(?!\d))/g, + ",", + )} + </TableCell> + ) : ( + <TableCell + className={`${head.align === "right" ? "text-right" : head.align === "center" ? "text-center" : "text-center"} ${ + cellClick && idx === index + ? "cursor-pointer !font-[1000]" + : cellClick + ? "cursor-pointer" + : "" } mt-[${boldArray.length * 40}px]`} - onClick={() => handleCellClick(index, head.id)} - key={`cell-${head.id}-${index}`} - > - {typeof el[head.id] === 'object' - ? <Checkbox - checked={(el[head.id] as ChkClass).chk === true} - onCheckedChange={(checked) => { - if((el[head.id] as ChkClass).readonly == true) return - (el[head.id] as ChkClass).chk = Boolean(checked); - }} - > - <Check className="h-6 w-6 text-primary" /> - </Checkbox>: - typeof el[head.id] === 'boolean' - ? <Checkbox - checked={el[head.id] === true} - onCheckedChange={(checked) => { - el[head.id] = checked; - }} - > - <Check className="h-6 w-6 text-primary" /> - </Checkbox> - : - typeof el[head.id] !== 'number' ? - String(el[head.id] ?? '') : - String(el[head.id]).includes('.') - ? String(el[head.id]).split('.').map((part, index) => - index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part - ).join('.') - : - String(el[head.id] ?? '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")} - </TableCell> - ) - ))} - </TableRow> - )) : ( + onClick={() => handleCellClick(index, head.id)} + key={`cell-${head.id}-${index}`} + > + { + //체크박스 유형애서 readOnly가 필요한 경우를 위해서 ChkClass 를 사용해서 readOnly 처리함. + typeof el[head.id] === "object" && + el[head.id] !== null && + "chk" in (el[head.id] as object) && + "readonly" in (el[head.id] as object) ? ( + <Checkbox + checked={ + (el[head.id] as ChkClass)?.chk === true + } + onCheckedChange={(checked) => { + { + console.log(el[head.id]); + } + if ( + (el[head.id] as ChkClass).readonly == true + ) + return; + (el[head.id] as ChkClass).chk = + Boolean(checked); + }} + > + <Check className="h-6 w-6 text-primary" /> + </Checkbox> + ) : typeof el[head.id] === "boolean" ? ( + <Checkbox + checked={el[head.id] === true} + onCheckedChange={(checked) => { + el[head.id] = checked; + }} + > + <Check className="h-6 w-6 text-primary" /> + </Checkbox> + ) : typeof el[head.id] !== "number" ? ( + String(el[head.id] ?? "") + ) : String(el[head.id]).includes(".") ? ( + String(el[head.id]) + .split(".") + .map((part, index) => + index === 0 + ? part.replace( + /\B(?=(\d{3})+(?!\d))/g, + ",", + ) + : part, + ) + .join(".") + ) : ( + String(el[head.id] ?? "").replace( + /\B(?=(\d{3})+(?!\d))/g, + ",", + ) + ) + } + </TableCell> + )), + )} + </TableRow> + )) + ) : ( <TableRow> - <TableCell colSpan={headlist.filter((item) => item.visible != false).length} className="h-24 text-center text-gray-500"> + <TableCell + colSpan={ + headlist.filter((item) => item.visible != false).length + } + className="h-24 text-center text-gray-500" + > 조회된 결과가 없습니다. </TableCell> </TableRow> )} </TableBody> </Table> - {total <= 0 ? <></> : <UiPageNations total={total} cur={cur} pageSize={pageSize} onPageChange={handlePageChange} />} + {total <= 0 ? ( + <></> + ) : ( + <UiPageNations + total={total} + cur={cur} + pageSize={pageSize} + onPageChange={handlePageChange} + /> + )} </div> </> ); -} \ No newline at end of file +}