[as instl] 신청 버튼 클릭시 업무구분 팝업 조회로직으로 해서 추가함

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

@@ -1,11 +1,12 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
 
 import { useQuery } from "@tanstack/react-query";
 
 import { dayjs } from "@/shared/lib";
+import { useCodeList } from "@/entities/code";
 import { InstlSncnApi, type InstlSncnMngSearchParams } from "@/entities/instl-sncn";
 
 import "./cnfm-page.css";
@@ -65,6 +66,17 @@ function CnfmListPage() {
   });
   const [pageIndex, setPageIndex] = useState(0);
   const [pageSize, setPageSize] = useState(10);
+  const [taskDialogOpen, setTaskDialogOpen] = useState(false);
+  const [selectedTaskSeComCd, setSelectedTaskSeComCd] = useState("");
+
+  const { data: fnrsCodeList = [] } = useCodeList("FNRS");
+
+  useEffect(() => {
+    if (!taskDialogOpen) return;
+    if (selectedTaskSeComCd) return;
+    if (fnrsCodeList.length === 0) return;
+    setSelectedTaskSeComCd(fnrsCodeList[0].lwpoCd);
+  }, [taskDialogOpen, selectedTaskSeComCd, fnrsCodeList]);
 
   const query = useQuery({
     queryKey: ["instl-sncn-list", search, pageIndex, pageSize],
@@ -91,6 +103,23 @@ function CnfmListPage() {
     setSearch({ bizNm, taskSeComCd, sidoComCd, sggComCd });
   };
 
+  const handleOpenTaskDialog = () => {
+    setSelectedTaskSeComCd((prev) => prev || fnrsCodeList[0]?.lwpoCd || "");
+    setTaskDialogOpen(true);
+  };
+
+  const handleConfirmTaskDialog = () => {
+    const selected = fnrsCodeList.find((item) => item.lwpoCd === selectedTaskSeComCd);
+    if (!selected) return;
+
+    const query = new URLSearchParams({
+      taskSeComCd: selected.lwpoCd,
+      taskSeComCdNm: selected.lwpoCdNm,
+    });
+    setTaskDialogOpen(false);
+    router.push(`/instl-sncn/register?${query.toString()}`);
+  };
+
   return (
     <div className="cnfm-page-wrap">
       {/* 검색 영역 */}
@@ -160,7 +189,7 @@ function CnfmListPage() {
             <button
               type="button"
               className="cnfm-btn-register"
-              onClick={() => router.push("/instl-sncn/register")}
+              onClick={handleOpenTaskDialog}
             >
               ✎ 신청
             </button>
@@ -311,6 +340,58 @@ function CnfmListPage() {
           </button>
         </div>
       </div>
+
+      {taskDialogOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30">
+          <div className="w-[72rem] max-w-[95vw] overflow-hidden rounded-md border bg-white shadow-xl">
+            <div className="flex items-center justify-between border-b px-6 py-4">
+              <h4 className="text-[2rem] font-bold text-gray-700">업무구분 선택</h4>
+              <button
+                type="button"
+                className="rounded border border-gray-300 px-4 py-1 text-[1.2rem] text-gray-600 hover:bg-gray-50"
+                onClick={() => setTaskDialogOpen(false)}
+              >
+                닫기
+              </button>
+            </div>
+
+            <div className="px-6 py-5">
+              <div className="flex flex-wrap items-center gap-8 text-[1.5rem]">
+                {fnrsCodeList.map((item) => (
+                  <label key={item.lwpoCd} className="flex cursor-pointer items-center gap-2">
+                    <input
+                      type="radio"
+                      name="taskSeComCdSelect"
+                      value={item.lwpoCd}
+                      checked={selectedTaskSeComCd === item.lwpoCd}
+                      onChange={() => setSelectedTaskSeComCd(item.lwpoCd)}
+                    />
+                    {item.lwpoCdNm}
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-2 border-t px-6 py-4">
+              <button
+                type="button"
+                className="rounded border border-gray-300 px-5 py-2 text-[1.3rem] text-gray-700 hover:bg-gray-50"
+                onClick={() => setTaskDialogOpen(false)}
+              >
+                취소
+              </button>
+              <button
+                type="button"
+                className="rounded bg-blue-500 px-5 py-2 text-[1.3rem] font-semibold text-white hover:bg-blue-600 disabled:cursor-not-allowed disabled:bg-gray-300"
+                onClick={handleConfirmTaskDialog}
+                disabled={!selectedTaskSeComCd}
+              >
+                확인
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

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

@@ -1,7 +1,7 @@
 "use client";
 
-import { useMemo, useState } from "react";
-import { useRouter } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 
 import { useQuery } from "@tanstack/react-query";
 
@@ -55,6 +55,14 @@ const ReadCell = ({ value }: { value: string | number }) => (
 /* ------------------------------------------------------------------ */
 function CnfmRegistPage() {
   const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const taskSeComCdNm = searchParams?.get("taskSeComCdNm") || "하수관로";
+  const [taskSeComCd, setTaskSeComCd] = useState("");
+
+  useEffect(() => {
+    setTaskSeComCd(searchParams?.get("taskSeComCd") || "");
+  }, [searchParams]);
 
   /* ── 기본 정보 ── */
   const [bzNm, setBzNm] = useState("");
@@ -181,11 +189,19 @@ function CnfmRegistPage() {
 
   function handleSave() {
     if (!fnValidation("SAVE")) return;
+    const payload = {
+      taskSeComCd,
+    };
+    void payload;
     alert("저장(임시) API 연동 후 progrsSttus=SV 전송");
   }
 
   function handleSubmit() {
     if (!fnValidation("PRESENTN")) return;
+    const payload = {
+      taskSeComCd,
+    };
+    void payload;
     alert("제출 API 연동 후 progrsSttus=ST 전송");
   }
 
@@ -292,7 +308,8 @@ function CnfmRegistPage() {
             <tr>
               <th>구분</th>
               <td>
-                <div className="flex gap-4 text-[1.3rem]">하수관로</div>
+                <div className="flex gap-4 text-[1.3rem]">{taskSeComCdNm}</div>
+                <input type="hidden" name="taskSeComCd" value={taskSeComCd} />
               </td>
               <th>신청 지자체</th>
               <td>