Merge branch 'main' into feature/0612_sentry_fr_merge

# Conflicts:
#	apps/cs/src/pages/module/ui/module-page.tsx

.vscode/launch.json

@@ -14,13 +14,91 @@
                 "dev:as"
             ],
             "skipFiles": [
-                "<node_internals>/**"
+                "<node_internals>/**",
+                "**/node_modules/**"
+            ],
+            "resolveSourceMapLocations": [
+                "${workspaceFolder}/**",
+                "!**/node_modules/**"
             ],
             "cwd": "${workspaceFolder}",
             "console": "integratedTerminal",
             "sourceMaps": true,
             "env": {
-                "NODE_OPTIONS": "--inspect"
+                "NODE_OPTIONS": "--inspect --max-old-space-size=8192"
+            }
+        },
+        {
+            "type": "node-terminal",
+            "request": "launch",
+            "name": "dev:as 서버 컴포넌트 디버그 (node-terminal)",
+            "command": "pnpm --filter as dev",
+            "cwd": "${workspaceFolder}"
+        },
+        {
+            "type": "node-terminal",
+            "request": "launch",
+            "name": "dev:as 통합 디버그 (Server + Client)",
+            "command": "pnpm --filter as dev",
+            "cwd": "${workspaceFolder}",
+            "serverReadyAction": {
+                "action": "debugWithChrome",
+                "pattern": "- Local:\\s+(https?://.+)",
+                "uriFormat": "%s",
+                "webRoot": "${workspaceFolder}/apps/as"
+            }
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Playwright: 현재 활성화된 테스트 디버그",
+            "runtimeExecutable": "pnpm",
+            "runtimeArgs": [
+                "--filter",
+                "cs",
+                "exec",
+                "playwright",
+                "test",
+                "${relativeFile}"
+            ],
+            "cwd": "${workspaceFolder}",
+            "console": "integratedTerminal",
+            "skipFiles": [
+                "<node_internals>/**",
+                "**/node_modules/**"
+            ]
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Playwright: cs 로그인 테스트 디버그",
+            "runtimeExecutable": "pnpm",
+            "runtimeArgs": [
+                "--filter",
+                "cs",
+                "exec",
+                "playwright",
+                "test",
+                "tests/login.spec.ts"
+            ],
+            "cwd": "${workspaceFolder}",
+            "console": "integratedTerminal",
+            "skipFiles": [
+                "<node_internals>/**",
+                "**/node_modules/**"
+            ]
+        },
+        {
+            "type": "node-terminal",
+            "request": "launch",
+            "name": "dev:cs 통합 디버그 (Server + Client)",
+            "command": "pnpm --filter cs dev",
+            "cwd": "${workspaceFolder}",
+            "serverReadyAction": {
+                "action": "debugWithChrome",
+                "pattern": "- Local:\\s+(https?://.+)",
+                "uriFormat": "%s",
+                "webRoot": "${workspaceFolder}/apps/cs"
             }
         },
         {
@@ -33,13 +111,18 @@
                 "dev:cs"
             ],
             "skipFiles": [
-                "<node_internals>/**"
+                "<node_internals>/**",
+                "**/node_modules/**"
+            ],
+            "resolveSourceMapLocations": [
+                "${workspaceFolder}/**",
+                "!**/node_modules/**"
             ],
             "cwd": "${workspaceFolder}",
             "console": "integratedTerminal",
             "sourceMaps": true,
             "env": {
-                "NODE_OPTIONS": "--inspect"
+                "NODE_OPTIONS": "--inspect --max-old-space-size=8192"
             }
         },
         {
@@ -49,7 +132,8 @@
             "port": 9229,
             "restart": true,
             "skipFiles": [
-                "<node_internals>/**"
+                "<node_internals>/**",
+                "**/node_modules/**"
             ],
             "sourceMaps": true,
             "resolveSourceMapLocations": [
@@ -63,7 +147,15 @@
             "name": "dev:cs 클라이언트 디버그 (Chrome)",
             "url": "http://localhost:3000",
             "webRoot": "${workspaceFolder}/apps/cs",
-            "sourceMaps": true
+            "skipFiles": [
+                "<node_internals>/**",
+                "**/node_modules/**"
+            ],
+            "sourceMaps": true,
+            "resolveSourceMapLocations": [
+                "${workspaceFolder}/apps/cs/**",
+                "!**/node_modules/**"
+            ]
         },
         {
             "type": "node",
@@ -75,13 +167,31 @@
                 "dev:st"
             ],
             "skipFiles": [
-                "<node_internals>/**"
+                "<node_internals>/**",
+                "**/node_modules/**"
+            ],
+            "resolveSourceMapLocations": [
+                "${workspaceFolder}/**",
+                "!**/node_modules/**"
             ],
             "cwd": "${workspaceFolder}",
             "console": "integratedTerminal",
             "sourceMaps": true,
             "env": {
-                "NODE_OPTIONS": "--inspect"
+                "NODE_OPTIONS": "--inspect --max-old-space-size=8192"
+            }
+        },
+        {
+            "type": "node-terminal",
+            "request": "launch",
+            "name": "dev:st 통합 디버그 (Server + Client)",
+            "command": "pnpm --filter st dev",
+            "cwd": "${workspaceFolder}",
+            "serverReadyAction": {
+                "action": "debugWithChrome",
+                "pattern": "- Local:\\s+(https?://.+)",
+                "uriFormat": "%s",
+                "webRoot": "${workspaceFolder}/apps/st"
             }
         }
     ]

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
     "chat.tools.terminal.autoApprove": {
         "pnpm": true
-    }
+    },
+    "playwright.configs": [
+        "apps/cs/playwright.config.ts"
+    ]
 }

apps/_template/app/layout.tsx

@@ -4,7 +4,7 @@ import { Providers } from "@/app/providers";
 import "@/app/styles/globals.css";
 
 export const metadata: Metadata = {
-  title: "유역하수도통합플랫폼 Hasuon",
+  title: "행정지원시스템",
   description: "행정지원시스템",
 };
 

apps/as/app/(auth)/layout.tsx

@@ -1,7 +1,7 @@
 import "@/app/styles/globals.css";
 
 export const metadata = {
-  title: "유역하수도통합플랫폼 Hasuon",
+  title: "디지털 행정지원 시스템",
 };
 
 export default function AuthLayout({ children }: { children: React.ReactNode }) {

apps/as/app/(main)/layout.tsx

@@ -6,7 +6,7 @@ import { Providers } from "@/app/providers";
 import "@/app/styles/globals.css";
 
 export const metadata: Metadata = {
-  title: "유역하수도통합플랫폼 Hasuon",
+  title: "디지털 행정지원 시스템",
   description: "디지털 행정지원 시스템",
 };
 

apps/as/app/global-not-found.tsx

@@ -4,7 +4,7 @@ import Image from "next/image";
 import "@/app/styles/globals.css";
 
 export const metadata: Metadata = {
-  title: "유역하수도통합플랫폼 Hasuon",
+  title: "디지털 행정지원 시스템",
   description: "페이지가 존재하지 않습니다. 관리자에게 문의하여 주십시오.",
 };
 

apps/as/instrumentation-client.ts

@@ -0,0 +1,43 @@
+import * as Sentry from "@sentry/nextjs";
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
+
+const isSentryEnabled =
+  process.env.NEXT_PUBLIC_SENTRY_ENABLED === "true" &&
+  process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT !== "dev" &&
+  process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT !== "prd";
+
+const getSentryHost = (dsn?: string) => {
+  if (!dsn) return null;
+  try {
+    const url = new URL(dsn);
+    return url.host;
+  } catch {
+    return null;
+  }
+};
+
+const sentryHost = getSentryHost(process.env.NEXT_PUBLIC_SENTRY_DSN);
+
+Sentry.init({
+  enabled: isSentryEnabled,
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT ?? "local",
+  tracesSampleRate: 1.0,
+  replaysSessionSampleRate: 1.0,
+  replaysOnErrorSampleRate: 1.0,
+  integrations: [
+    Sentry.replayIntegration({
+      networkDetailAllowUrls: sentryHost
+        ? [
+            new RegExp(
+              `^(?!.*${sentryHost.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}).*(?:/api/|/server/).*$`,
+            ),
+          ]
+        : [/\/(?:api|server)\//],
+      networkRequestHeaders: ["X-Custom-Header"],
+      networkResponseHeaders: ["X-Custom-Header"],
+    }),
+  ],
+  debug: process.env.NEXT_PUBLIC_SENTRY_DEBUG === "true",
+});

apps/as/instrumentation.ts

@@ -0,0 +1,13 @@
+import * as Sentry from "@sentry/nextjs";
+
+export async function register() {
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    await import("./sentry.server.config");
+  }
+
+  if (process.env.NEXT_RUNTIME === "edge") {
+    await import("./sentry.edge.config");
+  }
+}
+
+export const onRequestError = Sentry.captureRequestError;

apps/as/next.config.ts

@@ -1,53 +1,34 @@
 import type { NextConfig } from "next";
-
-const subDomain = process.env.NEXT_PUBLIC_SUB_DOMAIN || "http://localhost:13000";
-
-const webhwpCtrlBase = (
-  process.env.NEXT_PUBLIC_WEBHYP_CTRL_URL || "https://hwp.onasys.co.kr/webhwpctrl"
-).replace(/\/$/, "");
-
-const webhwpAssetPrefixes = ["js", "hwpsdk", "dist", "commonFrame", "wasm"] as const;
+import { withSentryConfig } from "@sentry/nextjs";
+import path from "path";
 
 const nextConfig: NextConfig = {
   output: "standalone",
   reactStrictMode: true,
   transpilePackages: ["@common/assets"],
-  experimental: {
-    globalNotFound: true,
-  },
-
-  async rewrites() {
-    return {
-      beforeFiles: [
-        {
-          source: "/_next/static/:path*",
-          destination: `${subDomain}/_next/static/:path*`,
-          has: [
-            {
-              type: "header",
-              key: "referer",
-              value: "(.*)/cms(.*)",
-            },
-          ],
-        },
-      ],
-      afterFiles: [
-        {
-          source: "/cms/:path*",
-          destination: `${subDomain}/cms/:path*`,
-        },
-        ...webhwpAssetPrefixes.map((prefix) => ({
-          source: `/webhwpctrl/${prefix}/:path*`,
-          destination: `${webhwpCtrlBase}/${prefix}/:path*`,
-        })),
-        {
-          source: "/webhwpctrl/file/:path*",
-          destination: `${webhwpCtrlBase}/file/:path*`,
-        },
-      ],
-      fallback: [],
-    };
+  outputFileTracingRoot: path.join(__dirname, "../../"),
+  typescript: {
+    ignoreBuildErrors: true,
   },
 };
 
-export default nextConfig;
+const isSentryEnabled =
+  process.env.NEXT_PUBLIC_SENTRY_ENABLED === "true" &&
+  process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT !== "dev" &&
+  process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT !== "prd";
+
+export default withSentryConfig(nextConfig, {
+  org: process.env.SENTRY_ORG,
+  project: process.env.SENTRY_PROJECT,
+  silent: true,
+  widenClientFileUpload: true,
+  tunnelRoute: "/monitoring",
+  ...(!isSentryEnabled ? { disable: true } : {}),
+  webpack: {
+    treeshake: {
+      removeDebugLogging: process.env.NEXT_PUBLIC_SENTRY_DEBUG === "true" ? false : true,
+    },
+    automaticVercelMonitors: false,
+  },
+});
+

apps/as/package.json

@@ -3,11 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 3003",
+    "dev": "next dev --turbo -p 3003",
     "build": "next build",
     "start": "next start -p 3003",
     "lint": "next lint",
-    "lint:fsd": "steiger ."
+    "lint:fsd": "steiger .",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@common/assets": "workspace:*",
@@ -21,6 +23,13 @@
     "@frontend-opensource/use-react-hooks": "^1.1.4",
     "@hookform/resolvers": "^4.1.3",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/context-zone": "^2.8.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.219.0",
+    "@opentelemetry/instrumentation-fetch": "^0.219.0",
+    "@opentelemetry/instrumentation-xml-http-request": "^0.219.0",
+    "@opentelemetry/sdk-trace-web": "^2.8.0",
+    "@sentry/nextjs": "^10.57.0",
     "@tanstack/react-query": "^5.75.5",
     "@tanstack/react-query-devtools": "^5.75.5",
     "@tanstack/react-table": "^8.21.2",
@@ -46,6 +55,8 @@
     "prettier-plugin-tailwindcss": "^0.6.11",
     "steiger": "^0.5.11",
     "tailwindcss": "^3.4.14",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.2",
+    "vite-tsconfig-paths": "5.1.4",
+    "vitest": "^4.1.10"
   }
 }

apps/as/public/webhwpctrl/index.html

@@ -5,6 +5,18 @@
     <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>웹한글 기안기 브리지</title>
+    <script
+      type="text/javascript"
+      src="http://hwp.onasys.co.kr/webhwpctrl/js/hwpctrlapp/utils/util.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="http://hwp.onasys.co.kr/webhwpctrl/js/hwpctrlapp/hwpCtrlApp.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="http://hwp.onasys.co.kr/webhwpctrl/js/webhwpctrl.js"
+    ></script>
     <style>
       html,
       body,
@@ -27,56 +39,27 @@
     <div id="hwpctrl"></div>
     <script type="text/javascript">
       (function () {
-        // baseurl: 부모(HangulGiangi)가 NEXT_PUBLIC_WEBHYP_CTRL_URL 값으로 전달.
-        // 없으면 same-origin 프록시 경로(/webhwpctrl/ → next.config rewrites)를 사용한다.
         var params = new URLSearchParams(window.location.search);
-        var baseUrl = params.get("baseurl") || new URL("./", window.location.href).href;
+        var baseUrl = params.get("baseurl") || "http://hwp.onasys.co.kr/webhwpctrl";
         if (baseUrl.charAt(baseUrl.length - 1) !== "/") {
           baseUrl += "/";
         }
 
-        var scripts = [
-          "js/hwpctrlapp/utils/util.js",
-          "js/hwpctrlapp/hwpCtrlApp.js",
-          "js/webhwpctrl.js",
-        ];
+        var HwpCtrl = BuildWebHwpCtrl(
+          "hwpctrl",
+          baseUrl,
+          function () {
+            try {
+              window.parent.postMessage({ type: "hangulgiangi-ready" }, "*");
+            } catch (e) {
+              console.warn(e);
+            }
+          },
+          2,
+        );
 
-        function loadScript(index) {
-          if (index >= scripts.length) {
-            init();
-            return;
-          }
-          var script = document.createElement("script");
-          script.type = "text/javascript";
-          script.src = baseUrl + scripts[index];
-          script.onload = function () {
-            loadScript(index + 1);
-          };
-          script.onerror = function () {
-            console.error("웹한글 기안기 스크립트 로드 실패: " + script.src);
-          };
-          document.head.appendChild(script);
-        }
-
-        function init() {
-          var HwpCtrl = BuildWebHwpCtrl(
-            "hwpctrl",
-            baseUrl,
-            function () {
-              try {
-                window.parent.postMessage({ type: "hangulgiangi-ready" }, "*");
-              } catch (e) {
-                console.warn(e);
-              }
-            },
-            2,
-          );
-
-          // 부모(HangulGiangi)가 contentWindow.HwpCtrl 로 접근
-          window.HwpCtrl = HwpCtrl;
-        }
-
-        loadScript(0);
+        // 부모(HangulGiangi)가 contentWindow.HwpCtrl 로 접근
+        window.HwpCtrl = HwpCtrl;
       })();
     </script>
   </body>

apps/as/sentry.edge.config.ts

@@ -0,0 +1,14 @@
+import * as Sentry from "@sentry/nextjs";
+
+const isSentryEnabled =
+  process.env.NEXT_PUBLIC_SENTRY_ENABLED === "true" &&
+  process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT !== "dev" &&
+  process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT !== "prd";
+
+Sentry.init({
+  enabled: isSentryEnabled,
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT ?? "local",
+  tracesSampleRate: 1.0,
+  debug: process.env.NEXT_PUBLIC_SENTRY_DEBUG === "true",
+});

apps/as/sentry.server.config.ts

@@ -0,0 +1,14 @@
+import * as Sentry from "@sentry/nextjs";
+
+const isSentryEnabled =
+  process.env.NEXT_PUBLIC_SENTRY_ENABLED === "true" &&
+  process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT !== "dev" &&
+  process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT !== "prd";
+
+Sentry.init({
+  enabled: isSentryEnabled,
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT ?? "local",
+  tracesSampleRate: 1.0,
+  debug: process.env.NEXT_PUBLIC_SENTRY_DEBUG === "true",
+});

apps/as/src/app/layouts/base-layout.tsx

@@ -36,7 +36,6 @@ export function BaseLayoutWrapper({ children }: BaseLayoutWrapperProps) {
       authService={authService}
       currentPath={pathname ?? ""}
       handleMenuClick={handleMenuClick}
-      sidebarTriggerPlacement="lnb"
     >
       <PageLayout>{children}</PageLayout>
     </BaseLayout>

apps/as/src/entities/code/ui/code-select.tsx

@@ -16,20 +16,9 @@ interface CodeSelectProps extends React.ComponentPropsWithoutRef<typeof Select>
   useYn?: string;
   placeholder?: string;
   className?: string;
-  /** 레이블(label htmlFor) 연결용 트리거 id */
-  id?: string;
-  title?: string;
 }
 
-function CodeSelect({
-  upCd,
-  useYn,
-  placeholder = "선택",
-  className,
-  id,
-  title,
-  ...props
-}: CodeSelectProps) {
+function CodeSelect({ upCd, useYn, placeholder = "선택", className, ...props }: CodeSelectProps) {
   const listQuery = useCodeList(useYn ? undefined : upCd);
   const listByUseYnQuery = useCodeListByUseYn(useYn ? upCd : undefined, useYn ?? "");
 
@@ -38,7 +27,7 @@ function CodeSelect({
 
   return (
     <Select {...props} disabled={props.disabled || isLoading}>
-      <SelectTrigger id={id} title={title} className={cn("w-[12rem]", className)}>
+      <SelectTrigger className={cn("w-[12rem]", className)}>
         <SelectValue placeholder={placeholder} />
       </SelectTrigger>
       <SelectContent>

apps/as/src/entities/dc/api/dc-service.ts

@@ -13,16 +13,12 @@ import type {
   NowDmgMtncGnsvySearchDto,
 } from "../model/dc-interface";
 
-/** 빈 문자열 파라미터를 보내면 서버 오류가 나므로 값이 있는 항목만 전송한다. */
 async function getNowDmgMtncGnsvy(
   params: NowDmgMtncGnsvySearchDto,
 ): Promise<NowDmgMtncGnsvyResponseDto[]> {
-  const filledParams = Object.fromEntries(
-    Object.entries(params).filter(([, value]) => value !== undefined && value !== ""),
-  );
   const response = await client.get<NowDmgMtncGnsvyResponseDto[]>(
     `${ENDPOINT.DC_SERVICE}/nowDmgMtncGnsvy`,
-    { params: filledParams },
+    { params },
   );
   return response.data;
 }

apps/as/src/entities/elapr/ui/aprvr-picker-dialog.tsx

@@ -76,7 +76,7 @@ function AprvrPickerDialog({ open, onOpenChange, atrzSeComCd, onSelect }: AprvrP
               배치된 검토인력이 없습니다.
             </p>
           ) : (
-            <Table caption="검토인력 선택 목록으로 성명, 부서, 직위, 직급, 선택 정보 제공" className="w-full">
+            <Table className="w-full">
               <colgroup>
                 <col width="25%" />
                 <col width="25%" />

apps/as/src/entities/elapr/ui/elapr-apln-picker-grid.tsx

@@ -162,7 +162,7 @@ function ElaprAplnPickerGrid({
         </p>
       ) : (
         <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-          <Table caption="결재선 관리 목록으로 결재순서, 결재구분, 결재자, 관리 정보 제공" className="w-full">
+          <Table className="w-full">
             <colgroup>
               <col width="10%" />
               <col width="10%" />

apps/as/src/entities/elapr/ui/elapr-approval-dialog.tsx

@@ -315,7 +315,7 @@ function ElaprApprovalDialog({
                 collisionDetection={closestCenter}
                 onDragEnd={handleDragEnd}
               >
-                <Table caption="결재 진행 단계 목록으로 결재순서, 결재구분, 결재자, 전결자 지정, 결재상태, 관리 정보 제공" className="w-full">
+                <Table className="w-full">
                   <colgroup>
                     <col width="8%" />
                     <col width="8%" />

apps/as/src/entities/elapr/ui/elapr-tmplt-select-table.tsx

@@ -66,7 +66,6 @@ function ElaprTmpltSelectTable({
       getCoreRowModel: getCoreRowModel(),
     },
     dataTableOptions: {
-      caption: "전자결재서식 목록으로 결재서식명 정보 제공",
       onRowClick: (row) => {
         setRowSelection({ [row.elaprTmpltId]: true });
         onSelectTmplt(row);

apps/as/src/entities/fnrs-cnsltn/api/fnrs-cnsltn-rvw-opnn-service.ts

@@ -1,22 +0,0 @@
-import { client } from "@/shared/api";
-import { ENDPOINT } from "@/shared/config";
-import type { RvwOpnnUpdateRequestDto } from "@/shared/model";
-
-const BASE = ENDPOINT.AS_SERVICE.FNRS_CNSLTN_RVW_OPNN;
-
-async function update(
-  fnrsCnsltnDocNo: string,
-  rvwOpnnSn: number,
-  body: RvwOpnnUpdateRequestDto,
-): Promise<void> {
-  await client.put<void>(`${BASE}/${fnrsCnsltnDocNo}/${rvwOpnnSn}`, body);
-}
-
-async function deleteFn(fnrsCnsltnDocNo: string, rvwOpnnSn: number): Promise<void> {
-  await client.delete<void>(`${BASE}/${fnrsCnsltnDocNo}/${rvwOpnnSn}`);
-}
-
-export const fnrsCnsltnRvwOpnnService = {
-  update,
-  delete: deleteFn,
-};

apps/as/src/entities/fnrs-cnsltn/index.ts

@@ -1,66 +1,65 @@
-export { fnrsCnsltnRvwOpnnService } from "./api/fnrs-cnsltn-rvw-opnn-service";
-export { fnrsCnsltnMngService } from "./api/fnrs-cnsltn-service";
-export { fnrsCnsltnKeys } from "./api/queries";
-export {
-  useChangePrgrsSttsComCd,
-  useDeleteFnrsCnsltnMng,
-  useFnrsCnsltnFileVrfcResults,
-  useFnrsCnsltnMng,
-  useFnrsCnsltnMngPage,
-  useRequestActnReviewFnrsCnsltnMng,
-  useRequestExamineFnrsCnsltnMng,
-  useSaveApplyFnrsCnsltnMng,
-  useSaveFnrsCnsltnMng,
-  useSubmitReqSupplementFnrsCnsltnMng,
-  useSubmitSupplementFnrsCnsltnMng,
-  useTechReviewFnrsCnsltnMng,
-  useUpdateFnrsCnsltnMng,
-} from "./api/queries";
-export type {
-  BizCstItem,
-  BzScaleItem,
-  CklstResultItem,
-  EsntlAtchFileItem,
-  FnrsCnsltnApplySaveRequestDto,
-  FnrsCnsltnMngSaveRequestDto,
-  FnrsCnsltnRvwOpnnSaveRequestDto,
-  FnrsCnsltnSplmntDmndItem,
-  FnrsSharItem,
-} from "./model/fnrs-cnsltn-apply-payload-schema";
-export {
-  fnrsCnsltnApplySaveSchema,
-  fnrsCnsltnBizCstItemSchema,
-  fnrsCnsltnBzScaleItemSchema,
-  fnrsCnsltnCklstResultItemSchema,
-  fnrsCnsltnEsntlAtchFileItemSchema,
-  fnrsCnsltnMngSaveSchema,
-  fnrsCnsltnRvwOpnnSaveSchema,
-  fnrsCnsltnSplmntDmndItemSchema,
-  fnrsSharItemSchema,
-} from "./model/fnrs-cnsltn-apply-payload-schema";
-export type {
-  AtflMngClientResponseDto,
-  BizCstTreeDto,
-  BizSclTreeDto,
-  CklstRvwRsltTreeDto,
-  DocPrgrsUpdateRequestDto,
-  ElaprDocPrgrsClientResponseDto,
-  EsntlAtchFileMngTreeResponseDto,
-  FnrsCnsltnFileVrfcRsltResponseDto,
-  FnrsCnsltnMngDetResponseDto,
-  FnrsCnsltnMngResponseDto,
-  FnrsCnsltnMngSearchDto,
-  FnrsCnsltnMngService,
-  FnrsCnsltnMngUpdateRequestDto,
-  FnrsCnsltnRvwOpnnResponseDto,
-  FnrsCnsltnSplmntDmndResponseDto,
-  RagIndexingInfoDto,
-} from "./model/fnrs-cnsltn-interface";
-export type {
-  EnvoActnReviewReqDto,
-  FnrsExamineRequestDto,
-} from "./model/fnrs-cnsltn-payload-schema";
-export {
-  envoActnReviewReqSchema,
-  fnrsExamineRequestSchema,
-} from "./model/fnrs-cnsltn-payload-schema";
+export { fnrsCnsltnMngService } from "./api/fnrs-cnsltn-service";
+export { fnrsCnsltnKeys } from "./api/queries";
+export {
+  useChangePrgrsSttsComCd,
+  useDeleteFnrsCnsltnMng,
+  useFnrsCnsltnFileVrfcResults,
+  useFnrsCnsltnMng,
+  useFnrsCnsltnMngPage,
+  useRequestActnReviewFnrsCnsltnMng,
+  useRequestExamineFnrsCnsltnMng,
+  useSaveApplyFnrsCnsltnMng,
+  useSaveFnrsCnsltnMng,
+  useSubmitReqSupplementFnrsCnsltnMng,
+  useSubmitSupplementFnrsCnsltnMng,
+  useTechReviewFnrsCnsltnMng,
+  useUpdateFnrsCnsltnMng,
+} from "./api/queries";
+export type {
+  BizCstItem,
+  BzScaleItem,
+  CklstResultItem,
+  EsntlAtchFileItem,
+  FnrsCnsltnApplySaveRequestDto,
+  FnrsCnsltnMngSaveRequestDto,
+  FnrsCnsltnRvwOpnnSaveRequestDto,
+  FnrsCnsltnSplmntDmndItem,
+  FnrsSharItem,
+} from "./model/fnrs-cnsltn-apply-payload-schema";
+export {
+  fnrsCnsltnApplySaveSchema,
+  fnrsCnsltnBizCstItemSchema,
+  fnrsCnsltnBzScaleItemSchema,
+  fnrsCnsltnCklstResultItemSchema,
+  fnrsCnsltnEsntlAtchFileItemSchema,
+  fnrsCnsltnMngSaveSchema,
+  fnrsCnsltnRvwOpnnSaveSchema,
+  fnrsCnsltnSplmntDmndItemSchema,
+  fnrsSharItemSchema,
+} from "./model/fnrs-cnsltn-apply-payload-schema";
+export type {
+  AtflMngClientResponseDto,
+  BizCstTreeDto,
+  BizSclTreeDto,
+  CklstRvwRsltTreeDto,
+  DocPrgrsUpdateRequestDto,
+  ElaprDocPrgrsClientResponseDto,
+  EsntlAtchFileMngTreeResponseDto,
+  FnrsCnsltnFileVrfcRsltResponseDto,
+  FnrsCnsltnMngDetResponseDto,
+  FnrsCnsltnMngResponseDto,
+  FnrsCnsltnMngSearchDto,
+  FnrsCnsltnMngService,
+  FnrsCnsltnMngUpdateRequestDto,
+  FnrsCnsltnRvwOpnnResponseDto,
+  FnrsCnsltnSplmntDmndResponseDto,
+  RagIndexingInfoDto,
+} from "./model/fnrs-cnsltn-interface";
+export type {
+  EnvoActnReviewReqDto,
+  FnrsExamineRequestDto,
+} from "./model/fnrs-cnsltn-payload-schema";
+export {
+  envoActnReviewReqSchema,
+  fnrsExamineRequestSchema,
+} from "./model/fnrs-cnsltn-payload-schema";

apps/as/src/entities/instl-sncn/api/instl-sncn-rvw-opnn-service.ts

@@ -1,22 +0,0 @@
-import { client } from "@/shared/api";
-import { ENDPOINT } from "@/shared/config";
-import type { RvwOpnnUpdateRequestDto } from "@/shared/model";
-
-const BASE = ENDPOINT.AS_SERVICE.INSTL_SNCN_RVW_OPNN;
-
-async function update(
-  instlSncnDocNo: string,
-  rvwOpnnSn: number,
-  body: RvwOpnnUpdateRequestDto,
-): Promise<void> {
-  await client.put<void>(`${BASE}/${instlSncnDocNo}/${rvwOpnnSn}`, body);
-}
-
-async function deleteFn(instlSncnDocNo: string, rvwOpnnSn: number): Promise<void> {
-  await client.delete<void>(`${BASE}/${instlSncnDocNo}/${rvwOpnnSn}`);
-}
-
-export const instlSncnRvwOpnnService = {
-  update,
-  delete: deleteFn,
-};

apps/as/src/entities/instl-sncn/index.ts

@@ -1,4 +1,3 @@
-export { instlSncnRvwOpnnService } from "./api/instl-sncn-rvw-opnn-service";
 export { instlSncnRegionService, instlSncnService } from "./api/instl-sncn-service";
 export {
   instlSncnKeys,

apps/as/src/entities/sewer-bsc-plan/api/sewer-bsc-plan-rvw-opnn-service.ts

@@ -1,23 +0,0 @@
-import { client } from "@/shared/api";
-import { ENDPOINT } from "@/shared/config";
-import type { RvwOpnnUpdateRequestDto } from "@/shared/model";
-
-const BASE = ENDPOINT.AS_SERVICE.SEWER_BSC_PLAN_RVW_OPNNS;
-
-async function update(
-  sewerBscPlanDocNo: string,
-  chgCycl: number,
-  rvwOpnnSn: number,
-  body: RvwOpnnUpdateRequestDto,
-): Promise<void> {
-  await client.put<void>(`${BASE}/${sewerBscPlanDocNo}/${chgCycl}/${rvwOpnnSn}`, body);
-}
-
-async function deleteFn(sewerBscPlanDocNo: string, chgCycl: number, rvwOpnnSn: number): Promise<void> {
-  await client.delete<void>(`${BASE}/${sewerBscPlanDocNo}/${chgCycl}/${rvwOpnnSn}`);
-}
-
-export const sewerBscPlanRvwOpnnService = {
-  update,
-  delete: deleteFn,
-};

apps/as/src/entities/sewer-bsc-plan/index.ts

@@ -1,65 +1,64 @@
-export { sewerBscPlanKeys } from "./api/queries";
-export {
-  useDeleteSewerBscPlan,
-  useSaveApplySewerBscPlan,
-  useSaveSewerBscPlan,
-  useSewerBscPlan,
-  useSewerBscPlanDetails,
-  useSewerBscPlanPage,
-  useSubmitReqSupplementSewerBscPlan,
-  useSubmitSupplementSewerBscPlan,
-  useTechReviewSewerBscPlan,
-  useUpdateSewerBscPlan,
-} from "./api/queries";
-export { sewerBscPlanRvwOpnnService } from "./api/sewer-bsc-plan-rvw-opnn-service";
-export { sewerBscPlanService } from "./api/sewer-bsc-plan-service";
-export type {
-  CklstResultItem,
-  EsntlAtchFileItem,
-  SewerBscPlanApplySaveRequestDto,
-  SewerBscPlanBizCstItem,
-  SewerBscPlanDtlSaveRequestDto,
-  SewerBscPlanFnrsCstItem,
-  SewerBscPlanOtlnItem,
-  SewerBscPlanRvwOpnnItem,
-  SewerBscPlanSaveRequestDto,
-  SewerBscPlanSplmntDmndItem,
-  SewerBscPlanTmplntDtlItem,
-  SewerBscPlanTmplntItem,
-  SewerBscPlanTmplntTmprStrgItem,
-} from "./model/sewer-bsc-plan-apply-payload-schema";
-export {
-  sewerBscPlanApplySaveSchema,
-  sewerBscPlanBizCstItemSchema,
-  sewerBscPlanCklstResultItemSchema,
-  sewerBscPlanDtlSaveSchema,
-  sewerBscPlanEsntlAtchFileItemSchema,
-  sewerBscPlanFnrsCstItemSchema,
-  sewerBscPlanOtlnItemSchema,
-  sewerBscPlanRvwOpnnItemSchema,
-  sewerBscPlanSaveSchema,
-  sewerBscPlanSplmntDmndItemSchema,
-  sewerBscPlanTmplntDtlItemSchema,
-  sewerBscPlanTmplntItemSchema,
-  sewerBscPlanTmplntTmprStrgItemSchema,
-} from "./model/sewer-bsc-plan-apply-payload-schema";
-export type {
-  AtflMngClientResponseDto,
-  CklstRvwRsltTreeDto,
-  EsntlAtchFileMngTreeResponseDto,
-  SewerBscPlanApplySaveResponseDto,
-  SewerBscPlanBizCstResponseDto,
-  SewerBscPlanDetResponseDto,
-  SewerBscPlanDtlResponseDto,
-  SewerBscPlanFnrsCstResponseDto,
-  SewerBscPlanOtlnResponseDto,
-  SewerBscPlanResponseDto,
-  SewerBscPlanRvwOpnnResponseDto,
-  SewerBscPlanSearchRequestDto,
-  SewerBscPlanService,
-  SewerBscPlanSplmntDmndResponseDto,
-  SewerBscPlanTmplntDtlResponseDto,
-  SewerBscPlanTmplntResponseDto,
-  SewerBscPlanTmplntTmprStrgResponseDto,
-  SewerBscPlanUpdateRequestDto,
-} from "./model/sewer-bsc-plan-interface";
+export { sewerBscPlanKeys } from "./api/queries";
+export {
+  useDeleteSewerBscPlan,
+  useSaveApplySewerBscPlan,
+  useSaveSewerBscPlan,
+  useSewerBscPlan,
+  useSewerBscPlanDetails,
+  useSewerBscPlanPage,
+  useSubmitReqSupplementSewerBscPlan,
+  useSubmitSupplementSewerBscPlan,
+  useTechReviewSewerBscPlan,
+  useUpdateSewerBscPlan,
+} from "./api/queries";
+export { sewerBscPlanService } from "./api/sewer-bsc-plan-service";
+export type {
+  CklstResultItem,
+  EsntlAtchFileItem,
+  SewerBscPlanApplySaveRequestDto,
+  SewerBscPlanBizCstItem,
+  SewerBscPlanDtlSaveRequestDto,
+  SewerBscPlanFnrsCstItem,
+  SewerBscPlanOtlnItem,
+  SewerBscPlanRvwOpnnItem,
+  SewerBscPlanSaveRequestDto,
+  SewerBscPlanSplmntDmndItem,
+  SewerBscPlanTmplntDtlItem,
+  SewerBscPlanTmplntItem,
+  SewerBscPlanTmplntTmprStrgItem,
+} from "./model/sewer-bsc-plan-apply-payload-schema";
+export {
+  sewerBscPlanApplySaveSchema,
+  sewerBscPlanBizCstItemSchema,
+  sewerBscPlanCklstResultItemSchema,
+  sewerBscPlanDtlSaveSchema,
+  sewerBscPlanEsntlAtchFileItemSchema,
+  sewerBscPlanFnrsCstItemSchema,
+  sewerBscPlanOtlnItemSchema,
+  sewerBscPlanRvwOpnnItemSchema,
+  sewerBscPlanSaveSchema,
+  sewerBscPlanSplmntDmndItemSchema,
+  sewerBscPlanTmplntDtlItemSchema,
+  sewerBscPlanTmplntItemSchema,
+  sewerBscPlanTmplntTmprStrgItemSchema,
+} from "./model/sewer-bsc-plan-apply-payload-schema";
+export type {
+  AtflMngClientResponseDto,
+  CklstRvwRsltTreeDto,
+  EsntlAtchFileMngTreeResponseDto,
+  SewerBscPlanApplySaveResponseDto,
+  SewerBscPlanBizCstResponseDto,
+  SewerBscPlanDetResponseDto,
+  SewerBscPlanDtlResponseDto,
+  SewerBscPlanFnrsCstResponseDto,
+  SewerBscPlanOtlnResponseDto,
+  SewerBscPlanResponseDto,
+  SewerBscPlanRvwOpnnResponseDto,
+  SewerBscPlanSearchRequestDto,
+  SewerBscPlanService,
+  SewerBscPlanSplmntDmndResponseDto,
+  SewerBscPlanTmplntDtlResponseDto,
+  SewerBscPlanTmplntResponseDto,
+  SewerBscPlanTmplntTmprStrgResponseDto,
+  SewerBscPlanUpdateRequestDto,
+} from "./model/sewer-bsc-plan-interface";

apps/as/src/pages/approval-line-management/ui/aprvr-picker-dialog.tsx

@@ -73,7 +73,7 @@ function AprvrPickerDialog({
               배치된 검토인력이 없습니다.
             </p>
           ) : (
-            <Table caption="검토인력 선택 목록으로 성명, 부서, 직위, 직급, 선택 정보 제공" className="w-full">
+            <Table className="w-full">
               <colgroup>
                 <col width="25%" />
                 <col width="25%" />

apps/as/src/pages/approval-line-management/ui/elapr-apln-grid.tsx

@@ -185,7 +185,7 @@ function ElaprAplnGrid({ elaprTmpltId }: ElaprAplnGridProps) {
         </p>
       ) : (
         <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-          <Table caption="결재선 관리 목록으로 결재순서, 결재구분, 결재자 ID, 결재자, 등록일시, 관리 정보 제공" className="w-full">
+          <Table className="w-full">
             <colgroup>
               <col width="5%" />
               <col width="10%" />

apps/as/src/pages/approval-line-management/ui/elapr-tmplt-list.tsx

@@ -90,7 +90,6 @@ function ElaprTmpltList({ selectedTmpltId, onSelectTmplt }: ElaprTmpltListProps)
       getCoreRowModel: getCoreRowModel(),
     },
     dataTableOptions: {
-      caption: "전자결재선 관리 목록으로 결재서식명, 문서구분, 등록일시, 관리 정보 제공",
       onRowClick: (row) => {
         setRowSelection({ [row.elaprTmpltId]: true });
         onSelectTmplt(row);

apps/as/src/pages/checklist-management/ui/cklst-artcl-form-dialog.tsx

@@ -84,9 +84,9 @@ function CklstArtclFormDialog({
             />
           </div>
           <div className="space-y-2">
-            <Label htmlFor="cklstArtclUseYn">사용여부</Label>
+            <Label>사용여부</Label>
             <Select value={useYn} onValueChange={(v) => setValue("useYn", v as "Y" | "N")}>
-              <SelectTrigger id="cklstArtclUseYn" className="w-full">
+              <SelectTrigger className="w-full">
                 <SelectValue placeholder="사용여부" />
               </SelectTrigger>
               <SelectContent>

apps/as/src/pages/checklist-management/ui/cklst-artcl-list.tsx

@@ -67,12 +67,7 @@ function CklstArtclList({ cklstSn }: CklstArtclListProps) {
       </div>
     ),
     Empty: <NoData />,
-    Success: () => (
-      <DataTable
-        table={table}
-        caption="점검항목 관리 목록으로 점검항목코드, 점검항목명, 사용여부, 등록일시, 관리 정보 제공"
-      />
-    ),
+    Success: () => <DataTable table={table} />,
   });
 
   const handleFormSubmit = async (values: CklstArtclFormValues) => {

apps/as/src/pages/checklist-management/ui/cklst-mng-form-dialog.tsx

@@ -100,9 +100,8 @@ function CklstMngFormDialog({
             />
           </div>
           <div className="space-y-2">
-            <Label htmlFor="cklstDocSeComCd">문서구분</Label>
+            <Label>문서구분</Label>
             <CodeSelect
-              id="cklstDocSeComCd"
               upCd="ASDOCSE"
               value={docSeComCd}
               onValueChange={(v) => setValue("docSeComCd", v)}
@@ -111,9 +110,8 @@ function CklstMngFormDialog({
             />
           </div>
           <div className="space-y-2">
-            <Label htmlFor="cklstTaskSeComCd">업무구분</Label>
+            <Label>업무구분</Label>
             <CodeSelect
-              id="cklstTaskSeComCd"
               upCd={docSeComCd || "ASDOCSE"}
               value={watch("taskSeComCd")}
               onValueChange={(v) => setValue("taskSeComCd", v)}
@@ -123,9 +121,9 @@ function CklstMngFormDialog({
             />
           </div>
           <div className="space-y-2">
-            <Label htmlFor="cklstUseYn">사용여부</Label>
+            <Label>사용여부</Label>
             <Select value={useYn} onValueChange={(v) => setValue("useYn", v as "Y" | "N")}>
-              <SelectTrigger id="cklstUseYn" className="w-full">
+              <SelectTrigger className="w-full">
                 <SelectValue placeholder="사용여부" />
               </SelectTrigger>
               <SelectContent>

apps/as/src/pages/checklist-management/ui/cklst-mng-list.tsx

@@ -83,7 +83,6 @@ function CklstMngList({ selectedCklstSn, onSelectCklst }: CklstMngListProps) {
       getCoreRowModel: getCoreRowModel(),
     },
     dataTableOptions: {
-      caption: "점검표 관리 목록으로 점검표일련번호, 점검표명, 문서구분, 업무구분, 사용여부, 등록일시, 관리 정보 제공",
       onRowClick: (row) => {
         setRowSelection({ [String(row.cklstSn)]: true });
         onSelectCklst(row);

apps/as/src/pages/checklist-management/ui/cklst-preview-dialog.tsx

@@ -44,78 +44,65 @@ function CklstPreviewDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="flex max-h-[90vh] max-w-[64rem] flex-col">
+      <DialogContent className="max-w-[64rem]">
         <DialogHeader>
           <DialogTitle>체크리스트 미리보기 — {cklstNm}</DialogTitle>
         </DialogHeader>
         {displayRows.length === 0 ? (
           <p className="py-6 text-center text-muted-foreground">표시할 항목이 없습니다.</p>
         ) : (
-          // 항목이 많아 창 높이를 넘으면 표 영역만 스크롤 (초점을 받아 키보드로도 스크롤 가능)
-          <div
-            tabIndex={0}
-            role="region"
-            aria-label="체크리스트 미리보기 목록"
-            className="min-h-0 flex-1 overflow-y-auto rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
-          >
-            <Table
-              caption={`체크리스트 미리보기 ${cklstNm} 목록으로 점검항목, 주요 검토내용, 검토 여부 정보 제공`}
-            >
-              <colgroup>
-                <col width="25%" />
-                <col width="50%" />
-                <col width="25%" />
-              </colgroup>
-              <TableHeader>
-                <TableRow>
-                  <TableHead align="left">점검항목</TableHead>
-                  <TableHead align="left">주요 검토내용</TableHead>
-                  <TableHead>검토 여부</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {displayRows.map(({ row, depth }) => {
-                  const branchPrefix = formatTreeBranchPrefix(depth);
-                  const showRadios = row.bchckUseYn !== "N";
+          <Table>
+            <colgroup>
+              <col width="25%" />
+              <col width="50%" />
+              <col width="25%" />
+            </colgroup>
+            <TableHeader>
+              <TableRow>
+                <TableHead align="left">점검항목</TableHead>
+                <TableHead align="left">주요 검토내용</TableHead>
+                <TableHead>검토 여부</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {displayRows.map(({ row, depth }) => {
+                const branchPrefix = formatTreeBranchPrefix(depth);
+                const showRadios = row.bchckUseYn !== "N";
 
-                  if (row.useYn === "N") return null;
+                if (row.useYn === "N") return null;
 
-                  return (
-                    <TableRow key={row.rowKey}>
-                      <TableCell align="left">
-                        <span className="inline-flex items-center gap-1">
-                          {branchPrefix ? (
-                            <span className="font-mono text-muted">{branchPrefix}</span>
-                          ) : null}
-                          <span>{getArtclLabel(row.cklstArtclSn)}</span>
-                        </span>
-                      </TableCell>
-                      <TableCell>{row.rvwCn ?? "—"}</TableCell>
-                      <TableCell align="center">
-                        {showRadios ? (
-                          <RadioGroup
-                            aria-label="검토 여부"
-                            className="flex items-center justify-center"
-                          >
-                            <div className="flex items-center gap-1">
-                              <RadioGroupItem value="Y" id={`${row.rowKey}-preview-y`} />
-                              <Label htmlFor={`${row.rowKey}-preview-y`}>예</Label>
-                            </div>
-                            <div className="flex items-center gap-1">
-                              <RadioGroupItem value="N" id={`${row.rowKey}-preview-n`} />
-                              <Label htmlFor={`${row.rowKey}-preview-n`}>아니오</Label>
-                            </div>
-                          </RadioGroup>
-                        ) : (
-                          "—"
-                        )}
-                      </TableCell>
-                    </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          </div>
+                return (
+                  <TableRow key={row.rowKey}>
+                    <TableCell align="left">
+                      <span className="inline-flex items-center gap-1">
+                        {branchPrefix ? (
+                          <span className="font-mono text-muted">{branchPrefix}</span>
+                        ) : null}
+                        <span>{getArtclLabel(row.cklstArtclSn)}</span>
+                      </span>
+                    </TableCell>
+                    <TableCell>{row.rvwCn ?? "—"}</TableCell>
+                    <TableCell align="center">
+                      {showRadios ? (
+                        <RadioGroup className="flex items-center justify-center">
+                          <div className="flex items-center gap-1">
+                            <RadioGroupItem value="Y" id={`${row.rowKey}-preview-y`} />
+                            <Label htmlFor={`${row.rowKey}-preview-y`}>예</Label>
+                          </div>
+                          <div className="flex items-center gap-1">
+                            <RadioGroupItem value="N" id={`${row.rowKey}-preview-n`} />
+                            <Label htmlFor={`${row.rowKey}-preview-n`}>아니오</Label>
+                          </div>
+                        </RadioGroup>
+                      ) : (
+                        "—"
+                      )}
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
         )}
       </DialogContent>
     </Dialog>

apps/as/src/pages/checklist-management/ui/cklst-rvw-grid.tsx

@@ -277,7 +277,7 @@ function CklstRvwGrid({ selectedCklst }: CklstRvwGridProps) {
           등록된 항목이 없습니다. [추가]로 1단계 항목을 등록하세요.
         </p>
       ) : (
-        <Table caption="체크리스트 항목 목록으로 점검항목, 주요 검토내용, 사용 여부, 체크 사용, 정렬 순서, 구분, 관리 정보 제공" className="w-full">
+        <Table className="w-full">
           <colgroup>
             <col width="16%" />
             <col width="36%" />
@@ -289,13 +289,13 @@ function CklstRvwGrid({ selectedCklst }: CklstRvwGridProps) {
           </colgroup>
           <TableHeader>
             <TableRow>
-              <TableHead scope="col">점검항목</TableHead>
-              <TableHead scope="col">주요 검토내용</TableHead>
-              <TableHead scope="col">사용 여부</TableHead>
-              <TableHead scope="col">체크 사용</TableHead>
-              <TableHead scope="col">정렬 순서</TableHead>
-              <TableHead scope="col">구분</TableHead>
-              <TableHead scope="col">관리</TableHead>
+              <TableHead>점검항목</TableHead>
+              <TableHead>주요 검토내용</TableHead>
+              <TableHead>사용 여부</TableHead>
+              <TableHead>체크 사용</TableHead>
+              <TableHead>정렬 순서</TableHead>
+              <TableHead>구분</TableHead>
+              <TableHead>관리</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>

apps/as/src/pages/checklist-management/ui/cklst-rvw-row.tsx

@@ -55,11 +55,7 @@ function CklstRvwRowComponent({
             onValueChange={(v) => onChange({ cklstArtclSn: Number(v), isDirty: true })}
             disabled={!row.isNew}
           >
-            {/* 비활성(기존 항목) 상태에서도 텍스트 명도 대비 4.5:1 이상 유지 */}
-            <SelectTrigger
-              title="점검항목 선택"
-              className="w-full flex-1 disabled:opacity-100"
-            >
+            <SelectTrigger className="w-full flex-1">
               <SelectValue placeholder="점검항목 선택" />
             </SelectTrigger>
             <SelectContent>
@@ -77,14 +73,12 @@ function CklstRvwRowComponent({
           value={row.rvwCn ?? ""}
           onChange={(e) => onChange({ rvwCn: e.target.value, isDirty: true })}
           placeholder="주요 검토내용"
-          title="주요 검토내용"
         />
       </TableCell>
       <TableCell align="center">
         <RadioGroup
           value={row.useYn ?? "Y"}
           onValueChange={(v) => onChange({ useYn: v as "Y" | "N", isDirty: true })}
-          aria-label="사용 여부"
           className="flex justify-center gap-4"
         >
           <div className="flex items-center gap-2">
@@ -101,7 +95,6 @@ function CklstRvwRowComponent({
         <RadioGroup
           value={row.bchckUseYn ?? "Y"}
           onValueChange={(v) => onChange({ bchckUseYn: v as "Y" | "N", isDirty: true })}
-          aria-label="체크 사용"
           className="flex justify-center gap-4"
         >
           <div className="flex items-center gap-2">
@@ -118,7 +111,6 @@ function CklstRvwRowComponent({
         <Input
           type="number"
           min={0}
-          title="정렬 순서"
           value={row.sortSeq ?? ""}
           onChange={(e) =>
             onChange({

apps/as/src/pages/code-management/ui/acntg-code-tab-panel.tsx

@@ -103,7 +103,7 @@ function AcntgCodeTabPanel() {
         </p>
       ) : (
         <div className="max-h-[60rem] overflow-y-auto px-4 pb-4 pt-1">
-          <Table caption="회계코드 목록으로 코드, 코드명, 설명, 사용 여부, 정렬순서, 구분, 관리 정보 제공" className="w-full">
+          <Table className="w-full">
             <colgroup>
               <col width="14%" />
               <col width="16%" />
@@ -115,13 +115,13 @@ function AcntgCodeTabPanel() {
             </colgroup>
             <TableHeader>
               <TableRow>
-                <TableHead scope="col">코드</TableHead>
-                <TableHead scope="col">코드명</TableHead>
-                <TableHead scope="col">설명</TableHead>
-                <TableHead scope="col">사용 여부</TableHead>
-                <TableHead scope="col">정렬순서</TableHead>
-                <TableHead scope="col">구분</TableHead>
-                <TableHead scope="col">관리</TableHead>
+                <TableHead>코드</TableHead>
+                <TableHead>코드명</TableHead>
+                <TableHead>설명</TableHead>
+                <TableHead>사용 여부</TableHead>
+                <TableHead>정렬순서</TableHead>
+                <TableHead>구분</TableHead>
+                <TableHead>관리</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>

apps/as/src/pages/code-management/ui/acntg-se-row.tsx

@@ -40,10 +40,9 @@ function AcntgSeRowComponent({ row, depth, onChange, onAddChild, onDelete }: Acn
             value={row.acntgSeCd}
             onChange={(e) => onChange({ acntgSeCd: e.target.value })}
             placeholder="코드"
-            title="코드"
             maxLength={10}
             disabled={!row.isNew}
-            className="flex-1 disabled:opacity-100"
+            className="flex-1"
           />
         </div>
       </TableCell>
@@ -52,7 +51,6 @@ function AcntgSeRowComponent({ row, depth, onChange, onAddChild, onDelete }: Acn
           value={row.acntgSeCdNm ?? ""}
           onChange={(e) => onChange({ acntgSeCdNm: e.target.value })}
           placeholder="코드명"
-          title="코드명"
           maxLength={100}
         />
       </TableCell>
@@ -61,7 +59,6 @@ function AcntgSeRowComponent({ row, depth, onChange, onAddChild, onDelete }: Acn
           value={row.expln ?? ""}
           onChange={(e) => onChange({ expln: e.target.value })}
           placeholder="설명"
-          title="설명"
           maxLength={1000}
         />
       </TableCell>
@@ -69,7 +66,6 @@ function AcntgSeRowComponent({ row, depth, onChange, onAddChild, onDelete }: Acn
         <RadioGroup
           value={row.useYn === "N" ? "N" : "Y"}
           onValueChange={(v) => onChange({ useYn: v })}
-          aria-label="사용 여부"
           className="flex justify-center gap-4"
         >
           <div className="flex items-center gap-2">
@@ -86,7 +82,6 @@ function AcntgSeRowComponent({ row, depth, onChange, onAddChild, onDelete }: Acn
         <Input
           type="number"
           min={0}
-          title="정렬순서"
           value={row.sortSeq ?? ""}
           onChange={(e) =>
             onChange({ sortSeq: e.target.value ? Number(e.target.value) : undefined })

apps/as/src/pages/code-management/ui/cnstp-code-tab-panel.tsx

@@ -103,7 +103,7 @@ function CnstpCodeTabPanel() {
         </p>
       ) : (
         <div className="max-h-[60rem] overflow-y-auto px-4 pb-4 pt-1">
-          <Table caption="공사코드 목록으로 코드, 코드명, 설명, 숫자 여부, 소숫점 단위, 사용 여부, 정렬순서, 구분, 관리 정보 제공" className="w-full">
+          <Table className="w-full">
             <colgroup>
               <col width="14%" />
               <col width="16%" />
@@ -115,15 +115,15 @@ function CnstpCodeTabPanel() {
             </colgroup>
             <TableHeader>
               <TableRow>
-                <TableHead scope="col">코드</TableHead>
-                <TableHead scope="col">코드명</TableHead>
-                <TableHead scope="col">설명</TableHead>
-                <TableHead scope="col">숫자 여부</TableHead>
-                <TableHead scope="col">소숫점 단위</TableHead>
-                <TableHead scope="col">사용 여부</TableHead>
-                <TableHead scope="col">정렬순서</TableHead>
-                <TableHead scope="col">구분</TableHead>
-                <TableHead scope="col">관리</TableHead>
+                <TableHead>코드</TableHead>
+                <TableHead>코드명</TableHead>
+                <TableHead>설명</TableHead>
+                <TableHead>숫자 여부</TableHead>
+                <TableHead>소숫점 단위</TableHead>
+                <TableHead>사용 여부</TableHead>
+                <TableHead>정렬순서</TableHead>
+                <TableHead>구분</TableHead>
+                <TableHead>관리</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>

apps/as/src/pages/code-management/ui/cnstp-se-row.tsx

@@ -40,10 +40,9 @@ function CnstpSeRowComponent({ row, depth, onChange, onAddChild, onDelete }: Cns
             value={row.cnstpSeCd}
             onChange={(e) => onChange({ cnstpSeCd: e.target.value })}
             placeholder="코드"
-            title="코드"
             maxLength={10}
             disabled={!row.isNew}
-            className="flex-1 disabled:opacity-100"
+            className="flex-1"
           />
         </div>
       </TableCell>
@@ -52,7 +51,6 @@ function CnstpSeRowComponent({ row, depth, onChange, onAddChild, onDelete }: Cns
           value={row.cnstpSeCdNm ?? ""}
           onChange={(e) => onChange({ cnstpSeCdNm: e.target.value })}
           placeholder="코드명"
-          title="코드명"
           maxLength={100}
         />
       </TableCell>
@@ -61,7 +59,6 @@ function CnstpSeRowComponent({ row, depth, onChange, onAddChild, onDelete }: Cns
           value={row.expln ?? ""}
           onChange={(e) => onChange({ expln: e.target.value })}
           placeholder="설명"
-          title="설명"
           maxLength={1000}
         />
       </TableCell>
@@ -69,16 +66,15 @@ function CnstpSeRowComponent({ row, depth, onChange, onAddChild, onDelete }: Cns
         <RadioGroup
           value={row.numYn === "N" ? "N" : "Y"}
           onValueChange={(v) => onChange({ numYn: v })}
-          aria-label="숫자 여부"
           className="flex justify-center gap-4"
         >
           <div className="flex items-center gap-2">
             <RadioGroupItem value="Y" id={`${row.rowKey}-num-y`} />
-            <Label htmlFor={`${row.rowKey}-num-y`}>예</Label>
+            <Label htmlFor={`${row.rowKey}-use-y`}>예</Label>
           </div>
           <div className="flex items-center gap-2">
             <RadioGroupItem value="N" id={`${row.rowKey}-num-n`} />
-            <Label htmlFor={`${row.rowKey}-num-n`}>아니오</Label>
+            <Label htmlFor={`${row.rowKey}-use-n`}>아니오</Label>
           </div>
         </RadioGroup>
       </TableCell>
@@ -86,7 +82,6 @@ function CnstpSeRowComponent({ row, depth, onChange, onAddChild, onDelete }: Cns
         <Input
           type="number"
           min={0}
-          title="소숫점 단위"
           value={row.dcptUnitCnt ?? ""}
           onChange={(e) =>
             onChange({ dcptUnitCnt: e.target.value ? Number(e.target.value) : undefined })
@@ -98,7 +93,6 @@ function CnstpSeRowComponent({ row, depth, onChange, onAddChild, onDelete }: Cns
         <RadioGroup
           value={row.useYn === "N" ? "N" : "Y"}
           onValueChange={(v) => onChange({ useYn: v })}
-          aria-label="사용 여부"
           className="flex justify-center gap-4"
         >
           <div className="flex items-center gap-2">
@@ -115,7 +109,6 @@ function CnstpSeRowComponent({ row, depth, onChange, onAddChild, onDelete }: Cns
         <Input
           type="number"
           min={0}
-          title="정렬순서"
           value={row.sortSeq ?? ""}
           onChange={(e) =>
             onChange({ sortSeq: e.target.value ? Number(e.target.value) : undefined })

apps/as/src/pages/code-management/ui/fnrs-shar-code-tab-panel.tsx

@@ -103,7 +103,7 @@ function FnrsSharCodeTabPanel() {
         </p>
       ) : (
         <div className="max-h-[60rem] overflow-y-auto px-4 pb-4 pt-1">
-          <Table caption="재원분담구분코드 목록으로 코드, 코드명, 설명, 사용 여부, 정렬순서, 구분, 관리 정보 제공" className="w-full">
+          <Table className="w-full">
             <colgroup>
               <col width="14%" />
               <col width="16%" />
@@ -115,13 +115,13 @@ function FnrsSharCodeTabPanel() {
             </colgroup>
             <TableHeader>
               <TableRow>
-                <TableHead scope="col">코드</TableHead>
-                <TableHead scope="col">코드명</TableHead>
-                <TableHead scope="col">설명</TableHead>
-                <TableHead scope="col">사용 여부</TableHead>
-                <TableHead scope="col">정렬순서</TableHead>
-                <TableHead scope="col">구분</TableHead>
-                <TableHead scope="col">관리</TableHead>
+                <TableHead>코드</TableHead>
+                <TableHead>코드명</TableHead>
+                <TableHead>설명</TableHead>
+                <TableHead>사용 여부</TableHead>
+                <TableHead>정렬순서</TableHead>
+                <TableHead>구분</TableHead>
+                <TableHead>관리</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>

apps/as/src/pages/code-management/ui/fnrs-shar-se-row.tsx

@@ -40,10 +40,9 @@ function FnrsSharSeRowComponent({ row, depth, onChange, onAddChild, onDelete }:
             value={row.fnrsSharSeCd}
             onChange={(e) => onChange({ fnrsSharSeCd: e.target.value })}
             placeholder="코드"
-            title="코드"
             maxLength={10}
             disabled={!row.isNew}
-            className="flex-1 disabled:opacity-100"
+            className="flex-1"
           />
         </div>
       </TableCell>
@@ -52,7 +51,6 @@ function FnrsSharSeRowComponent({ row, depth, onChange, onAddChild, onDelete }:
           value={row.fnrsSharSeCdNm ?? ""}
           onChange={(e) => onChange({ fnrsSharSeCdNm: e.target.value })}
           placeholder="코드명"
-          title="코드명"
           maxLength={100}
         />
       </TableCell>
@@ -61,7 +59,6 @@ function FnrsSharSeRowComponent({ row, depth, onChange, onAddChild, onDelete }:
           value={row.expln ?? ""}
           onChange={(e) => onChange({ expln: e.target.value })}
           placeholder="설명"
-          title="설명"
           maxLength={1000}
         />
       </TableCell>
@@ -69,7 +66,6 @@ function FnrsSharSeRowComponent({ row, depth, onChange, onAddChild, onDelete }:
         <RadioGroup
           value={row.useYn === "N" ? "N" : "Y"}
           onValueChange={(v) => onChange({ useYn: v })}
-          aria-label="사용 여부"
           className="flex justify-center gap-4"
         >
           <div className="flex items-center gap-2">
@@ -86,7 +82,6 @@ function FnrsSharSeRowComponent({ row, depth, onChange, onAddChild, onDelete }:
         <Input
           type="number"
           min={0}
-          title="정렬순서"
           value={row.sortSeq ?? ""}
           onChange={(e) =>
             onChange({ sortSeq: e.target.value ? Number(e.target.value) : undefined })

apps/as/src/pages/dashboard/lib/national-as-map.module.css

@@ -56,12 +56,14 @@
   fill: rgba(0, 150, 255, 0.2) !important;
   stroke: #0066cc;
   stroke-width: 1;
+  vector-effect: non-scaling-stroke;
 }
 
 .svgContainer :global(svg) :global(.cls-1) {
   fill: rgba(0, 150, 255, 0.2) !important;
   stroke: #0066cc;
   stroke-width: 1;
+  vector-effect: non-scaling-stroke;
 }
 
 .svgContainer :global(svg) :global(.basin) {
@@ -91,6 +93,7 @@
   fill: rgba(0, 209, 209, 0.5);
   stroke: #399ac3;
   stroke-width: 1.3;
+  vector-effect: non-scaling-stroke;
 }
 
 .popup {
@@ -152,38 +155,8 @@
 }
 
 .basinLabel.active {
-  background: #0056b3;
+  background: #006bf8;
   color: #fff;
   border-color: #96c3ff;
   box-shadow: 0 4px 12px rgba(0, 107, 248, 0.3);
 }
-
-/* 블랙 스킨 (onasys 디자인 design/c 색상 기준) */
-:global([data-theme="black"]) .basinLabel {
-  background: #404244ee;
-  border-color: #5e6165;
-  color: #f1f1f1;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
-}
-
-:global([data-theme="black"]) .basinLabel.active {
-  background: #0056b3;
-  border-color: #96c3ff;
-  color: #fff;
-}
-
-:global([data-theme="black"]) .popup {
-  background: #404244;
-  border-color: #4e5154;
-  color: #f1f1f1;
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
-}
-
-:global([data-theme="black"]) .popup > div {
-  border-color: #4e5154;
-}
-
-:global([data-theme="black"]) .popup > div:first-child {
-  background: #4e5154;
-  color: #fff;
-}

apps/as/src/pages/dashboard/lib/use-national-as-map.ts

@@ -247,11 +247,6 @@ export function useNationalAsMap(basinDocPrgrsList: BasinDocPrgrsResponseDto[] |
         svg = svgLayerRef.current.querySelector("svg");
         if (!svg) throw new Error("SVG element not found in loaded content");
 
-        // 확대·축소해도 선 두께 유지. CSS 의 vector-effect 는 W3C CSS 검사 오류로 처리되므로 SVG 속성으로 지정
-        svg.querySelectorAll("path, polygon, polyline").forEach((shape) => {
-          shape.setAttribute("vector-effect", "non-scaling-stroke");
-        });
-
         applyViewBox(svg, stageRef.current);
         groups = collectBasinGroups(svg);
         labels = labelsLayerRef.current ? createLabels(labelsLayerRef.current, groups) : [];

apps/as/src/pages/dashboard/ui/dashboard-noti-list.tsx

@@ -40,18 +40,18 @@ export function DashboardNotiList({
   );
 
   return (
-    <section className="card card-border m-0">
+    <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">
           알림이력
           {dataUpdatedAt > 0 ? (
-            <span className="pl-2 text-lg font-medium text-label">
+            <span className="pl-2 text-lg font-medium text-muted-foreground">
               (업데이트 일시: {dayjs(dataUpdatedAt).format("YYYY-MM-DD HH:mm")})
             </span>
           ) : null}
         </h3>
         <div className="flex items-center gap-4">
-          <Button type="button" size="sm" color="white" className="!text-[#0056B3]" onClick={() => router.push("/nti-hstry")}>
+          <Button type="button" size="sm" color="white" onClick={() => router.push("/nti-hstry")}>
             전체보기
           </Button>
         </div>
@@ -60,7 +60,7 @@ export function DashboardNotiList({
       <div className="flex flex-col gap-4 p-2">
         <div className="flex flex-wrap gap-2 pt-2">
           {NOTI_STAT_CHIPS.map((chip) => (
-            <Badge key={chip.field} color={chip.color} className={chip.className}>
+            <Badge key={chip.field} color={chip.color}>
               {chip.label} {isPending ? "-" : (notiStats?.[chip.field] ?? 0)}건
             </Badge>
           ))}
@@ -75,7 +75,7 @@ export function DashboardNotiList({
         ) : null}
 
         {isError ? (
-          <p className="flex min-h-[12rem] items-center justify-center text-label">
+          <p className="flex min-h-[12rem] items-center justify-center text-muted-foreground">
             알림이력을 불러오지 못했습니다.
           </p>
         ) : null}
@@ -110,11 +110,11 @@ interface DashboardNotiRowProps {
 function DashboardNotiRow({ row, isActionPending, onAction }: DashboardNotiRowProps) {
   return (
     <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-4 border-b px-2 py-4 last:border-b-0">
-      <span className="text-lg text-label">
+      <span className="text-lg text-muted-foreground">
         {row.regDt ? dayjs(row.regDt).format("YYYY-MM-DD") : "-"}
       </span>
       <p className="min-w-0 line-clamp-2 text-xl sm:line-clamp-1">{row.notiTtl}</p>
-      <Button type="button" size="sm" color="white" className="!text-[#0056B3]" disabled={isActionPending} onClick={onAction}>
+      <Button type="button" size="sm" color="white" disabled={isActionPending} onClick={onAction}>
         처리하기
       </Button>
     </div>
@@ -137,7 +137,7 @@ function resolveNotiUrl(row: NotiAsUserResponseDto) {
 }
 
 const NOTI_STAT_CHIPS = [
-  { field: "todayCount", label: "오늘", color: "green", className: "!bg-[#188038]" },
-  { field: "delayCount", label: "지연", color: "orange", className: "!bg-[#C5221F]" },
-  { field: "pendingCount", label: "완료대기", color: "gray", className: "!bg-[#5F6368]" },
+  { field: "todayCount", label: "오늘", color: "green" },
+  { field: "delayCount", label: "지연", color: "orange" },
+  { field: "pendingCount", label: "완료대기", color: "gray" },
 ] as const;

apps/as/src/pages/dashboard/ui/dashboard-notice-table.tsx

@@ -39,17 +39,16 @@ export function DashboardNoticeTable() {
       getCoreRowModel: getCoreRowModel(),
     },
     dataTableOptions: {
-      caption: "공지사항 목록으로 번호, 제목, 작성자, 작성일, 조회수 정보 제공",
       variant: "line",
       onRowClick: handleRowClick,
     },
   });
 
   return (
-    <section className="card card-border m-0">
+    <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" className="!text-[#0056B3]" onClick={handleMoreClick}>
+        <Button type="button" size="sm" color="white" onClick={handleMoreClick}>
           더보기
         </Button>
       </div>

apps/as/src/pages/dashboard/ui/dashboard-page.tsx

@@ -11,8 +11,7 @@ export function DashboardPage() {
   const { data, isPending, isError, dataUpdatedAt } = useGetMainDashboard();
 
   return (
-    // 배경·글자색은 테마 변수를 따름 (배경 --container, 글자 --foreground)
-    <div className="flex min-h-full gap-4 bg-container px-[1.8rem] pb-6 pt-4 text-foreground">
+    <div className="mt-4 flex gap-4 px-[1.8rem] pb-6">
       <div className="hidden flex-[0.5] sm:block">
         <NationalAsMap basinDocPrgrsList={data?.basinDocPrgrsList} />
       </div>

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 m-0 flex min-h-[14rem] items-center justify-center text-label">
+      <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 m-0 block 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>
@@ -90,7 +90,7 @@ function DocPrgrsSttsMetric({
       >
         <Icon className="size-6" />
       </span>
-      <span className="text-xl text-label">{label}</span>
+      <span className="text-xl text-muted-foreground">{label}</span>
       <span className="text-3xl font-semibold tabular-nums">{count}</span>
     </div>
   );
@@ -107,23 +107,22 @@ const STAT_METRICS = [
   {
     field: "reqCnt",
     label: "신청",
-    iconClassName: "bg-[#4285F4]",
-    // 블랙 스킨: 아이콘 색 반투명 배경
-    bgColor: "bg-blue-100 [[data-theme=black]_&]:bg-[rgba(66,133,244,0.18)]",
+    iconClassName: "bg-blue-500",
+    bgColor: "bg-blue-100",
     Icon: FilePlus,
   },
   {
     field: "prgrsCnt",
     label: "진행",
-    iconClassName: "bg-[#34A853]",
-    bgColor: "bg-emerald-100 [[data-theme=black]_&]:bg-[rgba(52,168,83,0.18)]",
+    iconClassName: "bg-emerald-500",
+    bgColor: "bg-emerald-100",
     Icon: RefreshCw,
   },
   {
     field: "cmptnCnt",
     label: "완료",
-    iconClassName: "bg-[#EA4335]",
-    bgColor: "bg-orange-100 [[data-theme=black]_&]:bg-[rgba(234,67,53,0.18)]",
+    iconClassName: "bg-orange-500",
+    bgColor: "bg-orange-100",
     Icon: CircleCheck,
   },
 ] as const;

apps/as/src/pages/dashboard/ui/national-as-map.tsx

@@ -18,7 +18,7 @@ export function NationalAsMap({ basinDocPrgrsList }: NationalAsMapProps) {
   const popupColumnSpan = Math.max(1, popupContent.items.length);
 
   return (
-    <section className="card card-border m-0 flex h-full min-h-[40rem] flex-col">
+    <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>

apps/as/src/pages/design-cnstn/model/columns.tsx

@@ -1,183 +1,156 @@
-"use client";
-
-import { Fragment } from "react";
-
-import { createColumnHelper } from "@tanstack/react-table";
-
-import { dayjs } from "@/shared/lib";
-import type { DesignCnstnMngResponseDto } from "@/entities/design-cnstn";
-import { Badge } from "@common/components";
-
-const columnHelper = createColumnHelper<DesignCnstnMngResponseDto>();
-
-const MAIN_STEP_LABELS = {
-  apply: "설계자문 신청",
-  techReview: "기술검토",
-  reply: "검토결과 회신",
-} as const;
-
-export const PROGRESS_STATUS_COLUMNS = [
-  { label: "설계자문 신청 (시군)", sttsComCd: "CT" },
-  { label: "기술검토", sttsComCd: "CS" },
-  { label: "기술검토 회신", sttsComCd: "CP" },
-];
-
-type BadgeState = "completed" | "current" | "pending";
-
-interface ProgressBadge {
-  label: string;
-  state: BadgeState;
-}
-
-function buildProgressBadges(prgrsSttsComCd: string): ProgressBadge[] {
-  if (prgrsSttsComCd === "CV") {
-    return [
-      { label: MAIN_STEP_LABELS.apply, state: "pending" },
-      { label: MAIN_STEP_LABELS.techReview, state: "pending" },
-      { label: MAIN_STEP_LABELS.reply, state: "pending" },
-    ];
-  }
-
-  if (prgrsSttsComCd === "CT" || prgrsSttsComCd === "CS" || prgrsSttsComCd === "SL") {
-    return [
-      { label: MAIN_STEP_LABELS.apply, state: "completed" },
-      { label: MAIN_STEP_LABELS.techReview, state: "current" },
-      { label: MAIN_STEP_LABELS.reply, state: "pending" },
-    ];
-  }
-
-  if (prgrsSttsComCd === "CP") {
-    return [
-      { label: MAIN_STEP_LABELS.apply, state: "completed" },
-      { label: MAIN_STEP_LABELS.techReview, state: "completed" },
-      { label: MAIN_STEP_LABELS.reply, state: "completed" },
-    ];
-  }
-
-  return [
-    { label: MAIN_STEP_LABELS.apply, state: "pending" },
-    { label: MAIN_STEP_LABELS.techReview, state: "pending" },
-    { label: MAIN_STEP_LABELS.reply, state: "pending" },
-  ];
-}
-
-function getProgressStatusBadge(prgrsSttsComCd?: string | null) {
-  if (prgrsSttsComCd === "SL") {
-    return <Badge color="orange">보완요청</Badge>;
-  }
-  return null;
-}
-
-function getBadgeColor(state: BadgeState) {
-  switch (state) {
-    case "completed":
-      return "green";
-    case "current":
-      return "blue";
-    case "pending":
-      return "lightGray";
-  }
-}
-
-function getBadgeStateText(state: BadgeState) {
-  switch (state) {
-    case "completed":
-      return "완료";
-    case "current":
-      return "진행중";
-    case "pending":
-      return "대기";
-  }
-}
-
-/** 단계명을 2줄로 분리: "설치인가 신청" → ["설치인가", "신청"], "기술검토" → ["기술검토", ""] */
-function splitStepLabel(label: string) {
-  const [title = "", ...rest] = label.split(" ");
-  return { title, detail: rest.join(" ") };
-}
-
-function formatOptional(value: string | null | undefined) {
-  return value?.trim() ? value : "-";
-}
-
-interface ProgressStepBadgeProps {
-  prgrsSttsComCd: string;
-}
-
-function ProgressStepBadge({ prgrsSttsComCd }: ProgressStepBadgeProps) {
-  const badges = buildProgressBadges(prgrsSttsComCd);
-
-  return (
-    <div className="flex flex-wrap items-center justify-center">
-      {badges.map((badge, index) => (
-        <Fragment key={`${badge.label}-${index}`}>
-          {index > 0 && <span className="mx-2">&gt;</span>}
-          {/* 1줄: 단계명 / 2줄: 세부단계 + 상태 (예: 설치인가 / 신청완료, 기술검토 / 완료) */}
-          <Badge
-            color={getBadgeColor(badge.state)}
-            className="w-[100px] flex-col justify-center !px-0 py-1 text-center leading-tight"
-          >
-            <span>{splitStepLabel(badge.label).title}</span>
-            <span>
-              {splitStepLabel(badge.label).detail}
-              {getBadgeStateText(badge.state)}
-            </span>
-          </Badge>
-        </Fragment>
-      ))}
-    </div>
-  );
-}
-
-export function createDesignCnstnColumns() {
-  return [
-    columnHelper.accessor("sido", {
-      header: "시도",
-      meta: { align: "center" },
-      cell: ({ getValue }) => formatOptional(getValue()),
-    }),
-    columnHelper.accessor("gugun", {
-      header: "시군구",
-      meta: { align: "center" },
-      cell: ({ getValue }) => formatOptional(getValue()),
-    }),
-    columnHelper.accessor("bizNm", {
-      header: "사업명",
-      meta: { align: "left" },
-      cell: ({ row, getValue }) => (
-        <>
-          {getProgressStatusBadge(row.original.prgrsSttsComCd)} {formatOptional(getValue())}
-        </>
-      ),
-    }),
-    columnHelper.accessor("taskSeCdNm", {
-      header: "업무구분",
-      meta: { align: "center" },
-      cell: ({ row }) => formatOptional(row.original.taskSeCdNm || row.original.taskSeComCd),
-    }),
-    columnHelper.accessor("aplcntNm", {
-      header: "담당자",
-      meta: { align: "center" },
-      cell: ({ getValue }) => formatOptional(getValue()),
-    }),
-    columnHelper.accessor("envoSeCdNm", {
-      header: "해당기관",
-      meta: { align: "center" },
-      cell: ({ getValue }) => formatOptional(getValue()),
-    }),
-    columnHelper.display({
-      id: "progress",
-      header: "진행상황",
-      meta: { align: "center" },
-      cell: ({ row }) => <ProgressStepBadge prgrsSttsComCd={row.original.prgrsSttsComCd || ""} />,
-    }),
-    columnHelper.accessor("regDt", {
-      header: "신청일",
-      meta: { align: "center" },
-      cell: ({ getValue }) => {
-        const value = getValue();
-        return value ? dayjs(value).format("YYYY-MM-DD") : "-";
-      },
-    }),
-  ];
-}
+"use client";
+
+import { Fragment } from "react";
+
+import { createColumnHelper } from "@tanstack/react-table";
+
+import { dayjs } from "@/shared/lib";
+import type { DesignCnstnMngResponseDto } from "@/entities/design-cnstn";
+import { Badge } from "@common/components";
+
+const columnHelper = createColumnHelper<DesignCnstnMngResponseDto>();
+
+const MAIN_STEP_LABELS = {
+  apply: "설계자문 신청",
+  techReview: "기술검토",
+  reply: "검토결과 회신",
+} as const;
+
+export const PROGRESS_STATUS_COLUMNS = [
+  { label: "설계자문 신청 (시군)", sttsComCd: "CT" },
+  { label: "기술검토", sttsComCd: "CS" },
+  { label: "기술검토 회신", sttsComCd: "CP" },
+];
+
+type BadgeState = "completed" | "current" | "pending";
+
+interface ProgressBadge {
+  label: string;
+  state: BadgeState;
+}
+
+function buildProgressBadges(prgrsSttsComCd: string): ProgressBadge[] {
+  if (prgrsSttsComCd === "CV") {
+    return [
+      { label: MAIN_STEP_LABELS.apply, state: "pending" },
+      { label: MAIN_STEP_LABELS.techReview, state: "pending" },
+      { label: MAIN_STEP_LABELS.reply, state: "pending" },
+    ];
+  }
+
+  if (prgrsSttsComCd === "CT" || prgrsSttsComCd === "CS" || prgrsSttsComCd === "SL") {
+    return [
+      { label: MAIN_STEP_LABELS.apply, state: "completed" },
+      { label: MAIN_STEP_LABELS.techReview, state: "current" },
+      { label: MAIN_STEP_LABELS.reply, state: "pending" },
+    ];
+  }
+
+  if (prgrsSttsComCd === "CP") {
+    return [
+      { label: MAIN_STEP_LABELS.apply, state: "completed" },
+      { label: MAIN_STEP_LABELS.techReview, state: "completed" },
+      { label: MAIN_STEP_LABELS.reply, state: "completed" },
+    ];
+  }
+
+  return [
+    { label: MAIN_STEP_LABELS.apply, state: "pending" },
+    { label: MAIN_STEP_LABELS.techReview, state: "pending" },
+    { label: MAIN_STEP_LABELS.reply, state: "pending" },
+  ];
+}
+
+function getProgressStatusBadge(prgrsSttsComCd?: string | null) {
+  if (prgrsSttsComCd === "SL") {
+    return <Badge color="orange">보완요청</Badge>;
+  }
+  return null;
+}
+
+function getBadgeColor(state: BadgeState) {
+  switch (state) {
+    case "completed":
+      return "green";
+    case "current":
+      return "blue";
+    case "pending":
+      return "lightGray";
+  }
+}
+
+function formatOptional(value: string | null | undefined) {
+  return value?.trim() ? value : "-";
+}
+
+interface ProgressStepBadgeProps {
+  prgrsSttsComCd: string;
+}
+
+function ProgressStepBadge({ prgrsSttsComCd }: ProgressStepBadgeProps) {
+  const badges = buildProgressBadges(prgrsSttsComCd);
+
+  return (
+    <div className="flex flex-wrap items-center justify-start">
+      {badges.map((badge, index) => (
+        <Fragment key={`${badge.label}-${index}`}>
+          {index > 0 && <span className="mx-2">&gt;</span>}
+          <Badge color={getBadgeColor(badge.state)}>{badge.label}</Badge>
+        </Fragment>
+      ))}
+    </div>
+  );
+}
+
+export function createDesignCnstnColumns() {
+  return [
+    columnHelper.accessor("sido", {
+      header: "시도",
+      meta: { align: "center" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.accessor("gugun", {
+      header: "시군구",
+      meta: { align: "center" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.accessor("bizNm", {
+      header: "사업명",
+      meta: { align: "left" },
+      cell: ({ row, getValue }) => (
+        <>
+          {getProgressStatusBadge(row.original.prgrsSttsComCd)} {formatOptional(getValue())}
+        </>
+      ),
+    }),
+    columnHelper.accessor("taskSeCdNm", {
+      header: "업무구분",
+      meta: { align: "center" },
+      cell: ({ row }) => formatOptional(row.original.taskSeCdNm || row.original.taskSeComCd),
+    }),
+    columnHelper.accessor("aplcntNm", {
+      header: "담당자",
+      meta: { align: "center" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.accessor("envoSeCdNm", {
+      header: "해당기관",
+      meta: { align: "center" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.display({
+      id: "progress",
+      header: "진행상황",
+      meta: { align: "center" },
+      cell: ({ row }) => <ProgressStepBadge prgrsSttsComCd={row.original.prgrsSttsComCd || ""} />,
+    }),
+    columnHelper.accessor("regDt", {
+      header: "신청일",
+      meta: { align: "center" },
+      cell: ({ getValue }) => {
+        const value = getValue();
+        return value ? dayjs(value).format("YYYY-MM-DD") : "-";
+      },
+    }),
+  ];
+}

apps/as/src/pages/design-cnstn/ui/design-form-page.tsx

@@ -165,11 +165,8 @@ function DesignFormPage({ mode, initialData, createDefaults }: DesignFormPagePro
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit(onSave)} className="mt-6 space-y-4">
         <SectionCollapsibleGroup>
-          <div className="sticky top-[6rem] z-30 flex items-center justify-between bg-container px-4 py-2">
+          <div className="sticky top-[6rem] z-30 bg-container px-4 py-2">
             <SectionCollapsibleToggle />
-            <p className="text-sm text-muted-foreground">
-              <span className="text-red-600">*</span>은 필수입력 항목입니다.
-            </p>
           </div>
           <div className="space-y-4">
             {initialData?.detDto?.designCnstnDocNo && (

apps/as/src/pages/design-cnstn/ui/design-list-page.tsx

@@ -77,8 +77,8 @@ function DesignListPage() {
   };
 
   return (
-    <div className="card card-border !mt-6">
-      <div className="card card-border">
+    <div className="space-y-4 px-[1.8rem] pb-6">
+      <section className="card card-border mx-0 bg-background">
         <form className="flex flex-wrap items-center gap-4 p-2" onSubmit={handleSearch}>
           <div className="flex items-center gap-2">
             <Label htmlFor="sidoComCd" className="whitespace-nowrap">
@@ -145,7 +145,7 @@ function DesignListPage() {
           </div>
           <Button type="submit">조회</Button>
         </form>
-      </div>
+      </section>
 
       <DesignList
         searchParams={searchParams}

apps/as/src/pages/design-cnstn/ui/design-list.tsx

@@ -59,7 +59,6 @@ function DesignList({ searchParams, pagination, onPaginationChange }: DesignList
       manualPagination: true,
     },
     dataTableOptions: {
-      caption: "설계자문 목록으로 시도, 시군구, 사업명, 업무구분, 담당자, 해당기관, 진행상황, 신청일 정보 제공",
       viewPagination: true,
       onRowClick: handleRowClick,
     },
@@ -78,15 +77,15 @@ function DesignList({ searchParams, pagination, onPaginationChange }: DesignList
 
   return (
     <>
-      <div className="card card-border pt-0">
+      <section className="card card-border mx-0 bg-background pb-8 pt-0">
         <div className="card-header flex items-center justify-between">
-          <h3 className="text-2xl font-medium text-label">설계자문 목록</h3>
+          <h3 className="text-2xl font-semibold">설계자문 목록</h3>
           <Button type="button" color="green" onClick={() => setIsTaskSeDialogOpen(true)}>
             신청
           </Button>
         </div>
-        <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
-      </div>
+        {tableComponent}
+      </section>
       <PbadmsTaskApplyDialog
         open={isTaskSeDialogOpen}
         onOpenChange={setIsTaskSeDialogOpen}

apps/as/src/pages/design-cnstn/ui/sections/basic-info-form-section.tsx

@@ -8,7 +8,6 @@ import { SectionCollapsible } from "@/shared/ui";
 import { Field, FieldError, FieldGroup } from "@/shared/ui/field";
 import { findCodeLabel, useCodeList } from "@/entities/code";
 import { type BnsApplyData, BnsPickerDialog } from "@/widgets/bns-picker";
-import { PreviousPlanLookupButton } from "@/widgets/previous-plan-lookup";
 import { Input, Table, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
 
 import type { DesignCnstnRegistFormData } from "../../lib/design-cnstn-regist-schema";
@@ -17,9 +16,9 @@ function BasicInfoFormSection() {
   const { control, watch, setValue } = useFormContext<DesignCnstnRegistFormData>();
   const [isPickerOpen, setIsPickerOpen] = useState(false);
   const taskSeComCd = watch("designCnstnMng.taskSeComCd");
-  const sido = watch("designCnstnMng.sido");
-  const gugun = watch("designCnstnMng.gugun");
-  const localGovLabel = [sido, gugun].filter(Boolean).join(" ");
+  const localGovLabel = [watch("designCnstnMng.sido"), watch("designCnstnMng.gugun")]
+    .filter(Boolean)
+    .join(" ");
   const { data: taskOptions } = useCodeList("CNFM");
 
   function handleBnsSelect(data: BnsApplyData) {
@@ -37,8 +36,7 @@ function BasicInfoFormSection() {
 
   return (
     <SectionCollapsible title="기본 정보">
-      <PreviousPlanLookupButton sidoNm={sido} gugunNm={gugun} />
-      <Table caption="기본 정보 입력으로 사업명, 사업기간, 사업내용, 구분, 신청 지자체 정보 제공" variant="secondary">
+      <Table variant="secondary">
         <colgroup>
           <col width="15%" />
           <col width="35%" />
@@ -47,7 +45,7 @@ function BasicInfoFormSection() {
         </colgroup>
         <TableHeader>
           <TableRow>
-            <TableHead scope="row" className="w-[20rem]" data-required>
+            <TableHead className="w-[20rem]" data-required>
               사업명
             </TableHead>
             <TableCell colSpan={3}>
@@ -75,7 +73,7 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead scope="row" data-required>사업기간</TableHead>
+            <TableHead data-required>사업기간</TableHead>
             <TableCell colSpan={3}>
               <FieldGroup className="flex-row items-center gap-2">
                 <Controller
@@ -119,7 +117,7 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead scope="row" data-required>사업내용</TableHead>
+            <TableHead data-required>사업내용</TableHead>
             <TableCell colSpan={3}>
               <Controller
                 name="designCnstnMng.bizCn"
@@ -139,9 +137,9 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead scope="row" data-required>구분</TableHead>
+            <TableHead data-required>구분</TableHead>
             <TableCell>{taskSeComCdLabel}</TableCell>
-            <TableHead scope="row">신청 지자체</TableHead>
+            <TableHead>신청 지자체</TableHead>
             <TableCell>{localGovLabel}</TableCell>
           </TableRow>
         </TableHeader>

apps/as/src/pages/design-cnstn/ui/sections/basic-info-section.tsx

@@ -2,7 +2,6 @@
 
 import { SectionCollapsible } from "@/shared/ui";
 import type { DesignCnstnMngResponseDto } from "@/entities/design-cnstn";
-import { PreviousPlanLookupButton } from "@/widgets/previous-plan-lookup";
 import { Table, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
 
 interface BasicInfoSectionProps {
@@ -12,8 +11,7 @@ interface BasicInfoSectionProps {
 function BasicInfoSection({ det }: BasicInfoSectionProps) {
   return (
     <SectionCollapsible title="기본 정보">
-      <PreviousPlanLookupButton sidoNm={det.sido} gugunNm={det.gugun} />
-      <Table caption="기본 정보로 사업명, 사업기간, 사업내용, 환경청구분, 구분, 신청지자체 정보 제공" variant="secondary">
+      <Table variant="secondary">
         <colgroup>
           <col width="15%" />
           <col width="35%" />

apps/as/src/pages/design-cnstn/ui/sections/business-scale-section.tsx

@@ -13,7 +13,7 @@ function BusinessScaleSection({ bizSclList }: BusinessScaleSectionProps) {
   return (
     <SectionCollapsible title="사업규모">
       <div className="overflow-x-auto">
-        <Table caption="사업규모 목록으로 구분, 기본계획(A), 예산반영(B), 금회설계시(C), 증감(C-B) 정보 제공" variant="secondary">
+        <Table variant="secondary">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[30rem]">구분</TableHead>
@@ -36,7 +36,7 @@ function BusinessScaleSection({ bizSclList }: BusinessScaleSectionProps) {
 
                 return (
                   <TableRow key={node.cnstpSeCd}>
-                    <TableHead scope="row" className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
+                    <TableHead className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
                       {node.cnstpSeCdNm}
                     </TableHead>
                     <TableCell>

apps/as/src/pages/design-cnstn/ui/sections/contact-info-section.tsx

@@ -11,21 +11,21 @@ interface ContactInfoSectionProps {
 function ContactInfoSection({ det }: ContactInfoSectionProps) {
   return (
     <SectionCollapsible title="담당자 정보">
-      <Table caption="담당자 정보로 신청자(이름, 연락처, 소속, 이메일)과 설계자(이름, 연락처, 소속, 이메일) 정보 제공" variant="secondary">
+      <Table variant="secondary">
         <TableHeader>
           {det.aplcntNm && (
             <>
               <TableRow>
-                <TableHead scope="row" rowSpan={2}>신청자</TableHead>
-                <TableHead scope="row">이름</TableHead>
+                <TableHead rowSpan={2}>신청자</TableHead>
+                <TableHead>이름</TableHead>
                 <TableCell>{det.aplcntNm || "-"}</TableCell>
-                <TableHead scope="row">연락처</TableHead>
+                <TableHead>연락처</TableHead>
                 <TableCell>{det.aplcntMblTelno || "-"}</TableCell>
               </TableRow>
               <TableRow>
-                <TableHead scope="row">소속</TableHead>
+                <TableHead>소속</TableHead>
                 <TableCell>{det.aplcntOgdpNm || "-"}</TableCell>
-                <TableHead scope="row">이메일</TableHead>
+                <TableHead>이메일</TableHead>
                 <TableCell>{det.aplcntEmlAddr || "-"}</TableCell>
               </TableRow>
             </>
@@ -33,16 +33,16 @@ function ContactInfoSection({ det }: ContactInfoSectionProps) {
           {det.dsgnrNm && (
             <>
               <TableRow>
-                <TableHead scope="row" rowSpan={2}>설계자</TableHead>
-                <TableHead scope="row">이름</TableHead>
+                <TableHead rowSpan={2}>설계자</TableHead>
+                <TableHead>이름</TableHead>
                 <TableCell>{det.dsgnrNm || "-"}</TableCell>
-                <TableHead scope="row">연락처</TableHead>
+                <TableHead>연락처</TableHead>
                 <TableCell>{det.dsgnrTelno || "-"}</TableCell>
               </TableRow>
               <TableRow>
-                <TableHead scope="row">소속</TableHead>
+                <TableHead>소속</TableHead>
                 <TableCell>{det.dsgnrOgdpNm || "-"}</TableCell>
-                <TableHead scope="row">이메일</TableHead>
+                <TableHead>이메일</TableHead>
                 <TableCell>{det.dsgnrEmlAddr || "-"}</TableCell>
               </TableRow>
             </>

apps/as/src/pages/design-cnstn/ui/sections/tech-review-opinion-section.tsx

@@ -1,334 +1,338 @@
-"use client";
-
-import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
-
-import { useQueryClient } from "@tanstack/react-query";
-
-import { getDefaultFileKey, useTus, useUserStore } from "@/shared/lib";
-import { TextShimmer } from "@/shared/ui";
-import { SectionCollapsible } from "@/shared/ui";
-import { Field, FieldLabel, FieldSet } from "@/shared/ui/field";
-import { attachService } from "@/entities/attach";
-import {
-  designCnstnKeys,
-  type DesignCnstnRvwOpnnResponseDto,
-  designCnstnRvwOpnnService,
-} from "@/entities/design-cnstn";
-import { RvwOpnnListTable } from "@/widgets/pbadms-sprt";
-import {
-  Button,
-  RadioGroup,
-  RadioGroupItem,
-  Table,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Textarea,
-} from "@common/components";
-
-import type {
-  ReviewOpinionFormData,
-  ReviewOpinionGetFormDataResult,
-} from "../../lib/review-opinion-utils";
-import type { ReviewStepCode } from "../../model/view-types";
-import { REVIEW_STEP_LABELS } from "../../model/view-types";
-
-const RVW_OPNN_FILE_KEY_PREFIX = "rvw-opnn::";
-
-interface TechReviewOpinionSectionProps {
-  rvwList: DesignCnstnRvwOpnnResponseDto[];
-  editableReviewStep?: ReviewStepCode;
-  atrzSeComCdList?: string[];
-  isAtrzLoading?: boolean;
-}
-
-export interface TechReviewOpinionSectionHandle {
-  getFormData: () => ReviewOpinionGetFormDataResult | null;
-  resetForm: () => void;
-}
-
-interface TechReviewOpinionTableProps {
-  items: DesignCnstnRvwOpnnResponseDto[];
-}
-
-interface UploadedOpinionFile {
-  fileName: string;
-  fileKey: string;
-  atflId?: string;
-  atflCd?: string;
-}
-
-const EMPTY_FORM_DATA: ReviewOpinionFormData = {
-  rvwRsltCn: "",
-  rvwRsltAnmlyYn: "",
-  atchFileGroupId: "",
-  opnrSeComCd: "",
-};
-
-function createRvwOpnnUploadKey(file: File) {
-  return `${RVW_OPNN_FILE_KEY_PREFIX}${getDefaultFileKey(file)}`;
-}
-
-function hasFormContent(formData: ReviewOpinionFormData) {
-  return Boolean(formData.rvwRsltCn.trim() || formData.rvwRsltAnmlyYn || formData.atchFileGroupId);
-}
-
-const TechReviewOpinionSection = forwardRef<
-  TechReviewOpinionSectionHandle,
-  TechReviewOpinionSectionProps
->(function TechReviewOpinionSection(
-  { rvwList, editableReviewStep, atrzSeComCdList = [], isAtrzLoading = false },
-  ref,
-) {
-  const canWriteOpinion = !isAtrzLoading && atrzSeComCdList.includes("ATRZ02");
-  const [formData, setFormData] = useState<ReviewOpinionFormData>({
-    ...EMPTY_FORM_DATA,
-    opnrSeComCd: editableReviewStep ?? "",
-  });
-  const [uploadedFile, setUploadedFile] = useState<UploadedOpinionFile | null>(null);
-
-  useEffect(() => {
-    setFormData((prev) => ({
-      ...prev,
-      opnrSeComCd: editableReviewStep ?? "",
-    }));
-  }, [editableReviewStep]);
-
-  const { uploadFileAsync, isUploading, uploads } = useTus({
-    onSuccess: (atflCd, atflId, _file, fileKey) => {
-      if (!atflCd || !atflId) return;
-
-      setFormData((prev) => ({ ...prev, atchFileGroupId: atflCd }));
-      setUploadedFile((prev) => (prev?.fileKey === fileKey ? { ...prev, atflCd, atflId } : prev));
-    },
-    onError: (_error, _file, fileKey) => {
-      setUploadedFile((prev) => (prev?.fileKey === fileKey ? null : prev));
-    },
-  });
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      getFormData: () => {
-        if (!canWriteOpinion || !editableReviewStep || !hasFormContent(formData)) {
-          return null;
-        }
-
-        return {
-          formData: {
-            ...formData,
-            opnrSeComCd: editableReviewStep,
-          },
-          rvwList,
-        };
-      },
-      resetForm: () => {
-        setFormData({
-          ...EMPTY_FORM_DATA,
-          opnrSeComCd: editableReviewStep ?? "",
-        });
-        setUploadedFile(null);
-      },
-    }),
-    [canWriteOpinion, editableReviewStep, formData, rvwList],
-  );
-
-  const kecoRvwList = rvwList.filter((item) => item.opnrSeComCd === "KECO");
-  const hasKecoSection =
-    kecoRvwList.length > 0 || (editableReviewStep === "KECO" && canWriteOpinion);
-
-  if (!hasKecoSection) {
-    return null;
-  }
-
-  async function handleFileUpload(files: FileList | null) {
-    if (!files || files.length === 0) return;
-
-    const file = files[0];
-    const fileKey = createRvwOpnnUploadKey(file);
-    const existingAtflCd = formData.atchFileGroupId;
-
-    setUploadedFile({ fileName: file.name, fileKey });
-
-    try {
-      await uploadFileAsync(file, {
-        fileKey,
-        metadata: existingAtflCd ? { atflCd: existingAtflCd } : undefined,
-      });
-    } catch {
-      // onError callback handles cleanup
-    }
-  }
-
-  async function handleFileRemove() {
-    if (!uploadedFile) return;
-
-    uploads[uploadedFile.fileKey]?.abort();
-
-    if (uploadedFile.atflId) {
-      try {
-        await attachService.deleteAttachmentByAtflId(uploadedFile.atflId);
-      } catch (error) {
-        console.error("검토의견 첨부파일 삭제 실패:", error);
-      }
-    }
-
-    setUploadedFile(null);
-    setFormData((prev) => ({ ...prev, atchFileGroupId: "" }));
-  }
-
-  function isReviewTurn(reviewStep: ReviewStepCode) {
-    return editableReviewStep === reviewStep && canWriteOpinion;
-  }
-
-  function renderOpinionForm(reviewStep: ReviewStepCode) {
-    if (!isReviewTurn(reviewStep)) return null;
-
-    const uploading = uploadedFile ? (isUploading[uploadedFile.fileKey] ?? false) : false;
-
-    return (
-      <div className="space-y-2">
-        <h4 className="text-xl font-semibold">검토의견 작성</h4>
-        <Table
-          caption="검토의견 작성으로 의견내용, 검토결과, 첨부파일 정보 제공"
-          variant="secondary"
-        >
-          <TableHeader>
-            <TableRow>
-              <TableHead scope="row" className="w-[12rem]">
-                의견내용
-              </TableHead>
-              <TableCell>
-                <Textarea
-                  value={formData.rvwRsltCn}
-                  onChange={(event) =>
-                    setFormData((prev) => ({ ...prev, rvwRsltCn: event.target.value }))
-                  }
-                  placeholder="의견내용을 입력하세요"
-                  rows={4}
-                  className="min-h-[8rem] !text-xl"
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableHead scope="row">검토결과</TableHead>
-              <TableCell>
-                <FieldSet>
-                  <RadioGroup
-                    value={formData.rvwRsltAnmlyYn}
-                    onValueChange={(value) =>
-                      setFormData((prev) => ({
-                        ...prev,
-                        rvwRsltAnmlyYn: value as ReviewOpinionFormData["rvwRsltAnmlyYn"],
-                      }))
-                    }
-                  >
-                    <div className="flex flex-wrap gap-4">
-                      <FieldLabel
-                        htmlFor={`rvw-opnn-normal-${reviewStep}`}
-                        className="!w-auto border-none"
-                      >
-                        <Field orientation="horizontal" className="w-auto">
-                          <RadioGroupItem value="N" id={`rvw-opnn-normal-${reviewStep}`} />
-                          <span className="font-normal">정상</span>
-                        </Field>
-                      </FieldLabel>
-                      <FieldLabel
-                        htmlFor={`rvw-opnn-abnormal-${reviewStep}`}
-                        className="!w-auto border-none"
-                      >
-                        <Field orientation="horizontal" className="w-auto">
-                          <RadioGroupItem value="Y" id={`rvw-opnn-abnormal-${reviewStep}`} />
-                          <span className="font-normal">이상</span>
-                        </Field>
-                      </FieldLabel>
-                    </div>
-                  </RadioGroup>
-                </FieldSet>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableHead scope="row">첨부파일</TableHead>
-              <TableCell>
-                {uploadedFile ? (
-                  <div className="flex items-center gap-2">
-                    <TextShimmer className="text-xl" active={uploading}>
-                      {uploadedFile.fileName}
-                    </TextShimmer>
-                    <Button
-                      size="icon"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        void handleFileRemove();
-                      }}
-                      disabled={uploading}
-                      className="size-8 !bg-destructive"
-                    >
-                      <i className="diveicon di-x text-xs" aria-label="삭제" />
-                    </Button>
-                  </div>
-                ) : (
-                  <label>
-                    <input
-                      type="file"
-                      className="hidden"
-                      onChange={(event) => {
-                        void handleFileUpload(event.target.files);
-                        event.target.value = "";
-                      }}
-                    />
-                    <Button size="sm" variant="outline" type="button" asChild>
-                      <span>파일 선택</span>
-                    </Button>
-                  </label>
-                )}
-              </TableCell>
-            </TableRow>
-          </TableHeader>
-        </Table>
-      </div>
-    );
-  }
-
-  return (
-    <SectionCollapsible title={`${REVIEW_STEP_LABELS.KECO} 검토의견`}>
-      <div className="space-y-6">
-        {kecoRvwList.length > 0 ? (
-          <TechReviewOpinionTable items={kecoRvwList} />
-        ) : null}
-        {renderOpinionForm("KECO")}
-      </div>
-    </SectionCollapsible>
-  );
-});
-
-function getRvwOpnnIds(item: DesignCnstnRvwOpnnResponseDto) {
-  if (!item.designCnstnDocNo || item.rvwOpnnSn == null) {
-    throw new Error("검토의견 식별값이 없습니다.");
-  }
-  return [item.designCnstnDocNo, item.rvwOpnnSn] as const;
-}
-
-function TechReviewOpinionTable({ items }: TechReviewOpinionTableProps) {
-  const queryClient = useQueryClient();
-  const currentUserUuid = useUserStore((state) => state.userInfo?.userUnqId);
-
-  return (
-    <RvwOpnnListTable
-      items={items}
-      getRowKey={(item) => `${item.designCnstnDocNo}_${item.rvwOpnnSn}`}
-      currentUserUuid={currentUserUuid}
-      onUpdate={async (item, body) => {
-        await designCnstnRvwOpnnService.update(...getRvwOpnnIds(item), body);
-        await queryClient.invalidateQueries({ queryKey: designCnstnKeys.all });
-      }}
-      onDelete={async (item) => {
-        await designCnstnRvwOpnnService.delete(...getRvwOpnnIds(item));
-        await queryClient.invalidateQueries({ queryKey: designCnstnKeys.all });
-      }}
-    />
-  );
-}
-
-export { TechReviewOpinionSection };
+"use client";
+
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+
+import { dayjs, getDefaultFileKey, useTus } from "@/shared/lib";
+import { TextShimmer } from "@/shared/ui";
+import { SectionCollapsible } from "@/shared/ui";
+import { Field, FieldLabel, FieldSet } from "@/shared/ui/field";
+import { AttachmentDownloadLink, attachService } from "@/entities/attach";
+import type { DesignCnstnRvwOpnnResponseDto } from "@/entities/design-cnstn";
+import {
+  Button,
+  RadioGroup,
+  RadioGroupItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Textarea,
+} from "@common/components";
+
+import type {
+  ReviewOpinionFormData,
+  ReviewOpinionGetFormDataResult,
+} from "../../lib/review-opinion-utils";
+import type { ReviewStepCode } from "../../model/view-types";
+import { REVIEW_STEP_LABELS } from "../../model/view-types";
+
+const RVW_OPNN_FILE_KEY_PREFIX = "rvw-opnn::";
+
+interface TechReviewOpinionSectionProps {
+  rvwList: DesignCnstnRvwOpnnResponseDto[];
+  editableReviewStep?: ReviewStepCode;
+  atrzSeComCdList?: string[];
+  isAtrzLoading?: boolean;
+}
+
+export interface TechReviewOpinionSectionHandle {
+  getFormData: () => ReviewOpinionGetFormDataResult | null;
+  resetForm: () => void;
+}
+
+interface TechReviewOpinionTableProps {
+  items: DesignCnstnRvwOpnnResponseDto[];
+}
+
+interface UploadedOpinionFile {
+  fileName: string;
+  fileKey: string;
+  atflId?: string;
+  atflCd?: string;
+}
+
+const EMPTY_FORM_DATA: ReviewOpinionFormData = {
+  rvwRsltCn: "",
+  rvwRsltAnmlyYn: "",
+  atchFileGroupId: "",
+  opnrSeComCd: "",
+};
+
+function createRvwOpnnUploadKey(file: File) {
+  return `${RVW_OPNN_FILE_KEY_PREFIX}${getDefaultFileKey(file)}`;
+}
+
+function hasFormContent(formData: ReviewOpinionFormData) {
+  return Boolean(formData.rvwRsltCn.trim() || formData.rvwRsltAnmlyYn || formData.atchFileGroupId);
+}
+
+const TechReviewOpinionSection = forwardRef<
+  TechReviewOpinionSectionHandle,
+  TechReviewOpinionSectionProps
+>(function TechReviewOpinionSection(
+  { rvwList, editableReviewStep, atrzSeComCdList = [], isAtrzLoading = false },
+  ref,
+) {
+  const canWriteOpinion = !isAtrzLoading && atrzSeComCdList.includes("ATRZ02");
+  const [formData, setFormData] = useState<ReviewOpinionFormData>({
+    ...EMPTY_FORM_DATA,
+    opnrSeComCd: editableReviewStep ?? "",
+  });
+  const [uploadedFile, setUploadedFile] = useState<UploadedOpinionFile | null>(null);
+
+  useEffect(() => {
+    setFormData((prev) => ({
+      ...prev,
+      opnrSeComCd: editableReviewStep ?? "",
+    }));
+  }, [editableReviewStep]);
+
+  const { uploadFileAsync, isUploading, uploads } = useTus({
+    onSuccess: (atflCd, atflId, _file, fileKey) => {
+      if (!atflCd || !atflId) return;
+
+      setFormData((prev) => ({ ...prev, atchFileGroupId: atflCd }));
+      setUploadedFile((prev) => (prev?.fileKey === fileKey ? { ...prev, atflCd, atflId } : prev));
+    },
+    onError: (_error, _file, fileKey) => {
+      setUploadedFile((prev) => (prev?.fileKey === fileKey ? null : prev));
+    },
+  });
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getFormData: () => {
+        if (!canWriteOpinion || !editableReviewStep || !hasFormContent(formData)) {
+          return null;
+        }
+
+        return {
+          formData: {
+            ...formData,
+            opnrSeComCd: editableReviewStep,
+          },
+          rvwList,
+        };
+      },
+      resetForm: () => {
+        setFormData({
+          ...EMPTY_FORM_DATA,
+          opnrSeComCd: editableReviewStep ?? "",
+        });
+        setUploadedFile(null);
+      },
+    }),
+    [canWriteOpinion, editableReviewStep, formData, rvwList],
+  );
+
+  const kecoRvwList = rvwList.filter((item) => item.opnrSeComCd === "KECO");
+  const hasKecoSection =
+    kecoRvwList.length > 0 || (editableReviewStep === "KECO" && canWriteOpinion);
+
+  if (!hasKecoSection) {
+    return null;
+  }
+
+  async function handleFileUpload(files: FileList | null) {
+    if (!files || files.length === 0) return;
+
+    const file = files[0];
+    const fileKey = createRvwOpnnUploadKey(file);
+    const existingAtflCd = formData.atchFileGroupId;
+
+    setUploadedFile({ fileName: file.name, fileKey });
+
+    try {
+      await uploadFileAsync(file, {
+        fileKey,
+        metadata: existingAtflCd ? { atflCd: existingAtflCd } : undefined,
+      });
+    } catch {
+      // onError callback handles cleanup
+    }
+  }
+
+  async function handleFileRemove() {
+    if (!uploadedFile) return;
+
+    uploads[uploadedFile.fileKey]?.abort();
+
+    if (uploadedFile.atflId) {
+      try {
+        await attachService.deleteAttachmentByAtflId(uploadedFile.atflId);
+      } catch (error) {
+        console.error("검토의견 첨부파일 삭제 실패:", error);
+      }
+    }
+
+    setUploadedFile(null);
+    setFormData((prev) => ({ ...prev, atchFileGroupId: "" }));
+  }
+
+  function renderOpinionForm(reviewStep: ReviewStepCode) {
+    if (editableReviewStep !== reviewStep || !canWriteOpinion) return null;
+
+    const uploading = uploadedFile ? (isUploading[uploadedFile.fileKey] ?? false) : false;
+
+    return (
+      <div className="space-y-2">
+        <h4 className="text-xl font-semibold">검토의견 작성</h4>
+        <Table variant="secondary">
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[12rem]">의견내용</TableHead>
+              <TableCell>
+                <Textarea
+                  value={formData.rvwRsltCn}
+                  onChange={(event) =>
+                    setFormData((prev) => ({ ...prev, rvwRsltCn: event.target.value }))
+                  }
+                  placeholder="의견내용을 입력하세요"
+                  rows={4}
+                  className="min-h-[8rem] !text-xl"
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>검토결과</TableHead>
+              <TableCell>
+                <FieldSet>
+                  <RadioGroup
+                    value={formData.rvwRsltAnmlyYn}
+                    onValueChange={(value) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        rvwRsltAnmlyYn: value as ReviewOpinionFormData["rvwRsltAnmlyYn"],
+                      }))
+                    }
+                  >
+                    <div className="flex flex-wrap gap-4">
+                      <FieldLabel
+                        htmlFor={`rvw-opnn-normal-${reviewStep}`}
+                        className="!w-auto border-none"
+                      >
+                        <Field orientation="horizontal" className="w-auto">
+                          <RadioGroupItem value="N" id={`rvw-opnn-normal-${reviewStep}`} />
+                          <span className="font-normal">정상</span>
+                        </Field>
+                      </FieldLabel>
+                      <FieldLabel
+                        htmlFor={`rvw-opnn-abnormal-${reviewStep}`}
+                        className="!w-auto border-none"
+                      >
+                        <Field orientation="horizontal" className="w-auto">
+                          <RadioGroupItem value="Y" id={`rvw-opnn-abnormal-${reviewStep}`} />
+                          <span className="font-normal">이상</span>
+                        </Field>
+                      </FieldLabel>
+                    </div>
+                  </RadioGroup>
+                </FieldSet>
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>첨부파일</TableHead>
+              <TableCell>
+                {uploadedFile ? (
+                  <div className="flex items-center gap-2">
+                    <TextShimmer className="text-xl" active={uploading}>
+                      {uploadedFile.fileName}
+                    </TextShimmer>
+                    <Button
+                      size="icon"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        void handleFileRemove();
+                      }}
+                      disabled={uploading}
+                      className="size-8 !bg-destructive"
+                    >
+                      <i className="diveicon di-x text-xs" aria-label="삭제" />
+                    </Button>
+                  </div>
+                ) : (
+                  <label>
+                    <input
+                      type="file"
+                      className="hidden"
+                      onChange={(event) => {
+                        void handleFileUpload(event.target.files);
+                        event.target.value = "";
+                      }}
+                    />
+                    <Button size="sm" variant="outline" type="button" asChild>
+                      <span>파일 선택</span>
+                    </Button>
+                  </label>
+                )}
+              </TableCell>
+            </TableRow>
+          </TableHeader>
+        </Table>
+      </div>
+    );
+  }
+
+  return (
+    <SectionCollapsible title={`${REVIEW_STEP_LABELS.KECO} 검토의견`}>
+      <div className="space-y-6">
+        {kecoRvwList.length > 0 ? <TechReviewOpinionTable items={kecoRvwList} /> : null}
+        {renderOpinionForm("KECO")}
+      </div>
+    </SectionCollapsible>
+  );
+});
+
+function TechReviewOpinionTable({ items }: TechReviewOpinionTableProps) {
+  return (
+    <div className="overflow-x-auto">
+      <Table variant="secondary">
+        <colgroup>
+          <col width="10%" />
+          <col width="55%" />
+          <col width="5%" />
+          <col width="20%" />
+          <col width="10%" />
+        </colgroup>
+        <TableHeader>
+          <TableRow>
+            <TableHead>의견자명</TableHead>
+            <TableHead>의견내용</TableHead>
+            <TableHead>검토결과</TableHead>
+            <TableHead>첨부파일</TableHead>
+            <TableHead>등록일시</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {items.map((item) => (
+            <TableRow key={`${item.designCnstnDocNo}_${item.rvwOpnnSn}`}>
+              <TableCell align="center">{item.opnrNm}</TableCell>
+              <TableCell align="left">{item.rvwRsltCn || "-"}</TableCell>
+              <TableCell align="center">
+                {item.rvwRsltAnmlyYn === "Y" ? "이상" : item.rvwRsltAnmlyYn === "N" ? "정상" : "-"}
+              </TableCell>
+              <TableCell align="center">
+                {item.atchFileInfo?.atflCd ? (
+                  <AttachmentDownloadLink
+                    atflCd={item.atchFileInfo.atflCd}
+                    fileName={item.atchFileInfo.orgnlFileNm || "다운로드"}
+                  />
+                ) : (
+                  "-"
+                )}
+              </TableCell>
+              <TableCell align="center">
+                {item.regDt ? dayjs(item.regDt).format("YYYY-MM-DD HH:mm:ss") : "-"}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+export { TechReviewOpinionSection };

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

@@ -100,7 +100,6 @@ function EsntlAtchFileList({
       manualPagination: true,
     },
     dataTableOptions: {
-      caption: "필수첨부파일 목록으로 필수첨부파일아이디, 문서구분, 필수첨부파일명, 필수첨부여부, 비고, 양식 내려받기, 관리 정보 제공",
       viewPagination: true,
     },
   });
@@ -136,14 +135,14 @@ function EsntlAtchFileList({
   };
 
   return (
-    <div className="card card-border pt-0">
+    <section className="card card-border mx-0 bg-background pt-0">
       <div className="card-header flex items-center justify-between">
-        <h3 className="text-2xl font-medium text-label">필수첨부파일 목록</h3>
+        <h3 className="text-2xl font-semibold">필수첨부파일 목록</h3>
         <Button type="button" color="green" onClick={handleOpenCreate}>
           등록
         </Button>
       </div>
-      <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
+      {tableComponent}
       {dialogMode ? (
         <EsntlAtchFileFormDialog
           mode={dialogMode}
@@ -159,7 +158,7 @@ function EsntlAtchFileList({
           onSubmit={handleFormSubmit}
         />
       ) : null}
-    </div>
+    </section>
   );
 }
 

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

@@ -52,8 +52,8 @@ function EsntlAtchFileMngPage() {
   };
 
   return (
-    <div className="card card-border !mt-6">
-      <div className="card card-border">
+    <div className="space-y-6 px-[1.8rem] pb-6">
+      <section className="card card-border mx-0 bg-background">
         <form className="flex flex-wrap items-end gap-4 p-4" onSubmit={handleSearch}>
           <div className="flex flex-wrap items-center gap-3">
             <Label htmlFor="docSeComCd">문서구분</Label>
@@ -79,7 +79,7 @@ function EsntlAtchFileMngPage() {
             <Button type="submit">조회</Button>
           </div>
         </form>
-      </div>
+      </section>
 
       <EsntlAtchFileList
         searchParams={searchParams}

apps/as/src/pages/fnrs-cnsltn/model/columns.tsx

@@ -1,230 +1,203 @@
-"use client";
-
-import { Fragment } from "react";
-
-import { createColumnHelper } from "@tanstack/react-table";
-
-import { dayjs } from "@/shared/lib";
-import type { FnrsCnsltnMngResponseDto } from "@/entities/fnrs-cnsltn";
-import { Badge } from "@common/components";
-
-const columnHelper = createColumnHelper<FnrsCnsltnMngResponseDto>();
-
-const MAIN_STEP_LABELS = {
-  apply: "재원협의 신청",
-  envoReview: "재원협의 검토",
-  techReview: "기술검토",
-  reply: "검토결과 회신",
-} as const;
-
-export const PROGRESS_STATUS_COLUMNS = [
-  { label: "재원협의 신청 (시군)", sttsComCd: "ST" },
-  { label: "재원협의 신청 (시도)", sttsComCd: "LE" },
-  { label: "재원협의 검토", sttsComCd: "ER" },
-  { label: "기술검토", sttsComCd: "TE" },
-  { label: "기술검토 회신", sttsComCd: "TP" },
-  { label: "환경청 검토 결과 회신", sttsComCd: "EP" },
-];
-
-type BadgeState = "completed" | "current" | "pending";
-
-interface ProgressBadge {
-  label: string;
-  state: BadgeState;
-}
-
-function buildProgressBadges(prgrsSttsComCd: string, techRplyHstryYn: "Y" | "N"): ProgressBadge[] {
-  if (prgrsSttsComCd === "SV") {
-    return [
-      { label: MAIN_STEP_LABELS.apply, state: "pending" },
-      { label: MAIN_STEP_LABELS.envoReview, state: "pending" },
-      { label: MAIN_STEP_LABELS.techReview, state: "pending" },
-      { label: MAIN_STEP_LABELS.reply, state: "pending" },
-    ];
-  }
-
-  if (prgrsSttsComCd === "ST") {
-    return [
-      { label: MAIN_STEP_LABELS.apply, state: "current" },
-      { label: MAIN_STEP_LABELS.envoReview, state: "pending" },
-      { label: MAIN_STEP_LABELS.techReview, state: "pending" },
-      { label: MAIN_STEP_LABELS.reply, state: "pending" },
-    ];
-  }
-
-  if (prgrsSttsComCd === "LE") {
-    return [
-      { label: MAIN_STEP_LABELS.apply, state: "completed" },
-      { label: MAIN_STEP_LABELS.envoReview, state: "current" },
-      { label: MAIN_STEP_LABELS.techReview, state: "pending" },
-      { label: MAIN_STEP_LABELS.reply, state: "pending" },
-    ];
-  }
-
-  if (["FV", "ER", "AC", "TE", "RB", "RA", "AV", "EV", "RK", "RR", "SL"].includes(prgrsSttsComCd)) {
-    return [
-      { label: MAIN_STEP_LABELS.apply, state: "completed" },
-      { label: MAIN_STEP_LABELS.envoReview, state: "completed" },
-      { label: MAIN_STEP_LABELS.techReview, state: "current" },
-      { label: MAIN_STEP_LABELS.reply, state: "pending" },
-    ];
-  }
-
-  if (prgrsSttsComCd === "TP") {
-    return [
-      { label: MAIN_STEP_LABELS.apply, state: "completed" },
-      { label: MAIN_STEP_LABELS.envoReview, state: "completed" },
-      {
-        label: MAIN_STEP_LABELS.techReview,
-        state: techRplyHstryYn === "Y" ? "completed" : "pending",
-      },
-      { label: MAIN_STEP_LABELS.reply, state: "current" },
-    ];
-  }
-
-  if (prgrsSttsComCd === "EP" || prgrsSttsComCd === "TA") {
-    return [
-      { label: MAIN_STEP_LABELS.apply, state: "completed" },
-      { label: MAIN_STEP_LABELS.envoReview, state: "completed" },
-      {
-        label: MAIN_STEP_LABELS.techReview,
-        state: techRplyHstryYn === "Y" ? "completed" : "pending",
-      },
-      { label: MAIN_STEP_LABELS.reply, state: "completed" },
-    ];
-  }
-
-  return [
-    { label: MAIN_STEP_LABELS.apply, state: "pending" },
-    { label: MAIN_STEP_LABELS.envoReview, state: "pending" },
-    { label: MAIN_STEP_LABELS.techReview, state: "pending" },
-    { label: MAIN_STEP_LABELS.reply, state: "pending" },
-  ];
-}
-
-function getProgressStatusBadge(prgrsSttsComCd?: string | null) {
-  if (prgrsSttsComCd === "SL") {
-    return <Badge color="orange">보완요청</Badge>;
-  }
-  return null;
-}
-
-function getBadgeColor(state: BadgeState) {
-  switch (state) {
-    case "completed":
-      return "green";
-    case "current":
-      return "blue";
-    case "pending":
-      return "lightGray";
-  }
-}
-
-function getBadgeStateText(state: BadgeState) {
-  switch (state) {
-    case "completed":
-      return "완료";
-    case "current":
-      return "진행중";
-    case "pending":
-      return "대기";
-  }
-}
-
-/** 단계명을 2줄로 분리: "설치인가 신청" → ["설치인가", "신청"], "기술검토" → ["기술검토", ""] */
-function splitStepLabel(label: string) {
-  const [title = "", ...rest] = label.split(" ");
-  return { title, detail: rest.join(" ") };
-}
-
-function formatOptional(value: string | null | undefined) {
-  return value?.trim() ? value : "-";
-}
-
-interface ProgressStepBadgeProps {
-  prgrsSttsComCd: string;
-  techRplyHstryYn: "Y" | "N";
-}
-
-function ProgressStepBadge({ prgrsSttsComCd, techRplyHstryYn }: ProgressStepBadgeProps) {
-  const badges = buildProgressBadges(prgrsSttsComCd, techRplyHstryYn);
-
-  return (
-    <div className="flex flex-wrap items-center justify-center">
-      {badges.map((badge, index) => (
-        <Fragment key={badge.label}>
-          {index > 0 && <span className="mx-2">&gt;</span>}
-          {/* 1줄: 단계명 / 2줄: 세부단계 + 상태 (예: 설치인가 / 신청완료, 기술검토 / 완료) */}
-          <Badge
-            color={getBadgeColor(badge.state)}
-            className="w-[100px] flex-col justify-center !px-0 py-1 text-center leading-tight"
-          >
-            <span>{splitStepLabel(badge.label).title}</span>
-            <span>
-              {splitStepLabel(badge.label).detail}
-              {getBadgeStateText(badge.state)}
-            </span>
-          </Badge>
-        </Fragment>
-      ))}
-    </div>
-  );
-}
-
-export function createFnrsCnsltnColumns() {
-  return [
-    columnHelper.accessor("sido", {
-      header: "시도",
-      meta: { align: "center" },
-      cell: ({ getValue }) => formatOptional(getValue()),
-    }),
-    columnHelper.accessor("gugun", {
-      header: "시군구",
-      meta: { align: "center" },
-      cell: ({ getValue }) => formatOptional(getValue()),
-    }),
-    columnHelper.accessor("bizNm", {
-      header: "사업명",
-      meta: { align: "left" },
-      cell: ({ row, getValue }) => (
-        <>
-          {getProgressStatusBadge(row.original.prgrsSttsComCd)} {formatOptional(getValue())}
-        </>
-      ),
-    }),
-    columnHelper.accessor("taskSeCdNm", {
-      header: "업무구분",
-      meta: { align: "center" },
-      cell: ({ row }) => formatOptional(row.original.taskSeCdNm || row.original.taskSeComCd),
-    }),
-    columnHelper.accessor("aplcntNm", {
-      header: "담당자",
-      meta: { align: "center" },
-      cell: ({ getValue }) => formatOptional(getValue()),
-    }),
-    columnHelper.accessor("envoSeCdNm", {
-      header: "해당기관",
-      meta: { align: "center" },
-      cell: ({ getValue }) => formatOptional(getValue()),
-    }),
-    columnHelper.display({
-      id: "progress",
-      header: "진행상황",
-      meta: { align: "center" },
-      cell: ({ row }) => (
-        <ProgressStepBadge
-          prgrsSttsComCd={row.original.prgrsSttsComCd || ""}
-          techRplyHstryYn={row.original.techRplyHstryYn || "N"}
-        />
-      ),
-    }),
-    columnHelper.accessor("regDt", {
-      header: "신청일",
-      meta: { align: "center" },
-      cell: ({ getValue }) => {
-        const value = getValue();
-        return value ? dayjs(value).format("YYYY-MM-DD") : "-";
-      },
-    }),
-  ];
-}
+"use client";
+
+import { Fragment } from "react";
+
+import { createColumnHelper } from "@tanstack/react-table";
+
+import { dayjs } from "@/shared/lib";
+import type { FnrsCnsltnMngResponseDto } from "@/entities/fnrs-cnsltn";
+import { Badge } from "@common/components";
+
+const columnHelper = createColumnHelper<FnrsCnsltnMngResponseDto>();
+
+const MAIN_STEP_LABELS = {
+  apply: "재원협의 신청",
+  envoReview: "재원협의 검토",
+  techReview: "기술검토",
+  reply: "검토결과 회신",
+} as const;
+
+export const PROGRESS_STATUS_COLUMNS = [
+  { label: "재원협의 신청 (시군)", sttsComCd: "ST" },
+  { label: "재원협의 신청 (시도)", sttsComCd: "LE" },
+  { label: "재원협의 검토", sttsComCd: "ER" },
+  { label: "기술검토", sttsComCd: "TE" },
+  { label: "기술검토 회신", sttsComCd: "TP" },
+  { label: "환경청 검토 결과 회신", sttsComCd: "EP" },
+];
+
+type BadgeState = "completed" | "current" | "pending";
+
+interface ProgressBadge {
+  label: string;
+  state: BadgeState;
+}
+
+function buildProgressBadges(prgrsSttsComCd: string, techRplyHstryYn: "Y" | "N"): ProgressBadge[] {
+  if (prgrsSttsComCd === "SV") {
+    return [
+      { label: MAIN_STEP_LABELS.apply, state: "pending" },
+      { label: MAIN_STEP_LABELS.envoReview, state: "pending" },
+      { label: MAIN_STEP_LABELS.techReview, state: "pending" },
+      { label: MAIN_STEP_LABELS.reply, state: "pending" },
+    ];
+  }
+
+  if (prgrsSttsComCd === "ST") {
+    return [
+      { label: MAIN_STEP_LABELS.apply, state: "current" },
+      { label: MAIN_STEP_LABELS.envoReview, state: "pending" },
+      { label: MAIN_STEP_LABELS.techReview, state: "pending" },
+      { label: MAIN_STEP_LABELS.reply, state: "pending" },
+    ];
+  }
+
+  if (prgrsSttsComCd === "LE") {
+    return [
+      { label: MAIN_STEP_LABELS.apply, state: "completed" },
+      { label: MAIN_STEP_LABELS.envoReview, state: "current" },
+      { label: MAIN_STEP_LABELS.techReview, state: "pending" },
+      { label: MAIN_STEP_LABELS.reply, state: "pending" },
+    ];
+  }
+
+  if (["FV", "ER", "AC", "TE", "RB", "RA", "AV", "EV", "RK", "RR", "SL"].includes(prgrsSttsComCd)) {
+    return [
+      { label: MAIN_STEP_LABELS.apply, state: "completed" },
+      { label: MAIN_STEP_LABELS.envoReview, state: "completed" },
+      { label: MAIN_STEP_LABELS.techReview, state: "current" },
+      { label: MAIN_STEP_LABELS.reply, state: "pending" },
+    ];
+  }
+
+  if (prgrsSttsComCd === "TP") {
+    return [
+      { label: MAIN_STEP_LABELS.apply, state: "completed" },
+      { label: MAIN_STEP_LABELS.envoReview, state: "completed" },
+      {
+        label: MAIN_STEP_LABELS.techReview,
+        state: techRplyHstryYn === "Y" ? "completed" : "pending",
+      },
+      { label: MAIN_STEP_LABELS.reply, state: "current" },
+    ];
+  }
+
+  if (prgrsSttsComCd === "EP" || prgrsSttsComCd === "TA") {
+    return [
+      { label: MAIN_STEP_LABELS.apply, state: "completed" },
+      { label: MAIN_STEP_LABELS.envoReview, state: "completed" },
+      {
+        label: MAIN_STEP_LABELS.techReview,
+        state: techRplyHstryYn === "Y" ? "completed" : "pending",
+      },
+      { label: MAIN_STEP_LABELS.reply, state: "completed" },
+    ];
+  }
+
+  return [
+    { label: MAIN_STEP_LABELS.apply, state: "pending" },
+    { label: MAIN_STEP_LABELS.envoReview, state: "pending" },
+    { label: MAIN_STEP_LABELS.techReview, state: "pending" },
+    { label: MAIN_STEP_LABELS.reply, state: "pending" },
+  ];
+}
+
+function getProgressStatusBadge(prgrsSttsComCd?: string | null) {
+  if (prgrsSttsComCd === "SL") {
+    return <Badge color="orange">보완요청</Badge>;
+  }
+  return null;
+}
+
+function getBadgeColor(state: BadgeState) {
+  switch (state) {
+    case "completed":
+      return "green";
+    case "current":
+      return "blue";
+    case "pending":
+      return "lightGray";
+  }
+}
+
+function formatOptional(value: string | null | undefined) {
+  return value?.trim() ? value : "-";
+}
+
+interface ProgressStepBadgeProps {
+  prgrsSttsComCd: string;
+  techRplyHstryYn: "Y" | "N";
+}
+
+function ProgressStepBadge({ prgrsSttsComCd, techRplyHstryYn }: ProgressStepBadgeProps) {
+  const badges = buildProgressBadges(prgrsSttsComCd, techRplyHstryYn);
+
+  return (
+    <div className="flex flex-wrap items-center justify-start">
+      {badges.map((badge, index) => (
+        <Fragment key={badge.label}>
+          {index > 0 && <span className="mx-2">&gt;</span>}
+          <Badge color={getBadgeColor(badge.state)}>{badge.label}</Badge>
+        </Fragment>
+      ))}
+    </div>
+  );
+}
+
+export function createFnrsCnsltnColumns() {
+  return [
+    columnHelper.accessor("sido", {
+      header: "시도",
+      meta: { align: "center" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.accessor("gugun", {
+      header: "시군구",
+      meta: { align: "center" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.accessor("bizNm", {
+      header: "사업명",
+      meta: { align: "left" },
+      cell: ({ row, getValue }) => (
+        <>
+          {getProgressStatusBadge(row.original.prgrsSttsComCd)} {formatOptional(getValue())}
+        </>
+      ),
+    }),
+    columnHelper.accessor("taskSeCdNm", {
+      header: "업무구분",
+      meta: { align: "center" },
+      cell: ({ row }) => formatOptional(row.original.taskSeCdNm || row.original.taskSeComCd),
+    }),
+    columnHelper.accessor("aplcntNm", {
+      header: "담당자",
+      meta: { align: "center" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.accessor("envoSeCdNm", {
+      header: "해당기관",
+      meta: { align: "center" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.display({
+      id: "progress",
+      header: "진행상황",
+      meta: { align: "center" },
+      cell: ({ row }) => (
+        <ProgressStepBadge
+          prgrsSttsComCd={row.original.prgrsSttsComCd || ""}
+          techRplyHstryYn={row.original.techRplyHstryYn || "N"}
+        />
+      ),
+    }),
+    columnHelper.accessor("regDt", {
+      header: "신청일",
+      meta: { align: "center" },
+      cell: ({ getValue }) => {
+        const value = getValue();
+        return value ? dayjs(value).format("YYYY-MM-DD") : "-";
+      },
+    }),
+  ];
+}

apps/as/src/pages/fnrs-cnsltn/model/file-vrfc-splmnt-columns.tsx

@@ -53,52 +53,21 @@ export function createFileVrfcSplmntColumns() {
       ),
     }),
     columnHelper.accessor("fileSeComCd", {
-      header: "파일유형",
-      // 고정 너비 + 자동 줄바꿈 (긴 텍스트로 표가 가로로 늘어나지 않도록)
-      meta: { align: "left", width: 100 },
+      header: () => <p className="whitespace-nowrap">파일유형</p>,
+      meta: { align: "left" },
       cell: ({ getValue }) => (
-        <p className="whitespace-normal break-words">
-          {formatOptional(FILE_SE_COM_CD_MAP[getValue() as keyof typeof FILE_SE_COM_CD_MAP])}
-        </p>
+        <p>{formatOptional(FILE_SE_COM_CD_MAP[getValue() as keyof typeof FILE_SE_COM_CD_MAP])}</p>
       ),
     }),
     columnHelper.accessor("fileSeNm", {
-      header: "파일구분",
-      meta: { align: "left", width: 320 },
-      // 표 레이아웃과 무관하게 셀 내용 너비를 320px 로 고정하고 넘치는 텍스트는 자동 줄바꿈
-      cell: ({ getValue }) => (
-        <p
-          style={{
-            width: 320,
-            maxWidth: 320,
-            // 검증내역과 글자가 붙어 보이지 않도록 오른쪽 여백
-            paddingRight: 12,
-            whiteSpace: "normal",
-            wordBreak: "normal",
-            overflowWrap: "anywhere",
-          }}
-        >
-          {formatOptional(getValue())}
-        </p>
-      ),
+      header: () => <p className="whitespace-nowrap">파일구분</p>,
+      meta: { align: "left" },
+      cell: ({ getValue }) => <p className="whitespace-nowrap">{formatOptional(getValue())}</p>,
     }),
     columnHelper.accessor("vrfcRsltCn", {
       header: "검증내역",
-      // 너비 미지정: 나머지 영역을 사용, 넘치는 텍스트는 자동 줄바꿈
       meta: { align: "left" },
-      cell: ({ getValue }) => (
-        <p
-          style={{
-            // 파일구분과 글자가 붙어 보이지 않도록 왼쪽 여백
-            paddingLeft: 12,
-            whiteSpace: "normal",
-            wordBreak: "normal",
-            overflowWrap: "anywhere",
-          }}
-        >
-          {formatOptional(getValue())}
-        </p>
-      ),
+      cell: ({ getValue }) => formatOptional(getValue()),
     }),
   ];
 }

apps/as/src/pages/fnrs-cnsltn/ui/components/checklist-task-panel.tsx

@@ -53,7 +53,7 @@ function ChecklistTaskPanel({
   return (
     <>
       <div className="overflow-x-auto">
-        <Table caption={`체크리스트 목록으로 검토항목, 주요 검토내용, 검토 결과${selectedReviewStep !== "LOCAL" ? ", 기술검토 의견" : ""} 정보 제공`} variant="secondary">
+        <Table variant="secondary">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[20rem]" rowSpan={2}>

apps/as/src/pages/fnrs-cnsltn/ui/components/file-vrfc-splmnt-dialog.tsx

@@ -115,9 +115,6 @@ function FileVrfcSplmntDialog({
       getCoreRowModel: getCoreRowModel(),
     },
     dataTableOptions: {
-      caption: "파일보완 목록으로 선택, 파일유형, 파일구분, 검증내역 정보 제공",
-      // 열 너비를 고정해 긴 텍스트는 셀 안에서 줄바꿈
-      className: "table-fixed",
       viewPagination: false,
     },
   });

apps/as/src/pages/fnrs-cnsltn/ui/components/pwrk-cnsltn-doc-evl-dialog.tsx

@@ -33,9 +33,6 @@ import {
 interface PwrkCnsltnDocEvlDialogProps {
   open: boolean;
   pwrkCnsltnDocNo: string;
-  /** 평가 저장 성공 시 호출 (이후 웹기안기 문서 저장이 진행된다) */
-  onSaved: () => void;
-  /** 평가 없이 닫을 때 호출 (웹기안기 문서는 저장되지 않는다) */
   onClose: () => void;
 }
 
@@ -44,12 +41,7 @@ const DEFAULT_VALUES: Partial<PwrkCnsltnDocEvlFormValues> = {
   pwrkCnsltnDocEvlCn: "",
 };
 
-function PwrkCnsltnDocEvlDialog({
-  open,
-  pwrkCnsltnDocNo,
-  onSaved,
-  onClose,
-}: PwrkCnsltnDocEvlDialogProps) {
+function PwrkCnsltnDocEvlDialog({ open, pwrkCnsltnDocNo, onClose }: PwrkCnsltnDocEvlDialogProps) {
   const alert = useAlertStore((state) => state.setMessage);
   const { mutateAsync: saveEvl, isPending } = useSavePwrkCnsltnDocEvl();
 
@@ -73,7 +65,8 @@ function PwrkCnsltnDocEvlDialog({
     try {
       const payload = buildPwrkCnsltnDocEvlSavePayload(pwrkCnsltnDocNo, values);
       await saveEvl(payload);
-      onSaved();
+      alert("AI 초안 만족도 평가를 등록했습니다.");
+      onClose();
     } catch (error) {
       console.error("AI 초안 만족도 평가 등록 실패:", error);
       alert("AI 초안 만족도 평가 등록에 실패했습니다.");

apps/as/src/pages/fnrs-cnsltn/ui/components/pwrk-cnsltn-doc-mng-dialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import dynamic from "next/dynamic";
 
 import { useQuery, useQueryClient } from "@tanstack/react-query";
@@ -46,7 +46,6 @@ const HangulGiangi = dynamic(
 
 const PWRK_ATCH_FILE_KEY_PREFIX = "pwrk-cnsltn-doc::";
 
-/** 현재 버전이 이 값보다 작으면(AI 초안 상태) 저장 전에 만족도 평가를 먼저 받는다. */
 const AI_DRAFT_EVL_MAX_VER_SN = 2;
 
 const APPROVER_ATRZ_SE_COM_CDS = new Set(["ATRZ03", "ATRZ99"]);
@@ -89,8 +88,6 @@ function PwrkCnsltnDocMngDialog({
   const [uploadedFiles, setUploadedFiles] = useState<UploadedAtchFile[]>([]);
   const [isPjtcoAjmtTableOpen, setIsPjtcoAjmtTableOpen] = useState(false);
   const [isEvlDialogOpen, setIsEvlDialogOpen] = useState(false);
-  // 평가 모달 결과(평가 저장 여부)를 저장 흐름으로 돌려주는 resolver
-  const evlResolverRef = useRef<((isEvlSaved: boolean) => void) | null>(null);
   const { mutate: downloadByAtflId } = useDownloadAttachmentByAtflId();
 
   const {
@@ -148,8 +145,6 @@ function PwrkCnsltnDocMngDialog({
       setAtchFileGroupId("");
       setUploadedFiles([]);
       setIsEvlDialogOpen(false);
-      evlResolverRef.current?.(false);
-      evlResolverRef.current = null;
       return;
     }
 
@@ -183,32 +178,9 @@ function PwrkCnsltnDocMngDialog({
     if (!nextOpen) onClose();
   }
 
-  function requestEvl() {
-    return new Promise<boolean>((resolve) => {
-      evlResolverRef.current = resolve;
-      setIsEvlDialogOpen(true);
-    });
-  }
-
-  function resolveEvl(isEvlSaved: boolean) {
-    setIsEvlDialogOpen(false);
-    evlResolverRef.current?.(isEvlSaved);
-    evlResolverRef.current = null;
-  }
-
   async function handleSaveDocument(file: Blob) {
     if (!completedDraft) throw new Error("저장할 실무협의서 초안이 없습니다.");
 
-    // AI 초안(버전 < 2) 저장 시에는 만족도 평가를 먼저 저장해야 웹기안기 문서가 저장된다.
-    const currentVerSn = completedDraft.crtRslt?.verSn ?? 0;
-    if (currentVerSn < AI_DRAFT_EVL_MAX_VER_SN) {
-      const isEvlSaved = await requestEvl();
-      if (!isEvlSaved) {
-        alert("AI 초안 만족도 평가를 등록해야 실무협의서가 저장됩니다.");
-        return;
-      }
-    }
-
     const saveDto = pwrkCnsltnDocCrtRsltSaveRequestSchema.parse({
       crtDmndUuid: completedDraft.crtDmndUuid,
       pwrkCnsltnDocNo: completedDraft.pwrkCnsltnDocNo,
@@ -229,6 +201,10 @@ function PwrkCnsltnDocMngDialog({
       }),
     ]);
     alert(`실무협의서를 저장했습니다. (버전 ${savedDocument.verSn})`);
+
+    if (savedDocument.verSn <= AI_DRAFT_EVL_MAX_VER_SN) {
+      setIsEvlDialogOpen(true);
+    }
   }
 
   async function handleDownload() {
@@ -410,8 +386,7 @@ function PwrkCnsltnDocMngDialog({
         <PwrkCnsltnDocEvlDialog
           open={isEvlDialogOpen}
           pwrkCnsltnDocNo={completedDraft.pwrkCnsltnDocNo}
-          onSaved={() => resolveEvl(true)}
-          onClose={() => resolveEvl(false)}
+          onClose={() => setIsEvlDialogOpen(false)}
         />
       ) : null}
     </>

apps/as/src/pages/fnrs-cnsltn/ui/components/pwrk-cnsltn-doc-pjtco-ajmt-table.tsx

@@ -42,7 +42,7 @@ function PwrkCnsltnDocPjtcoAjmtTable({
   }
 
   return (
-    <Table caption="금액검증결과 목록으로 구분, 검증결과, 검증금액 정보 제공" variant="secondary">
+    <Table variant="secondary">
       <colgroup>
         <col width="30%" />
         <col width="50%" />

apps/as/src/pages/fnrs-cnsltn/ui/components/pwrk-cnsltn-rvw-rslt-inq-dialog.tsx

@@ -157,7 +157,7 @@ function CnsltnListTable({
   const isSomeSelected = selectedCount > 0 && !isAllSelected;
 
   return (
-    <Table caption="검토 결과 조회 목록으로 선택, 구분, 검토의견 정보 제공" variant="secondary">
+    <Table variant="secondary">
       <colgroup>
         <col width="4%" />
         <col width="4%" />

apps/as/src/pages/fnrs-cnsltn/ui/fnrs-form-page.tsx

@@ -248,11 +248,8 @@ function FnrsFormPage({ mode, initialData, createDefaults }: FnrsFormPageProps)
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit(onSave)} className="mt-4">
         <SectionCollapsibleGroup>
-          <div className="sticky top-[6rem] z-30 flex items-center justify-between bg-container px-4 py-2">
+          <div className="sticky top-[6rem] z-30 bg-container px-4 py-2">
             <SectionCollapsibleToggle />
-            <p className="text-sm text-muted-foreground">
-              <span className="text-red-600">*</span>은 필수입력 항목입니다.
-            </p>
           </div>
           <div className="space-y-4">
             {initialData?.detDto?.fnrsCnsltnDocNo && (

apps/as/src/pages/fnrs-cnsltn/ui/fnrs-list-page.tsx

@@ -77,8 +77,8 @@ function FnrsListPage() {
   };
 
   return (
-    <div className="card card-border !mt-6">
-      <div className="card card-border">
+    <div className="space-y-4 px-[1.8rem] pb-6">
+      <section className="card card-border mx-0 bg-background">
         <form className="flex flex-wrap items-center gap-4 p-2" onSubmit={handleSearch}>
           <div className="flex items-center gap-2">
             <Label htmlFor="sidoComCd" className="whitespace-nowrap">
@@ -145,7 +145,7 @@ function FnrsListPage() {
           </div>
           <Button type="submit">조회</Button>
         </form>
-      </div>
+      </section>
 
       <FnrsList
         searchParams={searchParams}

apps/as/src/pages/fnrs-cnsltn/ui/fnrs-list.tsx

@@ -59,7 +59,6 @@ function FnrsList({ searchParams, pagination, onPaginationChange }: FnrsListProp
       manualPagination: true,
     },
     dataTableOptions: {
-      caption: "재원협의 목록으로 시도, 시군구, 사업명, 업무구분, 담당자, 해당기관, 진행상황, 신청일 정보 제공",
       viewPagination: true,
       onRowClick: handleRowClick,
     },
@@ -78,15 +77,15 @@ function FnrsList({ searchParams, pagination, onPaginationChange }: FnrsListProp
 
   return (
     <>
-      <div className="card card-border pt-0">
+      <section className="card card-border mx-0 bg-background pb-8 pt-0">
         <div className="card-header flex items-center justify-between">
-          <h3 className="text-2xl font-medium text-label">재원협의 목록</h3>
+          <h3 className="text-2xl font-semibold">재원협의 목록</h3>
           <Button type="button" color="green" onClick={() => setIsTaskSeDialogOpen(true)}>
             신청
           </Button>
         </div>
-        <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
-      </div>
+        {tableComponent}
+      </section>
       <PbadmsTaskApplyDialog
         open={isTaskSeDialogOpen}
         onOpenChange={setIsTaskSeDialogOpen}

apps/as/src/pages/fnrs-cnsltn/ui/sections/basic-info-form-section.tsx

@@ -8,7 +8,6 @@ import { SectionCollapsible } from "@/shared/ui";
 import { Field, FieldError, FieldGroup, FieldLabel, FieldSet } from "@/shared/ui/field";
 import { findCodeLabel, useCodeList } from "@/entities/code";
 import { type BnsApplyData, BnsPickerDialog } from "@/widgets/bns-picker";
-import { PreviousPlanLookupButton } from "@/widgets/previous-plan-lookup";
 import {
   Button,
   Checkbox,
@@ -28,9 +27,9 @@ function BasicInfoFormSection() {
   const { control, watch, setValue } = useFormContext<FnrsCnsltnRegistFormData>();
   const [isPickerOpen, setIsPickerOpen] = useState(false);
   const taskSeComCd = watch("fnrsCnsltnMng.taskSeComCd");
-  const sido = watch("fnrsCnsltnMng.sido");
-  const gugun = watch("fnrsCnsltnMng.gugun");
-  const localGovLabel = [sido, gugun].filter(Boolean).join(" ");
+  const localGovLabel = [watch("fnrsCnsltnMng.sido"), watch("fnrsCnsltnMng.gugun")]
+    .filter(Boolean)
+    .join(" ");
   const { data: taskOptions } = useCodeList("FNRS");
   const { data: rtlztnFcltOptions } = useCodeList("RTLZTNFCLTSE");
   const { data: rtlztnUsgOptions } = useCodeList("RTLZTNUSGSE");
@@ -50,8 +49,7 @@ function BasicInfoFormSection() {
 
   return (
     <SectionCollapsible title="기본 정보">
-      <PreviousPlanLookupButton sidoNm={sido} gugunNm={gugun} />
-      <Table caption="기본 정보 입력으로 사업명, 사업기간, 사업내용, 구분, 신청 지자체, 시설종류, 재이용용도 정보 제공" variant="secondary">
+      <Table variant="secondary">
         <colgroup>
           <col width="15%" />
           <col width="35%" />
@@ -60,7 +58,7 @@ function BasicInfoFormSection() {
         </colgroup>
         <TableHeader>
           <TableRow>
-            <TableHead scope="row" className="w-[20rem]" data-required>
+            <TableHead className="w-[20rem]" data-required>
               사업명
             </TableHead>
             <TableCell colSpan={3}>
@@ -88,7 +86,7 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead scope="row" data-required>사업기간</TableHead>
+            <TableHead data-required>사업기간</TableHead>
             <TableCell colSpan={3}>
               <FieldGroup className="flex-row items-center gap-2">
                 <Controller
@@ -132,7 +130,7 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead scope="row" data-required>사업내용</TableHead>
+            <TableHead data-required>사업내용</TableHead>
             <TableCell colSpan={3}>
               <Controller
                 name="fnrsCnsltnMng.bizCn"
@@ -152,15 +150,15 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead scope="row" data-required>구분</TableHead>
+            <TableHead data-required>구분</TableHead>
             <TableCell>{taskSeComCdLabel}</TableCell>
-            <TableHead scope="row">신청 지자체</TableHead>
+            <TableHead>신청 지자체</TableHead>
             <TableCell>{localGovLabel}</TableCell>
           </TableRow>
           {taskSeComCd.includes("RE") && (
             <>
               <TableRow>
-                <TableHead scope="row">시설종류</TableHead>
+                <TableHead>시설종류</TableHead>
                 <TableCell colSpan={3}>
                   <Controller
                     name="fnrsCnsltnMng.rtlztnFcltSeComCd"
@@ -200,7 +198,7 @@ function BasicInfoFormSection() {
                 </TableCell>
               </TableRow>
               <TableRow>
-                <TableHead scope="row">재이용용도</TableHead>
+                <TableHead>재이용용도</TableHead>
                 <TableCell colSpan={3}>
                   <Controller
                     name="fnrsCnsltnMng.rtlztnUsgSeComCd"

apps/as/src/pages/fnrs-cnsltn/ui/sections/basic-info-section.tsx

@@ -2,7 +2,6 @@
 
 import { SectionCollapsible } from "@/shared/ui";
 import type { FnrsCnsltnMngResponseDto } from "@/entities/fnrs-cnsltn";
-import { PreviousPlanLookupButton } from "@/widgets/previous-plan-lookup";
 import { Table, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
 
 interface BasicInfoSectionProps {
@@ -12,8 +11,7 @@ interface BasicInfoSectionProps {
 function BasicInfoSection({ det }: BasicInfoSectionProps) {
   return (
     <SectionCollapsible title="기본 정보">
-      <PreviousPlanLookupButton sidoNm={det.sido} gugunNm={det.gugun} />
-      <Table caption="기본 정보로 사업명, 사업기간, 사업내용, 환경청구분, 구분, 신청지자체, 확정예산사업번호, 예산신청연도 정보 제공" variant="secondary">
+      <Table variant="secondary">
         <colgroup>
           <col width="15%" />
           <col width="35%" />
@@ -22,31 +20,31 @@ function BasicInfoSection({ det }: BasicInfoSectionProps) {
         </colgroup>
         <TableHeader>
           <TableRow>
-            <TableHead scope="row">사업명</TableHead>
+            <TableHead>사업명</TableHead>
             <TableCell>{det.bizNm || "-"}</TableCell>
-            <TableHead scope="row">사업기간</TableHead>
+            <TableHead>사업기간</TableHead>
             <TableCell>{(det.bizBgngYr || "-") + " ~ " + (det.bizEndYr || "-")}</TableCell>
           </TableRow>
           <TableRow>
-            <TableHead scope="row">사업내용</TableHead>
+            <TableHead>사업내용</TableHead>
             <TableCell colSpan={3}>{det.bizCn || "-"}</TableCell>
           </TableRow>
           <TableRow>
-            <TableHead scope="row">환경청구분</TableHead>
+            <TableHead>환경청구분</TableHead>
             <TableCell>{det.envoSeCdNm || "-"}</TableCell>
-            <TableHead scope="row">구분</TableHead>
+            <TableHead>구분</TableHead>
             <TableCell>{det.taskSeCdNm || "-"}</TableCell>
           </TableRow>
           <TableRow>
-            <TableHead scope="row">신청지자체</TableHead>
+            <TableHead>신청지자체</TableHead>
             <TableCell>
               {det.sido || "-"} {det.gugun || "-"}
             </TableCell>
-            <TableHead scope="row">확정예산사업번호</TableHead>
+            <TableHead>확정예산사업번호</TableHead>
             <TableCell>{det.cfmtnBgtBizNo || "-"}</TableCell>
           </TableRow>
           <TableRow>
-            <TableHead scope="row">예산신청연도</TableHead>
+            <TableHead>예산신청연도</TableHead>
             <TableCell colSpan={3}>{det.bgtAplyYr || "-"}</TableCell>
           </TableRow>
         </TableHeader>

apps/as/src/pages/fnrs-cnsltn/ui/sections/business-cost-section.tsx

@@ -20,7 +20,7 @@ function BusinessCostSection({ bizCstList }: BusinessCostSectionProps) {
     <SectionCollapsible title="총사업비">
       <div className="overflow-x-auto">
         <p className="mb-2 text-right font-normal text-muted-foreground">(단위: 백만원)</p>
-        <Table caption="총사업비 목록으로 구분, 예산반영(A), 표준사업비(B), 금회설계시(C), 증감 정보 제공" variant="secondary" className="table-fixed">
+        <Table variant="secondary" className="table-fixed">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[30rem]" rowSpan={2}>
@@ -51,9 +51,9 @@ function BusinessCostSection({ bizCstList }: BusinessCostSectionProps) {
                 return (
                   <TableRow key={node.acntgSeCd}>
                     {node.treeLevel <= 1 ? (
-                      <TableHead scope="row" className="!px-[0.8rem] text-left">{node.acntgSeCdNm}</TableHead>
+                      <TableHead className="!px-[0.8rem] text-left">{node.acntgSeCdNm}</TableHead>
                     ) : (
-                      <TableHead scope="row" className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
+                      <TableHead className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
                         {showSubIcon && <span className="mr-1 text-gray-400">└</span>}
                         {node.acntgSeCdNm}
                       </TableHead>

apps/as/src/pages/fnrs-cnsltn/ui/sections/business-scale-section.tsx

@@ -13,7 +13,7 @@ function BusinessScaleSection({ bizSclList }: BusinessScaleSectionProps) {
   return (
     <SectionCollapsible title="사업규모">
       <div className="overflow-x-auto">
-        <Table caption="사업규모 목록으로 구분, 기본계획(A), 예산반영(B), 금회설계시(C), 증감(C-B) 정보 제공" variant="secondary">
+        <Table variant="secondary">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[30rem]">구분</TableHead>
@@ -36,7 +36,7 @@ function BusinessScaleSection({ bizSclList }: BusinessScaleSectionProps) {
 
                 return (
                   <TableRow key={node.cnstpSeCd}>
-                    <TableHead scope="row" className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
+                    <TableHead className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
                       {node.cnstpSeCdNm}
                     </TableHead>
                     <TableCell>

apps/as/src/pages/fnrs-cnsltn/ui/sections/checklist-section.tsx

@@ -86,13 +86,7 @@ function ChecklistSection({
           >
             <TabsList>
               {visibleReviewSteps.map((stepCode) => (
-                <TabsTrigger
-                  key={stepCode}
-                  value={stepCode}
-                  id={`fnrs-cklst-step-tab-${stepCode}`}
-                  aria-controls="fnrs-cklst-task-tabs"
-                  className="!px-6 !py-3 text-xl"
-                >
+                <TabsTrigger key={stepCode} value={stepCode} className="!px-6 !py-3 text-xl">
                   {CHECKLIST_TAB_LABELS[stepCode]}
                 </TabsTrigger>
               ))}
@@ -102,7 +96,6 @@ function ChecklistSection({
 
         {taskCodes.length > 0 ? (
           <Tabs
-            id="fnrs-cklst-task-tabs"
             value={selectedTaskCode ?? taskCodes[0]}
             onValueChange={setSelectedTaskCode}
             className="w-full"
@@ -114,8 +107,6 @@ function ChecklistSection({
                   <TabsTrigger
                     key={code}
                     value={code}
-                    id={`fnrs-cklst-tab-${code}`}
-                    aria-controls={`fnrs-cklst-panel-${code}`}
                     className="!px-6 !py-3 text-xl [&:after]:hidden"
                   >
                     {TASK_CODE_LABELS[code] ?? code}
@@ -129,15 +120,7 @@ function ChecklistSection({
             </div>
 
             {taskCodes.map((code) => (
-              <TabsContent
-                key={code}
-                value={code}
-                id={`fnrs-cklst-panel-${code}`}
-                aria-labelledby={`fnrs-cklst-tab-${code}`}
-                className="mt-0 border-0 p-0 shadow-none ring-0"
-              >
-                {/* 선택된 탭(검토단계·업무구분)의 패널임을 알 수 있도록 숨김 제목 제공 */}
-                <h3 className="sr-only">{CHECKLIST_TAB_LABELS[selectedReviewStep]} {TASK_CODE_LABELS[code] ?? code} 체크리스트</h3>
+              <TabsContent key={code} value={code} className="mt-0 border-0 p-0 shadow-none ring-0">
                 <ChecklistTaskPanel
                   selectedReviewStep={selectedReviewStep}
                   selectedRows={getChecklistDisplayRows(cklstResultList, code)}

apps/as/src/pages/fnrs-cnsltn/ui/sections/contact-info-section.tsx

@@ -11,21 +11,21 @@ interface ContactInfoSectionProps {
 function ContactInfoSection({ det }: ContactInfoSectionProps) {
   return (
     <SectionCollapsible title="담당자 정보">
-      <Table caption="담당자 정보로 신청자(이름, 연락처, 소속, 이메일)과 설계자(이름, 연락처, 소속, 이메일) 정보 제공" variant="secondary">
+      <Table variant="secondary">
         <TableHeader>
           {det.aplcntNm && (
             <>
               <TableRow>
-                <TableHead scope="row" rowSpan={2}>신청자</TableHead>
-                <TableHead scope="row">이름</TableHead>
+                <TableHead rowSpan={2}>신청자</TableHead>
+                <TableHead>이름</TableHead>
                 <TableCell>{det.aplcntNm || "-"}</TableCell>
-                <TableHead scope="row">연락처</TableHead>
+                <TableHead>연락처</TableHead>
                 <TableCell>{det.aplcntMblTelno || "-"}</TableCell>
               </TableRow>
               <TableRow>
-                <TableHead scope="row">소속</TableHead>
+                <TableHead>소속</TableHead>
                 <TableCell>{det.aplcntOgdpNm || "-"}</TableCell>
-                <TableHead scope="row">이메일</TableHead>
+                <TableHead>이메일</TableHead>
                 <TableCell>{det.aplcntEmlAddr || "-"}</TableCell>
               </TableRow>
             </>
@@ -33,16 +33,16 @@ function ContactInfoSection({ det }: ContactInfoSectionProps) {
           {det.dsgnrNm && (
             <>
               <TableRow>
-                <TableHead scope="row" rowSpan={2}>설계자</TableHead>
-                <TableHead scope="row">이름</TableHead>
+                <TableHead rowSpan={2}>설계자</TableHead>
+                <TableHead>이름</TableHead>
                 <TableCell>{det.dsgnrNm || "-"}</TableCell>
-                <TableHead scope="row">연락처</TableHead>
+                <TableHead>연락처</TableHead>
                 <TableCell>{det.dsgnrTelno || "-"}</TableCell>
               </TableRow>
               <TableRow>
-                <TableHead scope="row">소속</TableHead>
+                <TableHead>소속</TableHead>
                 <TableCell>{det.dsgnrOgdpNm || "-"}</TableCell>
-                <TableHead scope="row">이메일</TableHead>
+                <TableHead>이메일</TableHead>
                 <TableCell>{det.dsgnrEmlAddr || "-"}</TableCell>
               </TableRow>
             </>

apps/as/src/pages/fnrs-cnsltn/ui/sections/fnrs-shar-section.tsx

@@ -21,7 +21,7 @@ function FnrsSharSection({ fnrsSharList }: FnrsSharSectionProps) {
     <SectionCollapsible title="재원분담">
       <div className="overflow-x-auto">
         <p className="mb-2 text-right font-normal text-muted-foreground">(단위: 백만원)</p>
-        <Table caption="재원분담 목록으로 구분, 현행(A), 변경요구(B), 증감, 비고 정보 제공" variant="secondary" className="table-fixed">
+        <Table variant="secondary" className="table-fixed">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[24rem]" rowSpan={2}>
@@ -51,7 +51,7 @@ function FnrsSharSection({ fnrsSharList }: FnrsSharSectionProps) {
 
                 return (
                   <TableRow key={node.fnrsSharSeCd}>
-                    <TableHead scope="row" className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
+                    <TableHead className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
                       {showSubIcon && <span className="mr-1 text-gray-400">└</span>}
                       {node.fnrsSharSeCdNm}
                     </TableHead>

apps/as/src/pages/fnrs-cnsltn/ui/sections/tech-review-opinion-section.tsx

@@ -1,345 +1,352 @@
-"use client";
-
-import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
-
-import { useQueryClient } from "@tanstack/react-query";
-
-import { getDefaultFileKey, useTus, useUserStore } from "@/shared/lib";
-import { AttachmentFileField, SectionCollapsible } from "@/shared/ui";
-import { Field, FieldLabel, FieldSet } from "@/shared/ui/field";
-import { attachService, useDownloadAttachmentByAtflId } from "@/entities/attach";
-import {
-  fnrsCnsltnKeys,
-  type FnrsCnsltnRvwOpnnResponseDto,
-  fnrsCnsltnRvwOpnnService,
-} from "@/entities/fnrs-cnsltn";
-import { RvwOpnnListTable } from "@/widgets/pbadms-sprt";
-import {
-  RadioGroup,
-  RadioGroupItem,
-  Table,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Textarea,
-} from "@common/components";
-
-import type {
-  ReviewOpinionFormData,
-  ReviewOpinionGetFormDataResult,
-} from "../../lib/review-opinion-utils";
-import type { ReviewStepCode } from "../../model/view-types";
-import { REVIEW_STEP_LABELS } from "../../model/view-types";
-
-const RVW_OPNN_FILE_KEY_PREFIX = "rvw-opnn::";
-
-interface TechReviewOpinionSectionProps {
-  rvwList: FnrsCnsltnRvwOpnnResponseDto[];
-  editableReviewStep?: ReviewStepCode;
-  atrzSeComCdList?: string[];
-  isAtrzLoading?: boolean;
-}
-
-export interface TechReviewOpinionSectionHandle {
-  getFormData: () => ReviewOpinionGetFormDataResult | null;
-  resetForm: () => void;
-}
-
-interface TechReviewOpinionTableProps {
-  items: FnrsCnsltnRvwOpnnResponseDto[];
-}
-
-interface UploadedOpinionFile {
-  fileName: string;
-  fileKey: string;
-  atflId?: string;
-  atflCd?: string;
-}
-
-const EMPTY_FORM_DATA: ReviewOpinionFormData = {
-  rvwRsltCn: "",
-  rvwRsltAnmlyYn: "",
-  atchFileGroupId: "",
-  opnrSeComCd: "",
-};
-
-function createRvwOpnnUploadKey(file: File) {
-  return `${RVW_OPNN_FILE_KEY_PREFIX}${getDefaultFileKey(file)}`;
-}
-
-function hasFormContent(formData: ReviewOpinionFormData) {
-  return Boolean(formData.rvwRsltCn.trim() || formData.rvwRsltAnmlyYn || formData.atchFileGroupId);
-}
-
-const TechReviewOpinionSection = forwardRef<
-  TechReviewOpinionSectionHandle,
-  TechReviewOpinionSectionProps
->(function TechReviewOpinionSection(
-  { rvwList, editableReviewStep, atrzSeComCdList = [], isAtrzLoading = false },
-  ref,
-) {
-  const canWriteKecoOpinion = !isAtrzLoading && atrzSeComCdList.includes("ATRZ02");
-  const [formData, setFormData] = useState<ReviewOpinionFormData>({
-    ...EMPTY_FORM_DATA,
-    opnrSeComCd: editableReviewStep ?? "",
-  });
-  const [uploadedFile, setUploadedFile] = useState<UploadedOpinionFile | null>(null);
-  const { mutate: downloadByAtflId } = useDownloadAttachmentByAtflId();
-
-  useEffect(() => {
-    setFormData((prev) => ({
-      ...prev,
-      opnrSeComCd: editableReviewStep ?? "",
-    }));
-  }, [editableReviewStep]);
-
-  const { uploadFileAsync, isUploading, uploads } = useTus({
-    onSuccess: (atflCd, atflId, _file, fileKey) => {
-      if (!atflCd || !atflId) return;
-
-      setFormData((prev) => ({ ...prev, atchFileGroupId: atflCd }));
-      setUploadedFile((prev) => (prev?.fileKey === fileKey ? { ...prev, atflCd, atflId } : prev));
-    },
-    onError: (_error, _file, fileKey) => {
-      setUploadedFile((prev) => (prev?.fileKey === fileKey ? null : prev));
-    },
-  });
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      getFormData: () => {
-        if (!editableReviewStep || !hasFormContent(formData)) {
-          return null;
-        }
-        if (editableReviewStep === "KECO" && !canWriteKecoOpinion) {
-          return null;
-        }
-
-        return {
-          formData: {
-            ...formData,
-            opnrSeComCd: editableReviewStep,
-          },
-          rvwList,
-        };
-      },
-      resetForm: () => {
-        setFormData({
-          ...EMPTY_FORM_DATA,
-          opnrSeComCd: editableReviewStep ?? "",
-        });
-        setUploadedFile(null);
-      },
-    }),
-    [canWriteKecoOpinion, editableReviewStep, formData, rvwList],
-  );
-
-  const envRvwList = rvwList.filter((item) => item.opnrSeComCd === "ENV");
-  const kecoRvwList = rvwList.filter((item) => item.opnrSeComCd === "KECO");
-
-  const hasEnvSection = envRvwList.length > 0 || editableReviewStep === "ENV";
-  const hasKecoSection = kecoRvwList.length > 0 || editableReviewStep === "KECO";
-
-  if (!hasEnvSection && !hasKecoSection) {
-    return null;
-  }
-
-  async function handleFileUpload(files: FileList | null) {
-    if (!files || files.length === 0) return;
-
-    const file = files[0];
-    const fileKey = createRvwOpnnUploadKey(file);
-    const existingAtflCd = formData.atchFileGroupId;
-
-    setUploadedFile({ fileName: file.name, fileKey });
-
-    try {
-      await uploadFileAsync(file, {
-        fileKey,
-        metadata: existingAtflCd ? { atflCd: existingAtflCd } : undefined,
-      });
-    } catch {
-      // onError callback handles cleanup
-    }
-  }
-
-  async function handleFileRemove() {
-    if (!uploadedFile) return;
-
-    uploads[uploadedFile.fileKey]?.abort();
-
-    if (uploadedFile.atflId) {
-      try {
-        await attachService.deleteAttachmentByAtflId(uploadedFile.atflId);
-      } catch (error) {
-        console.error("검토의견 첨부파일 삭제 실패:", error);
-      }
-    }
-
-    setUploadedFile(null);
-    setFormData((prev) => ({ ...prev, atchFileGroupId: "" }));
-  }
-
-  function isReviewTurn(reviewStep: ReviewStepCode) {
-    if (editableReviewStep !== reviewStep) return false;
-    if (reviewStep === "KECO" && !canWriteKecoOpinion) return false;
-    return true;
-  }
-
-  function renderOpinionForm(reviewStep: ReviewStepCode) {
-    if (!isReviewTurn(reviewStep)) return null;
-
-    const uploading = uploadedFile ? (isUploading[uploadedFile.fileKey] ?? false) : false;
-
-    return (
-      <div className="space-y-2">
-        <h4 className="text-xl font-semibold">검토의견 작성</h4>
-        <Table
-          caption="검토의견 작성으로 의견내용, 검토결과, 첨부파일 정보 제공"
-          variant="secondary"
-        >
-          <TableHeader>
-            <TableRow>
-              <TableHead className="w-[12rem]">의견내용</TableHead>
-              <TableCell>
-                <Textarea
-                  value={formData.rvwRsltCn}
-                  onChange={(event) =>
-                    setFormData((prev) => ({ ...prev, rvwRsltCn: event.target.value }))
-                  }
-                  placeholder="의견내용을 입력하세요"
-                  rows={4}
-                  className="min-h-[8rem] !text-xl"
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableHead>검토결과</TableHead>
-              <TableCell>
-                <FieldSet>
-                  <RadioGroup
-                    value={formData.rvwRsltAnmlyYn}
-                    onValueChange={(value) =>
-                      setFormData((prev) => ({
-                        ...prev,
-                        rvwRsltAnmlyYn: value as ReviewOpinionFormData["rvwRsltAnmlyYn"],
-                      }))
-                    }
-                  >
-                    <div className="flex flex-wrap gap-4">
-                      <FieldLabel
-                        htmlFor={`rvw-opnn-normal-${reviewStep}`}
-                        className="!w-auto border-none"
-                      >
-                        <Field orientation="horizontal" className="w-auto">
-                          <RadioGroupItem value="N" id={`rvw-opnn-normal-${reviewStep}`} />
-                          <span className="font-normal">정상</span>
-                        </Field>
-                      </FieldLabel>
-                      <FieldLabel
-                        htmlFor={`rvw-opnn-abnormal-${reviewStep}`}
-                        className="!w-auto border-none"
-                      >
-                        <Field orientation="horizontal" className="w-auto">
-                          <RadioGroupItem value="Y" id={`rvw-opnn-abnormal-${reviewStep}`} />
-                          <span className="font-normal">이상</span>
-                        </Field>
-                      </FieldLabel>
-                    </div>
-                  </RadioGroup>
-                </FieldSet>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableHead>첨부파일</TableHead>
-              <TableCell>
-                <AttachmentFileField
-                  files={
-                    uploadedFile
-                      ? [
-                          {
-                            fileKey: uploadedFile.fileKey,
-                            fileName: uploadedFile.fileName,
-                            onDownload: uploadedFile.atflId
-                              ? () => downloadByAtflId(uploadedFile.atflId!)
-                              : undefined,
-                          },
-                        ]
-                      : []
-                  }
-                  inputId={`rvw-opnn-${reviewStep}-file-input`}
-                  isUploadingByKey={isUploading}
-                  multiple={false}
-                  showAddButton={!uploadedFile}
-                  addDisabled={uploading}
-                  onAdd={(fileList) => void handleFileUpload(fileList)}
-                  onRemove={() => void handleFileRemove()}
-                />
-              </TableCell>
-            </TableRow>
-          </TableHeader>
-        </Table>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      {hasEnvSection ? (
-        <SectionCollapsible title={`${REVIEW_STEP_LABELS.ENV} 검토의견`}>
-          <div className="space-y-6">
-            {envRvwList.length > 0 ? (
-              <TechReviewOpinionTable items={envRvwList} />
-            ) : null}
-            {renderOpinionForm("ENV")}
-          </div>
-        </SectionCollapsible>
-      ) : null}
-      {hasKecoSection ? (
-        <SectionCollapsible title={`${REVIEW_STEP_LABELS.KECO} 검토의견`}>
-          <div className="space-y-6">
-            {kecoRvwList.length > 0 ? (
-              <TechReviewOpinionTable items={kecoRvwList} />
-            ) : null}
-            {/* 
-            재원협의에서 환경공단 검토의견은 자동 생성
-            {renderOpinionForm("KECO")}
-            */}
-          </div>
-        </SectionCollapsible>
-      ) : null}
-    </>
-  );
-});
-
-function getRvwOpnnIds(item: FnrsCnsltnRvwOpnnResponseDto) {
-  if (!item.fnrsCnsltnDocNo || item.rvwOpnnSn == null) {
-    throw new Error("검토의견 식별값이 없습니다.");
-  }
-  return [item.fnrsCnsltnDocNo, item.rvwOpnnSn] as const;
-}
-
-function TechReviewOpinionTable({ items }: TechReviewOpinionTableProps) {
-  const queryClient = useQueryClient();
-  const currentUserUuid = useUserStore((state) => state.userInfo?.userUnqId);
-
-  return (
-    <RvwOpnnListTable
-      items={items}
-      getRowKey={(item) => `${item.fnrsCnsltnDocNo}_${item.rvwOpnnSn}`}
-      currentUserUuid={currentUserUuid}
-      onUpdate={async (item, body) => {
-        await fnrsCnsltnRvwOpnnService.update(...getRvwOpnnIds(item), body);
-        await queryClient.invalidateQueries({ queryKey: fnrsCnsltnKeys.all });
-      }}
-      onDelete={async (item) => {
-        await fnrsCnsltnRvwOpnnService.delete(...getRvwOpnnIds(item));
-        await queryClient.invalidateQueries({ queryKey: fnrsCnsltnKeys.all });
-      }}
-    />
-  );
-}
-
-export { TechReviewOpinionSection };
+"use client";
+
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+
+import { dayjs, getDefaultFileKey, useTus } from "@/shared/lib";
+import { AttachmentFileField, SectionCollapsible } from "@/shared/ui";
+import { Field, FieldLabel, FieldSet } from "@/shared/ui/field";
+import {
+  AttachmentDownloadLink,
+  attachService,
+  useDownloadAttachmentByAtflId,
+} from "@/entities/attach";
+import type { FnrsCnsltnRvwOpnnResponseDto } from "@/entities/fnrs-cnsltn";
+import {
+  RadioGroup,
+  RadioGroupItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Textarea,
+} from "@common/components";
+
+import type {
+  ReviewOpinionFormData,
+  ReviewOpinionGetFormDataResult,
+} from "../../lib/review-opinion-utils";
+import type { ReviewStepCode } from "../../model/view-types";
+import { REVIEW_STEP_LABELS } from "../../model/view-types";
+
+const RVW_OPNN_FILE_KEY_PREFIX = "rvw-opnn::";
+
+interface TechReviewOpinionSectionProps {
+  rvwList: FnrsCnsltnRvwOpnnResponseDto[];
+  editableReviewStep?: ReviewStepCode;
+  atrzSeComCdList?: string[];
+  isAtrzLoading?: boolean;
+}
+
+export interface TechReviewOpinionSectionHandle {
+  getFormData: () => ReviewOpinionGetFormDataResult | null;
+  resetForm: () => void;
+}
+
+interface TechReviewOpinionTableProps {
+  items: FnrsCnsltnRvwOpnnResponseDto[];
+}
+
+interface UploadedOpinionFile {
+  fileName: string;
+  fileKey: string;
+  atflId?: string;
+  atflCd?: string;
+}
+
+const EMPTY_FORM_DATA: ReviewOpinionFormData = {
+  rvwRsltCn: "",
+  rvwRsltAnmlyYn: "",
+  atchFileGroupId: "",
+  opnrSeComCd: "",
+};
+
+function createRvwOpnnUploadKey(file: File) {
+  return `${RVW_OPNN_FILE_KEY_PREFIX}${getDefaultFileKey(file)}`;
+}
+
+function hasFormContent(formData: ReviewOpinionFormData) {
+  return Boolean(formData.rvwRsltCn.trim() || formData.rvwRsltAnmlyYn || formData.atchFileGroupId);
+}
+
+const TechReviewOpinionSection = forwardRef<
+  TechReviewOpinionSectionHandle,
+  TechReviewOpinionSectionProps
+>(function TechReviewOpinionSection(
+  { rvwList, editableReviewStep, atrzSeComCdList = [], isAtrzLoading = false },
+  ref,
+) {
+  const canWriteKecoOpinion = !isAtrzLoading && atrzSeComCdList.includes("ATRZ02");
+  const [formData, setFormData] = useState<ReviewOpinionFormData>({
+    ...EMPTY_FORM_DATA,
+    opnrSeComCd: editableReviewStep ?? "",
+  });
+  const [uploadedFile, setUploadedFile] = useState<UploadedOpinionFile | null>(null);
+  const { mutate: downloadByAtflId } = useDownloadAttachmentByAtflId();
+
+  useEffect(() => {
+    setFormData((prev) => ({
+      ...prev,
+      opnrSeComCd: editableReviewStep ?? "",
+    }));
+  }, [editableReviewStep]);
+
+  const { uploadFileAsync, isUploading, uploads } = useTus({
+    onSuccess: (atflCd, atflId, _file, fileKey) => {
+      if (!atflCd || !atflId) return;
+
+      setFormData((prev) => ({ ...prev, atchFileGroupId: atflCd }));
+      setUploadedFile((prev) => (prev?.fileKey === fileKey ? { ...prev, atflCd, atflId } : prev));
+    },
+    onError: (_error, _file, fileKey) => {
+      setUploadedFile((prev) => (prev?.fileKey === fileKey ? null : prev));
+    },
+  });
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getFormData: () => {
+        if (!editableReviewStep || !hasFormContent(formData)) {
+          return null;
+        }
+        if (editableReviewStep === "KECO" && !canWriteKecoOpinion) {
+          return null;
+        }
+
+        return {
+          formData: {
+            ...formData,
+            opnrSeComCd: editableReviewStep,
+          },
+          rvwList,
+        };
+      },
+      resetForm: () => {
+        setFormData({
+          ...EMPTY_FORM_DATA,
+          opnrSeComCd: editableReviewStep ?? "",
+        });
+        setUploadedFile(null);
+      },
+    }),
+    [canWriteKecoOpinion, editableReviewStep, formData, rvwList],
+  );
+
+  const envRvwList = rvwList.filter((item) => item.opnrSeComCd === "ENV");
+  const kecoRvwList = rvwList.filter((item) => item.opnrSeComCd === "KECO");
+
+  const hasEnvSection = envRvwList.length > 0 || editableReviewStep === "ENV";
+  const hasKecoSection = kecoRvwList.length > 0 || editableReviewStep === "KECO";
+
+  if (!hasEnvSection && !hasKecoSection) {
+    return null;
+  }
+
+  async function handleFileUpload(files: FileList | null) {
+    if (!files || files.length === 0) return;
+
+    const file = files[0];
+    const fileKey = createRvwOpnnUploadKey(file);
+    const existingAtflCd = formData.atchFileGroupId;
+
+    setUploadedFile({ fileName: file.name, fileKey });
+
+    try {
+      await uploadFileAsync(file, {
+        fileKey,
+        metadata: existingAtflCd ? { atflCd: existingAtflCd } : undefined,
+      });
+    } catch {
+      // onError callback handles cleanup
+    }
+  }
+
+  async function handleFileRemove() {
+    if (!uploadedFile) return;
+
+    uploads[uploadedFile.fileKey]?.abort();
+
+    if (uploadedFile.atflId) {
+      try {
+        await attachService.deleteAttachmentByAtflId(uploadedFile.atflId);
+      } catch (error) {
+        console.error("검토의견 첨부파일 삭제 실패:", error);
+      }
+    }
+
+    setUploadedFile(null);
+    setFormData((prev) => ({ ...prev, atchFileGroupId: "" }));
+  }
+
+  function renderOpinionForm(reviewStep: ReviewStepCode) {
+    if (editableReviewStep !== reviewStep) return null;
+    if (reviewStep === "KECO" && !canWriteKecoOpinion) return null;
+
+    const uploading = uploadedFile ? (isUploading[uploadedFile.fileKey] ?? false) : false;
+
+    return (
+      <div className="space-y-2">
+        <h4 className="text-xl font-semibold">검토의견 작성</h4>
+        <Table variant="secondary">
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[12rem]">의견내용</TableHead>
+              <TableCell>
+                <Textarea
+                  value={formData.rvwRsltCn}
+                  onChange={(event) =>
+                    setFormData((prev) => ({ ...prev, rvwRsltCn: event.target.value }))
+                  }
+                  placeholder="의견내용을 입력하세요"
+                  rows={4}
+                  className="min-h-[8rem] !text-xl"
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>검토결과</TableHead>
+              <TableCell>
+                <FieldSet>
+                  <RadioGroup
+                    value={formData.rvwRsltAnmlyYn}
+                    onValueChange={(value) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        rvwRsltAnmlyYn: value as ReviewOpinionFormData["rvwRsltAnmlyYn"],
+                      }))
+                    }
+                  >
+                    <div className="flex flex-wrap gap-4">
+                      <FieldLabel
+                        htmlFor={`rvw-opnn-normal-${reviewStep}`}
+                        className="!w-auto border-none"
+                      >
+                        <Field orientation="horizontal" className="w-auto">
+                          <RadioGroupItem value="N" id={`rvw-opnn-normal-${reviewStep}`} />
+                          <span className="font-normal">정상</span>
+                        </Field>
+                      </FieldLabel>
+                      <FieldLabel
+                        htmlFor={`rvw-opnn-abnormal-${reviewStep}`}
+                        className="!w-auto border-none"
+                      >
+                        <Field orientation="horizontal" className="w-auto">
+                          <RadioGroupItem value="Y" id={`rvw-opnn-abnormal-${reviewStep}`} />
+                          <span className="font-normal">이상</span>
+                        </Field>
+                      </FieldLabel>
+                    </div>
+                  </RadioGroup>
+                </FieldSet>
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>첨부파일</TableHead>
+              <TableCell>
+                <AttachmentFileField
+                  files={
+                    uploadedFile
+                      ? [
+                          {
+                            fileKey: uploadedFile.fileKey,
+                            fileName: uploadedFile.fileName,
+                            onDownload: uploadedFile.atflId
+                              ? () => downloadByAtflId(uploadedFile.atflId!)
+                              : undefined,
+                          },
+                        ]
+                      : []
+                  }
+                  inputId={`rvw-opnn-${reviewStep}-file-input`}
+                  isUploadingByKey={isUploading}
+                  multiple={false}
+                  showAddButton={!uploadedFile}
+                  addDisabled={uploading}
+                  onAdd={(fileList) => void handleFileUpload(fileList)}
+                  onRemove={() => void handleFileRemove()}
+                />
+              </TableCell>
+            </TableRow>
+          </TableHeader>
+        </Table>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {hasEnvSection ? (
+        <SectionCollapsible title={`${REVIEW_STEP_LABELS.ENV} 검토의견`}>
+          <div className="space-y-6">
+            {envRvwList.length > 0 ? <TechReviewOpinionTable items={envRvwList} /> : null}
+            {renderOpinionForm("ENV")}
+          </div>
+        </SectionCollapsible>
+      ) : null}
+      {hasKecoSection ? (
+        <SectionCollapsible title={`${REVIEW_STEP_LABELS.KECO} 검토의견`}>
+          <div className="space-y-6">
+            {kecoRvwList.length > 0 ? <TechReviewOpinionTable items={kecoRvwList} /> : null}
+            {/* 
+            재원협의에서 환경공단 검토의견은 자동 생성
+            {renderOpinionForm("KECO")}
+            */}
+          </div>
+        </SectionCollapsible>
+      ) : null}
+    </>
+  );
+});
+
+function TechReviewOpinionTable({ items }: TechReviewOpinionTableProps) {
+  return (
+    <div className="overflow-x-auto">
+      <Table variant="secondary">
+        <colgroup>
+          <col width="10%" />
+          <col width="55%" />
+          <col width="5%" />
+          <col width="20%" />
+          <col width="10%" />
+        </colgroup>
+        <TableHeader>
+          <TableRow>
+            <TableHead>의견자명</TableHead>
+            <TableHead>의견내용</TableHead>
+            <TableHead>검토결과</TableHead>
+            <TableHead>첨부파일</TableHead>
+            <TableHead>등록일시</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {items.map((item) => (
+            <TableRow key={`${item.fnrsCnsltnDocNo}_${item.rvwOpnnSn}`}>
+              <TableCell align="center">{item.opnrNm}</TableCell>
+              <TableCell align="left">{item.rvwRsltCn || "-"}</TableCell>
+              <TableCell align="center">
+                {item.rvwRsltAnmlyYn === "Y" ? "이상" : item.rvwRsltAnmlyYn === "N" ? "정상" : "-"}
+              </TableCell>
+              <TableCell align="center">
+                {item.atchFileInfo?.atflCd ? (
+                  <AttachmentDownloadLink
+                    atflCd={item.atchFileInfo.atflCd}
+                    fileName={item.atchFileInfo.orgnlFileNm || "다운로드"}
+                  />
+                ) : (
+                  "-"
+                )}
+              </TableCell>
+              <TableCell align="center">
+                {item.regDt ? dayjs(item.regDt).format("YYYY-MM-DD HH:mm:ss") : "-"}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+export { TechReviewOpinionSection };

apps/as/src/pages/instl-sncn/lib/button-config.ts

@@ -3,6 +3,7 @@ export const INSTL_SNCN_VIEW_BUTTON_ACTION = {
   aply: "aply",
   del: "del",
   instlSncnAncmnt: "instlSncnAncmnt",
+  envoSbmsn: "envoSbmsn",
   rjct: "rjct",
   sncnAprv: "sncnAprv",
   rvwRply: "rvwRply",
@@ -32,16 +33,14 @@ const ROLE_STATUS_BUTTON_ACTIONS: Record<string, Record<string, InstlSncnViewBut
     ],
     TA: [INSTL_SNCN_VIEW_BUTTON_ACTION.instlSncnAncmnt],
   },
-  // 환경청 단계 제거: 기존 환경청(LE·TP) 기능을 광역자치단체가 수행
-  ROLE_USER04: {
-    ST: [
-      INSTL_SNCN_VIEW_BUTTON_ACTION.rvwRply,
-      INSTL_SNCN_VIEW_BUTTON_ACTION.rqstTechRvw,
-      INSTL_SNCN_VIEW_BUTTON_ACTION.rjct,
-    ],
-    TP: [INSTL_SNCN_VIEW_BUTTON_ACTION.rvwRply],
-    EP: [INSTL_SNCN_VIEW_BUTTON_ACTION.sncnAprv],
-  },
+  ROLE_USER04: {
+    ST: [INSTL_SNCN_VIEW_BUTTON_ACTION.envoSbmsn, INSTL_SNCN_VIEW_BUTTON_ACTION.rjct],
+    EP: [INSTL_SNCN_VIEW_BUTTON_ACTION.sncnAprv],
+  },
+  ROLE_USER03: {
+    LE: [INSTL_SNCN_VIEW_BUTTON_ACTION.rvwRply, INSTL_SNCN_VIEW_BUTTON_ACTION.rqstTechRvw],
+    TP: [INSTL_SNCN_VIEW_BUTTON_ACTION.rvwRply],
+  },
 };
 
 const ROLE_USER01_ATRZ_STATUS_CODES = ["ER", "TE"] as const;

apps/as/src/pages/instl-sncn/lib/instl-sncn-regist-schema.ts

@@ -55,8 +55,16 @@ export const instlSncnRegistSchema = z.object({
       tstmDesignAmt: z.number(),
     }),
   ),
-  // 설치인가 화면에서 체크리스트 미사용: 숨겨진 값 때문에 신청·저장 검증이 막히지 않도록 필수값을 두지 않음
-  cklstResultList: z.array(instlSncnCklstResultItemSchema),
+  cklstResultList: z.array(
+    instlSncnCklstResultItemSchema.extend({
+      cklstSn: z.number(),
+      cklstArtclSn: z.number(),
+      cklstRvwSn: z.number(),
+      rvwStpComCd: z.string(),
+      selected: z.enum(["Y", "N"]).nullish(),
+      picRvwCn: z.string().nullish(),
+    }),
+  ),
   esntlAtchFileList: z.array(
     instlSncnEsntlAtchFileItemSchema.extend({
       esntlAtchFileId: z.string(),

apps/as/src/pages/instl-sncn/lib/review-step-utils.ts

@@ -50,7 +50,7 @@ export function getEditableReviewStep(
   dtlInstCd?: string,
   prgrsSttsComCd?: string,
 ): ReviewStepCode | undefined {
-  if (dtlInstCd === "ROLE_USER04" && (prgrsSttsComCd === "ST" || prgrsSttsComCd === "TP")) {
+  if (dtlInstCd === "ROLE_USER03" && (prgrsSttsComCd === "LE" || prgrsSttsComCd === "TP")) {
     return "ENV";
   }
 

apps/as/src/pages/instl-sncn/model/columns.tsx

@@ -1,231 +1,204 @@
-"use client";
-
-import { Fragment } from "react";
-
-import { createColumnHelper } from "@tanstack/react-table";
-
-import { dayjs } from "@/shared/lib";
-import type { InstlSncnMngResponseDto } from "@/entities/instl-sncn";
-import { Badge } from "@common/components";
-
-const columnHelper = createColumnHelper<InstlSncnMngResponseDto>();
-
-const MAIN_STEP_LABELS = {
-  apply: "설치인가 신청",
-  envoReview: "설치인가 검토",
-  techReview: "기술검토",
-  reply: "검토결과 회신",
-} as const;
-
-export const PROGRESS_STATUS_COLUMNS = [
-  { label: "설치인가 신청 (시군)", sttsComCd: "ST" },
-  { label: "설치인가 신청 (시도)", sttsComCd: "LE" },
-  { label: "설치인가 검토", sttsComCd: "ER" },
-  { label: "기술검토", sttsComCd: "TE" },
-  { label: "기술검토 회신", sttsComCd: "TP" },
-  { label: "검토결과 회신", sttsComCd: "EP" },
-  { label: "설치인가 승인", sttsComCd: "TA" },
-];
-
-type BadgeState = "completed" | "current" | "pending";
-
-interface ProgressBadge {
-  label: string;
-  state: BadgeState;
-}
-
-function buildProgressBadges(prgrsSttsComCd: string, techRplyHstryYn: "Y" | "N"): ProgressBadge[] {
-  if (prgrsSttsComCd === "SV") {
-    return [
-      { label: MAIN_STEP_LABELS.apply, state: "pending" },
-      { label: MAIN_STEP_LABELS.envoReview, state: "pending" },
-      { label: MAIN_STEP_LABELS.techReview, state: "pending" },
-      { label: MAIN_STEP_LABELS.reply, state: "pending" },
-    ];
-  }
-
-  if (prgrsSttsComCd === "ST") {
-    return [
-      { label: MAIN_STEP_LABELS.apply, state: "current" },
-      { label: MAIN_STEP_LABELS.envoReview, state: "pending" },
-      { label: MAIN_STEP_LABELS.techReview, state: "pending" },
-      { label: MAIN_STEP_LABELS.reply, state: "pending" },
-    ];
-  }
-
-  if (prgrsSttsComCd === "LE") {
-    return [
-      { label: MAIN_STEP_LABELS.apply, state: "completed" },
-      { label: MAIN_STEP_LABELS.envoReview, state: "current" },
-      { label: MAIN_STEP_LABELS.techReview, state: "pending" },
-      { label: MAIN_STEP_LABELS.reply, state: "pending" },
-    ];
-  }
-
-  if (prgrsSttsComCd === "ER" || prgrsSttsComCd === "TE" || prgrsSttsComCd === "SL") {
-    return [
-      { label: MAIN_STEP_LABELS.apply, state: "completed" },
-      { label: MAIN_STEP_LABELS.envoReview, state: "completed" },
-      { label: MAIN_STEP_LABELS.techReview, state: "current" },
-      { label: MAIN_STEP_LABELS.reply, state: "pending" },
-    ];
-  }
-
-  if (prgrsSttsComCd === "TP" || prgrsSttsComCd === "EP") {
-    return [
-      { label: MAIN_STEP_LABELS.apply, state: "completed" },
-      { label: MAIN_STEP_LABELS.envoReview, state: "completed" },
-      {
-        label: MAIN_STEP_LABELS.techReview,
-        state: techRplyHstryYn === "Y" ? "completed" : "pending",
-      },
-      { label: MAIN_STEP_LABELS.reply, state: "current" },
-    ];
-  }
-
-  if (prgrsSttsComCd === "TA" || prgrsSttsComCd === "TB") {
-    return [
-      { label: MAIN_STEP_LABELS.apply, state: "completed" },
-      { label: MAIN_STEP_LABELS.envoReview, state: "completed" },
-      {
-        label: MAIN_STEP_LABELS.techReview,
-        state: techRplyHstryYn === "Y" ? "completed" : "pending",
-      },
-      { label: MAIN_STEP_LABELS.reply, state: "completed" },
-    ];
-  }
-
-  return [
-    { label: MAIN_STEP_LABELS.apply, state: "pending" },
-    { label: MAIN_STEP_LABELS.envoReview, state: "pending" },
-    { label: MAIN_STEP_LABELS.techReview, state: "pending" },
-    { label: MAIN_STEP_LABELS.reply, state: "pending" },
-  ];
-}
-
-function getProgressStatusBadge(prgrsSttsComCd?: string | null) {
-  if (prgrsSttsComCd === "SL") {
-    return <Badge color="orange">보완요청</Badge>;
-  }
-  return null;
-}
-
-function getBadgeColor(state: BadgeState) {
-  switch (state) {
-    case "completed":
-      return "green";
-    case "current":
-      return "blue";
-    case "pending":
-      return "lightGray";
-  }
-}
-
-function getBadgeStateText(state: BadgeState) {
-  switch (state) {
-    case "completed":
-      return "완료";
-    case "current":
-      return "진행중";
-    case "pending":
-      return "대기";
-  }
-}
-
-/** 단계명을 2줄로 분리: "설치인가 신청" → ["설치인가", "신청"], "기술검토" → ["기술검토", ""] */
-function splitStepLabel(label: string) {
-  const [title = "", ...rest] = label.split(" ");
-  return { title, detail: rest.join(" ") };
-}
-
-function formatOptional(value: string | null | undefined) {
-  return value?.trim() ? value : "-";
-}
-
-interface ProgressStepBadgeProps {
-  prgrsSttsComCd: string;
-  techRplyHstryYn: "Y" | "N";
-}
-
-function ProgressStepBadge({ prgrsSttsComCd, techRplyHstryYn }: ProgressStepBadgeProps) {
-  const badges = buildProgressBadges(prgrsSttsComCd, techRplyHstryYn);
-
-  return (
-    <div className="flex flex-wrap items-center justify-center">
-      {badges.map((badge, index) => (
-        <Fragment key={badge.label}>
-          {index > 0 && <span className="mx-2">&gt;</span>}
-          {/* 1줄: 단계명 / 2줄: 세부단계 + 상태 (예: 설치인가 / 신청완료, 기술검토 / 완료) */}
-          <Badge
-            color={getBadgeColor(badge.state)}
-            className="w-[100px] flex-col justify-center !px-0 py-1 text-center leading-tight"
-          >
-            <span>{splitStepLabel(badge.label).title}</span>
-            <span>
-              {splitStepLabel(badge.label).detail}
-              {getBadgeStateText(badge.state)}
-            </span>
-          </Badge>
-        </Fragment>
-      ))}
-    </div>
-  );
-}
-
-export function createInstlSncnColumns() {
-  return [
-    columnHelper.accessor("sido", {
-      header: "시도",
-      meta: { align: "center" },
-      cell: ({ getValue }) => formatOptional(getValue()),
-    }),
-    columnHelper.accessor("gugun", {
-      header: "시군구",
-      meta: { align: "center" },
-      cell: ({ getValue }) => formatOptional(getValue()),
-    }),
-    columnHelper.accessor("bizNm", {
-      header: "사업명",
-      meta: { align: "left" },
-      cell: ({ row, getValue }) => (
-        <>
-          {getProgressStatusBadge(row.original.prgrsSttsComCd)} {formatOptional(getValue())}
-        </>
-      ),
-    }),
-    columnHelper.accessor("taskSeCdNm", {
-      header: "업무구분",
-      meta: { align: "center" },
-      cell: ({ row }) => formatOptional(row.original.taskSeCdNm || row.original.taskSeComCd),
-    }),
-    columnHelper.accessor("aplcntNm", {
-      header: "담당자",
-      meta: { align: "center" },
-      cell: ({ getValue }) => formatOptional(getValue()),
-    }),
-    columnHelper.accessor("envoSeCdNm", {
-      header: "해당기관",
-      meta: { align: "center" },
-      cell: ({ getValue }) => formatOptional(getValue()),
-    }),
-    columnHelper.display({
-      id: "progress",
-      header: "진행상황",
-      meta: { align: "center" },
-      cell: ({ row }) => (
-        <ProgressStepBadge
-          prgrsSttsComCd={row.original.prgrsSttsComCd || ""}
-          techRplyHstryYn={row.original.techRplyHstryYn || "N"}
-        />
-      ),
-    }),
-    columnHelper.accessor("regDt", {
-      header: "신청일",
-      meta: { align: "center" },
-      cell: ({ getValue }) => {
-        const value = getValue();
-        return value ? dayjs(value).format("YYYY-MM-DD") : "-";
-      },
-    }),
-  ];
-}
+"use client";
+
+import { Fragment } from "react";
+
+import { createColumnHelper } from "@tanstack/react-table";
+
+import { dayjs } from "@/shared/lib";
+import type { InstlSncnMngResponseDto } from "@/entities/instl-sncn";
+import { Badge } from "@common/components";
+
+const columnHelper = createColumnHelper<InstlSncnMngResponseDto>();
+
+const MAIN_STEP_LABELS = {
+  apply: "설치인가 신청",
+  envoReview: "설치인가 검토",
+  techReview: "기술검토",
+  reply: "검토결과 회신",
+} as const;
+
+export const PROGRESS_STATUS_COLUMNS = [
+  { label: "설치인가 신청 (시군)", sttsComCd: "ST" },
+  { label: "설치인가 신청 (시도)", sttsComCd: "LE" },
+  { label: "설치인가 검토", sttsComCd: "ER" },
+  { label: "기술검토", sttsComCd: "TE" },
+  { label: "기술검토 회신", sttsComCd: "TP" },
+  { label: "검토결과 회신", sttsComCd: "EP" },
+  { label: "설치인가 승인", sttsComCd: "TA" },
+];
+
+type BadgeState = "completed" | "current" | "pending";
+
+interface ProgressBadge {
+  label: string;
+  state: BadgeState;
+}
+
+function buildProgressBadges(prgrsSttsComCd: string, techRplyHstryYn: "Y" | "N"): ProgressBadge[] {
+  if (prgrsSttsComCd === "SV") {
+    return [
+      { label: MAIN_STEP_LABELS.apply, state: "pending" },
+      { label: MAIN_STEP_LABELS.envoReview, state: "pending" },
+      { label: MAIN_STEP_LABELS.techReview, state: "pending" },
+      { label: MAIN_STEP_LABELS.reply, state: "pending" },
+    ];
+  }
+
+  if (prgrsSttsComCd === "ST") {
+    return [
+      { label: MAIN_STEP_LABELS.apply, state: "current" },
+      { label: MAIN_STEP_LABELS.envoReview, state: "pending" },
+      { label: MAIN_STEP_LABELS.techReview, state: "pending" },
+      { label: MAIN_STEP_LABELS.reply, state: "pending" },
+    ];
+  }
+
+  if (prgrsSttsComCd === "LE") {
+    return [
+      { label: MAIN_STEP_LABELS.apply, state: "completed" },
+      { label: MAIN_STEP_LABELS.envoReview, state: "current" },
+      { label: MAIN_STEP_LABELS.techReview, state: "pending" },
+      { label: MAIN_STEP_LABELS.reply, state: "pending" },
+    ];
+  }
+
+  if (prgrsSttsComCd === "ER" || prgrsSttsComCd === "TE" || prgrsSttsComCd === "SL") {
+    return [
+      { label: MAIN_STEP_LABELS.apply, state: "completed" },
+      { label: MAIN_STEP_LABELS.envoReview, state: "completed" },
+      { label: MAIN_STEP_LABELS.techReview, state: "current" },
+      { label: MAIN_STEP_LABELS.reply, state: "pending" },
+    ];
+  }
+
+  if (prgrsSttsComCd === "TP" || prgrsSttsComCd === "EP") {
+    return [
+      { label: MAIN_STEP_LABELS.apply, state: "completed" },
+      { label: MAIN_STEP_LABELS.envoReview, state: "completed" },
+      {
+        label: MAIN_STEP_LABELS.techReview,
+        state: techRplyHstryYn === "Y" ? "completed" : "pending",
+      },
+      { label: MAIN_STEP_LABELS.reply, state: "current" },
+    ];
+  }
+
+  if (prgrsSttsComCd === "TA" || prgrsSttsComCd === "TB") {
+    return [
+      { label: MAIN_STEP_LABELS.apply, state: "completed" },
+      { label: MAIN_STEP_LABELS.envoReview, state: "completed" },
+      {
+        label: MAIN_STEP_LABELS.techReview,
+        state: techRplyHstryYn === "Y" ? "completed" : "pending",
+      },
+      { label: MAIN_STEP_LABELS.reply, state: "completed" },
+    ];
+  }
+
+  return [
+    { label: MAIN_STEP_LABELS.apply, state: "pending" },
+    { label: MAIN_STEP_LABELS.envoReview, state: "pending" },
+    { label: MAIN_STEP_LABELS.techReview, state: "pending" },
+    { label: MAIN_STEP_LABELS.reply, state: "pending" },
+  ];
+}
+
+function getProgressStatusBadge(prgrsSttsComCd?: string | null) {
+  if (prgrsSttsComCd === "SL") {
+    return <Badge color="orange">보완요청</Badge>;
+  }
+  return null;
+}
+
+function getBadgeColor(state: BadgeState) {
+  switch (state) {
+    case "completed":
+      return "green";
+    case "current":
+      return "blue";
+    case "pending":
+      return "lightGray";
+  }
+}
+
+function formatOptional(value: string | null | undefined) {
+  return value?.trim() ? value : "-";
+}
+
+interface ProgressStepBadgeProps {
+  prgrsSttsComCd: string;
+  techRplyHstryYn: "Y" | "N";
+}
+
+function ProgressStepBadge({ prgrsSttsComCd, techRplyHstryYn }: ProgressStepBadgeProps) {
+  const badges = buildProgressBadges(prgrsSttsComCd, techRplyHstryYn);
+
+  return (
+    <div className="flex flex-wrap items-center justify-start">
+      {badges.map((badge, index) => (
+        <Fragment key={badge.label}>
+          {index > 0 && <span className="mx-2">&gt;</span>}
+          <Badge color={getBadgeColor(badge.state)}>{badge.label}</Badge>
+        </Fragment>
+      ))}
+    </div>
+  );
+}
+
+export function createInstlSncnColumns() {
+  return [
+    columnHelper.accessor("sido", {
+      header: "시도",
+      meta: { align: "center" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.accessor("gugun", {
+      header: "시군구",
+      meta: { align: "center" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.accessor("bizNm", {
+      header: "사업명",
+      meta: { align: "left" },
+      cell: ({ row, getValue }) => (
+        <>
+          {getProgressStatusBadge(row.original.prgrsSttsComCd)} {formatOptional(getValue())}
+        </>
+      ),
+    }),
+    columnHelper.accessor("taskSeCdNm", {
+      header: "업무구분",
+      meta: { align: "center" },
+      cell: ({ row }) => formatOptional(row.original.taskSeCdNm || row.original.taskSeComCd),
+    }),
+    columnHelper.accessor("aplcntNm", {
+      header: "담당자",
+      meta: { align: "center" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.accessor("envoSeCdNm", {
+      header: "해당기관",
+      meta: { align: "center" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.display({
+      id: "progress",
+      header: "진행상황",
+      meta: { align: "center" },
+      cell: ({ row }) => (
+        <ProgressStepBadge
+          prgrsSttsComCd={row.original.prgrsSttsComCd || ""}
+          techRplyHstryYn={row.original.techRplyHstryYn || "N"}
+        />
+      ),
+    }),
+    columnHelper.accessor("regDt", {
+      header: "신청일",
+      meta: { align: "center" },
+      cell: ({ getValue }) => {
+        const value = getValue();
+        return value ? dayjs(value).format("YYYY-MM-DD") : "-";
+      },
+    }),
+  ];
+}

apps/as/src/pages/instl-sncn/model/view-types.ts

@@ -50,13 +50,13 @@ export const REVIEW_STEP_CODES: ReviewStepCode[] = ["LOCAL", "ENV", "KECO"];
 
 export const CHECKLIST_TAB_LABELS: Record<ReviewStepCode, string> = {
   LOCAL: "자가체크",
-  ENV: "광역자치단체검토",
+  ENV: "환경청검토",
   KECO: "기술검토",
 };
 
 export const REVIEW_STEP_LABELS: Record<ReviewStepCode, string> = {
   LOCAL: "지자체",
-  ENV: "광역자치단체",
+  ENV: "환경청",
   KECO: "환경공단",
 };
 
@@ -89,7 +89,7 @@ export const INSTL_PROGRESS_ORDER = [
 
 export const ROLE_TO_REVIEW_STEP: Record<string, ReviewStepCode> = {
   ROLE_USER05: "LOCAL",
-  ROLE_USER04: "ENV",
+  ROLE_USER03: "ENV",
   ROLE_USER01: "KECO",
 };
 

apps/as/src/pages/instl-sncn/ui/cnfm-view-page.tsx

@@ -0,0 +1,891 @@
+"use client";
+
+/* eslint-disable @typescript-eslint/no-explicit-any, simple-import-sort/imports */
+
+import { useEffect, useMemo, useState } from "react";
+import { Button } from "@common/components";
+import { useQuery } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+
+// InstlSncnApi imported below with types
+import { PROXY_HOST } from "@/shared/config";
+import { formatFileSize } from "@/shared/lib/file-utils";
+import axios from "axios";
+import { processElaprPrgrs } from "@/entities/elapr/api/elapr-prgrs-service";
+import { ElaprDmndApi } from "@/entities/elapr/api/elapr-dmnd-service";
+import { dayjs, useUserStore, useAlertStore } from "@/shared/lib";
+import { InstlSncnApi, type InstlSncnApplySaveRequestDto } from "@/entities/instl-sncn";
+import { client } from "@/shared/api";
+
+import "./cnfm-page.css";
+
+type ReviewStepCode = "LOCAL" | "ENV" | "KECO";
+const REVIEW_STEP_CODES: ReviewStepCode[] = ["LOCAL", "ENV", "KECO"];
+const ROLE_TO_REVIEW_STEP: Record<string, ReviewStepCode> = {
+  ROLE_USER05: "LOCAL",
+  ROLE_USER04: "LOCAL",
+  ROLE_USER03: "ENV",
+  ROLE_USER02: "KECO",
+  ROLE_USER01: "KECO",
+};
+const REVIEW_STEP_ROLE_RANK: Record<ReviewStepCode, number> = {
+  LOCAL: 1,
+  ENV: 2,
+  KECO: 3,
+};
+const INSTL_PROGRESS_ORDER = [
+  "SV",
+  "ST",
+  "LE",
+  "ER",
+  "EE",
+  "TE",
+  "TS",
+  "TR",
+  "TP",
+  "EP",
+  "TA",
+  "TB",
+];
+
+const getProgressStepCount = (prgrsSttsComCd?: string): number => {
+  const idx = INSTL_PROGRESS_ORDER.indexOf(prgrsSttsComCd ?? "ST");
+  if (idx <= INSTL_PROGRESS_ORDER.indexOf("ST")) return 1;
+  if (idx <= INSTL_PROGRESS_ORDER.indexOf("TP")) return 2;
+  return 3;
+};
+
+const getRoleStepCount = (dtlInstCd?: string): number => {
+  const mapped = dtlInstCd ? ROLE_TO_REVIEW_STEP[dtlInstCd] : undefined;
+  return mapped ? REVIEW_STEP_ROLE_RANK[mapped] : 0;
+};
+
+// 업무구분 코드 -> 표시명 매핑 (체크리스트 그룹 표시용)
+const TASK_CODE_LABELS: Record<string, string> = {
+  RE: "재이용수",
+  SP: "하수관로",
+  SF: "하수처리시설",
+};
+
+const normalizeChecklistResultMap = (
+  raw: unknown,
+): Record<ReviewStepCode, any[]> => {
+  const base: Record<ReviewStepCode, any[]> = { LOCAL: [], ENV: [], KECO: [] };
+  if (!raw) return base;
+
+  if (Array.isArray(raw)) {
+    raw.forEach((row: any) => {
+      const step = (row?.rvwStpComCd ?? "LOCAL") as ReviewStepCode;
+      if (REVIEW_STEP_CODES.includes(step)) {
+        base[step].push(row);
+      }
+    });
+    return base;
+  }
+
+  if (typeof raw === "object") {
+    REVIEW_STEP_CODES.forEach((step) => {
+      const rows = (raw as Record<string, unknown>)[step];
+      base[step] = Array.isArray(rows) ? (rows as any[]) : [];
+    });
+  }
+
+  return base;
+};
+
+function CnfmViewPage({ id }: { id: string }) {
+  const router = useRouter();
+  const userInfo = useUserStore((state) => state.userInfo);
+
+  const alert = useAlertStore((state) => state.setMessage);
+
+  const query = useQuery({
+    queryKey: ["instl-sncn-detail", id],
+    queryFn: () => InstlSncnApi.getById(id),
+  });
+
+  const data = (query.data ?? {}) as any;
+
+  // support API shape where payload includes detDto + lists
+  const det = data.detDto ?? data;
+  const bizSclList = data.bizSclList ?? [];
+  const bizCstList = data.bizCstList ?? [];
+  // API now provides a flat checklist result list: `cklstResultList`
+  const rawCklst = useMemo(() => data.cklstResultList ?? [], [data.cklstResultList]);
+
+  // ensure we have a flat array
+  const cklstAll = useMemo(() => (Array.isArray(rawCklst) ? (rawCklst as any[]) : []), [rawCklst]);
+
+  // build a step-keyed map from the flat list so the rest of the view can use same access pattern
+  const cklstResultMap = useMemo(() => {
+    const base: Record<ReviewStepCode, any[]> = { LOCAL: [], ENV: [], KECO: [] };
+    (cklstAll ?? []).forEach((row: any) => {
+      const step = (row?.rvwStpComCd ?? "LOCAL") as ReviewStepCode;
+      if (REVIEW_STEP_CODES.includes(step)) base[step].push(row);
+    });
+    return base;
+  }, [cklstAll]);
+  const esntlFileList = data.esntlFileList ?? [];
+  const etcFileList = data.etcFileList ?? [];
+  const elaprDocPrgrsList = (data.elaprDocPrgrsList ?? []) as any[];
+  const renderApproverCell = (code: string) => {
+    const row = elaprDocPrgrsList.find((r) => r.atrzSeComCd === code);
+    if (!row) return <div className="text-center">-</div>;
+    const status = row.atrzPrgrsSttsComCd ?? "";
+    const statusMap: Record<string, { label: string; badgeClass: string; icon: string }> = {
+      ATRZ_PRGRS_001: { label: "대기", badgeClass: "bg-gray-100 text-gray-700", icon: "⏳" },
+      ATRZ_PRGRS_002: { label: "요청", badgeClass: "bg-yellow-100 text-yellow-800", icon: "📨" },
+      ATRZ_PRGRS_003: { label: "승인", badgeClass: "bg-green-100 text-green-800", icon: "✔️" },
+      ATRZ_PRGRS_004: { label: "반려", badgeClass: "bg-red-100 text-red-800", icon: "✖️" },
+    };
+    const st = statusMap[status] ?? { label: status || "", badgeClass: "bg-gray-100 text-gray-700", icon: "" };
+    return (
+      <div className="text-center">
+        <div className="font-semibold">{row.aprvrUuidNm ?? "-"}</div>
+        <div className="text-[0.95rem] text-gray-500">
+          {row.ognzNm ? `${row.ognzNm}` : ""}
+          {row.jbpsSeNm || row.jbgdSeNm ? ` · ${row.jbpsSeNm ?? ""}${row.jbgdSeNm ? ` ${row.jbgdSeNm}` : ""}` : ""}
+        </div>
+        <div className="text-[0.9rem] mt-1 flex items-center justify-center gap-2">
+          {row.atrzDt ? <span className="text-gray-400">{dayjs(row.atrzDt).format("YYYY-MM-DD HH:mm:ss")}</span> : null}
+          {st.label ? (
+            <span
+              title={`${row.atrzPrgrsSttsComNm ?? st.label}${row.rjctRsn ? ` — 사유: ${row.rjctRsn}` : ""}${row.atrzDt ? ` · ${dayjs(row.atrzDt).format("YYYY-MM-DD HH:mm:ss")}` : ""}`}
+              className={`inline-flex items-center px-2 py-0.5 rounded-md text-xs font-semibold ml-1 ${st.badgeClass}`}
+            >
+              <span className="mr-1">{st.icon}</span>
+              <span>{st.label}</span>
+            </span>
+          ) : null}
+        </div>
+      </div>
+    );
+  };
+  const orderedApprovers = useMemo(() => {
+    return (elaprDocPrgrsList ?? []).slice().sort((a: any, b: any) => {
+      const A = Number(a?.atrzSeqNo ?? 0);
+      const B = Number(b?.atrzSeqNo ?? 0);
+      return A - B;
+    });
+  }, [elaprDocPrgrsList]);
+
+  const handleApproveClick = async (elaprPrgrsId: any, atrzSeComCd: any) => {
+    if (!elaprPrgrsId) {
+      alert("결재 정보가 올바르지 않습니다.");
+      return;
+    }
+    try {
+      await processElaprPrgrs(String(elaprPrgrsId), "ATRZ_PRGRS_003"); //진행상태를 승인으로 업데이트
+      alert("결재가 완료되었습니다.");
+      try {
+        await query.refetch();
+      } catch (e) {
+        /* ignore refetch errors */
+      }
+    } catch (err: any) {
+      console.error("결재 처리 실패", err);
+      const msg = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : "결재 처리 중 오류가 발생했습니다.";
+      alert(msg);
+    }
+  };
+
+  const handleAssignApproverClick = async (elaprTmpltId: string) => {
+    try {
+      const payload = {
+        elaprDocNo: det.instlSncnDocNo,
+        elaprTmpltId: elaprTmpltId, /* 팝업에서 선택된 전자결제 템플릿 */
+        dmndTtl: det.bizNm, /* "구례 하수도 처리시설 2026", */
+        dmndCn: det.bizCn /*"구례 발주 하수도 처리시설 사업 2026년도 진행분 결제 요청 입니다."*/
+      };
+      // ElaprDmndApi 서비스를 통해 백엔드 연동
+      await ElaprDmndApi.create(payload);
+      alert("결재자 지정(결재요청 등록)이 완료되었습니다.");
+      try {
+        await query.refetch();
+      } catch (e) {
+        /* ignore refetch errors */
+      }
+    } catch (err: any) {
+      console.error("결재자 지정 실패", err);
+      const msg = axios.isAxiosError(err) && err.response?.data?.message ? err.response.data.message : "결재자 지정 중 오류가 발생했습니다.";
+      alert(msg);
+    }
+  };
+
+  const renderApproverRow = (row: any) => {
+    if (!row) return <div className="text-center">-</div>;
+    const status = row.atrzPrgrsSttsComCd ?? "";
+    const statusMap: Record<string, { label: string; badgeClass: string; icon: string }> = {
+      ATRZ_PRGRS_001: { label: "대기", badgeClass: "bg-gray-100 text-gray-700", icon: "⏳" },
+      ATRZ_PRGRS_002: { label: "요청", badgeClass: "bg-yellow-100 text-yellow-800", icon: "📨" },
+      ATRZ_PRGRS_003: { label: "승인", badgeClass: "bg-green-100 text-green-800", icon: "✔️" },
+      ATRZ_PRGRS_004: { label: "반려", badgeClass: "bg-red-100 text-red-800", icon: "✖️" },
+    };
+    const st = statusMap[status] ?? { label: status || "", badgeClass: "bg-gray-100 text-gray-700", icon: "" };
+    return (
+      <div className="text-center">
+        <div className="font-semibold">{row.aprvrUuidNm ?? "-"}</div>
+        <div className="text-[0.95rem] text-gray-500">
+          {row.ognzNm ? `${row.ognzNm}` : ""}
+          {row.jbpsSeNm || row.jbgdSeNm ? ` · ${row.jbpsSeNm ?? ""}${row.jbgdSeNm ? ` ${row.jbgdSeNm}` : ""}` : ""}
+        </div>
+        <div className="text-[0.9rem] mt-1 flex items-center justify-center gap-2">
+          {row.atrzDt ? <span className="text-gray-400">{dayjs(row.atrzDt).format("YYYY-MM-DD HH:mm:ss")}</span> : null}
+          {st.label ? (
+            <>
+              <span
+                title={`${row.atrzPrgrsSttsComNm ?? st.label}${row.rjctRsn ? ` — 사유: ${row.rjctRsn}` : ""}${row.atrzDt ? ` · ${dayjs(row.atrzDt).format("YYYY-MM-DD HH:mm:ss")}` : ""}`}
+                className={`inline-flex items-center px-2 py-0.5 rounded-md text-xs font-semibold ml-1 ${st.badgeClass}`}
+              >
+                <span className="mr-1">{st.icon}</span>
+                <span>{st.label}</span>
+              </span>
+              {status === "ATRZ_PRGRS_002" && userInfo?.userUnqId === row.aprvrUuid ? (
+                <button
+                  type="button"
+                  onClick={() => handleApproveClick(row.elaprPrgrsId, row.atrzSeComCd)}
+                  className="ml-2 px-2 py-1 bg-blue-500 text-white text-xs rounded"
+                >
+                  결제
+                </button>
+              ) : null}
+            </>
+          ) : null}
+        </div>
+      </div>
+    );
+  };
+  const currentPrgrsSttsComCd = (det.prgrsSttsComCd as string | undefined) ?? "ST";
+  const roleBasedMaxStepCount = getRoleStepCount(userInfo?.dtlInstCd);
+  const progressBasedMaxStepCount = getProgressStepCount(currentPrgrsSttsComCd);
+  const visibleStepCount = Math.min(progressBasedMaxStepCount, roleBasedMaxStepCount);
+  const visibleReviewStepCodes = useMemo(
+    () => REVIEW_STEP_CODES.slice(0, visibleStepCount),
+    [visibleStepCount],
+  );
+  const [selectedReviewStep, setSelectedReviewStep] = useState<ReviewStepCode>("LOCAL");
+  // selected task code for header filtering (null = none selected)
+  const [selectedTaskCode, setSelectedTaskCode] = useState<string | null>(null);
+
+  // derive available task codes from checklist results
+  const taskCodes = useMemo(() => {
+    return Array.from(new Set((cklstAll ?? []).map((r: any) => (r as any).taskSeComCd).filter(Boolean)));
+  }, [cklstAll]);
+
+  useEffect(() => {
+    if (visibleReviewStepCodes.length === 0) return;
+    if (!visibleReviewStepCodes.includes(selectedReviewStep)) {
+      setSelectedReviewStep(visibleReviewStepCodes[visibleReviewStepCodes.length - 1]);
+    }
+  }, [selectedReviewStep, visibleReviewStepCodes]);
+
+  // when checklist result task codes change, default selectedTaskCode to first available code
+  useEffect(() => {
+    if (!taskCodes || taskCodes.length === 0) {
+      if (selectedTaskCode !== null) setSelectedTaskCode(null);
+      return;
+    }
+    if (!selectedTaskCode || !taskCodes.includes(selectedTaskCode)) {
+      setSelectedTaskCode(taskCodes[0]);
+    }
+  }, [taskCodes, selectedTaskCode]);
+
+  const selectedChecklistRows = useMemo(() => {
+    if (visibleReviewStepCodes.length === 0) return [];
+    const rows = (cklstResultMap[selectedReviewStep] ?? []).filter((r: any) =>
+      selectedTaskCode ? (r.taskSeComCd ?? "") === selectedTaskCode : true,
+    );
+    return rows
+      .slice()
+      .sort((a: any, b: any) =>
+        (a.cklstArtclSn ?? 0) - (b.cklstArtclSn ?? 0) || (a.sortSeq ?? 0) - (b.sortSeq ?? 0) || (a.cklstRvwSn ?? 0) - (b.cklstRvwSn ?? 0),
+      );
+  }, [cklstResultMap, selectedReviewStep, visibleReviewStepCodes.length, selectedTaskCode]);
+
+  const [viewCheckResults, setViewCheckResults] = useState<Record<string, string>>({});
+  const [viewCheckComments, setViewCheckComments] = useState<Record<string, string>>({});
+
+  const cklstStats = useMemo(() => {
+    if (!selectedReviewStep) return { total: 0, completed: 0, percent: 0 };
+    const rows = (cklstResultMap[selectedReviewStep] ?? []).filter((r: any) => r.bchckUseYn === "Y" && (selectedTaskCode ? (r.taskSeComCd ?? "") === selectedTaskCode : true));
+    const total = rows.length;
+    const completed = rows.reduce((acc: number, row: any) => {
+      const key = `${row.taskSeComCd ?? ""}_${row.cklstSn}_${row.cklstArtclSn ?? ""}_${row.cklstRvwSn}_${selectedReviewStep}`;
+      const val = (viewCheckResults[key] ?? row.rvwRsltAnmlyYn) ?? "";
+      return acc + (val ? 1 : 0);
+    }, 0);
+    const percent = total > 0 ? Math.round((completed / total) * 100) : 0;
+    return { total, completed, percent };
+  }, [cklstResultMap, viewCheckResults, selectedReviewStep, selectedTaskCode]);
+
+  const fnValidation = (mode: "SAVE" | "SUBMIT") => {
+    // 기본 검증: 필요하면 확장
+    return true;
+  };
+
+  const hadleTechReviewSubmit = async () => {
+    if (!fnValidation("SAVE")) return;
+
+    const cklstResultList = (cklstAll ?? [])
+      .filter((r: any) => r.bchckUseYn === "Y")
+      .map((row: any) => {
+        const key = `${row.taskSeComCd ?? ""}_${row.cklstSn}_${row.cklstArtclSn ?? ""}_${row.cklstRvwSn}_${selectedReviewStep}`;
+        const rvwRsltAnmlyYn = (viewCheckResults[key] ?? row.rvwRsltAnmlyYn) ?? null;
+        const picRvwCn = (viewCheckComments[key] ?? row.picRvwCn) ?? null;
+        return {
+          taskSeComCd: row.taskSeComCd ?? "",
+          cklstSn: row.cklstSn,
+          cklstArtclSn: row.cklstArtclSn,
+          cklstRvwSn: row.cklstRvwSn,
+          rvwStpComCd: selectedReviewStep,
+          rvwRsltAnmlyYn,
+          picRvwCn,
+        };
+      });
+
+    const payload: InstlSncnApplySaveRequestDto = {
+      // only map core management DTO and checklist results; other lists empty per request
+      instlSncnMng: { ...(det ?? {}), prgrsSttsComCd: "ER" } as any,
+      bzScaleList: [],
+      bizCstList: [],
+      cklstResultList,
+      esntlAtchFileList: [],
+    } as unknown as InstlSncnApplySaveRequestDto;
+
+    try {
+      const issuedDocNo = await InstlSncnApi.techReview(payload);
+      alert(`기술검토 등록이 완료되었습니다. 문서번호: ${issuedDocNo}`);
+    } catch (error) {
+      console.error("기술검토 등록 API 호출 실패", error);
+      const serverMessage =
+        axios.isAxiosError(error) && error.response?.data?.message
+          ? (error.response.data as { message: string }).message
+          : "저장 중 오류가 발생했습니다.";
+      alert(serverMessage);
+    }
+  };
+
+  useEffect(() => {
+    const results: Record<string, string> = {};
+    const comments: Record<string, string> = {};
+    (selectedChecklistRows ?? []).forEach((row: any) => {
+      const key = `${row.taskSeComCd ?? ""}_${row.cklstSn}_${row.cklstArtclSn ?? ""}_${row.cklstRvwSn}_${row.rvwStpComCd ?? "LOCAL"}`;
+      if (row.rvwRsltAnmlyYn === "Y" || row.rvwRsltAnmlyYn === "N") results[key] = row.rvwRsltAnmlyYn;
+      if (row.picRvwCn) comments[key] = String(row.picRvwCn);
+    });
+    setViewCheckResults(results);
+    setViewCheckComments(comments);
+  }, [selectedChecklistRows]);
+
+  if (query.isLoading) {
+    return <div className="mt-6 text-[1.4rem]">상세 정보를 불러오는 중입니다...</div>;
+  }
+
+  if (!query.data) {
+    return <div className="mt-6 text-[1.4rem]">상세 정보를 찾을 수 없습니다.</div>;
+  }
+
+  const fmt = (v: number | null | undefined) =>
+    typeof v === "number" ? v.toLocaleString() : v === null || v === undefined ? "" : String(v);
+
+  const indentPx = (indNm: string | undefined) => {
+    if (!indNm) return 0;
+    const spaces = indNm.length - indNm.trimStart().length;
+    return (spaces / 4) * 16;
+  };
+
+  /* formatFileSize moved to shared lib: @/shared/lib/file-utils */
+
+  return (
+    <div className="mt-6 space-y-4">
+      {/* orderedApprovers.length > 0 && ( */}
+      <div className="cnfm-card p-4">
+        <h3 className="text-[1.5rem] font-semibold">결재 정보</h3>
+        <div className="cnfm-table-wrap mt-3">
+          <table className="cnfm-table w-full">
+            <thead>
+              <tr>
+                {orderedApprovers.length === 0 ? (
+                  <>
+                    <th className="text-center">접수자</th>
+                    <th className="text-center">검토자</th>
+                    <th className="text-center">승인자</th>
+                    <th className="text-center">최종승인자</th>
+                  </>
+                ) : (
+                  orderedApprovers.map((r: any) => (
+                    <th key={String(r.elaprPrgrsId ?? r.atrzSeComCd)} className="text-center">
+                      {r.atrzSeComNm ?? r.atrzSeComCd}
+                    </th>
+                  ))
+                )}
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                {orderedApprovers.length === 0 ? (
+                  <>
+                    <td>{renderApproverCell("ATRZ01")}</td>
+                    <td>{renderApproverCell("ATRZ02")}</td>
+                    <td>{renderApproverCell("ATRZ03")}</td>
+                    <td>{renderApproverCell("ATRZ99")}</td>
+                  </>
+                ) : (
+                  orderedApprovers.map((r: any) => (
+                    <td key={String(r.elaprPrgrsId ?? r.atrzSeComCd)}>{renderApproverRow(r)}</td>
+                  ))
+                )}
+              </tr>
+            </tbody>
+          </table>
+          {/** 결제자 지정 버튼 */}
+          <div className="mt-4 text-right">
+            <Button
+              type="button"
+              onClick={() => handleAssignApproverClick("TMPLT20260611000001")}
+            >
+              결재자 지정
+            </Button>
+          </div>
+        </div>
+      </div>
+      {/* )} */}
+      <div className="cnfm-card p-4">
+        <h2 className="cnfm-section-title">설치인가 상세보기</h2>
+        <p className="mt-2 text-[1.3rem] text-gray-600">문서번호: <strong>{det.instlSncnDocNo}</strong></p>
+      </div>
+
+      <div className="cnfm-card p-4">
+        <h3 className="text-[1.5rem] font-semibold">기본 정보</h3>
+        <table className="cnfm-form-table mt-3">
+          <tbody>
+            <tr>
+              <th>사업명</th>
+              <td>{det.bizNm || "-"}</td>
+              <th>사업기간</th>
+              <td>{(det.bizBgngYr || "-") + " ~ " + (det.bizEndYr || "-")}</td>
+            </tr>
+            <tr>
+              <th>사업내용</th>
+              <td colSpan={3}>{det.bizCn || "-"}</td>
+            </tr>
+            <tr>
+              <th>구분</th>
+              <td>{det.taskSeCdNm || det.taskSeComCd || "-"}</td>
+              <th>신청지자체</th>
+              <td>{det.sido || "-"} {det.gugun || "-"}</td>
+            </tr>
+            <tr>
+              <th>사업구분</th>
+              <td colSpan={3}>{det.sncnSeCdNm || "-"}</td>
+            </tr>
+            <tr>
+              <th>진행상태</th>
+              <td>{det.prgrsSttsCdNm || det.prgrsSttsComCd || "-"}</td>
+              <th>예산사업코드</th>
+              <td>{det.bgtBizCd || "-"}</td>
+            </tr>
+
+          </tbody>
+        </table>
+      </div>
+
+      <div className="cnfm-card p-4">
+        <h3 className="text-[1.5rem] font-semibold">담당자 정보</h3>
+        <table className="cnfm-form-table mt-3">
+          <tbody>
+            <tr>
+              <th>신청자명</th>
+              <td>{det.aplcntNm || "-"}</td>
+              <th>신청자 연락처</th>
+              <td>{det.aplcntMblTelno || "-"}</td>
+            </tr>
+            <tr>
+              <th>신청자 소속</th>
+              <td>{det.aplcntOgdpNm || "-"}</td>
+              <th>신청자 이메일</th>
+              <td>{det.aplcntEmlAddr || "-"}</td>
+            </tr>
+            <tr>
+              <th>설계자명</th>
+              <td>{det.dsgnrNm || "-"}</td>
+              <th>설계자 연락처</th>
+              <td>{det.dsgnrTelno || "-"}</td>
+            </tr>
+            <tr>
+              <th>설계자 소속</th>
+              <td>{det.dsgnrOgdpNm || "-"}</td>
+              <th>설계자 이메일</th>
+              <td>{det.dsgnrEmlAddr || "-"}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div className="cnfm-card p-4">
+        <h3 className="text-[1.5rem] font-semibold">이력 정보</h3>
+        <table className="cnfm-form-table mt-3">
+          <tbody>
+            <tr>
+              <th>등록일시</th>
+              <td>{det.regDt ? dayjs(det.regDt).format("YYYY-MM-DD HH:mm:ss") : "-"}</td>
+              <th>수정일시</th>
+              <td>{det.mdfcnDt ? dayjs(det.mdfcnDt).format("YYYY-MM-DD HH:mm:ss") : "-"}</td>
+            </tr>
+            <tr>
+              <th>등록자명</th>
+              <td>{det.rgtrNm || "-"}</td>
+              <th>첨부파일그룹ID</th>
+              <td>{det.atchFileGroupId || "-"}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      {/* 사업규모 */}
+      <div className="cnfm-card p-4">
+        <h3 className="mb-3 border-b pb-2 text-[1.5rem] font-bold text-gray-700">사업규모</h3>
+        <div className="cnfm-table-wrap">
+          <table className="cnfm-table">
+            <thead>
+              <tr>
+                <th className="w-[30rem]">구분</th>
+                <th>기본계획(A)</th>
+                <th>예산반영(B)</th>
+                <th>금회설계시(C)</th>
+                <th>증감(C-B)</th>
+              </tr>
+            </thead>
+            <tbody>
+              {bizSclList.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="cnfm-td-empty">조회된 사업규모 항목이 없습니다.</td>
+                </tr>
+              ) : (
+                bizSclList.map((node: any) => {
+                  const pl = indentPx(node.indCnstpSeCdNm);
+                  const bscPlanQty = Number(node.bscPlanQty) || 0;
+                  const budgetReflct = Number(node.bgtRfltQty) || 0;
+                  const tstmDesignQty = Number(node.tstmDesignQty) || 0;
+                  const diff = tstmDesignQty - budgetReflct;
+                  return (
+                    <tr key={node.cnstpSeCd} className={node.treeLevel === 1 ? "bg-gray-50 font-semibold" : ""}>
+                      <td className="bg-gray-50 pl-2 text-left" style={{ paddingLeft: `${pl + 8}px` }}>{node.cnstpSeCdNm}</td>
+                      <td><div className="text-right">{fmt(bscPlanQty)}</div></td>
+                      <td><div className="text-right">{fmt(budgetReflct)}</div></td>
+                      <td><div className="text-right">{fmt(tstmDesignQty)}</div></td>
+                      <td><div className="text-right">{diff > 0 ? `+${fmt(diff)}` : fmt(diff)}</div></td>
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* 총사업비 */}
+      <div className="cnfm-card p-4">
+        <h3 className="mb-3 border-b pb-2 text-[1.5rem] font-bold text-gray-700">총사업비 <span className="text-[1.2rem] font-normal text-gray-400">(단위: 백만원)</span></h3>
+        <div className="cnfm-table-wrap">
+          <table className="cnfm-table w-full table-fixed">
+            <thead>
+              <tr>
+                <th colSpan={2} className="w-[30rem]" rowSpan={2}>
+                  구분
+                </th>
+                <th rowSpan={2}>예산반영(A)</th>
+                <th rowSpan={2}>표준사업비(B)</th>
+                <th rowSpan={2}>금회설계시(C)</th>
+                <th colSpan={2}>증감</th>
+              </tr>
+              <tr>
+                <th className="w-[12rem]">(C-B)</th>
+                <th className="w-[6rem]">%</th>
+              </tr>
+            </thead>
+            <tbody>
+              {bizCstList.map((node: any) => {
+
+                const pl = indentPx(node.indAcntgSeCdNm);
+                const bscPlanAmt = Number(node.bscPlanAmt) || 0;
+                const budgetReflct = Number(node.bgtRfltAmt) || 0;
+                const tstmDesignAmt = Number(node.tstmDesignAmt) || 0;
+                const diff = tstmDesignAmt - budgetReflct;
+                const showSubIcon = node.treeLevel >= 4;
+                const isLeaf = !bizCstList.some((n: any) => n.upAcntgSeCd === node.acntgSeCd);
+                return (
+                  <tr
+                    key={node.acntgSeCd}
+                    className={
+                      node.treeLevel === 1
+                        ? "bg-blue-50 font-bold"
+                        : node.treeLevel === 2
+                          ? "bg-gray-100 font-semibold"
+                          : ""
+                    }
+                  >
+                    {node.treeLevel <= 2 ? (
+                      <td colSpan={2} className="pl-2 text-left">{node.acntgSeCdNm}</td>
+                    ) : (
+                      <>
+                        <td className="w-[4rem]"></td>
+                        <td
+                          className={`bg-gray-50 text-left ${isLeaf ? "text-gray-700" : ""}`}
+                          style={{ paddingLeft: `${pl + 8}px` }}
+                        >
+                          {showSubIcon && <span className="mr-1 text-gray-400">└</span>}
+                          {node.acntgSeCdNm}
+                        </td>
+                      </>
+                    )}
+
+                    <td>
+                      <div className="text-right">{fmt(bscPlanAmt)}</div>
+                    </td>
+                    <td>
+                      <div className="text-right">{fmt(budgetReflct)}</div>
+                    </td>
+                    <td>
+                      <div className="text-right">{fmt(tstmDesignAmt)}</div>
+                    </td>
+                    <td>
+                      <div className="text-right">{diff > 0 ? `+${fmt(diff)}` : fmt(diff)}</div>
+                    </td>
+                    <td>
+                      <div className="text-right">{budgetReflct !== 0 ? `${Math.round((diff / budgetReflct) * 100)}%` : "-"}</div>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* 체크리스트 */}
+      <div className="cnfm-card p-4">
+        <div className="mb-3 flex items-center justify-between">
+          <h3 className="text-[1.5rem] font-bold text-gray-700">체크리스트</h3>
+          <div className="flex items-center gap-4">
+            <div className="flex gap-2 items-center">
+              {Array.from(new Set(taskCodes)).map((code) => {
+                const name = TASK_CODE_LABELS[code] ?? code;
+                const active = selectedTaskCode === code;
+                return (
+                  <button
+                    key={code}
+                    type="button"
+                    className={`rounded border px-3 py-1 text-[1.2rem] font-semibold ${active ? "border-blue-500 bg-blue-50 text-blue-700" : "border-gray-300 bg-white text-gray-600"
+                      }`}
+                    onClick={() => setSelectedTaskCode(code)}
+                  >
+                    {name}
+                  </button>
+                );
+              })}
+            </div>
+            <div className="text-[1.1rem] text-gray-500">{`(${cklstStats.completed}/${cklstStats.total})`}</div>
+          </div>
+        </div>
+        <div className="mb-3 flex flex-wrap gap-2">
+          {visibleReviewStepCodes.length === 0 ? (
+            <span className="text-[1.2rem] text-gray-500">
+              현재 사용자 권한/진행상태 조합에서 표시 가능한 체크리스트 단계가 없습니다.
+            </span>
+          ) : (
+            visibleReviewStepCodes.map((stepCode) => (
+              <button
+                key={stepCode}
+                type="button"
+                className={`rounded border px-3 py-1 text-[1.2rem] font-semibold ${selectedReviewStep === stepCode
+                  ? "border-blue-500 bg-blue-50 text-blue-700"
+                  : "border-gray-300 bg-white text-gray-600"
+                  }`}
+                onClick={() => setSelectedReviewStep(stepCode)}
+              >
+                {stepCode}
+              </button>
+            ))
+          )}
+        </div>
+        <div className="mb-2 text-[1.25rem] text-gray-500">
+          체크리스트 진행상황 [{selectedReviewStep}] — 총합: <strong>{cklstStats.total}</strong> · 완료: <strong>{cklstStats.completed}</strong> · 진행률: <strong>{cklstStats.percent}%</strong>
+        </div>
+        <div className="cnfm-table-wrap mt-3">
+          <table className="cnfm-table">
+            <thead>
+              <tr>
+                <th className="w-[20rem]" rowSpan={2}>검토항목</th>
+                <th rowSpan={2}>주요 검토내용</th>
+                <th colSpan={2}>검토 결과(✓)</th>
+                {selectedReviewStep !== "LOCAL" ? (
+                  <th rowSpan={2} className="w-[20rem]">기술검토 의견</th>
+                ) : null}
+              </tr>
+              <tr>
+                <th className="w-[9rem]">
+                  <button
+                    type="button"
+                  >
+                    예
+                  </button>
+                </th>
+                <th className="w-[9rem]">
+                  <button
+                    type="button"
+                  >
+                    아니오
+                  </button>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {selectedChecklistRows.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="cnfm-td-empty">조회된 체크리스트 항목이 없습니다.</td>
+                </tr>
+              ) : (
+                selectedChecklistRows.map((row: any) => {
+                  const key = `${row.taskSeComCd ?? ""}_${row.cklstSn}_${row.cklstArtclSn ?? ""}_${row.cklstRvwSn}_${row.rvwStpComCd ?? "LOCAL"}`;
+                  const hasResult = row.rvwRsltAnmlyYn === "Y" || row.rvwRsltAnmlyYn === "N";
+                  const showRadios = row.bchckUseYn === "Y";
+
+                  return (
+                    <tr key={key}>
+                      <td className="text-center text-[1.2rem]">{row.cklstArtclNm}</td>
+                      <td className="!text-left pl-2 text-[1.2rem] text-gray-600" style={{ paddingLeft: `${Math.max(0, row.treeLevel - 1) * 16 + 8}px` }}>{row.treeLevel > 1 ? "└ " : ""}{row.rvwCn}</td>
+                      {!showRadios ? (
+                        <>
+                          <td className="text-center">-</td>
+                          <td className="text-center">-</td>
+                        </>
+                      ) : (
+                        <>
+                          <td className="text-center">
+                            <input
+                              type="radio"
+                              name={`chk_${key}`}
+                              value="Y"
+                              checked={(viewCheckResults[key] ?? "") === "Y"}
+                              disabled={selectedReviewStep === "LOCAL"}
+                              onChange={() => setViewCheckResults((prev) => ({ ...prev, [key]: "Y" }))}
+                            />
+                          </td>
+                          <td className="text-center">
+                            <input
+                              type="radio"
+                              name={`chk_${key}`}
+                              value="N"
+                              checked={(viewCheckResults[key] ?? "") === "N"}
+                              disabled={selectedReviewStep === "LOCAL"}
+                              onChange={() => setViewCheckResults((prev) => ({ ...prev, [key]: "N" }))}
+                            />
+                          </td>
+                        </>
+                      )}
+                      {showRadios && selectedReviewStep !== "LOCAL" ? (
+                        <td className="text-left">
+                          <textarea
+                            className="cnfm-input w-full"
+                            value={viewCheckComments[key] ?? ""}
+                            onChange={(e) => setViewCheckComments((prev) => ({ ...prev, [key]: e.target.value }))}
+                          />
+                        </td>
+                      ) : null}
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* 필수 첨부파일 */}
+      <div className="cnfm-card p-4">
+        <h3 className="mb-3 border-b pb-2 text-[1.5rem] font-bold text-gray-700">필수 첨부파일</h3>
+        <div className="cnfm-table-wrap">
+          <table className="cnfm-table">
+            <thead>
+              <tr>
+                <th>필수 자료명</th>
+                <th>파일명</th>
+                <th className="w-[8rem] text-right">크기</th>
+              </tr>
+            </thead>
+            <tbody>
+              {esntlFileList.length === 0 ? (
+                <tr>
+                  <td colSpan={3} className="cnfm-td-empty">조회된 필수 첨부파일 항목이 없습니다.</td>
+                </tr>
+              ) : (
+                esntlFileList.map((f: any) => (
+                  <tr key={f.esntlAtchFileId}>
+                    <td className="pl-2">
+                      <div className="w-full text-left">
+                        {f.esntlAtchFileNm}
+                        {f.esntlAtchYn === "Y" ? <span className="ml-1 text-red-500">*</span> : null}
+                      </div>
+                    </td>
+                    <td>
+                      {f.atflCd ? (
+                        <a className="text-blue-600" href={`${PROXY_HOST}/attach-service/api/v1/atflcd/download/${f.atflCd}`} target="_blank" rel="noreferrer">{f.orgnlFileNm || "다운로드"}</a>
+                      ) : (
+                        <span className="text-gray-500">첨부없음</span>
+                      )}
+                    </td>
+                    <td className="w-[8rem] text-right"><div className="text-right">{formatFileSize(f.atflFlieSz)}</div></td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* 기타 첨부파일 */}
+      <div className="cnfm-card p-4">
+        <h3 className="mb-3 border-b pb-2 text-[1.5rem] font-bold text-gray-700">기타 첨부파일</h3>
+        <div className="cnfm-table-wrap">
+          <table className="cnfm-table">
+            <thead>
+              <tr>
+                <th>파일명</th>
+                <th className="w-[8rem] text-right">크기</th>
+              </tr>
+            </thead>
+            <tbody>
+              {etcFileList.length === 0 ? (
+                <tr>
+                  <td colSpan={2} className="cnfm-td-empty">등록된 기타첨부파일이 없습니다.</td>
+                </tr>
+              ) : (
+                etcFileList.map((f: any) => (
+                  <tr key={f.atflId}>
+                    <td>
+                      {f.orgnlFileNm ? (
+                        <a className="text-blue-600" href={`${PROXY_HOST}/attach-service/api/v1/download/${f.atflId}`} target="_blank" rel="noreferrer">{f.orgnlFileNm}</a>
+                      ) : (
+                        <span className="text-gray-700">{f.physFileNm || f.atflId}</span>
+                      )}
+                    </td>
+                    <td className="w-[8rem] text-right text-gray-500">{formatFileSize(f.atflFlieSz)}</td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="cnfm-action-row">
+        <Button color="white" onClick={() => router.push("/instl-sncn")}>목록</Button>
+        <Button onClick={() => router.push(`/instl-sncn/${id}/modify`)}>수정</Button>
+        <Button onClick={() => void hadleTechReviewSubmit()}>기술검토등록</Button>
+      </div>
+    </div>
+  );
+}
+
+export { CnfmViewPage };

apps/as/src/pages/instl-sncn/ui/components/checklist-task-panel.tsx

@@ -52,7 +52,7 @@ function ChecklistTaskPanel({
   return (
     <>
       <div className="overflow-x-auto">
-        <Table caption={`체크리스트 목록으로 검토항목, 주요 검토내용, 검토 결과${selectedReviewStep !== "LOCAL" ? ", 기술검토 의견" : ""} 정보 제공`} variant="secondary">
+        <Table variant="secondary">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[20rem]" rowSpan={2}>

apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx

@@ -35,6 +35,7 @@ import {
   type InstlSncnViewButtonAction,
   needsRoleUser01AtrzResolve,
 } from "../../lib/button-config";
+import { computeReviewStepChecklistProgress } from "../../lib/checklist-utils";
 import {
   buildSavePayload,
   buildSupplementReqPayload,
@@ -178,6 +179,11 @@ function FloatingActionButtons({
   }
 
   async function handleAplyClick() {
+    const { percent } = computeReviewStepChecklistProgress(
+      data.cklstResultList ?? [],
+      checklistFormState.results,
+      "LOCAL",
+    );
     const payload: InstlSncnApplySaveRequestDto = buildSavePayload(
       data,
       checklistFormState,
@@ -185,6 +191,11 @@ function FloatingActionButtons({
       "ST",
     );
 
+    if (percent !== 100) {
+      alert("모든 체크리스트 항목을 체크해야 신청이 가능합니다.");
+      return;
+    }
+
     await executeAction({
       action: INSTL_SNCN_VIEW_BUTTON_ACTION.aply,
       request: payload,
@@ -220,6 +231,22 @@ function FloatingActionButtons({
     });
   }
 
+  async function handleEnvoSbmsnClick() {
+    const payload: DocPrgrsUpdateRequestDto = {
+      docNo,
+      docSeComCd,
+      prgrsSttsComCd: "LE",
+    };
+    await executeAction({
+      action: INSTL_SNCN_VIEW_BUTTON_ACTION.envoSbmsn,
+      request: payload,
+      successMessage: "제출되었습니다.",
+    });
+    queryClient.invalidateQueries({
+      queryKey: instlSncnKeys.list(),
+    });
+  }
+
   async function handleRjctClick() {
     const payload: DocPrgrsUpdateRequestDto = {
       docNo,
@@ -257,6 +284,16 @@ function FloatingActionButtons({
   }
 
   async function handleRvwRplyClick() {
+    const { percent } = computeReviewStepChecklistProgress(
+      data.cklstResultList ?? [],
+      checklistFormState.results,
+      "ENV",
+    );
+
+    if (percent !== 100) {
+      alert("모든 체크리스트 항목을 체크해야 검토결과 회신이 가능합니다.");
+      return;
+    }
 
     const payload = buildTechReviewReplyPayload(
       data,
@@ -332,6 +369,16 @@ function FloatingActionButtons({
   }
 
   async function handleRvwCmptnClick() {
+    const { percent } = computeReviewStepChecklistProgress(
+      data.cklstResultList ?? [],
+      checklistFormState.results,
+      "KECO",
+    );
+
+    if (percent !== 100) {
+      alert("모든 체크리스트 항목을 체크해야 검토완료가 가능합니다.");
+      return;
+    }
 
     const payload = {
       ...buildTechReviewReplyPayload(
@@ -400,6 +447,11 @@ function FloatingActionButtons({
               설치인가 고시
             </Button>
           )}
+          {shouldShowButton(INSTL_SNCN_VIEW_BUTTON_ACTION.envoSbmsn) && (
+            <Button onClick={handleEnvoSbmsnClick} disabled={isProcessing}>
+              환경청제출
+            </Button>
+          )}
           {shouldShowButton(INSTL_SNCN_VIEW_BUTTON_ACTION.rjct) && (
             <Button color="red" onClick={handleRjctClick} disabled={isProcessing}>
               반려
@@ -566,6 +618,7 @@ const buttonActionHandlers: Record<InstlSncnViewButtonAction, ActionHandler> = {
   aply: handleSaveApply,
   del: handleDel,
   instlSncnAncmnt: handleChangePrgrsSttsComCd,
+  envoSbmsn: handleChangePrgrsSttsComCd,
   rjct: handleChangePrgrsSttsComCd,
   sncnAprv: handleChangePrgrsSttsComCd,
   rvwRply: handleTechReview,

apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx

@@ -20,7 +20,9 @@ import {
   AttachmentsFormSection,
   BusinessCostFormSection,
   BusinessScaleFormSection,
+  ChecklistFormSection,
   ContactInfoFormSection,
+  isFormChecklistComplete,
   isFormEsntlAtchComplete,
   PrivacyConsentSection,
   ProgressStatusSection,
@@ -152,6 +154,11 @@ function InstlFormPage({ mode, initialData, createDefaults }: InstlFormPageProps
       return;
     }
 
+    if (!isFormChecklistComplete(data.cklstResultList)) {
+      alert("모든 체크리스트 항목을 체크해야 신청이 가능합니다.");
+      return;
+    }
+
     if (!isFormEsntlAtchComplete(essentialFiles, data.esntlAtchFileList)) {
       alert("필수 첨부파일을 모두 등록해야 신청이 가능합니다.");
       return;
@@ -202,11 +209,8 @@ function InstlFormPage({ mode, initialData, createDefaults }: InstlFormPageProps
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit(onSave)} className="mt-4">
         <SectionCollapsibleGroup>
-          <div className="sticky top-[6rem] z-30 flex items-center justify-between bg-container px-4 py-2">
+          <div className="sticky top-[6rem] z-30 bg-container px-4 py-2">
             <SectionCollapsibleToggle />
-            <p className="text-sm text-muted-foreground">
-              <span className="text-red-600">*</span>은 필수입력 항목입니다.
-            </p>
           </div>
           <div className="space-y-4">
             {initialData?.detDto.instlSncnDocNo && (
@@ -221,6 +225,7 @@ function InstlFormPage({ mode, initialData, createDefaults }: InstlFormPageProps
             <PrivacyConsentSection />
             <BusinessScaleFormSection />
             <BusinessCostFormSection />
+            <ChecklistFormSection docSeComCd="INSTL" fieldPrefix="instlSncnMng" />
             <AttachmentsFormSection
               docSeComCd="INSTL"
               fieldPrefix="instlSncnMng"

apps/as/src/pages/instl-sncn/ui/instl-list-page.tsx

@@ -77,8 +77,8 @@ function InstlListPage() {
   };
 
   return (
-    <div className="card card-border !mt-6">
-      <div className="card card-border">
+    <div className="space-y-4 px-[1.8rem] pb-6">
+      <section className="card card-border mx-0 bg-background">
         <form className="flex flex-wrap items-center gap-4 p-2" onSubmit={handleSearch}>
           <div className="flex items-center gap-2">
             <Label htmlFor="sidoComCd" className="whitespace-nowrap">
@@ -145,7 +145,7 @@ function InstlListPage() {
           </div>
           <Button type="submit">조회</Button>
         </form>
-      </div>
+      </section>
 
       <InstlList
         searchParams={searchParams}

apps/as/src/pages/instl-sncn/ui/instl-list.tsx

@@ -59,7 +59,6 @@ function InstlList({ searchParams, pagination, onPaginationChange }: InstlListPr
       manualPagination: true,
     },
     dataTableOptions: {
-      caption: "설치인가 목록으로 시도, 시군구, 사업명, 업무구분, 담당자, 해당기관, 진행상황, 신청일 정보 제공",
       viewPagination: true,
       onRowClick: handleRowClick,
     },
@@ -82,15 +81,15 @@ function InstlList({ searchParams, pagination, onPaginationChange }: InstlListPr
 
   return (
     <>
-      <div className="card card-border pt-0">
+      <section className="card card-border mx-0 bg-background pb-8 pt-0">
         <div className="card-header flex items-center justify-between">
-          <h3 className="text-2xl font-medium text-label">설치인가 목록</h3>
+          <h3 className="text-2xl font-semibold">설치인가 목록</h3>
           <Button type="button" color="green" onClick={handleRegisterClick}>
             신청
           </Button>
         </div>
-        <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
-      </div>
+        {tableComponent}
+      </section>
       <PbadmsTaskApplyDialog
         open={isTaskSeDialogOpen}
         onOpenChange={setIsTaskSeDialogOpen}

apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx

@@ -1,141 +1,149 @@
-"use client";
-
-import { useMemo, useRef } from "react";
-
-import { useUserStore } from "@/shared/lib";
-import { SectionCollapsibleGroup, SectionCollapsibleToggle } from "@/shared/ui";
-import { ElaprDocPrgrsStatus } from "@/entities/elapr";
-import { useInstlSncnDetail } from "@/entities/instl-sncn";
-import { useRvwMnpwMngLoginUserList } from "@/entities/rvw-mnpw";
-import {
-  AttachmentsViewSection,
-  ProgressStatusSection,
-  SupplementDemandSection,
-} from "@/widgets/pbadms-sprt";
-import { Skeleton } from "@common/components";
-
-import { needsRoleUser01AtrzResolve } from "../lib/button-config";
-import { getEditableReviewStep } from "../lib/review-step-utils";
-import { EMPTY_CKLST_RESULT_LIST, useChecklistFormState } from "../lib/use-checklist-form-state";
-import { PROGRESS_STATUS_COLUMNS } from "../model/columns";
-
-import { FloatingActionButtons } from "./components/floating-action-buttons";
-import { BasicInfoSection } from "./sections/basic-info-section";
-import { BusinessCostSection } from "./sections/business-cost-section";
-import { BusinessScaleSection } from "./sections/business-scale-section";
-import { ContactInfoSection } from "./sections/contact-info-section";
-import {
-  TechReviewOpinionSection,
-  type TechReviewOpinionSectionHandle,
-} from "./sections/tech-review-opinion-section";
-
-interface InstlViewPageProps {
-  id: string;
-}
-
-function InstlViewPage({ id }: InstlViewPageProps) {
-  const userInfo = useUserStore((state) => state.userInfo);
-  const techReviewOpinionRef = useRef<TechReviewOpinionSectionHandle>(null);
-  const { data, isLoading, isError } = useInstlSncnDetail(id);
-  const { formState: checklistFormState } = useChecklistFormState(
-    data?.cklstResultList ?? EMPTY_CKLST_RESULT_LIST,
-  );
-
-  const prgrsSttsComCd = data?.detDto?.prgrsSttsComCd || "";
-  const needsAtrzResolve = needsRoleUser01AtrzResolve(userInfo?.dtlInstCd, prgrsSttsComCd);
-  const { data: rvwLoginUserData, isLoading: isRvwLoginUserLoading } = useRvwMnpwMngLoginUserList(
-    {},
-    { enabled: needsAtrzResolve },
-  );
-  const atrzSeComCdList = useMemo(
-    () => rvwLoginUserData?.content?.map((item) => item.atrzSeComCd) ?? [],
-    [rvwLoginUserData],
-  );
-
-  if (isLoading) {
-    return (
-      <div className="mt-6 flex flex-col gap-4 px-6">
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-[4rem] rounded-xl" />
-          <Skeleton className="h-[16rem] rounded-xl" />
-        </div>
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-[4rem] rounded-xl" />
-          <Skeleton className="h-[16rem] rounded-xl" />
-        </div>
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-[4rem] rounded-xl" />
-          <Skeleton className="h-[32rem] rounded-xl" />
-        </div>
-      </div>
-    );
-  }
-
-  if (isError || !data) {
-    return <div className="mt-6 text-[1.4rem]">상세 정보를 찾을 수 없습니다.</div>;
-  }
-
-  const {
-    detDto,
-    bizSclList,
-    bizCstList,
-    esntlFileList,
-    etcFileList,
-    rvwList = [],
-    splmntDmndList = [],
-    sttsChgHstryList = [],
-  } = data;
-
-  const editableReviewStep = getEditableReviewStep(
-    userInfo?.dtlInstCd,
-    detDto.prgrsSttsComCd || "",
-  );
-
-  return (
-    <div className="mt-4">
-      <SectionCollapsibleGroup>
-        <div className="sticky top-[6rem] z-30 bg-container px-4 py-2">
-          <SectionCollapsibleToggle />
-        </div>
-        <div className="space-y-4">
-          <ProgressStatusSection
-            columns={PROGRESS_STATUS_COLUMNS}
-            sttsChgHstryList={sttsChgHstryList}
-            elaprDocNo={detDto.instlSncnDocNo}
-          />
-          <BasicInfoSection det={detDto} />
-          <ContactInfoSection det={detDto} />
-          <ElaprDocPrgrsStatus elaprDocNo={detDto.instlSncnDocNo} />
-          <BusinessScaleSection bizSclList={bizSclList} />
-          <BusinessCostSection bizCstList={bizCstList} />
-          <AttachmentsViewSection
-            esntlFileList={esntlFileList ?? []}
-            etcFileList={etcFileList ?? []}
-          />
-          <TechReviewOpinionSection
-            ref={techReviewOpinionRef}
-            rvwList={rvwList}
-            editableReviewStep={editableReviewStep}
-            atrzSeComCdList={atrzSeComCdList}
-            isAtrzLoading={needsAtrzResolve && isRvwLoginUserLoading}
-          />
-          <SupplementDemandSection splmntDmndList={splmntDmndList} />
-          <FloatingActionButtons
-            data={data}
-            docSeComCd="INSTL"
-            instlSncnDocNo={detDto.instlSncnDocNo}
-            prgrsSttsComCd={detDto.prgrsSttsComCd || ""}
-            dtlInstCd={userInfo?.dtlInstCd}
-            atrzSeComCdList={atrzSeComCdList}
-            isRvwLoginUserLoading={needsAtrzResolve && isRvwLoginUserLoading}
-            checklistFormState={checklistFormState}
-            techReviewOpinionRef={techReviewOpinionRef}
-            opnrNm={userInfo?.userName}
-          />
-        </div>
-      </SectionCollapsibleGroup>
-    </div>
-  );
-}
-
-export { InstlViewPage };
+"use client";
+
+import { useMemo, useRef } from "react";
+
+import { useUserStore } from "@/shared/lib";
+import { SectionCollapsibleGroup, SectionCollapsibleToggle } from "@/shared/ui";
+import { ElaprDocPrgrsStatus } from "@/entities/elapr";
+import { useInstlSncnDetail } from "@/entities/instl-sncn";
+import { useRvwMnpwMngLoginUserList } from "@/entities/rvw-mnpw";
+import {
+  AttachmentsViewSection,
+  ProgressStatusSection,
+  SupplementDemandSection,
+} from "@/widgets/pbadms-sprt";
+import { Skeleton } from "@common/components";
+
+import { needsRoleUser01AtrzResolve } from "../lib/button-config";
+import { getEditableReviewStep } from "../lib/review-step-utils";
+import { EMPTY_CKLST_RESULT_LIST, useChecklistFormState } from "../lib/use-checklist-form-state";
+import { PROGRESS_STATUS_COLUMNS } from "../model/columns";
+
+import { FloatingActionButtons } from "./components/floating-action-buttons";
+import { BasicInfoSection } from "./sections/basic-info-section";
+import { BusinessCostSection } from "./sections/business-cost-section";
+import { BusinessScaleSection } from "./sections/business-scale-section";
+import { ChecklistSection } from "./sections/checklist-section";
+import { ContactInfoSection } from "./sections/contact-info-section";
+import {
+  TechReviewOpinionSection,
+  type TechReviewOpinionSectionHandle,
+} from "./sections/tech-review-opinion-section";
+
+interface InstlViewPageProps {
+  id: string;
+}
+
+function InstlViewPage({ id }: InstlViewPageProps) {
+  const userInfo = useUserStore((state) => state.userInfo);
+  const techReviewOpinionRef = useRef<TechReviewOpinionSectionHandle>(null);
+  const { data, isLoading, isError } = useInstlSncnDetail(id);
+  const { formState: checklistFormState, setFormState: setChecklistFormState } =
+    useChecklistFormState(data?.cklstResultList ?? EMPTY_CKLST_RESULT_LIST);
+
+  const prgrsSttsComCd = data?.detDto?.prgrsSttsComCd || "";
+  const needsAtrzResolve = needsRoleUser01AtrzResolve(userInfo?.dtlInstCd, prgrsSttsComCd);
+  const { data: rvwLoginUserData, isLoading: isRvwLoginUserLoading } = useRvwMnpwMngLoginUserList(
+    {},
+    { enabled: needsAtrzResolve },
+  );
+  const atrzSeComCdList = useMemo(
+    () => rvwLoginUserData?.content?.map((item) => item.atrzSeComCd) ?? [],
+    [rvwLoginUserData],
+  );
+
+  if (isLoading) {
+    return (
+      <div className="mt-6 flex flex-col gap-4 px-6">
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-[4rem] rounded-xl" />
+          <Skeleton className="h-[16rem] rounded-xl" />
+        </div>
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-[4rem] rounded-xl" />
+          <Skeleton className="h-[16rem] rounded-xl" />
+        </div>
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-[4rem] rounded-xl" />
+          <Skeleton className="h-[32rem] rounded-xl" />
+        </div>
+      </div>
+    );
+  }
+
+  if (isError || !data) {
+    return <div className="mt-6 text-[1.4rem]">상세 정보를 찾을 수 없습니다.</div>;
+  }
+
+  const {
+    detDto,
+    bizSclList,
+    bizCstList,
+    cklstResultList = [],
+    esntlFileList,
+    etcFileList,
+    rvwList = [],
+    splmntDmndList = [],
+    sttsChgHstryList = [],
+  } = data;
+
+  const editableReviewStep = getEditableReviewStep(
+    userInfo?.dtlInstCd,
+    detDto.prgrsSttsComCd || "",
+  );
+
+  return (
+    <div className="mt-4">
+      <SectionCollapsibleGroup>
+        <div className="sticky top-[6rem] z-30 bg-container px-4 py-2">
+          <SectionCollapsibleToggle />
+        </div>
+        <div className="space-y-4">
+          <ProgressStatusSection
+            columns={PROGRESS_STATUS_COLUMNS}
+            sttsChgHstryList={sttsChgHstryList}
+            elaprDocNo={detDto.instlSncnDocNo}
+          />
+          <BasicInfoSection det={detDto} />
+          <ContactInfoSection det={detDto} />
+          <ElaprDocPrgrsStatus elaprDocNo={detDto.instlSncnDocNo} />
+          <BusinessScaleSection bizSclList={bizSclList} />
+          <BusinessCostSection bizCstList={bizCstList} />
+          <ChecklistSection
+            cklstResultList={cklstResultList}
+            prgrsSttsComCd={detDto.prgrsSttsComCd || ""}
+            userRoleCode={userInfo?.dtlInstCd}
+            formState={checklistFormState}
+            setFormState={setChecklistFormState}
+          />
+          <AttachmentsViewSection
+            esntlFileList={esntlFileList ?? []}
+            etcFileList={etcFileList ?? []}
+          />
+          <TechReviewOpinionSection
+            ref={techReviewOpinionRef}
+            rvwList={rvwList}
+            editableReviewStep={editableReviewStep}
+            atrzSeComCdList={atrzSeComCdList}
+            isAtrzLoading={needsAtrzResolve && isRvwLoginUserLoading}
+          />
+          <SupplementDemandSection splmntDmndList={splmntDmndList} />
+          <FloatingActionButtons
+            data={data}
+            docSeComCd="INSTL"
+            instlSncnDocNo={detDto.instlSncnDocNo}
+            prgrsSttsComCd={detDto.prgrsSttsComCd || ""}
+            dtlInstCd={userInfo?.dtlInstCd}
+            atrzSeComCdList={atrzSeComCdList}
+            isRvwLoginUserLoading={needsAtrzResolve && isRvwLoginUserLoading}
+            checklistFormState={checklistFormState}
+            techReviewOpinionRef={techReviewOpinionRef}
+            opnrNm={userInfo?.userName}
+          />
+        </div>
+      </SectionCollapsibleGroup>
+    </div>
+  );
+}
+
+export { InstlViewPage };

apps/as/src/pages/instl-sncn/ui/sections/basic-info-form-section.tsx

@@ -8,7 +8,6 @@ import { SectionCollapsible } from "@/shared/ui";
 import { Field, FieldError, FieldGroup, FieldLabel, FieldSet } from "@/shared/ui/field";
 import { findCodeLabel, useCodeList } from "@/entities/code";
 import { type BnsApplyData, BnsPickerDialog } from "@/widgets/bns-picker";
-import { PreviousPlanLookupButton } from "@/widgets/previous-plan-lookup";
 import {
   Button,
   Checkbox,
@@ -28,9 +27,9 @@ function BasicInfoFormSection() {
   const { control, watch, setValue } = useFormContext<InstlSncnRegistFormData>();
   const [isPickerOpen, setIsPickerOpen] = useState(false);
   const taskSeComCd = watch("instlSncnMng.taskSeComCd");
-  const sido = watch("instlSncnMng.sido");
-  const gugun = watch("instlSncnMng.gugun");
-  const localGovLabel = [sido, gugun].filter(Boolean).join(" ");
+  const localGovLabel = [watch("instlSncnMng.sido"), watch("instlSncnMng.gugun")]
+    .filter(Boolean)
+    .join(" ");
 
   function handleBnsSelect(data: BnsApplyData) {
     setValue("instlSncnMng.bizNm", data.bizNm);
@@ -54,8 +53,7 @@ function BasicInfoFormSection() {
 
   return (
     <SectionCollapsible title="기본 정보">
-      <PreviousPlanLookupButton sidoNm={sido} gugunNm={gugun} />
-      <Table caption="기본 정보 입력으로 사업명, 사업기간, 사업내용, 구분, 신청 지자체, 사업구분, 시설종류, 재이용용도 정보 제공" variant="secondary">
+      <Table variant="secondary">
         <colgroup>
           <col width="15%" />
           <col width="35%" />
@@ -64,7 +62,7 @@ function BasicInfoFormSection() {
         </colgroup>
         <TableHeader>
           <TableRow>
-            <TableHead scope="row" className="w-[20rem]" data-required>
+            <TableHead className="w-[20rem]" data-required>
               사업명
             </TableHead>
             <TableCell colSpan={3}>
@@ -92,7 +90,7 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead scope="row" data-required>사업기간</TableHead>
+            <TableHead data-required>사업기간</TableHead>
             <TableCell colSpan={3}>
               <FieldGroup className="flex-row items-center gap-2">
                 <Controller
@@ -136,7 +134,7 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead scope="row" data-required>사업내용</TableHead>
+            <TableHead data-required>사업내용</TableHead>
             <TableCell colSpan={3}>
               <Controller
                 name="instlSncnMng.bizCn"
@@ -156,13 +154,13 @@ function BasicInfoFormSection() {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead scope="row" data-required>구분</TableHead>
+            <TableHead data-required>구분</TableHead>
             <TableCell>{taskSeComCdLabel}</TableCell>
-            <TableHead scope="row">신청 지자체</TableHead>
+            <TableHead>신청 지자체</TableHead>
             <TableCell>{localGovLabel}</TableCell>
           </TableRow>
           <TableRow>
-            <TableHead scope="row" data-required>사업구분</TableHead>
+            <TableHead data-required>사업구분</TableHead>
             <TableCell colSpan={3}>
               <Controller
                 name="instlSncnMng.sncnSeComCd"
@@ -204,7 +202,7 @@ function BasicInfoFormSection() {
           {taskSeComCd.includes("RE") && (
             <>
               <TableRow>
-                <TableHead scope="row">시설종류</TableHead>
+                <TableHead>시설종류</TableHead>
                 <TableCell colSpan={3}>
                   <Controller
                     name="instlSncnMng.rtlztnFcltSeComCd"
@@ -244,7 +242,7 @@ function BasicInfoFormSection() {
                 </TableCell>
               </TableRow>
               <TableRow>
-                <TableHead scope="row">재이용용도</TableHead>
+                <TableHead>재이용용도</TableHead>
                 <TableCell colSpan={3}>
                   <Controller
                     name="instlSncnMng.rtlztnUsgSeComCd"

apps/as/src/pages/instl-sncn/ui/sections/basic-info-section.tsx

@@ -2,7 +2,6 @@
 
 import { SectionCollapsible } from "@/shared/ui";
 import type { InstlSncnMngResponseDto } from "@/entities/instl-sncn";
-import { PreviousPlanLookupButton } from "@/widgets/previous-plan-lookup";
 import { Table, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
 
 interface BasicInfoSectionProps {
@@ -12,8 +11,7 @@ interface BasicInfoSectionProps {
 function BasicInfoSection({ det }: BasicInfoSectionProps) {
   return (
     <SectionCollapsible title="기본 정보">
-      <PreviousPlanLookupButton sidoNm={det.sido} gugunNm={det.gugun} />
-      <Table caption="기본 정보로 사업명, 사업기간, 사업내용, 구분, 신청지자체, 사업구분 정보 제공" variant="secondary">
+      <Table variant="secondary">
         <colgroup>
           <col width="15%" />
           <col width="35%" />
@@ -22,25 +20,25 @@ function BasicInfoSection({ det }: BasicInfoSectionProps) {
         </colgroup>
         <TableHeader>
           <TableRow>
-            <TableHead scope="row">사업명</TableHead>
+            <TableHead>사업명</TableHead>
             <TableCell>{det.bizNm || "-"}</TableCell>
-            <TableHead scope="row">사업기간</TableHead>
+            <TableHead>사업기간</TableHead>
             <TableCell>{(det.bizBgngYr || "-") + " ~ " + (det.bizEndYr || "-")}</TableCell>
           </TableRow>
           <TableRow>
-            <TableHead scope="row">사업내용</TableHead>
+            <TableHead>사업내용</TableHead>
             <TableCell colSpan={3}>{det.bizCn || "-"}</TableCell>
           </TableRow>
           <TableRow>
-            <TableHead scope="row">구분</TableHead>
+            <TableHead>구분</TableHead>
             <TableCell>{det.taskSeCdNm || "-"}</TableCell>
-            <TableHead scope="row">신청지자체</TableHead>
+            <TableHead>신청지자체</TableHead>
             <TableCell>
               {det.sido || "-"} {det.gugun || "-"}
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableHead scope="row">사업구분</TableHead>
+            <TableHead>사업구분</TableHead>
             <TableCell colSpan={3}>{det.sncnSeCdNm || "-"}</TableCell>
           </TableRow>
         </TableHeader>

apps/as/src/pages/instl-sncn/ui/sections/business-cost-section.tsx

@@ -20,7 +20,7 @@ function BusinessCostSection({ bizCstList }: BusinessCostSectionProps) {
     <SectionCollapsible title="총사업비">
       <div className="overflow-x-auto">
         <p className="mb-2 text-right font-normal text-muted-foreground">(단위: 백만원)</p>
-        <Table caption="총사업비 목록으로 구분, 예산반영(A), 표준사업비(B), 금회설계시(C), 증감 정보 제공" variant="secondary" className="table-fixed">
+        <Table variant="secondary" className="table-fixed">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[30rem]" rowSpan={2}>
@@ -51,9 +51,9 @@ function BusinessCostSection({ bizCstList }: BusinessCostSectionProps) {
                 return (
                   <TableRow key={node.acntgSeCd}>
                     {node.treeLevel <= 1 ? (
-                      <TableHead scope="row" className="!px-[0.8rem] text-left">{node.acntgSeCdNm}</TableHead>
+                      <TableHead className="!px-[0.8rem] text-left">{node.acntgSeCdNm}</TableHead>
                     ) : (
-                      <TableHead scope="row" className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
+                      <TableHead className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
                         {showSubIcon && <span className="mr-1 text-gray-400">└</span>}
                         {node.acntgSeCdNm}
                       </TableHead>

apps/as/src/pages/instl-sncn/ui/sections/business-scale-section.tsx

@@ -13,7 +13,7 @@ function BusinessScaleSection({ bizSclList }: BusinessScaleSectionProps) {
   return (
     <SectionCollapsible title="사업규모">
       <div className="overflow-x-auto">
-        <Table caption="사업규모 목록으로 구분, 기본계획(A), 예산반영(B), 금회설계시(C), 증감(C-B) 정보 제공" variant="secondary">
+        <Table variant="secondary">
           <TableHeader>
             <TableRow>
               <TableHead className="w-[30rem]">구분</TableHead>
@@ -36,7 +36,7 @@ function BusinessScaleSection({ bizSclList }: BusinessScaleSectionProps) {
 
                 return (
                   <TableRow key={node.cnstpSeCd}>
-                    <TableHead scope="row" className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
+                    <TableHead className="text-left" style={{ paddingLeft: `${pl + 8}px` }}>
                       {node.cnstpSeCdNm}
                     </TableHead>
                     <TableCell>

apps/as/src/pages/instl-sncn/ui/sections/checklist-section.tsx

@@ -85,13 +85,7 @@ function ChecklistSection({
           >
             <TabsList>
               {visibleReviewSteps.map((stepCode) => (
-                <TabsTrigger
-                  key={stepCode}
-                  value={stepCode}
-                  id={`instl-cklst-step-tab-${stepCode}`}
-                  aria-controls="instl-cklst-task-tabs"
-                  className="!px-6 !py-3 text-xl"
-                >
+                <TabsTrigger key={stepCode} value={stepCode} className="!px-6 !py-3 text-xl">
                   {CHECKLIST_TAB_LABELS[stepCode]}
                 </TabsTrigger>
               ))}
@@ -101,7 +95,6 @@ function ChecklistSection({
 
         {taskCodes.length > 0 ? (
           <Tabs
-            id="instl-cklst-task-tabs"
             value={selectedTaskCode ?? taskCodes[0]}
             onValueChange={setSelectedTaskCode}
             className="w-full"
@@ -113,8 +106,6 @@ function ChecklistSection({
                   <TabsTrigger
                     key={code}
                     value={code}
-                    id={`instl-cklst-tab-${code}`}
-                    aria-controls={`instl-cklst-panel-${code}`}
                     className="!px-6 !py-3 text-xl [&:after]:hidden"
                   >
                     {TASK_CODE_LABELS[code] ?? code}
@@ -128,15 +119,7 @@ function ChecklistSection({
             </div>
 
             {taskCodes.map((code) => (
-              <TabsContent
-                key={code}
-                value={code}
-                id={`instl-cklst-panel-${code}`}
-                aria-labelledby={`instl-cklst-tab-${code}`}
-                className="mt-0 border-0 p-0 shadow-none ring-0"
-              >
-                {/* 선택된 탭(검토단계·업무구분)의 패널임을 알 수 있도록 숨김 제목 제공 */}
-                <h3 className="sr-only">{CHECKLIST_TAB_LABELS[selectedReviewStep]} {TASK_CODE_LABELS[code] ?? code} 체크리스트</h3>
+              <TabsContent key={code} value={code} className="mt-0 border-0 p-0 shadow-none ring-0">
                 <ChecklistTaskPanel
                   selectedReviewStep={selectedReviewStep}
                   selectedRows={getChecklistDisplayRows(cklstResultList, code)}

apps/as/src/pages/instl-sncn/ui/sections/contact-info-section.tsx

@@ -11,21 +11,21 @@ interface ContactInfoSectionProps {
 function ContactInfoSection({ det }: ContactInfoSectionProps) {
   return (
     <SectionCollapsible title="담당자 정보">
-      <Table caption="담당자 정보로 신청자(이름, 연락처, 소속, 이메일)과 설계자(이름, 연락처, 소속, 이메일) 정보 제공" variant="secondary">
+      <Table variant="secondary">
         <TableHeader>
           {det.aplcntNm && (
             <>
               <TableRow>
-                <TableHead scope="row" rowSpan={2}>신청자</TableHead>
-                <TableHead scope="row">이름</TableHead>
+                <TableHead rowSpan={2}>신청자</TableHead>
+                <TableHead>이름</TableHead>
                 <TableCell>{det.aplcntNm || "-"}</TableCell>
-                <TableHead scope="row">연락처</TableHead>
+                <TableHead>연락처</TableHead>
                 <TableCell>{det.aplcntMblTelno || "-"}</TableCell>
               </TableRow>
               <TableRow>
-                <TableHead scope="row">소속</TableHead>
+                <TableHead>소속</TableHead>
                 <TableCell>{det.aplcntOgdpNm || "-"}</TableCell>
-                <TableHead scope="row">이메일</TableHead>
+                <TableHead>이메일</TableHead>
                 <TableCell>{det.aplcntEmlAddr || "-"}</TableCell>
               </TableRow>
             </>
@@ -33,16 +33,16 @@ function ContactInfoSection({ det }: ContactInfoSectionProps) {
           {det.dsgnrNm && (
             <>
               <TableRow>
-                <TableHead scope="row" rowSpan={2}>설계자</TableHead>
-                <TableHead scope="row">이름</TableHead>
+                <TableHead rowSpan={2}>설계자</TableHead>
+                <TableHead>이름</TableHead>
                 <TableCell>{det.dsgnrNm || "-"}</TableCell>
-                <TableHead scope="row">연락처</TableHead>
+                <TableHead>연락처</TableHead>
                 <TableCell>{det.dsgnrTelno || "-"}</TableCell>
               </TableRow>
               <TableRow>
-                <TableHead scope="row">소속</TableHead>
+                <TableHead>소속</TableHead>
                 <TableCell>{det.dsgnrOgdpNm || "-"}</TableCell>
-                <TableHead scope="row">이메일</TableHead>
+                <TableHead>이메일</TableHead>
                 <TableCell>{det.dsgnrEmlAddr || "-"}</TableCell>
               </TableRow>
             </>

apps/as/src/pages/instl-sncn/ui/sections/tech-review-opinion-section.tsx

@@ -1,350 +1,350 @@
-"use client";
-
-import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
-
-import { useQueryClient } from "@tanstack/react-query";
-
-import { getDefaultFileKey, useTus, useUserStore } from "@/shared/lib";
-import { TextShimmer } from "@/shared/ui";
-import { SectionCollapsible } from "@/shared/ui";
-import { Field, FieldLabel, FieldSet } from "@/shared/ui/field";
-import { attachService } from "@/entities/attach";
-import {
-  instlSncnKeys,
-  type InstlSncnRvwOpnnResponseDto,
-  instlSncnRvwOpnnService,
-  type ReviewStepCode,
-} from "@/entities/instl-sncn";
-import { RvwOpnnListTable } from "@/widgets/pbadms-sprt";
-import {
-  Button,
-  RadioGroup,
-  RadioGroupItem,
-  Table,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Textarea,
-} from "@common/components";
-
-import type { ReviewOpinionFormData } from "../../lib/review-opinion-utils";
-import { REVIEW_STEP_LABELS } from "../../model/view-types";
-
-const RVW_OPNN_FILE_KEY_PREFIX = "rvw-opnn::";
-
-interface TechReviewOpinionSectionProps {
-  rvwList: InstlSncnRvwOpnnResponseDto[];
-  editableReviewStep?: ReviewStepCode;
-  atrzSeComCdList?: string[];
-  isAtrzLoading?: boolean;
-}
-
-export interface TechReviewOpinionSectionHandle {
-  getFormData: () => ReviewOpinionFormData | null;
-  resetForm: () => void;
-}
-
-interface TechReviewOpinionTableProps {
-  items: InstlSncnRvwOpnnResponseDto[];
-}
-
-interface UploadedOpinionFile {
-  fileName: string;
-  fileKey: string;
-  atflId?: string;
-  atflCd?: string;
-}
-
-const EMPTY_FORM_DATA: ReviewOpinionFormData = {
-  rvwRsltCn: "",
-  rvwRsltAnmlyYn: "",
-  atchFileGroupId: "",
-  opnrSeComCd: "",
-};
-
-function createRvwOpnnUploadKey(file: File) {
-  return `${RVW_OPNN_FILE_KEY_PREFIX}${getDefaultFileKey(file)}`;
-}
-
-function hasFormContent(formData: ReviewOpinionFormData) {
-  return Boolean(formData.rvwRsltCn.trim() || formData.rvwRsltAnmlyYn || formData.atchFileGroupId);
-}
-
-const TechReviewOpinionSection = forwardRef<
-  TechReviewOpinionSectionHandle,
-  TechReviewOpinionSectionProps
->(function TechReviewOpinionSection(
-  { rvwList, editableReviewStep, atrzSeComCdList = [], isAtrzLoading = false },
-  ref,
-) {
-  const canWriteKecoOpinion = !isAtrzLoading && atrzSeComCdList.includes("ATRZ02");
-  const [formData, setFormData] = useState<ReviewOpinionFormData>({
-    ...EMPTY_FORM_DATA,
-    opnrSeComCd: editableReviewStep ?? "",
-  });
-  const [uploadedFile, setUploadedFile] = useState<UploadedOpinionFile | null>(null);
-
-  useEffect(() => {
-    setFormData((prev) => ({
-      ...prev,
-      opnrSeComCd: editableReviewStep ?? "",
-    }));
-  }, [editableReviewStep]);
-
-  const { uploadFileAsync, isUploading, uploads } = useTus({
-    onSuccess: (atflCd, atflId, _file, fileKey) => {
-      if (!atflCd || !atflId) return;
-
-      setFormData((prev) => ({ ...prev, atchFileGroupId: atflCd }));
-      setUploadedFile((prev) => (prev?.fileKey === fileKey ? { ...prev, atflCd, atflId } : prev));
-    },
-    onError: (_error, _file, fileKey) => {
-      setUploadedFile((prev) => (prev?.fileKey === fileKey ? null : prev));
-    },
-  });
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      getFormData: () => {
-        if (!editableReviewStep || !hasFormContent(formData)) {
-          return null;
-        }
-        if (editableReviewStep === "KECO" && !canWriteKecoOpinion) {
-          return null;
-        }
-
-        return {
-          ...formData,
-          opnrSeComCd: editableReviewStep,
-        };
-      },
-      resetForm: () => {
-        setFormData({
-          ...EMPTY_FORM_DATA,
-          opnrSeComCd: editableReviewStep ?? "",
-        });
-        setUploadedFile(null);
-      },
-    }),
-    [canWriteKecoOpinion, editableReviewStep, formData],
-  );
-
-  const envRvwList = rvwList.filter((item) => item.opnrSeComCd === "ENV");
-  const kecoRvwList = rvwList.filter((item) => item.opnrSeComCd === "KECO");
-
-  const hasEnvSection = envRvwList.length > 0 || editableReviewStep === "ENV";
-  const hasKecoSection =
-    kecoRvwList.length > 0 || (editableReviewStep === "KECO" && canWriteKecoOpinion);
-
-  if (!hasEnvSection && !hasKecoSection) {
-    return null;
-  }
-
-  async function handleFileUpload(files: FileList | null) {
-    if (!files || files.length === 0) return;
-
-    const file = files[0];
-    const fileKey = createRvwOpnnUploadKey(file);
-    const existingAtflCd = formData.atchFileGroupId;
-
-    setUploadedFile({ fileName: file.name, fileKey });
-
-    try {
-      await uploadFileAsync(file, {
-        fileKey,
-        metadata: existingAtflCd ? { atflCd: existingAtflCd } : undefined,
-      });
-    } catch {
-      // onError callback handles cleanup
-    }
-  }
-
-  async function handleFileRemove() {
-    if (!uploadedFile) return;
-
-    uploads[uploadedFile.fileKey]?.abort();
-
-    if (uploadedFile.atflId) {
-      try {
-        await attachService.deleteAttachmentByAtflId(uploadedFile.atflId);
-      } catch (error) {
-        console.error("검토의견 첨부파일 삭제 실패:", error);
-      }
-    }
-
-    setUploadedFile(null);
-    setFormData((prev) => ({ ...prev, atchFileGroupId: "" }));
-  }
-
-  function isReviewTurn(reviewStep: ReviewStepCode) {
-    if (editableReviewStep !== reviewStep) return false;
-    if (reviewStep === "KECO" && !canWriteKecoOpinion) return false;
-    return true;
-  }
-
-  function renderOpinionForm(reviewStep: ReviewStepCode) {
-    if (!isReviewTurn(reviewStep)) return null;
-
-    const uploading = uploadedFile ? (isUploading[uploadedFile.fileKey] ?? false) : false;
-
-    return (
-      <div className="space-y-2">
-        <h4 className="text-xl font-semibold">검토의견 작성</h4>
-        <Table
-          caption="검토의견 작성으로 의견내용, 검토결과, 첨부파일 정보 제공"
-          variant="secondary"
-        >
-          <TableHeader>
-            <TableRow>
-              <TableHead scope="row" className="w-[12rem]">
-                의견내용
-              </TableHead>
-              <TableCell>
-                <Textarea
-                  value={formData.rvwRsltCn}
-                  onChange={(event) =>
-                    setFormData((prev) => ({ ...prev, rvwRsltCn: event.target.value }))
-                  }
-                  placeholder="의견내용을 입력하세요"
-                  rows={4}
-                  className="min-h-[8rem] !text-xl"
-                />
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableHead scope="row">검토결과</TableHead>
-              <TableCell>
-                <FieldSet>
-                  <RadioGroup
-                    value={formData.rvwRsltAnmlyYn}
-                    onValueChange={(value) =>
-                      setFormData((prev) => ({
-                        ...prev,
-                        rvwRsltAnmlyYn: value as ReviewOpinionFormData["rvwRsltAnmlyYn"],
-                      }))
-                    }
-                  >
-                    <div className="flex flex-wrap gap-4">
-                      <FieldLabel
-                        htmlFor={`rvw-opnn-normal-${reviewStep}`}
-                        className="!w-auto border-none"
-                      >
-                        <Field orientation="horizontal" className="w-auto">
-                          <RadioGroupItem value="N" id={`rvw-opnn-normal-${reviewStep}`} />
-                          <span className="font-normal">정상</span>
-                        </Field>
-                      </FieldLabel>
-                      <FieldLabel
-                        htmlFor={`rvw-opnn-abnormal-${reviewStep}`}
-                        className="!w-auto border-none"
-                      >
-                        <Field orientation="horizontal" className="w-auto">
-                          <RadioGroupItem value="Y" id={`rvw-opnn-abnormal-${reviewStep}`} />
-                          <span className="font-normal">이상</span>
-                        </Field>
-                      </FieldLabel>
-                    </div>
-                  </RadioGroup>
-                </FieldSet>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableHead scope="row">첨부파일</TableHead>
-              <TableCell>
-                {uploadedFile ? (
-                  <div className="flex items-center gap-2">
-                    <TextShimmer className="text-xl" active={uploading}>
-                      {uploadedFile.fileName}
-                    </TextShimmer>
-                    <Button
-                      size="icon"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        void handleFileRemove();
-                      }}
-                      disabled={uploading}
-                      className="size-8 !bg-destructive"
-                    >
-                      <i className="diveicon di-x text-xs" aria-label="삭제" />
-                    </Button>
-                  </div>
-                ) : (
-                  <label>
-                    <input
-                      type="file"
-                      className="hidden"
-                      onChange={(event) => {
-                        void handleFileUpload(event.target.files);
-                        event.target.value = "";
-                      }}
-                    />
-                    <Button size="sm" variant="outline" type="button" asChild>
-                      <span>파일 선택</span>
-                    </Button>
-                  </label>
-                )}
-              </TableCell>
-            </TableRow>
-          </TableHeader>
-        </Table>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      {hasEnvSection ? (
-        <SectionCollapsible title={`${REVIEW_STEP_LABELS.ENV} 검토의견`}>
-          <div className="space-y-6">
-            {envRvwList.length > 0 ? (
-              <TechReviewOpinionTable items={envRvwList} />
-            ) : null}
-            {renderOpinionForm("ENV")}
-          </div>
-        </SectionCollapsible>
-      ) : null}
-      {hasKecoSection ? (
-        <SectionCollapsible title={`${REVIEW_STEP_LABELS.KECO} 검토의견`}>
-          <div className="space-y-6">
-            {kecoRvwList.length > 0 ? (
-              <TechReviewOpinionTable items={kecoRvwList} />
-            ) : null}
-            {renderOpinionForm("KECO")}
-          </div>
-        </SectionCollapsible>
-      ) : null}
-    </>
-  );
-});
-
-function getRvwOpnnIds(item: InstlSncnRvwOpnnResponseDto) {
-  if (!item.instlSncnDocNo || item.rvwOpnnSn == null) {
-    throw new Error("검토의견 식별값이 없습니다.");
-  }
-  return [item.instlSncnDocNo, item.rvwOpnnSn] as const;
-}
-
-function TechReviewOpinionTable({ items }: TechReviewOpinionTableProps) {
-  const queryClient = useQueryClient();
-  const currentUserUuid = useUserStore((state) => state.userInfo?.userUnqId);
-
-  return (
-    <RvwOpnnListTable
-      items={items}
-      getRowKey={(item) => `${item.instlSncnDocNo}_${item.rvwOpnnSn}`}
-      currentUserUuid={currentUserUuid}
-      onUpdate={async (item, body) => {
-        await instlSncnRvwOpnnService.update(...getRvwOpnnIds(item), body);
-        await queryClient.invalidateQueries({ queryKey: instlSncnKeys.all });
-      }}
-      onDelete={async (item) => {
-        await instlSncnRvwOpnnService.delete(...getRvwOpnnIds(item));
-        await queryClient.invalidateQueries({ queryKey: instlSncnKeys.all });
-      }}
-    />
-  );
-}
-
-export { TechReviewOpinionSection };
+"use client";
+
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+
+import { dayjs, getDefaultFileKey, useTus } from "@/shared/lib";
+import { TextShimmer } from "@/shared/ui";
+import { SectionCollapsible } from "@/shared/ui";
+import { Field, FieldLabel, FieldSet } from "@/shared/ui/field";
+import { AttachmentDownloadLink, attachService } from "@/entities/attach";
+import type { InstlSncnRvwOpnnResponseDto, ReviewStepCode } from "@/entities/instl-sncn";
+import {
+  Button,
+  RadioGroup,
+  RadioGroupItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Textarea,
+} from "@common/components";
+
+import type { ReviewOpinionFormData } from "../../lib/review-opinion-utils";
+import { REVIEW_STEP_LABELS } from "../../model/view-types";
+
+const RVW_OPNN_FILE_KEY_PREFIX = "rvw-opnn::";
+
+interface TechReviewOpinionSectionProps {
+  rvwList: InstlSncnRvwOpnnResponseDto[];
+  editableReviewStep?: ReviewStepCode;
+  atrzSeComCdList?: string[];
+  isAtrzLoading?: boolean;
+}
+
+export interface TechReviewOpinionSectionHandle {
+  getFormData: () => ReviewOpinionFormData | null;
+  resetForm: () => void;
+}
+
+interface TechReviewOpinionTableProps {
+  items: InstlSncnRvwOpnnResponseDto[];
+}
+
+interface UploadedOpinionFile {
+  fileName: string;
+  fileKey: string;
+  atflId?: string;
+  atflCd?: string;
+}
+
+const EMPTY_FORM_DATA: ReviewOpinionFormData = {
+  rvwRsltCn: "",
+  rvwRsltAnmlyYn: "",
+  atchFileGroupId: "",
+  opnrSeComCd: "",
+};
+
+function createRvwOpnnUploadKey(file: File) {
+  return `${RVW_OPNN_FILE_KEY_PREFIX}${getDefaultFileKey(file)}`;
+}
+
+function hasFormContent(formData: ReviewOpinionFormData) {
+  return Boolean(formData.rvwRsltCn.trim() || formData.rvwRsltAnmlyYn || formData.atchFileGroupId);
+}
+
+const TechReviewOpinionSection = forwardRef<
+  TechReviewOpinionSectionHandle,
+  TechReviewOpinionSectionProps
+>(function TechReviewOpinionSection(
+  { rvwList, editableReviewStep, atrzSeComCdList = [], isAtrzLoading = false },
+  ref,
+) {
+  const canWriteKecoOpinion = !isAtrzLoading && atrzSeComCdList.includes("ATRZ02");
+  const [formData, setFormData] = useState<ReviewOpinionFormData>({
+    ...EMPTY_FORM_DATA,
+    opnrSeComCd: editableReviewStep ?? "",
+  });
+  const [uploadedFile, setUploadedFile] = useState<UploadedOpinionFile | null>(null);
+
+  useEffect(() => {
+    setFormData((prev) => ({
+      ...prev,
+      opnrSeComCd: editableReviewStep ?? "",
+    }));
+  }, [editableReviewStep]);
+
+  const { uploadFileAsync, isUploading, uploads } = useTus({
+    onSuccess: (atflCd, atflId, _file, fileKey) => {
+      if (!atflCd || !atflId) return;
+
+      setFormData((prev) => ({ ...prev, atchFileGroupId: atflCd }));
+      setUploadedFile((prev) => (prev?.fileKey === fileKey ? { ...prev, atflCd, atflId } : prev));
+    },
+    onError: (_error, _file, fileKey) => {
+      setUploadedFile((prev) => (prev?.fileKey === fileKey ? null : prev));
+    },
+  });
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getFormData: () => {
+        if (!editableReviewStep || !hasFormContent(formData)) {
+          return null;
+        }
+        if (editableReviewStep === "KECO" && !canWriteKecoOpinion) {
+          return null;
+        }
+
+        return {
+          ...formData,
+          opnrSeComCd: editableReviewStep,
+        };
+      },
+      resetForm: () => {
+        setFormData({
+          ...EMPTY_FORM_DATA,
+          opnrSeComCd: editableReviewStep ?? "",
+        });
+        setUploadedFile(null);
+      },
+    }),
+    [canWriteKecoOpinion, editableReviewStep, formData],
+  );
+
+  const envRvwList = rvwList.filter((item) => item.opnrSeComCd === "ENV");
+  const kecoRvwList = rvwList.filter((item) => item.opnrSeComCd === "KECO");
+
+  const hasEnvSection = envRvwList.length > 0 || editableReviewStep === "ENV";
+  const hasKecoSection =
+    kecoRvwList.length > 0 || (editableReviewStep === "KECO" && canWriteKecoOpinion);
+
+  if (!hasEnvSection && !hasKecoSection) {
+    return null;
+  }
+
+  async function handleFileUpload(files: FileList | null) {
+    if (!files || files.length === 0) return;
+
+    const file = files[0];
+    const fileKey = createRvwOpnnUploadKey(file);
+    const existingAtflCd = formData.atchFileGroupId;
+
+    setUploadedFile({ fileName: file.name, fileKey });
+
+    try {
+      await uploadFileAsync(file, {
+        fileKey,
+        metadata: existingAtflCd ? { atflCd: existingAtflCd } : undefined,
+      });
+    } catch {
+      // onError callback handles cleanup
+    }
+  }
+
+  async function handleFileRemove() {
+    if (!uploadedFile) return;
+
+    uploads[uploadedFile.fileKey]?.abort();
+
+    if (uploadedFile.atflId) {
+      try {
+        await attachService.deleteAttachmentByAtflId(uploadedFile.atflId);
+      } catch (error) {
+        console.error("검토의견 첨부파일 삭제 실패:", error);
+      }
+    }
+
+    setUploadedFile(null);
+    setFormData((prev) => ({ ...prev, atchFileGroupId: "" }));
+  }
+
+  function renderOpinionForm(reviewStep: ReviewStepCode) {
+    if (editableReviewStep !== reviewStep) return null;
+    if (reviewStep === "KECO" && !canWriteKecoOpinion) return null;
+
+    const uploading = uploadedFile ? (isUploading[uploadedFile.fileKey] ?? false) : false;
+
+    return (
+      <div className="space-y-2">
+        <h4 className="text-xl font-semibold">검토의견 작성</h4>
+        <Table variant="secondary">
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[12rem]">의견내용</TableHead>
+              <TableCell>
+                <Textarea
+                  value={formData.rvwRsltCn}
+                  onChange={(event) =>
+                    setFormData((prev) => ({ ...prev, rvwRsltCn: event.target.value }))
+                  }
+                  placeholder="의견내용을 입력하세요"
+                  rows={4}
+                  className="min-h-[8rem] !text-xl"
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>검토결과</TableHead>
+              <TableCell>
+                <FieldSet>
+                  <RadioGroup
+                    value={formData.rvwRsltAnmlyYn}
+                    onValueChange={(value) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        rvwRsltAnmlyYn: value as ReviewOpinionFormData["rvwRsltAnmlyYn"],
+                      }))
+                    }
+                  >
+                    <div className="flex flex-wrap gap-4">
+                      <FieldLabel
+                        htmlFor={`rvw-opnn-normal-${reviewStep}`}
+                        className="!w-auto border-none"
+                      >
+                        <Field orientation="horizontal" className="w-auto">
+                          <RadioGroupItem value="N" id={`rvw-opnn-normal-${reviewStep}`} />
+                          <span className="font-normal">정상</span>
+                        </Field>
+                      </FieldLabel>
+                      <FieldLabel
+                        htmlFor={`rvw-opnn-abnormal-${reviewStep}`}
+                        className="!w-auto border-none"
+                      >
+                        <Field orientation="horizontal" className="w-auto">
+                          <RadioGroupItem value="Y" id={`rvw-opnn-abnormal-${reviewStep}`} />
+                          <span className="font-normal">이상</span>
+                        </Field>
+                      </FieldLabel>
+                    </div>
+                  </RadioGroup>
+                </FieldSet>
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>첨부파일</TableHead>
+              <TableCell>
+                {uploadedFile ? (
+                  <div className="flex items-center gap-2">
+                    <TextShimmer className="text-xl" active={uploading}>
+                      {uploadedFile.fileName}
+                    </TextShimmer>
+                    <Button
+                      size="icon"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        void handleFileRemove();
+                      }}
+                      disabled={uploading}
+                      className="size-8 !bg-destructive"
+                    >
+                      <i className="diveicon di-x text-xs" aria-label="삭제" />
+                    </Button>
+                  </div>
+                ) : (
+                  <label>
+                    <input
+                      type="file"
+                      className="hidden"
+                      onChange={(event) => {
+                        void handleFileUpload(event.target.files);
+                        event.target.value = "";
+                      }}
+                    />
+                    <Button size="sm" variant="outline" type="button" asChild>
+                      <span>파일 선택</span>
+                    </Button>
+                  </label>
+                )}
+              </TableCell>
+            </TableRow>
+          </TableHeader>
+        </Table>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {hasEnvSection ? (
+        <SectionCollapsible title={`${REVIEW_STEP_LABELS.ENV} 검토의견`}>
+          <div className="space-y-6">
+            {envRvwList.length > 0 ? <TechReviewOpinionTable items={envRvwList} /> : null}
+            {renderOpinionForm("ENV")}
+          </div>
+        </SectionCollapsible>
+      ) : null}
+      {hasKecoSection ? (
+        <SectionCollapsible title={`${REVIEW_STEP_LABELS.KECO} 검토의견`}>
+          <div className="space-y-6">
+            {kecoRvwList.length > 0 ? <TechReviewOpinionTable items={kecoRvwList} /> : null}
+            {renderOpinionForm("KECO")}
+          </div>
+        </SectionCollapsible>
+      ) : null}
+    </>
+  );
+});
+
+function TechReviewOpinionTable({ items }: TechReviewOpinionTableProps) {
+  return (
+    <div className="overflow-x-auto">
+      <Table variant="secondary">
+        <colgroup>
+          <col width="10%" />
+          <col width="55%" />
+          <col width="5%" />
+          <col width="20%" />
+          <col width="10%" />
+        </colgroup>
+        <TableHeader>
+          <TableRow>
+            <TableHead>의견자명</TableHead>
+            <TableHead>의견내용</TableHead>
+            <TableHead>검토결과</TableHead>
+            <TableHead>첨부파일</TableHead>
+            <TableHead>등록일시</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {items.map((item) => (
+            <TableRow key={`${item.instlSncnDocNo}_${item.rvwOpnnSn}`}>
+              <TableCell align="center">{item.opnrNm}</TableCell>
+              <TableCell align="left">{item.rvwRsltCn || "-"}</TableCell>
+              <TableCell align="center">
+                {item.rvwRsltAnmlyYn === "Y" ? "이상" : item.rvwRsltAnmlyYn === "N" ? "정상" : "-"}
+              </TableCell>
+              <TableCell align="center">
+                {item.atchFileInfo?.atflCd ? (
+                  <AttachmentDownloadLink
+                    atflCd={item.atchFileInfo.atflCd}
+                    fileName={item.atchFileInfo.orgnlFileNm || "다운로드"}
+                  />
+                ) : (
+                  "-"
+                )}
+              </TableCell>
+              <TableCell align="center">
+                {item.regDt ? dayjs(item.regDt).format("YYYY-MM-DD HH:mm:ss") : "-"}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+export { TechReviewOpinionSection };

apps/as/src/pages/my-pbadms-sprt/ui/my-pbadms-sprt-list-page.tsx

@@ -89,8 +89,8 @@ function MyPbadmsSprtListPage() {
   };
 
   return (
-    <div className="card card-border !mt-6">
-      <div className="card card-border">
+    <div className="space-y-4 px-[1.8rem] pb-6">
+      <section className="card card-border mx-0 bg-background">
         <form className="flex flex-wrap items-center gap-4 p-2" onSubmit={handleSearch}>
           <div className="flex items-center gap-2">
             <Label className="whitespace-nowrap">기간</Label>
@@ -157,7 +157,7 @@ function MyPbadmsSprtListPage() {
 
           <Button type="submit">검색</Button>
         </form>
-      </div>
+      </section>
 
       <MyPbadmsSprtList
         searchParams={searchParams}

apps/as/src/pages/my-pbadms-sprt/ui/my-pbadms-sprt-list.tsx

@@ -70,19 +70,18 @@ function MyPbadmsSprtList({ searchParams, pagination, onPaginationChange }: MyPb
       manualPagination: true,
     },
     dataTableOptions: {
-      caption: "내 신청 목록으로 No, 구분, 신청일, 진행상태, 완료(예정)일, 담당자, 담당자연락처 정보 제공",
       viewPagination: true,
       onRowClick: handleRowClick,
     },
   });
 
   return (
-    <div className="card card-border pt-0">
+    <section className="card card-border mx-0 bg-background pb-8 pt-0">
       <div className="card-header flex items-center justify-between">
-        <h3 className="text-2xl font-medium text-label">내 신청 목록</h3>
+        <h3 className="text-2xl font-semibold">내 신청 목록</h3>
       </div>
-      <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
-    </div>
+      {tableComponent}
+    </section>
   );
 }