wr: 계통도 파일다운로드명, 1건 삭제

apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx

@@ -69,6 +69,7 @@ type pubFacActions = {
   pbnstInsert(pbnstRes: customPbnst): Promise<string>;
   fileDelete: (atflCd: string) => void;
   fileDownLoad: (atflCd: string) => void;
+  fileDownLoadName: (atflCd: string, fileName: string) => void;
   pbnstRuseFcltUpdate: (ruseRes: customPbnst[]) => void;
   pbnstRuseBizUpdate: (ruseRes: fcBizType[]) => void;
   pubHasuSearch: (page: string, sggOrCity: string, searchTxt: string) => void;
@@ -297,6 +298,34 @@ export const pubFacActionsExport: (set: any) => pubFacActions = (set: any) => {
         throw new Error(`Error downloading file: ${error}`);
       }
     },
+    // 파일다운로드(원본 파일명 지정) : 화면에 보여지는 파일명으로 저장
+    fileDownLoadName: async (atflCd: string, fileName: string) => {
+      try {
+        const response = await fetch(
+          `/attach-service/api/v1/atflcd/download/${atflCd}`,
+          {
+            method: "GET",
+            headers: {
+              accept: "application/octet-stream",
+            },
+          }
+        );
+        if (!response.ok) {
+          throw new Error(`오류 발생: ${response.status}`);
+        }
+        console.log(response);
+        const blob = await response.blob();
+        const blobUrl = window.URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = blobUrl;
+        a.download = fileName || "downloaded_file";
+        a.click();
+        window.URL.revokeObjectURL(blobUrl);
+      } catch (error) {
+        console.error("Error downloading file with name:", error);
+        throw new Error(`Error downloading file with name: ${error}`);
+      }
+    },
     //원수취수 팝업의 하수처리 시설 리스트 조회
     getFcOrgwts: async (fcltPkList: string[], size: number) => {
       const fcOrgwtsNmList = await postFectch(

apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx

@@ -44,7 +44,7 @@ const diagramFileTypes = ".pdf,.jpg,.jpeg,.png,.bmp";
  * - with-layout 적용
  * - 하수처리시설에 하수재이용 시설 시설 정보를 등록한다.
  * - form으로 시설정보 및 차수별 정보의 컴포넌트 데이터를 관리한다
- * indexMng: 시설정보
+ * indexMng: 재이용시설정보
  * indexBiz: 차수별 정보
  * 로 하수재이용 시설에 등록된 시설 및 차수별 정보를 관리한다.
  *  */
@@ -61,7 +61,7 @@ export function PbnstMngForm({
   setIndexMng: (index: number) => void;
   readonly: boolean;
 }) {
-  const { code, pbnst, fileDelete, fileDownLoad } = useWrStore(
+  const { code, pbnst, fileDelete, fileDownLoadName } = useWrStore(
     (state) => state
   );
   const [planFiles, setPlanFiles] = useState<FilesType[] | null>(null);
@@ -150,10 +150,10 @@ export function PbnstMngForm({
       } else {
         fileList?.forEach((item, index) => {
           const idx = files?.indexOf(item.file);
-          if (idx < 0) {
-            setReFiles.splice(index);
-            fileDelete(item.atflCd as string);
-          }
+            if (idx < 0) {
+              setReFiles.splice(index, 1);
+              fileDelete(item.atflCd as string);
+            }
         });
       }
       // eslint-disable-next-line @typescript-eslint/no-unused-expressions
@@ -183,7 +183,7 @@ export function PbnstMngForm({
   useEffect(() => {
     setRelationFiles([]);
     setPlanFiles([]);
-    console.log("indexMng ", indexMng);
+    // console.log("indexMng ", indexMng);
 
     const currentItem = form.getValues(`items.${indexMng}`);
     const defaultFiles = currentItem?.fcFiles || [];
@@ -443,7 +443,7 @@ export function PbnstMngForm({
                           <span
                             key={index + "plan"}
                             className="text-2xl block cursor-pointer text-blue-600 hover:underline"
-                            onClick={() => fileDownLoad(item.atflCd)}
+                            onClick={() => fileDownLoadName(item.atflCd, item.file.name)}
                           >
                             {item.file.name}
                           </span>
@@ -462,11 +462,12 @@ export function PbnstMngForm({
                         }}
                         fileTypes={diagramFileTypes}
                         onFileClick={(index) => {
-                          fileDownLoad(
-                            relationfiles?.find(
-                              (item, fileIndex) => fileIndex === index
-                            )?.atflCd as string
+                          const target = relationfiles?.find(
+                            (item, fileIndex) => fileIndex === index
                           );
+                          if (target?.atflCd) {
+                            fileDownLoadName(target.atflCd, target.file.name);
+                          }
                         }}
                       ></FileUpload>
                     </FormUi>
@@ -481,7 +482,7 @@ export function PbnstMngForm({
                           <span
                             key={index + "plan"}
                             className="text-2xl block cursor-pointer text-blue-600 hover:underline"
-                            onClick={() => fileDownLoad(item.atflCd)}
+                            onClick={() => fileDownLoadName(item.atflCd, item.file.name)}
                           >
                             {item.file.name}
                           </span>
@@ -500,11 +501,12 @@ export function PbnstMngForm({
                         }}
                         fileTypes={diagramFileTypes}
                         onFileClick={(index) => {
-                          fileDownLoad(
-                            planFiles?.find(
-                              (item, fileIndex) => fileIndex === index
-                            )?.atflCd as string
+                          const target = planFiles?.find(
+                            (item, fileIndex) => fileIndex === index
                           );
+                          if (target?.atflCd) {
+                            fileDownLoadName(target.atflCd, target.file.name);
+                          }
                         }}
                       ></FileUpload>
                     </FormUi>

packages/common/business_components/src/ui/file-upload/lib/file_upload.tsx

@@ -37,6 +37,7 @@ type FileUploaderContextType = {
 
 const FileUploaderContext = createContext<FileUploaderContextType | null>(null);
 
+//현재 value 배열에서 해당 index만 뺀 newFiles 생성
 export const useFileUpload = () => {
   const context = useContext(FileUploaderContext);
   if (!context) {
@@ -348,13 +349,16 @@ export const FileUploaderItem = forwardRef<
         {children}
       </div>
       <button
+        type="button"
         className={cn(
           "absolute",
           "!w-1/5 z-50",
           direction === "rtl" ? "top-1 left-1" : "top-1 right-1",
           
         )}
-        onClick={() =>{
+        onClick={(e) =>{
+          e.preventDefault();
+          e.stopPropagation();
           removeFileFromSet(index)}}
       >
         <span className="sr-only">remove item {index}</span>