/** * ๐Ÿ“„ InputTableBody Component * ์นจ์ˆ˜์˜ˆ๋ฐฉ ์ž…๋ ฅ ํ…Œ์ด๋ธ” ๋ฐ”๋”” ์ปดํฌ๋„ŒํŠธ * * - ์ˆซ์ž ์ž…๋ ฅ ๋ฐ ์ฝค๋งˆ ํฌ๋งทํŒ… ๊ธฐ๋Šฅ * - mergeCell์„ ํ†ตํ•œ ์…€ ๋ณ‘ํ•ฉ ์ฒ˜๋ฆฌ * - ํŽธ์ง‘ ๊ฐ€๋Šฅ/๋ถˆ๊ฐ€๋Šฅ ์ƒํƒœ ๊ด€๋ฆฌ * - ์†Œ๊ณ„/์ดํ•ฉ๊ณ„ ํ–‰ ์Šคํƒ€์ผ๋ง ๋ฐ ํ‘œ์‹œ * - ์ž…๋ ฅ ๊ฐ’ ๊ฒ€์ฆ ๋ฐ ๋ณ€๊ฒฝ ํ•ธ๋“ค๋ง * - ๋นˆ ๋ฐ์ดํ„ฐ ์ƒํƒœ ์ฒ˜๋ฆฌ */ import type { TableUpperProps } from "./headMakeFloodPre"; import { Input, TableCell, TableRow } from "@common/components/ui"; // ์ˆซ์ž์ž…๋ ฅ์‹œ , ์‚ฝ์ž… const formatCommaNumber = ( value: number | string | undefined | null, ): string => { if (value === undefined || value === null || value === "") return ""; const num = Number(value); // ์ˆซ์ž๋กœ ๋ณ€ํ™˜ํ•  ์ˆ˜ ์—†๋Š” ๊ฐ’์ด ๋“ค์–ด์˜ฌ ๊ฒฝ์šฐ ๋นˆ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•˜์—ฌ ์˜ˆ์ƒ์น˜ ๋ชปํ•œ "NaN" ์ถœ๋ ฅ์„ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค. if (isNaN(num)) { return ""; } return num.toLocaleString(); }; // onchange ํ…์ŠคํŠธ๋ฅผ ์ˆซ์ž๋กœ and ,์ œ๊ฑฐ const handleCommaNumberChange = ( e: React.ChangeEvent, onChange: (value: number | "") => void, ) => { const raw = e.target.value.replace(/,/g, ""); if (!/^\d*$/.test(raw)) return; onChange(raw === "" ? "" : Number(raw)); }; const handleChange = ( rowIndex: number, field: any, value: string, setInputData: (data: any) => void, ) => { if (Number(value) < 0 || !Number(value)) { value = "0"; } setInputData((prevData: any) => prevData?.map((row: any, index: number) => { if (index === rowIndex) { return { ...row, [field]: Number(value.replace(/,/g, "")), }; } return row; }), ); }; export const InputTableBody = ( chgRes: any[] | [], headList: TableUpperProps[], setInputData: (data: any[]) => void, isEditable: boolean = true, ) => { // mergeCell ์ฒ˜๋ฆฌ์šฉ const getRowSpan = (data: any[], key: string, rowIndex: number) => { if ( rowIndex > 0 && data[rowIndex - 1][key] && String(data[rowIndex][key]).trim() === "" ) { return 0; // ์ด์ „๊ณผ ๊ฐ™์œผ๋ฉด ์…€์„ ๊ทธ๋ฆฌ์ง€ ์•Š์Œ } let span = 1; for (let i = rowIndex + 1; i < data.length; i++) { if (data[i][key] === data[rowIndex][key]) span++; else break; } return span; }; return ( <> {chgRes.map((data, dataIndex) => { // ์†Œ๊ณ„/์ดํ•ฉ๊ณ„ ํ–‰ ํŒ๋ณ„ const isSubTotal = data["์šฉ์ˆ˜๋ช…"] === "์†Œ๊ณ„"; const isTotal = data["๊ตฌ๋ถ„"] === 0; const bgClass = isTotal ? "bg-secondary font-bold" : isSubTotal ? "bg-muted font-semibold" : ""; return ( {headList.map((head, headIndex) => { const isTextColumn = head.id === "__EMPTY_3"; const textAlignClass = isTextColumn ? "text-center" : "text-right"; // // ์ดํ•ฉ๊ณ„ ํ–‰์ด๋ฉด "๊ตฌ๋ถ„"์—์„œ colSpan=2๋กœ ๋ณ‘ํ•ฉ // if ( // (data["๊ตฌ๋ถ„"] === 0 || data["์šฉ์ˆ˜๋ช…"] === 0) && // head.id === "๊ตฌ๋ถ„" // ) { // return ( // // ์ดํ•ฉ๊ณ„ // // ); // } // // ์ดํ•ฉ๊ณ„(ํ•ฉ๊ณ„) ํ–‰์ด๋ฉด "์šฉ์ˆ˜๋ช…" ์ปฌ๋Ÿผ์€ ๋ Œ๋”๋งํ•˜์ง€ ์•Š์Œ // if ( // (data["๊ตฌ๋ถ„"] === 0 || data["์šฉ์ˆ˜๋ช…"] === 0) && // head.id === "์šฉ์ˆ˜๋ช…" // ) { // return null; // } // // ์ดํ•ฉ๊ณ„ ํ–‰์˜ ๋‚˜๋จธ์ง€ ์…€์—๋„ ์ƒ‰์ƒ ์ ์šฉ // if (data["๊ตฌ๋ถ„"] === 0 || data["์šฉ์ˆ˜๋ช…"] === 0) { // return ( // // {Number(data[head.id]) // ? formatCommaNumber(data[head.id as keyof any]) // : (data[head.id as keyof any] ?? "")} // // ); // } // mergeCell ์ฒ˜๋ฆฌ if (head.mergeCell === true) { const rowSpan = getRowSpan(chgRes, head.id, dataIndex); if (rowSpan === 0) return null; return ( {Number(data[head.id]) ? formatCommaNumber(data[head.id as keyof any]) : (data[head.id as keyof any] ?? "")} ); } // ๊ธฐ๋ณธ ์…€ // return head.edit === true && data.edit !== false ? ( return isEditable && head.edit === true && data.edit !== false ? ( handleCommaNumberChange(e, (val) => handleChange( dataIndex, head.id, String(val), setInputData, ), ) } value={formatCommaNumber(data[head.id as keyof any]) ?? ""} maxLength={12} /> ) : (
{Number(data[head.id]) ? formatCommaNumber(data[head.id as keyof any]) : (data[head.id as keyof any] ?? "")}
); })}
); })} {chgRes.length === 0 && ( ์กฐํšŒ๋œ ๊ฒฐ๊ณผ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. )} ); };