diff --git a/apps/wr/app/globals.css b/apps/wr/app/globals.css index f30aa3031..a439708d4 100644 --- a/apps/wr/app/globals.css +++ b/apps/wr/app/globals.css @@ -1,70 +1,10 @@ -@import "../../../packages/common/components/src/base.css"; +@import "@common/assets/styles/base.css"; +@import "@common/assets/styles/diveicon.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; - } -} +html, +body { + font-family: "Noto Sans KR", sans-serif; + font-size: 10px; +} \ No newline at end of file diff --git a/apps/wr/app/loading.jsx b/apps/wr/app/loading.jsx new file mode 100644 index 000000000..5d639b857 --- /dev/null +++ b/apps/wr/app/loading.jsx @@ -0,0 +1,10 @@ +export default function loading (){ + + return( + <> +
+ 'test' +
+ + ) +} \ No newline at end of file diff --git a/apps/wr/app/page.tsx b/apps/wr/app/page.tsx index f46ccea25..b18914cdc 100644 --- a/apps/wr/app/page.tsx +++ b/apps/wr/app/page.tsx @@ -19,9 +19,9 @@ export default function Home() { - {/* */} + ); diff --git a/apps/wr/app/ruseFcltMng/fcltReg/htdflReg/page.jsx b/apps/wr/app/ruseFcltMng/fcltReg/htdflReg/page.jsx deleted file mode 100644 index aa3c521d8..000000000 --- a/apps/wr/app/ruseFcltMng/fcltReg/htdflReg/page.jsx +++ /dev/null @@ -1,64 +0,0 @@ -"use client"; - -import { useWrStore } from "@/app/store"; -import { - ScrollArea, - SearchDiv, - SearchInput, - UiTable, -} from "@common/business_components"; -import { Button } from "@common/components"; -import { headMakeColSpan } from "../rainReg/page"; -import { HtdflRegForm } from "@/components/ui/form/fcltReg/htdflReg/component"; - -export default function Home() { - const { htdfl } = useWrStore((state) => state); - const nodeList = headMakeColSpan(htdfl.upHeadList); - - const headName = () => { - return ( - <> -

○건축물 목록

- - ); - }; - - return ( - <> -
-
-

온배수시설 등록

-
- -
- -
-
- - - -
- -
-
- -
- - {nodeList} - -
-
- - - -
-
- - ); -} diff --git a/apps/wr/app/ruseFcltMng/fcltReg/htdflReg/page.tsx b/apps/wr/app/ruseFcltMng/fcltReg/htdflReg/page.tsx new file mode 100644 index 000000000..ba5a691d1 --- /dev/null +++ b/apps/wr/app/ruseFcltMng/fcltReg/htdflReg/page.tsx @@ -0,0 +1,104 @@ +"use client"; + +import { useWrStore } from "@/app/store"; +import { + ContentsDiv, + ScrollArea, + SearchDiv, + SearchFormLeft, + SearchFormRight, + SearchInput, + Title, + UiTable, +} from "@common/business_components"; +import { Button } from "@common/components"; +import { headMakeColSpan } from "../rainReg/page"; +import ListDiv from "@common/business_components/ui/list_div"; +import { useEffect, useState } from "react"; +import { tableData } from "@/components/lib/func/commom"; +import { HtdflRegForm } from "@/components/ui/form/fcltReg/htdflReg/component"; +import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg"; +import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg"; + +export default function Home() { + const { code, htdfl, initHtdfl } = useWrStore((state) => state); + const nodeList = headMakeColSpan(htdfl.upHeadList); + const [searchTxt, setSearchTxt] = useState(""); + const [rswtForm, setRswtForm] = useState(); + const [bdstTable, setbdstTable] = useState(); + const { htdflRes } = htdfl; + + useEffect(() => { + if (!htdfl.isInit) { + initHtdfl(undefined); + } + }, [htdfl.isInit, initHtdfl]); + + useEffect(() => { + if (code.sggCd.length > 0) { + setbdstTable(tableData(htdflRes, { code })); + } + }, [code, htdflRes]); + + const cellClick: (val: number | undefined) => void = (val) => { + if ((bdstTable ?? []).length > 0 && val !== undefined) { + { + setRswtForm(htdflRes[val]); + } + } + }; + return ( + <> + +
+
+ + <SearchDiv> + <SearchFormLeft> + <SearchInput + className="col-span-3 my-7" + label="건물명:" + textValue={searchTxt || ""} + setText={(e) => { + setSearchTxt(e); + }} + /> + </SearchFormLeft> + <SearchFormRight> + <Button className="mr-4 rounded-lg">조회</Button> + <Button className="mr-4 rounded-lg">신규등록</Button> + </SearchFormRight> + </SearchDiv> + </div> + </div> + + <div className="grid grid-cols-6 gap-4 "> + <div className="col-span-4"> + <ListDiv> + <UiTable + tableData={bdstTable || []} + headlist={htdfl.upHeadList} + pageSize={100} + total={10} + headName={"○건축물 목록"} + cellClick={cellClick} + > + {nodeList} + </UiTable> + </ListDiv> + </div> + <div className="col-span-2 max-h-full ovreflow-y-scroll"> + <ListDiv> + <ScrollArea> + <HtdflRegForm + htdflForm={rswtForm ?? ({} as customRswtBdst)} + isModal={false} + /> + </ScrollArea> + </ListDiv> + </div> + </div> + </ContentsDiv> + </> + ); +} diff --git a/apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx b/apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx index 225f37ba5..ef0281819 100644 --- a/apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx +++ b/apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx @@ -1,9 +1,10 @@ "use client"; import { useWrStore } from "@/app/store"; import type { - RainyBuilding, + customRainBdst, TableUpperProps, } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; +import { tableData } from "@/components/lib/func/commom"; import { RainRegForm } from "@/components/ui/form/fcltReg/rainReg/component"; import { BdstReg } from "@/components/ui/modal/bdstReg/component"; import { @@ -58,8 +59,8 @@ export default function Home() { return state; }); const { rainRes } = rain; - const [rainForm, setRainForm] = useState<RainyBuilding>(); - const [bdstTable, setbdstTable] = useState<RainyBuilding[]>(); + const [rainForm, setRainForm] = useState<customRainBdst>(); + const [bdstTable, setbdstTable] = useState<customRainBdst[]>(); const [searchTxt , setSearchTxt] = useState<string>() const nodeList = headMakeColSpan(rain.upHeadList); @@ -71,22 +72,8 @@ export default function Home() { useEffect(() => { if (code.sggCd.length > 0) { - const table = rainRes.map((item) => { - const sggText = code.sggCd.find( - (cd) => cd.val === Number(item.sggCd) - )?.text; - const cityText = code.cityCd.find( - (cd) => cd.val === Number(item.ctpvCd) - )?.text; - const bdstusgText = code.bdstUsgCd.find( - (cd) =>cd.val === item?.reuseBuilding[0]?.bdstUsgCd - ) - - - return { ...item, sggText: sggText, cityText: cityText ,bdsgUsgText:bdstusgText }; - }); - - setbdstTable(table); + + setbdstTable( tableData(rainRes, { code })); } }, [code, rainRes]); const cellClick: (val: number | undefined) => void = (val) => { @@ -117,7 +104,7 @@ export default function Home() { <UiModal butNm="신규등록" title="건축물 시설 등록(빗물이용시설)" - body={<BdstReg moType="rain"></BdstReg>} + body={<BdstReg moType="RNB"></BdstReg>} bodyClass="sm:max-w-7xl" /> </SearchFormRight> diff --git a/apps/wr/app/ruseFcltMng/fcltReg/rswtReg/page.tsx b/apps/wr/app/ruseFcltMng/fcltReg/rswtReg/page.tsx index ecb7dff20..30b92fd4a 100644 --- a/apps/wr/app/ruseFcltMng/fcltReg/rswtReg/page.tsx +++ b/apps/wr/app/ruseFcltMng/fcltReg/rswtReg/page.tsx @@ -1,7 +1,5 @@ "use client"; import { useWrStore } from "@/app/store"; -import type { TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; -import { RswtrRegForm } from "@/components/ui/form/fcltReg/rswtrReg/component"; import { BdstReg } from "@/components/ui/modal/bdstReg/component"; import { ContentsDiv, @@ -18,13 +16,18 @@ import ListDiv from "@common/business_components/ui/list_div"; import { Button} from "@common/components"; import { headMakeColSpan } from "../rainReg/page"; import { useEffect, useState } from "react"; -import type { RswtBuilding } from "@/app/store/ruseFcltMng/fcltReg/rswtReg"; +import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg"; +import { tableData } from "@/components/lib/func/commom"; +import { RswtrRegForm } from "@/components/ui/form/fcltReg/rswtrReg/RswtrRegForm"; export default function Home() { const { code,rswt,initRswt } = useWrStore((state) => state); const nodeList = headMakeColSpan(rswt.upHeadList); - const [bdstTable, setbdstTable] = useState<RswtBuilding[]>(); + const [rswtForm, setRswtForm] = useState<customRswtBdst>(); + const [searchTxt , setSearchTxt] = useState<string>() + + const [bdstTable, setbdstTable] = useState<customRswtBdst[]>(); const {rswtRes} = rswt; @@ -37,20 +40,20 @@ export default function Home() { }, [rswt.isInit, initRswt]); useEffect(() => { if (code.sggCd.length > 0) { - console.log(rswtRes) - const table = rswtRes?.map((item) => { - const sggText = code.sggCd.find( - (cd) => cd.val === Number(item.sggCd) - )?.text; - const cityText = code.cityCd.find( - (cd) => cd.val === Number(item.ctpvCd) - )?.text; - return { ...item, sggText: sggText, cityText: cityText }; - }); - - setbdstTable(table); + + setbdstTable( tableData(rswtRes, { code })); } }, [code, rswtRes]); + const cellClick: (val: number | undefined) => void = (val) => { + console.log(" val ", val) + if ((bdstTable ?? []).length > 0 && val !== undefined) { + { + console.log(" val ", val) + setRswtForm(rswtRes[val]); + } + } + }; + return ( <> @@ -63,19 +66,16 @@ export default function Home() { <SearchInput className="col-span-3 my-7" label="건물명:" - textValue={""} - setText={function (val: string): void { - throw new Error("Function not implemented."); - }} + textValue={searchTxt||""} + setText={(e)=>{setSearchTxt(e)}} /> </SearchFormLeft> <SearchFormRight> - <Button className="mr-4 rounded-lg">조회</Button> - <Button className="mr-4 rounded-lg">저장</Button> + <Button className="mr-4 rounded-lg" onClick={(e)=>{initRswt(searchTxt||"")} }>조회</Button> <UiModal butNm="신규등록" title="건축물 시설 등록(중수도시설)" - body={<BdstReg moType={"rswt"}></BdstReg>} + body={<BdstReg moType={"RST"}></BdstReg>} bodyClass="sm:max-w-7xl" /> </SearchFormRight> @@ -92,7 +92,7 @@ export default function Home() { pageSize={100} total={10} headName={"○건축물 목록"} - cellClick={undefined} + cellClick={cellClick} > {nodeList} </UiTable> @@ -101,7 +101,11 @@ export default function Home() { <div className="col-span-2 max-h-full ovreflow-y-scroll"> <ListDiv> <ScrollArea> - <RswtrRegForm></RswtrRegForm> + <RswtrRegForm + rswtForm={rswtForm ?? {} as customRswtBdst} + isModal={false} + + /> </ScrollArea> </ListDiv> </div> diff --git a/apps/wr/app/store/common/code/index.ts b/apps/wr/app/store/common/code/index.ts index 7125f5b71..c324e34c5 100644 --- a/apps/wr/app/store/common/code/index.ts +++ b/apps/wr/app/store/common/code/index.ts @@ -43,41 +43,39 @@ export const rainFcltCd = [ { val: "9", text: "기타" }, { val: "10", text: "확인불가" }, ]; - -//중수도 필수 원수종류 -export const rswtBdstType :selectArray[]= [ - { text: "숙박업", val: "17" }, - { text: "목욕장업", val: "18" }, - { text: "공장", val: "19" }, - { text: "발전시설", val: "20" }, - { text: "관광단지개발사업", val: "21" }, - { text: "도시개발사업", val: "22" }, - { text: "산업단지개발사업", val: "23" }, - { text: "택지개발사업", val: "24" }, - { text: "대규모점포(대형마트)", val: "25" }, - { text: "대규모점포(전문점)", val: "26" }, - { text: "대규모점포(백화점)", val: "27" }, - { text: "대규모점포(쇼핑센터)", val: "28" }, - { text: "대규모점포(복합쇼핑몰)", val: "29" }, - { text: "물류시설", val: "30" }, - { text: "운수시설(여객자동차터미널)", val: "31" }, - { text: "운수시설(철도시설)", val: "32" }, - { text: "운수시설(공항시설)", val: "33" }, - { text: "운수시설(항만시설)", val: "34" }, - { text: "업무시설(공공업무시설)", val: "35" }, - { text: "업무시설(금융업소)", val: "36" }, - { text: "업무시설(사무소)", val: "37" }, - { text: "업무시설(결혼상담소 등 소개업소)", val: "38" }, - { text: "업무시설(출판사)", val: "39" }, - { text: "업무시설(신문사)", val: "40" }, - { text: "업무시설(오피스텔)", val: "41" }, - { text: "교정시설", val: "42" }, - { text: "방송국", val: "43" }, - { text: "전신전화국", val: "44" }, - { text: "기타", val: "45" }, +// 중수도 필수 원수종류 +export const rswtBdstType: selectArray[] = [ + { text: "숙박업", val: 17 }, + { text: "목욕장업", val: 18 }, + { text: "공장", val: 19 }, + { text: "발전시설", val: 20 }, + { text: "관광단지개발사업", val: 21 }, + { text: "도시개발사업", val: 22 }, + { text: "산업단지개발사업", val: 23 }, + { text: "택지개발사업", val: 24 }, + { text: "대규모점포(대형마트)", val: 25 }, + { text: "대규모점포(전문점)", val: 26 }, + { text: "대규모점포(백화점)", val: 27 }, + { text: "대규모점포(쇼핑센터)", val: 28 }, + { text: "대규모점포(복합쇼핑몰)", val: 29 }, + { text: "물류시설", val: 30 }, + { text: "운수시설(여객자동차터미널)", val: 31 }, + { text: "운수시설(철도시설)", val: 32 }, + { text: "운수시설(공항시설)", val: 33 }, + { text: "운수시설(항만시설)", val: 34 }, + { text: "업무시설(공공업무시설)", val: 35 }, + { text: "업무시설(금융업소)", val: 36 }, + { text: "업무시설(사무소)", val: 37 }, + { text: "업무시설(결혼상담소 등 소개업소)", val: 38 }, + { text: "업무시설(출판사)", val: 39 }, + { text: "업무시설(신문사)", val: 40 }, + { text: "업무시설(오피스텔)", val: 41 }, + { text: "교정시설", val: 42 }, + { text: "방송국", val: 43 }, + { text: "전신전화국", val: 44 }, + { text: "기타", val: 45 }, ]; - const orgwtKndCd = [ { text: "오수(변기 오수 제외)", val: "1" }, { text: "오수", val: "2" }, diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/bdstReg/index.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/bdstReg/index.tsx index f7b990dba..375382e9c 100644 --- a/apps/wr/app/store/ruseFcltMng/fcltReg/bdstReg/index.tsx +++ b/apps/wr/app/store/ruseFcltMng/fcltReg/bdstReg/index.tsx @@ -1,5 +1,5 @@ import { getFectch } from "@/components/lib/api"; -import type { RainyBuilding } from "../rainReg"; +import type { bdstAll } from "../rainReg"; type TableUpperProps = { id: string; @@ -19,7 +19,7 @@ type TableUpperProps = { { id: "archChgArea", title: "면적", upName: "upChangeRe", upSequnce: 3 }, ]; -const bdstBase: RainyBuilding[] = []; +const bdstBase: bdstAll[] = []; @@ -28,7 +28,7 @@ export type bdstFulType = bdstState & bdstActions; export type bdstState = { bdst: { - bdstBase: RainyBuilding[]; + bdstBase: any[]; moUpHeadList:TableUpperProps[] }; }; @@ -59,11 +59,17 @@ export const bdstActionsExport: (set: any) => bdstActions = ( try{ const bdst = await findBdstInfo(sggCd, searchTxt, flg); + const makeBdst = bdst.map((item:any) => { + return { + ...item, + reuseBuilding:[] + }; + }) return set((state:bdstState) =>({ ...state, bdst:{ ...state.bdst, - bdstBase:bdst + bdstBase:makeBdst } })) diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/htdflReg/index.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/htdflReg/index.tsx index 890505198..cbbc62163 100644 --- a/apps/wr/app/store/ruseFcltMng/fcltReg/htdflReg/index.tsx +++ b/apps/wr/app/store/ruseFcltMng/fcltReg/htdflReg/index.tsx @@ -1,89 +1,191 @@ +import { getFectch } from "@/components/lib/api"; import { upHeadList, - type bdstType, type TableUpperProps, } from "../rainReg"; -const htdflOfObject: bdstType[] = [ - { - sido: "서울", - sigungo: "종로구", - facilityName: "그랑서울", - location: "종로 33", - locationgubun: "업무시설", - firstConstructionPermission: "2024-10-10", - buildingArea: "50", - facilityCapacity: "800,000", - reuse: "Y", - permissionDay: "2024-10-10", - register: "Y", - legalTargetYn: "Y", - }, - { - sido: "서울", - sigungo: "종로구", - facilityName: "그랑서울", - location: "종로 33", - locationgubun: "업무시설", - firstConstructionPermission: "2024-10-10", - buildingArea: "50", - facilityCapacity: "800,000", - reuse: "Y", - permissionDay: "2024-10-10", - register: "Y", - legalTargetYn: "Y", - }, - { - sido: "서울", - sigungo: "종로구", - facilityName: "그랑서울", - location: "종로 33", - locationgubun: "업무시설", - firstConstructionPermission: "2024-10-10", - buildingArea: "50", - facilityCapacity: "800,000", - reuse: "Y", - permissionDay: "2024-10-10", - register: "Y", - legalTargetYn: "Y", - }, -]; + +import { z } from "zod"; + +export const hdtflZod = z.object({ + bdstInfoPk: z.number().nullish().default(0), + ctpvCd: z.number().default(0), + sggCd: z.number().default(0), + daddr: z.string().default(""), + bdstNm: z.string().default(""), + frstArchPrmsnDt: z.date().default(() => new Date()), + archChgPrmsnDt: z.coerce.date().nullish().default(null), + archArea: z.number().default(0), + archChgArea: z.number().nullish().default(0), + + reuseBuilding: z.array( + z.object({ + bdstRuseFcltPk: z.number().nullish().default(0), + bdstInfoFk: z.number().nullish().default(0), + instlCmptnDt: z.coerce.date().default(() => new Date()), + instlCst: z.number().nullish().default(0), + operMngCd: z.string().nullish().default(""), + anlOperCst: z.number().default(0), + instlCstSprtYn: z.string().default(""), + instlCstSprtAmt: z.number().nullish().default(0), + grntchBdstCertYn: z.string().default(""), + grntchBdstCertYr: z.string() + .max(4, "4자리 연도를 입력하세요") + .regex(/^\d{4}$/, "4자리 연도를 입력하세요") + .nullish() + .default(""), + grntchBdstCertNo: z.string().nullish().default(""), + grntchBdstCertGrd: z.string().nullish().default(""), + crgRdctYn: z.string().default(""), + crgRdctBss: z.string().nullish().default(""), + crgRdctAmt: z.number().nullish().default(0), + ruseFcltFlg: z.string().nullish().default(""), + bdstUsgCd: z.number().default(0), + lawTrgtYn: z.string().default(""), + + // htdflObj 매핑 + htdfObj: z.object({ + htdflFcltPk: z.number().nullish().default(0), + bdstRuseFcltFk: z.number().nullish().default(0), + etgtType: z.string().default(""), + fclCpct: z.number().default(0), + plwtYn: z.string().default(""), + orgwtWtritSpt: z.number().default(0), + orgwtOcrnProcs: z.string().default(""), + wtritEntrcTp: z.number().default(0), + amtgnr: z.number().default(0), + prcsProcsYn: z.string().default(""), + prcsFcltCpct: z.number().default(0), + fmYn: z.string().default(""), + utztnCpct: z.number().default(0), + utztnUsg: z.string().default(""), + grssClfg: z.number().default(0), + combResdch: z.number().default(0), + trbt: z.number().default(0), + bod: z.number().default(0), + smll: z.number().default(0), + crmty: z.number().default(0), + tn: z.number().default(0), + tph: z.number().default(0), + ph: z.number().default(0), + clIonQnt: z.number().default(0), + cdtnv: z.number().default(0), + emsnExitTp: z.number().default(0) + }).default({}) + }) + ).default([]) +}); + +// export type customHtdfBdst = Omit<bdstAll, 'reuseBuilding'> & { +// reuseBuilding: htdfReuseBuilding[]; +// }; + +export type customHtdflBdst =z.infer<typeof hdtflZod>; + +// 타입을 조드로 만들어가 하는ㅓㄹ로 테트 +export type htdflReuseBuilding={ + bdstRuseFcltPk: number|undefined + bdstInfoFk: number|undefined + instlCmptnDt: Date| undefined; + instlCst: number|undefined + operMngCd: string, + anlOperCst: number|undefined + instlCstSprtYn:string| undefined; + instlCstSprtAmt: number|undefined + grntchBdstCertYn:string| undefined; + grntchBdstCertYr: string| undefined; + grntchBdstCertNo:string| undefined; + grntchBdstCertGrd:string| undefined; + crgRdctYn:string + crgRdctBss:string| undefined; + crgRdctAmt: number|undefined + ruseFcltFlg:string + bdstUsgCd: number|undefined + lawTrgtYn:string + htdflObj:htdflObj +} + +export type htdflObj = { + htdflFcltPk: number + bdstRuseFcltFk: number + etgtType: string + fclCpct: number|undefined + plwtYn: string + orgwtWtritSpt: number | undefined + orgwtOcrnProcs: string + wtritEntrcTp: number | undefined + amtgnr: number | undefined + prcsProcsYn: string + prcsFcltCpct: number | undefined + fmYn: string + utztnCpct: number | undefined + utztnUsg: string + grssClfg: number | undefined + combResdch: number | undefined + trbt: number| undefined + bod: number| undefined + smll: number| undefined + crmty: number| undefined + tn: number| undefined + tph: number| undefined + ph: number| undefined + clIonQnt: number| undefined + cdtnv: number| undefined + emsnExitTp:number| undefined + } export type htdflFacState = { htdfl: { isInit: boolean; upHeadList: TableUpperProps[]; - htdflOfObject: bdstType[]; + htdflRes: customHtdflBdst[]; }; }; type htdflFacSActions = { - decrementList: () => void; + initHtdfl: (txt:string|undefined) => void; }; +const htdflRes: customHtdflBdst[] = []; + + export type htdflFacType = htdflFacState & htdflFacSActions; export const htdflFacStateExport: htdflFacState = { htdfl: { isInit: false, upHeadList: upHeadList, - htdflOfObject: htdflOfObject, + htdflRes: htdflRes, }, }; + +const initFetch = async (txt: string | undefined) => { + return await getFectch( + "wr", + `/drain/facilityList/1/20/0` //+ (txt ? `/${txt}` : "") + ); +}; export const htdflFacActionsExport: (set: any) => htdflFacSActions = ( set: any ) => { return { - decrementList: () => - set((state: htdflFacState) => { - return { - htdfl: { - upHeadList: state.htdfl.upHeadList, - rainOfObject: state.htdfl.htdflOfObject.slice( - 0, - state.htdfl.htdflOfObject.length - 1 - ), - }, - }; - }), + initHtdfl: async (txt: string|undefined) =>{ + + try { + const res = await initFetch(txt); + set((state: htdflFacState) => { + return { + ...state, + htdfl: { + ...state.htdfl, + htdflRes: res, + isInit: false, + + }, + }; + }) + } catch (error) { + console.log(error); + } + }, }; }; diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/rainReg/index.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/rainReg/index.tsx index f15a170df..bb2d5b482 100644 --- a/apps/wr/app/store/ruseFcltMng/fcltReg/rainReg/index.tsx +++ b/apps/wr/app/store/ruseFcltMng/fcltReg/rainReg/index.tsx @@ -91,7 +91,7 @@ export type chgBuilding={ } -export type RainyBuilding = { +export type bdstAll = { bdstInfoPk: number|null; ctpvCd: number; sggCd: number; @@ -100,11 +100,16 @@ export type RainyBuilding = { frstArchPrmsnDt: Date; archArea: string; archChgArea: number; - reuseBuilding: reuseBuilding[]; + reuseBuilding: rainReuseBuilding[]; chgBuilding:chgBuilding[] }; -export type reuseBuilding = { +export type customRainBdst = Omit<bdstAll, 'reuseBuilding'> & { + reuseBuilding: rainReuseBuilding[]; +}; + + +export type rainReuseBuilding = { lawTrgtYn: string|undefined; bdstUsgCd: number|undefined; bdstRuseFcltPk: number; @@ -146,7 +151,7 @@ export const upHeadList: TableUpperProps[] = [ { id: "sggText", title: "시군구" }, { id: "bdstNm", title: "시설명" }, { id: "daddr", title: "위치" }, - { id: "bdstUsgText", title: "건축물용도" }, + { id: "bdsgUsgText", title: "건축물용도" }, // { id: "bdstUsgCd", title: "건축물용도" }, { id: "frstArchPrmsnDt", title: "최초건축허가일" }, { id: "archArea", title: "건축면적" }, @@ -156,10 +161,10 @@ export const upHeadList: TableUpperProps[] = [ { id: "archChgArea", title: "면적", upName: "upChangeRe", upSequnce: 3 }, ]; -const rainRes: RainyBuilding[] = []; +const rainRes: customRainBdst[] = []; - const regRainForm:RainyBuilding = { + const regRainForm:customRainBdst = { ctpvCd: 0, sggCd: 0, bdstNm: "", @@ -218,16 +223,16 @@ export type rainFacState = { isInit: boolean; upHeadList: TableUpperProps[]; selectYN: selectArray[]; - rainRes: RainyBuilding[]; - regRainForm:RainyBuilding, + rainRes: customRainBdst[]; + regRainForm:customRainBdst, }; }; type rainFacSActions = { init: (txt:string|undefined) => void; rainSearTxt: (txt:string) => void; - rainReg: (data: RainyBuilding) => void; - rainUpdate: (data: RainyBuilding) => void; + rainReg: (data: customRainBdst) => void; + rainUpdate: (data: customRainBdst) => void; }; export type rainFacType = rainFacState & rainFacSActions; @@ -288,7 +293,7 @@ export const rainFacActionsExport: (set: any) => rainFacSActions = ( console.log("error", erTxt) } }, - rainReg: async (data: RainyBuilding) => { + rainReg: async (data: customRainBdst) => { try { const res = await postFectch("/reuseFc/rainyInfo", data); if(res.ok){ @@ -309,7 +314,7 @@ export const rainFacActionsExport: (set: any) => rainFacSActions = ( } finally { } }, - rainUpdate: async (data: RainyBuilding) => { + rainUpdate: async (data: customRainBdst) => { try { console.log("data ", data) const res = await putFectch("/reuseFc/rainyInfo", data); diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/rswtReg/index.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/rswtReg/index.tsx index 000218b96..0694fcd2c 100644 --- a/apps/wr/app/store/ruseFcltMng/fcltReg/rswtReg/index.tsx +++ b/apps/wr/app/store/ruseFcltMng/fcltReg/rswtReg/index.tsx @@ -1,19 +1,72 @@ -import { getFectch } from "@/components/lib/api"; -import { upHeadList, type chgBuilding, type TableUpperProps } from "../rainReg"; +import { getFectch, postFectch, putFectch } from "@/components/lib/api"; +import { upHeadList, type bdstAll, type chgBuilding, type TableUpperProps } from "../rainReg"; +import { rswtBdstType } from "@/app/store/common/code"; -export type RswtBuilding = { - bdstInfoPk: number; - ctpvCd: number; - sggCd: number; - bdstNm: string; - daddr: string; - frstArchPrmsnDt: Date; - archArea: string; - archChgArea: number; +import { z } from "zod"; + +export const rswtZod = z.object({ + bdstInfoPk: z.number().default(0), + ctpvCd: z.number().default(0), + sggCd: z.number().default(0), + daddr: z.string().default(""), + bdstNm: z.string().default(""), + frstArchPrmsnDt: z.date().default(() => new Date()), + archChgPrmsnDt: z.coerce.date().nullish().default(null), + + archArea: z.number().default(0), + archChgArea: z.number().default(0), + + reuseBuilding: z.array( + z.object({ + bdstRuseFcltPk: z.number().default(0), + bdstInfoFk: z.number().default(0), + instlCmptnDt: z.coerce.date().default(() => new Date()), + instlCst: z.number().default(0), + operMngCd: z.string().nullish().default(""), + + anlOperCst: z.number().default(0), + instlCstSprtYn: z.string().default(""), + instlCstSprtAmt: z.number().default(0), + + grntchBdstCertYn: z.string().default(""), + grntchBdstCertYr: z.string().max(4, "4자리 연도를 입력하세요") + .regex(/^\d{4}$/, "4자리 연도를 입력하세요") + .default(""), + grntchBdstCertNo: z.string().default(""), + grntchBdstCertGrd: z.string().default(""), + + crgRdctYn: z.string().default(""), + crgRdctBss: z.string().default(""), + crgRdctAmt: z.number().default(0), + ruseFcltFlg: z.string().default(""), + bdstUsgCd: z.number().default(0), + lawTrgtYn: z.string().default(""), + + rswtrObj: z.object({ + bdstRuseFcltFk: z.number().default(0), + wtrUsqty: z.number().default(0), + oblgTrgtWtrUsqty: z.number().default(0), + orgwtKndCd: z.string().default(""), + filtrTrtmfctProcs: z.string().default(""), + filtrTrtmfctUsgCd: z.string().default(""), + rswtrUsqty: z.number().default(0), + altUswtrUtztnYn: z.string().default(""), + altUswtrKndCd: z.string().default(""), + altUswtrUtztnQnt: z.number().default(0), + altUswtrIdntyMthdCd: z.string().default("") + }).default({}) + }) + ).default([]) +}); + + + +export type customRswtBdst = Omit<bdstAll, 'reuseBuilding'> & { reuseBuilding: rswtReuseBuilding[]; - chgBuilding: chgBuilding[]; }; + + export type rswtReuseBuilding = { bdstRuseFcltPk: number; bdstInfoFk: number; @@ -45,17 +98,20 @@ export type rswtrObj = { altUswtrIdntyMthdCd: string; }; -const rswtRes: RswtBuilding[] = []; + +const rswtRes: customRswtBdst[] = []; export type rswtFacState = { rswt: { isInit: boolean; upHeadList: TableUpperProps[]; - rswtRes: RswtBuilding[]; + rswtRes: customRswtBdst[]; }; }; type rswtFacSActions = { initRswt: (txt: string | undefined) => void; + rswtUpdate: (data: customRswtBdst) => void; + rswtReg: (data: customRswtBdst) => void; }; export type rswtFacType = rswtFacState & rswtFacSActions; @@ -71,7 +127,7 @@ export const rswtFacStateExport: rswtFacState = { const initFetch = async (txt: string | undefined) => { return await getFectch( "wr", - `/reuseFc/waterreuseFc/1/20/01` + (txt ? `/${txt}` : "") + `/reuseFc/waterreuseFc/1/20/41` + (txt ? `/${txt}` : "") ); }; export const rswtFacActionsExport: (set: any) => rswtFacSActions = ( @@ -93,5 +149,48 @@ export const rswtFacActionsExport: (set: any) => rswtFacSActions = ( console.log(error); } }, + rswtUpdate: async (data: customRswtBdst) => { + try { + const res = await putFectch("/reuseFc/waterreuseFc", data); + if(res.ok){ + alert(" 수정이 완료되었습니다.") + } + + const rswtRes = await initFetch(undefined); + set((state: rswtFacState) => ({ + ...state, + rain: { + ...state.rswt, + rswtRes: rswtRes, + isInit: false, + }, + })); + } catch (errorUpdate) { + alert("업데이트 오류입니다. " + (errorUpdate instanceof Error ? errorUpdate.message : "")); + } finally { + } + }, + rswtReg: async (data: customRswtBdst) => { + try { + const res = await postFectch("/reuseFc/waterreuseFc", data); + if(res.ok){ + alert(" 등록이 완료되었습니다.") + } + const rainRes = await initFetch(undefined); + set((state: rswtFacState) => ({ + ...state, + rain: { + ...state.rswt, + rswtRes: rswtRes, + isInit: false, + }, + })); + } catch (e) { + console.log("e", e); + alert("등록 오류입니다."); + } finally { + } + }, + }; }; diff --git a/apps/wr/app/style/PublicReuseFaciltyInsert.module.css b/apps/wr/app/style/PublicReuseFaciltyInsert.module.css deleted file mode 100644 index 6fc6f75ee..000000000 --- a/apps/wr/app/style/PublicReuseFaciltyInsert.module.css +++ /dev/null @@ -1,9 +0,0 @@ -.formInsideTitle{ - background-color: gray; - text-align: center; -} - - - -.smallTitle{ -} \ No newline at end of file diff --git a/apps/wr/components/lib/config/index.ts b/apps/wr/components/lib/config/index.ts index 74770463f..973d1014a 100644 --- a/apps/wr/components/lib/config/index.ts +++ b/apps/wr/components/lib/config/index.ts @@ -3,7 +3,7 @@ const LOCAL_PORT = "3000"; const DEV_PORT = "11080"; -const DEV_PORT_COMMON = "11081"; // common +const DEV_PORT_COMMON = "11082"; // common export const LOCAL_URL_WR = `http://localhost:${LOCAL_PORT}/api/v1`; export const DEV_URL_WR = `http://con.mind-one.co.kr:${DEV_PORT}/api/v1`; diff --git a/apps/wr/components/lib/func/commom.ts b/apps/wr/components/lib/func/commom.ts index 0351f2fc9..c5134324f 100644 --- a/apps/wr/components/lib/func/commom.ts +++ b/apps/wr/components/lib/func/commom.ts @@ -1,4 +1,5 @@ -import type { selectArray } from "@/app/store/common/code"; +import type { comCodeState, selectArray } from "@/app/store/common/code"; +import type { bdstAll } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; @@ -14,3 +15,34 @@ export const getCity = (val: string, sggCd: selectArray[]) => { return data }; + + +// cd text 넣기 + export const tableData = ( data: any,code:comCodeState)=>{ + const chCode = code.code; + return data?.map((item: { sggCd: string; ctpvCd: string; reuseBuilding: { lawTrgtYn: any , bdstUsgCd:any}[]; }) => { + let returnData = {}; + const sggText = chCode.sggCd.find( + (cd) => cd.val === Number(item.sggCd) + )?.text; + const cityText = chCode.cityCd.find( + (cd) => cd.val === Number(item.ctpvCd) + )?.text; + + if (item?.reuseBuilding?.length >0) { + const bdsgUsgText = chCode.bdstUsgCd.find( + (cd) =>cd.val === item?.reuseBuilding[0]?.bdstUsgCd + )?.text + const lawTrgtYn = item?.reuseBuilding[0]?.lawTrgtYn + + returnData= { ...item, sggText: sggText, cityText: cityText ,bdsgUsgText:bdsgUsgText ,lawTrgtYn:lawTrgtYn}; + }else{ + returnData= { ...item, sggText: sggText, cityText: cityText}; + } + + return returnData; + + }); + } + + \ No newline at end of file diff --git a/apps/wr/components/ui/form/fcltReg/bdstReg/component.tsx b/apps/wr/components/ui/form/fcltReg/bdstReg/bdstReg.tsx similarity index 92% rename from apps/wr/components/ui/form/fcltReg/bdstReg/component.tsx rename to apps/wr/components/ui/form/fcltReg/bdstReg/bdstReg.tsx index 277c1f0cf..2062a2795 100644 --- a/apps/wr/components/ui/form/fcltReg/bdstReg/component.tsx +++ b/apps/wr/components/ui/form/fcltReg/bdstReg/bdstReg.tsx @@ -1,6 +1,6 @@ import { useWrStore } from "@/app/store"; import type { selectArray } from "@/app/store/common/code"; -import { selectClass, type RainyBuilding } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; +import { selectClass, type bdstAll } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; import { getCity } from "@/components/lib/func/commom"; import type { objSearchType } from "@/components/ui/modal/bdstReg/component"; import { FormField, FormUi, DatePicker, SelectBox } from "@common/business_components"; @@ -8,7 +8,7 @@ import { Button, Input } from "@common/components"; import { useEffect, useRef, useState } from "react"; import { useFieldArray } from "react-hook-form"; -export default function BdstReg({ form, ud }: { form: any, ud: RainyBuilding }) { +export default function BdstReg({ form }: { form: any }) { const { code } = useWrStore((state) => { return state; }); @@ -50,21 +50,7 @@ export default function BdstReg({ form, ud }: { form: any, ud: RainyBuilding }) setObjSearch({...objSearch,sgg: val!=''?String(val):sgg }) }; - // useEffect(()=>{ - // console.log("18", ud); - // console.log("form", form.getValues()); - // const city =form?.getValues('ctpvCd') - // const sgg =form?.getValues('sggCd') - // console.log('city ㄴㄴㄴ ', city) - // console.log('sgg ', sgg) - // if(city>0 && sgg>0){ - // console.log(' if city ', city) - - // // form?.setValue('ctpvCd' , city) - // //form?.setValue('sggCd' , sgg) - // //setSelectSgg(getCity(city,code.sggCd)) - // } - // },[ud]) + useEffect(()=>{ const city =form.getValues('ctpvCd') const sgg =form.getValues('sggCd') @@ -73,12 +59,13 @@ export default function BdstReg({ form, ud }: { form: any, ud: RainyBuilding }) }, [selectSgg]) useEffect(() => { - const subscription = form.form?.watch((value) => { + console.log("form", form.getValues()); + const subscription = form.form?.watch((value: any) => { console.log('vale', value) }); return () => subscription?.unsubscribe(); - }, [form]); + }, [form.form]); const safeDate = (value: any): Date | undefined => { @@ -203,7 +190,7 @@ export default function BdstReg({ form, ud }: { form: any, ud: RainyBuilding }) <DatePicker mode={"single"} field={{ - value: new Date(field.value), + value: field.value|| new Date(), onChange: (date: Date | undefined) => field.onChange(date), }} diff --git a/apps/wr/components/ui/form/fcltReg/htdflReg/component.tsx b/apps/wr/components/ui/form/fcltReg/htdflReg/component.tsx index 4efff1a39..dff971bb9 100644 --- a/apps/wr/components/ui/form/fcltReg/htdflReg/component.tsx +++ b/apps/wr/components/ui/form/fcltReg/htdflReg/component.tsx @@ -6,104 +6,82 @@ import { FormUi, SelectBox, } from "@common/business_components/ui"; -import { Input } from "@common/components/ui"; +import { Button, Input } from "@common/components/ui"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; import { z } from "zod"; import { useWrStore } from "@/app/store"; import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; +import { hdtflZod, type customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg"; +import { useEffect } from "react"; -const formSchema = z.object({ - etgtType: z.string().min(2).max(50), - fclCpct: z.string(), - plwtYn: z.string(), - orgwtwtritspt: z.string(), - orgwtocrnprocs: z.string(), - wtritentrctp: z.string(), - amtgnr: z.string(), - prcsfcltcpct: z.string(), - utztnqnt: z.string(), - utztnusgcd: z.string(), -wntUntprc: z.string().min(1), - grssClfg: z.string().min(1), - tn: z.string().min(1).optional(), - combResdch: z.string().min(1).optional(), - tp: z.string().min(1).optional(), - trbt: z.string().min(1).optional(), - ph: z.string().min(1).optional(), - bod: z.string().min(1).optional(), - clIonQnt: z.string().min(1).optional(), - smll: z.string().min(1).optional(), - cdtnv: z.string().min(1).optional(), - crmty: z.string().min(1).optional(), - emsnexittp: z.string(), -}); -export function HtdflRegForm() { - const { rswt } = useWrStore((state) => state); +export function HtdflRegForm({ + htdflForm, + isModal +} :{ + htdflForm:customHtdflBdst; + isModal: boolean; +} ) { + const {code} = useWrStore((state) => state); - const form = useForm<z.infer<typeof formSchema>>({ - resolver: zodResolver(formSchema), - defaultValues: { - etgtType: "", - fclCpct: "", - plwtYn: "", - orgwtwtritspt: "", - orgwtocrnprocs: "", - wtritentrctp: "", - amtgnr: "", - prcsfcltcpct: "", - utztnqnt: "", - utztnusgcd: "", - wntUntprc: "", - grssClfg: "", - tn: "", - combResdch: "", - tp: "", - trbt: "", - ph: "", - bod: "", - clIonQnt: "", - smll: "", - cdtnv: "", - crmty: "", - emsnexittp: "", - }, + const defaultValues: z.infer<typeof hdtflZod> = hdtflZod.parse({}); + + const form = useForm<z.infer<typeof hdtflZod>>({ + resolver: zodResolver(hdtflZod), + defaultValues:defaultValues, }); - // 2. Define a submit handler. - function onSubmit(values: z.infer<typeof formSchema>) { + // 2. Define a submit handler.hdtflZod + function onSubmit(values: z.infer<typeof hdtflZod>) { // Do something with the form values. // ✅ This will be type-safe and validated. console.log(values); } - const onSelectValue = (val: string) => { + const onSelectValue = (val: string | number) => { console.log(val); }; + +useEffect(() => { + if(hdtflZod) + console.log("hdtflZod", hdtflZod); + const parsedData = hdtflZod.safeParse(htdflForm); + if (parsedData.success) { + form.reset(parsedData.data); + } else { + console.error("Invalid data for form reset", parsedData.error); + } + }, [htdflForm]); + + + return ( - <div className=""> <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)}> {/* <div className="flex justify-between items-center mx-3"> */} <div> - <div> - <h1 className="pl-3 text-xl ">○온배수 시설 정보</h1> + <div className="grid grid-cols-12"> + <h1 className="pl-3 text-xl col-span-10"> + ○온배수 시설 정보 + </h1> + <Button type="submit" className="mr-4 rounded-lg col-span-2"> + 저장 + </Button> </div> </div> - <h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4 "> - 시설현황 - </h1> + + <div className="grid grid-cols-6 gap-2 mt-4 pl-6"> <div className="col-span-2"> <FormField control={form.control} - name="etgtType" + name="reuseBuilding.0.htdflObj.etgtType" render={({ field }) => ( <FormUi label="발전유형"> <SelectBox selectClass={selectClass} - selectArray={rswt.selectYN} + selectArray={code.yn} onSelectValue={onSelectValue} {...field} /> @@ -115,14 +93,16 @@ export function HtdflRegForm() { <div className="col-span-2"> <FormField control={form.control} - name="fclCpct" + name="reuseBuilding.0.htdfObj.fclCpct" // 이름 이상함. render={({ field }) => ( <FormUi label="설비용량"> <Input className="" placeholder="1,000,000" - type="" + type="text" {...field} + value={field.value ?? ""} + onChange={(e) => field.onChange(Number(e.target.value))} /> </FormUi> )} @@ -131,12 +111,12 @@ export function HtdflRegForm() { <div className="col-span-2"> <FormField control={form.control} - name="plwtYn" + name="reuseBuilding.0.htdfObj.plwtYn" render={({ field }) => ( <FormUi label="담수화 여부"> <SelectBox selectClass={selectClass} - selectArray={rswt.selectYN} + selectArray={code.yn} onSelectValue={onSelectValue} {...field} /> @@ -155,12 +135,12 @@ export function HtdflRegForm() { <div className="col-span-5 pl-6"> <FormField control={form.control} - name="orgwtwtritspt" + name="reuseBuilding.0.htdfObj.orgwtwtritspt" render={({ field }) => ( <FormUi label="원수취수 지점"> <SelectBox selectClass={selectClass} - selectArray={rswt.selectYN} + selectArray={code.yn} onSelectValue={onSelectValue} {...field} /> @@ -190,11 +170,10 @@ export function HtdflRegForm() { name="wtritentrctp" render={({ field }) => ( <FormUi label="취수구 온도"> - <SelectBox - selectClass={selectClass} - label={""} - selectArray={rswt.selectYN} - onSelectValue={onSelectValue} + <Input + className="" + placeholder="1,000,000" + type="" {...field} /> </FormUi> @@ -258,7 +237,7 @@ export function HtdflRegForm() { <SelectBox selectClass={selectClass} label={""} - selectArray={rswt.selectYN} + selectArray={code.yn} onSelectValue={onSelectValue} {...field} /> @@ -291,7 +270,7 @@ export function HtdflRegForm() { <SelectBox selectClass={selectClass} label={""} - selectArray={rswt.selectYN} + selectArray={code.yn} onSelectValue={onSelectValue} {...field} /> @@ -464,6 +443,5 @@ export function HtdflRegForm() { </div> </form> </Form> - </div> ); } diff --git a/apps/wr/components/ui/form/fcltReg/rainReg/component.tsx b/apps/wr/components/ui/form/fcltReg/rainReg/component.tsx index 659297d4e..ac5884f4b 100644 --- a/apps/wr/components/ui/form/fcltReg/rainReg/component.tsx +++ b/apps/wr/components/ui/form/fcltReg/rainReg/component.tsx @@ -6,7 +6,7 @@ import { bdstDefZod, rainDefZod, rainZod, - type RainyBuilding, + type customRainBdst, } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; import { DatePicker, FormUi } from "@common/business_components"; import { Form, FormField, SelectBox } from "@common/business_components/ui"; @@ -15,7 +15,7 @@ import { zodResolver } from "@hookform/resolvers/zod"; import { useEffect, useState } from "react"; import { useForm, type UseFormReturn } from "react-hook-form"; import { z } from "zod"; -import BdstReg from "../bdstReg/component"; +import BdstReg from "../bdstReg/bdstReg"; export const formToObj = ( isModal: boolean, @@ -41,7 +41,7 @@ export function RainRegForm({ rainForm, isModal, }: { - rainForm: RainyBuilding; + rainForm: customRainBdst; isModal: boolean; }) { @@ -93,7 +93,7 @@ export function RainRegForm({ }, [form]); const objToForm = (raw: z.infer<typeof formSchema>) => { - let regRainForm: RainyBuilding; + let regRainForm: customRainBdst; // 1. 기본 정보 정리 const obj = !rainForm ? rain.regRainForm : rainForm; @@ -175,10 +175,10 @@ export function RainRegForm({ </Button> </div> </div> - {isModal&&rainForm!=undefined ? <BdstReg form={form} ud={rainForm}/> : <></>} + {isModal&&rainForm!=undefined ? <BdstReg form={form}/> : <></>} {isModal ? ( <h1 className="pl-3 text-xl col-span-10 mt-4 "> - ○ 빗물이용시설 운영정보{" "} + ○ 빗물이용시설 정보{" "} </h1> ) : ( <></> diff --git a/apps/wr/components/ui/form/fcltReg/rswtrReg/component.tsx b/apps/wr/components/ui/form/fcltReg/rswtrReg/rswtrRegForm.tsx similarity index 56% rename from apps/wr/components/ui/form/fcltReg/rswtrReg/component.tsx rename to apps/wr/components/ui/form/fcltReg/rswtrReg/rswtrRegForm.tsx index f563b3c53..e6bbc0aaf 100644 --- a/apps/wr/components/ui/form/fcltReg/rswtrReg/component.tsx +++ b/apps/wr/components/ui/form/fcltReg/rswtrReg/rswtrRegForm.tsx @@ -1,82 +1,121 @@ "use client"; import { + DatePicker, Form, FormField, FormUi, SelectBox, } from "@common/business_components/ui"; -import { Input } from "@common/components/ui"; +import { Button, Input } from "@common/components/ui"; import { zodResolver } from "@hookform/resolvers/zod"; -import { useForm } from "react-hook-form"; -import { z } from "zod"; +import { useFieldArray, useForm } from "react-hook-form"; +import { number, z } from "zod"; import { useWrStore } from "@/app/store"; import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; +import { + rswtZod, + type customRswtBdst, +} from "@/app/store/ruseFcltMng/fcltReg/rswtReg"; +import { useEffect } from "react"; +import BdstReg from "../bdstReg/bdstReg"; -const formSchema = z.object({ - facilityName: z.string().min(2).max(50), - instlCmptnDt: z.string(), - instlCst: z.string(), - wtrUsqty: z.string(), - oblgTrgtwtrUsqty: z.string(), - rswtrKndCd: z.string(), - rswrtProcs: z.string(), - utztmUsgCd: z.string(), - instlCstSprtYn: z.string(), - instlCstSprtAmt: z.string(), - grntchCstSprtYn: z.string(), - grntchCstSprtCst: z.string(), - grntchBdstCertYn: z.string(), - grntchBdstCertYr: z.string(), - grntchBdstCertNo: z.string(), - grntchBdstCertGrd: z.string(), -}); +export function RswtrRegForm({ + rswtForm, + isModal, +}: { + rswtForm: customRswtBdst; + isModal: boolean; +}) { + const { rswt, code ,rswtUpdate,rswtReg} = useWrStore((state) => state); -export function RswtrRegForm() { - const { rswt,code } = useWrStore((state) => state); - const form = useForm<z.infer<typeof formSchema>>({ - resolver: zodResolver(formSchema), - defaultValues: { - facilityName: "", - instlCmptnDt: "", - instlCst: "", - wtrUsqty: "", - oblgTrgtwtrUsqty: "", - rswtrKndCd: "", - rswrtProcs: "", - utztmUsgCd: "", - instlCstSprtYn: "", - instlCstSprtAmt: "", - grntchCstSprtYn: "", - grntchCstSprtCst: "", - grntchBdstCertYn: "", - grntchBdstCertYr: "", - grntchBdstCertNo: "", - grntchBdstCertGrd: "", - }, - }); + const defaultValues: z.infer<typeof rswtZod> = rswtZod.parse({}); + + + const form = useForm<z.infer<typeof rswtZod>>({ + resolver: zodResolver(rswtZod), + defaultValues: defaultValues, + + }) // 2. Define a submit handler. - function onSubmit(values: z.infer<typeof formSchema>) { + function onSubmit(values: z.infer<typeof rswtZod>) { // Do something with the form values. // ✅ This will be type-safe and validated. console.log(values); + + + if (isModal) { + // regRainForm.bdstInfoPk = null; + rswtReg(values); + } else { + rswtUpdate(values); + } + } - const onSelectValue = (val: string) => { + const onSelectValue = (val: string | number) => { console.log(val); + }; + + + function cleanRswtData(raw: any): z.infer<typeof rswtZod> { + return { + ...raw, + frstArchPrmsnDt: new Date(raw?.frstArchPrmsnDt||null), + archChgPrmsnDt: raw?.archChgPrmsnDt ? new Date(raw?.archChgPrmsnDt) : null, + reuseBuilding: (raw?.reuseBuilding || []).map((item: any) => ({ + ...item, + instlCmptnDt: new Date(item?.instlCmptnDt), + operMngCd: item?.operMngCd ?? "", // null → "" + grntchBdstCertYr: typeof item?.grntchBdstCertYr === "string" + ? item?.grntchBdstCertYr + : "", // null → "" + rswtrObj: { + ...item?.rswtrObj + } + })) + }; + } + + +useEffect(() => { + if(rswtZod) + console.log("rswtForm", rswtForm); + form.reset( cleanRswtData(rswtForm)) + }, [rswtForm]); + + return ( <div className=""> <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)}> {/* <div className="flex justify-between items-center mx-3"> */} <div> - <div> - <h1 className="pl-3 text-xl ">○ 중수도 시설 운영정보</h1> + <div className="grid grid-cols-12"> + <h1 className="pl-3 text-xl col-span-10"> + ○ 중수도 시설 운영정보 + </h1> + <Button type="submit" className="mr-4 rounded-lg col-span-2"> + 저장 + </Button> </div> </div> + + {isModal && rswtForm != undefined ? ( + <BdstReg form={form} /> + ) : ( + <></> + )} + {isModal ? ( + <h1 className="pl-3 text-xl col-span-10 mt-4 "> + ○ 중수도 시설 정보{" "} + </h1> + ) : ( + <></> + )} <h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4 "> 기본정보 </h1> @@ -84,14 +123,19 @@ export function RswtrRegForm() { <div className="col-span-2"> <FormField control={form.control} - name="instlCmptnDt" + name="reuseBuilding.0.instlCmptnDt" render={({ field }) => ( <FormUi label="설치완료일"> - <Input - className="" - placeholder="1,000,000" - type="" - {...field} + <DatePicker + mode="single" + field={{ + value: + field.value && !isNaN(new Date(field.value).getTime()) + ? new Date(field.value) + : new Date(), // Provide a default Date value + onChange: (date) => field.onChange(date), + }} + selectClass={""} /> </FormUi> )} @@ -101,14 +145,15 @@ export function RswtrRegForm() { <div className="col-span-2"> <FormField control={form.control} - name="instlCst" + name="reuseBuilding.0.instlCst" render={({ field }) => ( <FormUi label="설치비"> <Input className="" placeholder="1,000,000" - type="" - {...field} + type="text" + value={field.value ?? ""} + onChange={(e) => field.onChange(Number(e.target.value))} /> </FormUi> )} @@ -119,14 +164,15 @@ export function RswtrRegForm() { <div className="col-span-2"> <FormField control={form.control} - name="wtrUsqty" + name="reuseBuilding.0.rswtrObj.wtrUsqty" render={({ field }) => ( <FormUi label="물사용량(m³)"> <Input className="" placeholder="1,000,000" type="" - {...field} + value={field.value ?? 0} + onChange={(e) => field.onChange(Number(e.target.value))} /> </FormUi> )} @@ -136,14 +182,15 @@ export function RswtrRegForm() { <div className="col-span-2"> <FormField control={form.control} - name="oblgTrgtwtrUsqty" + name="reuseBuilding.0.rswtrObj.oblgTrgtWtrUsqty" render={({ field }) => ( <FormUi label="의무대상 물사용량(m³)"> <Input className="" placeholder="1,000,000" - type="" - {...field} + type="text" + value={field.value ?? 0} + onChange={(e) => field.onChange(Number(e.target.value))} /> </FormUi> )} @@ -160,14 +207,16 @@ export function RswtrRegForm() { <div className="col-span-5 pl-6"> <FormField control={form.control} - name="rswtrKndCd" + name="reuseBuilding.0.rswtrObj.orgwtKndCd" render={({ field }) => ( - <FormUi label="필수 종류"> + <FormUi label="원수 종류"> <SelectBox + className={""} + label={""} selectClass={selectClass} selectArray={code.orgwtKndCd} - onSelectValue={onSelectValue} - {...field} + onSelectValue={field.onChange} + value={field.value ?? code.orgwtKndCd[0]?.val} /> </FormUi> )} @@ -176,20 +225,20 @@ export function RswtrRegForm() { <div className="col-span-5"> <FormField control={form.control} - name="rswrtProcs" + name="reuseBuilding.0.rswtrObj.filtrTrtmfctProcs" render={({ field }) => ( <FormUi label="주요처리공정"> <Input className="" placeholder="1,000,000" type="" - {...field} + value={field.value ?? ""} + onChange={field.onChange} /> </FormUi> )} /> </div> - </div> <div className=" my-2"> @@ -204,15 +253,16 @@ export function RswtrRegForm() { <div className="col-span-1 pl-6"> <FormField control={form.control} - name="instlCstSprtYn" + name="reuseBuilding.0.instlCstSprtYn" render={({ field }) => ( <FormUi label="설치비 지원여부"> <SelectBox + className={""} selectClass={selectClass} label={""} selectArray={code.yn} - onSelectValue={onSelectValue} - {...field} + onSelectValue={field.onChange} + value={field.value ?? code.yn[0]?.val} /> </FormUi> )} @@ -221,14 +271,17 @@ export function RswtrRegForm() { <div className="col-span-1"> <FormField control={form.control} - name="instlCstSprtAmt" + name="reuseBuilding.0.instlCstSprtAmt" render={({ field }) => ( <FormUi label="지원금액(원)"> <Input className="" placeholder="1,000,000" type="" - {...field} + value={field.value ?? ""} + onChange={(e) => { + field.onChange(Number(e.target.value)); + }} /> </FormUi> )} @@ -243,15 +296,16 @@ export function RswtrRegForm() { <div className="col-span-3 pl-6"> <FormField control={form.control} - name="grntchCstSprtYn" + name="reuseBuilding.0.grntchBdstCertYn" render={({ field }) => ( <FormUi label="인증여부"> <SelectBox + className={""} selectClass={selectClass} label={""} selectArray={code.yn} - onSelectValue={onSelectValue} - {...field} + onSelectValue={field.onChange} + value={field.value ?? code.yn[0]?.val} /> </FormUi> )} @@ -260,10 +314,17 @@ export function RswtrRegForm() { <div className="col-span-3"> <FormField control={form.control} - name="grntchBdstCertYr" + name="reuseBuilding.0.grntchBdstCertYr" render={({ field }) => ( <FormUi label="인증년도"> - <Input className="" placeholder="2024" type="" {...field} /> + <Input + className="" + placeholder="2024" + type="" + {...field} + value={field.value ?? ""} + onChange={field.onChange} + /> </FormUi> )} /> @@ -271,14 +332,15 @@ export function RswtrRegForm() { <div className="col-span-3 pl-6"> <FormField control={form.control} - name="grntchBdstCertNo" + name="reuseBuilding.0.grntchBdstCertNo" render={({ field }) => ( <FormUi label="인증번호"> <Input className="" placeholder="ab1234678" type="" - {...field} + value={field.value ?? ""} + onChange={field.onChange} /> </FormUi> )} @@ -287,10 +349,16 @@ export function RswtrRegForm() { <div className="col-span-3"> <FormField control={form.control} - name="grntchBdstCertGrd" + name="reuseBuilding.0.grntchBdstCertGrd" render={({ field }) => ( <FormUi label="인증등급"> - <Input className="" placeholder="A" type="" {...field} /> + <Input + className="" + placeholder="A" + type="" + value={field.value ?? ""} + onChange={field.onChange} + /> </FormUi> )} /> diff --git a/apps/wr/components/ui/modal/bdstReg/component.tsx b/apps/wr/components/ui/modal/bdstReg/component.tsx index 541b7e53d..9ea411248 100644 --- a/apps/wr/components/ui/modal/bdstReg/component.tsx +++ b/apps/wr/components/ui/modal/bdstReg/component.tsx @@ -3,40 +3,52 @@ import { headMakeColSpan } from "@/app/ruseFcltMng/fcltReg/rainReg/page"; import { useWrStore } from "@/app/store"; import { selectClass, - type RainyBuilding, + type bdstAll, + type customRainBdst, } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; import { ScrollArea, SearchInput, SelectBox, UiTable } from "@common/business_components"; import { Button, Input, Label } from "@common/components"; import { useEffect, useState } from "react"; import { RainRegForm } from "../../form/fcltReg/rainReg/component"; import { getCityCd, type selectArray } from "@/app/store/common/code"; -import { getCity } from "@/components/lib/func/commom"; -import { RswtrRegForm } from "../../form/fcltReg/rswtrReg/component"; +import { getCity, tableData } from "@/components/lib/func/commom"; +import { RswtrRegForm } from "../../form/fcltReg/rswtrReg/RswtrRegForm"; import { HtdflRegForm } from "../../form/fcltReg/htdflReg/component"; +import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg"; export type objSearchType = { sgg: string|number; city: string|number; }; +//RNB(빗물), RST(중수도), HTB(온배수) + type MoType = 'RNB' | 'RST' | 'HTB'; // 여기에 'htdf' 추가 + type BdstTypeMap = { + RNB: customRainBdst; + RST: customRswtBdst; + HTB: customRswtBdst; // 해야해// 아직 아노딤 +}; -export function BdstReg({moType}:{moType:string} ) { + interface BdstRegProps<T extends MoType> { + moType: T; +} + +export function BdstReg<T extends MoType>({ moType }: BdstRegProps<T>) { const { rain, code, bdst,findBdst } = useWrStore((state) => { return state; }); - - const [bdstTable, setbdstTable] = useState<RainyBuilding[]>(); - const [rainBdstForm, setRainBdstForm] = useState<RainyBuilding>({} as RainyBuilding); + const [bdstTable, setbdstTable] = useState<BdstTypeMap[T][]>(); + const [rainBdstForm, setRainBdstForm] = useState<BdstTypeMap[T]>({} as BdstTypeMap[T]); const [searchTxt, setSearchTxt] = useState<string>() - const [selectSgg, setSelectSgg] = useState<selectArray[] | undefined>() + const [selectSgg, setSelectSgg] = useState<selectArray[] | []>() const [objSearch, setObjSearch] = useState<objSearchType>({sgg:"",city:""}); - const getSelCity = (val: string) => { - const data= getCity(val,code.sggCd) - setSelectSgg(data); - - setObjSearch({ city:val , sgg:''}) - + const getSelCity = (val: string | number) => { + const cityValue = String(val); // Ensure val is treated as a string + const data = getCity(cityValue, code.sggCd); + setSelectSgg(data); + + setObjSearch({ city: cityValue, sgg: '' }); }; const getSgg = (val: string | number) => { @@ -54,33 +66,26 @@ export function BdstReg({moType}:{moType:string} ) { data = objSearch.sgg } - findBdst(String(data), searchTxt || "","RNB" ) + //RNB(빗물), RST(중수도), HTB(온배수) + findBdst(String(data), searchTxt || "",moType ) } useEffect(() => { if (code.sggCd.length > 0) { - const table = bdst?.bdstBase?.map((item) => { - const sggText = code.sggCd.find( - (cd) => cd.val === Number(item.sggCd) - )?.text; - const cityText = code.cityCd.find( - (cd) => cd.val === Number(item.ctpvCd) - )?.text; - return { ...item, sggText: sggText, cityText: cityText }; - }); - - - setbdstTable(table); - } + + setbdstTable( tableData(bdst.bdstBase, { code })); + } }, [code, bdst]); const tableClick: (val: number | undefined) => void = (val) => { if(val!==undefined && bdst?.bdstBase.length>0){ - const data =bdst?.bdstBase[val] - setRainBdstForm(data); + const data:BdstTypeMap[T] =bdst?.bdstBase[val] + if (data) { + setRainBdstForm(data); + } } } const nodeList = headMakeColSpan(bdst.moUpHeadList); @@ -91,7 +96,7 @@ export function BdstReg({moType}:{moType:string} ) { className="col-span-3 " label={"시도"} selectClass={selectClass} - selectArray={code.cityCd} + selectArray={code.cityCd || []} onSelectValue={getSelCity} > {""} @@ -107,13 +112,7 @@ export function BdstReg({moType}:{moType:string} ) { </SelectBox> <Label className="w-20 text-base text-gray-600 mt-4 text-right">건축물명</Label> <Input className="w-full h-full text-2xl col-span-2 col-start-8" type="text" value={searchTxt || ''} onChange={(e) => setSearchTxt(e.target.value)}/> - {/* <SearchInput - className="col-span-3 col-start-8" - label="건물명" - textValue={searchTxt} - setText={ setSearchTxt} - - /> */} + <Button className="rounded-lg" onClick={()=>{searchBdst(searchTxt)}}>조회</Button> </div> <div className="border-t border-gray-300 my-4"></div> @@ -135,9 +134,9 @@ export function BdstReg({moType}:{moType:string} ) { <div className="border-t border-gray-300 my-4"></div> <ScrollArea className="h-[60vh]"> <div> - {moType === 'rain'? + { moType === 'RNB'? <RainRegForm rainForm={rainBdstForm} isModal={true} /> - :moType==='rswt'?<RswtrRegForm></RswtrRegForm> + :moType==='RST'?<RswtrRegForm rswtForm={rainBdstForm } isModal={true}></RswtrRegForm> :<HtdflRegForm></HtdflRegForm> } diff --git a/apps/wr/package.json b/apps/wr/package.json index ce18a8a7c..54a7878b4 100644 --- a/apps/wr/package.json +++ b/apps/wr/package.json @@ -11,6 +11,7 @@ "dependencies": { "@common/business_components": "workspace:*", "@common/components": "workspace:*", + "@common/assets": "workspace:*", "@hookform/resolvers": "^4.1.3", "@tanstack/react-table": "^8.21.2", "class-variance-authority": "^0.7.1", diff --git a/apps/wr/tailwind.config.ts b/apps/wr/tailwind.config.ts index d3eabd953..dc688050e 100644 --- a/apps/wr/tailwind.config.ts +++ b/apps/wr/tailwind.config.ts @@ -1,66 +1,21 @@ -import baseConfig from "../../packages/common/components/tailwind.config"; - import type { Config } from "tailwindcss"; +import tailwindcssAnimate from "tailwindcss-animate"; +import presetConfig from "../../tailwind.config.preset"; export default { - darkMode: ["class"], - presets: [baseConfig], + presets: [presetConfig], content: [ - "./app/**/*.{js,ts,jsx,tsx,mdx}", - "./components/**/*.{js,ts,jsx,tsx,mdx}", + "./src/**/*.{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; + theme: { + extend: { + boxShadow: { + blur: "0 0 10px -1px rgba(0, 0, 0, 0.06)", + }, + }, + }, + plugins: [tailwindcssAnimate], +} satisfies Config; \ No newline at end of file diff --git a/packages/common/business_components/package.json b/packages/common/business_components/package.json index ce78d2a6b..5120980c2 100644 --- a/packages/common/business_components/package.json +++ b/packages/common/business_components/package.json @@ -63,7 +63,7 @@ "eslint-plugin-react-refresh": "^0.4.16", "eslint-plugin-storybook": "^0.11.2", "globals": "^15.14.0", - "postcss": "^8.5.1", + "postcss": "^8.5.3", "prettier": "^3.4.2", "prettier-plugin-tailwindcss": "^0.6.11", "storybook": "^8.5.3", diff --git a/packages/common/business_components/src/base.css b/packages/common/business_components/src/base.css index daaa92719..ab1424be8 100644 --- a/packages/common/business_components/src/base.css +++ b/packages/common/business_components/src/base.css @@ -1,69 +1,10 @@ @import "@common/assets/styles/base.css"; @import "@common/assets/styles/diveicon.css"; -@import "@common/assets/styles/components.css"; @tailwind base; @tailwind components; @tailwind utilities; -@layer base { - :root { - --background: #ffffff; - --foreground: #0a0a0a; - --card: #ffffff; - --card-foreground: #0a0a0a; - --popover: #ffffff; - --popover-foreground: #0a0a0a; - --primary: #2094fa; - --primary-foreground: #fafafa; - --secondary: #f5f5f5; - --secondary-foreground: #0f1e33; - --muted: #f5f5f5; - --muted-foreground: #737373; - --accent: #f5f5f5; - --accent-foreground: #0f1e33; - --destructive: #ff4141; - --destructive-foreground: #fafafa; - --border: #e5e5e5; - --input: #e5e5e5; - --label: #666666; - --ring: #0a0a0a; - --chart-1: #d95b43; - --chart-2: #299392; - --chart-3: #263e4d; - --chart-4: #dfb938; - --chart-5: #f08634; - --radius: 1rem; - } - [data-mode="dark"] { - --background: #0a0a0a; - --foreground: #fafafa; - --card: #0a0a0a; - --card-foreground: #fafafa; - --popover: #0a0a0a; - --popover-foreground: #fafafa; - --primary: #2094fa; - --primary-foreground: #171717; - --secondary: #262626; - --secondary-foreground: #fafafa; - --muted: #262626; - --muted-foreground: #a2a2a2; - --accent: #262626; - --accent-foreground: #fafafa; - --destructive: #b22222; - --destructive-foreground: #fafafa; - --border: #262626; - --input: #262626; - --label: #f1f1f1; - --ring: #d4d4d4; - --chart-1: #3399ff; - --chart-2: #339966; - --chart-3: #ff9933; - --chart-4: #cc66ff; - --chart-5: #ff3399; - } -} - @layer base { * { @apply border-border; @@ -74,4 +15,4 @@ body { @apply bg-background text-foreground; } -} \ No newline at end of file +} diff --git a/packages/common/business_components/src/diveicon.css b/packages/common/business_components/src/diveicon.css deleted file mode 100644 index cce8cdaef..000000000 --- a/packages/common/business_components/src/diveicon.css +++ /dev/null @@ -1,1799 +0,0 @@ -@font-face { - font-family: "diveicon"; - src: url("../public/assets/fonts/diveicon.eot?stp8eo"); - src: - url("../public/assets/fonts/diveicon.eot?stp8eo#iefix") - format("embedded-opentype"), - url("../public/assets/fonts/diveicon.ttf?stp8eo") format("truetype"), - url("../public/assets/fonts/diveicon.woff?stp8eo") format("woff"), - url("../public/assets/fonts/diveicon.svg?stp8eo#diveicon") format("svg"); - font-weight: normal; - font-style: normal; - font-display: block; -} - -i.diveicon { - /* use !important to prevent issues with browser extensions that change fonts */ - font-family: "diveicon" !important; - speak: never; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.di-account-box:before { - content: "\e8f3"; -} -.di-account-circle:before { - content: "\e901"; -} -.di-add-image:before { - content: "\e902"; -} -.di-add-Note:before { - content: "\e903"; -} -.di-alarm-add:before { - content: "\e904"; -} -.di-alarm-clock:before { - content: "\e905"; -} -.di-alarm-off:before { - content: "\e906"; -} -.di-alarm-on:before { - content: "\e908"; -} -.di-alarm:before { - content: "\e909"; -} -.di-alternate:before { - content: "\e90a"; -} -.di-analytics:before { - content: "\e90b"; -} -.di-android:before { - content: "\e90c"; -} -.di-announcement:before { - content: "\e90d"; -} -.di-app-indicator:before { - content: "\e90e"; -} -.di-app-list:before { - content: "\e90f"; -} -.di-app-square:before { - content: "\e910"; -} -.di-apple:before { - content: "\e911"; -} -.di-apps-square:before { - content: "\e912"; -} -.di-apps:before { - content: "\e913"; -} -.di-archive-fill:before { - content: "\e914"; -} -.di-archive:before { - content: "\e915"; -} -.di-arrow-90left-down:before { - content: "\e916"; -} -.di-arrow-90left-up:before { - content: "\e917"; -} -.di-arrow-90left:before { - content: "\e918"; -} -.di-arrow-90right-down:before { - content: "\e919"; -} -.di-arrow-90right-up:before { - content: "\e91a"; -} -.di-arrow-90right:before { - content: "\e91b"; -} -.di-arrow-back-square-fill:before { - content: "\e91c"; -} -.di-arrow-back:before { - content: "\e91d"; -} -.di-arrow-down-square-fill:before { - content: "\e91e"; -} -.di-arrow-down-square:before { - content: "\e91f"; -} -.di-arrow-down:before { - content: "\e920"; -} -.di-arrow-forward-square-fill:before { - content: "\e921"; -} -.di-arrow-forward:before { - content: "\e922"; -} -.di-arrow-left-right:before { - content: "\e923"; -} -.di-arrow-left-square-fill:before { - content: "\e924"; -} -.di-arrow-left-square:before { - content: "\e925"; -} -.di-arrow-left:before { - content: "\e926"; -} -.di-arrow-lr-up-down:before { - content: "\e927"; -} -.di-arrow-reflash:before { - content: "\e928"; -} -.di-arrow-reset:before { - content: "\e929"; -} -.di-arrow-right-square-fill:before { - content: "\e92a"; -} -.di-arrow-right-square:before { - content: "\e92b"; -} -.di-arrow-right:before { - content: "\e92c"; -} -.di-arrow-up-down:before { - content: "\e92d"; -} -.di-arrow-up-square-fill:before { - content: "\e92e"; -} -.di-arrow-up-square:before { - content: "\e92f"; -} -.di-arrow-up:before { - content: "\e930"; -} -.di-arrows-angle-contract:before { - content: "\e931"; -} -.di-arrows-angle-expand:before { - content: "\e932"; -} -.di-arrows-fullscreen:before { - content: "\e933"; -} -.di-aspect-ratio-fill:before { - content: "\e934"; -} -.di-aspect-ratio:before { - content: "\e935"; -} -.di-assignment-ind:before { - content: "\e936"; -} -.di-assignment-turned-in:before { - content: "\e937"; -} -.di-assignment:before { - content: "\e938"; -} -.di-asterisk:before { - content: "\e939"; -} -.di-atm:before { - content: "\e93a"; -} -.di-badge-4k-fill:before { - content: "\e93b"; -} -.di-badge-4k:before { - content: "\e93c"; -} -.di-badge-8k-fill:before { - content: "\e93d"; -} -.di-badge-8k:before { - content: "\e93e"; -} -.di-badge-ad-fill:before { - content: "\e93f"; -} -.di-badge-ad:before { - content: "\e940"; -} -.di-badge-cc-fill:before { - content: "\e941"; -} -.di-badge-cc:before { - content: "\e942"; -} -.di-badge-hd-fill:before { - content: "\e943"; -} -.di-badge-hd:before { - content: "\e944"; -} -.di-badge-tm-fill:before { - content: "\e945"; -} -.di-badge-tm:before { - content: "\e946"; -} -.di-bag-check-fill:before { - content: "\e947"; -} -.di-bag-check:before { - content: "\e948"; -} -.di-bag-fill:before { - content: "\e949"; -} -.di-bag:before { - content: "\e94a"; -} -.di-bags:before { - content: "\e94b"; -} -.di-bar-chart-fill:before { - content: "\e94c"; -} -.di-bar-chart:before { - content: "\e94d"; -} -.di-battery-charging:before { - content: "\e94e"; -} -.di-battery-emty:before { - content: "\e94f"; -} -.di-battery-full:before { - content: "\e950"; -} -.di-battery-harf:before { - content: "\e951"; -} -.di-bell-alert-box-fill:before { - content: "\e952"; -} -.di-bell-alert-box:before { - content: "\e953"; -} -.di-bell-alert-fill:before { - content: "\e954"; -} -.di-bell-alert:before { - content: "\e955"; -} -.di-bell-notification-fill:before { - content: "\e956"; -} -.di-bell-notification-on-fill:before { - content: "\e957"; -} -.di-bell-notification-on:before { - content: "\e958"; -} -.di-bell-notification:before { - content: "\e959"; -} -.di-bike:before { - content: "\e95a"; -} -.di-bluetooth:before { - content: "\e95b"; -} -.di-boat:before { - content: "\e95c"; -} -.di-book:before { - content: "\e95d"; -} -.di-bookmark-check-fill:before { - content: "\e95e"; -} -.di-bookmark-check:before { - content: "\e95f"; -} -.di-bookmark-fill:before { - content: "\e960"; -} -.di-bookmark-new-fill:before { - content: "\e961"; -} -.di-bookmark-new:before { - content: "\e962"; -} -.di-bookmark-star-fill:before { - content: "\e963"; -} -.di-bookmark-star:before { - content: "\e964"; -} -.di-bookmark:before { - content: "\e965"; -} -.di-boostzone:before { - content: "\e966"; -} -.di-box-arrow-backup:before { - content: "\e967"; -} -.di-box-arrow-download:before { - content: "\e968"; -} -.di-box-arrow-link-blank:before { - content: "\e969"; -} -.di-box-arrow-upload:before { - content: "\e96a"; -} -.di-box-seam:before { - content: "\e96b"; -} -.di-box:before { - content: "\e96c"; -} -.di-braces:before { - content: "\e96d"; -} -.di-briefcase-fill:before { - content: "\e96e"; -} -.di-briefcase:before { - content: "\e96f"; -} -.di-brightness-fill:before { - content: "\e970"; -} -.di-brightness:before { - content: "\e971"; -} -.di-broadcast-pin:before { - content: "\e972"; -} -.di-broadcast:before { - content: "\e973"; -} -.di-bug-fill:before { - content: "\e974"; -} -.di-bug:before { - content: "\e975"; -} -.di-building:before { - content: "\e976"; -} -.di-bus:before { - content: "\e977"; -} -.di-calculator-fill:before { - content: "\e978"; -} -.di-calculator:before { - content: "\e979"; -} -.di-calendar-check-fill:before { - content: "\e97a"; -} -.di-calendar-check:before { - content: "\e97b"; -} -.di-calendar-day-fill:before { - content: "\e97c"; -} -.di-calendar-day:before { - content: "\e97d"; -} -.di-calendar-event-fill:before { - content: "\e97e"; -} -.di-calendar-event:before { - content: "\e97f"; -} -.di-calendar-fill:before { - content: "\e980"; -} -.di-calendar-week-fill:before { - content: "\e981"; -} -.di-calendar-week:before { - content: "\e982"; -} -.di-calendar:before { - content: "\e983"; -} -.di-call-end:before { - content: "\e984"; -} -.di-call:before { - content: "\e985"; -} -.di-camera-fill:before { - content: "\e986"; -} -.di-camera-video-fill:before { - content: "\e987"; -} -.di-camera-video:before { - content: "\e988"; -} -.di-camera:before { - content: "\e989"; -} -.di-car:before { - content: "\e98a"; -} -.di-card-fill:before { - content: "\e98b"; -} -.di-card:before { - content: "\e98c"; -} -.di-caret-down-fill:before { - content: "\e98d"; -} -.di-caret-down-square-fill:before { - content: "\e98e"; -} -.di-caret-down-square:before { - content: "\e98f"; -} -.di-caret-left-fill:before { - content: "\e990"; -} -.di-caret-left-square-fill:before { - content: "\e991"; -} -.di-caret-left-square:before { - content: "\e992"; -} -.di-caret-right-fill:before { - content: "\e993"; -} -.di-caret-right-square-fill:before { - content: "\e994"; -} -.di-caret-right-square:before { - content: "\e995"; -} -.di-caret-up-fill:before { - content: "\e996"; -} -.di-caret-up-square-fill:before { - content: "\e997"; -} -.di-caret-up-square:before { - content: "\e998"; -} -.di-cart-fill:before { - content: "\e999"; -} -.di-cart:before { - content: "\e99a"; -} -.di-cash-stack:before { - content: "\e99b"; -} -.di-cash:before { - content: "\e99c"; -} -.di-cast:before { - content: "\e99d"; -} -.di-cctv:before { - content: "\e99e"; -} -.di-chat-box-left-dots-fill:before { - content: "\e99f"; -} -.di-chat-box-left-dots:before { - content: "\e9a0"; -} -.di-chat-box-left-fill:before { - content: "\e9a1"; -} -.di-chat-box-left-text-fill:before { - content: "\e9a2"; -} -.di-chat-box-left-text:before { - content: "\e9a3"; -} -.di-chat-box-left:before { - content: "\e9a4"; -} -.di-chat-box-right-dots-fill:before { - content: "\e9a5"; -} -.di-chat-box-right-dots:before { - content: "\e9a6"; -} -.di-chat-box-right-fill:before { - content: "\e9a7"; -} -.di-chat-box-right-text-fill:before { - content: "\e9a8"; -} -.di-chat-box-right-text:before { - content: "\e9a9"; -} -.di-chat-box-right:before { - content: "\e9aa"; -} -.di-chat-circle-left-dot-fill:before { - content: "\e9ab"; -} -.di-chat-circle-left-dot:before { - content: "\e9ac"; -} -.di-chat-circle-left-fill:before { - content: "\e9ad"; -} -.di-chat-circle-left-text-fill:before { - content: "\e9ae"; -} -.di-chat-circle-left-text:before { - content: "\e9af"; -} -.di-chat-circle-left:before { - content: "\e9b0"; -} -.di-chat-circle-right-dot-fill:before { - content: "\e9b1"; -} -.di-chat-circle-right-dot:before { - content: "\e9b2"; -} -.di-chat-circle-right-fill:before { - content: "\e9b3"; -} -.di-chat-circle-right-text-fill:before { - content: "\e9b4"; -} -.di-chat-circle-right-text:before { - content: "\e9b5"; -} -.di-chat-circle-right:before { - content: "\e9b6"; -} -.di-check-box:before { - content: "\e9b7"; -} -.di-check-circle-fill:before { - content: "\e9b8"; -} -.di-check-circle-line:before { - content: "\e9b9"; -} -.di-check-circle:before { - content: "\e9ba"; -} -.di-check-square-fill:before { - content: "\e9bb"; -} -.di-check-square-line:before { - content: "\e9bc"; -} -.di-check-square:before { - content: "\e9bd"; -} -.di-check:before { - content: "\e9be"; -} -.di-chevron-bar-contract:before { - content: "\e9bf"; -} -.di-chevron-bar-down:before { - content: "\e9c0"; -} -.di-chevron-bar-expand:before { - content: "\e9c1"; -} -.di-chevron-bar-left:before { - content: "\e9c2"; -} -.di-chevron-bar-right:before { - content: "\e9c3"; -} -.di-chevron-bar-up:before { - content: "\e9c4"; -} -.di-chevron-contract:before { - content: "\e9c5"; -} -.di-chevron-double-down:before { - content: "\e9c6"; -} -.di-chevron-double-left:before { - content: "\e9c7"; -} -.di-chevron-double-right:before { - content: "\e9c8"; -} -.di-chevron-double-up:before { - content: "\e9c9"; -} -.di-chevron-down:before { - content: "\e9ca"; -} -.di-chevron-expand:before { - content: "\e9cb"; -} -.di-chevron-left:before { - content: "\e9cc"; -} -.di-chevron-right:before { - content: "\e9cd"; -} -.di-chevron-up:before { - content: "\e9ce"; -} -.di-clipboard-check:before { - content: "\e9cf"; -} -.di-clipboard-data:before { - content: "\e9d0"; -} -.di-clipboard-text:before { - content: "\e9d1"; -} -.di-clipboard:before { - content: "\e9d2"; -} -.di-clock-fill:before { - content: "\e9d3"; -} -.di-clock-history:before { - content: "\e9d4"; -} -.di-clock:before { - content: "\e9d5"; -} -.di-cloud-arrow-down-fill:before { - content: "\e9d6"; -} -.di-cloud-arrow-down:before { - content: "\e9d7"; -} -.di-cloud-arrow-up-fill:before { - content: "\e9d8"; -} -.di-cloud-arrow-up:before { - content: "\e9d9"; -} -.di-cloud-check-fill:before { - content: "\e9da"; -} -.di-cloud-check:before { - content: "\e9db"; -} -.di-cloud-fill:before { - content: "\e9dc"; -} -.di-cloud:before { - content: "\e9dd"; -} -.di-code-square:before { - content: "\e9de"; -} -.di-code:before { - content: "\e9df"; -} -.di-collection-fill:before { - content: "\e9e0"; -} -.di-collection:before { - content: "\e9e1"; -} -.di-compass-fill:before { - content: "\e9e2"; -} -.di-compass:before { - content: "\e9e3"; -} -.di-cone:before { - content: "\e9e4"; -} -.di-controller-fill:before { - content: "\e9e5"; -} -.di-controller:before { - content: "\e9e6"; -} -.di-copyright-sign:before { - content: "\e9e7"; -} -.di-copyright-symbol:before { - content: "\e9e8"; -} -.di-COVID-19-fill:before { - content: "\e9e9"; -} -.di-COVID-19:before { - content: "\e9ea"; -} -.di-cpu-fill:before { - content: "\e9eb"; -} -.di-cpu:before { - content: "\e9ec"; -} -.di-crop:before { - content: "\e9ed"; -} -.di-cup-fill:before { - content: "\e9ee"; -} -.di-cup-straw:before { - content: "\e9ef"; -} -.di-cup:before { - content: "\e9f0"; -} -.di-cursor-fill:before { - content: "\e9f1"; -} -.di-cursor-text:before { - content: "\e9f2"; -} -.di-cursor:before { - content: "\e9f3"; -} -.di-dash-circle-fill:before { - content: "\e9f4"; -} -.di-dash-circle:before { - content: "\e9f5"; -} -.di-dash-square-fill:before { - content: "\e9f6"; -} -.di-dash-square:before { - content: "\e9f7"; -} -.di-dash:before { - content: "\e9f8"; -} -.di-dashboard:before { - content: "\e9f9"; -} -.di-diagram:before { - content: "\e9fa"; -} -.di-diamond-fill:before { - content: "\e9fb"; -} -.di-diamond:before { - content: "\e9fc"; -} -.di-diamond2:before { - content: "\e9fd"; -} -.di-display-fill:before { - content: "\e9fe"; -} -.di-display:before { - content: "\e9ff"; -} -.di-dns:before { - content: "\ea00"; -} -.di-door-closed-fill:before { - content: "\ea01"; -} -.di-door-closed:before { - content: "\ea02"; -} -.di-download_app:before { - content: "\ea03"; -} -.di-download:before { - content: "\ea04"; -} -.di-email-fill-notification:before { - content: "\ea05"; -} -.di-email-fill-open:before { - content: "\ea06"; -} -.di-email-fill:before { - content: "\ea07"; -} -.di-email-notification:before { - content: "\ea08"; -} -.di-email-open:before { - content: "\ea09"; -} -.di-email:before { - content: "\ea0a"; -} -.di-emergenc_call:before { - content: "\ea0b"; -} -.di-emergenc:before { - content: "\ea0c"; -} -.di-exclamation-chat-fill:before { - content: "\ea0d"; -} -.di-exclamation-chat:before { - content: "\ea0e"; -} -.di-exclamation-circle-fill:before { - content: "\ea0f"; -} -.di-exclamation-circle:before { - content: "\ea10"; -} -.di-exclamation-diamond-fill:before { - content: "\ea11"; -} -.di-exclamation-diamond:before { - content: "\ea12"; -} -.di-exclamation-square-circle:before { - content: "\ea13"; -} -.di-exclamation-square-fill:before { - content: "\ea14"; -} -.di-exclamation-square:before { - content: "\ea15"; -} -.di-exclamation-triangle-fill:before { - content: "\ea16"; -} -.di-exclamation-triangle:before { - content: "\ea17"; -} -.di-exclamation:before { - content: "\ea18"; -} -.di-exclude:before { - content: "\ea19"; -} -.di-face-id:before { - content: "\ea1a"; -} -.di-facebook-circle:before { - content: "\ea1b"; -} -.di-facebook-square:before { - content: "\ea1c"; -} -.di-favorite-hart:before { - content: "\ea1d"; -} -.di-favorite-star:before { - content: "\ea1e"; -} -.di-file-copy:before { - content: "\ea1f"; -} -.di-file-excel:before { - content: "\ea20"; -} -.di-file-image:before { - content: "\ea21"; -} -.di-file-keynote:before { - content: "\ea22"; -} -.di-file-numbers:before { - content: "\ea23"; -} -.di-file-powerpoint:before { - content: "\ea24"; -} -.di-file-text:before { - content: "\ea25"; -} -.di-file-word:before { - content: "\ea26"; -} -.di-file:before { - content: "\ea27"; -} -.di-filter-circle-fill:before { - content: "\ea28"; -} -.di-filter-circle:before { - content: "\ea29"; -} -.di-filter-left:before { - content: "\ea2a"; -} -.di-filter-right:before { - content: "\ea2b"; -} -.di-filter-square-fill:before { - content: "\ea2c"; -} -.di-filter-square:before { - content: "\ea2d"; -} -.di-filter:before { - content: "\ea2e"; -} -.di-finder-folder:before { - content: "\ea2f"; -} -.di-finder:before { - content: "\ea30"; -} -.di-fingerprint:before { - content: "\ea31"; -} -.di-flag-fill:before { - content: "\ea32"; -} -.di-flag:before { - content: "\ea33"; -} -.di-flashlight:before { - content: "\ea34"; -} -.di-folder-check:before { - content: "\ea35"; -} -.di-folder-delet:before { - content: "\ea36"; -} -.di-folder-fill:before { - content: "\ea37"; -} -.di-folder-open-fill:before { - content: "\ea38"; -} -.di-folder-open:before { - content: "\ea39"; -} -.di-folder-plus:before { - content: "\ea3a"; -} -.di-folder-share:before { - content: "\ea3b"; -} -.di-folder-x:before { - content: "\ea3c"; -} -.di-folder:before { - content: "\ea3d"; -} -.di-font:before { - content: "\ea3e"; -} -.di-fullscreen-exit:before { - content: "\ea3f"; -} -.di-fullscreen:before { - content: "\ea40"; -} -.di-gear-fill:before { - content: "\ea41"; -} -.di-gear-square-fill:before { - content: "\ea42"; -} -.di-gear-system-update:before { - content: "\ea43"; -} -.di-gear:before { - content: "\ea44"; -} -.di-gem:before { - content: "\ea45"; -} -.di-geo-alt:before { - content: "\ea46"; -} -.di-geo-location:before { - content: "\ea47"; -} -.di-geo-my-location:before { - content: "\ea48"; -} -.di-gift-fill:before { - content: "\ea49"; -} -.di-gift:before { - content: "\ea4a"; -} -.di-graph-down:before { - content: "\ea4b"; -} -.di-graph-up:before { - content: "\ea4c"; -} -.di-grid-2-fill:before { - content: "\ea4d"; -} -.di-grid-3-fill:before { - content: "\ea4e"; -} -.di-grid:before { - content: "\ea4f"; -} -.di-grip-horizontal:before { - content: "\ea50"; -} -.di-grip-vertical:before { - content: "\ea51"; -} -.di-group:before { - content: "\ea52"; -} -.di-group2:before { - content: "\ea53"; -} -.di-hand-index:before { - content: "\ea54"; -} -.di-harf:before { - content: "\ea55"; -} -.di-hart-fill:before { - content: "\ea56"; -} -.di-hart-half:before { - content: "\ea57"; -} -.di-hash:before { - content: "\ea58"; -} -.di-hdd-network:before { - content: "\ea59"; -} -.di-hdd:before { - content: "\ea5a"; -} -.di-hexagon-fill:before { - content: "\ea5b"; -} -.di-hexagon-harf:before { - content: "\ea5c"; -} -.di-hexagon:before { - content: "\ea5d"; -} -.di-history:before { - content: "\ea5e"; -} -.di-home-fill:before { - content: "\ea5f"; -} -.di-home:before { - content: "\ea60"; -} -.di-hotel_bed:before { - content: "\ea61"; -} -.di-hotel:before { - content: "\ea62"; -} -.di-image-fill:before { - content: "\ea63"; -} -.di-image:before { - content: "\ea64"; -} -.di-images:before { - content: "\ea65"; -} -.di-info-box:before { - content: "\ea66"; -} -.di-info-circle:before { - content: "\ea67"; -} -.di-info-fill:before { - content: "\ea68"; -} -.di-info:before { - content: "\ea69"; -} -.di-instagram-circle:before { - content: "\ea6a"; -} -.di-instagram-fill:before { - content: "\ea6b"; -} -.di-instagram:before { - content: "\ea6c"; -} -.di-intersect:before { - content: "\ea6d"; -} -.di-justify-left:before { - content: "\ea6e"; -} -.di-justify-right:before { - content: "\ea6f"; -} -.di-justify:before { - content: "\ea70"; -} -.di-kakao-alim-talk:before { - content: "\ea71"; -} -.di-kakao-circle:before { - content: "\ea72"; -} -.di-kakao-firend-talk:before { - content: "\ea73"; -} -.di-kakao-story-circle:before { - content: "\ea74"; -} -.di-kakao-story:before { - content: "\ea75"; -} -.di-kakao-talk:before { - content: "\ea76"; -} -.di-key:before { - content: "\ea77"; -} -.di-keyboard:before { - content: "\ea78"; -} -.di-label:before { - content: "\ea79"; -} -.di-language:before { - content: "\ea7a"; -} -.di-laptop-fill:before { - content: "\ea7b"; -} -.di-laptop:before { - content: "\ea7c"; -} -.di-layer-back:before { - content: "\ea7d"; -} -.di-layer-front:before { - content: "\ea7e"; -} -.di-layer:before { - content: "\ea7f"; -} -.di-lightning-fill:before { - content: "\ea80"; -} -.di-lightning:before { - content: "\ea81"; -} -.di-list-check:before { - content: "\ea82"; -} -.di-list:before { - content: "\ea83"; -} -.di-local-airport-land:before { - content: "\ea84"; -} -.di-local-airport:before { - content: "\ea85"; -} -.di-local-atm:before { - content: "\ea86"; -} -.di-local-bar:before { - content: "\ea87"; -} -.di-local-cafe:before { - content: "\ea88"; -} -.di-local-dining:before { - content: "\ea89"; -} -.di-local-ev-station:before { - content: "\ea8a"; -} -.di-local-fastfood:before { - content: "\ea8b"; -} -.di-local-gas-station:before { - content: "\ea8c"; -} -.di-local-hospital:before { - content: "\ea8d"; -} -.di-local-laundry:before { - content: "\ea8e"; -} -.di-local-library:before { - content: "\ea8f"; -} -.di-local-museum:before { - content: "\ea90"; -} -.di-local-restaurant:before { - content: "\ea91"; -} -.di-local-store:before { - content: "\ea92"; -} -.di-lock-open:before { - content: "\ea93"; -} -.di-lock:before { - content: "\ea94"; -} -.di-map-fill:before { - content: "\ea95"; -} -.di-map:before { - content: "\ea96"; -} -.di-menu-close-fill:before { - content: "\ea97"; -} -.di-menu-close:before { - content: "\ea98"; -} -.di-menu-open-fill:before { - content: "\ea99"; -} -.di-menu-open:before { - content: "\ea9a"; -} -.di-mic-fill:before { - content: "\ea9b"; -} -.di-mic-mute-fill:before { - content: "\ea9c"; -} -.di-mic-mute:before { - content: "\ea9d"; -} -.di-mic:before { - content: "\ea9e"; -} -.di-minus:before { - content: "\ea9f"; -} -.di-mobile-android:before { - content: "\eaa0"; -} -.di-mobile-flip:before { - content: "\eaa1"; -} -.di-mobile-fold:before { - content: "\eaa2"; -} -.di-mobile-ios:before { - content: "\eaa3"; -} -.di-mobile-pad:before { - content: "\eaa4"; -} -.di-mobile-store:before { - content: "\eaa5"; -} -.di-mobile:before { - content: "\eaa6"; -} -.di-moon-crescent:before { - content: "\eaa7"; -} -.di-moon-half:before { - content: "\eaa8"; -} -.di-moon:before { - content: "\eaa9"; -} -.di-more-horiz:before { - content: "\eaaa"; -} -.di-more-vert:before { - content: "\eaab"; -} -.di-movie-fill:before { - content: "\eaac"; -} -.di-movie:before { - content: "\eaad"; -} -.di-music-backward-fill:before { - content: "\eaae"; -} -.di-music-backward:before { - content: "\eaaf"; -} -.di-music-forward-fill:before { - content: "\eab0"; -} -.di-music-forward:before { - content: "\eab1"; -} -.di-music-list:before { - content: "\eab2"; -} -.di-music-pause-fill:before { - content: "\eab3"; -} -.di-music-pause:before { - content: "\eab4"; -} -.di-music-play-fill:before { - content: "\eab5"; -} -.di-music-play:before { - content: "\eab6"; -} -.di-music-stop-fill:before { - content: "\eab7"; -} -.di-music-stop:before { - content: "\eab8"; -} -.di-music:before { - content: "\eab9"; -} -.di-naver-blog:before { - content: "\eaba"; -} -.di-naver-circle:before { - content: "\eabb"; -} -.di-naver:before { - content: "\eabc"; -} -.di-news:before { - content: "\eabd"; -} -.di-option:before { - content: "\eabe"; -} -.di-paperclip:before { - content: "\eabf"; -} -.di-payment:before { - content: "\eac0"; -} -.di-pen-fill:before { - content: "\eac1"; -} -.di-pen:before { - content: "\eac2"; -} -.di-pencil-fill:before { - content: "\eac3"; -} -.di-pencil-square:before { - content: "\eac4"; -} -.di-pencil:before { - content: "\eac5"; -} -.di-person-fill:before { - content: "\eac6"; -} -.di-person:before { - content: "\eac7"; -} -.di-personal-information:before { - content: "\eac8"; -} -.di-pet:before { - content: "\eac9"; -} -.di-power:before { - content: "\eaca"; -} -.di-print:before { - content: "\eacb"; -} -.di-problem:before { - content: "\eacc"; -} -.di-profile-smile:before { - content: "\eacd"; -} -.di-profile:before { - content: "\eace"; -} -.di-push-assemble:before { - content: "\eacf"; -} -.di-push-fill:before { - content: "\ead0"; -} -.di-push-notification:before { - content: "\ead1"; -} -.di-push:before { - content: "\ead2"; -} -.di-question-answer:before { - content: "\ead3"; -} -.di-question-circle-fill:before { - content: "\ead4"; -} -.di-question-circle:before { - content: "\ead5"; -} -.di-question-diamond-fill:before { - content: "\ead6"; -} -.di-question-diamond:before { - content: "\ead7"; -} -.di-question-square-fill:before { - content: "\ead8"; -} -.di-question-square:before { - content: "\ead9"; -} -.di-question:before { - content: "\eada"; -} -.di-radio:before { - content: "\eadb"; -} -.di-receipt:before { - content: "\eadc"; -} -.di-refresh-fill:before { - content: "\eadd"; -} -.di-refresh:before { - content: "\eade"; -} -.di-reset-fill:before { - content: "\eadf"; -} -.di-reset:before { - content: "\eae0"; -} -.di-rotation-lock:before { - content: "\eae1"; -} -.di-rotation:before { - content: "\eae2"; -} -.di-rwis:before { - content: "\eae3"; -} -.di-search:before { - content: "\eae4"; -} -.di-server:before { - content: "\eae5"; -} -.di-share:before { - content: "\eae6"; -} -.di-shield:before { - content: "\eae7"; -} -.di-shift-fill:before { - content: "\eae8"; -} -.di-shift:before { - content: "\eae9"; -} -.di-shuffle:before { - content: "\eaea"; -} -.di-silent:before { - content: "\eaeb"; -} -.di-sim:before { - content: "\eaec"; -} -.di-slash:before { - content: "\eaed"; -} -.di-sliders:before { - content: "\eaee"; -} -.di-smart-watch:before { - content: "\eaef"; -} -.di-sort-alpha-down-alt:before { - content: "\eaf0"; -} -.di-sort-alpha-down:before { - content: "\eaf1"; -} -.di-sort-alpha-up-alt:before { - content: "\eaf2"; -} -.di-sort-alpha-up:before { - content: "\eaf3"; -} -.di-sort-down-alt:before { - content: "\eaf4"; -} -.di-sort-down:before { - content: "\eaf5"; -} -.di-sort-numeric-down-alt:before { - content: "\eaf6"; -} -.di-sort-numeric-down:before { - content: "\eaf7"; -} -.di-sort-numeric-up-alt:before { - content: "\eaf8"; -} -.di-sort-numeric-up:before { - content: "\eaf9"; -} -.di-sort-up-alt:before { - content: "\eafa"; -} -.di-sort-up:before { - content: "\eafb"; -} -.di-sound:before { - content: "\eafc"; -} -.di-soundwave:before { - content: "\eafd"; -} -.di-square-fill:before { - content: "\eafe"; -} -.di-square:before { - content: "\eaff"; -} -.di-star-circle:before { - content: "\eb00"; -} -.di-star-fill:before { - content: "\eb01"; -} -.di-star:before { - content: "\eb02"; -} -.di-statistics-circle:before { - content: "\eb03"; -} -.di-statistics:before { - content: "\eb04"; -} -.di-sticky-fill:before { - content: "\eb05"; -} -.di-sticky:before { - content: "\eb06"; -} -.di-stoplights-fill:before { - content: "\eb07"; -} -.di-stoplights:before { - content: "\eb08"; -} -.di-sunny:before { - content: "\eb09"; -} -.di-tab:before { - content: "\eb0a"; -} -.di-table:before { - content: "\eb0b"; -} -.di-terminal-fill:before { - content: "\eb0c"; -} -.di-terminal:before { - content: "\eb0d"; -} -.di-ternnel:before { - content: "\eb0e"; -} -.di-textarea-t:before { - content: "\eb0f"; -} -.di-textarea:before { - content: "\eb10"; -} -.di-thermometer-full:before { - content: "\eb11"; -} -.di-thermometer-half:before { - content: "\eb12"; -} -.di-thermometer:before { - content: "\eb13"; -} -.di-time-end:before { - content: "\eb14"; -} -.di-time-full:before { - content: "\eb15"; -} -.di-time-start:before { - content: "\eb16"; -} -.di-toggle-off:before { - content: "\eb17"; -} -.di-toggle-on:before { - content: "\eb18"; -} -.di-toggle:before { - content: "\eb19"; -} -.di-train:before { - content: "\eb1a"; -} -.di-trash-fill:before { - content: "\eb1b"; -} -.di-trash:before { - content: "\eb1c"; -} -.di-truck-fill:before { - content: "\eb1d"; -} -.di-truck:before { - content: "\eb1e"; -} -.di-ui-checks-grid:before { - content: "\eb1f"; -} -.di-ui-radios-grid:before { - content: "\eb20"; -} -.di-upload:before { - content: "\eb21"; -} -.di-vibration:before { - content: "\eb22"; -} -.di-vms:before { - content: "\eb23"; -} -.di-volume-down-fill:before { - content: "\eb24"; -} -.di-volume-down:before { - content: "\eb25"; -} -.di-volume-mute-fill:before { - content: "\eb26"; -} -.di-volume-mute:before { - content: "\eb27"; -} -.di-volume-off-fill:before { - content: "\eb28"; -} -.di-volume-off:before { - content: "\eb29"; -} -.di-volume-up-fill:before { - content: "\eb2a"; -} -.di-volume-up:before { - content: "\eb2b"; -} -.di-weather-cloud-fill:before { - content: "\eb2c"; -} -.di-weather-cloud:before { - content: "\eb2d"; -} -.di-weather-cloudy-gusts:before { - content: "\eb2e"; -} -.di-weather-cloudy-windy:before { - content: "\eb2f"; -} -.di-weather-cloudy:before { - content: "\eb30"; -} -.di-weather-fahrenheit:before { - content: "\eb31"; -} -.di-weather-fog:before { - content: "\eb32"; -} -.di-weather-hail:before { - content: "\eb33"; -} -.di-weather-humidity:before { - content: "\eb34"; -} -.di-weather-hurricane:before { - content: "\eb35"; -} -.di-weather-lightning:before { - content: "\eb36"; -} -.di-weather-rain:before { - content: "\eb37"; -} -.di-weather-rainny:before { - content: "\eb38"; -} -.di-weather-snow:before { - content: "\eb39"; -} -.di-weather-snowflake:before { - content: "\eb3a"; -} -.di-weather-sunny-overcast:before { - content: "\eb3b"; -} -.di-weather-sunny:before { - content: "\eb3c"; -} -.di-weather-thunderstorm:before { - content: "\eb3d"; -} -.di-weather-umbrella:before { - content: "\eb3e"; -} -.di-weather-windy:before { - content: "\eb3f"; -} -.di-whater:before { - content: "\eb40"; -} -.di-whather-celsius:before { - content: "\eb41"; -} -.di-wifi-1:before { - content: "\eb42"; -} -.di-wifi-2:before { - content: "\eb43"; -} -.di-wifi-off:before { - content: "\eb44"; -} -.di-wifi:before { - content: "\eb45"; -} -.di-window:before { - content: "\eb46"; -} -.di-x-circle-fill:before { - content: "\eb47"; -} -.di-x-circle:before { - content: "\eb48"; -} -.di-x-square-fill:before { - content: "\eb49"; -} -.di-x-square:before { - content: "\eb4a"; -} -.di-x:before { - content: "\eb4b"; -} -.di-zoom-in:before { - content: "\eb4c"; -} -.di-zoom-out:before { - content: "\eb4d"; -} -.di-server-line:before { - content: "\e907"; -} diff --git a/packages/common/business_components/src/index.css b/packages/common/business_components/src/index.css deleted file mode 100644 index 46896e552..000000000 --- a/packages/common/business_components/src/index.css +++ /dev/null @@ -1,11 +0,0 @@ - -@layer base {} - -@layer base { - * { - @apply border-border outline-ring/50; - } - body { - @apply bg-background text-foreground; - } -} \ No newline at end of file diff --git a/packages/common/business_components/src/ui/date_picker/index.tsx b/packages/common/business_components/src/ui/date_picker/index.tsx index a7694789b..d3a6a05c1 100644 --- a/packages/common/business_components/src/ui/date_picker/index.tsx +++ b/packages/common/business_components/src/ui/date_picker/index.tsx @@ -10,12 +10,22 @@ import { Button, Calendar, Popover, PopoverContent, PopoverTrigger } from "@comm import { cn } from "../../lib/utils"; import { FormControl } from "../form"; import { ko } from "date-fns/locale"; +import { useState } from "react"; type DatePickerProps = DayPickerSingleProps & { field: { value: Date; onChange: (date: Date | undefined) => void } ,selectClass:string|undefined }; + export function DatePicker({ field, selectClass }: DatePickerProps) { + + + const [open, setOpen] = useState(false); + + const handleSelect = (date: Date | undefined) => { + field.onChange(date); // React Hook Form 업데이트 + setOpen(false); + }; return ( - <Popover> + <Popover open={open} onOpenChange={setOpen}> <PopoverTrigger asChild> <FormControl> <Button @@ -28,7 +38,12 @@ export function DatePicker({ field, selectClass }: DatePickerProps) { ):selectClass} > {field?.value ? ( - format(field?.value, "PPP") + format( + field.value instanceof Date && !isNaN(field.value.getTime()) + ? field.value + : new Date() + + , "PPP", { locale: ko }) ) : ( <span>Pick a date</span> )} @@ -40,7 +55,7 @@ export function DatePicker({ field, selectClass }: DatePickerProps) { <Calendar mode="single" selected={field?.value} - onSelect={field?.onChange} + onSelect={handleSelect} initialFocus locale={ko} /> diff --git a/packages/common/business_components/src/ui/list_div/index.tsx b/packages/common/business_components/src/ui/list_div/index.tsx index 2c437e1af..abe480c7a 100644 --- a/packages/common/business_components/src/ui/list_div/index.tsx +++ b/packages/common/business_components/src/ui/list_div/index.tsx @@ -1,8 +1,8 @@ import React from 'react' -function ListDiv(props: {children: React.ReactNode}) { +function ListDiv(props: {children: React.ReactNode, className?: string|undefined}) { return ( - <div className="card card-border h-full"> + <div className={`card card-border ${props.className}`}> {props.children} </div> ) diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index be40faaf6..834db2347 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -1,5 +1,5 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import UiPageNations from "./uiPageNations"; type UiTableProps = { @@ -11,6 +11,7 @@ type UiTableProps = { children: React.ReactNode | undefined; cellClick : ((index:number|undefined)=>void) | undefined; onPageChange: (page: number) => void; + className?: string; } type UiHeadProps = { @@ -18,18 +19,33 @@ type UiHeadProps = { title: string; } -export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick, onPageChange }: UiTableProps) { +export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick, onPageChange, className = '' }: UiTableProps) { const [cur, setCur] = useState<number>(1); + const [idx, setIdx] = useState<number>(0); const handlePageChange = (page: number) => { setCur(page); onPageChange(page); } + const handleCellClick = (index: number) => { + if (cellClick) { + console.log("cellClick", index); + cellClick(index); + setIdx(index); + } + }; + +useEffect(() => { + + console.log("idx", idx); + console.log("idx", idx); + + },[idx]) return ( <> {headName ? <div className="card-header"> <h3 className="text-2xl font-medium text-label">{headName}</h3> </div> : <></>} - <div className="card !m-[1.2rem] overflow-auto !p-0r"> + <div className={`card !m-[1.2rem] !p-0r ${className}`}> <Table> <TableHeader> {children ? <>{children}</> : <TableRow> @@ -39,10 +55,11 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa </TableRow>} </TableHeader> <TableBody className='text-center'> - {tableData?.map((el: { [key: string]: string | number | boolean | object}, index) => ( - <TableRow key={index + "row"} > + {tableData?.map((el: { [key: string]: any}, index) => ( + <TableRow key={index + "row"} > {headlist?.map((head) => ( - <TableCell className="cursor-pointer" onClick={()=>cellClick && cellClick(index)} key={head.id + index}>{el[head.id]}</TableCell> + // <TableCell className={cellClick&&idx==index?"bg-black/10 cursor-pointer":cellClick?"cursor-pointer":""} onClick={()=>handleCellClick(index)} key={head.id + index}>{el[head.id]}</TableCell> + <TableCell className={cellClick&&idx==index?"opacity-40 cursor-pointer":cellClick?"cursor-pointer":""} onClick={()=>handleCellClick(index)} key={head.id + index}>{el[head.id]}</TableCell> ))} </TableRow> ))} @@ -52,4 +69,4 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa </div> </> ); -} +} \ No newline at end of file diff --git a/packages/common/business_components/tailwind.config.js b/packages/common/business_components/tailwind.config.js index f30c9f77a..9ce3117a0 100644 --- a/packages/common/business_components/tailwind.config.js +++ b/packages/common/business_components/tailwind.config.js @@ -1,93 +1,8 @@ +import presetConfig from "../../../tailwind.config.preset"; + /** @type {import('tailwindcss').Config} */ export default { - darkMode: ["class", "[data-mode='dark']"], - content: ["./src/**/*.{ts,tsx,js,jsx}", "./.storybook/**/*.{ts,tsx,js,jsx}"], - theme: { - extend: { - borderRadius: { - lg: "var(--radius)", - md: "calc(var(--radius) - 2px)", - sm: "calc(var(--radius) - 4px)", - }, - colors: { - background: "var(--background)", - foreground: "var(--foreground)", - card: { - DEFAULT: "var(--card)", - foreground: "var(--card-foreground)", - }, - popover: { - DEFAULT: "var(--popover)", - foreground: "var(--popover-foreground)", - }, - primary: { - DEFAULT: "var(--primary)", - foreground: "var(--primary-foreground)", - }, - secondary: { - DEFAULT: "var(--secondary)", - foreground: "var(--secondary-foreground)", - }, - muted: { - DEFAULT: "var(--muted)", - foreground: "var(--muted-foreground)", - }, - accent: { - DEFAULT: "var(--accent)", - foreground: "var(--accent-foreground)", - }, - destructive: { - DEFAULT: "var(--destructive)", - foreground: "var(--destructive-foreground)", - }, - border: "var(--border)", - input: "var(--input)", - label: "var(--label)", - ring: "var(--ring)", - chart: { - 1: "var(--chart-1)", - 2: "var(--chart-2)", - 3: "var(--chart-3)", - 4: "var(--chart-4)", - 5: "var(--chart-5)", - }, - }, - keyframes: { - "accordion-down": { - from: { height: "0" }, - to: { height: "var(--radix-accordion-content-height)" }, - }, - "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: "0" }, - }, - "spin-parent": { - from: { transform: "translate(-50%,-50%) rotate(0deg)" }, - to: { transform: "translate(-50%,-50%) rotate(360deg)" }, - }, - "spin-child": { - from: { transform: "translate(0,0) rotate(0deg)" }, - to: { transform: "translate(0,0) rotate(360deg)" }, - }, - }, - animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out", - "spin-parent": "spin-parent 6s linear infinite", - "spin-child": "spin-child 1s ease-in-out infinite", - }, - backgroundImage: { - "gradient-blue": "linear-gradient(.25turn, #2094fa, #00e5dd)", - "gradient-blue-hover": - "linear-gradient(.25turn, #2298ff, #01dcda, #00e8b4)", - "gradient-green": "linear-gradient(.25turn, #00bad0, #00eb6f)", - "gradient-green-hover": "linear-gradient(.25turn, #00bad0, #12fe81)", - "gradient-red": "linear-gradient(.25turn, #ff487c, #ffc425)", - "gradient-red-hover": "linear-gradient(.25turn, #ff487c, #ffea3a)", - "gradient-purple": "linear-gradient(.25turn, #be30d7, #ff9264)", - "gradient-purple-hover": "linear-gradient(.25turn, #be30d7, #ffaf5a)", - }, - }, - }, + presets: [presetConfig], + content: ["./src/**/*.{ts,tsx,js,jsx}"], plugins: [require("tailwindcss-animate")], };