[as frontend] 결제자 지정및 결제 요청 테이블에 넣는 로직 추가

apps/as/src/entities/elapr/api/elapr-dmnd-service.ts

@@ -0,0 +1,17 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+
+import type {
+  ElaprDmndResponse,
+  ElaprDmndSaveRequest,
+  ElaprDmndService,
+} from "../model/elapr-dmnd-interface";
+
+async function create(body: ElaprDmndSaveRequest): Promise<ElaprDmndResponse> {
+  const response = await client.post<ElaprDmndResponse>(ENDPOINT.AS_ELAPR_SERVICE.ELAPR_DMND, body);
+  return response.data;
+}
+
+export const ElaprDmndApi: ElaprDmndService = {
+  create,
+};

apps/as/src/entities/elapr/api/elapr-prgrs-service.ts

@@ -0,0 +1,7 @@
+import { client } from "@/shared/api";
+
+export async function processElaprPrgrs(elaprPrgrsId: string, atrzPrgrsSttsComCd = "ATRZ_STTS_003"): Promise<void> {
+  await client.put(`/as-elapr-service/api/v1/elapr-prgrs-stts/${elaprPrgrsId}/process`, {
+    atrzPrgrsSttsComCd,
+  });
+}

apps/as/src/entities/elapr/model/elapr-dmnd-interface.ts

@@ -0,0 +1,22 @@
+export interface ElaprDmndSaveRequest {
+  elaprDocNo: string;
+  elaprTmpltId: string;
+  dmndTtl: string;
+  dmndCn: string;
+}
+
+export interface ElaprDmndResponse {
+  elaprDmndId: string;
+  elaprDocNo: string;
+  elaprTmpltId: string;
+  dmndTtl: string;
+  dmndCn: string;
+  atrzSttsComCd: string;
+  rqstrUuid: string;
+  regDt: string;
+  updtDt: string;
+}
+
+export interface ElaprDmndService {
+  create(body: ElaprDmndSaveRequest): Promise<ElaprDmndResponse>;
+}

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

@@ -11,8 +11,11 @@ import { useRouter } from "next/navigation";
 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";
 
@@ -171,10 +174,8 @@ function CnfmViewPage({ id }: { id: string }) {
       alert("결재 정보가 올바르지 않습니다.");
       return;
     }
-    const url = `${PROXY_HOST}/as-elapr-service/api/v1/elapr-prgrs-stts/${elaprPrgrsId}/process`;
-    const body = { atrzPrgrsSttsComCd: "ATRZ_STTS_003" }; // 승인 처리
     try {
-      await axios.put(url, body);
+      await processElaprPrgrs(String(elaprPrgrsId), "ATRZ_PRGRS_003"); //진행상태를 승인으로 업데이트
       alert("결재가 완료되었습니다.");
       try {
         await query.refetch();
@@ -188,6 +189,29 @@ function CnfmViewPage({ id }: { id: string }) {
     }
   };
 
+  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 ?? "";
@@ -374,48 +398,57 @@ function CnfmViewPage({ id }: { id: string }) {
 
   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>
+      {/* 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>
@@ -429,8 +462,8 @@ function CnfmViewPage({ id }: { id: string }) {
             <tr>
               <th>사업명</th>
               <td>{det.bizNm || "-"}</td>
-               <th>사업기간</th>
-              <td>{(det.bizBgngYr || "-") + " ~ " + (det.bizEndYr || "-")}</td> 
+              <th>사업기간</th>
+              <td>{(det.bizBgngYr || "-") + " ~ " + (det.bizEndYr || "-")}</td>
             </tr>
             <tr>
               <th>사업내용</th>
@@ -448,11 +481,11 @@ function CnfmViewPage({ id }: { id: string }) {
             </tr>
             <tr>
               <th>진행상태</th>
-              <td>{det.prgrsSttsCdNm || det.prgrsSttsComCd || "-"}</td> 
+              <td>{det.prgrsSttsCdNm || det.prgrsSttsComCd || "-"}</td>
               <th>예산사업코드</th>
               <td>{det.bgtBizCd || "-"}</td>
             </tr>
-           
+
           </tbody>
         </table>
       </div>
@@ -573,7 +606,7 @@ function CnfmViewPage({ id }: { id: string }) {
             </thead>
             <tbody>
               {bizCstList.map((node: any) => {
- 
+
                 const pl = indentPx(node.indAcntgSeCdNm);
                 const bscPlanAmt = Number(node.bscPlanAmt) || 0;
                 const budgetReflct = Number(node.bgtRfltAmt) || 0;
@@ -588,8 +621,8 @@ function CnfmViewPage({ id }: { id: string }) {
                       node.treeLevel === 1
                         ? "bg-blue-50 font-bold"
                         : node.treeLevel === 2
-                        ? "bg-gray-100 font-semibold"
-                        : ""
+                          ? "bg-gray-100 font-semibold"
+                          : ""
                     }
                   >
                     {node.treeLevel <= 2 ? (
@@ -631,31 +664,30 @@ function CnfmViewPage({ id }: { id: string }) {
       </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"
+      <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>
+                    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">
@@ -666,11 +698,10 @@ function CnfmViewPage({ id }: { id: string }) {
               <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"
-                }`}
+                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}
@@ -701,7 +732,7 @@ function CnfmViewPage({ id }: { id: string }) {
                   </button>
                 </th>
                 <th className="w-[9rem]">
-                   <button
+                  <button
                     type="button"
                   >
                     아니오
@@ -718,50 +749,50 @@ function CnfmViewPage({ id }: { id: string }) {
                 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" ;
+                  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}
+                      {!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>
                   );
                 })
@@ -778,7 +809,7 @@ function CnfmViewPage({ id }: { id: string }) {
           <table className="cnfm-table">
             <thead>
               <tr>
-                <th>필수 자료명</th> 
+                <th>필수 자료명</th>
                 <th>파일명</th>
                 <th className="w-[8rem] text-right">크기</th>
               </tr>

apps/as/src/shared/config/api.ts

@@ -20,6 +20,7 @@ export const ENDPOINT = {
   AS_ELAPR_SERVICE: {
     ELAPR_TMPLT: "/as-elapr-service/api/v1/elapr-tmplt",
     ELAPR_APLN: "/as-elapr-service/api/v1/elapr-apln",
+    ELAPR_DMND: "/as-elapr-service/api/v1/elapr-dmnd",
   },
   AS_CHECKLIST_SERVICE: {
     CKLST: "/as-service/api/v1/cklst",