From 92ed3233afbb81de32b318b6f572121cf0b40dd8 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 24 Aug 2026 09:21:30 +0900
Subject: [PATCH 1/4] =?UTF-8?q?[as]=20design:=20=EB=8C=80=EC=8B=9C?=
 =?UTF-8?q?=EB=B3=B4=EB=93=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/as/src/pages/dashboard/ui/dashboard-noti-list.tsx    | 2 +-
 apps/as/src/pages/dashboard/ui/dashboard-notice-table.tsx | 2 +-
 apps/as/src/pages/dashboard/ui/dashboard-page.tsx         | 2 +-
 apps/as/src/pages/dashboard/ui/doc-prgrs-stts-cards.tsx   | 4 ++--
 apps/as/src/pages/dashboard/ui/national-as-map.tsx        | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/as/src/pages/dashboard/ui/dashboard-noti-list.tsx b/apps/as/src/pages/dashboard/ui/dashboard-noti-list.tsx
index 11e938f4b..20c7c2ae1 100644
--- a/apps/as/src/pages/dashboard/ui/dashboard-noti-list.tsx
+++ b/apps/as/src/pages/dashboard/ui/dashboard-noti-list.tsx
@@ -40,7 +40,7 @@ export function DashboardNotiList({
   );
 
   return (
-    <section className="card card-border mx-0 bg-background">
+    <section className="card card-border m-0 bg-background">
       <div className="card-header flex items-center justify-between gap-4">
         <h3 className="text-2xl font-semibold">
           알림이력
diff --git a/apps/as/src/pages/dashboard/ui/dashboard-notice-table.tsx b/apps/as/src/pages/dashboard/ui/dashboard-notice-table.tsx
index 737d92cd1..aa766a30f 100644
--- a/apps/as/src/pages/dashboard/ui/dashboard-notice-table.tsx
+++ b/apps/as/src/pages/dashboard/ui/dashboard-notice-table.tsx
@@ -45,7 +45,7 @@ export function DashboardNoticeTable() {
   });
 
   return (
-    <section className="card card-border mx-0 bg-background">
+    <section className="card card-border m-0 bg-background">
       <div className="card-header flex items-center justify-between">
         <h3 className="text-2xl font-semibold">공지사항</h3>
         <Button type="button" size="sm" color="white" onClick={handleMoreClick}>
diff --git a/apps/as/src/pages/dashboard/ui/dashboard-page.tsx b/apps/as/src/pages/dashboard/ui/dashboard-page.tsx
index 0ce8e7bca..dc904c38e 100644
--- a/apps/as/src/pages/dashboard/ui/dashboard-page.tsx
+++ b/apps/as/src/pages/dashboard/ui/dashboard-page.tsx
@@ -11,7 +11,7 @@ export function DashboardPage() {
   const { data, isPending, isError, dataUpdatedAt } = useGetMainDashboard();
 
   return (
-    <div className="flex gap-4 px-[1.8rem] pb-6">
+    <div className="mt-4 flex gap-4 px-[1.8rem] pb-6">
       <div className="flex-[0.5]">
         <NationalAsMap />
       </div>
diff --git a/apps/as/src/pages/dashboard/ui/doc-prgrs-stts-cards.tsx b/apps/as/src/pages/dashboard/ui/doc-prgrs-stts-cards.tsx
index 34c278f54..e355b0585 100644
--- a/apps/as/src/pages/dashboard/ui/doc-prgrs-stts-cards.tsx
+++ b/apps/as/src/pages/dashboard/ui/doc-prgrs-stts-cards.tsx
@@ -24,7 +24,7 @@ export function DocPrgrsSttsCards({ items, isPending, isError }: DocPrgrsSttsCar
 
   if (isError) {
     return (
-      <div className="card card-border mx-0 flex min-h-[14rem] items-center justify-center bg-background text-muted-foreground">
+      <div className="card card-border m-0 flex min-h-[14rem] items-center justify-center bg-background text-muted-foreground">
         진행상황을 불러오지 못했습니다.
       </div>
     );
@@ -39,7 +39,7 @@ export function DocPrgrsSttsCards({ items, isPending, isError }: DocPrgrsSttsCar
         return (
           <div
             key={slot.docSeComCd}
-            className="card card-border hover:bg-muted/40 mx-0 block bg-background transition-colors"
+            className="card card-border hover:bg-muted/40 m-0 block bg-background transition-colors"
           >
             <div className="card-header">
               <h3 className="text-2xl font-semibold">{slot.title}</h3>
diff --git a/apps/as/src/pages/dashboard/ui/national-as-map.tsx b/apps/as/src/pages/dashboard/ui/national-as-map.tsx
index 05d6cc8b2..096bbed89 100644
--- a/apps/as/src/pages/dashboard/ui/national-as-map.tsx
+++ b/apps/as/src/pages/dashboard/ui/national-as-map.tsx
@@ -12,7 +12,7 @@ export function NationalAsMap() {
   const popupColumnSpan = Math.max(1, popupContent.items.length);
 
   return (
-    <section className="card card-border mx-0 flex h-full min-h-[40rem] flex-col bg-background">
+    <section className="card card-border m-0 flex h-full min-h-[40rem] flex-col bg-background">
       <div className="card-header">
         <h3 className="text-2xl font-semibold">전국 행정지원 지도</h3>
       </div>

From 4bd5276fc56826e12f4af6358d188e21e02507ee Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 24 Aug 2026 09:32:46 +0900
Subject: [PATCH 2/4] =?UTF-8?q?[as]=20rename:=20=EC=8A=A4=ED=8E=99=20?=
 =?UTF-8?q?=EB=AC=B8=EC=84=9C=20=ED=8F=B4=EB=8D=94=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/as/docs/{ => spec}/approval-line-management/SPEC.md          | 0
 apps/as/docs/{ => spec}/checklist-management/SPEC.md              | 0
 apps/as/docs/{ => spec}/code-management/SPEC.md                   | 0
 .../docs/{ => spec}/essential-attachment-file-management/SPEC.md  | 0
 apps/as/docs/{ => spec}/review-manpower-management/SPEC.md        | 0
 5 files changed, 0 insertions(+), 0 deletions(-)
 rename apps/as/docs/{ => spec}/approval-line-management/SPEC.md (100%)
 rename apps/as/docs/{ => spec}/checklist-management/SPEC.md (100%)
 rename apps/as/docs/{ => spec}/code-management/SPEC.md (100%)
 rename apps/as/docs/{ => spec}/essential-attachment-file-management/SPEC.md (100%)
 rename apps/as/docs/{ => spec}/review-manpower-management/SPEC.md (100%)

diff --git a/apps/as/docs/approval-line-management/SPEC.md b/apps/as/docs/spec/approval-line-management/SPEC.md
similarity index 100%
rename from apps/as/docs/approval-line-management/SPEC.md
rename to apps/as/docs/spec/approval-line-management/SPEC.md
diff --git a/apps/as/docs/checklist-management/SPEC.md b/apps/as/docs/spec/checklist-management/SPEC.md
similarity index 100%
rename from apps/as/docs/checklist-management/SPEC.md
rename to apps/as/docs/spec/checklist-management/SPEC.md
diff --git a/apps/as/docs/code-management/SPEC.md b/apps/as/docs/spec/code-management/SPEC.md
similarity index 100%
rename from apps/as/docs/code-management/SPEC.md
rename to apps/as/docs/spec/code-management/SPEC.md
diff --git a/apps/as/docs/essential-attachment-file-management/SPEC.md b/apps/as/docs/spec/essential-attachment-file-management/SPEC.md
similarity index 100%
rename from apps/as/docs/essential-attachment-file-management/SPEC.md
rename to apps/as/docs/spec/essential-attachment-file-management/SPEC.md
diff --git a/apps/as/docs/review-manpower-management/SPEC.md b/apps/as/docs/spec/review-manpower-management/SPEC.md
similarity index 100%
rename from apps/as/docs/review-manpower-management/SPEC.md
rename to apps/as/docs/spec/review-manpower-management/SPEC.md

From a4c14433cd35578ef03e579304fb0b8384b05aab Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 25 Aug 2026 09:42:05 +0900
Subject: [PATCH 3/4] =?UTF-8?q?[as]=20feat:=20=ED=96=89=EC=A0=95=EC=A7=80?=
 =?UTF-8?q?=EC=9B=90=20=EB=AC=B8=EC=84=9C=20=ED=8C=8C=EC=9D=BC=20=EC=B2=A8?=
 =?UTF-8?q?=EB=B6=80=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/entities/attach/api/attach-service.ts |   7 +
 apps/as/src/entities/attach/api/queries.ts    |  41 ++++--
 apps/as/src/entities/attach/index.ts          |   6 +-
 .../entities/attach/model/attach-interface.ts |   1 +
 .../design-cnstn/lib/form-data-mapper.ts      |  17 +--
 .../design-cnstn/lib/save-payload-utils.ts    |  21 +--
 .../design-cnstn/ui/design-view-page.tsx      |   5 +-
 .../ui/sections/attachments-section.tsx       | 114 ----------------
 .../pages/fnrs-cnsltn/lib/form-data-mapper.ts |  18 +--
 .../fnrs-cnsltn/lib/save-payload-utils.ts     |  21 +--
 .../pages/fnrs-cnsltn/ui/fnrs-view-page.tsx   |   5 +-
 .../ui/sections/attachments-section.tsx       | 124 -----------------
 .../pages/instl-sncn/lib/form-data-mapper.ts  |  17 +--
 .../instl-sncn/lib/save-payload-utils.ts      |  22 +--
 .../pages/instl-sncn/ui/instl-view-page.tsx   |   8 +-
 .../ui/sections/attachments-section.tsx       | 124 -----------------
 .../sewer-bsc-plan/lib/form-data-mapper.ts    |  17 +--
 .../pages/sewer-bsc-plan/lib/payload-utils.ts |  22 +--
 .../ui/sections/attachments-section.tsx       | 127 ------------------
 .../ui/sewer-bsc-plan-view-page.tsx           |   5 +-
 apps/as/src/shared/config/api.ts              |   1 +
 apps/as/src/shared/model/pbadms-sprt.ts       |  18 +--
 apps/as/src/widgets/pbadms-sprt/index.ts      |   3 +
 .../pbadms-sprt/lib/attachments-form-utils.ts |  23 +++-
 .../ui/attachments-form-section.tsx           |  94 +++++++------
 .../ui/attachments-view-section.tsx           | 123 +++++++++++++++++
 26 files changed, 270 insertions(+), 714 deletions(-)
 delete mode 100644 apps/as/src/pages/design-cnstn/ui/sections/attachments-section.tsx
 delete mode 100644 apps/as/src/pages/fnrs-cnsltn/ui/sections/attachments-section.tsx
 delete mode 100644 apps/as/src/pages/instl-sncn/ui/sections/attachments-section.tsx
 delete mode 100644 apps/as/src/pages/sewer-bsc-plan/ui/sections/attachments-section.tsx
 create mode 100644 apps/as/src/widgets/pbadms-sprt/ui/attachments-view-section.tsx

diff --git a/apps/as/src/entities/attach/api/attach-service.ts b/apps/as/src/entities/attach/api/attach-service.ts
index 0af0a916d..ceba5de3f 100644
--- a/apps/as/src/entities/attach/api/attach-service.ts
+++ b/apps/as/src/entities/attach/api/attach-service.ts
@@ -16,7 +16,14 @@ async function downloadAttachmentByAtflCd(atflCd: string): Promise<AxiosResponse
   });
 }
 
+async function downloadAttachmentByAtflId(atflId: string): Promise<AxiosResponse> {
+  return await client.get<Blob>(`${ENDPOINT.ATTACH_SERVICE.DOWNLOAD_BY_ATFL_ID}/${atflId}`, {
+    responseType: "blob",
+  });
+}
+
 export const attachService = {
   deleteAttachmentByAtflId,
   downloadAttachmentByAtflCd,
+  downloadAttachmentByAtflId,
 } satisfies AttachService;
diff --git a/apps/as/src/entities/attach/api/queries.ts b/apps/as/src/entities/attach/api/queries.ts
index ed9efefbf..09a1ab1d9 100644
--- a/apps/as/src/entities/attach/api/queries.ts
+++ b/apps/as/src/entities/attach/api/queries.ts
@@ -1,4 +1,5 @@
 import { useMutation } from "@tanstack/react-query";
+import type { AxiosResponse } from "axios";
 
 import { ENDPOINT } from "@/shared/config";
 
@@ -8,6 +9,22 @@ import { attachService } from "./attach-service";
 
 const attachBaseKey = [ENDPOINT.ATTACH_SERVICE.ATTACHMENTS] as const;
 const attachDownloadBaseKey = [ENDPOINT.ATTACH_SERVICE.DOWNLOAD] as const;
+const attachDownloadByAtflIdKey = [ENDPOINT.ATTACH_SERVICE.DOWNLOAD_BY_ATFL_ID] as const;
+
+function triggerBlobDownload(response: AxiosResponse) {
+  const filename = parseFilenameFromResponse(response);
+  const blob = new Blob([response.data]);
+  const url = window.URL.createObjectURL(blob);
+  const link = document.createElement("a");
+
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+
+  window.URL.revokeObjectURL(url);
+  document.body.removeChild(link);
+}
 
 export function useDeleteAttachment() {
   return useMutation({
@@ -21,19 +38,17 @@ export function useDownloadAttachmentByAtflCd() {
     mutationKey: [...attachDownloadBaseKey, "download"],
     mutationFn: async (atflCd: string) => {
       const response = await attachService.downloadAttachmentByAtflCd(atflCd);
-      const filename = parseFilenameFromResponse(response);
-
-      const blob = new Blob([response.data]);
-      const url = window.URL.createObjectURL(blob);
-      const link = document.createElement("a");
-
-      link.href = url;
-      link.download = filename;
-      document.body.appendChild(link);
-      link.click();
-
-      window.URL.revokeObjectURL(url);
-      document.body.removeChild(link);
+      triggerBlobDownload(response);
+    },
+  });
+}
+
+export function useDownloadAttachmentByAtflId() {
+  return useMutation({
+    mutationKey: [...attachDownloadByAtflIdKey, "download"],
+    mutationFn: async (atflId: string) => {
+      const response = await attachService.downloadAttachmentByAtflId(atflId);
+      triggerBlobDownload(response);
     },
   });
 }
diff --git a/apps/as/src/entities/attach/index.ts b/apps/as/src/entities/attach/index.ts
index 37258e6e5..c2c771b43 100644
--- a/apps/as/src/entities/attach/index.ts
+++ b/apps/as/src/entities/attach/index.ts
@@ -1,3 +1,7 @@
 export { attachService } from "./api/attach-service";
-export { useDeleteAttachment, useDownloadAttachmentByAtflCd } from "./api/queries";
+export {
+  useDeleteAttachment,
+  useDownloadAttachmentByAtflCd,
+  useDownloadAttachmentByAtflId,
+} from "./api/queries";
 export type { Attach, AttachService } from "./model/attach-interface";
diff --git a/apps/as/src/entities/attach/model/attach-interface.ts b/apps/as/src/entities/attach/model/attach-interface.ts
index d6b0a08d2..f603a328e 100644
--- a/apps/as/src/entities/attach/model/attach-interface.ts
+++ b/apps/as/src/entities/attach/model/attach-interface.ts
@@ -19,4 +19,5 @@ export interface Attach {
 export interface AttachService {
   deleteAttachmentByAtflId: (atflId: string) => Promise<void>;
   downloadAttachmentByAtflCd: (atflCd: string) => Promise<AxiosResponse>;
+  downloadAttachmentByAtflId: (atflId: string) => Promise<AxiosResponse>;
 }
diff --git a/apps/as/src/pages/design-cnstn/lib/form-data-mapper.ts b/apps/as/src/pages/design-cnstn/lib/form-data-mapper.ts
index 9ba03d856..3150bfaa7 100644
--- a/apps/as/src/pages/design-cnstn/lib/form-data-mapper.ts
+++ b/apps/as/src/pages/design-cnstn/lib/form-data-mapper.ts
@@ -1,23 +1,10 @@
 import type { IUserInfo } from "@/shared/store";
 import type { DesignCnstnMngDetResponseDto } from "@/entities/design-cnstn";
+import { toEsntlAtchFileSaveList } from "@/widgets/pbadms-sprt";
 
 import type { DesignCnstnRegistFormData } from "./design-cnstn-regist-schema";
 import { parseTaskSeComCdFromApi } from "./design-cnstn-regist-schema";
 
-function mapEsntlAtchFileList(esntlFileList: DesignCnstnMngDetResponseDto["esntlFileList"]) {
-  const esntlMap = new Map<string, string>();
-
-  for (const item of esntlFileList ?? []) {
-    if (!item.esntlAtchFileId || !item.atflCd) continue;
-    esntlMap.set(item.esntlAtchFileId, item.atflCd);
-  }
-
-  return Array.from(esntlMap.entries()).map(([esntlAtchFileId, atchFileGroupId]) => ({
-    esntlAtchFileId,
-    atchFileGroupId,
-  }));
-}
-
 export function mapDetailToFormData(data: DesignCnstnMngDetResponseDto): DesignCnstnRegistFormData {
   const detDto = data.detDto;
   if (!detDto) {
@@ -63,7 +50,7 @@ export function mapDetailToFormData(data: DesignCnstnMngDetResponseDto): DesignC
       thtiDsgn: item.tstmDesignQty,
       diff: item.tstmDesignQty - item.bgtRfltQty,
     })),
-    esntlAtchFileList: mapEsntlAtchFileList(data.esntlFileList),
+    esntlAtchFileList: toEsntlAtchFileSaveList(data.esntlFileList),
     privacyConsent: "Y",
   };
 }
diff --git a/apps/as/src/pages/design-cnstn/lib/save-payload-utils.ts b/apps/as/src/pages/design-cnstn/lib/save-payload-utils.ts
index 48fff8b26..48da7a731 100644
--- a/apps/as/src/pages/design-cnstn/lib/save-payload-utils.ts
+++ b/apps/as/src/pages/design-cnstn/lib/save-payload-utils.ts
@@ -3,9 +3,8 @@ import type {
   BzScaleItem,
   DesignCnstnApplySaveRequestDto,
   DesignCnstnMngDetResponseDto,
-  EsntlAtchFileItem,
-  EsntlAtchFileMngTreeResponseDto,
 } from "@/entities/design-cnstn";
+import { toEsntlAtchFileSaveList } from "@/widgets/pbadms-sprt";
 
 import type { ReviewStepCode } from "../model/view-types";
 
@@ -22,22 +21,6 @@ export function toBzScaleSaveDto(bizSclList: BizSclTreeDto[]): BzScaleItem[] {
     }));
 }
 
-export function toEsntlAtchFileSaveDto(
-  esntlFileList: EsntlAtchFileMngTreeResponseDto[],
-): EsntlAtchFileItem[] {
-  const esntlMap = new Map<string, string>();
-
-  for (const item of esntlFileList) {
-    if (!item.esntlAtchFileId || !item.atflCd) continue;
-    esntlMap.set(item.esntlAtchFileId, item.atflCd);
-  }
-
-  return Array.from(esntlMap.entries()).map(([esntlAtchFileId, atchFileGroupId]) => ({
-    esntlAtchFileId,
-    atchFileGroupId,
-  }));
-}
-
 export function buildSavePayload(
   data: DesignCnstnMngDetResponseDto,
   prgrsSttsComCd: string,
@@ -50,7 +33,7 @@ export function buildSavePayload(
   return {
     designCnstnMng: { ...detDto, prgrsSttsComCd },
     bzScaleList: toBzScaleSaveDto(data.bizSclList ?? []),
-    esntlAtchFileList: toEsntlAtchFileSaveDto(data.esntlFileList ?? []),
+    esntlAtchFileList: toEsntlAtchFileSaveList(data.esntlFileList),
   };
 }
 
diff --git a/apps/as/src/pages/design-cnstn/ui/design-view-page.tsx b/apps/as/src/pages/design-cnstn/ui/design-view-page.tsx
index cc4315025..6915214d9 100644
--- a/apps/as/src/pages/design-cnstn/ui/design-view-page.tsx
+++ b/apps/as/src/pages/design-cnstn/ui/design-view-page.tsx
@@ -6,7 +6,7 @@ import { useUserStore } from "@/shared/lib";
 import { useDesignCnstnMng } from "@/entities/design-cnstn";
 import { ElaprDocPrgrsStatus } from "@/entities/elapr";
 import { useRvwMnpwMngLoginUserList } from "@/entities/rvw-mnpw";
-import { ProgressStatusSection } from "@/widgets/pbadms-sprt";
+import { AttachmentsViewSection, ProgressStatusSection } from "@/widgets/pbadms-sprt";
 import { Skeleton } from "@common/components";
 
 import { needsRoleUser01AtrzResolve } from "../lib/button-config";
@@ -14,7 +14,6 @@ import { getEditableReviewStep } from "../lib/review-step-utils";
 import { PROGRESS_STATUS_COLUMNS } from "../model/columns";
 
 import { FloatingActionButtons } from "./components/floating-action-buttons";
-import { AttachmentsSection } from "./sections/attachments-section";
 import { BasicInfoSection } from "./sections/basic-info-section";
 import { BusinessScaleSection } from "./sections/business-scale-section";
 import { ContactInfoSection } from "./sections/contact-info-section";
@@ -91,7 +90,7 @@ function DesignViewPage({ id }: DesignViewPageProps) {
       <ContactInfoSection det={detDto} />
       <ElaprDocPrgrsStatus elaprDocNo={detDto.designCnstnDocNo} />
       <BusinessScaleSection bizSclList={bizSclList} />
-      <AttachmentsSection esntlFileList={esntlFileList} etcFileList={etcFileList} />
+      <AttachmentsViewSection esntlFileList={esntlFileList} etcFileList={etcFileList} />
       <TechReviewOpinionSection
         ref={techReviewOpinionRef}
         rvwList={rvwList}
diff --git a/apps/as/src/pages/design-cnstn/ui/sections/attachments-section.tsx b/apps/as/src/pages/design-cnstn/ui/sections/attachments-section.tsx
deleted file mode 100644
index a50c29a9f..000000000
--- a/apps/as/src/pages/design-cnstn/ui/sections/attachments-section.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-"use client";
-
-import { formatFileSize } from "@/shared/lib/file-utils";
-import { SectionCollapsible } from "@/shared/ui";
-import { useDownloadAttachmentByAtflCd } from "@/entities/attach";
-import type {
-  AtflMngClientResponseDto,
-  EsntlAtchFileMngTreeResponseDto,
-} from "@/entities/design-cnstn";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
-
-interface AttachmentsSectionProps {
-  esntlFileList: EsntlAtchFileMngTreeResponseDto[];
-  etcFileList: AtflMngClientResponseDto[];
-}
-
-function AttachmentsSection({ esntlFileList, etcFileList }: AttachmentsSectionProps) {
-  const { mutate: downloadAttachment } = useDownloadAttachmentByAtflCd();
-
-  return (
-    <>
-      {esntlFileList.length > 0 && (
-        <SectionCollapsible title="필수 첨부파일">
-          <div className="overflow-x-auto">
-            <Table variant="secondary">
-              <TableHeader>
-                <TableRow>
-                  <TableHead>필수 자료명</TableHead>
-                  <TableHead>파일명</TableHead>
-                  <TableHead className="w-[8rem] text-right">크기</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {esntlFileList.map((file) => (
-                  <TableRow key={file.esntlAtchFileId}>
-                    <TableCell className="pl-2 text-left">
-                      {file.esntlAtchFileNm}
-                      {file.esntlAtchYn === "Y" ? (
-                        <span className="ml-1 text-red-500">*</span>
-                      ) : null}
-                    </TableCell>
-                    <TableCell className="text-left">
-                      {file.atflCd ? (
-                        <a
-                          className="cursor-pointer text-blue-600 hover:underline"
-                          onClick={() => downloadAttachment(file.atflCd ?? "")}
-                          target="_blank"
-                          rel="noreferrer"
-                        >
-                          {file.orgnlFileNm || "다운로드"}
-                        </a>
-                      ) : (
-                        <span className="text-gray-500">첨부없음</span>
-                      )}
-                    </TableCell>
-                    <TableCell className="text-right">{formatFileSize(file.atflFlieSz)}</TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        </SectionCollapsible>
-      )}
-
-      {etcFileList.length > 0 && (
-        <SectionCollapsible title="기타 첨부파일">
-          <div className="overflow-x-auto">
-            <Table variant="secondary">
-              <TableHeader>
-                <TableRow>
-                  <TableHead>파일명</TableHead>
-                  <TableHead className="w-[8rem] text-right">크기</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {etcFileList.length === 0 ? (
-                  <TableRow>
-                    <TableCell colSpan={2} className="py-12 text-center text-muted-foreground">
-                      등록된 기타첨부파일이 없습니다.
-                    </TableCell>
-                  </TableRow>
-                ) : (
-                  etcFileList.map((file) => (
-                    <TableRow key={file.atflId}>
-                      <TableCell className="text-left">
-                        {file.atflCd ? (
-                          <a
-                            className="cursor-pointer text-blue-600 hover:underline"
-                            onClick={() => downloadAttachment(file.atflCd)}
-                            target="_blank"
-                            rel="noreferrer"
-                          >
-                            {file.orgnlFileNm || file.physFileNm || file.atflId}
-                          </a>
-                        ) : (
-                          <span>{file.orgnlFileNm || file.physFileNm || file.atflId}</span>
-                        )}
-                      </TableCell>
-                      <TableCell className="text-right text-gray-500">
-                        {formatFileSize(file.atflFlieSz)}
-                      </TableCell>
-                    </TableRow>
-                  ))
-                )}
-              </TableBody>
-            </Table>
-          </div>
-        </SectionCollapsible>
-      )}
-    </>
-  );
-}
-
-export { AttachmentsSection };
diff --git a/apps/as/src/pages/fnrs-cnsltn/lib/form-data-mapper.ts b/apps/as/src/pages/fnrs-cnsltn/lib/form-data-mapper.ts
index d30765961..09e4817f5 100644
--- a/apps/as/src/pages/fnrs-cnsltn/lib/form-data-mapper.ts
+++ b/apps/as/src/pages/fnrs-cnsltn/lib/form-data-mapper.ts
@@ -1,6 +1,6 @@
 import type { IUserInfo } from "@/shared/store";
 import type { FnrsCnsltnMngDetResponseDto } from "@/entities/fnrs-cnsltn";
-import { mapFnrsSharDetToFormList } from "@/widgets/pbadms-sprt";
+import { mapFnrsSharDetToFormList, toEsntlAtchFileSaveList } from "@/widgets/pbadms-sprt";
 
 import type { FnrsCnsltnRegistFormData } from "./fnrs-cnsltn-regist-schema";
 import { parseTaskSeComCdFromApi } from "./fnrs-cnsltn-regist-schema";
@@ -10,20 +10,6 @@ function mapSelectedValue(value?: string | null): "Y" | "N" | null {
   return null;
 }
 
-function mapEsntlAtchFileList(esntlFileList: FnrsCnsltnMngDetResponseDto["esntlFileList"]) {
-  const esntlMap = new Map<string, string>();
-
-  for (const item of esntlFileList ?? []) {
-    if (!item.esntlAtchFileId || !item.atflCd) continue;
-    esntlMap.set(item.esntlAtchFileId, item.atflCd);
-  }
-
-  return Array.from(esntlMap.entries()).map(([esntlAtchFileId, atchFileGroupId]) => ({
-    esntlAtchFileId,
-    atchFileGroupId,
-  }));
-}
-
 export function mapDetailToFormData(data: FnrsCnsltnMngDetResponseDto): FnrsCnsltnRegistFormData {
   const detDto = data.detDto;
   if (!detDto) {
@@ -94,7 +80,7 @@ export function mapDetailToFormData(data: FnrsCnsltnMngDetResponseDto): FnrsCnsl
         selected: mapSelectedValue(item.rvwRsltAnmlyYn),
         picRvwCn: item.picRvwCn,
       })) ?? [],
-    esntlAtchFileList: mapEsntlAtchFileList(esntlFileList),
+    esntlAtchFileList: toEsntlAtchFileSaveList(esntlFileList),
     splmntDmndList:
       splmntDmndList?.map((item) => ({
         splmntDmndSn: item.splmntDmndSn,
diff --git a/apps/as/src/pages/fnrs-cnsltn/lib/save-payload-utils.ts b/apps/as/src/pages/fnrs-cnsltn/lib/save-payload-utils.ts
index fb34d7d0e..21e307f53 100644
--- a/apps/as/src/pages/fnrs-cnsltn/lib/save-payload-utils.ts
+++ b/apps/as/src/pages/fnrs-cnsltn/lib/save-payload-utils.ts
@@ -4,8 +4,6 @@ import type {
   BizSclTreeDto,
   BzScaleItem,
   CklstResultItem,
-  EsntlAtchFileItem,
-  EsntlAtchFileMngTreeResponseDto,
   FnrsCnsltnApplySaveRequestDto,
   FnrsCnsltnMngDetResponseDto,
   FnrsCnsltnMngResponseDto,
@@ -14,6 +12,7 @@ import type {
 import {
   mapFnrsSharDetToFormList,
   type SplmntDmndDialogConfirmPayload,
+  toEsntlAtchFileSaveList,
   toFnrsSharSaveList,
 } from "@/widgets/pbadms-sprt";
 
@@ -44,22 +43,6 @@ export function toBizCstSaveDto(bizCstList: BizCstTreeDto[]): BizCstItem[] {
     }));
 }
 
-export function toEsntlAtchFileSaveDto(
-  esntlFileList: EsntlAtchFileMngTreeResponseDto[],
-): EsntlAtchFileItem[] {
-  const esntlMap = new Map<string, string>();
-
-  for (const item of esntlFileList) {
-    if (!item.esntlAtchFileId || !item.atflCd) continue;
-    esntlMap.set(item.esntlAtchFileId, item.atflCd);
-  }
-
-  return Array.from(esntlMap.entries()).map(([esntlAtchFileId, atchFileGroupId]) => ({
-    esntlAtchFileId,
-    atchFileGroupId,
-  }));
-}
-
 export function buildSavePayload(
   data: FnrsCnsltnMngDetResponseDto,
   checklistFormState: ChecklistFormState,
@@ -81,7 +64,7 @@ export function buildSavePayload(
     bzScaleList: toBzScaleSaveDto(bizSclList),
     bizCstList: toBizCstSaveDto(bizCstList),
     cklstResultList: toCklstSaveDto(cklstResultList, checklistFormState, reviewStep),
-    esntlAtchFileList: toEsntlAtchFileSaveDto(esntlFileList),
+    esntlAtchFileList: toEsntlAtchFileSaveList(esntlFileList),
     fnrsSharList: toFnrsSharSaveList(mapFnrsSharDetToFormList(data.fnrsSharList ?? [])),
   };
 }
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-view-page.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-view-page.tsx
index 6fa957d44..96f3124b3 100644
--- a/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-view-page.tsx
+++ b/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-view-page.tsx
@@ -6,7 +6,7 @@ import { useUserStore } from "@/shared/lib";
 import { ElaprDocPrgrsStatus } from "@/entities/elapr";
 import { useFnrsCnsltnMng } from "@/entities/fnrs-cnsltn";
 import { useRvwMnpwMngLoginUserList } from "@/entities/rvw-mnpw";
-import { ProgressStatusSection, SupplementDemandSection } from "@/widgets/pbadms-sprt";
+import { AttachmentsViewSection, ProgressStatusSection, SupplementDemandSection } from "@/widgets/pbadms-sprt";
 import { Skeleton } from "@common/components";
 
 import { needsRoleUser01AtrzResolve } from "../lib/button-config";
@@ -15,7 +15,6 @@ import { EMPTY_CKLST_RESULT_LIST, useChecklistFormState } from "../lib/use-check
 import { PROGRESS_STATUS_COLUMNS } from "../model/columns";
 
 import { FloatingActionButtons } from "./components/floating-action-buttons";
-import { AttachmentsSection } from "./sections/attachments-section";
 import { BasicInfoSection } from "./sections/basic-info-section";
 import { BusinessCostSection } from "./sections/business-cost-section";
 import { BusinessScaleSection } from "./sections/business-scale-section";
@@ -110,7 +109,7 @@ function FnrsViewPage({ id }: FnrsViewPageProps) {
         formState={checklistFormState}
         setFormState={setChecklistFormState}
       />
-      <AttachmentsSection esntlFileList={esntlFileList} etcFileList={etcFileList} />
+      <AttachmentsViewSection esntlFileList={esntlFileList} etcFileList={etcFileList} />
       <SupplementDemandSection splmntDmndList={splmntDmndList} />
       <TechReviewOpinionSection
         ref={techReviewOpinionRef}
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/sections/attachments-section.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/sections/attachments-section.tsx
deleted file mode 100644
index b55b87c47..000000000
--- a/apps/as/src/pages/fnrs-cnsltn/ui/sections/attachments-section.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-"use client";
-
-import { formatFileSize } from "@/shared/lib/file-utils";
-import { SectionCollapsible } from "@/shared/ui";
-import { useDownloadAttachmentByAtflCd } from "@/entities/attach";
-import type {
-  AtflMngClientResponseDto,
-  EsntlAtchFileMngTreeResponseDto,
-} from "@/entities/fnrs-cnsltn";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
-
-interface AttachmentsSectionProps {
-  esntlFileList: EsntlAtchFileMngTreeResponseDto[];
-  etcFileList: AtflMngClientResponseDto[];
-}
-
-function AttachmentsSection({ esntlFileList, etcFileList }: AttachmentsSectionProps) {
-  const { mutate: downloadAttachment } = useDownloadAttachmentByAtflCd();
-
-  return (
-    <>
-      {esntlFileList.length > 0 && (
-        <SectionCollapsible title="필수 첨부파일">
-          <div className="overflow-x-auto">
-            <Table variant="secondary">
-              <TableHeader>
-                <TableRow>
-                  <TableHead>필수 자료명</TableHead>
-                  <TableHead>파일명</TableHead>
-                  <TableHead className="w-[8rem] text-right">크기</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {esntlFileList.length === 0 ? (
-                  <TableRow>
-                    <TableCell colSpan={3} className="py-12 text-center text-muted-foreground">
-                      조회된 필수 첨부파일 항목이 없습니다.
-                    </TableCell>
-                  </TableRow>
-                ) : (
-                  esntlFileList.map((file) => (
-                    <TableRow key={file.esntlAtchFileId}>
-                      <TableCell className="pl-2 text-left">
-                        {file.esntlAtchFileNm}
-                        {file.esntlAtchYn === "Y" ? (
-                          <span className="ml-1 text-red-500">*</span>
-                        ) : null}
-                      </TableCell>
-                      <TableCell className="text-left">
-                        {file.atflCd ? (
-                          <a
-                            className="cursor-pointer text-blue-600 hover:underline"
-                            onClick={() => downloadAttachment(file.atflCd ?? "")}
-                            target="_blank"
-                            rel="noreferrer"
-                          >
-                            {file.orgnlFileNm || "다운로드"}
-                          </a>
-                        ) : (
-                          <span className="text-gray-500">첨부없음</span>
-                        )}
-                      </TableCell>
-                      <TableCell className="text-right">
-                        {formatFileSize(file.atflFlieSz)}
-                      </TableCell>
-                    </TableRow>
-                  ))
-                )}
-              </TableBody>
-            </Table>
-          </div>
-        </SectionCollapsible>
-      )}
-
-      {etcFileList.length > 0 && (
-        <SectionCollapsible title="기타 첨부파일">
-          <div className="overflow-x-auto">
-            <Table variant="secondary">
-              <TableHeader>
-                <TableRow>
-                  <TableHead>파일명</TableHead>
-                  <TableHead className="w-[8rem] text-right">크기</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {etcFileList.length === 0 ? (
-                  <TableRow>
-                    <TableCell colSpan={2} className="py-12 text-center text-muted-foreground">
-                      등록된 기타첨부파일이 없습니다.
-                    </TableCell>
-                  </TableRow>
-                ) : (
-                  etcFileList.map((file) => (
-                    <TableRow key={file.atflId}>
-                      <TableCell className="text-left">
-                        {file.atflCd ? (
-                          <a
-                            className="cursor-pointer text-blue-600 hover:underline"
-                            onClick={() => downloadAttachment(file.atflCd)}
-                            target="_blank"
-                            rel="noreferrer"
-                          >
-                            {file.orgnlFileNm || file.physFileNm || file.atflId}
-                          </a>
-                        ) : (
-                          <span>{file.orgnlFileNm || file.physFileNm || file.atflId}</span>
-                        )}
-                      </TableCell>
-                      <TableCell className="text-right text-gray-500">
-                        {formatFileSize(file.atflFlieSz)}
-                      </TableCell>
-                    </TableRow>
-                  ))
-                )}
-              </TableBody>
-            </Table>
-          </div>
-        </SectionCollapsible>
-      )}
-    </>
-  );
-}
-
-export { AttachmentsSection };
diff --git a/apps/as/src/pages/instl-sncn/lib/form-data-mapper.ts b/apps/as/src/pages/instl-sncn/lib/form-data-mapper.ts
index a1e1242c5..e32309255 100644
--- a/apps/as/src/pages/instl-sncn/lib/form-data-mapper.ts
+++ b/apps/as/src/pages/instl-sncn/lib/form-data-mapper.ts
@@ -1,5 +1,6 @@
 import type { IUserInfo } from "@/shared/store/user-store";
 import type { InstlSncnMngDetResponse } from "@/entities/instl-sncn";
+import { toEsntlAtchFileSaveList } from "@/widgets/pbadms-sprt";
 
 import type { InstlSncnRegistFormData } from "./instl-sncn-regist-schema";
 import { parseTaskSeComCdFromApi } from "./instl-sncn-regist-schema";
@@ -9,20 +10,6 @@ function mapSelectedValue(value?: string | null): "Y" | "N" | null {
   return null;
 }
 
-function mapEsntlAtchFileList(esntlFileList: InstlSncnMngDetResponse["esntlFileList"]) {
-  const esntlMap = new Map<string, string>();
-
-  for (const item of esntlFileList) {
-    if (!item.esntlAtchFileId || !item.atflCd) continue;
-    esntlMap.set(item.esntlAtchFileId, item.atflCd);
-  }
-
-  return Array.from(esntlMap.entries()).map(([esntlAtchFileId, atchFileGroupId]) => ({
-    esntlAtchFileId,
-    atchFileGroupId,
-  }));
-}
-
 export function mapDetailToFormData(data: InstlSncnMngDetResponse): InstlSncnRegistFormData {
   const { detDto, bizSclList, bizCstList, cklstResultList, esntlFileList, splmntDmndList } = data;
 
@@ -84,7 +71,7 @@ export function mapDetailToFormData(data: InstlSncnMngDetResponse): InstlSncnReg
         selected: mapSelectedValue(item.rvwRsltAnmlyYn),
         picRvwCn: item.picRvwCn,
       })) ?? [],
-    esntlAtchFileList: mapEsntlAtchFileList(esntlFileList),
+    esntlAtchFileList: toEsntlAtchFileSaveList(esntlFileList),
     splmntDmndList:
       splmntDmndList?.map((item) => ({
         splmntDmndSn: item.splmntDmndSn,
diff --git a/apps/as/src/pages/instl-sncn/lib/save-payload-utils.ts b/apps/as/src/pages/instl-sncn/lib/save-payload-utils.ts
index bb9bc18ab..f2d647aea 100644
--- a/apps/as/src/pages/instl-sncn/lib/save-payload-utils.ts
+++ b/apps/as/src/pages/instl-sncn/lib/save-payload-utils.ts
@@ -1,16 +1,14 @@
 import type {
   BizCstTreeDto,
   BizSclTreeDto,
-  EsntlAtchFileMngTreeResponseDto,
   InstlSncnApplySaveRequestDto,
   InstlSncnBizCstSaveRequestDto,
   InstlSncnBzScaleSaveDto,
-  InstlSncnEsntlAtchFileSaveDto,
   InstlSncnMngDetResponse,
   InstlSncnSplmntDmndSaveDto,
   ReviewStepCode,
 } from "@/entities/instl-sncn";
-import type { SplmntDmndDialogConfirmPayload } from "@/widgets/pbadms-sprt";
+import { type SplmntDmndDialogConfirmPayload, toEsntlAtchFileSaveList } from "@/widgets/pbadms-sprt";
 
 import type { ChecklistFormState } from "../model/view-types";
 
@@ -40,22 +38,6 @@ export function toBizCstSaveDto(bizCstList: BizCstTreeDto[]): InstlSncnBizCstSav
     }));
 }
 
-export function toEsntlAtchFileSaveDto(
-  esntlFileList: EsntlAtchFileMngTreeResponseDto[],
-): InstlSncnEsntlAtchFileSaveDto[] {
-  const esntlMap = new Map<string, string>();
-
-  for (const item of esntlFileList) {
-    if (!item.esntlAtchFileId || !item.atflCd) continue;
-    esntlMap.set(item.esntlAtchFileId, item.atflCd);
-  }
-
-  return Array.from(esntlMap.entries()).map(([esntlAtchFileId, atchFileGroupId]) => ({
-    esntlAtchFileId,
-    atchFileGroupId,
-  }));
-}
-
 export function buildSavePayload(
   data: InstlSncnMngDetResponse,
   checklistFormState: ChecklistFormState,
@@ -69,7 +51,7 @@ export function buildSavePayload(
     bzScaleList: toBzScaleSaveDto(bizSclList),
     bizCstList: toBizCstSaveDto(bizCstList),
     cklstResultList: toCklstSaveDto(cklstResultList, checklistFormState, reviewStep),
-    esntlAtchFileList: toEsntlAtchFileSaveDto(esntlFileList),
+    esntlAtchFileList: toEsntlAtchFileSaveList(esntlFileList),
   };
 }
 
diff --git a/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx b/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx
index d8f637f59..6e5bd3eca 100644
--- a/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx
@@ -6,7 +6,7 @@ import { useUserStore } from "@/shared/lib";
 import { ElaprDocPrgrsStatus } from "@/entities/elapr";
 import { useInstlSncnDetail } from "@/entities/instl-sncn";
 import { useRvwMnpwMngLoginUserList } from "@/entities/rvw-mnpw";
-import { ProgressStatusSection, SupplementDemandSection } from "@/widgets/pbadms-sprt";
+import { AttachmentsViewSection, ProgressStatusSection, SupplementDemandSection } from "@/widgets/pbadms-sprt";
 import { Skeleton } from "@common/components";
 
 import { needsRoleUser01AtrzResolve } from "../lib/button-config";
@@ -15,7 +15,6 @@ import { EMPTY_CKLST_RESULT_LIST, useChecklistFormState } from "../lib/use-check
 import { PROGRESS_STATUS_COLUMNS } from "../model/columns";
 
 import { FloatingActionButtons } from "./components/floating-action-buttons";
-import { AttachmentsSection } from "./sections/attachments-section";
 import { BasicInfoSection } from "./sections/basic-info-section";
 import { BusinessCostSection } from "./sections/business-cost-section";
 import { BusinessScaleSection } from "./sections/business-scale-section";
@@ -107,7 +106,10 @@ function InstlViewPage({ id }: InstlViewPageProps) {
         formState={checklistFormState}
         setFormState={setChecklistFormState}
       />
-      <AttachmentsSection esntlFileList={esntlFileList} etcFileList={etcFileList} />
+      <AttachmentsViewSection
+        esntlFileList={esntlFileList ?? []}
+        etcFileList={etcFileList ?? []}
+      />
       <TechReviewOpinionSection
         ref={techReviewOpinionRef}
         rvwList={rvwList}
diff --git a/apps/as/src/pages/instl-sncn/ui/sections/attachments-section.tsx b/apps/as/src/pages/instl-sncn/ui/sections/attachments-section.tsx
deleted file mode 100644
index fe46772eb..000000000
--- a/apps/as/src/pages/instl-sncn/ui/sections/attachments-section.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-"use client";
-
-import { formatFileSize } from "@/shared/lib/file-utils";
-import { SectionCollapsible } from "@/shared/ui";
-import { useDownloadAttachmentByAtflCd } from "@/entities/attach";
-import type {
-  AtflMngClientResponseDto,
-  EsntlAtchFileMngTreeResponseDto,
-} from "@/entities/instl-sncn";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
-
-interface AttachmentsSectionProps {
-  esntlFileList: EsntlAtchFileMngTreeResponseDto[];
-  etcFileList: AtflMngClientResponseDto[];
-}
-
-function AttachmentsSection({ esntlFileList, etcFileList }: AttachmentsSectionProps) {
-  const { mutate: downloadAttachment } = useDownloadAttachmentByAtflCd();
-
-  return (
-    <>
-      {esntlFileList.length > 0 && (
-        <SectionCollapsible title="필수 첨부파일">
-          <div className="overflow-x-auto">
-            <Table variant="secondary">
-              <TableHeader>
-                <TableRow>
-                  <TableHead>필수 자료명</TableHead>
-                  <TableHead>파일명</TableHead>
-                  <TableHead className="w-[8rem] text-right">크기</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {esntlFileList.length === 0 ? (
-                  <TableRow>
-                    <TableCell colSpan={3} className="py-12 text-center text-muted-foreground">
-                      조회된 필수 첨부파일 항목이 없습니다.
-                    </TableCell>
-                  </TableRow>
-                ) : (
-                  esntlFileList.map((file) => (
-                    <TableRow key={file.esntlAtchFileId}>
-                      <TableCell className="pl-2 text-left">
-                        {file.esntlAtchFileNm}
-                        {file.esntlAtchYn === "Y" ? (
-                          <span className="ml-1 text-red-500">*</span>
-                        ) : null}
-                      </TableCell>
-                      <TableCell className="text-left">
-                        {file.atflCd ? (
-                          <a
-                            className="cursor-pointer text-blue-600 hover:underline"
-                            onClick={() => downloadAttachment(file.atflCd ?? "")}
-                            target="_blank"
-                            rel="noreferrer"
-                          >
-                            {file.orgnlFileNm || "다운로드"}
-                          </a>
-                        ) : (
-                          <span className="text-gray-500">첨부없음</span>
-                        )}
-                      </TableCell>
-                      <TableCell className="text-right">
-                        {formatFileSize(file.atflFlieSz)}
-                      </TableCell>
-                    </TableRow>
-                  ))
-                )}
-              </TableBody>
-            </Table>
-          </div>
-        </SectionCollapsible>
-      )}
-
-      {etcFileList.length > 0 && (
-        <SectionCollapsible title="기타 첨부파일">
-          <div className="overflow-x-auto">
-            <Table variant="secondary">
-              <TableHeader>
-                <TableRow>
-                  <TableHead>파일명</TableHead>
-                  <TableHead className="w-[8rem] text-right">크기</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {etcFileList.length === 0 ? (
-                  <TableRow>
-                    <TableCell colSpan={2} className="py-12 text-center text-muted-foreground">
-                      등록된 기타첨부파일이 없습니다.
-                    </TableCell>
-                  </TableRow>
-                ) : (
-                  etcFileList.map((file) => (
-                    <TableRow key={file.atflId}>
-                      <TableCell className="text-left">
-                        {file.atflCd ? (
-                          <a
-                            className="cursor-pointer text-blue-600 hover:underline"
-                            onClick={() => downloadAttachment(file.atflCd)}
-                            target="_blank"
-                            rel="noreferrer"
-                          >
-                            {file.orgnlFileNm || file.physFileNm || file.atflId}
-                          </a>
-                        ) : (
-                          <span>{file.orgnlFileNm || file.physFileNm || file.atflId}</span>
-                        )}
-                      </TableCell>
-                      <TableCell className="text-right text-gray-500">
-                        {formatFileSize(file.atflFlieSz)}
-                      </TableCell>
-                    </TableRow>
-                  ))
-                )}
-              </TableBody>
-            </Table>
-          </div>
-        </SectionCollapsible>
-      )}
-    </>
-  );
-}
-
-export { AttachmentsSection };
diff --git a/apps/as/src/pages/sewer-bsc-plan/lib/form-data-mapper.ts b/apps/as/src/pages/sewer-bsc-plan/lib/form-data-mapper.ts
index 6f84154d5..9c405f337 100644
--- a/apps/as/src/pages/sewer-bsc-plan/lib/form-data-mapper.ts
+++ b/apps/as/src/pages/sewer-bsc-plan/lib/form-data-mapper.ts
@@ -4,6 +4,7 @@ import type {
   SewerBscPlanDetResponseDto,
 } from "@/entities/sewer-bsc-plan";
 import { sewerBscPlanApplySaveSchema } from "@/entities/sewer-bsc-plan";
+import { toEsntlAtchFileSaveList } from "@/widgets/pbadms-sprt";
 
 import type { BizCstMatrixItem } from "./biz-cst-matrix-utils";
 import { recalcFnrsCstSumAmt } from "./fnrs-cst-form-utils";
@@ -26,20 +27,6 @@ function mapSelectedValue(value?: string | null): "Y" | "N" | null {
   return null;
 }
 
-function mapEsntlAtchFileList(esntlFileList: SewerBscPlanDetResponseDto["esntlFileList"]) {
-  const esntlMap = new Map<string, string>();
-
-  for (const item of esntlFileList ?? []) {
-    if (!item.esntlAtchFileId || !item.atflCd) continue;
-    esntlMap.set(item.esntlAtchFileId, item.atflCd);
-  }
-
-  return Array.from(esntlMap.entries()).map(([esntlAtchFileId, atchFileGroupId]) => ({
-    esntlAtchFileId,
-    atchFileGroupId,
-  }));
-}
-
 function createEmptyTmplntDtlList(swtrmtFcltCd: string) {
   return TMPLNT_DTL_STEPS.map((planStpNo) => ({
     planStpNo,
@@ -218,7 +205,7 @@ export function mapDetailToFormData(data: SewerBscPlanDetResponseDto): SewerBscP
         selected: mapSelectedValue(item.rvwRsltAnmlyYn),
         picRvwCn: item.picRvwCn,
       })) ?? [],
-    esntlAtchFileList: mapEsntlAtchFileList(data.esntlFileList),
+    esntlAtchFileList: toEsntlAtchFileSaveList(data.esntlFileList),
     splmntDmndList:
       data.splmntDmndList?.map((item) => ({
         splmntDmndSn: item.splmntDmndSn,
diff --git a/apps/as/src/pages/sewer-bsc-plan/lib/payload-utils.ts b/apps/as/src/pages/sewer-bsc-plan/lib/payload-utils.ts
index 320044a14..07224c8ef 100644
--- a/apps/as/src/pages/sewer-bsc-plan/lib/payload-utils.ts
+++ b/apps/as/src/pages/sewer-bsc-plan/lib/payload-utils.ts
@@ -1,11 +1,9 @@
 import type {
-  EsntlAtchFileItem,
-  EsntlAtchFileMngTreeResponseDto,
   SewerBscPlanApplySaveRequestDto,
   SewerBscPlanDetResponseDto,
   SewerBscPlanSplmntDmndItem,
 } from "@/entities/sewer-bsc-plan";
-import type { SplmntDmndDialogConfirmPayload } from "@/widgets/pbadms-sprt";
+import { type SplmntDmndDialogConfirmPayload, toEsntlAtchFileSaveList } from "@/widgets/pbadms-sprt";
 
 import type { ChecklistFormState, ReviewStepCode } from "../model/view-types";
 
@@ -13,22 +11,6 @@ import { toCklstSaveDto } from "./checklist-utils";
 import { recalcFnrsCstSumAmt } from "./fnrs-cst-form-utils";
 import { type ReviewOpinionGetFormDataResult, toRvwOpnnSaveDto } from "./review-opinion-utils";
 
-export function toEsntlAtchFileSaveDto(
-  esntlFileList: EsntlAtchFileMngTreeResponseDto[],
-): EsntlAtchFileItem[] {
-  const esntlMap = new Map<string, string>();
-
-  for (const item of esntlFileList) {
-    if (!item.esntlAtchFileId || !item.atflCd) continue;
-    esntlMap.set(item.esntlAtchFileId, item.atflCd);
-  }
-
-  return Array.from(esntlMap.entries()).map(([esntlAtchFileId, atchFileGroupId]) => ({
-    esntlAtchFileId,
-    atchFileGroupId,
-  }));
-}
-
 export function buildSavePayload(
   data: SewerBscPlanDetResponseDto,
   checklistFormState: ChecklistFormState,
@@ -116,7 +98,7 @@ export function buildSavePayload(
       })),
     })),
     cklstResultList: toCklstSaveDto(cklstResultRows, checklistFormState, reviewStep),
-    esntlAtchFileList: toEsntlAtchFileSaveDto(esntlFileList),
+    esntlAtchFileList: toEsntlAtchFileSaveList(esntlFileList),
   };
 }
 
diff --git a/apps/as/src/pages/sewer-bsc-plan/ui/sections/attachments-section.tsx b/apps/as/src/pages/sewer-bsc-plan/ui/sections/attachments-section.tsx
deleted file mode 100644
index e379d5097..000000000
--- a/apps/as/src/pages/sewer-bsc-plan/ui/sections/attachments-section.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-"use client";
-
-import { Paperclip } from "lucide-react";
-
-import { formatFileSize } from "@/shared/lib/file-utils";
-import { SectionCollapsible } from "@/shared/ui";
-import { useDownloadAttachmentByAtflCd } from "@/entities/attach";
-import type {
-  AtflMngClientResponseDto,
-  EsntlAtchFileMngTreeResponseDto,
-} from "@/entities/sewer-bsc-plan";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
-
-interface AttachmentsSectionProps {
-  esntlFileList: EsntlAtchFileMngTreeResponseDto[];
-  etcFileList: AtflMngClientResponseDto[];
-}
-
-function AttachmentsSection({ esntlFileList, etcFileList }: AttachmentsSectionProps) {
-  const { mutate: downloadAttachment } = useDownloadAttachmentByAtflCd();
-
-  return (
-    <>
-      {esntlFileList.length > 0 && (
-        <SectionCollapsible title="필수 첨부파일">
-          <div className="overflow-x-auto">
-            <Table variant="secondary">
-              <TableHeader>
-                <TableRow>
-                  <TableHead>필수 자료명</TableHead>
-                  <TableHead>파일명</TableHead>
-                  <TableHead className="w-[8rem] text-right">크기</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {esntlFileList.length === 0 ? (
-                  <TableRow>
-                    <TableCell colSpan={3} className="py-12 text-center text-muted-foreground">
-                      조회된 필수 첨부파일 항목이 없습니다.
-                    </TableCell>
-                  </TableRow>
-                ) : (
-                  esntlFileList.map((file) => (
-                    <TableRow key={file.esntlAtchFileId}>
-                      <TableCell className="pl-2 text-left">
-                        {file.esntlAtchFileNm}
-                        {file.esntlAtchYn === "Y" ? (
-                          <span className="ml-1 text-red-500">*</span>
-                        ) : null}
-                      </TableCell>
-                      <TableCell className="text-left">
-                        {file.atflCd ? (
-                          <a
-                            className="inline-flex cursor-pointer items-center gap-1 text-blue-600 hover:underline"
-                            onClick={() => downloadAttachment(file.atflCd ?? "")}
-                            target="_blank"
-                            rel="noreferrer"
-                          >
-                            <Paperclip className="size-5 shrink-0" />
-                            {file.orgnlFileNm || "다운로드"}
-                          </a>
-                        ) : (
-                          <span className="text-gray-500">첨부없음</span>
-                        )}
-                      </TableCell>
-                      <TableCell className="text-right">
-                        {formatFileSize(file.atflFlieSz)}
-                      </TableCell>
-                    </TableRow>
-                  ))
-                )}
-              </TableBody>
-            </Table>
-          </div>
-        </SectionCollapsible>
-      )}
-
-      {etcFileList.length > 0 && (
-        <SectionCollapsible title="기타 첨부파일">
-          <div className="overflow-x-auto">
-            <Table variant="secondary">
-              <TableHeader>
-                <TableRow>
-                  <TableHead>파일명</TableHead>
-                  <TableHead className="w-[8rem] text-right">크기</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {etcFileList.length === 0 ? (
-                  <TableRow>
-                    <TableCell colSpan={2} className="py-12 text-center text-muted-foreground">
-                      등록된 기타첨부파일이 없습니다.
-                    </TableCell>
-                  </TableRow>
-                ) : (
-                  etcFileList.map((file) => (
-                    <TableRow key={file.atflId}>
-                      <TableCell className="text-left">
-                        {file.atflCd ? (
-                          <a
-                            className="cursor-pointer text-blue-600 hover:underline"
-                            onClick={() => downloadAttachment(file.atflCd)}
-                            target="_blank"
-                            rel="noreferrer"
-                          >
-                            {file.orgnlFileNm || file.physFileNm || file.atflId}
-                          </a>
-                        ) : (
-                          <span>{file.orgnlFileNm || file.physFileNm || file.atflId}</span>
-                        )}
-                      </TableCell>
-                      <TableCell className="text-right text-gray-500">
-                        {formatFileSize(file.atflFlieSz)}
-                      </TableCell>
-                    </TableRow>
-                  ))
-                )}
-              </TableBody>
-            </Table>
-          </div>
-        </SectionCollapsible>
-      )}
-    </>
-  );
-}
-
-export { AttachmentsSection };
diff --git a/apps/as/src/pages/sewer-bsc-plan/ui/sewer-bsc-plan-view-page.tsx b/apps/as/src/pages/sewer-bsc-plan/ui/sewer-bsc-plan-view-page.tsx
index e04483925..63b61052b 100644
--- a/apps/as/src/pages/sewer-bsc-plan/ui/sewer-bsc-plan-view-page.tsx
+++ b/apps/as/src/pages/sewer-bsc-plan/ui/sewer-bsc-plan-view-page.tsx
@@ -6,7 +6,7 @@ import { useUserStore } from "@/shared/lib";
 import { ElaprDocPrgrsStatus } from "@/entities/elapr";
 import { useRvwMnpwMngLoginUserList } from "@/entities/rvw-mnpw";
 import { useSewerBscPlanDetails } from "@/entities/sewer-bsc-plan";
-import { ProgressStatusSection, SupplementDemandSection } from "@/widgets/pbadms-sprt";
+import { AttachmentsViewSection, ProgressStatusSection, SupplementDemandSection } from "@/widgets/pbadms-sprt";
 import { Skeleton } from "@common/components";
 
 import { needsRoleUser01AtrzResolve } from "../lib/button-config";
@@ -15,7 +15,6 @@ import { EMPTY_CKLST_RESULT_LIST, useChecklistFormState } from "../lib/use-check
 import { PROGRESS_STATUS_COLUMNS } from "../model/columns";
 
 import { FloatingActionButtons } from "./components/floating-action-buttons";
-import { AttachmentsSection } from "./sections/attachments-section";
 import { BasicInfoSection } from "./sections/basic-info-section";
 import { BizCstMatrixSection } from "./sections/biz-cst-matrix-section";
 import { ChecklistSection } from "./sections/checklist-section";
@@ -116,7 +115,7 @@ function SewerBscPlanViewPage({ id, propChgCycl }: SewerBscPlanViewPageProps) {
         formState={checklistFormState}
         setFormState={setChecklistFormState}
       />
-      <AttachmentsSection esntlFileList={esntlFileList} etcFileList={etcFileList} />
+      <AttachmentsViewSection esntlFileList={esntlFileList} etcFileList={etcFileList} />
       <SupplementDemandSection splmntDmndList={splmntDmndList} />
       <TechReviewOpinionSection
         ref={techReviewOpinionRef}
diff --git a/apps/as/src/shared/config/api.ts b/apps/as/src/shared/config/api.ts
index 64eb48989..3dc97907d 100644
--- a/apps/as/src/shared/config/api.ts
+++ b/apps/as/src/shared/config/api.ts
@@ -3,6 +3,7 @@ export const ENDPOINT = {
     TUS_UPLOAD: "/attach-service/api/v1/tus/upload",
     ATTACHMENTS: "/attach-service/api/v1/atfl/attachments",
     DOWNLOAD: "/attach-service/api/v1/atflcd/download",
+    DOWNLOAD_BY_ATFL_ID: "/attach-service/api/v1/download",
   },
   AS_SERVICE: {
     ACNTG_SE: "/as-service/api/v1/acntg-se",
diff --git a/apps/as/src/shared/model/pbadms-sprt.ts b/apps/as/src/shared/model/pbadms-sprt.ts
index 10d620b84..c90c2cdaf 100644
--- a/apps/as/src/shared/model/pbadms-sprt.ts
+++ b/apps/as/src/shared/model/pbadms-sprt.ts
@@ -108,22 +108,8 @@ export interface EsntlAtchFileMngTreeResponseDto {
   esntlAtchYn: string;
   /** 필수첨부파일비고 */
   esntlAtchFileRmrk: string | null;
-  /** 첨부파일 코드 */
-  atflCd?: string;
-  /** 첨부파일 일련번호 */
-  atflSn?: number;
-  /** 첨부파일 ID */
-  atflId?: string;
-  /** 원본 파일명 */
-  orgnlFileNm?: string;
-  /** 첨부파일 크기 */
-  atflFlieSz?: number;
-  /** 첨부파일 타입 */
-  atflType?: string;
-  /** 다운로드 횟수 */
-  dwnldNocs?: number;
-  /** 등록일시 */
-  regDt?: string;
+  /** 첨부파일 목록 (슬롯당 atchFileGroupId 1:N) */
+  atchFileList?: AtflMngClientResponseDto[];
 }
 
 /** 첨부파일 응답 DTO (attach-service client) */
diff --git a/apps/as/src/widgets/pbadms-sprt/index.ts b/apps/as/src/widgets/pbadms-sprt/index.ts
index e891ec930..b1a1081d2 100644
--- a/apps/as/src/widgets/pbadms-sprt/index.ts
+++ b/apps/as/src/widgets/pbadms-sprt/index.ts
@@ -2,8 +2,10 @@ export {
   atchFileGroupIdPath,
   createEtcUploadKey,
   createUploadKey,
+  getEsntlAtchFileGroupId,
   isEtcFileKey,
   isFormEsntlAtchComplete,
+  toEsntlAtchFileSaveList,
 } from "./lib/attachments-form-utils";
 export {
   buildAcntgCostItems,
@@ -30,6 +32,7 @@ export {
 } from "./lib/fnrs-shar-form-utils";
 export { calcDiffPercent, fmtNumber, indentPx } from "./lib/format-utils";
 export { AttachmentsFormSection } from "./ui/attachments-form-section";
+export { AttachmentsViewSection } from "./ui/attachments-view-section";
 export { BusinessCostFormSection } from "./ui/business-cost-form-section";
 export { BusinessScaleFormSection } from "./ui/business-scale-form-section";
 export { ChecklistFormSection } from "./ui/checklist-form-section";
diff --git a/apps/as/src/widgets/pbadms-sprt/lib/attachments-form-utils.ts b/apps/as/src/widgets/pbadms-sprt/lib/attachments-form-utils.ts
index 7b55cb4fa..c08d16bfd 100644
--- a/apps/as/src/widgets/pbadms-sprt/lib/attachments-form-utils.ts
+++ b/apps/as/src/widgets/pbadms-sprt/lib/attachments-form-utils.ts
@@ -10,7 +10,7 @@ export type FieldPrefix =
 
 export const ETC_FILE_KEY_PREFIX = "etc::";
 
-interface EsntlAtchFileListItem {
+export interface EsntlAtchFileListItem {
   esntlAtchFileId: string;
   atchFileGroupId: string;
 }
@@ -42,6 +42,27 @@ export function toFileAccept(rmrk: string | null | undefined): string {
     .join(",");
 }
 
+export function getEsntlAtchFileGroupId(item: EsntlAtchFileMngTreeResponseDto): string {
+  return item.atchFileList?.[0]?.atflCd ?? "";
+}
+
+export function toEsntlAtchFileSaveList(
+  esntlFileList?: EsntlAtchFileMngTreeResponseDto[],
+): EsntlAtchFileListItem[] {
+  const esntlMap = new Map<string, string>();
+
+  for (const item of esntlFileList ?? []) {
+    const atchFileGroupId = getEsntlAtchFileGroupId(item);
+    if (!item.esntlAtchFileId || !atchFileGroupId) continue;
+    esntlMap.set(item.esntlAtchFileId, atchFileGroupId);
+  }
+
+  return Array.from(esntlMap.entries()).map(([esntlAtchFileId, atchFileGroupId]) => ({
+    esntlAtchFileId,
+    atchFileGroupId,
+  }));
+}
+
 export function isFormEsntlAtchComplete(
   essentialFiles: EsntlAtchFileMngTreeResponseDto[],
   esntlAtchFileList: EsntlAtchFileListItem[],
diff --git a/apps/as/src/widgets/pbadms-sprt/ui/attachments-form-section.tsx b/apps/as/src/widgets/pbadms-sprt/ui/attachments-form-section.tsx
index b4bce6b8a..c982b8eeb 100644
--- a/apps/as/src/widgets/pbadms-sprt/ui/attachments-form-section.tsx
+++ b/apps/as/src/widgets/pbadms-sprt/ui/attachments-form-section.tsx
@@ -4,6 +4,7 @@ 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 { ENDPOINT } from "@/shared/config";
 import { useTus } from "@/shared/lib";
@@ -30,7 +31,7 @@ import {
   type FieldPrefix,
   isEtcFileKey,
   toFileAccept,
-} from "../lib/attachments-form-utils";
+} from "../lib/attachments-form-utils";
 
 interface AttachmentsFormData {
   esntlAtchFileList: Array<{
@@ -103,22 +104,22 @@ function AttachmentsFormSection({
     if (initialEsntlFiles?.length) {
       const nextUploadedFiles: Record<string, UploadedFileItem[]> = {};
 
-      for (const file of initialEsntlFiles) {
-        if (!file.esntlAtchFileId || !file.atflCd || !file.atflId) continue;
+      for (const slot of initialEsntlFiles) {
+        if (!slot.esntlAtchFileId) continue;
 
-        const fileKey = `server::${file.esntlAtchFileId}::${file.atflId}`;
-        const fileName = file.orgnlFileNm ?? "첨부파일";
+        const files = (slot.atchFileList ?? []).filter((file) => file.atflId && file.atflCd);
+        if (files.length === 0) continue;
 
-        nextUploadedFiles[file.esntlAtchFileId] = [
-          ...(nextUploadedFiles[file.esntlAtchFileId] ?? []),
-          {
-            fileName,
-            fileKey,
-            atflId: file.atflId,
-            atflCd: file.atflCd,
-          },
-        ];
-        atflCdBySlotRef.current[file.esntlAtchFileId] = file.atflCd;
+        const [firstFile] = files;
+        if (!firstFile) continue;
+
+        nextUploadedFiles[slot.esntlAtchFileId] = files.map((file) => ({
+          fileName: file.orgnlFileNm ?? "첨부파일",
+          fileKey: `server::${slot.esntlAtchFileId}::${file.atflId}`,
+          atflId: file.atflId,
+          atflCd: file.atflCd,
+        }));
+        atflCdBySlotRef.current[slot.esntlAtchFileId] = firstFile.atflCd;
       }
 
       setUploadedFiles(nextUploadedFiles);
@@ -372,7 +373,7 @@ function AttachmentsFormSection({
           render={() => (
             <div className="px-2">
               <h3 className="mb-4 text-xl font-semibold">필수 첨부파일</h3>
-              <Table variant="secondary">
+              <Table variant="secondary" className="table-fixed">
                 <colgroup>
                   <col width="40%" />
                   <col width="15%" />
@@ -406,36 +407,43 @@ function AttachmentsFormSection({
                         </TableHead>
                         <TableCell align="center">{file.esntlAtchFileRmrk}</TableCell>
                         <TableCell className="space-y-2">
-                          {uploadedFiles[file.esntlAtchFileId]?.length > 0 ? (
-                            <div className="space-y-1">
+                          {uploadedFiles[file.esntlAtchFileId]?.length > 0 && (
+                            <div className="flex flex-wrap gap-2">
                               {uploadedFiles[file.esntlAtchFileId].map((item, idx) => {
                                 const uploading = isUploading[item.fileKey] ?? false;
 
                                 return (
-                                  <div key={item.fileKey} className="flex items-center gap-2">
+                                  <div
+                                    key={item.fileKey}
+                                    className="inline-flex items-center justify-between gap-2 rounded-sm border bg-accent p-2"
+                                  >
+                                    <Paperclip className="size-5 shrink-0" />
                                     <TextShimmer className="text-xl" active={uploading}>
                                       {item.file?.name ?? item.fileName}
                                     </TextShimmer>
-                                    {!uploading && (
-                                      <Button
-                                        size="icon"
-                                        onClick={(e) => {
-                                          e.preventDefault();
-                                          void removeEssentialFile(file.esntlAtchFileId, idx);
-                                        }}
-                                        className="size-8 !bg-destructive"
-                                      >
-                                        <i className="diveicon di-x text-xs" aria-label="삭제" />
-                                      </Button>
-                                    )}
+                                    <button
+                                      type="button"
+                                      onClick={(e) => {
+                                        e.preventDefault();
+                                        void removeEssentialFile(file.esntlAtchFileId, idx);
+                                      }}
+                                      disabled={uploading}
+                                    >
+                                      <X
+                                        className="size-5 shrink-0 text-destructive"
+                                        aria-label="삭제"
+                                      />
+                                    </button>
                                   </div>
                                 );
                               })}
                             </div>
-                          ) : (
+                          )}
+                          <div>
                             <label>
                               <input
                                 type="file"
+                                multiple
                                 className="hidden"
                                 accept={toFileAccept(file.esntlAtchFileRmrk) || undefined}
                                 onChange={(e) => {
@@ -447,10 +455,10 @@ function AttachmentsFormSection({
                                 }}
                               />
                               <Button size="sm" variant="outline" asChild>
-                                <span>파일선택</span>
+                                <span>파일추가</span>
                               </Button>
                             </label>
-                          )}
+                          </div>
                         </TableCell>
                       </TableRow>
                     ))
@@ -475,35 +483,35 @@ function AttachmentsFormSection({
                 }}
               />
               <Button size="sm" variant="outline" asChild>
-                <span>파일 추가</span>
+                <span>파일추가</span>
               </Button>
             </label>
           </div>
           <div className="rounded border p-4">
             {etcFiles.length > 0 ? (
-              <div className="space-y-2">
+              <div className="flex flex-wrap gap-2">
                 {etcFiles.map((item, idx) => {
                   const uploading = isUploading[item.fileKey] ?? false;
 
                   return (
                     <div
                       key={item.fileKey}
-                      className="flex items-center justify-between rounded-sm border p-2"
+                      className="inline-flex items-center justify-between gap-2 rounded-sm border bg-accent p-2"
                     >
-                      <TextShimmer className="px-2 text-xl" active={uploading}>
+                      <Paperclip className="size-5 shrink-0" />
+                      <TextShimmer className="text-xl" active={uploading}>
                         {item.file?.name ?? item.fileName}
                       </TextShimmer>
-                      <Button
-                        size="sm"
-                        color="gray"
+                      <button
+                        type="button"
                         onClick={(e) => {
                           e.preventDefault();
                           void removeEtcFile(idx);
                         }}
                         disabled={uploading}
                       >
-                        삭제
-                      </Button>
+                        <X className="size-5 shrink-0 text-destructive" aria-label="삭제" />
+                      </button>
                     </div>
                   );
                 })}
diff --git a/apps/as/src/widgets/pbadms-sprt/ui/attachments-view-section.tsx b/apps/as/src/widgets/pbadms-sprt/ui/attachments-view-section.tsx
new file mode 100644
index 000000000..4a49e5855
--- /dev/null
+++ b/apps/as/src/widgets/pbadms-sprt/ui/attachments-view-section.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { Paperclip } from "lucide-react";
+
+import { formatFileSize } from "@/shared/lib/file-utils";
+import type { AtflMngClientResponseDto, EsntlAtchFileMngTreeResponseDto } from "@/shared/model";
+import { SectionCollapsible } from "@/shared/ui";
+import { useDownloadAttachmentByAtflCd, useDownloadAttachmentByAtflId } from "@/entities/attach";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
+
+interface AttachmentsViewSectionProps {
+  esntlFileList: EsntlAtchFileMngTreeResponseDto[];
+  etcFileList: AtflMngClientResponseDto[];
+}
+
+function AttachmentsViewSection({ esntlFileList, etcFileList }: AttachmentsViewSectionProps) {
+  const { mutate: downloadByAtflCd } = useDownloadAttachmentByAtflCd();
+  const { mutate: downloadByAtflId } = useDownloadAttachmentByAtflId();
+
+  return (
+    <>
+      {esntlFileList.length > 0 && (
+        <SectionCollapsible title="필수 첨부파일">
+          <div className="overflow-x-auto">
+            <Table variant="secondary">
+              <TableHeader>
+                <TableRow>
+                  <TableHead>필수 자료명</TableHead>
+                  <TableHead>파일명</TableHead>
+                  <TableHead className="w-[8rem] text-right">크기</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {esntlFileList.map((slot) => {
+                  const files = slot.atchFileList ?? [];
+
+                  return (
+                    <TableRow key={slot.esntlAtchFileId}>
+                      <TableCell className="pl-2 text-left">
+                        {slot.esntlAtchFileNm}
+                        {slot.esntlAtchYn === "Y" ? (
+                          <span className="ml-1 text-red-500">*</span>
+                        ) : null}
+                      </TableCell>
+                      <TableCell className="text-left">
+                        {files.length === 0 ? (
+                          <span className="text-gray-500">첨부없음</span>
+                        ) : (
+                          <div className="space-y-2">
+                            {files.map((file) => (
+                              <a
+                                key={file.atflId}
+                                className="flex cursor-pointer items-center gap-1 text-blue-600 hover:underline"
+                                onClick={() => downloadByAtflId(file.atflId)}
+                              >
+                                <Paperclip className="size-5 shrink-0 text-blue-600" />
+                                {file.orgnlFileNm || "다운로드"}
+                              </a>
+                            ))}
+                          </div>
+                        )}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        {files.length === 0 ? (
+                          "-"
+                        ) : (
+                          <div className="space-y-1">
+                            {files.map((file) => (
+                              <div key={file.atflId}>{formatFileSize(file.atflFlieSz)}</div>
+                            ))}
+                          </div>
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        </SectionCollapsible>
+      )}
+
+      {etcFileList.length > 0 && (
+        <SectionCollapsible title="기타 첨부파일">
+          <div className="overflow-x-auto">
+            <Table variant="secondary">
+              <TableHeader>
+                <TableRow>
+                  <TableHead>파일명</TableHead>
+                  <TableHead className="w-[8rem] text-right">크기</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {etcFileList.map((file) => (
+                  <TableRow key={file.atflId}>
+                    <TableCell className="text-left">
+                      {file.atflCd ? (
+                        <a
+                          className="flex cursor-pointer items-center gap-1 text-blue-600 hover:underline"
+                          onClick={() => downloadByAtflCd(file.atflCd)}
+                        >
+                          <Paperclip className="size-5 shrink-0 text-blue-600" />
+                          {file.orgnlFileNm || file.physFileNm || file.atflId}
+                        </a>
+                      ) : (
+                        <span>{file.orgnlFileNm || file.physFileNm || file.atflId}</span>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-right text-gray-500">
+                      {formatFileSize(file.atflFlieSz)}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </SectionCollapsible>
+      )}
+    </>
+  );
+}
+
+export { AttachmentsViewSection };

From 7baebf2cbc6d3b0bd24ed3527b58f986687ec63f Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 25 Aug 2026 10:31:40 +0900
Subject: [PATCH 4/4] =?UTF-8?q?[as]=20feat:=20=EB=B6=80=EB=8F=99=EC=86=8C?=
 =?UTF-8?q?=EC=88=98=EC=A0=90=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lib/biz-cst-matrix-utils.ts               | 10 +++++----
 .../sewer-bsc-plan/lib/fnrs-cst-form-utils.ts | 12 +++++------
 .../ui/sections/fnrs-cst-form-section.tsx     |  3 +--
 apps/as/src/widgets/pbadms-sprt/index.ts      |  2 +-
 .../lib/business-cost-form-utils.ts           |  8 ++++++-
 .../lib/business-scale-form-utils.ts          | 10 +++++++--
 .../pbadms-sprt/lib/fnrs-shar-form-utils.ts   | 21 ++++++++++++-------
 .../widgets/pbadms-sprt/lib/format-utils.ts   |  7 +++++++
 8 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/apps/as/src/pages/sewer-bsc-plan/lib/biz-cst-matrix-utils.ts b/apps/as/src/pages/sewer-bsc-plan/lib/biz-cst-matrix-utils.ts
index 41ff8e9da..74867acd6 100644
--- a/apps/as/src/pages/sewer-bsc-plan/lib/biz-cst-matrix-utils.ts
+++ b/apps/as/src/pages/sewer-bsc-plan/lib/biz-cst-matrix-utils.ts
@@ -1,4 +1,4 @@
-import type { CostItemDef } from "@/widgets/pbadms-sprt/lib/business-cost-form-utils";
+import { type CostItemDef, roundAmount } from "@/widgets/pbadms-sprt";
 
 export interface BizCstMatrixItem {
   planStpNo: number;
@@ -45,9 +45,11 @@ function recalculateBizCstMatrix(
     if (!item.readonly || !item.children) continue;
 
     for (const planStpNo of PLAN_STEPS) {
-      const childSum = item.children.reduce(
-        (sum, childCode) => sum + getAmt(next, childCode, planStpNo),
-        0,
+      const childSum = roundAmount(
+        item.children.reduce(
+          (sum, childCode) => sum + getAmt(next, childCode, planStpNo),
+          0,
+        ),
       );
       const current = getAmt(next, item.code, planStpNo);
       if (current !== childSum) {
diff --git a/apps/as/src/pages/sewer-bsc-plan/lib/fnrs-cst-form-utils.ts b/apps/as/src/pages/sewer-bsc-plan/lib/fnrs-cst-form-utils.ts
index a6ed6b94b..57de61985 100644
--- a/apps/as/src/pages/sewer-bsc-plan/lib/fnrs-cst-form-utils.ts
+++ b/apps/as/src/pages/sewer-bsc-plan/lib/fnrs-cst-form-utils.ts
@@ -1,4 +1,4 @@
-import type { CostItemDef } from "@/widgets/pbadms-sprt/lib/business-cost-form-utils";
+import { type CostItemDef, roundAmount } from "@/widgets/pbadms-sprt";
 
 import { type BizCstMatrixItem,getAmt, PLAN_STEPS } from "./biz-cst-matrix-utils";
 
@@ -31,11 +31,11 @@ function getBizCstStepTotal(
 }
 
 function sumFnrsCstLeaf(item: FnrsCstItem): number {
-  return (
+  return roundAmount(
     (item.gvexpAmt ?? 0) +
-    (item.lcexpAmt ?? 0) +
-    (item.orgprBdchgAmt ?? 0) +
-    (item.etcAmt ?? 0)
+      (item.lcexpAmt ?? 0) +
+      (item.orgprBdchgAmt ?? 0) +
+      (item.etcAmt ?? 0),
   );
 }
 
@@ -55,7 +55,7 @@ function calcFnrsCstRemaining(
     const bizTotal = getBizCstStepTotal(bizCstList, costItems, planStpNo);
     const fnrsItem = fnrsCstList.find((item) => item.planStpNo === planStpNo);
     const sharTotal = fnrsItem ? sumFnrsCstLeaf(fnrsItem) : 0;
-    return { planStpNo, remaining: bizTotal - sharTotal };
+    return { planStpNo, remaining: roundAmount(bizTotal - sharTotal) };
   });
 }
 
diff --git a/apps/as/src/pages/sewer-bsc-plan/ui/sections/fnrs-cst-form-section.tsx b/apps/as/src/pages/sewer-bsc-plan/ui/sections/fnrs-cst-form-section.tsx
index c27e2d34b..3779c4c22 100644
--- a/apps/as/src/pages/sewer-bsc-plan/ui/sections/fnrs-cst-form-section.tsx
+++ b/apps/as/src/pages/sewer-bsc-plan/ui/sections/fnrs-cst-form-section.tsx
@@ -154,8 +154,7 @@ function FnrsCstFormSection() {
                     <TableCell key={planStpNo}>
                       <Field>
                         <Input
-                          type="text"
-                          inputMode="decimal"
+                          type="number"
                           className={cn("text-right", row.readonly && "bg-muted")}
                           readOnly={row.readonly}
                           disabled={row.readonly}
diff --git a/apps/as/src/widgets/pbadms-sprt/index.ts b/apps/as/src/widgets/pbadms-sprt/index.ts
index b1a1081d2..0dd7d8157 100644
--- a/apps/as/src/widgets/pbadms-sprt/index.ts
+++ b/apps/as/src/widgets/pbadms-sprt/index.ts
@@ -30,7 +30,7 @@ export {
   toFnrsSharSaveList,
   validateBizCstSharBalance,
 } from "./lib/fnrs-shar-form-utils";
-export { calcDiffPercent, fmtNumber, indentPx } from "./lib/format-utils";
+export { calcDiffPercent, fmtNumber, indentPx, roundAmount } from "./lib/format-utils";
 export { AttachmentsFormSection } from "./ui/attachments-form-section";
 export { AttachmentsViewSection } from "./ui/attachments-view-section";
 export { BusinessCostFormSection } from "./ui/business-cost-form-section";
diff --git a/apps/as/src/widgets/pbadms-sprt/lib/business-cost-form-utils.ts b/apps/as/src/widgets/pbadms-sprt/lib/business-cost-form-utils.ts
index d27b9eb85..b6d415675 100644
--- a/apps/as/src/widgets/pbadms-sprt/lib/business-cost-form-utils.ts
+++ b/apps/as/src/widgets/pbadms-sprt/lib/business-cost-form-utils.ts
@@ -1,5 +1,7 @@
 import type { AcntgSeMngTreeDto } from "@/entities/acntg";
 
+import { roundAmount } from "./format-utils";
+
 export interface CostItemDef {
   code: string;
   label: string;
@@ -29,7 +31,11 @@ function sumChildAmounts(list: BizCstListItem[], childCodes: string[]) {
     }
   });
 
-  return { bscPlanAmt, bgtRfltAmt, tstmDesignAmt };
+  return {
+    bscPlanAmt: roundAmount(bscPlanAmt),
+    bgtRfltAmt: roundAmount(bgtRfltAmt),
+    tstmDesignAmt: roundAmount(tstmDesignAmt),
+  };
 }
 
 export function buildAcntgCostItems(tree: AcntgSeMngTreeDto[]): CostItemDef[] {
diff --git a/apps/as/src/widgets/pbadms-sprt/lib/business-scale-form-utils.ts b/apps/as/src/widgets/pbadms-sprt/lib/business-scale-form-utils.ts
index 33ad22cd5..d50711bb9 100644
--- a/apps/as/src/widgets/pbadms-sprt/lib/business-scale-form-utils.ts
+++ b/apps/as/src/widgets/pbadms-sprt/lib/business-scale-form-utils.ts
@@ -1,5 +1,7 @@
 import type { CnstpSeMngTreeDto } from "@/entities/cnstp";
 
+import { roundAmount } from "./format-utils";
+
 export interface ScaleItemDef {
   code: string;
   label: string;
@@ -30,13 +32,17 @@ function sumChildScale(list: BzScaleListItem[], childCodes: string[]) {
     }
   });
 
-  return { bscPl, budgetReflct, thtiDsgn };
+  return {
+    bscPl: roundAmount(bscPl),
+    budgetReflct: roundAmount(budgetReflct),
+    thtiDsgn: roundAmount(thtiDsgn),
+  };
 }
 
 function withDiff(item: BzScaleListItem): BzScaleListItem {
   const budgetReflct = item.budgetReflct || 0;
   const thtiDsgn = item.thtiDsgn || 0;
-  return { ...item, diff: thtiDsgn - budgetReflct };
+  return { ...item, diff: roundAmount(thtiDsgn - budgetReflct) };
 }
 
 export function buildCnstpScaleItems(tree: CnstpSeMngTreeDto[]): ScaleItemDef[] {
diff --git a/apps/as/src/widgets/pbadms-sprt/lib/fnrs-shar-form-utils.ts b/apps/as/src/widgets/pbadms-sprt/lib/fnrs-shar-form-utils.ts
index fa0fc7908..4700fdac1 100644
--- a/apps/as/src/widgets/pbadms-sprt/lib/fnrs-shar-form-utils.ts
+++ b/apps/as/src/widgets/pbadms-sprt/lib/fnrs-shar-form-utils.ts
@@ -2,6 +2,7 @@ import type { FnrsSharItem } from "@/entities/fnrs-cnsltn";
 import type { FnrsSharBizCstTreeDto, FnrsSharSeMngTreeDto } from "@/entities/fnrs-shar-se";
 
 import type { BizCstListItem, CostItemDef } from "./business-cost-form-utils";
+import { roundAmount } from "./format-utils";
 
 export interface FnrsSharItemDef {
   code: string;
@@ -78,7 +79,10 @@ function sumChildSharAmounts(list: FnrsSharListItem[], childCodes: string[]) {
     chgRqtAmt += child.chgRqtAmt || 0;
   });
 
-  return { exstnAmt, chgRqtAmt };
+  return {
+    exstnAmt: roundAmount(exstnAmt),
+    chgRqtAmt: roundAmount(chgRqtAmt),
+  };
 }
 
 export function recalculateFnrsSharTotals(
@@ -103,7 +107,7 @@ export function recalculateFnrsSharTotals(
         ...current,
         exstnAmt,
         chgRqtAmt,
-        ajmtAmt: exstnAmt - chgRqtAmt,
+        ajmtAmt: roundAmount(exstnAmt - chgRqtAmt),
       };
       hasChanges = true;
     }
@@ -158,7 +162,10 @@ export function sumFnrsSharLeafAmounts(
     chgRqtAmt += row.chgRqtAmt || 0;
   });
 
-  return { exstnAmt, chgRqtAmt };
+  return {
+    exstnAmt: roundAmount(exstnAmt),
+    chgRqtAmt: roundAmount(chgRqtAmt),
+  };
 }
 
 export function calcBizCstSharRemaining(
@@ -171,8 +178,8 @@ export function calcBizCstSharRemaining(
   const leafSum = sumFnrsSharLeafAmounts(sharList, sharItems);
 
   return {
-    exstnRemaining: bizCstTotal.bscPlanAmt - leafSum.exstnAmt,
-    chgRqtRemaining: bizCstTotal.tstmDesignAmt - leafSum.chgRqtAmt,
+    exstnRemaining: roundAmount(bizCstTotal.bscPlanAmt - leafSum.exstnAmt),
+    chgRqtRemaining: roundAmount(bizCstTotal.tstmDesignAmt - leafSum.chgRqtAmt),
   };
 }
 
@@ -201,7 +208,7 @@ export function toFnrsSharSaveList(list: FnrsSharListItem[]): FnrsSharItem[] {
     fnrsSharSeCd: row.fnrsSharSeCd,
     exstnAmt: row.exstnAmt || 0,
     chgRqtAmt: row.chgRqtAmt || 0,
-    ajmtAmt: (row.exstnAmt || 0) - (row.chgRqtAmt || 0),
+    ajmtAmt: roundAmount((row.exstnAmt || 0) - (row.chgRqtAmt || 0)),
     rmrkCn: row.rmrkCn,
   }));
 }
@@ -239,7 +246,7 @@ export function mapFnrsSharDetToFormList(tree: FnrsSharBizCstTreeDto[]): FnrsSha
       fnrsSharSeCd: item.code,
       exstnAmt,
       chgRqtAmt,
-      ajmtAmt: exstnAmt - chgRqtAmt,
+      ajmtAmt: roundAmount(exstnAmt - chgRqtAmt),
       rmrkCn: node?.rmrkCn ?? "",
     };
   });
diff --git a/apps/as/src/widgets/pbadms-sprt/lib/format-utils.ts b/apps/as/src/widgets/pbadms-sprt/lib/format-utils.ts
index 8fa24d3cb..084674eb0 100644
--- a/apps/as/src/widgets/pbadms-sprt/lib/format-utils.ts
+++ b/apps/as/src/widgets/pbadms-sprt/lib/format-utils.ts
@@ -18,6 +18,13 @@ export function indentPx(indNm: string | undefined): number {
   return (spaces / 4) * 16;
 }
 
+const AMOUNT_DECIMAL_PLACES = 2;
+
+export function roundAmount(value: number): number {
+  const factor = 10 ** AMOUNT_DECIMAL_PLACES;
+  return Math.round((value + Number.EPSILON) * factor) / factor;
+}
+
 export function calcDiffPercent(diff: number, baseline: number): string {
   if (baseline === 0) return "-";
   return `${Math.round((diff / baseline) * 100)}%`;