From bb7cce47ac7670d64bbba9118ecafb35ac1ad8bc Mon Sep 17 00:00:00 2001
From: jangwoong <changwng@gmail.com>
Date: Thu, 4 Jun 2026 11:02:43 +0900
Subject: [PATCH] =?UTF-8?q?[as=20frontend]=20=EC=B2=B4=ED=81=AC=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=B7=B0=EC=8B=9C=20rvw=5Fstp=5Fcom=5Fcd.?=
 =?UTF-8?q?=EB=A6=AC=EB=B7=B0=EB=8B=A8=EA=B3=84=EC=BD=94=EB=93=9C=EB=B0=8F?=
 =?UTF-8?q?,=20=EC=97=85=EB=AC=B4=EA=B5=AC=EB=B6=84=EB=B3=84=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B7=B0=EB=8B=A8=EC=97=90=EC=84=9C=20=EB=B3=B4=EC=9D=B4?=
 =?UTF-8?q?=EB=8A=94=20=EB=B6=80=EB=B6=84=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/instl-sncn/ui/cnfm-view-page.tsx    | 58 +++++++++++++++++--
 1 file changed, 54 insertions(+), 4 deletions(-)

diff --git a/apps/as/src/pages/instl-sncn/ui/cnfm-view-page.tsx b/apps/as/src/pages/instl-sncn/ui/cnfm-view-page.tsx
index 606c9c31c..1f5d867d0 100644
--- a/apps/as/src/pages/instl-sncn/ui/cnfm-view-page.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/cnfm-view-page.tsx
@@ -55,6 +55,13 @@ const getRoleStepCount = (dtlInstCd?: string): number => {
   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[]> => {
@@ -122,6 +129,13 @@ function CnfmViewPage({ id }: { id: string }) {
     [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;
@@ -130,10 +144,28 @@ function CnfmViewPage({ id }: { id: string }) {
     }
   }, [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 [];
-    return cklstResultMap[selectedReviewStep] ?? [];
-  }, [cklstResultMap, selectedReviewStep, visibleReviewStepCodes.length]);
+    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>>({});
@@ -142,7 +174,7 @@ function CnfmViewPage({ id }: { id: string }) {
     const results: Record<string, string> = {};
     const comments: Record<string, string> = {};
     (selectedChecklistRows ?? []).forEach((row: any) => {
-      const key = `${row.cklstSn}_${row.cklstRvwSn}_${row.rvwStpComCd ?? "LOCAL"}`;
+      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);
     });
@@ -387,6 +419,24 @@ function CnfmViewPage({ id }: { id: string }) {
       {/* 체크리스트 */}
       <div className="cnfm-card p-4">
         <h3 className="text-[1.5rem] font-bold text-gray-700">체크리스트</h3>
+        <div className="mb-3 mt-2 flex flex-wrap gap-2">
+          {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="mb-3 mt-2 flex flex-wrap gap-2">
           {visibleReviewStepCodes.length === 0 ? (
             <span className="text-[1.2rem] text-gray-500">
@@ -446,7 +496,7 @@ function CnfmViewPage({ id }: { id: string }) {
                 </tr>
               ) : (
                 selectedChecklistRows.map((row: any) => {
-                  const key = `${row.cklstSn}_${row.cklstRvwSn}_${row.rvwStpComCd ?? "LOCAL"}`;
+                  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" ;