[as] feat: 파일 양식 다운로드 API 수정

apps/as/src/pages/esntl-atch-file-mng/model/esntl-atch-file-columns.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { createColumnHelper } from "@tanstack/react-table";
-import { Paperclip } from "lucide-react";
+import { Download } from "lucide-react";
 
 import type { Code } from "@/entities/code";
 import { findCodeLabel } from "@/entities/code";
@@ -58,26 +58,18 @@ export function createEsntlAtchFileColumns({
     }),
     columnHelper.display({
       id: "templateDownload",
-      header: "양식 다운로드",
+      header: "양식 내려받기",
       meta: { align: "center" },
       cell: ({ row }) => {
-        const files = row.original.atchFileList ?? [];
+        const atflCd = row.original.atchFileGroupId ?? "";
 
-        if (files.length === 0) return "-";
+        if (!atflCd) return "-";
 
         return (
-          <div className="space-y-2" onClick={(e) => e.stopPropagation()}>
-            {files.map((file) => (
-              <a
-                key={file.atflId}
-                className="flex cursor-pointer items-start gap-0.5 text-left text-blue-600 hover:underline"
-                onClick={() => onDownloadTemplate(file.atflId)}
-              >
-                <Paperclip className="my-1 size-5 shrink-0" />
-                {file.orgnlFileNm || "다운로드"}
-              </a>
-            ))}
-          </div>
+          <Button type="button" size="sm" color="white" onClick={() => onDownloadTemplate(atflCd)}>
+            <Download className="!size-5 shrink-0" />
+            내려받기
+          </Button>
         );
       },
     }),

apps/as/src/pages/esntl-atch-file-mng/ui/esntl-atch-file-list.tsx

@@ -6,7 +6,7 @@ import { useConfirm } from "@frontend-opensource/use-react-hooks";
 import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
 
 import { useDataTable } from "@/shared/lib";
-import { useDownloadAttachmentByAtflId } from "@/entities/attach";
+import { useDownloadAttachmentByAtflCd } from "@/entities/attach";
 import { useCodeList } from "@/entities/code";
 import {
   type EsntlAtchFileMng,
@@ -38,7 +38,7 @@ function EsntlAtchFileList({
 }: EsntlAtchFileListProps) {
   const { confirm } = useConfirm();
   const { data: docSeCodes } = useCodeList("ASDOCSE");
-  const { mutate: downloadTemplate } = useDownloadAttachmentByAtflId();
+  const { mutate: downloadTemplate } = useDownloadAttachmentByAtflCd();
 
   const [dialogMode, setDialogMode] = useState<"create" | "edit" | null>(null);
   const [editingRow, setEditingRow] = useState<EsntlAtchFileMng | null>(null);
@@ -67,8 +67,8 @@ function EsntlAtchFileList({
   );
 
   const handleDownloadTemplate = useCallback(
-    (atflId: string) => {
-      downloadTemplate(atflId);
+    (atflCd: string) => {
+      downloadTemplate(atflCd);
     },
     [downloadTemplate],
   );

apps/as/src/widgets/pbadms-sprt/ui/attachments-form-section.tsx

@@ -4,14 +4,14 @@ import { useEffect, useRef, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 
 import { useQueryClient } from "@tanstack/react-query";
-import { Paperclip, X } from "lucide-react";
+import { Download, Paperclip, X } from "lucide-react";
 
 import { ENDPOINT } from "@/shared/config";
 import { useTus } from "@/shared/lib";
 import type { AtflMngClientResponseDto, EsntlAtchFileMngTreeResponseDto } from "@/shared/model";
 import { TextShimmer } from "@/shared/ui";
 import { SectionCollapsible } from "@/shared/ui";
-import { attachService, useDownloadAttachmentByAtflId } from "@/entities/attach";
+import { attachService, useDownloadAttachmentByAtflCd } from "@/entities/attach";
 import { useEsntlAtchFileMngTree } from "@/entities/esntl";
 import {
   Button,
@@ -212,7 +212,7 @@ function AttachmentsFormSection({
   const { data: essentialFiles = [], isPending: isLoadingEssentialFiles } = useEsntlAtchFileMngTree(
     { docSeComCd },
   );
-  const { mutate: downloadTemplate } = useDownloadAttachmentByAtflId();
+  const { mutate: downloadTemplate } = useDownloadAttachmentByAtflCd();
 
   async function invalidateAttachmentQueries() {
     await queryClient.invalidateQueries({
@@ -376,10 +376,9 @@ function AttachmentsFormSection({
               <h3 className="mb-4 text-xl font-semibold">필수 첨부파일</h3>
               <Table variant="secondary" className="table-fixed">
                 <colgroup>
-                  <col width="30%" />
+                  <col width="44%" />
                   <col width="12%" />
-                  <col width="23%" />
-                  <col width="35%" />
+                  <col width="44%" />
                 </colgroup>
                 <TableHeader>
                   <TableRow>
@@ -387,7 +386,6 @@ function AttachmentsFormSection({
                       파일명
                     </TableHead>
                     <TableHead>파일 확장자</TableHead>
-                    <TableHead align="left">파일 양식</TableHead>
                     <TableHead>파일첨부</TableHead>
                   </TableRow>
                 </TableHeader>
@@ -400,36 +398,30 @@ function AttachmentsFormSection({
                     </TableRow>
                   ) : (
                     essentialFiles.map((file) => {
-                      const templateFiles = file.templateAtchFileList ?? [];
+                      const atflCd = file.atchFileGroupId ?? "";
 
                       return (
                         <TableRow key={file.esntlAtchFileId}>
                           <TableHead
-                            className="break-keep font-medium"
+                            className="group break-keep font-medium"
                             data-required={file.esntlAtchYn === "Y"}
                             align="left"
                           >
-                            {file.esntlAtchFileNm}
+                            <div className="inline-flex w-[calc(100%-1rem)] items-center justify-between gap-10">
+                              {file.esntlAtchFileNm}
+                              {atflCd ? (
+                                <Button
+                                  size="sm"
+                                  color="white"
+                                  onClick={() => downloadTemplate(atflCd)}
+                                >
+                                  <Download className="!size-5 shrink-0" />
+                                  양식내려받기
+                                </Button>
+                              ) : null}
+                            </div>
                           </TableHead>
                           <TableCell align="center">{file.esntlAtchFileRmrk}</TableCell>
-                          <TableCell align="left">
-                            {templateFiles.length === 0 ? (
-                              <span className="text-muted-foreground">-</span>
-                            ) : (
-                              <div className="space-y-1">
-                                {templateFiles.map((templateFile) => (
-                                  <a
-                                    key={templateFile.atflId}
-                                    className="flex cursor-pointer items-center gap-1 text-blue-600 hover:underline"
-                                    onClick={() => downloadTemplate(templateFile.atflId)}
-                                  >
-                                    <Paperclip className="size-4 shrink-0" />
-                                    {templateFile.orgnlFileNm || "다운로드"}
-                                  </a>
-                                ))}
-                              </div>
-                            )}
-                          </TableCell>
                           <TableCell className="space-y-2">
                             {uploadedFiles[file.esntlAtchFileId]?.length > 0 && (
                               <div className="flex flex-wrap gap-2">