Merge commit '8456e1be9fd2c8f8f3f31f636a3f98d9f1ff8908' into iipbs/sn/dev

apps/fo/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/sn/app/components/ui/operFileUploadForm.tsx

@@ -1,25 +1,11 @@
 "use client"
 import { SelectBox } from '@common/business_components/ui';
-import { Button } from '@common/components/ui';
 import React, { useState } from 'react'
-import type { HttpResponse, Upload } from "tus-js-client";
-import { FileUploader } from "@common/components";
-import { handleUpload } from "@utils";
-import { set } from 'react-hook-form';
 import FileUploadForm from './fileUploadForm';
 
 const operFileUploadForm = ({ title, onSubmit }: { title: string, onSubmit: (files: string, year: string, quarter: string, code:string, id:string) => void }) => {
     const [atflCd, setAtflCd] = useState<string | null>(null);
     const [atflId, setAtflId] = useState<string | null>(null);
-    const handleUploadResponse = (file: File) => async (res: HttpResponse) => {
-        const fileInfo = res.getHeader("X-File-Info");
-        if (!fileInfo) return;
-        const { atflCd, atflId } = JSON.parse(fileInfo) ?? {};
-        const orgnlFileNm = file.name;
-        console.log('orgnlFileNm', orgnlFileNm, atflCd, atflId);
-        setAtflCd(atflCd);
-        setAtflId(atflId);
-    };
 
     // 현재 년도부터 10년 전까지의 년도 옵션 생성
     const yearOptions = Array.from({ length: 10 }, (_, i) => {
@@ -27,10 +13,8 @@ const operFileUploadForm = ({ title, onSubmit }: { title: string, onSubmit: (fil
         return { text: `${year}년`, val: year.toString() };
     });
     const quater = [{ text: '1분기', val: '1' }, { text: '2분기', val: '2' }, { text: '3분기', val: '3' }, { text: '4분기', val: '4' }]
-    const [files, setFiles] = useState<FileList | null>(null);
     const [selectedYear, setSelectedYear] = useState<string>(yearOptions[0]?.val || '');
     const [selectedQuarter, setSelectedQuarter] = useState<string>(quater[0]?.val || '');
-    const [upload, setUpload] = useState<Upload | null>(null);
 
     return (
         <div>
@@ -54,7 +38,9 @@ const operFileUploadForm = ({ title, onSubmit }: { title: string, onSubmit: (fil
                             onSelectValue={(value: string | number) => setSelectedQuarter(String(value))}
                         />
                         <FileUploadForm
-                            onSubmit={onSubmit}
+                             onSubmit={(files, year, quarter, code, id) => {
+                                onSubmit(files, (selectedYear ?? year) || '', (selectedQuarter ?? quarter) || '', code, id);
+                            }}
                             showButton={true}
                             showPreview={true}
                             accept={""} />

apps/sn/app/oper/floodPre/page.tsx

@@ -51,6 +51,7 @@ const Page = () => {
         setCurPage(1)
         fetchData()
     }, [])
+    // 파일 다운로드
     const isChckFile = () => {
         if (fileNm === '' || fileNm === undefined) {
             alert('파일을 선택해주세요')
@@ -58,6 +59,7 @@ const Page = () => {
         }
         handleDownload(`/attach-service/api/v1/download/${atflId}`, fileNm)
     }
+    // 선택 파일 삭제
     const isDeleteFile = async () => {
         if (sbmrgPrevntBizSn === '' || sbmrgPrevntBizSn === undefined) {
             alert('삭제할 파일을 선택해주세요')
@@ -72,6 +74,7 @@ const Page = () => {
             }
         }
     }
+    // 현황 등록
     const registFile = async (fileName: string, year: string, quater: string, cd: string, id: string) => {
         const data = await postData('v1/sbmrgPrevnt', {
             atflNm: fileName,
@@ -103,7 +106,7 @@ const Page = () => {
                             <Input
                                 className='w-[100px]'
                                 value={manageYear}
-                                onChange={(e) => setManageYear(e.target.value)}
+                                onChange={(e) => {setManageYear(e.target.value); console.log(e.target.value)}}
                             />
                             <span>~</span>
                             <Input
@@ -142,7 +145,7 @@ const Page = () => {
                         <Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" onClick={isDeleteFile} >삭제</Button>
                     </div>
                 </div>
-                (<UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={10} total={totalData} cellClick={(index) => { if (index != null) { const fileName = tableData[index]?.sbmrgPrevntBizNm ?? ""; setFileNm(fileName); const id = tableData[index]?.atflId ?? ''; setAtflId(id); setSbmrgPrevntBizSn(tableData[index]?.sbmrgPrevntBizSn); } }} onPageChange={async (page: number) => { setCurPage(page); await fetchData() }}></UiTable>)
+                <UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={10} total={totalData} cellClick={(index) => { if (index != null) { const fileName = tableData[index]?.sbmrgPrevntBizNm ?? ""; setFileNm(fileName); const id = tableData[index]?.atflId ?? ''; setAtflId(id); setSbmrgPrevntBizSn(tableData[index]?.sbmrgPrevntBizSn); } }} onPageChange={async (page: number) => { setCurPage(page); await fetchData() }}></UiTable>
             </ListDiv>
             <ListDiv className="mt-4">
                 <OperFileUploadForm title='도시침수 예방사업 사업추진현황 등록' onSubmit={async (file, year, quater, cd, id) => { await registFile(file, year, quater, cd, id) }} />

apps/sn/app/oper/oldPp/excelDown/excelDown.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const ExcelDown = () => {
-  return (
-    <div>excelDown</div>
-  )
-}
-
-export default ExcelDown

apps/sn/app/oper/oldPp/page.tsx

@@ -9,7 +9,7 @@ import { tableHeadlistOldPp } from '..'
 import { handleDownload } from '@/components/lib/utils/fileDownload'
 import { searchData } from '@/components/lib/common/apiHelpers'
 import { formatDate } from '@/components/lib/utils/date'
-import { deleteData, getData, postData } from '@/components/lib/api'
+import { deleteData, postData } from '@/components/lib/api'
 const Page = () => {
     const [fromDate, setFromDate] = useState<Date>(()=>{const date = new Date(); date.setDate(date.getDate()-7); return date});
     const [toDate, setToDate] = useState<Date>(new Date());
@@ -23,8 +23,11 @@ const Page = () => {
     const [tableData, setTableData] = useState<any>([{}])
     const [curPage, setCurPage] = useState(1)
     const [totalData, setTotalData] = useState(0) //총 데이터 수
+    const [isLoading, setIsLoading] = useState(true) //로딩 상태
     // 데이터 조회 
     const fetchData = async () => {
+        setIsLoading(true)
+        try {
         const {data, total} = await searchData('v1/dcrpPpl', {
             fromRegDt: formatDate(fromDate),
             fromMngYr: manageYear,
@@ -38,6 +41,8 @@ const Page = () => {
         setTableData(data)
         setTotalData(total)
         console.log(data, total)
+    }catch (error) {
+        console.error('Error fetching data:', error)}finally{setIsLoading(false)}
     }
     useEffect(() => {
         setCurPage(1)
@@ -82,7 +87,7 @@ const Page = () => {
         if (data) {alert('파일이 등록되었습니다.');fetchData() }
     }
     return (
-        <ContentLayout title='노후 하수관로 정비사업'>
+        <ContentLayout title='노후 하수관로 정비사업' isLoading={isLoading}>
             <SearchDiv>
                 <SearchFormLeft>
                     <div className='flex items-center gap-4'>

package.json

@@ -9,7 +9,7 @@
     "packages/*"
   ],
   "scripts": {
-    "build": "turbo run build --filter=!wr",
+    "build": "turbo run build",
     "dev": "turbo run dev",
     "dev:cs": "turbo run dev --filter=cs",
     "dev:sn": "turbo run dev --filter=sn",

packages/common/business_components/src/ui/chart/BarChart.tsx

@@ -64,10 +64,10 @@ const CustomLegend = (props: any) => {
   const { payload } = props;
   return (
     <div style={customStyles.legendContainer}>
-      {payload.map((entry, index: number) => (
+      {payload.map((entry: unknown, index: number) => (
         <div key={`legend-${index}`} className="flex items-center gap-2">
-          <div className="w-[14px] h-[14px] ml-10" style={{ backgroundColor: entry.color }}></div>
-          <span className="text-[12px]">{entry.value}</span>
+          <div className="w-[14px] h-[14px] ml-10" style={{ backgroundColor: (entry as {color: string}).color }}></div>
+          <span className="text-[12px]">{(entry as {value: string}).value}</span>
         </div>
       ))}
     </div>
@@ -76,7 +76,15 @@ const CustomLegend = (props: any) => {
 
 export default function Chart({chartConfig=undefined, chartData=[], chartTitle='차트', chartClassName='w-full h-full', graphSize=40, yFieldText='', showLegend=false} : BarChartProps) {
   const colors = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#FFEEAD", "#D4A5A5"];
+   const getMaxValue = (data: any[], keyPrefix: string) => {
+    return Math.max(...data.map(item => 
+      Object.keys(item)
+        .filter(key => key.includes(keyPrefix))
+        .map(key => item[key])
+    ).flat());
+  };
 
+  const barMaxValue = getMaxValue(chartData, 'barVal');
   return (
     <>
     {chartTitle && chartTitle !== "" && chartTitle !== "undefined" ? (
@@ -102,7 +110,8 @@ export default function Chart({chartConfig=undefined, chartData=[], chartTitle='
               axisLine={true}
               fontSize={12}
               fontWeight={500}
-              label={yFieldText ? { value: yFieldText, className:"text-[13px] foont-bold", position: 'top', textAnchor: 'middle', offset: 20 } : undefined}
+              domain={[0, Math.ceil(barMaxValue * 1)]}
+              label={yFieldText ? { value: yFieldText, className:"text-[13px] font-bold", position: 'insideLeft', angle: -90, offset: 20 } : undefined}
             />
             <ChartTooltip cursor={false} content={<CustomTooltip active={undefined} payload={undefined} label={undefined} />}/>
             {chartData && chartData.length > 0 && (

packages/common/business_components/src/ui/chart/LineChart.tsx

@@ -113,20 +113,21 @@ export default function Linechart({
   }, []);
 
   // 데이터의 최대값 계산
-  const getMaxValue = (data: ChartDataType, keyPrefix: string) => {
-    return Math.max(...Object.values(data).map(item => 
-      Object.keys(item)
-        .filter(key => key.includes(keyPrefix))
-        .map(key => item[key] as unknown as number)
-    ).flat());
+  const getMaxValue = (data: ChartDataType): number => {
+    return Math.max(...Object.values(data).flatMap(dataset => 
+      dataset.map(entry => {
+        const val = parseFloat(entry.val);
+        return isNaN(val) ? 0 : val;
+      })
+    ));
   };
 
-  const lineMaxValue = getMaxValue(chartData, 'lineVal');
+  const lineMaxValue = getMaxValue(chartData);
 
   return (
     <div className={chartClassName}>
       {chartTitle && chartTitle !== "" && chartTitle !== "undefined" ? (
-        <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
+        <div className="text-left text-[13px] font-bold mt-[13px] mb-[10px]">
           {chartTitle}
         </div>
       ) : null}

packages/common/business_components/src/ui/excel/excelStyle.tsx

@@ -1,5 +1,6 @@
-import type { sheetParameter } from '@/index';
+// import type { sheetParameter } from '@/index';
 import * as XlsxPopulate from '@xlsx/xlsx-populate';
+import type { SheetParameter } from './index';
 
 
 
@@ -38,7 +39,7 @@ export const excelStyle = async (data: ArrayBuffer, range: string = "A1:V3", fil
 }
 
 
-export const excelArrayStyle = async (data: ArrayBuffer, range: [typeof sheetParameter], fileNm:string) => {
+export const excelArrayStyle = async (data: ArrayBuffer, range: SheetParameter[], fileNm: string) => {
     const workbook = await XlsxPopulate.Workbook.fromData(data);
     if (range) {
         range.forEach((item, index) => {

packages/common/business_components/src/ui/excel/index.tsx

@@ -5,7 +5,7 @@ type ExcelDownloadProps = {
   data: JSON | JSON[];
   fileName: string;
   sheetNameArray: string[];
-  headerRange: string;
+  headerRange?: string;
 }
 
 export const downloadExcel = ({ data, fileName = new Date().getTime().toString() + '.xlsx', sheetNameArray = ["Sheet1"], headerRange='A1:V3'}: ExcelDownloadProps) => {
@@ -15,11 +15,15 @@ export const downloadExcel = ({ data, fileName = new Date().getTime().toString()
   excelStyle(XLSX.write(workbook, { bookType: "xlsx", type: "buffer" }), headerRange, fileName);
 };
 
-export  const sheetParameter ={
-  data:[[]], headerNum:0, headerRange:'A1:V3', sheetName:'Sheet1', startCol:0
-}
+export type SheetParameter = {
+  data: any[][];
+  headerNum: number;
+  headerRange: string;
+  sheetName: string;
+  startCol?: string;
+};
 
-export const downloadMultipleExcel = (fileName = new Date().getTime().toString() + '.xlsx', sheetArray: Array<typeof sheetParameter>): Promise<JSON | undefined> => { 
+export const downloadMultipleExcel = (fileName = new Date().getTime().toString() + '.xlsx', sheetArray: SheetParameter[]): Promise<JSON | undefined> => { 
   const workbook = XLSX.utils.book_new();
   for (let i = 0; i < sheetArray.length; i++) {
     // Create a new worksheet for each sheet
@@ -37,7 +41,6 @@ export const downloadMultipleExcel = (fileName = new Date().getTime().toString()
   return Promise.resolve(undefined);
 };
 
-
 export const filePicked=(oFile: File, headerNum:number=0, dateType="yyyymmdd"):Promise<JSON | undefined> =>{
   // Create A File Reader HTML5
   const reader = new FileReader();
@@ -80,8 +83,6 @@ export const filePicked=(oFile: File, headerNum:number=0, dateType="yyyymmdd"):P
   });
 }
 
-
-
 export const filePickedArray=(oFile: File, headerNum:number=0):Promise<JSON[] | undefined> =>{
   // Create A File Reader HTML5
   const reader = new FileReader();
@@ -123,8 +124,6 @@ export const filePickedArray=(oFile: File, headerNum:number=0):Promise<JSON[] |
   });
 }
 
-
-
 export const filePickedBlob=(oFile: ArrayBuffer, data:[][],fileNm:string, headerNum:number=0, headerRange='A1:V3', startCol?:number):Promise<JSON | undefined> =>{ // Create A File Reader HTML5
   return new Promise<JSON | undefined>(() => {
     // Ready The Event For When A File Gets Selected
@@ -149,28 +148,20 @@ export const filePickedBlob=(oFile: ArrayBuffer, data:[][],fileNm:string, header
     });
   }
 
-  export const filePickedBlobArray=  (oFile: ArrayBuffer,fileNm:string, sheetArray: [typeof sheetParameter]):Promise<JSON | undefined> =>{ // Create A File Reader HTML5
+export const filePickedBlobArray = (oFile: ArrayBuffer, fileNm: string, sheetArray: SheetParameter[]): Promise<JSON | undefined> => {
   return new Promise<JSON | undefined>(async () => {
-      // Ready The Event For When A File Gets Selected
     const wb = XLSX.read(oFile, { type: 'binary' });
-        // Loop Over Each Sheet
     wb.SheetNames.forEach(function (sheetName, index) {
-          // Obtain The Current Row As CSV
       if (sheetArray[index]) {
         const sheet = wb.Sheets[sheetName];
         if (sheet) {
-              //오리진 확인 test 필요
-              // const sheet = XLSX.utils.json_to_sheet(data);
-              const startCol = sheetArray[index].startCol?sheetArray[index].startCol.toString():'A';
+          const startCol = sheetArray[index].startCol ? sheetArray[index].startCol : 'A';
           XLSX.utils.sheet_add_aoa(sheet, sheetArray[index].data, { origin: startCol + sheetArray[index].headerNum });
-              // XLSX.utils.book_append_sheet(wb, sheet, 'test');
         } else {
           console.error(`Sheet "${sheetName}" is undefined.`);
         }
       }
     });
-
-
     await excelArrayStyle(XLSX.write(wb, { bookType: "xlsx", type: "buffer" }), sheetArray, fileNm)
   });
 }

packages/common/business_components/src/ui/form_ui/index.tsx

@@ -1,19 +1,64 @@
-import React from "react";
+import React, { useCallback, useState } from "react";
 import { FormControl, FormItem, FormLabel, FormMessage } from "../form";
+import { Button, Checkbox } from "@common/components/ui";
 
-const FormUi = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & {label:string|undefined}
->(({children, label},ref)=>{
+export const BZNM_TOT_NO = '총사업자등록번호';
+export const CANDIDATE = '공급처 후보지 선택(필수아님)';
+
+interface FormUiProps extends React.HTMLAttributes<HTMLDivElement> {
+  label?: string;
+  onCheckboxChange?: (checked: boolean) => void;
+  isDisabled?: boolean;
+}
+
+interface FormElementProps extends React.HTMLAttributes<HTMLElement> {
+  disabled?: boolean;
+}
+
+const FormUi = React.forwardRef<HTMLDivElement, FormUiProps>(
+  ({ children, label, onCheckboxChange, isDisabled }, ref) => {
+    const [isChecked, setIsChecked] = useState(false);
+
+    const handleCheckboxChange = useCallback((checked: boolean) => {
+      setIsChecked(checked);
+      onCheckboxChange?.(checked);
+    }, [onCheckboxChange]);
+    console.log(children);
     return (
       <FormItem ref={ref}>
-            {label?<FormLabel className="text-xl">{label}</FormLabel>:<></>}
+        {label && <FormLabel className="text-xl">{label}</FormLabel>}
+        {label === BZNM_TOT_NO && (
+          <div className="float-right">
+            <div className="flex items-center gap-2">
+              <Checkbox 
+                id="check" 
+                checked={isChecked}
+                onCheckedChange={handleCheckboxChange}
+              />
+              <label className="w-20 text-xl text-gray-600" htmlFor="check">해당없음</label>
+            </div>
+          </div>
+        )}
+        {label === CANDIDATE && (
         <FormControl>
           {children}
         </FormControl>  
+        )}
+        {label !== BZNM_TOT_NO && label !== CANDIDATE && (
+        <FormControl>
+          {React.isValidElement(children) && isDisabled
+            ? React.cloneElement(children, { 
+                disabled: true,
+                ...(children.props as FormElementProps)
+              })
+            : children}
+        </FormControl>
+        )}
         <FormMessage />
       </FormItem>
-    )
-})
+    );
+  }
+);
+
 FormUi.displayName = 'FormUi';
 export { FormUi };

packages/common/business_components/src/ui/search_base_form/index.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { Button } from "@common/components/ui";
 import { useCallback, useEffect, useState } from "react";
 import { SearchFormLeft, type EnvPartSelectDataType } from "../search_form_left";

packages/common/business_components/src/ui/search_form_left/index.tsx

@@ -1,4 +1,6 @@
-import React, { useEffect, useState } from 'react';
+"use client"
+
+import React, { useEffect, useState } from 'react';
 import type { SelectDataType } from '../search_input_select';
 import { SelectBox } from '../select';
 

packages/common/business_components/src/ui/search_form_right/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-function SearchFormRight(props: {children: React.ReactNode}) {
+function SearchFormRight(props: {children: React.ReactNode, className?: string}) {
   return (
-    <div className="w-1/12 mx-5 flex flex-col items-center justify-center space-x-2">
+    <div className={props.className?props.className:`w-1/12 mx-5 flex flex-col items-center justify-center space-x-2 `}>
         {props.children}
     </div>
   )

packages/common/business_components/src/ui/tab/index.tsx

@@ -6,7 +6,7 @@ interface TabItem {
   label: string;
 }
 
-interface UITabProps extends React.HTMLAttributes<HTMLDivElement> {
+interface UITabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'dir'> {
   defaultValue?: string;
   tabList: TabItem[];
   children: React.ReactNode;
@@ -22,6 +22,7 @@ const UITab  = React.forwardRef<
       defaultValue={defaultValue || tabList[0]?.value} 
       className={"w-full space-x-1 border-b border-gray-200"}
       onValueChange={onValueChange}
+      ref={ref}
       {...props}
     >
       <TabsList className="flex space-x-1">
@@ -37,6 +38,9 @@ const UITab  = React.forwardRef<
       </TabsList>
       {children}
     </Tabs>
-    )
-})
+  );
+});
+
+UITab.displayName = 'UITab';
+
 export { UITab };

packages/common/business_components/src/ui/table/index.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { Table, TableBody, TableCell, TableHeader, TableRow } from "@common/components";
 import { useEffect, useState } from "react";
 import { HeadMakeColSpan } from "./HeadMakeColSpan";

packages/common/business_components/src/ui/table/lib/pagination.tsx

@@ -8,7 +8,7 @@ const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
   <nav
     role="navigation"
     aria-label="pagination"
-    className={cn("mx-auto flex w-full justify-center", className)}
+    className={cn("mx-auto flex w-full justify-center text-lg mt-2", className)} 
     {...props}
   />
 )
@@ -42,7 +42,7 @@ type PaginationLinkProps = {
 const PaginationLink = ({
   className,
   isActive,
-  size = "icon",
+  size = "default",
   ...props
 }: PaginationLinkProps) => (
   <a
@@ -52,6 +52,7 @@ const PaginationLink = ({
         variant: isActive ? "outline" : "ghost",
         size,
       }),
+      "px-4 py-2 text-lg", 
       className
     )}
     {...props}
@@ -66,10 +67,10 @@ const PaginationPrevious = ({
   <PaginationLink
     aria-label="Go to previous page"
     size="default"
-    className={cn("gap-1 pl-2.5", className)}
+    className={cn("gap-2 pl-4 text-lg", className)} 
     {...props}
   >
-    <ChevronLeft className="h-4 w-4" />
+    <ChevronLeft className="h-6 w-6" /> 
     <span>Previous</span>
   </PaginationLink>
 )
@@ -82,11 +83,11 @@ const PaginationNext = ({
   <PaginationLink
     aria-label="Go to next page"
     size="default"
-    className={cn("gap-1 pr-2.5", className)}
+    className={cn("gap-2 pr-4 text-lg", className)} 
     {...props}
   >
     <span>Next</span>
-    <ChevronRight className="h-4 w-4" />
+    <ChevronRight className="h-6 w-6" /> 
   </PaginationLink>
 )
 PaginationNext.displayName = "PaginationNext"
@@ -97,10 +98,10 @@ const PaginationEllipsis = ({
 }: React.ComponentProps<"span">) => (
   <span
     aria-hidden
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    className={cn("flex h-12 w-12 items-center justify-center text-lg", className)} 
     {...props}
   >
-    <MoreHorizontal className="h-4 w-4" />
+    <MoreHorizontal className="h-6 w-6" /> 
     <span className="sr-only">More pages</span>
   </span>
 )