헤헤더분리

This commit is contained in:
leedj312
2025-04-27 10:10:23 +09:00
parent 752371e09f
commit 9b5c76239c
7 changed files with 125 additions and 99 deletions
@@ -0,0 +1,30 @@
import type { TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import { TableRow, TableHead } from "@common/components/ui";
export const headMakeColSpan = (upHeadList: TableUpperProps[]) => {
return (
<>
<TableRow>
{upHeadList.map((head: TableUpperProps) =>
!head.upSequnce ? (
<TableHead rowSpan={2} key={head.id}>
{head.title}
</TableHead>
) : head.upName === "upChangeRe" && head.upSequnce === 1 ? (
<TableHead key={head.id} rowSpan={1} colSpan={3}>
{"중축 개축 재축 "}
</TableHead>
) : null
)}
</TableRow>
<TableRow>
{upHeadList.map((head: TableUpperProps) =>
head.upName === "upChangeRe" ? (
<TableHead key={head.id}>{head.title}</TableHead>
) : null
)}
</TableRow>
</>
);
};
@@ -23,35 +23,8 @@ import {
import ListDiv from "@common/business_components/ui/list_div";
import { Button, TableHead, TableRow } from "@common/components";
import { useEffect, useState } from "react";
import { headMakeColSpan } from "./TableHead";
export const headMakeColSpan = (upHeadList: TableUpperProps[]) => {
return (
<>
<TableRow>
{upHeadList.map((head: TableUpperProps) =>
!head.upSequnce ? (
<TableHead rowSpan={2} key={head.id}>
{head.title}
</TableHead>
) : head.upName === "upChangeRe" && head.upSequnce === 1 ? (
<TableHead key={head.id} rowSpan={1} colSpan={3}>
{"중축 개축 재축 "}
</TableHead>
) : null
)}
</TableRow>
<TableRow>
{upHeadList.map((head: TableUpperProps) =>
head.upName === "upChangeRe" ? (
<TableHead key={head.id}>{head.title}</TableHead>
) : null
)}
</TableRow>
</>
);
};
//-------------------------------------------------------------------------------------------------------
export default function Home() {
const { rain, code, init } = useWrStore((state) => {
@@ -14,13 +14,13 @@ import {
} from "@common/business_components";
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 { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
import { tableData } from "@/components/lib/func/commom";
import RswtrRegForm from "@/components/ui/form/fcltReg/rswtrReg/rswtrRegForm";
import BdstChgModal from "@/components/ui/modal/bdstChgModal/bdstChgModal";
import type { chgBuilding } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import { headMakeColSpan } from "../rainReg/TableHead";
export default function Home() {
const { code, rswt, initRswt } = useWrStore((state) => state);
@@ -7,6 +7,7 @@ import { tableData } from "@/components/lib/func/commom";
import HeadChModal from "@/components/ui/modal/headChModal/headChModal";
import {
ContentsDiv,
filePickedBlob,
SearchBaseForm,
Title,
UiModal,
@@ -19,7 +20,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
import { headMakeTriple } from "./TableHead";
export default function RainSttn() {
const { code, sttnCommon, excelRainSttn,excelExportAction, rainSttnInit } =
const { code, sttnCommon, excelRainSttn,excelExportAction, rainSttnSearch } =
useWrStore((state) => state);
const { rainRes } = sttnCommon;
@@ -39,19 +40,18 @@ export default function RainSttn() {
}else{
con = ref.current.sidoValue
}
rainSttnInit('1', '20' ,con);
rainSttnSearch('1', '20' ,con);
}
}, [sttnCommon.isInit, rainSttnInit]);
}, [sttnCommon.isInit, rainSttnSearch]);
useEffect(() => {
if (rainRes.length > 0) {
const data = tableData(rainRes, { code });
// data 는 위 JSON 객체라고 가정
// TODO: 이게 뭐하는 작업이지?
const unVisibleHead = sttnCommon.rainSttHeadList.filter(
(item: TableTripleProps) => item.visible === false
);
const chData = data
.map((item: any) => ({
...item,
@@ -65,13 +65,30 @@ export default function RainSttn() {
}, [code, rainRes, sttnCommon.rainSttHeadList]);
useEffect(() => {
if(sttnCommon.excelList.length>0){
// TODO: API 호출후 받은 데이터로 엑셀 변환.
if (sttnCommon.excelList.length === 0) return;
fetch('/sample_rainy.xlsx', {})
.then(async (response) => {
if (!response.ok) {
throw Error(response.statusText)
}
// 받은 파일 바인너리 처리
const blobRet = await response.arrayBuffer()
// 버퍼에 있는 엑셀데이터 전달 후 json으로 변환
const ret =await filePickedBlob(blobRet, sttnCommon.excelList )
console.log('ret', ret);
})
}
}, [sttnCommon.excelList]);
const excelClick = useCallback(() => {
//TODO: 엑셀 버튼 클릭시 API 호출 후 데이터를 excelRainSttn호출하여 변환된 데이터 effect 이벤트 동작.excelRainSttn(code.cityCd, code.sggCd);
//FIXME: 현재 API 호출하는 함수 액션이 존재하지 않음.
},[code.cityCd, code.sggCd, excelRainSttn]);
const excelClick = useCallback((returnType:ReturnType) => {
let con
if (returnType.sigunValue != '0') {
con = returnType.sigunValue
}else{
con = returnType.sidoValue
}
rainSttnSearch('1', '10000' ,con);
},[rainSttnSearch]);
return (
<>
<ContentsDiv>
@@ -105,7 +122,7 @@ export default function RainSttn() {
}else{
con = returnType.sidoValue
}
rainSttnInit('1', '20' ,con);
rainSttnSearch('1', '20' ,con);
}}
excelClick={excelClick}
initClick={function (): void {}}
@@ -0,0 +1,53 @@
import type { chHeadType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn";
import type { TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import { TableHead, TableRow } from "@common/components/ui";
export const headMakeprfmnc = (
upHeadList: TableUpperProps[],
makeHeadNm: chHeadType[]
) => {
return (
<>
<TableRow>
{upHeadList
.map((head: TableUpperProps) =>
!head.upSequnce ? (
<TableHead
className={`border border-gray-600 px-2 py-1 `}
rowSpan={2}
key={head.id}
>
{head.title}
</TableHead>
) : head.upSequnce === 1 ? (
<TableHead
className={`border border-gray-600 px-2 py-1 `}
key={head.id}
rowSpan={1}
colSpan={
makeHeadNm.find((ch) => ch.headNm === head.upName)?.length
}
>
{makeHeadNm.find((ch) => ch.headNm === head.upName)?.text}
</TableHead>
) : null
)}
</TableRow>
<TableRow>
{upHeadList
.filter((data) => data.visible != false)
.map((head: TableUpperProps) =>
makeHeadNm.find((ch) => ch.headNm === head.upName) ? (
<TableHead
className={`border border-gray-600 px-2 py-1 `}
key={head.id}
>
{head.title}
</TableHead>
) : null
)}
</TableRow>
</>
);
};
@@ -23,66 +23,15 @@ import {
UiModal
} from "@common/business_components/ui";
import ListDiv from "@common/business_components/ui/list_div";
import { TableHead, TableRow } from "@common/components";
import { Button } from "@common/components/ui";
import { useCallback, useEffect, useState } from "react";
export const headMakeprfmnc = (
upHeadList: TableUpperProps[],
makeHeadNm: chHeadType[]
) => {
return (
<>
<TableRow>
{upHeadList
.map((head: TableUpperProps) =>
!head.upSequnce ? (
<TableHead
className={`border border-gray-600 px-2 py-1 `}
rowSpan={2}
key={head.id}
>
{head.title}
</TableHead>
) : head.upSequnce === 1 ? (
<TableHead
className={`border border-gray-600 px-2 py-1 `}
key={head.id}
rowSpan={1}
colSpan={
makeHeadNm.find((ch) => ch.headNm === head.upName)?.length
}
>
{makeHeadNm.find((ch) => ch.headNm === head.upName)?.text}
</TableHead>
) : null
)}
</TableRow>
<TableRow>
{upHeadList
.filter((data) => data.visible != false)
.map((head: TableUpperProps) =>
makeHeadNm.find((ch) => ch.headNm === head.upName) ? (
<TableHead
className={`border border-gray-600 px-2 py-1 `}
key={head.id}
>
{head.title}
</TableHead>
) : null
)}
</TableRow>
</>
);
};
//-----------------------
export default function Page() {
const { code, rainChkgdn, rainChkInit,rainChkDetilUpdate, excelExportAction } = useWrStore((state) => {
return state;
});
const [isDetail, setIsDetail] = useState(false);
const [isExcel, setIsExcel] = useState(false);
const [searchTxt, setSearchTxt] = useState<string>();
@@ -101,6 +50,8 @@ export default function Page() {
rainChkInit('2024','0');
}
}, [rainChkgdn.isInit, rainChkInit]);
useEffect(() => {
console.log("rainChkgdn.excelList", rainChkgdn.excelList);
if (rainChkgdn.excelList.length === 0) return;
@@ -112,13 +63,16 @@ export default function Page() {
// 받은 파일 바인너리 처리
const blobRet = await response.arrayBuffer()
// 버퍼에 있는 엑셀데이터 전달 후 json으로 변환
const ret =await filePickedBlob(blobRet, rainChkgdn.excelList)
const ret =await filePickedBlob(blobRet, rainChkgdn.excelList )
console.log('ret', ret);
})
}, [rainChkgdn.excelList]);
const excelClick= useCallback(()=>{
excelExportAction(code.cityCd, code.sggCd);
}, [excelExportAction, code.cityCd, code.sggCd]);
return (
<ContentsDiv>
<div className="grid grid-cols-4 gap-4 ">
@@ -1,20 +1,19 @@
"use client";
import { headMakeColSpan } from "@/app/ruseFcltMng/fcltReg/rainReg/page";
import { useWrStore } from "@/app/store";
import {
selectClass,
type customRainBdst,
} from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import { ScrollArea, SelectBox, UiTable } from "@common/business_components";
import { ScrollArea, SelectBox, UiTable, type SelectDataType } from "@common/business_components";
import { Button, Input, Label } from "@common/components";
import { useEffect, useState } from "react";
import RainRegForm from "../../form/fcltReg/rainReg/rainRegForm";
import { type selectArray } from "@/app/store/common/code";
import { getCity, tableData } from "@/components/lib/func/commom";
import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
import HtdflRegForm from "../../form/fcltReg/htdflReg/htdflRegForm";
import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
import RswtrRegForm from "../../form/fcltReg/rswtrReg/rswtrRegForm";
import { headMakeColSpan } from "@/app/ruseFcltMng/fcltReg/rainReg/TableHead";
export type objSearchType = {
sgg: string|number;
@@ -40,7 +39,7 @@ export function BdstReg<T extends MoType>({ moType }: BdstRegProps<T>) {
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[] | []>()
const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>()
const [objSearch, setObjSearch] = useState<objSearchType>({sgg:"",city:""});
const getSelCity = (val: string | number) => {