From a956c9894eb5a2a048590c0d9e8847ca5a70897e Mon Sep 17 00:00:00 2001
From: rsone001 <rsone001@gmail.com>
Date: Thu, 9 Jul 2026 11:35:50 +0900
Subject: [PATCH 01/32] =?UTF-8?q?[st]=20-=20=EA=B3=B5=EC=A7=80=EC=82=AC?=
 =?UTF-8?q?=ED=95=AD=20=EB=A9=94=EB=89=B4=20=EC=83=88=EC=B0=BD=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=97=B4=EB=8F=84=EB=A1=9D=20return=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/st/app/(main)/(with-base-layout)/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/st/app/(main)/(with-base-layout)/layout.tsx b/apps/st/app/(main)/(with-base-layout)/layout.tsx
index 16baba982..96468f9d5 100644
--- a/apps/st/app/(main)/(with-base-layout)/layout.tsx
+++ b/apps/st/app/(main)/(with-base-layout)/layout.tsx
@@ -187,7 +187,7 @@ function WithBaseLayoutInner({ children }: { children: React.ReactNode }) {
 
     const handleMenuClick = useCallback(
         (item: MenuItem) => {
-            if (item.urlPath.includes("/cms/")) return;
+            // if (item.urlPath.includes("/cms/")) return;
 
             setCurrentMenuInfo(item);
 

From 13c7d5a0c53da84e69495aa3ebce71626a28d3b9 Mon Sep 17 00:00:00 2001
From: ljpark <mind-one005@mind-one.co.kr>
Date: Thu, 9 Jul 2026 17:38:57 +0900
Subject: [PATCH 02/32] =?UTF-8?q?wr:=20=EC=A4=91=EC=88=98=EB=8F=84?=
 =?UTF-8?q?=EC=8B=9C=EC=84=A4=20=EB=93=B1=EB=A1=9D=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=95=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/wr/AGENTS.md                             |  3 +++
 .../ruseFcltMng/fcltReg/pbnstReg/page.tsx     |  2 +-
 .../ruseFcltMng/fcltReg/rainReg/page.tsx      |  2 +-
 .../ruseFcltMng/fcltReg/rswtReg/page.tsx      |  4 ++--
 .../business_components/src/ui/map/GisTree.js | 20 +++++++++----------
 5 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/apps/wr/AGENTS.md b/apps/wr/AGENTS.md
index 5b690843c..3acdf0cfd 100644
--- a/apps/wr/AGENTS.md
+++ b/apps/wr/AGENTS.md
@@ -19,6 +19,9 @@ Main technologies:
 - UTF-8 
 - 한글이 깨지지 않도록 주의할 것
 
+## 수정 불가
+- `packages/common/components`는 수정하면 안된다.
+  
 ## 주석 comment
 - 한글 주석을 삭제하지 말 것
 - 신규 component나 함수 자동 생성시 주석을 추가할 것(기본 함수의 역할과 인수 설명)
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/pbnstReg/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/pbnstReg/page.tsx
index a93575f33..ad2e4d44b 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/pbnstReg/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/pbnstReg/page.tsx
@@ -364,7 +364,7 @@ export default function PublicReuseFaciltyInsert() {
                 headlist={pubFacHeadList}
                 pageSize={DEFAULT_LIST_SIZE}
                 total={pbnstHasuResCount || 20}
-                headName={"공공 하수처리시설 목록"}
+                headName={"시설물 목록"}
                 cellClick={cellClick}
                 onPageChange={(page) => {
                   setSelectRow(undefined);
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rainReg/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rainReg/page.tsx
index 37fcab7fc..07b604f9c 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rainReg/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rainReg/page.tsx
@@ -165,7 +165,7 @@ export default function Home() {
                 headlist={rain.upHeadList}
                 pageSize={rainRegSize}
                 total={rainResCount}
-                headName={"건축물 목록"}
+                headName={"시설물 목록"}
                 cellClick={(val) => {
                   cellClick(val);
                 }}
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rswtReg/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rswtReg/page.tsx
index 8cdfa1866..95e8702d7 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rswtReg/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rswtReg/page.tsx
@@ -142,7 +142,7 @@ export default function Home() {
                   <Button
                     className={btnClass}
                     onClick={() => {
-                      rswtBdstSearch(searchTxt || "", pageNation,laeSeCd);
+                      rswtBdstSearch(searchTxt || "", 1, laeSeCd);
                     }}
                   >
                     조회
@@ -171,7 +171,7 @@ export default function Home() {
                 headlist={rswt.upHeadList}
                 pageSize={rswtRegSize}
                 total={rswtResCount}
-                headName={"건축물 목록"}
+                headName={"시설물 목록"}
                 cellClick={cellClick}
                 onPageChange={setPageNation}
                 index={rswtTableIndex}
diff --git a/packages/common/business_components/src/ui/map/GisTree.js b/packages/common/business_components/src/ui/map/GisTree.js
index cdf67af25..b402d7b47 100644
--- a/packages/common/business_components/src/ui/map/GisTree.js
+++ b/packages/common/business_components/src/ui/map/GisTree.js
@@ -526,7 +526,7 @@ export default React.memo(function GisTree({
 		<>
 			{/* 사이드 패널 */}
 			<div
-				className={`gis-layer-panel absolute left-0 top-0 z-40 flex h-full w-[250px] flex-col overflow-hidden border-r border-gray-300 bg-white transition-all duration-300 ${visible
+				className={`gis-layer-panel absolute left-0 top-0 z-40 flex h-full w-[250px] flex-col overflow-hidden border-r border-border bg-background text-foreground transition-all duration-300 ${visible
 					? "translate-x-0 opacity-100"
 					: "pointer-events-none -translate-x-full opacity-0"
 					}`}
@@ -537,8 +537,8 @@ export default React.memo(function GisTree({
 				>
 					{showLayerPanelTitle && (
 						<>
-							<h3 className="gis-layer-panel-title mx-2 my-4 text-3xl font-bold text-gray-600 text-center">시설물</h3>
-							<hr className="mb-4" />
+							<h3 className="gis-layer-panel-title mx-2 my-4 text-center text-3xl font-bold text-label">시설물</h3>
+							<hr className="mb-4 border-border" />
 						</>
 					)}
 					{/* DnD Tree */}
@@ -570,7 +570,7 @@ export default React.memo(function GisTree({
 								return (
 									<div style={{ display: isVisible ? "block" : "none" }}>
 										<div
-											className="gis-layer-row flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-gray-100"
+											className="gis-layer-row flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-accent"
 											style={{
 												marginInlineStart: depth * 16,
 												width: `calc(100% - ${depth * 16}px)`,
@@ -602,7 +602,7 @@ export default React.memo(function GisTree({
 											{showLayerActionButton && (
 												<button
 													type="button"
-													className="gis-layer-action-button ml-auto shrink-0 rounded-sm border border-[#9cc6f0] bg-white px-2 py-[1px] text-[1.1rem] font-medium leading-5 text-[#2c6fb7] transition-colors hover:bg-[#eef6ff]"
+													className="gis-layer-action-button ml-auto shrink-0 rounded-sm border border-primary bg-background px-2 py-[1px] text-[1.1rem] font-medium leading-5 text-primary transition-colors hover:bg-accent"
 													onClick={() =>
 														handleLayerImgClick(
 															node.data.lyrTyNm,
@@ -652,14 +652,14 @@ export default React.memo(function GisTree({
 					</div>
 				</div>
 				{LayerSettingView && (
-					<div className="gis-layer-setting shrink-0 bg-white px-2 pb-3">
+					<div className="gis-layer-setting shrink-0 bg-background px-2 pb-3">
 						<LayerSettingView />
 					</div>
 				)}
 				{!detachedToggleButton && (
 					<button
 						onClick={() => setVisible(false)}
-						className={`gis-layer-toggle absolute right-[-3px] z-50 transform rounded-l-none rounded-r border border-l border-gray-300 bg-white px-1 py-2 shadow-sm ${toggleButtonPositionClass}`}
+						className={`gis-layer-toggle absolute right-[-3px] z-50 transform rounded-l-none rounded-r border border-l border-border bg-background px-1 py-2 text-foreground shadow-sm ${toggleButtonPositionClass}`}
 					>
 						<ChevronLeft size={16} />
 					</button>
@@ -668,7 +668,7 @@ export default React.memo(function GisTree({
 			{detachedToggleButton && visible && (
 				<button
 					onClick={() => setVisible(false)}
-					className={`gis-layer-toggle absolute left-[250px] z-50 flex h-[36px] w-[20px] transform items-center justify-center rounded-[4px] border border-[#d8dee8] bg-[rgba(255,255,255,0.96)] text-[#1e88e5] shadow-[0_8px_18px_rgba(15,23,42,0.14)] transition hover:bg-[#eaf4ff] ${toggleButtonPositionClass}`}
+					className={`gis-layer-toggle absolute left-[250px] z-50 flex h-[36px] w-[20px] transform items-center justify-center rounded-[4px] border border-border bg-background text-primary shadow-[0_8px_18px_rgba(15,23,42,0.14)] transition hover:bg-accent ${toggleButtonPositionClass}`}
 					title="접기"
 				>
 					<ChevronLeft className="h-4 w-4" />
@@ -678,8 +678,8 @@ export default React.memo(function GisTree({
 				<button
 					onClick={() => setVisible(true)}
 					className={detachedToggleButton
-						? `gis-layer-toggle absolute left-0 z-50 flex h-[36px] w-[20px] transform items-center justify-center rounded-[4px] border border-[#d8dee8] bg-[rgba(255,255,255,0.96)] text-[#1e88e5] shadow-[0_8px_18px_rgba(15,23,42,0.14)] transition hover:bg-[#eaf4ff] ${toggleButtonPositionClass}`
-						: `gis-layer-toggle absolute left-[-3px] z-50 transform rounded-r border border-r border-gray-300 bg-white px-1 py-2 shadow-sm ${toggleButtonPositionClass}`}
+						? `gis-layer-toggle absolute left-0 z-50 flex h-[36px] w-[20px] transform items-center justify-center rounded-[4px] border border-border bg-background text-primary shadow-[0_8px_18px_rgba(15,23,42,0.14)] transition hover:bg-accent ${toggleButtonPositionClass}`
+						: `gis-layer-toggle absolute left-[-3px] z-50 transform rounded-r border border-r border-border bg-background px-1 py-2 text-foreground shadow-sm ${toggleButtonPositionClass}`}
 					title="열기"
 				>
 					{detachedToggleButton ? <ChevronRight className="h-4 w-4" /> : <ChevronRight size={16} />}

From 14ae432833c0efc031d740e795205265660d5106 Mon Sep 17 00:00:00 2001
From: rsone001 <rsone001@gmail.com>
Date: Fri, 10 Jul 2026 12:27:52 +0900
Subject: [PATCH 03/32] =?UTF-8?q?[st]=20-=20fix:=20=EC=9E=85=EB=A0=A5?=
 =?UTF-8?q?=EB=8B=A8=20superAdmin=20=ED=95=84=EB=93=9C=20=EC=A1=B4?=
 =?UTF-8?q?=EC=9E=AC=20=EC=8B=9C=EC=97=90=EB=A7=8C=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../statistics/input/PublicSewageFacilityInp.tsx       |  2 +-
 .../src/components/statistics/input/SewagePipeInp.tsx  | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/st/src/components/statistics/input/PublicSewageFacilityInp.tsx b/apps/st/src/components/statistics/input/PublicSewageFacilityInp.tsx
index 685cea13c..120b7b8a2 100644
--- a/apps/st/src/components/statistics/input/PublicSewageFacilityInp.tsx
+++ b/apps/st/src/components/statistics/input/PublicSewageFacilityInp.tsx
@@ -556,7 +556,7 @@ const PublicSewageFacilityInp = () => {
                         sggNm: lastSearchedValues.gugun === 'ALL' ? '' : lastSearchedValues.gugun ?? '',
                         sewerBzmnCd: lastSearchedValues.bsnmCd ?? '',
                         userId: userInfo.userUnqId,
-                        superAdmin: isAdminInfo ? 'superAdmin' : '',
+                        ...(isAdminInfo ? { superAdmin: 'superAdmin' } : {}),
                         noApplicable,
                         saveList,
                     };
diff --git a/apps/st/src/components/statistics/input/SewagePipeInp.tsx b/apps/st/src/components/statistics/input/SewagePipeInp.tsx
index d49ba291a..57d3fc8e1 100644
--- a/apps/st/src/components/statistics/input/SewagePipeInp.tsx
+++ b/apps/st/src/components/statistics/input/SewagePipeInp.tsx
@@ -1670,7 +1670,7 @@ const SewagePipeInp = () => {
                         sggNm: values.gugun === "ALL" ? "" : (values.gugun ?? ""),
                         sewerBzmnCd: values.bsnmCd ?? "",
                         userId: userInfo.userUnqId,
-                        superAdmin: isAdminInfo ? "superAdmin" : "",
+                        ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
                         saveList,
                     };
 
@@ -1750,7 +1750,7 @@ const SewagePipeInp = () => {
                         sggNm: values.gugun === "ALL" ? "" : (values.gugun ?? ""),
                         sewerBzmnCd: values.bsnmCd ?? "",
                         userId: userInfo.userUnqId,
-                        superAdmin: isAdminInfo ? "superAdmin" : "",
+                        ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
                         saveList,
                     };
 
@@ -1835,7 +1835,7 @@ const SewagePipeInp = () => {
                         sggNm: values.gugun === "ALL" ? "" : (values.gugun ?? ""),
                         sewerBzmnCd: values.bsnmCd ?? "",
                         userId: userInfo.userUnqId,
-                        superAdmin: isAdminInfo ? "superAdmin" : "",
+                        ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
                         saveList,
                     };
 
@@ -1898,7 +1898,7 @@ const SewagePipeInp = () => {
                         sggNm: values.gugun === "ALL" ? "" : (values.gugun ?? ""),
                         sewerBzmnCd: values.bsnmCd ?? "",
                         userId: userInfo.userUnqId,
-                        superAdmin: isAdminInfo ? "superAdmin" : "",
+                        ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
                         saveList,
                     };
 
@@ -1977,7 +1977,7 @@ const SewagePipeInp = () => {
                         sggNm: values.gugun === "ALL" ? "" : (values.gugun ?? ""),
                         sewerBzmnCd: values.bsnmCd ?? "",
                         userId: userInfo.userUnqId,
-                        superAdmin: isAdminInfo ? "superAdmin" : "",
+                        ...(isAdminInfo ? { superAdmin: "superAdmin" } : {}),
                         saveList,
                     };
 

From fe4a4a420ecab0ce926e61fd3989c18f03c2c900 Mon Sep 17 00:00:00 2001
From: ljpark <mind-one005@mind-one.co.kr>
Date: Mon, 13 Jul 2026 10:51:16 +0900
Subject: [PATCH 04/32] =?UTF-8?q?wr:=20EMFILE=20=EC=98=A4=EB=A5=98?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/wr/src/app/index.tsx             |   4 -
 apps/wr/src/app/styles/components.css | 157 +++++++++++++++++++++++++-
 2 files changed, 156 insertions(+), 5 deletions(-)

diff --git a/apps/wr/src/app/index.tsx b/apps/wr/src/app/index.tsx
index 4cf2ad5fa..692b55ef0 100644
--- a/apps/wr/src/app/index.tsx
+++ b/apps/wr/src/app/index.tsx
@@ -1,9 +1,5 @@
 import "./styles/base.css";
 import "./styles/components.css";
-import "./styles/components-black.css";
-import "./styles/components-blue.css";
-import "./styles/components-green.css";
-import "./styles/components-red.css";
 import "@fontsource-variable/noto-sans-kr";
 
 import { AppProvider } from "./providers";
diff --git a/apps/wr/src/app/styles/components.css b/apps/wr/src/app/styles/components.css
index 60549b226..fe7565b5a 100644
--- a/apps/wr/src/app/styles/components.css
+++ b/apps/wr/src/app/styles/components.css
@@ -18,7 +18,162 @@
     @apply mt-4 border border-border bg-[#eaf3fb] p-2 text-center text-xl font-medium text-[#647784];
   }
 
-  
+  [data-theme="black"] {
+    .card {
+      color: #fff;
+      background-color: #0a0a0a !important;
+    }
+    form {
+      color: rgb(255 255 255);
+    }
+    label {
+      color: rgb(241, 241, 241);
+    }
+    input {
+      height: 3.2rem;
+      background-color: #1a1a1a;
+      border: 1px solid #262626;
+      border-radius: 4px;
+    }
+    input.text-gray-600 {
+      color: #f1f1f1;
+    }
+    button[role="combobox"] {
+      color: #f1f1f1;
+      background-color: rgb(26, 26, 26);
+    }
+    div [role="tablist"] {
+      border: unset;
+      gap: 4px;
+    }
+    .tabs-trigger[data-state="inactive"] {
+      color: #a4b7bf;
+      background: #55595d;
+    }
+    .tabs-trigger[data-state="inactive"]:hover {
+      color: #6bbaff;
+      background: #4c4f52;
+    }
+    .card-border {
+      box-shadow: 0 0 10px -1px #0000000f;
+      border: 1px solid #393939;
+    }
+    a[aria-current="page"] {
+      background-color: rgb(32, 148, 250);
+      color: #000;
+    }
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+
+    .form-section-title {
+      @apply bg-[#5e7b9c] text-[#fff];
+    }
+
+    .gis-layer-panel {
+      background: #111214;
+      border-right-color: #2f3136;
+      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
+    }
+
+    .gis-layer-panel-title {
+      color: #f3f4f6;
+    }
+
+    .gis-layer-panel hr {
+      border-color: #2f3136;
+    }
+
+    .gis-layer-row {
+      color: #e5e7eb;
+    }
+
+    .gis-layer-row:hover {
+      background: rgba(255, 255, 255, 0.08);
+    }
+
+    .gis-layer-row span,
+    .gis-layer-row label {
+      color: #e5e7eb !important;
+    }
+
+    .gis-layer-row input[type="checkbox"] {
+      accent-color: #c026d3;
+    }
+
+    .gis-layer-action-button {
+      background: #1a1c20;
+      border-color: #3b82f6;
+      color: #cfe3ff;
+    }
+
+    .gis-layer-action-button:hover {
+      background: #23262b;
+    }
+
+    .gis-layer-setting {
+      background: #111214;
+      border-top: 1px solid #2f3136;
+    }
+
+    .gis-layer-toggle {
+      background: #111214;
+      border-color: #2f3136;
+      color: #f3f4f6;
+    }
+
+    .gis-layer-toggle:hover {
+      background: #1a1c20;
+    }
+
+    input[type="file"] {
+      background-color: #1a1a1a;
+      border-color: #262626;
+      color: #f1f1f1;
+    }
+  }
+
+  [data-theme="blue"] {
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+
+    .form-section-title {
+      @apply bg-[#eaf3fb] text-[#647784];
+    }
+  }
+
+  [data-theme="green"] {
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+
+    .form-section-title {
+      @apply bg-[#ebf7f7] text-[#64908f];
+    }
+  }
+
+  [data-theme="red"] {
+    .card-border {
+      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
+    }
+    .card-header {
+      @apply border-b-[#3f4042];
+    }
+
+    .form-section-title {
+      @apply bg-[#f6f6f9] text-[#808080];
+    }
+  }
 
   input[type="file"] {
     @apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;

From d71f2043def5960ddedd9fd5024633794c1dda24 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 13 Jul 2026 11:38:38 +0900
Subject: [PATCH 05/32] =?UTF-8?q?[as]=20feat:=20=ED=95=84=EC=88=98=20?=
 =?UTF-8?q?=EC=B2=A8=EB=B6=80=20=ED=8C=8C=EC=9D=BC=20=EC=97=85=EB=A1=9C?=
 =?UTF-8?q?=EB=93=9C=20=EA=B0=80=EB=8A=A5=ED=95=9C=20=ED=99=95=EC=9E=A5?=
 =?UTF-8?q?=EC=9E=90=20=EC=A0=9C=ED=95=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../widgets/pbadms-sprt/lib/attachments-form-utils.ts | 11 +++++++++++
 .../pbadms-sprt/ui/attachments-form-section.tsx       |  7 ++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/apps/as/src/widgets/pbadms-sprt/lib/attachments-form-utils.ts b/apps/as/src/widgets/pbadms-sprt/lib/attachments-form-utils.ts
index ff9c16b9d..59981f8d1 100644
--- a/apps/as/src/widgets/pbadms-sprt/lib/attachments-form-utils.ts
+++ b/apps/as/src/widgets/pbadms-sprt/lib/attachments-form-utils.ts
@@ -19,3 +19,14 @@ export function createEtcUploadKey(file: File): string {
 export function isEtcFileKey(fileKey: string): boolean {
   return fileKey.startsWith(ETC_FILE_KEY_PREFIX);
 }
+
+export function toFileAccept(rmrk: string | null | undefined): string {
+  if (!rmrk?.trim()) return "";
+
+  return rmrk
+    .split(",")
+    .map((ext) => ext.trim().toLowerCase())
+    .filter(Boolean)
+    .map((ext) => (ext.startsWith(".") ? ext : `.${ext}`))
+    .join(",");
+}
diff --git a/apps/as/src/widgets/pbadms-sprt/ui/attachments-form-section.tsx b/apps/as/src/widgets/pbadms-sprt/ui/attachments-form-section.tsx
index b9d132cf8..ffc2b6341 100644
--- a/apps/as/src/widgets/pbadms-sprt/ui/attachments-form-section.tsx
+++ b/apps/as/src/widgets/pbadms-sprt/ui/attachments-form-section.tsx
@@ -27,6 +27,7 @@ import {
   createUploadKey,
   type FieldPrefix,
   isEtcFileKey,
+  toFileAccept,
 } from "../lib/attachments-form-utils";
 
 import { SectionCollapsible } from "./section-collapsible";
@@ -373,7 +374,8 @@ function AttachmentsFormSection({
               <h3 className="mb-4 text-xl font-semibold">필수 첨부파일</h3>
               <Table variant="secondary">
                 <colgroup>
-                  <col width="60%" />
+                  <col width="50%" />
+                  <col width="10%" />
                   <col width="40%" />
                 </colgroup>
                 <TableHeader>
@@ -381,6 +383,7 @@ function AttachmentsFormSection({
                     <TableHead className="w-[30rem]" align="left">
                       파일명
                     </TableHead>
+                    <TableHead>파일 확장자</TableHead>
                     <TableHead>업로드된 파일</TableHead>
                   </TableRow>
                 </TableHeader>
@@ -401,6 +404,7 @@ function AttachmentsFormSection({
                         >
                           {file.esntlAtchFileNm}
                         </TableHead>
+                        <TableCell align="center">{file.esntlAtchFileRmrk}</TableCell>
                         <TableCell className="space-y-2">
                           {uploadedFiles[file.esntlAtchFileId]?.length > 0 ? (
                             <div className="space-y-1">
@@ -432,6 +436,7 @@ function AttachmentsFormSection({
                               <input
                                 type="file"
                                 className="hidden"
+                                accept={toFileAccept(file.esntlAtchFileRmrk) || undefined}
                                 onChange={(e) => {
                                   void handleEssentialFileUpload(
                                     file.esntlAtchFileId,

From b41814ed0c61689e5d355db8305fbdf09bf8c984 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 13 Jul 2026 12:01:17 +0900
Subject: [PATCH 06/32] =?UTF-8?q?[as]=20chore:=20=EC=B2=B4=ED=81=AC?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=A0=95=EB=A0=AC=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EC=A0=9C=EA=B1=B0=20(=EC=84=9C=EB=B2=84=EC=97=90?=
 =?UTF-8?q?=20=EC=9C=84=EC=9E=84)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../widgets/pbadms-sprt/lib/checklist-form-utils.ts  | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/apps/as/src/widgets/pbadms-sprt/lib/checklist-form-utils.ts b/apps/as/src/widgets/pbadms-sprt/lib/checklist-form-utils.ts
index f49782d84..2c43aca43 100644
--- a/apps/as/src/widgets/pbadms-sprt/lib/checklist-form-utils.ts
+++ b/apps/as/src/widgets/pbadms-sprt/lib/checklist-form-utils.ts
@@ -26,16 +26,6 @@ interface CklstResultListItem {
   picRvwCn?: string | null;
 }
 
-function compareCklstSiblings(a: CklstTreeNode, b: CklstTreeNode): number {
-  if (a.cklstArtclSn !== b.cklstArtclSn) {
-    return a.cklstArtclSn - b.cklstArtclSn;
-  }
-  if (a.sortSeq !== b.sortSeq) {
-    return b.sortSeq - a.sortSeq;
-  }
-  return a.cklstRvwSn - b.cklstRvwSn;
-}
-
 export function orderCklstTreeNodes(rows: CklstTreeNode[]): CklstTreeNode[] {
   const childMap = new Map<number | null, CklstTreeNode[]>();
 
@@ -45,8 +35,6 @@ export function orderCklstTreeNodes(rows: CklstTreeNode[]): CklstTreeNode[] {
     childMap.get(parent)!.push(row);
   });
 
-  childMap.forEach((siblings) => siblings.sort(compareCklstSiblings));
-
   const ordered: CklstTreeNode[] = [];
 
   function walk(parent: number | null) {

From e8c8db73837499bdab37da504a744e3e70dd1955 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 13 Jul 2026 14:05:25 +0900
Subject: [PATCH 07/32] =?UTF-8?q?[as]=20chore:=20=EB=B6=88=ED=95=84?=
 =?UTF-8?q?=EC=9A=94=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/as/src/widgets/pbadms-sprt/index.ts      |  1 -
 .../pbadms-sprt/lib/checklist-form-utils.ts   | 27 ++-----------------
 2 files changed, 2 insertions(+), 26 deletions(-)

diff --git a/apps/as/src/widgets/pbadms-sprt/index.ts b/apps/as/src/widgets/pbadms-sprt/index.ts
index 858019e55..aeee59a58 100644
--- a/apps/as/src/widgets/pbadms-sprt/index.ts
+++ b/apps/as/src/widgets/pbadms-sprt/index.ts
@@ -9,7 +9,6 @@ export { buildCnstpScaleItems, recalculateBzScaleTotals } from "./lib/business-s
 export {
   buildChecklistTabs,
   isFormChecklistComplete,
-  orderCklstTreeNodes,
   syncCklstResultListFromTree,
 } from "./lib/checklist-form-utils";
 export type { FnrsSharItemDef, FnrsSharListItem } from "./lib/fnrs-shar-form-utils";
diff --git a/apps/as/src/widgets/pbadms-sprt/lib/checklist-form-utils.ts b/apps/as/src/widgets/pbadms-sprt/lib/checklist-form-utils.ts
index 2c43aca43..07f015648 100644
--- a/apps/as/src/widgets/pbadms-sprt/lib/checklist-form-utils.ts
+++ b/apps/as/src/widgets/pbadms-sprt/lib/checklist-form-utils.ts
@@ -26,29 +26,6 @@ interface CklstResultListItem {
   picRvwCn?: string | null;
 }
 
-export function orderCklstTreeNodes(rows: CklstTreeNode[]): CklstTreeNode[] {
-  const childMap = new Map<number | null, CklstTreeNode[]>();
-
-  rows.forEach((row) => {
-    const parent = row.upCklstRvwSn ?? null;
-    if (!childMap.has(parent)) childMap.set(parent, []);
-    childMap.get(parent)!.push(row);
-  });
-
-  const ordered: CklstTreeNode[] = [];
-
-  function walk(parent: number | null) {
-    (childMap.get(parent) ?? []).forEach((child) => {
-      ordered.push(child);
-      walk(child.cklstRvwSn);
-    });
-  }
-
-  walk(null);
-
-  return ordered;
-}
-
 function groupCklstTreeByTaskSeComCd(cklstTree: CklstTreeNode[]): Map<string, CklstTreeNode[]> {
   const grouped = new Map<string, CklstTreeNode[]>();
 
@@ -69,7 +46,7 @@ function getOrderedSelectableNodes(
   const grouped = groupCklstTreeByTaskSeComCd(cklstTree);
 
   return taskSeComCdArray.flatMap((code) =>
-    orderCklstTreeNodes(grouped.get(code) ?? []).filter((node) => node.bchckUseYn === "Y"),
+    (grouped.get(code) ?? []).filter((node) => node.bchckUseYn === "Y"),
   );
 }
 
@@ -86,7 +63,7 @@ export function buildChecklistTabs(
   return orderedCodes.map((code) => ({
     code,
     label: taskCodeLabels[code] || code,
-    items: orderCklstTreeNodes(grouped.get(code) ?? []).map((node) => ({
+    items: (grouped.get(code) ?? []).map((node) => ({
       cklstSn: node.cklstSn,
       cklstArtclSn: node.cklstArtclSn,
       cklstRvwSn: node.cklstRvwSn,

From 9d13809d0169f2f1686007eb175ac8cd228e2078 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 13 Jul 2026 14:28:10 +0900
Subject: [PATCH 08/32] =?UTF-8?q?[as]=20feat:=20=EC=B2=B4=ED=81=AC?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=ED=95=AD=EB=AA=A9=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=EC=97=90=20'=EC=A0=95=EB=A0=AC=20=EC=88=9C=EC=84=9C'?=
 =?UTF-8?q?=20=EC=BB=AC=EB=9F=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model/build-rvw-display-rows.ts              | 16 +++++-----------
 .../checklist-management/ui/cklst-rvw-grid.tsx   | 12 +++++++-----
 .../checklist-management/ui/cklst-rvw-row.tsx    | 14 ++++++++++++++
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/apps/as/src/pages/checklist-management/model/build-rvw-display-rows.ts b/apps/as/src/pages/checklist-management/model/build-rvw-display-rows.ts
index f82fc9a96..55e0250bc 100644
--- a/apps/as/src/pages/checklist-management/model/build-rvw-display-rows.ts
+++ b/apps/as/src/pages/checklist-management/model/build-rvw-display-rows.ts
@@ -49,21 +49,15 @@ export function formatTreeBranchPrefix(depth: number): string {
   return "";
 }
 
-function compareSortSeq(a: CklstRvwRow, b: CklstRvwRow): number {
-  return (a.sortSeq ?? 0) - (b.sortSeq ?? 0);
-}
-
 export function buildRvwDisplayRows(rows: CklstRvwRow[]): CklstRvwDisplayRow[] {
   const result: CklstRvwDisplayRow[] = [];
 
-  const roots = rows
-    .filter((row) => (row.rvwCnLvNo ?? 1) === 1 && row.upCklstRvwSn == null)
-    .sort(compareSortSeq);
+  const roots = rows.filter((row) => (row.rvwCnLvNo ?? 1) === 1 && row.upCklstRvwSn == null);
 
   function appendSubtree(parent: CklstRvwRow, depth: number) {
-    const children = rows
-      .filter((row) => row.upCklstRvwSn != null && row.upCklstRvwSn === parent.cklstRvwSn)
-      .sort(compareSortSeq);
+    const children = rows.filter(
+      (row) => row.upCklstRvwSn != null && row.upCklstRvwSn === parent.cklstRvwSn,
+    );
 
     for (const child of children) {
       result.push({ row: child, depth });
@@ -82,7 +76,7 @@ export function buildRvwDisplayRows(rows: CklstRvwRow[]): CklstRvwDisplayRow[] {
     (row) => !result.some((display) => display.row.rowKey === row.rowKey),
   );
 
-  for (const orphan of orphans.sort(compareSortSeq)) {
+  for (const orphan of orphans) {
     result.push({ row: orphan, depth: Math.max(0, (orphan.rvwCnLvNo ?? 1) - 1) });
   }
 
diff --git a/apps/as/src/pages/checklist-management/ui/cklst-rvw-grid.tsx b/apps/as/src/pages/checklist-management/ui/cklst-rvw-grid.tsx
index 7b44ba2b5..bf9884324 100644
--- a/apps/as/src/pages/checklist-management/ui/cklst-rvw-grid.tsx
+++ b/apps/as/src/pages/checklist-management/ui/cklst-rvw-grid.tsx
@@ -279,12 +279,13 @@ function CklstRvwGrid({ selectedCklst }: CklstRvwGridProps) {
       ) : (
         <Table className="w-full">
           <colgroup>
-            <col width="18%" />
-            <col width="42%" />
-            <col width="12%" />
-            <col width="12%" />
+            <col width="16%" />
+            <col width="36%" />
+            <col width="10%" />
+            <col width="10%" />
+            <col width="8%" />
             <col width="5%" />
-            <col width="11%" />
+            <col width="15%" />
           </colgroup>
           <TableHeader>
             <TableRow>
@@ -292,6 +293,7 @@ function CklstRvwGrid({ selectedCklst }: CklstRvwGridProps) {
               <TableHead>주요 검토내용</TableHead>
               <TableHead>사용 여부</TableHead>
               <TableHead>체크 사용</TableHead>
+              <TableHead>정렬 순서</TableHead>
               <TableHead>구분</TableHead>
               <TableHead>관리</TableHead>
             </TableRow>
diff --git a/apps/as/src/pages/checklist-management/ui/cklst-rvw-row.tsx b/apps/as/src/pages/checklist-management/ui/cklst-rvw-row.tsx
index c8bc7cb76..c31a6ee2a 100644
--- a/apps/as/src/pages/checklist-management/ui/cklst-rvw-row.tsx
+++ b/apps/as/src/pages/checklist-management/ui/cklst-rvw-row.tsx
@@ -107,6 +107,20 @@ function CklstRvwRowComponent({
           </div>
         </RadioGroup>
       </TableCell>
+      <TableCell align="center">
+        <Input
+          type="number"
+          min={0}
+          value={row.sortSeq ?? ""}
+          onChange={(e) =>
+            onChange({
+              sortSeq: e.target.value ? Number(e.target.value) : undefined,
+              isDirty: true,
+            })
+          }
+          className="w-20"
+        />
+      </TableCell>
       <TableCell align="center">{levelLabel}</TableCell>
       <TableCell align="center">
         <div className="flex justify-center gap-2">

From 399645a80a4a1f5de8dc1c6bf9db4cdeeec63cd6 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 13 Jul 2026 14:43:55 +0900
Subject: [PATCH 09/32] =?UTF-8?q?[as]=20feat:=20=EC=84=A4=EA=B3=84?=
 =?UTF-8?q?=EC=9E=90=20=EC=A0=84=ED=99=94=EB=B2=88=ED=98=B8=20=EA=B2=80?=
 =?UTF-8?q?=EC=A6=9D=20=EC=BD=94=EB=93=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/fnrs-cnsltn/lib/fnrs-cnsltn-regist-schema.ts   | 5 ++++-
 apps/as/src/pages/instl-sncn/lib/instl-sncn-regist-schema.ts | 5 ++++-
 .../src/widgets/pbadms-sprt/ui/contact-info-form-section.tsx | 2 ++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/as/src/pages/fnrs-cnsltn/lib/fnrs-cnsltn-regist-schema.ts b/apps/as/src/pages/fnrs-cnsltn/lib/fnrs-cnsltn-regist-schema.ts
index 332ef9e14..276fe6e9c 100644
--- a/apps/as/src/pages/fnrs-cnsltn/lib/fnrs-cnsltn-regist-schema.ts
+++ b/apps/as/src/pages/fnrs-cnsltn/lib/fnrs-cnsltn-regist-schema.ts
@@ -10,7 +10,10 @@ export const fnrsCnsltnRegistSchema = z.object({
     cfmtnBgtBizNo: z.string().optional(),
     bgtAplyYr: z.string().optional(),
     dsgnrNm: z.string().min(1, "설계자 이름은 필수입니다"),
-    dsgnrTelno: z.string().min(1, "설계자 전화번호는 필수입니다"),
+    dsgnrTelno: z
+      .string()
+      .min(1, "설계자 전화번호는 필수입니다")
+      .regex(/^[0-9-]+$/, "숫자와 하이픈(-)만 입력 가능합니다"),
     dsgnrOgdpNm: z.string().min(1, "설계자 소속은 필수입니다"),
     dsgnrEmlAddr: z
       .string()
diff --git a/apps/as/src/pages/instl-sncn/lib/instl-sncn-regist-schema.ts b/apps/as/src/pages/instl-sncn/lib/instl-sncn-regist-schema.ts
index 17badc640..ae55e92b9 100644
--- a/apps/as/src/pages/instl-sncn/lib/instl-sncn-regist-schema.ts
+++ b/apps/as/src/pages/instl-sncn/lib/instl-sncn-regist-schema.ts
@@ -9,7 +9,10 @@ export const instlSncnRegistSchema = z.object({
     taskSeComCd: z.array(z.string()).min(1, "구분은 필수입니다"),
     sncnSeComCd: z.string().min(1, "사업구분은 필수입니다"),
     dsgnrNm: z.string().min(1, "설계자 이름은 필수입니다"),
-    dsgnrTelno: z.string().min(1, "설계자 전화번호는 필수입니다"),
+    dsgnrTelno: z
+      .string()
+      .min(1, "설계자 전화번호는 필수입니다")
+      .regex(/^[0-9-]+$/, "숫자와 하이픈(-)만 입력 가능합니다"),
     dsgnrOgdpNm: z.string().min(1, "설계자 소속은 필수입니다"),
     dsgnrEmlAddr: z
       .string()
diff --git a/apps/as/src/widgets/pbadms-sprt/ui/contact-info-form-section.tsx b/apps/as/src/widgets/pbadms-sprt/ui/contact-info-form-section.tsx
index 7787f7a40..1d6e31a16 100644
--- a/apps/as/src/widgets/pbadms-sprt/ui/contact-info-form-section.tsx
+++ b/apps/as/src/widgets/pbadms-sprt/ui/contact-info-form-section.tsx
@@ -70,6 +70,8 @@ function ContactInfoFormSection({ fieldPrefix }: ContactInfoFormSectionProps) {
                       id={field.name}
                       placeholder="설계자 전화번호"
                       aria-invalid={fieldState.invalid}
+                      maxLength={13}
+                      onChange={(e) => field.onChange(e.target.value.replace(/[^0-9-]/g, ""))}
                     />
                     <FieldError errors={[fieldState.error]} />
                   </Field>

From 8d29f2510156d2199e499dc735005b5c63a3f429 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 13 Jul 2026 16:43:01 +0900
Subject: [PATCH 10/32] =?UTF-8?q?[as]=20feat:=20=EC=B2=B4=ED=81=AC?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=A0=84=EC=B2=B4=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/components/checklist-task-panel.tsx    |  44 ++++-
 .../ui/components/checklist-task-panel.tsx    |  44 ++++-
 .../pbadms-sprt/ui/checklist-form-section.tsx | 152 ++++++++++--------
 3 files changed, 163 insertions(+), 77 deletions(-)

diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/components/checklist-task-panel.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/components/checklist-task-panel.tsx
index 4e0100089..1e4d186e6 100644
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/checklist-task-panel.tsx
+++ b/apps/as/src/pages/fnrs-cnsltn/ui/components/checklist-task-panel.tsx
@@ -2,6 +2,7 @@ import type { Dispatch, SetStateAction } from "react";
 
 import type { CklstRvwRsltTreeDto } from "@/entities/fnrs-cnsltn";
 import {
+  Button,
   cn,
   Table,
   TableBody,
@@ -36,6 +37,24 @@ function ChecklistTaskPanel({
   const currentUserReviewStep = userRoleCode ? ROLE_TO_REVIEW_STEP[userRoleCode] : undefined;
   const isStepEditable = currentUserReviewStep === selectedReviewStep;
 
+  function handleSelectAll(value: "Y" | "N") {
+    if (!isStepEditable) return;
+    setFormState((prev) => {
+      const nextResults = { ...prev.results };
+      selectedRows
+        .filter((row) => row.bchckUseYn === "Y")
+        .forEach((row) => {
+          nextResults[buildChecklistRowKey(row, selectedReviewStep)] = value;
+        });
+      return patchChecklistFormState(
+        prev,
+        { results: nextResults },
+        allRows,
+        selectedReviewStep,
+      );
+    });
+  }
+
   return (
     <>
       <div className="overflow-x-auto">
@@ -54,8 +73,27 @@ function ChecklistTaskPanel({
               ) : null}
             </TableRow>
             <TableRow>
-              <TableHead className="w-[9rem]">예</TableHead>
-              <TableHead className="w-[9rem]">아니오</TableHead>
+              <TableHead className="w-[12rem]">
+                <Button
+                  type="button"
+                  size="sm"
+                  disabled={!isStepEditable}
+                  onClick={() => handleSelectAll("Y")}
+                >
+                  전체 예
+                </Button>
+              </TableHead>
+              <TableHead className="w-[12rem]">
+                <Button
+                  type="button"
+                  size="sm"
+                  disabled={!isStepEditable}
+                  onClick={() => handleSelectAll("N")}
+                  className="!bg-destructive"
+                >
+                  전체 아니오
+                </Button>
+              </TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -131,7 +169,7 @@ function ChecklistTaskPanel({
                       <TableCell className="text-left">
                         <Textarea
                           className={cn(
-                            "min-h-[6rem] !text-xl",
+                            "min-h-[6rem] w-[32rem] !text-xl",
                             isStepEditable ? "cursor-pointer" : "cursor-not-allowed",
                           )}
                           value={formState.comments[key] ?? ""}
diff --git a/apps/as/src/pages/instl-sncn/ui/components/checklist-task-panel.tsx b/apps/as/src/pages/instl-sncn/ui/components/checklist-task-panel.tsx
index 344e1b7c3..d4509263b 100644
--- a/apps/as/src/pages/instl-sncn/ui/components/checklist-task-panel.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/components/checklist-task-panel.tsx
@@ -2,6 +2,7 @@ import type { Dispatch, SetStateAction } from "react";
 
 import type { CklstRvwRsltTreeDto, ReviewStepCode } from "@/entities/instl-sncn";
 import {
+  Button,
   cn,
   Table,
   TableBody,
@@ -35,6 +36,24 @@ function ChecklistTaskPanel({
   const currentUserReviewStep = userRoleCode ? ROLE_TO_REVIEW_STEP[userRoleCode] : undefined;
   const isStepEditable = currentUserReviewStep === selectedReviewStep;
 
+  function handleSelectAll(value: "Y" | "N") {
+    if (!isStepEditable) return;
+    setFormState((prev) => {
+      const nextResults = { ...prev.results };
+      selectedRows
+        .filter((row) => row.bchckUseYn === "Y")
+        .forEach((row) => {
+          nextResults[buildChecklistRowKey(row, selectedReviewStep)] = value;
+        });
+      return patchChecklistFormState(
+        prev,
+        { results: nextResults },
+        allRows,
+        selectedReviewStep,
+      );
+    });
+  }
+
   return (
     <>
       <div className="overflow-x-auto">
@@ -53,8 +72,27 @@ function ChecklistTaskPanel({
               ) : null}
             </TableRow>
             <TableRow>
-              <TableHead className="w-[9rem]">예</TableHead>
-              <TableHead className="w-[9rem]">아니오</TableHead>
+              <TableHead className="w-[12rem]">
+                <Button
+                  type="button"
+                  size="sm"
+                  disabled={!isStepEditable}
+                  onClick={() => handleSelectAll("Y")}
+                >
+                  전체 예
+                </Button>
+              </TableHead>
+              <TableHead className="w-[12rem]">
+                <Button
+                  type="button"
+                  size="sm"
+                  disabled={!isStepEditable}
+                  onClick={() => handleSelectAll("N")}
+                  className="!bg-destructive"
+                >
+                  전체 아니오
+                </Button>
+              </TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -130,7 +168,7 @@ function ChecklistTaskPanel({
                       <TableCell className="text-left">
                         <Textarea
                           className={cn(
-                            "min-h-[6rem] !text-xl",
+                            "min-h-[6rem] w-[32rem] !text-xl",
                             isStepEditable ? "cursor-pointer" : "cursor-not-allowed",
                           )}
                           value={formState.comments[key] ?? ""}
diff --git a/apps/as/src/widgets/pbadms-sprt/ui/checklist-form-section.tsx b/apps/as/src/widgets/pbadms-sprt/ui/checklist-form-section.tsx
index 82386ab06..a77663e58 100644
--- a/apps/as/src/widgets/pbadms-sprt/ui/checklist-form-section.tsx
+++ b/apps/as/src/widgets/pbadms-sprt/ui/checklist-form-section.tsx
@@ -5,7 +5,7 @@ import { Controller, useFormContext, useWatch } from "react-hook-form";
 
 import { useQuery } from "@tanstack/react-query";
 
-import { Field, FieldLabel, FieldSet } from "@/shared/ui/field";
+import { Field, FieldLabel } from "@/shared/ui/field";
 import { cklstMngService, type CklstTreeNode } from "@/entities/cklst";
 import { useCodeList } from "@/entities/code";
 import {
@@ -196,31 +196,33 @@ function ChecklistFormSection({ docSeComCd, fieldPrefix }: ChecklistFormSectionP
                       검토항목
                     </TableHead>
                     <TableHead rowSpan={2}>주요 검토내용</TableHead>
-                    <TableHead className="w-[16rem]">검토</TableHead>
+                    <TableHead colSpan={2}>검토 결과</TableHead>
                   </TableRow>
                   <TableRow>
-                    <TableHead>
-                      <div className="flex gap-2">
-                        <Button
-                          size="sm"
-                          onClick={(e) => {
-                            e.preventDefault();
-                            handleSelectAll(tab.code, "Y");
-                          }}
-                        >
-                          전체 예
-                        </Button>
-                        <Button
-                          size="sm"
-                          onClick={(e) => {
-                            e.preventDefault();
-                            handleSelectAll(tab.code, "N");
-                          }}
-                          className="!bg-destructive"
-                        >
-                          전체 아니오
-                        </Button>
-                      </div>
+                    <TableHead className="w-[12rem]">
+                      <Button
+                        type="button"
+                        size="sm"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          handleSelectAll(tab.code, "Y");
+                        }}
+                      >
+                        전체 예
+                      </Button>
+                    </TableHead>
+                    <TableHead className="w-[12rem]">
+                      <Button
+                        type="button"
+                        size="sm"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          handleSelectAll(tab.code, "N");
+                        }}
+                        className="!bg-destructive"
+                      >
+                        전체 아니오
+                      </Button>
                     </TableHead>
                   </TableRow>
                 </TableHeader>
@@ -236,64 +238,72 @@ function ChecklistFormSection({ docSeComCd, fieldPrefix }: ChecklistFormSectionP
                           style={{
                             paddingLeft: `${Math.max(0, item.treeLevel - 1) * 16 + 8}px`,
                           }}
-                          colSpan={showRadios ? 0 : 2}
+                          colSpan={showRadios ? 0 : 3}
                         >
                           {item.treeLevel > 1 ? "└ " : ""}
                           {item.content}
                         </TableCell>
                         {showRadios && resultIdx >= 0 ? (
-                          <TableCell>
-                            <Controller
-                              name={`cklstResultList.${resultIdx}.selected`}
-                              control={control}
-                              render={({ field, fieldState }) => (
-                                <FieldSet>
+                          <Controller
+                            name={`cklstResultList.${resultIdx}.selected`}
+                            control={control}
+                            render={({ field, fieldState }) => (
+                              <>
+                                <TableCell className="text-center">
                                   <RadioGroup
                                     name={field.name}
-                                    value={field.value || undefined}
+                                    value={field.value === "Y" ? "Y" : undefined}
                                     onValueChange={field.onChange}
+                                    className="flex justify-center"
                                   >
-                                    <div className="flex w-full justify-center gap-6">
-                                      <FieldLabel
-                                        htmlFor={`check-${item.cklstRvwSn}-Y`}
-                                        className="!w-auto border-none"
+                                    <FieldLabel
+                                      htmlFor={`check-${item.cklstRvwSn}-Y`}
+                                      className="!w-auto justify-center border-none"
+                                    >
+                                      <Field
+                                        orientation="horizontal"
+                                        data-invalid={fieldState.invalid}
+                                        className="w-auto"
                                       >
-                                        <Field
-                                          orientation="horizontal"
-                                          data-invalid={fieldState.invalid}
-                                          className="w-auto"
-                                        >
-                                          <RadioGroupItem
-                                            value="Y"
-                                            id={`check-${item.cklstRvwSn}-Y`}
-                                            aria-invalid={fieldState.invalid}
-                                          />
-                                          <span className="font-normal">예</span>
-                                        </Field>
-                                      </FieldLabel>
-                                      <FieldLabel
-                                        htmlFor={`check-${item.cklstRvwSn}-N`}
-                                        className="!w-auto border-none"
-                                      >
-                                        <Field
-                                          orientation="horizontal"
-                                          data-invalid={fieldState.invalid}
-                                          className="w-auto"
-                                        >
-                                          <RadioGroupItem
-                                            value="N"
-                                            id={`check-${item.cklstRvwSn}-N`}
-                                            aria-invalid={fieldState.invalid}
-                                          />
-                                          <span className="font-normal">아니오</span>
-                                        </Field>
-                                      </FieldLabel>
-                                    </div>
+                                        <RadioGroupItem
+                                          value="Y"
+                                          id={`check-${item.cklstRvwSn}-Y`}
+                                          aria-invalid={fieldState.invalid}
+                                          aria-label="예"
+                                        />
+                                      </Field>
+                                    </FieldLabel>
                                   </RadioGroup>
-                                </FieldSet>
-                              )}
-                            />
-                          </TableCell>
+                                </TableCell>
+                                <TableCell className="text-center">
+                                  <RadioGroup
+                                    name={field.name}
+                                    value={field.value === "N" ? "N" : undefined}
+                                    onValueChange={field.onChange}
+                                    className="flex justify-center"
+                                  >
+                                    <FieldLabel
+                                      htmlFor={`check-${item.cklstRvwSn}-N`}
+                                      className="!w-auto justify-center border-none"
+                                    >
+                                      <Field
+                                        orientation="horizontal"
+                                        data-invalid={fieldState.invalid}
+                                        className="w-auto"
+                                      >
+                                        <RadioGroupItem
+                                          value="N"
+                                          id={`check-${item.cklstRvwSn}-N`}
+                                          aria-invalid={fieldState.invalid}
+                                          aria-label="아니오"
+                                        />
+                                      </Field>
+                                    </FieldLabel>
+                                  </RadioGroup>
+                                </TableCell>
+                              </>
+                            )}
+                          />
                         ) : null}
                       </TableRow>
                     );

From 5491c524c5143fb7bcee978a909c37d60746b1e1 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Mon, 13 Jul 2026 18:08:26 +0900
Subject: [PATCH 11/32] =?UTF-8?q?[as]=20feat:=20=EB=A9=80=ED=8B=B0=20?=
 =?UTF-8?q?=EB=94=94=EB=B0=94=EC=9D=B4=EC=8A=A4=20=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EC=9D=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/as/app/api/proxy/[...url]/route.ts       | 40 ++++++++-----------
 apps/as/package.json                          |  1 +
 apps/as/src/entities/auth/api/auth-service.ts | 10 ++++-
 apps/as/src/entities/auth/lib/device-id.ts    | 17 ++++++++
 pnpm-lock.yaml                                | 10 +++++
 5 files changed, 54 insertions(+), 24 deletions(-)
 create mode 100644 apps/as/src/entities/auth/lib/device-id.ts

diff --git a/apps/as/app/api/proxy/[...url]/route.ts b/apps/as/app/api/proxy/[...url]/route.ts
index 15abf4c72..b32008942 100644
--- a/apps/as/app/api/proxy/[...url]/route.ts
+++ b/apps/as/app/api/proxy/[...url]/route.ts
@@ -5,6 +5,7 @@ import {
   ACCESS_TOKEN,
   AUTH_USER_ID,
   CLAIM_NAME,
+  COOKIE_DOMAIN,
   REFRESH_TOKEN,
   SERVER_API_URL,
   SITE_ID,
@@ -20,6 +21,10 @@ async function handler(
     "Content-Type": "application/json",
     "X-Site-Id": SITE_ID,
   };
+  const deviceId = request.headers.get("X-Device-Id");
+  if (deviceId) {
+    headers["X-Device-Id"] = deviceId;
+  }
   let body = {};
   const isRefreshHandler = params.url.includes("refresh");
 
@@ -39,27 +44,13 @@ async function handler(
     }
 
     const targetUrl = `${SERVER_API_URL}/${params.url.join("/")}`;
-    console.log(`[Proxy API] ${method} ${params.url.join("/")} -> ${targetUrl}`);
-    console.log(`[Proxy API] Headers:`, headers);
-    if (!isRefreshHandler) {
-      console.log(`[Proxy API] Body:`, body);
-    }
-
     const result = await fetch(targetUrl, {
       method,
       headers,
       body: JSON.stringify(body),
     });
 
-    console.log(`[Proxy API] Response Status: ${result.status}`);
-    console.log(`[Proxy API] Response Headers:`, {
-      [ACCESS_TOKEN]: result.headers.get(ACCESS_TOKEN),
-      [REFRESH_TOKEN]: result.headers.get(REFRESH_TOKEN) ? '***hidden***' : undefined,
-      [AUTH_USER_ID]: result.headers.get(AUTH_USER_ID),
-    });
-
     if (!result.ok) {
-      console.error(`[Proxy API] Request failed with status ${result.status}`);
       return NextResponse.json({ message: "Invalid Credentials" }, { status: 401 });
     }
 
@@ -68,24 +59,16 @@ async function handler(
     const userId = result.headers.get(AUTH_USER_ID);
 
     if (accessToken && userId) {
-      console.log(`[Proxy API] Login successful for user: ${userId}`);
       const response = NextResponse.json({
         [ACCESS_TOKEN]: accessToken,
         [AUTH_USER_ID]: userId,
       });
 
-      const forwardedHost = request.headers.get("x-forwarded-host");
-      const host = request.headers.get("host");
-      const actualHost = forwardedHost || host || new URL(request.url).hostname.toString();
-
-      // 운영 환경에서 domain 설정
-      const domain = actualHost.includes("hasuon.or.kr") ? ".hasuon.or.kr" : actualHost;
-
       if (refreshToken) {
         cookieStore.set(REFRESH_TOKEN, refreshToken, {
           httpOnly: true,
           sameSite: "strict",
-          domain: domain,
+          domain: getCookieDomain(),
           path: "/",
         });
       }
@@ -109,3 +92,14 @@ export async function PUT(request: Request, props: { params: Promise<{ url: stri
   const params = await props.params;
   return handler(request, params, "PUT");
 }
+
+function getCookieDomain(): string | undefined {
+  if (typeof window === "undefined") return undefined;
+
+  if (COOKIE_DOMAIN) return COOKIE_DOMAIN;
+
+  const { hostname } = window.location;
+  if (hostname === "localhost" || hostname === "127.0.0.1") return undefined;
+
+  return hostname;
+}
diff --git a/apps/as/package.json b/apps/as/package.json
index ed4016352..cebdf28ee 100644
--- a/apps/as/package.json
+++ b/apps/as/package.json
@@ -32,6 +32,7 @@
     "next": "15.5.18",
     "react-hook-form": "^7.54.2",
     "tus-js-client": "^4.3.1",
+    "uuid": "^14.0.1",
     "zod": "^3.24.2"
   },
   "devDependencies": {
diff --git a/apps/as/src/entities/auth/api/auth-service.ts b/apps/as/src/entities/auth/api/auth-service.ts
index 97b664d6f..934471c50 100644
--- a/apps/as/src/entities/auth/api/auth-service.ts
+++ b/apps/as/src/entities/auth/api/auth-service.ts
@@ -1,6 +1,7 @@
 import { ACCESS_TOKEN, AUTH_USER_ID, CLAIM_NAME, ENDPOINT } from "@/shared/config";
 import { type AuthPayload, type AuthService, getRemainingMs } from "@common/auth";
 
+import { clearDeviceId, getOrCreateDeviceId } from "../lib/device-id";
 import {
   clearRefreshTimer,
   removeToken,
@@ -12,7 +13,10 @@ import {
 async function login(payload: AuthPayload): Promise<void> {
   const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
     method: "POST",
-    headers: { "Content-Type": "application/json" },
+    headers: {
+      "Content-Type": "application/json",
+      "X-Device-Id": getOrCreateDeviceId(),
+    },
     body: JSON.stringify(payload),
   });
 
@@ -39,6 +43,9 @@ async function silentRefresh(): Promise<void> {
   try {
     const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`, {
       method: "PUT",
+      headers: {
+        "X-Device-Id": getOrCreateDeviceId(),
+      },
     });
 
     const data = await response.json();
@@ -74,6 +81,7 @@ async function logout(): Promise<void> {
   tokenManager.clearAuthToken();
   removeToken("site-id-key");
   removeToken("site-theme-key");
+  clearDeviceId();
 
   if (typeof window !== "undefined") {
     window.dispatchEvent(new CustomEvent("auth:logout"));
diff --git a/apps/as/src/entities/auth/lib/device-id.ts b/apps/as/src/entities/auth/lib/device-id.ts
new file mode 100644
index 000000000..ce173b141
--- /dev/null
+++ b/apps/as/src/entities/auth/lib/device-id.ts
@@ -0,0 +1,17 @@
+import { v4 as uuidv4 } from "uuid";
+
+const DEVICE_ID_KEY = "x-device-id";
+
+export function getOrCreateDeviceId(): string {
+  if (typeof window === "undefined") return "";
+  const existing = localStorage.getItem(DEVICE_ID_KEY);
+  if (existing) return existing;
+  const id = uuidv4();
+  localStorage.setItem(DEVICE_ID_KEY, id);
+  return id;
+}
+
+export function clearDeviceId(): void {
+  if (typeof window === "undefined") return;
+  localStorage.removeItem(DEVICE_ID_KEY);
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b9da50e6a..d59b101f1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -195,6 +195,9 @@ importers:
       tus-js-client:
         specifier: ^4.3.1
         version: 4.3.1
+      uuid:
+        specifier: ^14.0.1
+        version: 14.0.1
       zod:
         specifier: ^3.24.2
         version: 3.25.76
@@ -7360,8 +7363,13 @@ packages:
   utrie@1.0.2:
     resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
 
+  uuid@14.0.1:
+    resolution: {integrity: sha512-6ZxzVpzDXDa3bJWaHilVayA+BH/1zmxCJoVgvmqJnid/gPoKHxUrS/aC/T6LGQtNHT+XHG9fXPJB4d+IrU30Ew==}
+    hasBin: true
+
   uuid@9.0.1:
     resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
+    deprecated: uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).
     hasBin: true
 
   victory-vendor@36.9.2:
@@ -13476,6 +13484,8 @@ snapshots:
     dependencies:
       base64-arraybuffer: 1.0.2
 
+  uuid@14.0.1: {}
+
   uuid@9.0.1: {}
 
   victory-vendor@36.9.2:

From 35a63d7c5c52a28a7b5404424b19e0928a54f05f Mon Sep 17 00:00:00 2001
From: rsone001 <rsone001@gmail.com>
Date: Tue, 14 Jul 2026 11:54:29 +0900
Subject: [PATCH 12/32] =?UTF-8?q?[st]=20-=20fix:=20=EC=A7=80=EB=82=9C?=
 =?UTF-8?q?=EB=85=84=EB=8F=84=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EA=B0=80?=
 =?UTF-8?q?=EC=A0=B8=EC=98=A4=EA=B8=B0=20button=20confirm=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/st/src/components/button/LastYearDataButton.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/st/src/components/button/LastYearDataButton.tsx b/apps/st/src/components/button/LastYearDataButton.tsx
index d9020c4ae..c0cc89f3b 100644
--- a/apps/st/src/components/button/LastYearDataButton.tsx
+++ b/apps/st/src/components/button/LastYearDataButton.tsx
@@ -1,12 +1,21 @@
 import { Button } from "@common/components";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
 
 interface LastYearDataButtonProps {
     getLastYearDataFunc: () => void;
 }
 
 const LastYearDataButton = ({ getLastYearDataFunc }: LastYearDataButtonProps) => {
+    const { confirm } = useConfirm();
+
+    const handleLastYearDataButton = async () => {
+        if (await confirm('작년 데이터를 불러오시겠습니까?')) {
+            getLastYearDataFunc();
+        }
+    };
+
     return (
-        <Button color="emerald" className="h-[3.2rem] w-[176px]" onClick={getLastYearDataFunc}>
+        <Button color="emerald" className="h-[3.2rem] w-[176px]" onClick={handleLastYearDataButton}>
             <i className="diveicon di-search" />
             <span>지난연도 데이터 가져오기</span>
         </Button>

From 7a1949fc6f9973cbf34baeea24e034fceb1a9a63 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 14 Jul 2026 12:28:22 +0900
Subject: [PATCH 13/32] =?UTF-8?q?[as]=20feat:=20=EA=B2=B0=EC=9E=AC?=
 =?UTF-8?q?=EC=84=A0=20=EC=88=98=EC=A0=95=20=EC=82=AC=ED=95=AD=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/as/src/entities/auth/api/auth-service.ts | 10 +---
 .../src/entities/elapr/lib/apln-validators.ts | 13 -----
 .../entities/elapr/lib/use-prgrs-stts-rows.ts |  2 +-
 .../elapr/model/elapr-apln-interface.ts       |  4 +-
 .../elapr/model/elapr-dmnd-interface.ts       | 20 +-------
 .../model/columns.tsx                         |  4 --
 .../ui/approval-line-management-page.tsx      |  2 +-
 .../ui/elapr-apln-grid.tsx                    |  8 ++--
 .../ui/sortable-apln-row.tsx                  | 47 ++++++++++++-------
 .../ui/components/elapr-apln-picker-grid.tsx  |  6 +--
 .../components/elapr-tmplt-select-table.tsx   |  8 ----
 .../components/sortable-apln-picker-row.tsx   | 44 +++++++++++------
 .../ui/components/sortable-prgrs-stts-row.tsx | 38 ++++++++++-----
 apps/as/src/shared/model/pbadms-sprt.ts       |  3 +-
 14 files changed, 102 insertions(+), 107 deletions(-)

diff --git a/apps/as/src/entities/auth/api/auth-service.ts b/apps/as/src/entities/auth/api/auth-service.ts
index 934471c50..5615f55f8 100644
--- a/apps/as/src/entities/auth/api/auth-service.ts
+++ b/apps/as/src/entities/auth/api/auth-service.ts
@@ -2,13 +2,7 @@ import { ACCESS_TOKEN, AUTH_USER_ID, CLAIM_NAME, ENDPOINT } from "@/shared/confi
 import { type AuthPayload, type AuthService, getRemainingMs } from "@common/auth";
 
 import { clearDeviceId, getOrCreateDeviceId } from "../lib/device-id";
-import {
-  clearRefreshTimer,
-  removeToken,
-  setToken,
-  setupRefreshTimer,
-  tokenManager,
-} from "../lib/token-manager";
+import { clearRefreshTimer, setToken, setupRefreshTimer, tokenManager } from "../lib/token-manager";
 
 async function login(payload: AuthPayload): Promise<void> {
   const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
@@ -79,8 +73,6 @@ async function silentRefresh(): Promise<void> {
 
 async function logout(): Promise<void> {
   tokenManager.clearAuthToken();
-  removeToken("site-id-key");
-  removeToken("site-theme-key");
   clearDeviceId();
 
   if (typeof window !== "undefined") {
diff --git a/apps/as/src/entities/elapr/lib/apln-validators.ts b/apps/as/src/entities/elapr/lib/apln-validators.ts
index 3ab1bcd30..91f1a95cf 100644
--- a/apps/as/src/entities/elapr/lib/apln-validators.ts
+++ b/apps/as/src/entities/elapr/lib/apln-validators.ts
@@ -1,6 +1,5 @@
 import type { ElaprAplnRow } from "../model/elapr-apln-row-types";
 
-const ATRZ_RECEIVER_CD = "ATRZ01";
 const ATRZ_FINAL_CD = "ATRZ99";
 
 interface AtrzOrderValidateRow {
@@ -16,14 +15,6 @@ export function getVisibleRows(rows: ElaprAplnRow[]): ElaprAplnRow[] {
 export function validateAtrzOrder(rows: AtrzOrderValidateRow[]): string | null {
   const visibleRows = rows.filter((row) => !row.isDeleted);
 
-  const receiverCount = visibleRows.filter((row) => row.atrzSeComCd === ATRZ_RECEIVER_CD).length;
-  if (receiverCount === 0) {
-    return "접수자는 반드시 등록해야 합니다.";
-  }
-  if (receiverCount > 1) {
-    return "접수자는 한 명만 등록할 수 있습니다.";
-  }
-
   const finalCount = visibleRows.filter((row) => row.atrzSeComCd === ATRZ_FINAL_CD).length;
   if (finalCount === 0) {
     return "최종승인자는 반드시 등록해야 합니다.";
@@ -32,10 +23,6 @@ export function validateAtrzOrder(rows: AtrzOrderValidateRow[]): string | null {
     return "최종승인자는 한 명만 등록할 수 있습니다.";
   }
 
-  if (receiverCount === 1 && visibleRows[0]?.atrzSeComCd !== ATRZ_RECEIVER_CD) {
-    return "접수자는 결재선 첫 번째에 배치해야 합니다.";
-  }
-
   if (finalCount === 1) {
     const lastRow = visibleRows[visibleRows.length - 1];
     if (lastRow?.atrzSeComCd !== ATRZ_FINAL_CD) {
diff --git a/apps/as/src/entities/elapr/lib/use-prgrs-stts-rows.ts b/apps/as/src/entities/elapr/lib/use-prgrs-stts-rows.ts
index 297e574a4..40120db78 100644
--- a/apps/as/src/entities/elapr/lib/use-prgrs-stts-rows.ts
+++ b/apps/as/src/entities/elapr/lib/use-prgrs-stts-rows.ts
@@ -24,7 +24,7 @@ function toRow(item: ElaprDocPrgrsClientResponseDto): ElaprPrgrsSttsRow {
     elaprPrgrsId: item.elaprPrgrsId,
     elaprDmndId: item.elaprDmndId,
     aprvrUuid: item.aprvrUuid,
-    aprvrNm: item.aprvrUuidNm,
+    aprvrNm: item.aprvrNm,
     atrzSeComCd: item.atrzSeComCd,
     atrzSeComNm: item.atrzSeComNm,
     atrzSeqNo: item.atrzSeqNo,
diff --git a/apps/as/src/entities/elapr/model/elapr-apln-interface.ts b/apps/as/src/entities/elapr/model/elapr-apln-interface.ts
index a41add2cd..31e0d8a25 100644
--- a/apps/as/src/entities/elapr/model/elapr-apln-interface.ts
+++ b/apps/as/src/entities/elapr/model/elapr-apln-interface.ts
@@ -6,14 +6,14 @@ export const ELAPR_APLN_SAVE_MODE = {
   DELETE: "D",
 } as const;
 
-export type ElaprAplnSaveMode =
-  (typeof ELAPR_APLN_SAVE_MODE)[keyof typeof ELAPR_APLN_SAVE_MODE];
+export type ElaprAplnSaveMode = (typeof ELAPR_APLN_SAVE_MODE)[keyof typeof ELAPR_APLN_SAVE_MODE];
 
 export interface ElaprApln {
   aplnId: string;
   elaprTmpltId: string;
   aprvrUuid?: string;
   aprvrNm?: string;
+  aprvrUserId?: string;
   atrzSeComCd?: string;
   atrzSeComNm?: string;
   atrzSeqNo?: number;
diff --git a/apps/as/src/entities/elapr/model/elapr-dmnd-interface.ts b/apps/as/src/entities/elapr/model/elapr-dmnd-interface.ts
index 5a3fbc689..a4eb14c7c 100644
--- a/apps/as/src/entities/elapr/model/elapr-dmnd-interface.ts
+++ b/apps/as/src/entities/elapr/model/elapr-dmnd-interface.ts
@@ -1,4 +1,4 @@
-import type { PageableParams, PageResponse } from "@/shared/model";
+import type { ElaprDocPrgrsClientResponseDto, PageableParams, PageResponse } from "@/shared/model";
 
 import type { ElaprPrgrsSttsSaveRequestDto } from "./elapr-prgrs-stts-interface";
 
@@ -33,23 +33,7 @@ export interface ElaprDmndSearchDto extends PageableParams {
 }
 
 /** 백엔드 ElaprDocPrgrsResponseDto */
-export interface ElaprDocPrgrsResponseDto {
-  elaprDocNo: string;
-  elaprDmndId: string;
-  elaprPrgrsId: string;
-  atrzSeqNo?: number;
-  atrzSeComCd: string;
-  atrzSeComNm?: string;
-  aprvrUuid?: string;
-  aprvrUuidNm?: string;
-  atrzPrgrsSttsComCd: string;
-  atrzPrgrsSttsComNm?: string;
-  rjctRsn?: string;
-  atrzDt?: string;
-  jbpsSeNm?: string;
-  jbgdSeNm?: string;
-  ognzNm?: string;
-}
+export type ElaprDocPrgrsResponseDto = ElaprDocPrgrsClientResponseDto;
 
 /** Controller public 메서드명·시그니처와 동일 */
 export interface ElaprDmndService {
diff --git a/apps/as/src/pages/approval-line-management/model/columns.tsx b/apps/as/src/pages/approval-line-management/model/columns.tsx
index a7beb668b..35dcc4a74 100644
--- a/apps/as/src/pages/approval-line-management/model/columns.tsx
+++ b/apps/as/src/pages/approval-line-management/model/columns.tsx
@@ -14,10 +14,6 @@ interface CreateTmpltColumnsOptions {
 
 export function createTmpltColumns({ onEdit, onDelete }: CreateTmpltColumnsOptions) {
   return [
-    columnHelper.accessor("elaprTmpltId", {
-      header: "전자결재서식아이디",
-      meta: { align: "left" },
-    }),
     columnHelper.accessor("elaprTmpltNm", {
       header: "결재서식명",
       meta: { align: "left" },
diff --git a/apps/as/src/pages/approval-line-management/ui/approval-line-management-page.tsx b/apps/as/src/pages/approval-line-management/ui/approval-line-management-page.tsx
index 11b9373ac..38b018809 100644
--- a/apps/as/src/pages/approval-line-management/ui/approval-line-management-page.tsx
+++ b/apps/as/src/pages/approval-line-management/ui/approval-line-management-page.tsx
@@ -11,7 +11,7 @@ function ApprovalLineManagementPage() {
   const [selectedTmplt, setSelectedTmplt] = useState<ElaprTmplt | null>(null);
 
   return (
-    <div className="space-y-6 px-[1.8rem] pb-6">
+    <div className="grid grid-cols-1 gap-6 px-[1.8rem] xl:grid-cols-2">
       <ElaprTmpltList
         selectedTmpltId={selectedTmplt?.elaprTmpltId ?? null}
         onSelectTmplt={setSelectedTmplt}
diff --git a/apps/as/src/pages/approval-line-management/ui/elapr-apln-grid.tsx b/apps/as/src/pages/approval-line-management/ui/elapr-apln-grid.tsx
index 83c01c7ab..e703551d5 100644
--- a/apps/as/src/pages/approval-line-management/ui/elapr-apln-grid.tsx
+++ b/apps/as/src/pages/approval-line-management/ui/elapr-apln-grid.tsx
@@ -186,20 +186,20 @@ function ElaprAplnGrid({ elaprTmpltId }: ElaprAplnGridProps) {
         <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
           <Table className="w-full">
             <colgroup>
-              <col width="10%" />
-              <col width="30%" />
+              <col width="5%" />
               <col width="10%" />
               <col width="10%" />
               <col width="15%" />
-              <col width="15%" />
+              <col width="25%" />
+              <col width="20%" />
               <col width="10%" />
             </colgroup>
             <TableHeader>
               <TableRow>
                 <TableHead className="w-10" />
-                <TableHead>결재선아이디</TableHead>
                 <TableHead>결재순서</TableHead>
                 <TableHead>결재구분</TableHead>
+                <TableHead>결재자 ID</TableHead>
                 <TableHead>결재자</TableHead>
                 <TableHead>등록일시</TableHead>
                 <TableHead>관리</TableHead>
diff --git a/apps/as/src/pages/approval-line-management/ui/sortable-apln-row.tsx b/apps/as/src/pages/approval-line-management/ui/sortable-apln-row.tsx
index 94d28be22..b0a23ee1e 100644
--- a/apps/as/src/pages/approval-line-management/ui/sortable-apln-row.tsx
+++ b/apps/as/src/pages/approval-line-management/ui/sortable-apln-row.tsx
@@ -4,9 +4,18 @@ import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Equal } from "lucide-react";
 
-import { CodeSelect, findCodeLabel, useCodeList } from "@/entities/code";
+import { findCodeLabel, useCodeList } from "@/entities/code";
 import type { ElaprAplnRow } from "@/entities/elapr";
-import { Button, TableCell, TableRow } from "@common/components";
+import {
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  TableCell,
+  TableRow,
+} from "@common/components";
 
 interface SortableAplnRowProps {
   row: ElaprAplnRow;
@@ -36,6 +45,7 @@ function SortableAplnRow({
   onPickAprvr,
 }: SortableAplnRowProps) {
   const { data: atrzSeCodes } = useCodeList("ATRZSE");
+  const selectableAtrzSeCodes = atrzSeCodes?.filter((code) => code.lwpoCd !== "ATRZ01");
 
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: row.rowKey,
@@ -49,7 +59,7 @@ function SortableAplnRow({
   };
 
   const rowDisabled = isLocked && !isEditing;
-  const atrzSeLabel = row.atrzSeComNm || findCodeLabel(atrzSeCodes, row.atrzSeComCd);
+  const atrzSeLabel = row.atrzSeComNm || findCodeLabel(selectableAtrzSeCodes, row.atrzSeComCd);
 
   return (
     <TableRow ref={setNodeRef} style={style} className={isEditing ? "bg-accent/30" : undefined}>
@@ -66,31 +76,36 @@ function SortableAplnRow({
           <Equal className="!size-6" />
         </Button>
       </TableCell>
-      <TableCell align="center">{row.isNew ? "-" : (row.aplnId ?? "-")}</TableCell>
       <TableCell align="center">{displaySeqNo}</TableCell>
       <TableCell align="center">
         {isEditing ? (
-          <CodeSelect
-            upCd="ATRZSE"
-            className="min-w-[120px]"
+          <Select
             value={row.atrzSeComCd ?? ""}
             onValueChange={(v) =>
-              onChange({
-                atrzSeComCd: v,
-                atrzSeComNm: findCodeLabel(atrzSeCodes, v),
-              })
+              onChange({ atrzSeComCd: v, atrzSeComNm: findCodeLabel(selectableAtrzSeCodes, v) })
             }
-            placeholder="결재구분"
-          />
+          >
+            <SelectTrigger className="min-w-[120px]">
+              <SelectValue placeholder="결재구분" />
+            </SelectTrigger>
+            <SelectContent>
+              {selectableAtrzSeCodes?.map((code) => (
+                <SelectItem key={code.lwpoCd} value={code.lwpoCd}>
+                  {code.lwpoCdNm}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         ) : (
           atrzSeLabel || "-"
         )}
       </TableCell>
+      <TableCell align="center">{row.aprvrUserId ?? "-"}</TableCell>
       <TableCell align="center">
-        <div className="flex items-center justify-center gap-4">
-          <span>{row.aprvrNm || row.aprvrUuid || "-"}</span>
+        <div className="flex items-center justify-center gap-1">
+          <span>{row.aprvrNm || row.aprvrUuid || ""}</span>
           {isEditing && (
-            <Button type="button" size="sm" onClick={onPickAprvr}>
+            <Button type="button" size="sm" onClick={onPickAprvr} disabled={!row.atrzSeComCd}>
               선택
             </Button>
           )}
diff --git a/apps/as/src/pages/instl-sncn/ui/components/elapr-apln-picker-grid.tsx b/apps/as/src/pages/instl-sncn/ui/components/elapr-apln-picker-grid.tsx
index a22a2e880..6268058f0 100644
--- a/apps/as/src/pages/instl-sncn/ui/components/elapr-apln-picker-grid.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/components/elapr-apln-picker-grid.tsx
@@ -147,16 +147,14 @@ function ElaprAplnPickerGrid({
           <Table className="w-full">
             <colgroup>
               <col width="10%" />
-              <col width="30%" />
               <col width="10%" />
               <col width="10%" />
-              <col width="30%" />
-              <col width="10%" />
+              <col width="50%" />
+              <col width="20%" />
             </colgroup>
             <TableHeader>
               <TableRow>
                 <TableHead className="w-10" />
-                <TableHead>결재선아이디</TableHead>
                 <TableHead>결재순서</TableHead>
                 <TableHead>결재구분</TableHead>
                 <TableHead>결재자</TableHead>
diff --git a/apps/as/src/pages/instl-sncn/ui/components/elapr-tmplt-select-table.tsx b/apps/as/src/pages/instl-sncn/ui/components/elapr-tmplt-select-table.tsx
index 50bdb33b9..cd96ebe09 100644
--- a/apps/as/src/pages/instl-sncn/ui/components/elapr-tmplt-select-table.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/components/elapr-tmplt-select-table.tsx
@@ -35,18 +35,10 @@ function ElaprTmpltSelectTable({
 
   const columns = useMemo(
     () => [
-      columnHelper.accessor("elaprTmpltId", {
-        header: "전자결재서식아이디",
-        meta: { align: "left" },
-      }),
       columnHelper.accessor("elaprTmpltNm", {
         header: "결재서식명",
         meta: { align: "left" },
       }),
-      columnHelper.accessor("docSeComNm", {
-        header: "문서구분",
-        cell: ({ getValue, row }) => getValue() ?? row.original.docSeComCd ?? "—",
-      }),
     ],
     [],
   );
diff --git a/apps/as/src/pages/instl-sncn/ui/components/sortable-apln-picker-row.tsx b/apps/as/src/pages/instl-sncn/ui/components/sortable-apln-picker-row.tsx
index 46af147ca..07a9567cc 100644
--- a/apps/as/src/pages/instl-sncn/ui/components/sortable-apln-picker-row.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/components/sortable-apln-picker-row.tsx
@@ -4,9 +4,18 @@ import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { MoveVertical } from "lucide-react";
 
-import { CodeSelect, findCodeLabel, useCodeList } from "@/entities/code";
+import { findCodeLabel, useCodeList } from "@/entities/code";
 import type { ElaprAplnRow } from "@/entities/elapr";
-import { Button, TableCell, TableRow } from "@common/components";
+import {
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  TableCell,
+  TableRow,
+} from "@common/components";
 
 interface SortableAplnPickerRowProps {
   row: ElaprAplnRow;
@@ -36,6 +45,7 @@ function SortableAplnPickerRow({
   onPickAprvr,
 }: SortableAplnPickerRowProps) {
   const { data: atrzSeCodes } = useCodeList("ATRZSE");
+  const selectableAtrzSeCodes = atrzSeCodes?.filter((code) => code.lwpoCd !== "ATRZ01");
 
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: row.rowKey,
@@ -66,31 +76,35 @@ function SortableAplnPickerRow({
           <MoveVertical className="!size-6" />
         </Button>
       </TableCell>
-      <TableCell align="center">{row.isNew ? "-" : (row.aplnId ?? "-")}</TableCell>
       <TableCell align="center">{displaySeqNo}</TableCell>
       <TableCell align="center">
         {isEditing ? (
-          <CodeSelect
-            upCd="ATRZSE"
-            className="min-w-[120px]"
+          <Select
             value={row.atrzSeComCd ?? ""}
             onValueChange={(v) =>
-              onChange({
-                atrzSeComCd: v,
-                atrzSeComNm: findCodeLabel(atrzSeCodes, v),
-              })
+              onChange({ atrzSeComCd: v, atrzSeComNm: findCodeLabel(selectableAtrzSeCodes, v) })
             }
-            placeholder="결재구분"
-          />
+          >
+            <SelectTrigger className="min-w-[120px]">
+              <SelectValue placeholder="결재구분" />
+            </SelectTrigger>
+            <SelectContent>
+              {selectableAtrzSeCodes?.map((code) => (
+                <SelectItem key={code.lwpoCd} value={code.lwpoCd}>
+                  {code.lwpoCdNm}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         ) : (
           atrzSeLabel || "-"
         )}
       </TableCell>
       <TableCell align="center">
-        <div className="flex items-center justify-center gap-4">
-          <span>{row.aprvrNm || row.aprvrUuid || "-"}</span>
+        <div className="flex items-center justify-center gap-2">
+          <span>{row.aprvrNm || row.aprvrUuid || ""}</span>
           {isEditing && (
-            <Button type="button" size="sm" onClick={onPickAprvr}>
+            <Button type="button" size="sm" onClick={onPickAprvr} disabled={!row.atrzSeComCd}>
               선택
             </Button>
           )}
diff --git a/apps/as/src/pages/instl-sncn/ui/components/sortable-prgrs-stts-row.tsx b/apps/as/src/pages/instl-sncn/ui/components/sortable-prgrs-stts-row.tsx
index 795c9d08d..b002f558d 100644
--- a/apps/as/src/pages/instl-sncn/ui/components/sortable-prgrs-stts-row.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/components/sortable-prgrs-stts-row.tsx
@@ -5,9 +5,19 @@ import { CSS } from "@dnd-kit/utilities";
 import { MoveVertical } from "lucide-react";
 
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
-import { CodeSelect, findCodeLabel, useCodeList } from "@/entities/code";
+import { findCodeLabel, useCodeList } from "@/entities/code";
 import { type ElaprPrgrsSttsRow, isPrgrsSttsRowEditable } from "@/entities/elapr";
-import { Button, cn, TableCell, TableRow } from "@common/components";
+import {
+  Button,
+  cn,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  TableCell,
+  TableRow,
+} from "@common/components";
 
 import { getApproverStatus } from "../../lib/approval-utils";
 
@@ -39,6 +49,7 @@ function SortablePrgrsSttsRow({
   onPickAprvr,
 }: SortablePrgrsSttsRowProps) {
   const { data: atrzSeCodes } = useCodeList("ATRZSE");
+  const selectableAtrzSeCodes = atrzSeCodes?.filter((code) => code.lwpoCd !== "ATRZ01");
 
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: row.rowKey,
@@ -89,18 +100,23 @@ function SortablePrgrsSttsRow({
       <TableCell align="center">{displaySeqNo}</TableCell>
       <TableCell align="center">
         {isEditing ? (
-          <CodeSelect
-            upCd="ATRZSE"
-            className="min-w-[120px]"
+          <Select
             value={row.atrzSeComCd ?? ""}
             onValueChange={(v) =>
-              onChange({
-                atrzSeComCd: v,
-                atrzSeComNm: findCodeLabel(atrzSeCodes, v),
-              })
+              onChange({ atrzSeComCd: v, atrzSeComNm: findCodeLabel(selectableAtrzSeCodes, v) })
             }
-            placeholder="결재구분"
-          />
+          >
+            <SelectTrigger className="min-w-[120px]">
+              <SelectValue placeholder="결재구분" />
+            </SelectTrigger>
+            <SelectContent>
+              {selectableAtrzSeCodes?.map((code) => (
+                <SelectItem key={code.lwpoCd} value={code.lwpoCd}>
+                  {code.lwpoCdNm}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         ) : (
           atrzSeLabel || "-"
         )}
diff --git a/apps/as/src/shared/model/pbadms-sprt.ts b/apps/as/src/shared/model/pbadms-sprt.ts
index fc0722eb2..141d655bb 100644
--- a/apps/as/src/shared/model/pbadms-sprt.ts
+++ b/apps/as/src/shared/model/pbadms-sprt.ts
@@ -143,7 +143,8 @@ export interface ElaprDocPrgrsClientResponseDto {
   atrzSeComCd?: string;
   atrzSeComNm?: string;
   aprvrUuid?: string;
-  aprvrUuidNm?: string;
+  aprvrNm?: string;
+  aprvrUserId?: string;
   atrzPrgrsSttsComCd?: string;
   atrzPrgrsSttsComNm?: string;
   rjctRsn?: string | null;

From b33665150361a680a8ccb62dc236e6f9e3ce47ae Mon Sep 17 00:00:00 2001
From: ljpark <mind-one005@mind-one.co.kr>
Date: Tue, 14 Jul 2026 14:50:54 +0900
Subject: [PATCH 14/32] =?UTF-8?q?dm:=20=EB=93=B1=EB=A1=9D=EC=8B=9C=20?=
 =?UTF-8?q?=EB=B9=84=EB=B2=88=20=ED=95=B4=EC=89=AC=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dm/app/(with-layout)/apply/dmdco/page.tsx |  3 +-
 apps/dm/package.json                          |  5 +-
 pnpm-lock.yaml                                | 75 ++++++++++++++-----
 3 files changed, 64 insertions(+), 19 deletions(-)

diff --git a/apps/dm/app/(with-layout)/apply/dmdco/page.tsx b/apps/dm/app/(with-layout)/apply/dmdco/page.tsx
index 86262be44..1edd73d3e 100644
--- a/apps/dm/app/(with-layout)/apply/dmdco/page.tsx
+++ b/apps/dm/app/(with-layout)/apply/dmdco/page.tsx
@@ -5,6 +5,7 @@
 
 import { useEffect, useMemo, useRef, useState, type ReactNode, type RefObject } from "react";
 import { useRouter } from "next/navigation";
+import { sha512 } from "js-sha512";
 import SubPageHeader from "@/components/SubPageHeader";
 import PostcodeModal from "@/components/PostcodeModal";
 import type { AddrItem } from "@/app/store/sdmMng/postcode-service";
@@ -424,7 +425,7 @@ export default function DemandPlaceRegisterPage() {
     };
 
     if (password) {
-      payload.dmdAplyPswd = password;
+      payload.dmdAplyPswd = sha512.hex(password);
     }
 
     try {
diff --git a/apps/dm/package.json b/apps/dm/package.json
index 47e12bf51..ba4ac6013 100644
--- a/apps/dm/package.json
+++ b/apps/dm/package.json
@@ -6,7 +6,9 @@
     "dev": "next dev -p 3015",
     "build": "next build",
     "start:dm": "next start -p 3015",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test:e2e": "playwright test",
+    "test:e2e:headed": "playwright test --headed"
   },
   "dependencies": {
     "@common/assets": "workspace:*",
@@ -27,6 +29,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@playwright/test": "^1.61.1",
     "@types/webpack": "^5.28.5",
     "eslint": "^9",
     "eslint-config-next": "15.3.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1d5dea9d4..d5201b8bf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -94,7 +94,7 @@ importers:
         version: 1.11.20
       next:
         specifier: 15.5.18
-        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 15.5.18(@playwright/test@1.61.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react-hook-form:
         specifier: ^7.54.2
         version: 7.72.0(react@19.2.4)
@@ -185,7 +185,7 @@ importers:
         version: 0.474.0(react@19.2.4)
       next:
         specifier: 15.5.18
-        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 15.5.18(@playwright/test@1.61.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react-hook-form:
         specifier: ^7.54.2
         version: 7.72.0(react@19.2.4)
@@ -204,13 +204,13 @@ importers:
         version: 3.0.6
       eslint:
         specifier: ^9.0.0
-        version: 9.39.4(jiti@1.21.7)
+        version: 9.39.4(jiti@2.6.1)
       eslint-config-next:
         specifier: 15.3.8
-        version: 15.3.8(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3)
+        version: 15.3.8(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       eslint-plugin-react-hooks:
         specifier: ^5.0.0
-        version: 5.2.0(eslint@9.39.4(jiti@1.21.7))
+        version: 5.2.0(eslint@9.39.4(jiti@2.6.1))
       postcss:
         specifier: ^8.4.49
         version: 8.5.8
@@ -318,7 +318,7 @@ importers:
         version: 0.474.0(react@19.2.4)
       next:
         specifier: 15.5.18
-        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 15.5.18(@playwright/test@1.61.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       next-qrcode:
         specifier: ^2.5.1
         version: 2.5.1(react@19.2.4)
@@ -448,7 +448,7 @@ importers:
         version: 3.0.5
       next:
         specifier: 15.5.18
-        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 15.5.18(@playwright/test@1.61.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       next-themes:
         specifier: ^0.4.6
         version: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -599,7 +599,7 @@ importers:
         version: 0.474.0(react@19.2.4)
       next:
         specifier: 15.5.18
-        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 15.5.18(@playwright/test@1.61.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       next-qrcode:
         specifier: ^2.5.1
         version: 2.5.1(react@19.2.4)
@@ -717,7 +717,7 @@ importers:
         version: 0.474.0(react@19.2.4)
       next:
         specifier: 15.5.18
-        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 15.5.18(@playwright/test@1.61.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       picocolors:
         specifier: ^1.1.1
         version: 1.1.1
@@ -817,7 +817,7 @@ importers:
         version: 0.474.0(react@19.2.4)
       next:
         specifier: 15.5.18
-        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 15.5.18(@playwright/test@1.61.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react-hook-form:
         specifier: ^7.54.2
         version: 7.72.0(react@19.2.4)
@@ -837,15 +837,18 @@ importers:
       '@eslint/eslintrc':
         specifier: ^3
         version: 3.3.5
+      '@playwright/test':
+        specifier: ^1.61.1
+        version: 1.61.1
       '@types/webpack':
         specifier: ^5.28.5
         version: 5.28.5
       eslint:
         specifier: ^9
-        version: 9.39.4(jiti@2.6.1)
+        version: 9.39.4(jiti@1.21.7)
       eslint-config-next:
         specifier: 15.3.8
-        version: 15.3.8(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+        version: 15.3.8(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3)
       postcss:
         specifier: ^8
         version: 8.5.8
@@ -902,7 +905,7 @@ importers:
         version: 3.0.5
       next:
         specifier: 15.5.18
-        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 15.5.18(@playwright/test@1.61.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       ol:
         specifier: ^7.3.0
         version: 7.5.2
@@ -1008,7 +1011,7 @@ importers:
         version: 2.30.1
       next:
         specifier: 15.5.18
-        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 15.5.18(@playwright/test@1.61.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       ol:
         specifier: ^7.3.0
         version: 7.5.2
@@ -1198,7 +1201,7 @@ importers:
         version: 0.474.0(react@19.2.4)
       next:
         specifier: 15.5.18
-        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 15.5.18(@playwright/test@1.61.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       next-qrcode:
         specifier: ^2.5.1
         version: 2.5.1(react@19.2.4)
@@ -1346,7 +1349,7 @@ importers:
         version: 2.30.1
       next:
         specifier: 15.5.18
-        version: 15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 15.5.18(@playwright/test@1.61.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       ol:
         specifier: ^7.3.0
         version: 7.5.2
@@ -2936,6 +2939,11 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
+  '@playwright/test@1.61.1':
+    resolution: {integrity: sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   '@radix-ui/number@1.1.1':
     resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
 
@@ -5356,6 +5364,11 @@ packages:
       react-dom:
         optional: true
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -6309,6 +6322,16 @@ packages:
     resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
     engines: {node: '>= 6'}
 
+  playwright-core@1.61.1:
+    resolution: {integrity: sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.61.1:
+    resolution: {integrity: sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   pluralize@8.0.0:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
     engines: {node: '>=4'}
@@ -7175,6 +7198,7 @@ packages:
   tsconfck@3.1.6:
     resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==}
     engines: {node: ^18 || >=20}
+    deprecated: unmaintained
     hasBin: true
     peerDependencies:
       typescript: ^5.0.0
@@ -7359,6 +7383,7 @@ packages:
 
   uuid@9.0.1:
     resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
+    deprecated: uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).
     hasBin: true
 
   victory-vendor@36.9.2:
@@ -8441,6 +8466,10 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
+  '@playwright/test@1.61.1':
+    dependencies:
+      playwright: 1.61.1
+
   '@radix-ui/number@1.1.1': {}
 
   '@radix-ui/primitive@1.1.3': {}
@@ -11393,6 +11422,9 @@ snapshots:
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -12082,7 +12114,7 @@ snapshots:
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
 
-  next@15.5.18(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+  next@15.5.18(@playwright/test@1.61.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
       '@next/env': 15.5.18
       '@swc/helpers': 0.5.15
@@ -12100,6 +12132,7 @@ snapshots:
       '@next/swc-linux-x64-musl': 15.5.18
       '@next/swc-win32-arm64-msvc': 15.5.18
       '@next/swc-win32-x64-msvc': 15.5.18
+      '@playwright/test': 1.61.1
       sharp: 0.34.5
     transitivePeerDependencies:
       - '@babel/core'
@@ -12283,6 +12316,14 @@ snapshots:
 
   pirates@4.0.7: {}
 
+  playwright-core@1.61.1: {}
+
+  playwright@1.61.1:
+    dependencies:
+      playwright-core: 1.61.1
+    optionalDependencies:
+      fsevents: 2.3.2
+
   pluralize@8.0.0: {}
 
   pngjs@5.0.0: {}

From c87ad8ea1baaba4f5961fd82586c9f2c41f12d2d Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Tue, 14 Jul 2026 15:03:45 +0900
Subject: [PATCH 15/32] =?UTF-8?q?[as]=20refactor:=20=EA=B2=B0=EC=9E=AC?=
 =?UTF-8?q?=EC=84=A0=20=EC=84=A0=ED=83=9D=20=EB=8B=A4=EC=9D=B4=EC=96=BC?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=20=ED=86=B5=ED=95=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/as/src/entities/elapr/index.ts           |   9 +
 .../elapr}/model/reviewer-option.ts           |   0
 .../elapr/ui}/aprvr-picker-dialog.tsx         |   2 +-
 .../elapr/ui}/elapr-apln-picker-grid.tsx      |  14 +-
 .../elapr/ui}/elapr-tmplt-picker-dialog.tsx   | 329 +++++++++---------
 .../elapr/ui}/elapr-tmplt-select-table.tsx    |   3 +-
 .../elapr/ui}/sortable-apln-picker-row.tsx    |   3 +-
 .../ui/components/elapr-apln-picker-grid.tsx  | 206 -----------
 .../ui/components/elapr-approval-dialog.tsx   |   5 +-
 .../components/elapr-tmplt-picker-dialog.tsx  | 163 ---------
 .../components/elapr-tmplt-select-table.tsx   | 104 ------
 .../ui/components/floating-action-buttons.tsx |   7 +-
 .../components/sortable-apln-picker-row.tsx   | 138 --------
 .../pages/instl-sncn/model/reviewer-option.ts |   5 -
 .../ui/components/aprvr-picker-dialog.tsx     | 125 -------
 .../ui/components/elapr-approval-dialog.tsx   |   5 +-
 .../ui/components/floating-action-buttons.tsx |   7 +-
 17 files changed, 196 insertions(+), 929 deletions(-)
 rename apps/as/src/{pages/fnrs-cnsltn => entities/elapr}/model/reviewer-option.ts (100%)
 rename apps/as/src/{pages/fnrs-cnsltn/ui/components => entities/elapr/ui}/aprvr-picker-dialog.tsx (95%)
 rename apps/as/src/{pages/instl-sncn/ui/components => entities/elapr/ui}/elapr-apln-picker-grid.tsx (91%)
 rename apps/as/src/{pages/instl-sncn/ui/components => entities/elapr/ui}/elapr-tmplt-picker-dialog.tsx (89%)
 rename apps/as/src/{pages/instl-sncn/ui/components => entities/elapr/ui}/elapr-tmplt-select-table.tsx (94%)
 rename apps/as/src/{pages/instl-sncn/ui/components => entities/elapr/ui}/sortable-apln-picker-row.tsx (95%)
 delete mode 100644 apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-apln-picker-grid.tsx
 delete mode 100644 apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-tmplt-picker-dialog.tsx
 delete mode 100644 apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-tmplt-select-table.tsx
 delete mode 100644 apps/as/src/pages/fnrs-cnsltn/ui/components/sortable-apln-picker-row.tsx
 delete mode 100644 apps/as/src/pages/instl-sncn/model/reviewer-option.ts
 delete mode 100644 apps/as/src/pages/instl-sncn/ui/components/aprvr-picker-dialog.tsx

diff --git a/apps/as/src/entities/elapr/index.ts b/apps/as/src/entities/elapr/index.ts
index 577742c77..b72bcdb1f 100644
--- a/apps/as/src/entities/elapr/index.ts
+++ b/apps/as/src/entities/elapr/index.ts
@@ -102,3 +102,12 @@ export type {
   ElaprTmpltService,
   ElaprTmpltUpdateRequest,
 } from "./model/elapr-tmplt-interface";
+export type { ReviewerOption } from "./model/reviewer-option";
+export { AprvrPickerDialog } from "./ui/aprvr-picker-dialog";
+export { ElaprAplnPickerGrid } from "./ui/elapr-apln-picker-grid";
+export {
+  ElaprTmpltPickerDialog,
+  type ElaprTmpltPickerConfirmPayload,
+} from "./ui/elapr-tmplt-picker-dialog";
+export { ElaprTmpltSelectTable } from "./ui/elapr-tmplt-select-table";
+export { SortableAplnPickerRow } from "./ui/sortable-apln-picker-row";
diff --git a/apps/as/src/pages/fnrs-cnsltn/model/reviewer-option.ts b/apps/as/src/entities/elapr/model/reviewer-option.ts
similarity index 100%
rename from apps/as/src/pages/fnrs-cnsltn/model/reviewer-option.ts
rename to apps/as/src/entities/elapr/model/reviewer-option.ts
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/components/aprvr-picker-dialog.tsx b/apps/as/src/entities/elapr/ui/aprvr-picker-dialog.tsx
similarity index 95%
rename from apps/as/src/pages/fnrs-cnsltn/ui/components/aprvr-picker-dialog.tsx
rename to apps/as/src/entities/elapr/ui/aprvr-picker-dialog.tsx
index dd241a514..272f1f3cf 100644
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/aprvr-picker-dialog.tsx
+++ b/apps/as/src/entities/elapr/ui/aprvr-picker-dialog.tsx
@@ -17,7 +17,7 @@ import {
   TableRow,
 } from "@common/components";
 
-import { type ReviewerOption } from "../../model/reviewer-option";
+import { type ReviewerOption } from "../model/reviewer-option";
 
 const PAGE_SIZE = 500;
 
diff --git a/apps/as/src/pages/instl-sncn/ui/components/elapr-apln-picker-grid.tsx b/apps/as/src/entities/elapr/ui/elapr-apln-picker-grid.tsx
similarity index 91%
rename from apps/as/src/pages/instl-sncn/ui/components/elapr-apln-picker-grid.tsx
rename to apps/as/src/entities/elapr/ui/elapr-apln-picker-grid.tsx
index 6268058f0..92c3d58c5 100644
--- a/apps/as/src/pages/instl-sncn/ui/components/elapr-apln-picker-grid.tsx
+++ b/apps/as/src/entities/elapr/ui/elapr-apln-picker-grid.tsx
@@ -6,13 +6,6 @@ import { closestCenter, DndContext, type DragEndEvent } from "@dnd-kit/core";
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 
 import { useAlertStore } from "@/shared/lib";
-import {
-  type ElaprAplnRow,
-  useAplnRows,
-  useDndSensors,
-  useElaprAplnPage,
-  validateAplnRow,
-} from "@/entities/elapr";
 import {
   Button,
   Skeleton,
@@ -23,7 +16,12 @@ import {
   TableRow,
 } from "@common/components";
 
-import type { ReviewerOption } from "../../model/reviewer-option";
+import { useElaprAplnPage } from "../api/queries";
+import { validateAplnRow } from "../lib/apln-validators";
+import { useAplnRows } from "../lib/use-apln-rows";
+import { useDndSensors } from "../lib/use-dnd-sensors";
+import type { ElaprAplnRow } from "../model/elapr-apln-row-types";
+import type { ReviewerOption } from "../model/reviewer-option";
 
 import { AprvrPickerDialog } from "./aprvr-picker-dialog";
 import { SortableAplnPickerRow } from "./sortable-apln-picker-row";
diff --git a/apps/as/src/pages/instl-sncn/ui/components/elapr-tmplt-picker-dialog.tsx b/apps/as/src/entities/elapr/ui/elapr-tmplt-picker-dialog.tsx
similarity index 89%
rename from apps/as/src/pages/instl-sncn/ui/components/elapr-tmplt-picker-dialog.tsx
rename to apps/as/src/entities/elapr/ui/elapr-tmplt-picker-dialog.tsx
index 945a2cfc0..aa70932e9 100644
--- a/apps/as/src/pages/instl-sncn/ui/components/elapr-tmplt-picker-dialog.tsx
+++ b/apps/as/src/entities/elapr/ui/elapr-tmplt-picker-dialog.tsx
@@ -1,163 +1,166 @@
-"use client";
-
-import { useCallback, useState } from "react";
-
-import { useAlertStore } from "@/shared/lib";
-import {
-  type ElaprAplnRow,
-  type ElaprTmplt,
-  getVisibleRows,
-  useElaprTmpltPage,
-  validateAllRowsForSave,
-  validateAtrzOrder,
-  validateUniqueSeqNo,
-} from "@/entities/elapr";
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@common/components";
-
-import { ElaprAplnPickerGrid } from "./elapr-apln-picker-grid";
-import { ElaprTmpltSelectTable } from "./elapr-tmplt-select-table";
-
-const PAGE_SIZE = 100;
-
-interface ElaprTmpltPickerConfirmPayload {
-  tmplt: ElaprTmplt;
-  aplnRows: ElaprAplnRow[];
-}
-
-interface ElaprTmpltPickerDialogProps {
-  open: boolean;
-  onClose: () => void;
-  onSelect?: (tmplt: ElaprTmplt) => void;
-  onConfirm?: (payload: ElaprTmpltPickerConfirmPayload) => void;
-}
-
-function ElaprTmpltPickerDialog({
-  open,
-  onClose,
-  onSelect,
-  onConfirm,
-}: ElaprTmpltPickerDialogProps) {
-  const alert = useAlertStore((state) => state.setMessage);
-  const [selectedTmplt, setSelectedTmplt] = useState<ElaprTmplt | null>(null);
-  const [aplnRows, setAplnRows] = useState<ElaprAplnRow[]>([]);
-  const [isEditingLocked, setIsEditingLocked] = useState(false);
-
-  const tmpltQuery = useElaprTmpltPage({
-    page: 0,
-    size: PAGE_SIZE,
-    sort: "regDt,desc",
-    docSeComCd: "INSTL",
-  });
-
-  const handleRowsChange = useCallback((rows: ElaprAplnRow[]) => {
-    setAplnRows(rows);
-  }, []);
-
-  const handleEditingLockedChange = useCallback((locked: boolean) => {
-    setIsEditingLocked(locked);
-  }, []);
-
-  function handleSelectTmplt(tmplt: ElaprTmplt | null) {
-    setSelectedTmplt(tmplt);
-    setAplnRows([]);
-    setIsEditingLocked(false);
-  }
-
-  function handleOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      setSelectedTmplt(null);
-      setAplnRows([]);
-      setIsEditingLocked(false);
-      onClose();
-    }
-  }
-
-  function handleConfirm() {
-    if (!selectedTmplt) {
-      alert("결재서식을 선택해 주세요.");
-      return;
-    }
-
-    const rowsError = validateAllRowsForSave(aplnRows, isEditingLocked);
-    if (rowsError) {
-      alert(rowsError);
-      return;
-    }
-
-    const orderError = validateAtrzOrder(aplnRows);
-    if (orderError) {
-      alert(orderError);
-      return;
-    }
-
-    const seqError = validateUniqueSeqNo(aplnRows);
-    if (seqError) {
-      alert(seqError);
-      return;
-    }
-
-    const visibleRows = getVisibleRows(aplnRows);
-
-    const payload: ElaprTmpltPickerConfirmPayload = {
-      tmplt: selectedTmplt,
-      aplnRows: visibleRows,
-    };
-
-    if (onConfirm) {
-      onConfirm(payload);
-    } else {
-      onSelect?.(selectedTmplt);
-    }
-
-    setSelectedTmplt(null);
-    setAplnRows([]);
-    setIsEditingLocked(false);
-    onClose();
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="max-w-[120rem]" aria-describedby={undefined}>
-        <DialogHeader>
-          <DialogTitle>결재선 선택</DialogTitle>
-        </DialogHeader>
-
-        <div className="flex gap-6">
-          <ElaprTmpltSelectTable
-            query={tmpltQuery}
-            selectedTmpltId={selectedTmplt?.elaprTmpltId ?? null}
-            onSelectTmplt={handleSelectTmplt}
-          />
-          <ElaprAplnPickerGrid
-            elaprTmpltId={selectedTmplt?.elaprTmpltId ?? null}
-            onRowsChange={handleRowsChange}
-            onEditingLockedChange={handleEditingLockedChange}
-          />
-        </div>
-
-        <DialogFooter>
-          <Button type="button" color="white" onClick={() => handleOpenChange(false)}>
-            닫기
-          </Button>
-          <Button
-            type="button"
-            disabled={!selectedTmplt || isEditingLocked}
-            onClick={handleConfirm}
-          >
-            확인
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export { ElaprTmpltPickerDialog };
-export type { ElaprTmpltPickerConfirmPayload };
+"use client";
+
+import { useCallback, useState } from "react";
+
+import { useAlertStore } from "@/shared/lib";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@common/components";
+
+import { useElaprTmpltPage } from "../api/queries";
+import {
+  getVisibleRows,
+  validateAllRowsForSave,
+  validateAtrzOrder,
+  validateUniqueSeqNo,
+} from "../lib/apln-validators";
+import type { ElaprAplnRow } from "../model/elapr-apln-row-types";
+import type { ElaprTmplt } from "../model/elapr-tmplt-interface";
+
+import { ElaprAplnPickerGrid } from "./elapr-apln-picker-grid";
+import { ElaprTmpltSelectTable } from "./elapr-tmplt-select-table";
+
+const PAGE_SIZE = 100;
+
+interface ElaprTmpltPickerConfirmPayload {
+  tmplt: ElaprTmplt;
+  aplnRows: ElaprAplnRow[];
+}
+
+interface ElaprTmpltPickerDialogProps {
+  open: boolean;
+  onClose: () => void;
+  docSeComCd: string;
+  onSelect?: (tmplt: ElaprTmplt) => void;
+  onConfirm?: (payload: ElaprTmpltPickerConfirmPayload) => void;
+}
+
+function ElaprTmpltPickerDialog({
+  open,
+  onClose,
+  docSeComCd,
+  onSelect,
+  onConfirm,
+}: ElaprTmpltPickerDialogProps) {
+  const alert = useAlertStore((state) => state.setMessage);
+  const [selectedTmplt, setSelectedTmplt] = useState<ElaprTmplt | null>(null);
+  const [aplnRows, setAplnRows] = useState<ElaprAplnRow[]>([]);
+  const [isEditingLocked, setIsEditingLocked] = useState(false);
+
+  const tmpltQuery = useElaprTmpltPage({
+    page: 0,
+    size: PAGE_SIZE,
+    sort: "regDt,desc",
+    docSeComCd,
+  });
+
+  const handleRowsChange = useCallback((rows: ElaprAplnRow[]) => {
+    setAplnRows(rows);
+  }, []);
+
+  const handleEditingLockedChange = useCallback((locked: boolean) => {
+    setIsEditingLocked(locked);
+  }, []);
+
+  function handleSelectTmplt(tmplt: ElaprTmplt | null) {
+    setSelectedTmplt(tmplt);
+    setAplnRows([]);
+    setIsEditingLocked(false);
+  }
+
+  function handleOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      setSelectedTmplt(null);
+      setAplnRows([]);
+      setIsEditingLocked(false);
+      onClose();
+    }
+  }
+
+  function handleConfirm() {
+    if (!selectedTmplt) {
+      alert("결재서식을 선택해 주세요.");
+      return;
+    }
+
+    const rowsError = validateAllRowsForSave(aplnRows, isEditingLocked);
+    if (rowsError) {
+      alert(rowsError);
+      return;
+    }
+
+    const orderError = validateAtrzOrder(aplnRows);
+    if (orderError) {
+      alert(orderError);
+      return;
+    }
+
+    const seqError = validateUniqueSeqNo(aplnRows);
+    if (seqError) {
+      alert(seqError);
+      return;
+    }
+
+    const visibleRows = getVisibleRows(aplnRows);
+
+    const payload: ElaprTmpltPickerConfirmPayload = {
+      tmplt: selectedTmplt,
+      aplnRows: visibleRows,
+    };
+
+    if (onConfirm) {
+      onConfirm(payload);
+    } else {
+      onSelect?.(selectedTmplt);
+    }
+
+    setSelectedTmplt(null);
+    setAplnRows([]);
+    setIsEditingLocked(false);
+    onClose();
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="max-w-[120rem]" aria-describedby={undefined}>
+        <DialogHeader>
+          <DialogTitle>결재선 선택</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex gap-6">
+          <ElaprTmpltSelectTable
+            query={tmpltQuery}
+            selectedTmpltId={selectedTmplt?.elaprTmpltId ?? null}
+            onSelectTmplt={handleSelectTmplt}
+          />
+          <ElaprAplnPickerGrid
+            elaprTmpltId={selectedTmplt?.elaprTmpltId ?? null}
+            onRowsChange={handleRowsChange}
+            onEditingLockedChange={handleEditingLockedChange}
+          />
+        </div>
+
+        <DialogFooter>
+          <Button type="button" color="white" onClick={() => handleOpenChange(false)}>
+            닫기
+          </Button>
+          <Button
+            type="button"
+            disabled={!selectedTmplt || isEditingLocked}
+            onClick={handleConfirm}
+          >
+            확인
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { ElaprTmpltPickerDialog };
+export type { ElaprTmpltPickerConfirmPayload };
diff --git a/apps/as/src/pages/instl-sncn/ui/components/elapr-tmplt-select-table.tsx b/apps/as/src/entities/elapr/ui/elapr-tmplt-select-table.tsx
similarity index 94%
rename from apps/as/src/pages/instl-sncn/ui/components/elapr-tmplt-select-table.tsx
rename to apps/as/src/entities/elapr/ui/elapr-tmplt-select-table.tsx
index cd96ebe09..b93ead98d 100644
--- a/apps/as/src/pages/instl-sncn/ui/components/elapr-tmplt-select-table.tsx
+++ b/apps/as/src/entities/elapr/ui/elapr-tmplt-select-table.tsx
@@ -7,9 +7,10 @@ import { createColumnHelper, getCoreRowModel, type RowSelectionState } from "@ta
 
 import { useDataTable } from "@/shared/lib";
 import type { PageResponse } from "@/shared/model";
-import type { ElaprTmplt } from "@/entities/elapr";
 import { Skeleton } from "@common/components";
 
+import type { ElaprTmplt } from "../model/elapr-tmplt-interface";
+
 const columnHelper = createColumnHelper<ElaprTmplt>();
 
 interface ElaprTmpltSelectTableProps {
diff --git a/apps/as/src/pages/instl-sncn/ui/components/sortable-apln-picker-row.tsx b/apps/as/src/entities/elapr/ui/sortable-apln-picker-row.tsx
similarity index 95%
rename from apps/as/src/pages/instl-sncn/ui/components/sortable-apln-picker-row.tsx
rename to apps/as/src/entities/elapr/ui/sortable-apln-picker-row.tsx
index 07a9567cc..90d8380b7 100644
--- a/apps/as/src/pages/instl-sncn/ui/components/sortable-apln-picker-row.tsx
+++ b/apps/as/src/entities/elapr/ui/sortable-apln-picker-row.tsx
@@ -5,7 +5,6 @@ import { CSS } from "@dnd-kit/utilities";
 import { MoveVertical } from "lucide-react";
 
 import { findCodeLabel, useCodeList } from "@/entities/code";
-import type { ElaprAplnRow } from "@/entities/elapr";
 import {
   Button,
   Select,
@@ -17,6 +16,8 @@ import {
   TableRow,
 } from "@common/components";
 
+import type { ElaprAplnRow } from "../model/elapr-apln-row-types";
+
 interface SortableAplnPickerRowProps {
   row: ElaprAplnRow;
   displaySeqNo: number;
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-apln-picker-grid.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-apln-picker-grid.tsx
deleted file mode 100644
index a22a2e880..000000000
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-apln-picker-grid.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-
-import { closestCenter, DndContext, type DragEndEvent } from "@dnd-kit/core";
-import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
-
-import { useAlertStore } from "@/shared/lib";
-import {
-  type ElaprAplnRow,
-  useAplnRows,
-  useDndSensors,
-  useElaprAplnPage,
-  validateAplnRow,
-} from "@/entities/elapr";
-import {
-  Button,
-  Skeleton,
-  Table,
-  TableBody,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@common/components";
-
-import type { ReviewerOption } from "../../model/reviewer-option";
-
-import { AprvrPickerDialog } from "./aprvr-picker-dialog";
-import { SortableAplnPickerRow } from "./sortable-apln-picker-row";
-
-interface ElaprAplnPickerGridProps {
-  elaprTmpltId: string | null;
-  onRowsChange?: (rows: ElaprAplnRow[]) => void;
-  onEditingLockedChange?: (locked: boolean) => void;
-}
-
-function ElaprAplnPickerGrid({
-  elaprTmpltId,
-  onRowsChange,
-  onEditingLockedChange,
-}: ElaprAplnPickerGridProps) {
-  const [pickerOpen, setPickerOpen] = useState(false);
-  const [pickingRowKey, setPickingRowKey] = useState<string | null>(null);
-
-  const alert = useAlertStore((state) => state.setMessage);
-
-  const aplnQuery = useElaprAplnPage({
-    elaprTmpltId: elaprTmpltId ?? undefined,
-    page: 0,
-    size: 200,
-    sort: "atrzSeqNo,asc",
-  });
-
-  const {
-    rows,
-    visibleRows,
-    editingRowKey,
-    isEditingLocked,
-    addRow,
-    startEdit,
-    updateRow,
-    cancelEdit,
-    commitEdit,
-    markDeleted,
-    reorderRows,
-  } = useAplnRows({
-    elaprTmpltId,
-    serverRows: aplnQuery.data?.content,
-  });
-
-  useEffect(() => {
-    onRowsChange?.(rows);
-  }, [rows, onRowsChange]);
-
-  useEffect(() => {
-    onEditingLockedChange?.(isEditingLocked);
-  }, [isEditingLocked, onEditingLockedChange]);
-
-  const sensors = useDndSensors();
-  const isDisabled = !elaprTmpltId;
-  const pickingRow = pickingRowKey ? rows.find((r) => r.rowKey === pickingRowKey) : undefined;
-
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event;
-    if (!over || active.id === over.id) return;
-
-    reorderRows(String(active.id), String(over.id));
-  }
-
-  function handleRowChange(row: ElaprAplnRow, patch: Partial<ElaprAplnRow>) {
-    updateRow(row.rowKey, patch);
-  }
-
-  function handleRowSave(row: ElaprAplnRow) {
-    const fieldError = validateAplnRow(row);
-    if (fieldError) {
-      alert(fieldError);
-      return;
-    }
-
-    commitEdit(row.rowKey);
-  }
-
-  function handleRowDelete(row: ElaprAplnRow) {
-    markDeleted(row.rowKey);
-  }
-
-  function handleReviewerSelect(reviewer: ReviewerOption) {
-    if (!pickingRowKey) return;
-    updateRow(pickingRowKey, {
-      aprvrUuid: reviewer.uuid,
-      aprvrNm: reviewer.name,
-    });
-    setPickingRowKey(null);
-  }
-
-  return (
-    <section className="card card-border mx-0 min-h-[32rem] flex-1 pt-0">
-      <div className="card-header flex flex-wrap items-center justify-between gap-3">
-        <h3 className="text-2xl font-semibold">결재선 관리</h3>
-        <div className="flex flex-wrap items-center gap-3">
-          <Button
-            size="sm"
-            type="button"
-            color="green"
-            disabled={isDisabled || isEditingLocked}
-            onClick={addRow}
-          >
-            결재선 추가
-          </Button>
-        </div>
-      </div>
-
-      {aplnQuery.isPending && elaprTmpltId ? (
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-[4rem]" />
-          <Skeleton className="h-[16rem]" />
-        </div>
-      ) : !elaprTmpltId ? (
-        <p className="py-8 text-center text-lg text-muted-foreground">결재서식을 선택하세요.</p>
-      ) : visibleRows.length === 0 ? (
-        <p className="py-8 text-center text-lg text-muted-foreground">
-          등록된 결재선이 없습니다. [결재선 추가]로 결재자를 등록하세요.
-        </p>
-      ) : (
-        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-          <Table className="w-full">
-            <colgroup>
-              <col width="10%" />
-              <col width="30%" />
-              <col width="10%" />
-              <col width="10%" />
-              <col width="30%" />
-              <col width="10%" />
-            </colgroup>
-            <TableHeader>
-              <TableRow>
-                <TableHead className="w-10" />
-                <TableHead>결재선아이디</TableHead>
-                <TableHead>결재순서</TableHead>
-                <TableHead>결재구분</TableHead>
-                <TableHead>결재자</TableHead>
-                <TableHead>관리</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              <SortableContext
-                items={visibleRows.map((r) => r.rowKey)}
-                strategy={verticalListSortingStrategy}
-              >
-                {visibleRows.map((row, index) => (
-                  <SortableAplnPickerRow
-                    key={row.rowKey}
-                    row={row}
-                    displaySeqNo={index + 1}
-                    isEditing={editingRowKey === row.rowKey}
-                    isLocked={isEditingLocked}
-                    dragDisabled={isEditingLocked || !row.atrzSeComCd}
-                    onStartEdit={() => startEdit(row.rowKey)}
-                    onSave={() => handleRowSave(row)}
-                    onCancel={cancelEdit}
-                    onDelete={() => handleRowDelete(row)}
-                    onChange={(patch) => handleRowChange(row, patch)}
-                    onPickAprvr={() => {
-                      setPickingRowKey(row.rowKey);
-                      setPickerOpen(true);
-                    }}
-                  />
-                ))}
-              </SortableContext>
-            </TableBody>
-          </Table>
-        </DndContext>
-      )}
-
-      <AprvrPickerDialog
-        open={pickerOpen}
-        onOpenChange={setPickerOpen}
-        atrzSeComCd={pickingRow?.atrzSeComCd ?? ""}
-        onSelect={handleReviewerSelect}
-      />
-    </section>
-  );
-}
-
-export { ElaprAplnPickerGrid };
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-approval-dialog.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-approval-dialog.tsx
index a6737ec3e..53b6337c8 100644
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-approval-dialog.tsx
+++ b/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-approval-dialog.tsx
@@ -10,11 +10,13 @@ import { AxiosError } from "axios";
 import { ENDPOINT } from "@/shared/config";
 import { useAlertStore } from "@/shared/lib";
 import {
+  AprvrPickerDialog,
   buildPrgrsSttsSavePayload,
   elaprPrgrsSttsService,
   findCurrentUserPendingApprovalRequest,
   hasUnsavedPrgrsSttsChanges,
   isPrgrsSttsRowEditable,
+  type ReviewerOption,
   useDndSensors,
   useElaprDocPrgrsByDocNo,
   usePrgrsSttsRows,
@@ -41,9 +43,6 @@ import {
   Textarea,
 } from "@common/components";
 
-import type { ReviewerOption } from "../../model/reviewer-option";
-
-import { AprvrPickerDialog } from "./aprvr-picker-dialog";
 import { SortablePrgrsSttsRow } from "./sortable-prgrs-stts-row";
 
 interface ElaprApprovalDialogProps {
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-tmplt-picker-dialog.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-tmplt-picker-dialog.tsx
deleted file mode 100644
index 3f59f602b..000000000
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-tmplt-picker-dialog.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-"use client";
-
-import { useCallback, useState } from "react";
-
-import { useAlertStore } from "@/shared/lib";
-import {
-  type ElaprAplnRow,
-  type ElaprTmplt,
-  getVisibleRows,
-  useElaprTmpltPage,
-  validateAllRowsForSave,
-  validateAtrzOrder,
-  validateUniqueSeqNo,
-} from "@/entities/elapr";
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@common/components";
-
-import { ElaprAplnPickerGrid } from "./elapr-apln-picker-grid";
-import { ElaprTmpltSelectTable } from "./elapr-tmplt-select-table";
-
-const PAGE_SIZE = 100;
-
-interface ElaprTmpltPickerConfirmPayload {
-  tmplt: ElaprTmplt;
-  aplnRows: ElaprAplnRow[];
-}
-
-interface ElaprTmpltPickerDialogProps {
-  open: boolean;
-  onClose: () => void;
-  onSelect?: (tmplt: ElaprTmplt) => void;
-  onConfirm?: (payload: ElaprTmpltPickerConfirmPayload) => void;
-}
-
-function ElaprTmpltPickerDialog({
-  open,
-  onClose,
-  onSelect,
-  onConfirm,
-}: ElaprTmpltPickerDialogProps) {
-  const alert = useAlertStore((state) => state.setMessage);
-  const [selectedTmplt, setSelectedTmplt] = useState<ElaprTmplt | null>(null);
-  const [aplnRows, setAplnRows] = useState<ElaprAplnRow[]>([]);
-  const [isEditingLocked, setIsEditingLocked] = useState(false);
-
-  const tmpltQuery = useElaprTmpltPage({
-    page: 0,
-    size: PAGE_SIZE,
-    sort: "regDt,desc",
-    docSeComCd: "FNRS",
-  });
-
-  const handleRowsChange = useCallback((rows: ElaprAplnRow[]) => {
-    setAplnRows(rows);
-  }, []);
-
-  const handleEditingLockedChange = useCallback((locked: boolean) => {
-    setIsEditingLocked(locked);
-  }, []);
-
-  function handleSelectTmplt(tmplt: ElaprTmplt | null) {
-    setSelectedTmplt(tmplt);
-    setAplnRows([]);
-    setIsEditingLocked(false);
-  }
-
-  function handleOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      setSelectedTmplt(null);
-      setAplnRows([]);
-      setIsEditingLocked(false);
-      onClose();
-    }
-  }
-
-  function handleConfirm() {
-    if (!selectedTmplt) {
-      alert("결재서식을 선택해 주세요.");
-      return;
-    }
-
-    const rowsError = validateAllRowsForSave(aplnRows, isEditingLocked);
-    if (rowsError) {
-      alert(rowsError);
-      return;
-    }
-
-    const orderError = validateAtrzOrder(aplnRows);
-    if (orderError) {
-      alert(orderError);
-      return;
-    }
-
-    const seqError = validateUniqueSeqNo(aplnRows);
-    if (seqError) {
-      alert(seqError);
-      return;
-    }
-
-    const visibleRows = getVisibleRows(aplnRows);
-
-    const payload: ElaprTmpltPickerConfirmPayload = {
-      tmplt: selectedTmplt,
-      aplnRows: visibleRows,
-    };
-
-    if (onConfirm) {
-      onConfirm(payload);
-    } else {
-      onSelect?.(selectedTmplt);
-    }
-
-    setSelectedTmplt(null);
-    setAplnRows([]);
-    setIsEditingLocked(false);
-    onClose();
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="max-w-[120rem]" aria-describedby={undefined}>
-        <DialogHeader>
-          <DialogTitle>결재선 선택</DialogTitle>
-        </DialogHeader>
-
-        <div className="flex gap-6">
-          <ElaprTmpltSelectTable
-            query={tmpltQuery}
-            selectedTmpltId={selectedTmplt?.elaprTmpltId ?? null}
-            onSelectTmplt={handleSelectTmplt}
-          />
-          <ElaprAplnPickerGrid
-            elaprTmpltId={selectedTmplt?.elaprTmpltId ?? null}
-            onRowsChange={handleRowsChange}
-            onEditingLockedChange={handleEditingLockedChange}
-          />
-        </div>
-
-        <DialogFooter>
-          <Button type="button" color="white" onClick={() => handleOpenChange(false)}>
-            닫기
-          </Button>
-          <Button
-            type="button"
-            disabled={!selectedTmplt || isEditingLocked}
-            onClick={handleConfirm}
-          >
-            확인
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export { ElaprTmpltPickerDialog };
-export type { ElaprTmpltPickerConfirmPayload };
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-tmplt-select-table.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-tmplt-select-table.tsx
deleted file mode 100644
index 50bdb33b9..000000000
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-tmplt-select-table.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-
-import type { UseQueryResult } from "@tanstack/react-query";
-import { createColumnHelper, getCoreRowModel, type RowSelectionState } from "@tanstack/react-table";
-
-import { useDataTable } from "@/shared/lib";
-import type { PageResponse } from "@/shared/model";
-import type { ElaprTmplt } from "@/entities/elapr";
-import { Skeleton } from "@common/components";
-
-const columnHelper = createColumnHelper<ElaprTmplt>();
-
-interface ElaprTmpltSelectTableProps {
-  query: UseQueryResult<PageResponse<ElaprTmplt>>;
-  selectedTmpltId: string | null;
-  onSelectTmplt: (tmplt: ElaprTmplt | null) => void;
-}
-
-function ElaprTmpltSelectTable({
-  query,
-  selectedTmpltId,
-  onSelectTmplt,
-}: ElaprTmpltSelectTableProps) {
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-
-  useEffect(() => {
-    if (selectedTmpltId) {
-      setRowSelection({ [selectedTmpltId]: true });
-    } else {
-      setRowSelection({});
-    }
-  }, [selectedTmpltId]);
-
-  const columns = useMemo(
-    () => [
-      columnHelper.accessor("elaprTmpltId", {
-        header: "전자결재서식아이디",
-        meta: { align: "left" },
-      }),
-      columnHelper.accessor("elaprTmpltNm", {
-        header: "결재서식명",
-        meta: { align: "left" },
-      }),
-      columnHelper.accessor("docSeComNm", {
-        header: "문서구분",
-        cell: ({ getValue, row }) => getValue() ?? row.original.docSeComCd ?? "—",
-      }),
-    ],
-    [],
-  );
-
-  const { tableComponent } = useDataTable({
-    query,
-    tableOptions: {
-      columns,
-      state: { rowSelection },
-      enableRowSelection: true,
-      enableMultiRowSelection: false,
-      getRowId: (row) => row.elaprTmpltId,
-      onRowSelectionChange: (updater) => {
-        const next = typeof updater === "function" ? updater(rowSelection) : updater;
-        setRowSelection(next);
-        const selectedId = Object.keys(next)[0];
-        if (!selectedId) {
-          onSelectTmplt(null);
-          return;
-        }
-        const selected = query.data?.content.find((t) => t.elaprTmpltId === selectedId);
-        onSelectTmplt(selected ?? null);
-      },
-      getCoreRowModel: getCoreRowModel(),
-    },
-    dataTableOptions: {
-      onRowClick: (row) => {
-        setRowSelection({ [row.elaprTmpltId]: true });
-        onSelectTmplt(row);
-      },
-    },
-  });
-
-  return (
-    <section className="card card-border mx-0 min-h-[32rem] flex-[0.5] bg-background pt-0">
-      <div className="card-header h-[4.6rem]">
-        <h3 className="text-2xl font-semibold">전자결재서식</h3>
-      </div>
-      {query.isPending && (
-        <div className="flex flex-col gap-2 p-4">
-          <Skeleton className="h-[4rem]" />
-          <Skeleton className="h-[16rem]" />
-        </div>
-      )}
-      {query.isError && (
-        <p className="py-8 text-center text-lg text-muted-foreground">
-          결재서식 목록을 불러오지 못했습니다.
-        </p>
-      )}
-      {!query.isPending && !query.isError && tableComponent}
-    </section>
-  );
-}
-
-export { ElaprTmpltSelectTable };
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx
index bf3d02823..6dc25c16c 100644
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx
+++ b/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx
@@ -13,6 +13,8 @@ import {
   buildElaprPrgrsSttsListFromAplnRows,
   type ElaprDmndSaveRequestDto,
   elaprDmndService,
+  type ElaprTmpltPickerConfirmPayload,
+  ElaprTmpltPickerDialog,
   hasCurrentUserPendingApprovalRequest,
   useElaprDocPrgrsByDocNo,
 } from "@/entities/elapr";
@@ -44,10 +46,6 @@ import { type ChecklistFormState } from "../../model/view-types";
 import type { TechReviewOpinionSectionHandle } from "../sections/tech-review-opinion-section";
 
 import { ElaprApprovalDialog } from "./elapr-approval-dialog";
-import {
-  type ElaprTmpltPickerConfirmPayload,
-  ElaprTmpltPickerDialog,
-} from "./elapr-tmplt-picker-dialog";
 
 interface FloatingActionButtonsProps {
   data: FnrsCnsltnMngDetResponseDto;
@@ -513,6 +511,7 @@ function FloatingActionButtons({
       <ElaprTmpltPickerDialog
         open={activeDialog === "elaprTmplt"}
         onClose={() => setActiveDialog(null)}
+        docSeComCd={docSeComCd}
         onConfirm={handleElaprTmpltConfirm}
       />
 
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/components/sortable-apln-picker-row.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/components/sortable-apln-picker-row.tsx
deleted file mode 100644
index 46af147ca..000000000
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/sortable-apln-picker-row.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-"use client";
-
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { MoveVertical } from "lucide-react";
-
-import { CodeSelect, findCodeLabel, useCodeList } from "@/entities/code";
-import type { ElaprAplnRow } from "@/entities/elapr";
-import { Button, TableCell, TableRow } from "@common/components";
-
-interface SortableAplnPickerRowProps {
-  row: ElaprAplnRow;
-  displaySeqNo: number;
-  isEditing: boolean;
-  isLocked: boolean;
-  dragDisabled: boolean;
-  onStartEdit: () => void;
-  onSave: () => void;
-  onCancel: () => void;
-  onDelete: () => void;
-  onChange: (patch: Partial<ElaprAplnRow>) => void;
-  onPickAprvr: () => void;
-}
-
-function SortableAplnPickerRow({
-  row,
-  displaySeqNo,
-  isEditing,
-  isLocked,
-  dragDisabled,
-  onStartEdit,
-  onSave,
-  onCancel,
-  onDelete,
-  onChange,
-  onPickAprvr,
-}: SortableAplnPickerRowProps) {
-  const { data: atrzSeCodes } = useCodeList("ATRZSE");
-
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: row.rowKey,
-    disabled: dragDisabled,
-  });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.6 : 1,
-  };
-
-  const rowDisabled = isLocked && !isEditing;
-  const atrzSeLabel = row.atrzSeComNm || findCodeLabel(atrzSeCodes, row.atrzSeComCd);
-
-  return (
-    <TableRow ref={setNodeRef} style={style} className={isEditing ? "bg-accent/30" : undefined}>
-      <TableCell align="center" className="w-10">
-        <Button
-          type="button"
-          size="icon"
-          className="cursor-grab !bg-transparent text-muted-foreground disabled:cursor-not-allowed disabled:opacity-40"
-          disabled={dragDisabled}
-          {...attributes}
-          {...listeners}
-          aria-label="순서 변경"
-        >
-          <MoveVertical className="!size-6" />
-        </Button>
-      </TableCell>
-      <TableCell align="center">{row.isNew ? "-" : (row.aplnId ?? "-")}</TableCell>
-      <TableCell align="center">{displaySeqNo}</TableCell>
-      <TableCell align="center">
-        {isEditing ? (
-          <CodeSelect
-            upCd="ATRZSE"
-            className="min-w-[120px]"
-            value={row.atrzSeComCd ?? ""}
-            onValueChange={(v) =>
-              onChange({
-                atrzSeComCd: v,
-                atrzSeComNm: findCodeLabel(atrzSeCodes, v),
-              })
-            }
-            placeholder="결재구분"
-          />
-        ) : (
-          atrzSeLabel || "-"
-        )}
-      </TableCell>
-      <TableCell align="center">
-        <div className="flex items-center justify-center gap-4">
-          <span>{row.aprvrNm || row.aprvrUuid || "-"}</span>
-          {isEditing && (
-            <Button type="button" size="sm" onClick={onPickAprvr}>
-              선택
-            </Button>
-          )}
-        </div>
-      </TableCell>
-      <TableCell align="center">
-        <div className="flex justify-center gap-2">
-          {isEditing ? (
-            <>
-              <Button type="button" size="sm" onClick={onSave}>
-                확인
-              </Button>
-              <Button type="button" size="sm" color="white" onClick={onCancel}>
-                취소
-              </Button>
-            </>
-          ) : (
-            <>
-              <Button
-                type="button"
-                size="sm"
-                color="white"
-                disabled={rowDisabled}
-                onClick={onStartEdit}
-              >
-                수정
-              </Button>
-              <Button
-                type="button"
-                size="sm"
-                color="gray"
-                disabled={rowDisabled}
-                onClick={onDelete}
-              >
-                삭제
-              </Button>
-            </>
-          )}
-        </div>
-      </TableCell>
-    </TableRow>
-  );
-}
-
-export { SortableAplnPickerRow };
diff --git a/apps/as/src/pages/instl-sncn/model/reviewer-option.ts b/apps/as/src/pages/instl-sncn/model/reviewer-option.ts
deleted file mode 100644
index 2c9a72ef8..000000000
--- a/apps/as/src/pages/instl-sncn/model/reviewer-option.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface ReviewerOption {
-  uuid: string;
-  name: string;
-  deptNm: string;
-}
diff --git a/apps/as/src/pages/instl-sncn/ui/components/aprvr-picker-dialog.tsx b/apps/as/src/pages/instl-sncn/ui/components/aprvr-picker-dialog.tsx
deleted file mode 100644
index dd241a514..000000000
--- a/apps/as/src/pages/instl-sncn/ui/components/aprvr-picker-dialog.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-"use client";
-
-import { RvwMnpwMngResponseDto, useRvwMnpwMngPage } from "@/entities/rvw-mnpw";
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Skeleton,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@common/components";
-
-import { type ReviewerOption } from "../../model/reviewer-option";
-
-const PAGE_SIZE = 500;
-
-interface AprvrPickerDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  atrzSeComCd: string;
-  onSelect: (reviewer: ReviewerOption) => void;
-}
-
-function AprvrPickerDialog({ open, onOpenChange, atrzSeComCd, onSelect }: AprvrPickerDialogProps) {
-  const { data, isPending, isError } = useRvwMnpwMngPage(
-    {
-      atrzSeComCd,
-      page: 0,
-      size: PAGE_SIZE,
-      sort: "userUuidNm,asc",
-    },
-    { enabled: open },
-  );
-
-  const items = data?.content ?? [];
-
-  function fromRvwMnpwMng(item: RvwMnpwMngResponseDto): ReviewerOption {
-    return {
-      uuid: item.userUuid,
-      name: item.userUuidNm ?? "",
-      deptNm: item.ognzNm ?? "",
-    };
-  }
-
-  function handleSelect(item: (typeof items)[number]) {
-    onSelect(fromRvwMnpwMng(item));
-    onOpenChange(false);
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-[56rem]" aria-describedby={undefined}>
-        <DialogHeader>
-          <DialogTitle>검토인력 선택</DialogTitle>
-        </DialogHeader>
-
-        <div className="h-[36rem] overflow-auto">
-          {isPending ? (
-            <div className="flex flex-col gap-2">
-              <Skeleton className="h-[4rem]" />
-              <Skeleton className="h-[16rem]" />
-            </div>
-          ) : isError ? (
-            <p className="py-8 text-center text-lg text-muted-foreground">
-              검토인력 목록을 불러오지 못했습니다.
-            </p>
-          ) : items.length === 0 ? (
-            <p className="py-8 text-center text-lg text-muted-foreground">
-              배치된 검토인력이 없습니다.
-            </p>
-          ) : (
-            <Table className="w-full">
-              <colgroup>
-                <col width="25%" />
-                <col width="25%" />
-                <col width="15%" />
-                <col width="15%" />
-                <col width="20%" />
-              </colgroup>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>성명</TableHead>
-                  <TableHead>부서</TableHead>
-                  <TableHead>직위</TableHead>
-                  <TableHead>직급</TableHead>
-                  <TableHead>선택</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {items.map((item) => (
-                  <TableRow key={`${item.atrzSeComCd}-${item.ognzSn}-${item.userUuid}`}>
-                    <TableCell align="center">{item.userUuidNm || item.userUuid}</TableCell>
-                    <TableCell align="center">{item.ognzNm || "-"}</TableCell>
-                    <TableCell align="center">{item.jbpsSeNm || "-"}</TableCell>
-                    <TableCell align="center">{item.jbgdSeNm || "-"}</TableCell>
-                    <TableCell align="center">
-                      <Button type="button" size="sm" onClick={() => handleSelect(item)}>
-                        선택
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          )}
-        </div>
-
-        <DialogFooter>
-          <Button type="button" color="white" onClick={() => onOpenChange(false)}>
-            닫기
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export { AprvrPickerDialog };
diff --git a/apps/as/src/pages/instl-sncn/ui/components/elapr-approval-dialog.tsx b/apps/as/src/pages/instl-sncn/ui/components/elapr-approval-dialog.tsx
index a6737ec3e..53b6337c8 100644
--- a/apps/as/src/pages/instl-sncn/ui/components/elapr-approval-dialog.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/components/elapr-approval-dialog.tsx
@@ -10,11 +10,13 @@ import { AxiosError } from "axios";
 import { ENDPOINT } from "@/shared/config";
 import { useAlertStore } from "@/shared/lib";
 import {
+  AprvrPickerDialog,
   buildPrgrsSttsSavePayload,
   elaprPrgrsSttsService,
   findCurrentUserPendingApprovalRequest,
   hasUnsavedPrgrsSttsChanges,
   isPrgrsSttsRowEditable,
+  type ReviewerOption,
   useDndSensors,
   useElaprDocPrgrsByDocNo,
   usePrgrsSttsRows,
@@ -41,9 +43,6 @@ import {
   Textarea,
 } from "@common/components";
 
-import type { ReviewerOption } from "../../model/reviewer-option";
-
-import { AprvrPickerDialog } from "./aprvr-picker-dialog";
 import { SortablePrgrsSttsRow } from "./sortable-prgrs-stts-row";
 
 interface ElaprApprovalDialogProps {
diff --git a/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx b/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx
index ba1f79441..90bc8018e 100644
--- a/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx
@@ -13,6 +13,8 @@ import {
   buildElaprPrgrsSttsListFromAplnRows,
   type ElaprDmndSaveRequestDto,
   elaprDmndService,
+  type ElaprTmpltPickerConfirmPayload,
+  ElaprTmpltPickerDialog,
   hasCurrentUserPendingApprovalRequest,
   useElaprDocPrgrsByDocNo,
 } from "@/entities/elapr";
@@ -39,10 +41,6 @@ import { type ChecklistFormState } from "../../model/view-types";
 import type { TechReviewOpinionSectionHandle } from "../sections/tech-review-opinion-section";
 
 import { ElaprApprovalDialog } from "./elapr-approval-dialog";
-import {
-  type ElaprTmpltPickerConfirmPayload,
-  ElaprTmpltPickerDialog,
-} from "./elapr-tmplt-picker-dialog";
 
 interface FloatingActionButtonsProps {
   data: InstlSncnMngDetResponse;
@@ -516,6 +514,7 @@ function FloatingActionButtons({
       <ElaprTmpltPickerDialog
         open={activeDialog === "elaprTmplt"}
         onClose={() => setActiveDialog(null)}
+        docSeComCd={docSeComCd}
         onConfirm={handleElaprTmpltConfirm}
       />
 

From 450de39f8c772a501536df2559a320950ac36775 Mon Sep 17 00:00:00 2001
From: ljpark <mind-one005@mind-one.co.kr>
Date: Tue, 14 Jul 2026 16:48:08 +0900
Subject: [PATCH 16/32] =?UTF-8?q?dm:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dm/app/(with-layout)/apply/dmdco/page.tsx | 24 ++++-----
 apps/dm/app/store/index.tsx                   |  9 +++-
 apps/dm/app/store/sdmMng/index.tsx            | 53 +++++++++++++++++--
 apps/dm/components/TopNav.tsx                 | 32 +++--------
 apps/dm/package.json                          |  1 +
 5 files changed, 78 insertions(+), 41 deletions(-)

diff --git a/apps/dm/app/(with-layout)/apply/dmdco/page.tsx b/apps/dm/app/(with-layout)/apply/dmdco/page.tsx
index 1edd73d3e..fb893c8fb 100644
--- a/apps/dm/app/(with-layout)/apply/dmdco/page.tsx
+++ b/apps/dm/app/(with-layout)/apply/dmdco/page.tsx
@@ -11,6 +11,7 @@ import PostcodeModal from "@/components/PostcodeModal";
 import type { AddrItem } from "@/app/store/sdmMng/postcode-service";
 import { useDmStore } from "@/app/store";
 import { fetchType, getFetch, postFetch, putFetch } from "@/components/ui/api";
+import type { DemandCompType } from "@common/business_components/ui/sdmInsertForm/form";
 import { getCookie } from "@common/components/lib";
 
 type Option = { value: string; label: string };
@@ -166,7 +167,7 @@ function Hr({ className = "" }: { className?: string }) {
 
 export default function DemandPlaceRegisterPage() {
   const router = useRouter();
-  const { Common, initializeCommonData } = useDmStore((state) => state);
+  const { Common, initializeCommonData, actionLogin } = useDmStore((state) => state);
   const { selectSidoData, selectSigunData } = Common;
 
   const [editMode, setEditMode] = useState(false);
@@ -444,21 +445,20 @@ export default function DemandPlaceRegisterPage() {
 
         alert("수요처 수정 완료!");
       } else {
-        const response = await postFetch("/reuseFc/request", payload);
-        const responseJson = await response.json().catch(() => null);
-        const savedUser = responseJson?.data ?? payload;
+        await postFetch("/reuseFc/request", payload);
 
-        if (typeof window !== "undefined") {
-          const nextSessionUser = {
-            ...(sessionUser ?? {}),
-            ...savedUser,
-          };
-          delete nextSessionUser.dmdAplyPswd;
-          sessionStorage.setItem("user", JSON.stringify(nextSessionUser));
+        const loginSuccess = await actionLogin({
+          dmdInfoId: fullDmdInfoId,
+          dmdAplyPswd: sha512.hex(password),
+        } as DemandCompType);
+
+        if (!loginSuccess) {
+          alert("수요처 등록은 완료되었지만 자동 로그인에 실패하였습니다. 다시 로그인해 주세요.");
+          return;
         }
 
         alert("수요처 등록 완료!");
-        router.push("/apply/dmdinfo"); // 수요정보등록
+        router.push("/apply/dmdinfo");
       }
 
       setPw("");
diff --git a/apps/dm/app/store/index.tsx b/apps/dm/app/store/index.tsx
index 47170b3db..4291adfba 100644
--- a/apps/dm/app/store/index.tsx
+++ b/apps/dm/app/store/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { type ReactNode, createContext, useContext, useRef } from 'react'
+import { type ReactNode, createContext, useContext, useEffect, useRef } from 'react'
 import { useStore } from 'zustand'
 import { type DmStore, StoreZus } from './store'
 
@@ -23,6 +23,11 @@ export const StoreProvider = ({
     // Create store instance if not initialized
     storeRef.current = StoreZus() as StoreApi
   }
+
+  useEffect(() => {
+    storeRef.current?.getState().hydrateLoginUser();
+  }, [])
+
   return (
     <StoreContext.Provider value={storeRef.current}>
       {children}
@@ -39,4 +44,4 @@ export const useDmStore = <T,>(
   }
 
   return useStore(storeContext, selector)
-}
\ No newline at end of file
+}
diff --git a/apps/dm/app/store/sdmMng/index.tsx b/apps/dm/app/store/sdmMng/index.tsx
index c51209515..904c0a6b0 100644
--- a/apps/dm/app/store/sdmMng/index.tsx
+++ b/apps/dm/app/store/sdmMng/index.tsx
@@ -43,6 +43,20 @@ export const sdmInfoFormSchema = z.object({
 
 export type SdmInfoFormData = z.infer<typeof sdmInfoFormSchema>;
 
+export type LoginUser = {
+  dmdCoNm?: string;
+  dmdInfoId?: string;
+  dmdCoSn?: number;
+  zip?: string;
+  daddr?: string;
+  daddr2?: string;
+  telno?: string;
+  ctpvCd?: string;
+  sggCd?: string;
+  rgtr?: string;
+  [key: string]: unknown;
+};
+
 const formatTelno = (telno?: string | null) => {
   const digits = (telno ?? '').replace(/\D/g, '');
 
@@ -512,7 +526,7 @@ const fetchUpdateSdmInfoData = async (data: SdmInfoFormData): Promise<boolean> =
   }
 }
 
-const postSdmLoginData = async (data: DemandCompType) => {
+const postSdmLoginData = async (data: DemandCompType): Promise<boolean> => {
   try {
     const res = await postFetch("/reuseFc/request/login", data);
     const jsonData = await res.json();
@@ -539,9 +553,23 @@ const postSdmLoginData = async (data: DemandCompType) => {
   } catch (error) {
     console.log(error);
     alert("수요처 로그인에 실패하였습니다.");
+    return false;
   }
 }
 
+const getStoredLoginUser = (): LoginUser | null => {
+  if (typeof window === "undefined") return null;
+
+  const sessionUser = sessionStorage.getItem("user");
+  if (!sessionUser) return null;
+
+  try {
+    return JSON.parse(sessionUser) as LoginUser;
+  } catch {
+    return null;
+  }
+};
+
 const getDemandCompList = async (searchText: string, pageCnt: number) => {
   try {
     const url = '/reuseFc/request/' + (searchText ? searchText : '') + '/' + pageCnt;
@@ -586,11 +614,12 @@ const fetchGetSimilarCaseList = async (part: string, value: number | string) =>
  ====================================*/
 export type SdmActions = {
   initializeSdmData: () => void;
+  hydrateLoginUser: () => void;
   insertSdmData: (data: DemandCompType) => Promise<void>;
   insertSdmInfoData: (data: SdmInfoFormData) => Promise<boolean>;
   updateSdmInfoData: (data: SdmInfoFormData) => Promise<boolean>;
   getDemandCompList: (searchText: string, pageCnt: number) => Promise<void>;
-  actionLogin: (data: DemandCompType) => Promise<void>;
+  actionLogin: (data: DemandCompType) => Promise<boolean>;
   getSdmInfoStatusList: (dmdInfoId: string) => Promise<void>;
   getSimilarCaseList: (part: string, value: number | string) => Promise<void>;
   actionLogout: () => Promise<void>;
@@ -616,6 +645,7 @@ export type SdmType = {
     // 로그인관련
     successNextPage: boolean;
     successLogin: boolean;
+    loginUser: LoginUser | null;
   }
 }
 
@@ -637,6 +667,7 @@ export const SdmState: SdmType = {
     // 로그인관련
     successNextPage: false,
     successLogin: false,
+    loginUser: null,
   }
 }
 
@@ -644,6 +675,15 @@ export const SdmReducer = (set: any): SdmActions => {
   return {
     initializeSdmData: async () => {
     },
+    hydrateLoginUser: () => {
+      const loginUser = getStoredLoginUser();
+      set((state: SdmType) => ({
+        Sdm: {
+          ...state.Sdm,
+          loginUser,
+        }
+      }))
+    },
 
     insertSdmData: async (data: DemandCompType) => {
       const preRes = await getSdmInfoStatusList(data.dmdInfoId);
@@ -743,14 +783,20 @@ export const SdmReducer = (set: any): SdmActions => {
       }))
     },
 
-    actionLogin: async (data: DemandCompType) => {
+    actionLogin: async (data: DemandCompType): Promise<boolean> => {
       const loginSuccess = await postSdmLoginData(data);
+      const loginUser = loginSuccess ? getStoredLoginUser() : undefined;
       set((state: SdmType) => ({
         Sdm: {
           ...state.Sdm,
           successLogin: loginSuccess,
+          loginUser:
+            loginSuccess
+              ? loginUser
+              : state.Sdm.loginUser,
         }
       }))
+      return loginSuccess;
     },
 
     // 유사사례 조회
@@ -792,6 +838,7 @@ export const SdmReducer = (set: any): SdmActions => {
         Sdm: {
           ...state.Sdm,
           successLogin: false,
+          loginUser: null,
         }
       }))
     },
diff --git a/apps/dm/components/TopNav.tsx b/apps/dm/components/TopNav.tsx
index 5e24ead78..741dbed2a 100644
--- a/apps/dm/components/TopNav.tsx
+++ b/apps/dm/components/TopNav.tsx
@@ -8,9 +8,6 @@ import LoginModal from "@/components/LoginModal";
 import { fetchAnonymousMenu, isMenuActive, type MenuItem } from "@/app/store/common";
 import { useDmStore } from "@/app/store";
 
-// const LS_TOKEN_KEY = "reuse_accessToken";
-const LS_USER_KEY = "user";
-
 const DEFAULT_NAV_ITEMS: Pick<MenuItem, "menuCd" | "menuKornNm" | "urlPath" | "newWndwYn">[] = [
   { menuCd: 1, menuKornNm: "물 재이용 소개", urlPath: "/intro", newWndwYn: "N" },
   { menuCd: 2, menuKornNm: "물 재이용 현황", urlPath: "/status", newWndwYn: "N" },
@@ -22,21 +19,11 @@ export default function TopNav() {
   const router = useRouter();
   const pathname = usePathname();
 
-  const { actionLogout } = useDmStore((state) => state);
+  const { actionLogout, Sdm } = useDmStore((state) => state);
+  const { loginUser } = Sdm;
   const [loginOpen, setLoginOpen] = useState(false);
-  const [userName, setUserName] = useState<string | null>(null);
   const [topMenus, setTopMenus] = useState<MenuItem[]>([]);
 
-  useEffect(() => {
-    const sessionUser = sessionStorage.getItem(LS_USER_KEY);
-    if (sessionUser) {
-      const parsed = JSON.parse(sessionUser) as { dmdCoNm?: string };
-      setUserName(parsed.dmdCoNm ?? "수요처");
-    } else {
-      setUserName(null);
-    }
-  }, []);
-
   useEffect(() => {
     let isMounted = true;
 
@@ -72,13 +59,13 @@ export default function TopNav() {
       otptYn: "Y",
     }));
   }, [topMenus]);
+
+  const userName = loginUser?.dmdCoNm ?? null;
+  const isLoggedIn = Boolean(loginUser);
   
   const openLogin = () => setLoginOpen(true);
 
   const logout = async () => {
-    // localStorage.removeItem(LS_TOKEN_KEY);
-    // localStorage.removeItem(LS_USER_KEY);
-    setUserName(null);
     await actionLogout();
     router.push("/main");
   };
@@ -113,7 +100,7 @@ export default function TopNav() {
                   active ? "text-sky-700" : "text-gray-800 hover:text-sky-700",
                 ].join(" ");
 
-                if (requiresLogin && !userName) {
+                if (requiresLogin && !isLoggedIn) {
                   return (
                     <button
                       key={item.menuCd}
@@ -149,7 +136,7 @@ export default function TopNav() {
 
             {/* ✅ 우측: 로그인 버튼 / 로그인 정보 + 로그아웃 */}
             <div className="flex items-center gap-3">
-              {!userName ? (
+              {!isLoggedIn ? (
                 <button
                   type="button"
                   onClick={openLogin}
@@ -197,10 +184,7 @@ export default function TopNav() {
       <LoginModal
         open={loginOpen}
         onClose={() => setLoginOpen(false)}
-        onSuccess={({ userName: nextUserName }) => {
-          // localStorage.setItem(LS_USER_KEY, nextUserName);
-          // if (accessToken) localStorage.setItem(LS_TOKEN_KEY, accessToken);
-          setUserName(nextUserName);
+        onSuccess={() => {
           setLoginOpen(false);
           router.refresh();
         }}
diff --git a/apps/dm/package.json b/apps/dm/package.json
index ba4ac6013..9ea8ad7a4 100644
--- a/apps/dm/package.json
+++ b/apps/dm/package.json
@@ -7,6 +7,7 @@
     "build": "next build",
     "start:dm": "next start -p 3015",
     "lint": "next lint",
+    "dev:e2e": "next dev --port 3016",
     "test:e2e": "playwright test",
     "test:e2e:headed": "playwright test --headed"
   },

From 6b2ea58b663c22c6afec9641a1dee15dcf4a48fd Mon Sep 17 00:00:00 2001
From: ljpark <mind-one005@mind-one.co.kr>
Date: Wed, 15 Jul 2026 10:26:56 +0900
Subject: [PATCH 17/32] =?UTF-8?q?wr:=20Password=20=EC=B4=88=EA=B8=B0?=
 =?UTF-8?q?=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/wr/.env.local                                     |  4 ++--
 apps/wr/.gitignore                                     |  6 ++++++
 apps/wr/AGENTS.md                                      |  2 ++
 apps/wr/app/(with-layout)/matMng/coMng/coSttn/page.tsx |  4 ++--
 apps/wr/app/store/matDmd/coSttn/index.tsx              | 10 +++++++---
 apps/wr/package.json                                   |  6 +++++-
 6 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/apps/wr/.env.local b/apps/wr/.env.local
index 96b66b536..36faf6c47 100644
--- a/apps/wr/.env.local
+++ b/apps/wr/.env.local
@@ -13,8 +13,8 @@ NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
 NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
 NEXT_PUBLIC_GEOSERVER_URL = https://hasudo.geo.rsonesoft.com/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
-NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
-# NEXT_PUBLIC_WR_SERVER_API_URL = http://localhost:8883/reuse-service/api/v1
+# NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
+NEXT_PUBLIC_WR_SERVER_API_URL = http://localhost:8883/reuse-service/api/v1
 NEXT_PUBLIC_SEWERAGE_API_URL = http://con.mind-one.co.kr:11083/sewerage-service   # 개발 서버 API
 # NEXT_PUBLIC_SEWERAGE_API_URL=http://localhost:8883/sewerage-service
 NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr
diff --git a/apps/wr/.gitignore b/apps/wr/.gitignore
index 8c5b2ee3a..9463ca1b6 100644
--- a/apps/wr/.gitignore
+++ b/apps/wr/.gitignore
@@ -39,3 +39,9 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+#test
+/tests
+/test-results
+.*.log
+playwright.config.ts
diff --git a/apps/wr/AGENTS.md b/apps/wr/AGENTS.md
index 3acdf0cfd..3f05ba328 100644
--- a/apps/wr/AGENTS.md
+++ b/apps/wr/AGENTS.md
@@ -40,3 +40,5 @@ apps/
   st
   wr
 
+## local backend src 경로
+D:\iipbs\wr_back_out - http://localhost:8883/reuse-service
diff --git a/apps/wr/app/(with-layout)/matMng/coMng/coSttn/page.tsx b/apps/wr/app/(with-layout)/matMng/coMng/coSttn/page.tsx
index 580edc7a3..6cdef62db 100644
--- a/apps/wr/app/(with-layout)/matMng/coMng/coSttn/page.tsx
+++ b/apps/wr/app/(with-layout)/matMng/coMng/coSttn/page.tsx
@@ -186,11 +186,11 @@ export default function CoSttn() {
       const dmdInfoId = updateData.dmdInfoId;
       const dmdInfoSliceId = `${dmdInfoId.slice(0, 3)}-${dmdInfoId.slice(3, 5)}-${dmdInfoId.slice(5, 10)}-${dmdInfoId.slice(10)}`
       const handleConfirm = async () => {
-        if (!updateData?.dmdCoSn) {
+        if (!updateData?.dmdCoSn || !updateData?.dmdInfoId) {
           alert("수요처 식별값이 없어 비밀번호를 초기화할 수 없습니다.");
           return;
         }
-        const message = await coSttnPwInit(Number(updateData.dmdCoSn));
+        const message = await coSttnPwInit(Number(updateData.dmdCoSn), updateData.dmdInfoId);
         alert(message);
       };
       if (await confirm(t('isInitPw', { dmdInfoId: dmdInfoSliceId }))) {
diff --git a/apps/wr/app/store/matDmd/coSttn/index.tsx b/apps/wr/app/store/matDmd/coSttn/index.tsx
index aa34f13a3..fd9baab73 100644
--- a/apps/wr/app/store/matDmd/coSttn/index.tsx
+++ b/apps/wr/app/store/matDmd/coSttn/index.tsx
@@ -1,6 +1,7 @@
 import type { CommonTableProps } from "@/app/store/common/type/header";
 import { fetchType, getFetchWithCount, putFectch } from "@/components/lib/api";
 import type { DemandCompType } from "@common/business_components/ui/sdmInsertForm/form";
+import { sha512 } from "js-sha512";
 import { coSttHeadListExport, coSttNodeListExport } from "./headList";
 
 // 테이블 헤드 리스트
@@ -24,7 +25,7 @@ type coSttnActions = {
   coSttnInit: (pageNo: string, pageCnt: string, con: string) => void;
   coSttnSearch: (pageNo: string, pageCnt: string, con: string) => void;
   coSttnTxtSearch: (pageNo: string, pageCnt: string, con: string, txt: string) => void;
-  coSttnPwInit: (dmdCoSn: number) => Promise<string>;
+  coSttnPwInit: (dmdCoSn: number, dmdInfoId: string) => Promise<string>;
 };
 
 export type coSttnType = coSttnState & coSttnActions;
@@ -122,9 +123,12 @@ export const coSttnActionsExport: (set: any) => coSttnActions = (
         console.log("error", erTxt);
       }
     },
-    coSttnPwInit: async (dmdCoSn: number) => {
+    coSttnPwInit: async (dmdCoSn: number, dmdInfoId: string) => {
       try {
-        const response = await putFectch(`/reuseFc/request/chgPassword/${dmdCoSn}`,[])
+        const initialPasswordHash = sha512.hex(dmdInfoId.substring(0, 10));
+        const response = await putFectch(`/reuseFc/request/chgPassword/${dmdCoSn}`, {
+          dmdAplyPswd: initialPasswordHash,
+        })
         if (response.status === 200) {
           return "비밀번호가 초기화되었습니다.";
         } else {
diff --git a/apps/wr/package.json b/apps/wr/package.json
index 662585887..864de626c 100644
--- a/apps/wr/package.json
+++ b/apps/wr/package.json
@@ -8,7 +8,10 @@
     "start": "next start -p 3001",
     "start:sn": "next start -p 3001",
     "start:wr": "next start -p 3001",
-    "lint": "next lint"
+    "lint": "next lint",
+    "dev:e2e": "next dev --port 3017",
+    "test:e2e": "playwright test",
+    "test:e2e:headed": "playwright test --headed"
   },
   "dependencies": {
     "@common/assets": "workspace:*",
@@ -27,6 +30,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "i18next": "^25.3.2",
+    "js-sha512": "^0.9.0",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.474.0",
     "moment": "^2.30.1",

From 18825dd0c360277b7007001899e186a432f61f92 Mon Sep 17 00:00:00 2001
From: rsone001 <rsone001@gmail.com>
Date: Wed, 15 Jul 2026 11:29:49 +0900
Subject: [PATCH 18/32] =?UTF-8?q?[ST]=20-=20DataGrid=20setRow=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EA=B0=84=EB=8B=A8?=
 =?UTF-8?q?=ED=95=9C=20=EC=88=98=EC=A0=95=EC=82=AC=ED=95=AD=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/st/src/components/module/DataGrid.tsx    | 29 +++++++----
 .../input/PublicSewageFacilityInp.tsx         | 49 ++++++++++++++++++-
 .../generalVerification/RegistDialog.tsx      |  2 +-
 apps/st/src/components/type/DataGrid.type.ts  | 14 +++++-
 .../PublicSewageFactColumn.ts                 | 15 +++++-
 .../SewerPrivateSewageTab1Column.ts           |  2 +-
 6 files changed, 97 insertions(+), 14 deletions(-)

diff --git a/apps/st/src/components/module/DataGrid.tsx b/apps/st/src/components/module/DataGrid.tsx
index 06e0882eb..c910b104e 100644
--- a/apps/st/src/components/module/DataGrid.tsx
+++ b/apps/st/src/components/module/DataGrid.tsx
@@ -794,7 +794,24 @@ const DataGrid = ({
     onCellEditedRef.current = onCellEdited;
     onDataCellClickRef.current = onDataCellClick;
 
-    
+    // rowData 변경 시 편집 중인 셀을 commit한 뒤 수동으로 setRows (RealGridReact에 rows prop을 넘기지 않음)
+    const rowDataMountedRef = useRef(false);
+    useEffect(() => {
+        if (!rowDataMountedRef.current) {
+            rowDataMountedRef.current = true;
+            return;
+        }
+        const gv = gridRef.current?.gridView as
+            | { commit?: (force?: boolean) => boolean; cancel?: () => void }
+            | undefined;
+        const dp = gridRef.current?.dataProvider as
+            | { setRows?: (rows: Record<string, string | number>[]) => void }
+            | undefined;
+        if (!dp?.setRows) return;
+        try { gv?.commit?.(); } catch { try { gv?.cancel?.(); } catch { /* noop */ } }
+        dp.setRows(rowData);
+    }, [rowData]);
+
     // highlightedRowId가 변경될 때 해당 행으로 스크롤 및 선택
     useEffect(() => {
         if (!gridRef.current?.gridView || highlightedRowId == null) return;
@@ -1673,9 +1690,11 @@ useEffect(() => {
                               getRowCount(): number;
                               getValue(r: number, f: string): unknown;
                           };
+                          commit?: (force?: boolean) => boolean;
                       }
                     | undefined;
                 if (!gv?.getDataSource) return [];
+                try { gv.commit?.(); } catch { /* ignore */ }
                 const ds = gv.getDataSource();
                 if (!ds) return [];
                 const cnt = ds.getRowCount();
@@ -1835,13 +1854,6 @@ useEffect(() => {
         if (!gridRef.current?.gridView || !showHeaderCheckbox) return;
 
         const gridView = gridRef.current.gridView as GridViewWithCheckApi;
-        const dataProvider = gridRef.current.dataProvider as
-            | { setRows?: (rows: Record<string, string | number>[]) => void }
-            | undefined;
-
-        if (dataProvider?.setRows) {
-            dataProvider.setRows(rowData);
-        }
 
         const hasCheckedColumn = rowData.some((row) =>
             Object.prototype.hasOwnProperty.call(row, "__checked"),
@@ -1989,7 +2001,6 @@ useEffect(() => {
                     ref={gridRef}
                     autoGenerateField={true}
                     layout={columnLayout}
-                    rows={rowData}
                     onRGDataColumnsChanged={(grid) => {
                         const dp = gridRef.current?.dataProvider as
                             | {
diff --git a/apps/st/src/components/statistics/input/PublicSewageFacilityInp.tsx b/apps/st/src/components/statistics/input/PublicSewageFacilityInp.tsx
index 120b7b8a2..33461faf7 100644
--- a/apps/st/src/components/statistics/input/PublicSewageFacilityInp.tsx
+++ b/apps/st/src/components/statistics/input/PublicSewageFacilityInp.tsx
@@ -148,6 +148,37 @@ const PUBLIC_SEWAGE_FACILITY_COLUMN_GUIDE_TAB_KEYS = Array.from(
     new Set(PublicSewageFactInpColumnList.map((tab) => tab.tabKey).filter(Boolean)),
 );
 
+/** 위탁계약기간: `yyyymmdd~yyyymmdd` (빈 값 허용). 하이픈 형식은 정규화 */
+function normalizePrxyCtrtCn(raw: unknown): string | null {
+    if (raw === null || raw === undefined) return null;
+    const s = String(raw).trim().replace(/\s/g, '');
+    if (s === '' || s === '~') return null;
+    const dashed = s.match(/^(\d{4})-(\d{2})-(\d{2})~(\d{4})-(\d{2})-(\d{2})$/);
+    if (dashed) {
+        return `${dashed[1]}${dashed[2]}${dashed[3]}~${dashed[4]}${dashed[5]}${dashed[6]}`;
+    }
+    return s;
+}
+
+function isValidPrxyCtrtCn(value: string | null): boolean {
+    if (value === null) return true;
+    if (!/^\d{8}~\d{8}$/.test(value)) return false;
+    const start = value.slice(0, 8);
+    const end = value.slice(9, 17);
+    return start <= end;
+}
+
+function validatePrxyCtrtCnInRows(rows: Record<string, string | number>[]): string | null {
+    for (let i = 0; i < rows.length; i++) {
+        const normalized = normalizePrxyCtrtCn(rows[i]?.prxyCtrtCn);
+        if (!isValidPrxyCtrtCn(normalized)) {
+            const facilityNm = String(rows[i]?.swtrmtFcltNm ?? '').trim() || `${i + 1}행`;
+            return `위탁계약기간은 yyyymmdd~yyyymmdd 형식으로 입력해 주세요.\n(대상: ${facilityNm})`;
+        }
+    }
+    return null;
+}
+
 // 하수도 통계 관리 > 06. 공공하수처리시설
 const PublicSewageFacilityInp = () => {
     const { setMessage: alert } = useAlertStore((state) => state);
@@ -220,6 +251,11 @@ const PublicSewageFacilityInp = () => {
                 alert('해당사항 없음을 체크해주세요.');
                 return;
             }
+            const prxyCtrtCnError = validatePrxyCtrtCnInRows(currentData);
+            if (prxyCtrtCnError) {
+                alert(prxyCtrtCnError);
+                return;
+            }
             const verificationBlocked = getVerificationPeriodActionBlockedMessage(periodCheckList);
             if (verificationBlocked) {
                 alert(verificationBlocked);
@@ -258,7 +294,7 @@ const PublicSewageFacilityInp = () => {
             prcsPhysCpct: toNumber(d.prcsPhysCpct),
             prcsBoilCpct: toNumber(d.prcsBoilCpct),
             prcsAltdCpct: toNumber(d.prcsAltdCpct),
-            prxyCtrtCn: d.prxyCtrtCn === '' ? null : toNullableString(d.prxyCtrtCn),
+            prxyCtrtCn: normalizePrxyCtrtCn(d.prxyCtrtCn),
             sftyAcdntEvntcsCnt: toNumber(d.sftyAcdntEvntcsCnt),
             rmrk: toNullableString(d.rmrk),
         }));
@@ -298,6 +334,12 @@ const PublicSewageFacilityInp = () => {
         const currentData =
             st60001GridGetRowsRef.current?.() ?? rowDataMap.get('ST00060001') ?? [];
 
+        const prxyCtrtCnError = validatePrxyCtrtCnInRows(currentData);
+        if (prxyCtrtCnError) {
+            alert(prxyCtrtCnError);
+            return;
+        }
+
         const submitList = treatAsNoApplicable ? [] : buildFacilitySaveList(currentData);
         if (!treatAsNoApplicable && submitList.length === 0) {
             alert('해당사항 없음을 체크해주세요.');
@@ -541,6 +583,11 @@ const PublicSewageFacilityInp = () => {
                 const treatAsNoApplicable = noApplicable || isNotApplicable;
                 const currentData =
                     st60001GridGetRowsRef.current?.() ?? rowDataMap.get('ST00060001') ?? [];
+                const prxyCtrtCnError = validatePrxyCtrtCnInRows(currentData);
+                if (prxyCtrtCnError) {
+                    alert(prxyCtrtCnError);
+                    return;
+                }
                 const saveList = treatAsNoApplicable ? [] : buildFacilitySaveList(currentData);
                 if (!treatAsNoApplicable && saveList.length === 0) {
                     alert('해당사항 없음을 체크해주세요.');
diff --git a/apps/st/src/components/statistics/verification/generalVerification/RegistDialog.tsx b/apps/st/src/components/statistics/verification/generalVerification/RegistDialog.tsx
index 518f2da32..84c24aec4 100644
--- a/apps/st/src/components/statistics/verification/generalVerification/RegistDialog.tsx
+++ b/apps/st/src/components/statistics/verification/generalVerification/RegistDialog.tsx
@@ -81,7 +81,7 @@ const RegistDialog = memo(
                 trgtStatsCd: detailData?.data.trgtStatsCd ?? '',
                 trgtStatsNm: detailData?.data.trgtStatsNm ?? '',
                 dcptDigtCnt: detailData?.data.dcptDigtCnt ?? 0,
-                dcptPrcsMthCd: detailData?.data.dcptPrcsMthCd ?? '',
+                dcptPrcsMthCd: detailData?.data.dcptPrcsMthCd ?? null,
                 useYn: detailData?.data.useYn ?? 'Y',
                 rgtrId: detailData?.data.rgtrId ?? '',
                 regDt: detailData?.data.regDt ?? '',
diff --git a/apps/st/src/components/type/DataGrid.type.ts b/apps/st/src/components/type/DataGrid.type.ts
index ea4769dcb..47d0179fc 100644
--- a/apps/st/src/components/type/DataGrid.type.ts
+++ b/apps/st/src/components/type/DataGrid.type.ts
@@ -233,7 +233,7 @@ export type ColumnConfig = {
     datetimeFormat?: string;
     /** RealGrid 셀 편집기 */
     editor?: {
-        type?: "dropdown" | "list" | "date";
+        type?: "dropdown" | "list" | "date" | "text" | "line";
         domainOnly?: boolean;
         textReadOnly?: boolean;
         commitOnSelect?: boolean;
@@ -242,6 +242,18 @@ export type ColumnConfig = {
         datetimeFormat?: string;
         values?: string[];
         labels?: string[];
+        /** RealGrid 입력 마스크 (예: 위탁계약기간 `yyyymmdd~yyyymmdd`) */
+        mask?:
+            | string
+            | {
+                  editMask?: string;
+                  includedFormat?: boolean;
+                  allowEmpty?: boolean;
+                  placeHolder?: string;
+                  overWrite?: boolean;
+                  showInvalidFormatMessage?: boolean;
+                  invalidFormatMessage?: string;
+              };
     };
     footer?:
     | {
diff --git a/apps/st/src/components/util/column/input/PublicSewageFactInpColumn/PublicSewageFactColumn.ts b/apps/st/src/components/util/column/input/PublicSewageFactInpColumn/PublicSewageFactColumn.ts
index d9943bbd6..82198b336 100644
--- a/apps/st/src/components/util/column/input/PublicSewageFactInpColumn/PublicSewageFactColumn.ts
+++ b/apps/st/src/components/util/column/input/PublicSewageFactInpColumn/PublicSewageFactColumn.ts
@@ -145,7 +145,20 @@ export const PublicSewageFactColumn = {
         // 위탁현황
         { name: 'prxyBzentyNmCn', fieldName: 'prxyBzentyNmCn', header: { text: '위탁업체명' }, editable: false, styleName: 'rg-cell-readonly' },
         { name: 'cnsgnCstVl', fieldName: 'cnsgnCstVl', header: { text: '위탁비용(백만원/년)' }, editable: false, footer: footerDecimal1, valueType: ValueType.NUMBER, dataFormat: '#,##0.0', styleName: 'rg-cell-readonly' },
-        { name: 'prxyCtrtCn', fieldName: 'prxyCtrtCn', header: { text: '위탁계약기간' } },
+        {
+            name: 'prxyCtrtCn',
+            fieldName: 'prxyCtrtCn',
+            header: { text: '위탁계약기간\n(yyyymmdd~yyyymmdd)' },
+            editor: {
+                mask: {
+                    editMask: '00000000~00000000',
+                    includedFormat: true,
+                    allowEmpty: true,
+                    placeHolder: 'yyyymmdd~yyyymmdd',
+                    overWrite: true,
+                },
+            },
+        },
         
         // 기타
         { name: 'intgPrcsFcltCn', fieldName: 'intgPrcsFcltCn', header: { text: '중심처리시설' }, editable: false, styleName: 'rg-cell-readonly' },
diff --git a/apps/st/src/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab1Column.ts b/apps/st/src/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab1Column.ts
index c4af5d5a6..aa4893a15 100644
--- a/apps/st/src/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab1Column.ts
+++ b/apps/st/src/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab1Column.ts
@@ -4,7 +4,7 @@ export const PrivateSewageTab1ColumnConfig = {
     tabKey: "ST00080001",
     tabLabel: "처리용량별 오수처리시설",
     rowStartNum: 3,
-    fixedColumns: 3,
+    fixedColumns: 1,
     columns: [
         { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
         { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },

From ae41483bb7a6d861eef529b99571fdd0165dcb69 Mon Sep 17 00:00:00 2001
From: rsone001 <rsone001@gmail.com>
Date: Wed, 15 Jul 2026 11:39:09 +0900
Subject: [PATCH 19/32] =?UTF-8?q?[ST]=20-=20fix:=20=EC=A7=91=EA=B3=84=20?=
 =?UTF-8?q?=EC=BB=AC=EB=9F=BC=20=EC=84=A4=EC=A0=95=20fixedColumns=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sewerPrivateSewageColumn/SewerPrivateSewageTab1Column.ts    | 2 +-
 .../total/sewerageFinancial/SewerageOrgCauseTab4Column.ts       | 2 +-
 .../total/sewerageFinancial/SewerageUsageFeeTab3Column.ts       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/st/src/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab1Column.ts b/apps/st/src/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab1Column.ts
index aa4893a15..7d7d6c7ba 100644
--- a/apps/st/src/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab1Column.ts
+++ b/apps/st/src/components/util/column/total/sewerPrivateSewageColumn/SewerPrivateSewageTab1Column.ts
@@ -4,7 +4,7 @@ export const PrivateSewageTab1ColumnConfig = {
     tabKey: "ST00080001",
     tabLabel: "처리용량별 오수처리시설",
     rowStartNum: 3,
-    fixedColumns: 1,
+    fixedColumns: 2,
     columns: [
         { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
         { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
diff --git a/apps/st/src/components/util/column/total/sewerageFinancial/SewerageOrgCauseTab4Column.ts b/apps/st/src/components/util/column/total/sewerageFinancial/SewerageOrgCauseTab4Column.ts
index af0afc329..279baed23 100644
--- a/apps/st/src/components/util/column/total/sewerageFinancial/SewerageOrgCauseTab4Column.ts
+++ b/apps/st/src/components/util/column/total/sewerageFinancial/SewerageOrgCauseTab4Column.ts
@@ -4,7 +4,7 @@ export const SewerageOrgCauseTab4ColumnConfig = {
     tabKey: "ST00090004",
     tabLabel: "원인자부담금",
     rowStartNum: 3,
-    fixedColumns: 3,
+    fixedColumns: 1,
     columns: [
         { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
         { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },
diff --git a/apps/st/src/components/util/column/total/sewerageFinancial/SewerageUsageFeeTab3Column.ts b/apps/st/src/components/util/column/total/sewerageFinancial/SewerageUsageFeeTab3Column.ts
index 5bfe56b94..03ce956b5 100644
--- a/apps/st/src/components/util/column/total/sewerageFinancial/SewerageUsageFeeTab3Column.ts
+++ b/apps/st/src/components/util/column/total/sewerageFinancial/SewerageUsageFeeTab3Column.ts
@@ -4,7 +4,7 @@ export const SewerageUsageFeeTab3ColumnConfig = {
     tabKey: "ST00090003",
     tabLabel: "하수도 사용료",
     rowStartNum: 3,
-    fixedColumns: 3,
+    fixedColumns: 1,
     columns: [
         { name: "ctpvNm", fieldName: "ctpvNm", header: { text: "시도" }, editable: false },
         { name: "sggNm", fieldName: "sggNm", header: { text: "시군구" }, editable: false },

From 9e2da003f14ef93fd7d4b30a94475c3ff4205035 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 15 Jul 2026 13:36:20 +0900
Subject: [PATCH 20/32] =?UTF-8?q?[as]=20feat:=20=EC=A0=84=EA=B2=B0=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EA=B2=B0?=
 =?UTF-8?q?=EC=9E=AC=ED=98=84=ED=99=A9=20=EC=84=B9=EC=85=98=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/as/src/app/providers/index.tsx           |   4 +-
 apps/as/src/entities/elapr/index.ts           |  11 +-
 .../elapr}/lib/approval-utils.ts              |   9 +-
 .../elapr/lib/prgrs-stts-save-utils.ts        |  12 +-
 .../entities/elapr/lib/use-prgrs-stts-rows.ts |  30 ++
 .../elapr/model/elapr-prgrs-stts-interface.ts |   2 +
 .../elapr/ui}/elapr-approval-dialog.tsx       |  58 +--
 .../elapr/ui/elapr-doc-prgrs-status.tsx       |  95 ++++
 .../elapr/ui}/sortable-prgrs-stts-row.tsx     |  21 +-
 .../ui/components/elapr-approval-dialog.tsx   | 418 ------------------
 .../ui/components/floating-action-buttons.tsx |   3 +-
 .../ui/components/sortable-prgrs-stts-row.tsx | 179 --------
 .../pages/fnrs-cnsltn/ui/fnrs-view-page.tsx   |   5 +
 .../pages/instl-sncn/lib/approval-utils.ts    |  28 --
 .../ui/components/floating-action-buttons.tsx |   3 +-
 .../pages/instl-sncn/ui/instl-form-page.tsx   |   1 +
 .../pages/instl-sncn/ui/instl-view-page.tsx   |   5 +
 apps/as/src/shared/model/pbadms-sprt.ts       |   1 +
 18 files changed, 213 insertions(+), 672 deletions(-)
 rename apps/as/src/{pages/fnrs-cnsltn => entities/elapr}/lib/approval-utils.ts (78%)
 rename apps/as/src/{pages/instl-sncn/ui/components => entities/elapr/ui}/elapr-approval-dialog.tsx (89%)
 create mode 100644 apps/as/src/entities/elapr/ui/elapr-doc-prgrs-status.tsx
 rename apps/as/src/{pages/instl-sncn/ui/components => entities/elapr/ui}/sortable-prgrs-stts-row.tsx (87%)
 delete mode 100644 apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-approval-dialog.tsx
 delete mode 100644 apps/as/src/pages/fnrs-cnsltn/ui/components/sortable-prgrs-stts-row.tsx
 delete mode 100644 apps/as/src/pages/instl-sncn/lib/approval-utils.ts

diff --git a/apps/as/src/app/providers/index.tsx b/apps/as/src/app/providers/index.tsx
index 20ec0b72e..2a0ac6e69 100644
--- a/apps/as/src/app/providers/index.tsx
+++ b/apps/as/src/app/providers/index.tsx
@@ -27,7 +27,9 @@ export function Providers({ children }: ProvidersProps) {
           </AuthWrapper>
         </ConfirmProvider>
       </StoreProvider>
-      <ReactQueryDevtools initialIsOpen={false} />
+      <div style={{ fontSize: "1.4rem" }}>
+        <ReactQueryDevtools initialIsOpen={false} />
+      </div>
     </QueryClientProvider>
   );
 }
diff --git a/apps/as/src/entities/elapr/index.ts b/apps/as/src/entities/elapr/index.ts
index b72bcdb1f..adec3e931 100644
--- a/apps/as/src/entities/elapr/index.ts
+++ b/apps/as/src/entities/elapr/index.ts
@@ -47,6 +47,12 @@ export {
   findCurrentUserPendingApprovalRequest,
   hasCurrentUserPendingApprovalRequest,
 } from "./lib/approval-request-utils";
+export {
+  APPROVER_STATUS_MAP,
+  type ApproverStatusConfig,
+  getApproverStatus,
+  sortByAtrzSeqNo,
+} from "./lib/approval-utils";
 export {
   buildElaprPrgrsSttsListFromApln,
   buildElaprPrgrsSttsListFromAplnRows,
@@ -105,9 +111,12 @@ export type {
 export type { ReviewerOption } from "./model/reviewer-option";
 export { AprvrPickerDialog } from "./ui/aprvr-picker-dialog";
 export { ElaprAplnPickerGrid } from "./ui/elapr-apln-picker-grid";
+export { ElaprApprovalDialog } from "./ui/elapr-approval-dialog";
+export { ElaprDocPrgrsStatus } from "./ui/elapr-doc-prgrs-status";
 export {
-  ElaprTmpltPickerDialog,
   type ElaprTmpltPickerConfirmPayload,
+  ElaprTmpltPickerDialog,
 } from "./ui/elapr-tmplt-picker-dialog";
 export { ElaprTmpltSelectTable } from "./ui/elapr-tmplt-select-table";
 export { SortableAplnPickerRow } from "./ui/sortable-apln-picker-row";
+export { SortablePrgrsSttsRow } from "./ui/sortable-prgrs-stts-row";
diff --git a/apps/as/src/pages/fnrs-cnsltn/lib/approval-utils.ts b/apps/as/src/entities/elapr/lib/approval-utils.ts
similarity index 78%
rename from apps/as/src/pages/fnrs-cnsltn/lib/approval-utils.ts
rename to apps/as/src/entities/elapr/lib/approval-utils.ts
index d60d20b1c..00d7d7b2a 100644
--- a/apps/as/src/pages/fnrs-cnsltn/lib/approval-utils.ts
+++ b/apps/as/src/entities/elapr/lib/approval-utils.ts
@@ -1,4 +1,4 @@
-import type { ElaprDocPrgrsClientResponseDto } from "@/entities/fnrs-cnsltn";
+import type { ElaprDocPrgrsClientResponseDto } from "@/shared/model";
 
 export interface ApproverStatusConfig {
   label: string;
@@ -7,9 +7,10 @@ export interface ApproverStatusConfig {
 
 export const APPROVER_STATUS_MAP: Record<string, ApproverStatusConfig> = {
   ATRZ_PRGRS_001: { label: "대기", badgeClass: "bg-gray-100 text-gray-700" },
-  ATRZ_PRGRS_002: { label: "요청", badgeClass: "bg-yellow-100 text-yellow-800" },
-  ATRZ_PRGRS_003: { label: "승인", badgeClass: "bg-green-100 text-green-800" },
-  ATRZ_PRGRS_004: { label: "반려", badgeClass: "bg-red-100 text-red-800" },
+  ATRZ_PRGRS_002: { label: "요청", badgeClass: "bg-yellow-100 text-yellow-700" },
+  ATRZ_PRGRS_003: { label: "승인", badgeClass: "bg-green-100 text-green-700" },
+  ATRZ_PRGRS_004: { label: "반려", badgeClass: "bg-red-100 text-red-700" },
+  ATRZ_PRGRS_999: { label: "결재안함", badgeClass: "bg-blue-100 text-blue-700" },
 };
 
 export function sortByAtrzSeqNo(
diff --git a/apps/as/src/entities/elapr/lib/prgrs-stts-save-utils.ts b/apps/as/src/entities/elapr/lib/prgrs-stts-save-utils.ts
index db6ee3e5c..6ea409344 100644
--- a/apps/as/src/entities/elapr/lib/prgrs-stts-save-utils.ts
+++ b/apps/as/src/entities/elapr/lib/prgrs-stts-save-utils.ts
@@ -4,6 +4,7 @@ import {
 } from "../model/elapr-prgrs-stts-interface";
 
 export const PRGRS_STTS_WAITING_CD = "ATRZ_PRGRS_001";
+export const PRGRS_STTS_APPROVED_CD = "ATRZ_PRGRS_003";
 
 /** 서버 행 비교용 최소 필드 */
 export interface PrgrsSttsServerRow {
@@ -11,6 +12,7 @@ export interface PrgrsSttsServerRow {
   aprvrUuid?: string;
   atrzSeComCd?: string;
   atrzSeqNo?: number;
+  dcarbYn?: string;
 }
 
 /** 결재선 그리드 로컬 행 — 진행상태 API 응답 + UI 보조 필드 */
@@ -29,6 +31,7 @@ export interface ElaprPrgrsSttsRow {
   ognzNm?: string;
   jbpsSeNm?: string;
   jbgdSeNm?: string;
+  dcarbYn?: string;
   isNew?: boolean;
   isDirty?: boolean;
   /** 소프트 삭제 — 최종 저장 시 mode:D */
@@ -41,6 +44,10 @@ export function isPrgrsSttsRowEditable(row: ElaprPrgrsSttsRow): boolean {
   return row.isNew === true || row.atrzPrgrsSttsComCd === PRGRS_STTS_WAITING_CD;
 }
 
+export function isPrgrsSttsRowDcarbable(row: ElaprPrgrsSttsRow): boolean {
+  return row.atrzPrgrsSttsComCd !== PRGRS_STTS_APPROVED_CD;
+}
+
 function getVisibleRows(rows: ElaprPrgrsSttsRow[]): ElaprPrgrsSttsRow[] {
   return rows.filter((row) => !row.isDeleted);
 }
@@ -85,7 +92,8 @@ function rowDiffersFromServer(row: ElaprPrgrsSttsRow, serverRow: PrgrsSttsServer
   return (
     row.aprvrUuid !== serverRow.aprvrUuid ||
     row.atrzSeComCd !== serverRow.atrzSeComCd ||
-    row.atrzSeqNo !== serverRow.atrzSeqNo
+    row.atrzSeqNo !== serverRow.atrzSeqNo ||
+    (row.dcarbYn ?? "N") !== (serverRow.dcarbYn ?? "N")
   );
 }
 
@@ -149,6 +157,7 @@ export function buildPrgrsSttsSavePayload(
         atrzSeComCd: row.atrzSeComCd,
         atrzSeqNo: row.atrzSeqNo,
         atrzPrgrsSttsComCd: row.atrzPrgrsSttsComCd,
+        dcarbYn: row.dcarbYn ?? "N",
       });
       continue;
     }
@@ -164,6 +173,7 @@ export function buildPrgrsSttsSavePayload(
         atrzSeComCd: row.atrzSeComCd,
         atrzSeqNo: row.atrzSeqNo,
         atrzPrgrsSttsComCd: row.atrzPrgrsSttsComCd,
+        dcarbYn: row.dcarbYn ?? "N",
       });
     }
   }
diff --git a/apps/as/src/entities/elapr/lib/use-prgrs-stts-rows.ts b/apps/as/src/entities/elapr/lib/use-prgrs-stts-rows.ts
index 40120db78..f4a884e75 100644
--- a/apps/as/src/entities/elapr/lib/use-prgrs-stts-rows.ts
+++ b/apps/as/src/entities/elapr/lib/use-prgrs-stts-rows.ts
@@ -34,6 +34,7 @@ function toRow(item: ElaprDocPrgrsClientResponseDto): ElaprPrgrsSttsRow {
     ognzNm: item.ognzNm,
     jbpsSeNm: item.jbpsSeNm,
     jbgdSeNm: item.jbgdSeNm,
+    dcarbYn: item.dcarbYn ?? "N",
     isNew: false,
     isDirty: false,
     isDeleted: false,
@@ -71,6 +72,7 @@ export function usePrgrsSttsRows({ serverRows, elaprDmndId }: UsePrgrsSttsRowsOp
         aprvrUuid: "",
         aprvrNm: "",
         atrzPrgrsSttsComCd: PRGRS_STTS_WAITING_CD,
+        dcarbYn: "N",
         isNew: true,
         isDirty: true,
         isDeleted: false,
@@ -104,6 +106,33 @@ export function usePrgrsSttsRows({ serverRows, elaprDmndId }: UsePrgrsSttsRowsOp
     [editingRowKey],
   );
 
+  const setDcarbYn = useCallback(
+    (rowKey: string, checked: boolean) => {
+      if (editingRowKey != null && editingRowKey !== rowKey) return;
+
+      setRows((prev) => {
+        const target = prev.find((r) => r.rowKey === rowKey);
+        if (!target || target.isDeleted) return prev;
+
+        const nextYn = checked ? "Y" : "N";
+
+        return prev.map((row) => {
+          if (row.isDeleted) return row;
+
+          if (row.rowKey === rowKey) {
+            if ((row.dcarbYn ?? "N") === nextYn) return row;
+            return { ...row, dcarbYn: nextYn, isDirty: true };
+          }
+
+          if (!checked) return row;
+          if ((row.dcarbYn ?? "N") === "N") return row;
+          return { ...row, dcarbYn: "N", isDirty: true };
+        });
+      });
+    },
+    [editingRowKey],
+  );
+
   const cancelEdit = useCallback(() => {
     if (!editingRowKey) return;
 
@@ -202,6 +231,7 @@ export function usePrgrsSttsRows({ serverRows, elaprDmndId }: UsePrgrsSttsRowsOp
     addRow,
     startEdit,
     updateRow,
+    setDcarbYn,
     cancelEdit,
     commitEdit,
     markDeleted,
diff --git a/apps/as/src/entities/elapr/model/elapr-prgrs-stts-interface.ts b/apps/as/src/entities/elapr/model/elapr-prgrs-stts-interface.ts
index 46dad56ec..7c24ff8eb 100644
--- a/apps/as/src/entities/elapr/model/elapr-prgrs-stts-interface.ts
+++ b/apps/as/src/entities/elapr/model/elapr-prgrs-stts-interface.ts
@@ -22,6 +22,7 @@ export interface ElaprPrgrsSttsResponseDto {
   atrzPrgrsSttsComNm?: string;
   rjctRsn?: string;
   atrzDt?: string;
+  dcarbYn?: string;
 }
 
 /** 백엔드 ElaprPrgrsSttsSaveRequestDto */
@@ -33,6 +34,7 @@ export interface ElaprPrgrsSttsSaveRequestDto {
   atrzSeComCd?: string;
   atrzSeqNo?: number;
   atrzPrgrsSttsComCd?: string;
+  dcarbYn?: string;
 }
 
 /** 백엔드 ElaprPrgrsSttsSearchDto */
diff --git a/apps/as/src/pages/instl-sncn/ui/components/elapr-approval-dialog.tsx b/apps/as/src/entities/elapr/ui/elapr-approval-dialog.tsx
similarity index 89%
rename from apps/as/src/pages/instl-sncn/ui/components/elapr-approval-dialog.tsx
rename to apps/as/src/entities/elapr/ui/elapr-approval-dialog.tsx
index 53b6337c8..c4cb3956d 100644
--- a/apps/as/src/pages/instl-sncn/ui/components/elapr-approval-dialog.tsx
+++ b/apps/as/src/entities/elapr/ui/elapr-approval-dialog.tsx
@@ -9,31 +9,13 @@ import { AxiosError } from "axios";
 
 import { ENDPOINT } from "@/shared/config";
 import { useAlertStore } from "@/shared/lib";
-import {
-  AprvrPickerDialog,
-  buildPrgrsSttsSavePayload,
-  elaprPrgrsSttsService,
-  findCurrentUserPendingApprovalRequest,
-  hasUnsavedPrgrsSttsChanges,
-  isPrgrsSttsRowEditable,
-  type ReviewerOption,
-  useDndSensors,
-  useElaprDocPrgrsByDocNo,
-  usePrgrsSttsRows,
-  useSaveElaprPrgrsStts,
-  validateAllPrgrsSttsRows,
-  validateAtrzOrder,
-  validatePrgrsSttsRow,
-} from "@/entities/elapr";
 import {
   Button,
-  Checkbox,
   Dialog,
   DialogContent,
   DialogFooter,
   DialogHeader,
   DialogTitle,
-  Label,
   Skeleton,
   Table,
   TableBody,
@@ -43,6 +25,22 @@ import {
   Textarea,
 } from "@common/components";
 
+import { elaprPrgrsSttsService } from "../api/elapr-prgrs-stts-service";
+import { useElaprDocPrgrsByDocNo, useSaveElaprPrgrsStts } from "../api/queries";
+import { validateAtrzOrder } from "../lib/apln-validators";
+import { findCurrentUserPendingApprovalRequest } from "../lib/approval-request-utils";
+import {
+  buildPrgrsSttsSavePayload,
+  hasUnsavedPrgrsSttsChanges,
+  isPrgrsSttsRowEditable,
+  validateAllPrgrsSttsRows,
+  validatePrgrsSttsRow,
+} from "../lib/prgrs-stts-save-utils";
+import { useDndSensors } from "../lib/use-dnd-sensors";
+import { usePrgrsSttsRows } from "../lib/use-prgrs-stts-rows";
+import type { ReviewerOption } from "../model/reviewer-option";
+
+import { AprvrPickerDialog } from "./aprvr-picker-dialog";
 import { SortablePrgrsSttsRow } from "./sortable-prgrs-stts-row";
 
 interface ElaprApprovalDialogProps {
@@ -68,7 +66,6 @@ function ElaprApprovalDialog({
   const [isProcessing, setIsProcessing] = useState(false);
   const [pickerOpen, setPickerOpen] = useState(false);
   const [pickingRowKey, setPickingRowKey] = useState<string | null>(null);
-  const [finalApprovalYn, setFinalApprovalYn] = useState(false);
 
   const { data: elaprDocPrgrsList, isLoading } = useElaprDocPrgrsByDocNo(open ? elaprDocNo : null);
 
@@ -82,6 +79,7 @@ function ElaprApprovalDialog({
     addRow,
     startEdit,
     updateRow,
+    setDcarbYn,
     cancelEdit,
     commitEdit,
     markDeleted,
@@ -199,7 +197,6 @@ function ElaprApprovalDialog({
     try {
       await elaprPrgrsSttsService.process(currentUserPrgrs.elaprPrgrsId, {
         atrzPrgrsSttsComCd: "ATRZ_PRGRS_003",
-        finalApprovalYn,
       });
       alert("결재가 완료되었습니다.");
       queryClient.invalidateQueries({
@@ -312,12 +309,13 @@ function ElaprApprovalDialog({
               >
                 <Table className="w-full">
                   <colgroup>
+                    <col width="8%" />
                     <col width="8%" />
                     <col width="10%" />
-                    <col width="15%" />
-                    <col width="35%" />
-                    <col width="12%" />
-                    <col width="20%" />
+                    <col width="30%" />
+                    <col width="10%" />
+                    <col width="10%" />
+                    <col width="24%" />
                   </colgroup>
                   <TableHeader>
                     <TableRow>
@@ -325,6 +323,7 @@ function ElaprApprovalDialog({
                       <TableHead>결재순서</TableHead>
                       <TableHead>결재구분</TableHead>
                       <TableHead>결재자</TableHead>
+                      <TableHead>전결자 지정</TableHead>
                       <TableHead>결재상태</TableHead>
                       <TableHead>관리</TableHead>
                     </TableRow>
@@ -353,6 +352,7 @@ function ElaprApprovalDialog({
                             setPickingRowKey(row.rowKey);
                             setPickerOpen(true);
                           }}
+                          onToggleDcarb={(checked) => setDcarbYn(row.rowKey, checked)}
                         />
                       ))}
                     </SortableContext>
@@ -383,16 +383,6 @@ function ElaprApprovalDialog({
             </Button>
             {canApprove && (
               <div className="flex items-center gap-2">
-                <div className="mr-2 flex items-center gap-2">
-                  <Checkbox
-                    id="all-approve"
-                    checked={finalApprovalYn}
-                    onCheckedChange={(checked) => setFinalApprovalYn(checked === true)}
-                  />
-                  <Label htmlFor="all-approve" className="text-xl">
-                    전결
-                  </Label>
-                </div>
                 <Button onClick={handleApprove} disabled={isBusy}>
                   결재
                 </Button>
diff --git a/apps/as/src/entities/elapr/ui/elapr-doc-prgrs-status.tsx b/apps/as/src/entities/elapr/ui/elapr-doc-prgrs-status.tsx
new file mode 100644
index 000000000..731e39a07
--- /dev/null
+++ b/apps/as/src/entities/elapr/ui/elapr-doc-prgrs-status.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { Fragment } from "react";
+
+import { ChevronRight } from "lucide-react";
+
+import type { ElaprDocPrgrsClientResponseDto } from "@/shared/model";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
+import { cn, Skeleton } from "@common/components";
+
+import { useElaprDocPrgrsByDocNo } from "../api/queries";
+import { getApproverStatus, sortByAtrzSeqNo } from "../lib/approval-utils";
+
+const REJECT_STATUS_CD = "ATRZ_PRGRS_004";
+
+interface ElaprDocPrgrsStatusProps {
+  elaprDocNo: string | null | undefined;
+}
+
+function ElaprDocPrgrsStep({ item }: { item: ElaprDocPrgrsClientResponseDto }) {
+  const status = getApproverStatus(item.atrzPrgrsSttsComCd);
+  const isRejected = item.atrzPrgrsSttsComCd === REJECT_STATUS_CD;
+  const rjctRsn = item.rjctRsn?.trim();
+  const metaParts = [item.ognzNm, item.jbpsSeNm].filter(Boolean);
+
+  const statusBadge = (
+    <span
+      className={cn(
+        "inline-flex items-center rounded-sm px-2 py-1 text-lg font-medium",
+        status.badgeClass,
+        isRejected && rjctRsn && "cursor-help underline decoration-dotted underline-offset-4",
+      )}
+    >
+      {status.label}
+    </span>
+  );
+
+  return (
+    <div className="flex min-w-[12rem] flex-1 flex-col items-center gap-3 p-4 text-center">
+      {isRejected && rjctRsn ? (
+        <Tooltip>
+          <TooltipTrigger asChild>{statusBadge}</TooltipTrigger>
+          <TooltipContent sideOffset={4} className="max-w-md whitespace-pre-wrap">
+            {rjctRsn}
+          </TooltipContent>
+        </Tooltip>
+      ) : (
+        statusBadge
+      )}
+      <div className="flex flex-col items-center gap-1">
+        <div className="flex items-center gap-2">
+          <span className="text-xl text-muted-foreground">[{item.atrzSeComNm || "-"}]</span>
+          <span className="text-xl font-semibold">{item.aprvrNm || item.aprvrUuid || "-"}</span>
+        </div>
+        {metaParts.length > 0 && (
+          <span className="text-base text-gray-500">{metaParts.join(" · ")}</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ElaprDocPrgrsStatus({ elaprDocNo }: ElaprDocPrgrsStatusProps) {
+  const { data, isLoading } = useElaprDocPrgrsByDocNo(elaprDocNo);
+  const steps = sortByAtrzSeqNo(data ?? []);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center gap-3 px-4 py-6">
+        <Skeleton className="h-24 flex-1 rounded-sm" />
+        <Skeleton className="h-24 flex-1 rounded-sm" />
+        <Skeleton className="h-24 flex-1 rounded-sm" />
+      </div>
+    );
+  }
+
+  if (steps.length === 0) {
+    return <div className="py-8 text-center text-xl text-gray-500">결재 정보가 없습니다.</div>;
+  }
+
+  return (
+    <div className="flex flex-wrap items-stretch justify-start gap-4 overflow-x-auto">
+      {steps.map((item, index) => (
+        <Fragment key={item.elaprPrgrsId ?? `${item.atrzSeqNo}-${item.aprvrUuid ?? index}`}>
+          <div className="flex items-center">
+            {index > 0 && <ChevronRight className="size-8 text-muted-foreground" />}
+          </div>
+          <ElaprDocPrgrsStep item={item} />
+        </Fragment>
+      ))}
+    </div>
+  );
+}
+
+export { ElaprDocPrgrsStatus };
diff --git a/apps/as/src/pages/instl-sncn/ui/components/sortable-prgrs-stts-row.tsx b/apps/as/src/entities/elapr/ui/sortable-prgrs-stts-row.tsx
similarity index 87%
rename from apps/as/src/pages/instl-sncn/ui/components/sortable-prgrs-stts-row.tsx
rename to apps/as/src/entities/elapr/ui/sortable-prgrs-stts-row.tsx
index b002f558d..601d272f2 100644
--- a/apps/as/src/pages/instl-sncn/ui/components/sortable-prgrs-stts-row.tsx
+++ b/apps/as/src/entities/elapr/ui/sortable-prgrs-stts-row.tsx
@@ -6,9 +6,9 @@ import { MoveVertical } from "lucide-react";
 
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
 import { findCodeLabel, useCodeList } from "@/entities/code";
-import { type ElaprPrgrsSttsRow, isPrgrsSttsRowEditable } from "@/entities/elapr";
 import {
   Button,
+  Checkbox,
   cn,
   Select,
   SelectContent,
@@ -19,7 +19,12 @@ import {
   TableRow,
 } from "@common/components";
 
-import { getApproverStatus } from "../../lib/approval-utils";
+import { getApproverStatus } from "../lib/approval-utils";
+import {
+  type ElaprPrgrsSttsRow,
+  isPrgrsSttsRowDcarbable,
+  isPrgrsSttsRowEditable,
+} from "../lib/prgrs-stts-save-utils";
 
 interface SortablePrgrsSttsRowProps {
   row: ElaprPrgrsSttsRow;
@@ -33,6 +38,7 @@ interface SortablePrgrsSttsRowProps {
   onDelete: () => void;
   onChange: (patch: Partial<ElaprPrgrsSttsRow>) => void;
   onPickAprvr: () => void;
+  onToggleDcarb: (checked: boolean) => void;
 }
 
 function SortablePrgrsSttsRow({
@@ -47,6 +53,7 @@ function SortablePrgrsSttsRow({
   onDelete,
   onChange,
   onPickAprvr,
+  onToggleDcarb,
 }: SortablePrgrsSttsRowProps) {
   const { data: atrzSeCodes } = useCodeList("ATRZSE");
   const selectableAtrzSeCodes = atrzSeCodes?.filter((code) => code.lwpoCd !== "ATRZ01");
@@ -63,6 +70,7 @@ function SortablePrgrsSttsRow({
   };
 
   const isEditable = isPrgrsSttsRowEditable(row);
+  const isDcarbable = isPrgrsSttsRowDcarbable(row);
   const rowDisabled = isLocked && !isEditing;
   const atrzSeLabel = row.atrzSeComNm || findCodeLabel(atrzSeCodes, row.atrzSeComCd);
   const status = getApproverStatus(row.atrzPrgrsSttsComCd);
@@ -139,6 +147,15 @@ function SortablePrgrsSttsRow({
           )}
         </div>
       </TableCell>
+      <TableCell align="center">
+        {isDcarbable && !rowDisabled && (
+          <Checkbox
+            checked={row.dcarbYn === "Y"}
+            onCheckedChange={(checked) => onToggleDcarb(checked === true)}
+            aria-label="전결자 지정"
+          />
+        )}
+      </TableCell>
       <TableCell align="center">
         {isRejectedRow && rjctRsn ? (
           <Tooltip>
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-approval-dialog.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-approval-dialog.tsx
deleted file mode 100644
index 53b6337c8..000000000
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/elapr-approval-dialog.tsx
+++ /dev/null
@@ -1,418 +0,0 @@
-"use client";
-
-import { useState } from "react";
-
-import { closestCenter, DndContext, type DragEndEvent } from "@dnd-kit/core";
-import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { useQueryClient } from "@tanstack/react-query";
-import { AxiosError } from "axios";
-
-import { ENDPOINT } from "@/shared/config";
-import { useAlertStore } from "@/shared/lib";
-import {
-  AprvrPickerDialog,
-  buildPrgrsSttsSavePayload,
-  elaprPrgrsSttsService,
-  findCurrentUserPendingApprovalRequest,
-  hasUnsavedPrgrsSttsChanges,
-  isPrgrsSttsRowEditable,
-  type ReviewerOption,
-  useDndSensors,
-  useElaprDocPrgrsByDocNo,
-  usePrgrsSttsRows,
-  useSaveElaprPrgrsStts,
-  validateAllPrgrsSttsRows,
-  validateAtrzOrder,
-  validatePrgrsSttsRow,
-} from "@/entities/elapr";
-import {
-  Button,
-  Checkbox,
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Label,
-  Skeleton,
-  Table,
-  TableBody,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Textarea,
-} from "@common/components";
-
-import { SortablePrgrsSttsRow } from "./sortable-prgrs-stts-row";
-
-interface ElaprApprovalDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  elaprDocNo: string;
-  currentUserUuid: string;
-  onSuccess: () => void;
-}
-
-const UNSAVED_PRGRS_STTS_MESSAGE = "결재선 변경 이력이 있습니다.\n결재선 저장을 해 주세요.";
-
-function ElaprApprovalDialog({
-  open,
-  onOpenChange,
-  elaprDocNo,
-  currentUserUuid,
-  onSuccess,
-}: ElaprApprovalDialogProps) {
-  const queryClient = useQueryClient();
-  const alert = useAlertStore((state) => state.setMessage);
-  const [rjctRsn, setRjctRsn] = useState("");
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [pickerOpen, setPickerOpen] = useState(false);
-  const [pickingRowKey, setPickingRowKey] = useState<string | null>(null);
-  const [finalApprovalYn, setFinalApprovalYn] = useState(false);
-
-  const { data: elaprDocPrgrsList, isLoading } = useElaprDocPrgrsByDocNo(open ? elaprDocNo : null);
-
-  const elaprDmndId = elaprDocPrgrsList?.[0]?.elaprDmndId;
-
-  const {
-    rows,
-    visibleRows,
-    editingRowKey,
-    isEditingLocked,
-    addRow,
-    startEdit,
-    updateRow,
-    cancelEdit,
-    commitEdit,
-    markDeleted,
-    reorderRows,
-  } = usePrgrsSttsRows({
-    serverRows: elaprDocPrgrsList,
-    elaprDmndId,
-  });
-
-  const savePrgrsSttsMutation = useSaveElaprPrgrsStts();
-  const sensors = useDndSensors();
-
-  const currentUserPrgrs = findCurrentUserPendingApprovalRequest(
-    elaprDocPrgrsList,
-    currentUserUuid,
-  );
-  const canApprove = Boolean(currentUserPrgrs?.elaprPrgrsId);
-
-  const pickingRow = pickingRowKey ? rows.find((r) => r.rowKey === pickingRowKey) : undefined;
-  const isBusy = isProcessing || savePrgrsSttsMutation.isPending;
-  const isPrgrsSttsUnsaved = hasUnsavedPrgrsSttsChanges(rows, elaprDocPrgrsList ?? []);
-
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event;
-    if (!over || active.id === over.id) return;
-
-    reorderRows(String(active.id), String(over.id));
-  }
-
-  function handleRowSave(rowKey: string) {
-    const row = rows.find((r) => r.rowKey === rowKey);
-    if (!row) return;
-
-    const fieldError = validatePrgrsSttsRow(row);
-    if (fieldError) {
-      alert(fieldError);
-      return;
-    }
-
-    commitEdit(rowKey);
-  }
-
-  function handleReviewerSelect(reviewer: ReviewerOption) {
-    if (!pickingRowKey) return;
-    updateRow(pickingRowKey, {
-      aprvrUuid: reviewer.uuid,
-      aprvrNm: reviewer.name,
-      ognzNm: reviewer.deptNm,
-    });
-    setPickingRowKey(null);
-  }
-
-  function assertPrgrsSttsSaved(): boolean {
-    if (isEditingLocked) {
-      alert(UNSAVED_PRGRS_STTS_MESSAGE);
-      return false;
-    }
-
-    if (isPrgrsSttsUnsaved) {
-      alert(UNSAVED_PRGRS_STTS_MESSAGE);
-      return false;
-    }
-
-    return true;
-  }
-
-  async function handleSavePrgrsStts() {
-    if (!elaprDmndId) {
-      alert("결재 요청 정보가 없습니다.");
-      return;
-    }
-
-    const validationError = validateAllPrgrsSttsRows(rows, isEditingLocked);
-    if (validationError) {
-      alert(validationError);
-      return;
-    }
-
-    const orderError = validateAtrzOrder(rows);
-    if (orderError) {
-      alert(orderError);
-      return;
-    }
-
-    const payload = buildPrgrsSttsSavePayload(rows, elaprDmndId, elaprDocPrgrsList ?? []);
-    if (payload.length === 0) {
-      alert("변경된 결재선이 없습니다.");
-      return;
-    }
-
-    setIsProcessing(true);
-    try {
-      await savePrgrsSttsMutation.mutateAsync(payload);
-      alert("결재선이 저장되었습니다.");
-      await queryClient.invalidateQueries({
-        queryKey: [ENDPOINT.AS_ELAPR_SERVICE.ELAPR_DMND, "findDocPrgrsByDocNo", elaprDocNo],
-      });
-      onSuccess();
-    } catch (error: unknown) {
-      let errorMessage = "결재선 저장 중 오류가 발생했습니다.";
-      if (error instanceof AxiosError) {
-        errorMessage = error.response?.data?.message ?? errorMessage;
-      }
-      alert(errorMessage);
-    } finally {
-      setIsProcessing(false);
-    }
-  }
-
-  async function handleApprove() {
-    if (!currentUserPrgrs?.elaprPrgrsId) return;
-    if (!assertPrgrsSttsSaved()) return;
-
-    setIsProcessing(true);
-    try {
-      await elaprPrgrsSttsService.process(currentUserPrgrs.elaprPrgrsId, {
-        atrzPrgrsSttsComCd: "ATRZ_PRGRS_003",
-        finalApprovalYn,
-      });
-      alert("결재가 완료되었습니다.");
-      queryClient.invalidateQueries({
-        queryKey: [ENDPOINT.AS_ELAPR_SERVICE.ELAPR_DMND, "findDocPrgrsByDocNo", elaprDocNo],
-      });
-      onSuccess();
-      onOpenChange(false);
-    } catch (error: unknown) {
-      let errorMessage = "";
-      if (error instanceof AxiosError) {
-        errorMessage = error.response?.data?.message ?? "";
-      } else {
-        errorMessage = "결재 처리 중 오류가 발생했습니다.";
-      }
-      alert(errorMessage);
-    } finally {
-      setIsProcessing(false);
-    }
-  }
-
-  async function handleReject() {
-    if (!currentUserPrgrs?.elaprPrgrsId) return;
-    if (!rjctRsn.trim()) {
-      alert("반려 사유를 입력해주세요.");
-      return;
-    }
-    if (!assertPrgrsSttsSaved()) return;
-
-    setIsProcessing(true);
-    try {
-      await elaprPrgrsSttsService.process(currentUserPrgrs.elaprPrgrsId, {
-        atrzPrgrsSttsComCd: "ATRZ_PRGRS_004",
-        rjctRsn: rjctRsn.trim(),
-      });
-      alert("반려 처리가 완료되었습니다.");
-      queryClient.invalidateQueries({
-        queryKey: [ENDPOINT.AS_ELAPR_SERVICE.ELAPR_DMND, "findDocPrgrsByDocNo", elaprDocNo],
-      });
-      onSuccess();
-      onOpenChange(false);
-    } catch (error: unknown) {
-      let errorMessage = "";
-      if (error instanceof AxiosError) {
-        errorMessage = error.response?.data?.message ?? "";
-      } else {
-        errorMessage = "반려 처리 중 오류가 발생했습니다.";
-      }
-      alert(errorMessage);
-    } finally {
-      setIsProcessing(false);
-    }
-  }
-
-  function handleClose() {
-    setRjctRsn("");
-    setPickingRowKey(null);
-    onOpenChange(false);
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="max-w-[72rem]" aria-describedby={undefined}>
-        <DialogHeader>
-          <DialogTitle>전자결재</DialogTitle>
-        </DialogHeader>
-
-        <div className="space-y-6">
-          <div>
-            <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
-              <h4 className="text-xl font-semibold">결재 진행 단계</h4>
-              <div className="flex items-center gap-2">
-                <Button
-                  size="sm"
-                  type="button"
-                  color="white"
-                  disabled={!elaprDmndId || isEditingLocked || isBusy}
-                  onClick={addRow}
-                >
-                  결재선 추가
-                </Button>
-                {elaprDmndId && (
-                  <Button
-                    size="sm"
-                    type="button"
-                    onClick={handleSavePrgrsStts}
-                    disabled={!isPrgrsSttsUnsaved || isEditingLocked || isBusy}
-                  >
-                    결재선 저장
-                  </Button>
-                )}
-              </div>
-            </div>
-
-            {isLoading ? (
-              <div className="space-y-3">
-                <Skeleton className="h-12 w-full" />
-                <Skeleton className="h-32 w-full" />
-              </div>
-            ) : visibleRows.length === 0 ? (
-              <div className="py-8 text-center text-gray-500">
-                {elaprDmndId
-                  ? "등록된 결재선이 없습니다. [결재선 추가]로 결재자를 등록하세요."
-                  : "결재 정보가 없습니다."}
-              </div>
-            ) : (
-              <DndContext
-                sensors={sensors}
-                collisionDetection={closestCenter}
-                onDragEnd={handleDragEnd}
-              >
-                <Table className="w-full">
-                  <colgroup>
-                    <col width="8%" />
-                    <col width="10%" />
-                    <col width="15%" />
-                    <col width="35%" />
-                    <col width="12%" />
-                    <col width="20%" />
-                  </colgroup>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead className="w-10" />
-                      <TableHead>결재순서</TableHead>
-                      <TableHead>결재구분</TableHead>
-                      <TableHead>결재자</TableHead>
-                      <TableHead>결재상태</TableHead>
-                      <TableHead>관리</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    <SortableContext
-                      items={visibleRows.map((r) => r.rowKey)}
-                      strategy={verticalListSortingStrategy}
-                    >
-                      {visibleRows.map((row, index) => (
-                        <SortablePrgrsSttsRow
-                          key={row.rowKey}
-                          row={row}
-                          displaySeqNo={index + 1}
-                          isEditing={editingRowKey === row.rowKey}
-                          isLocked={isEditingLocked}
-                          dragDisabled={
-                            isEditingLocked || !isPrgrsSttsRowEditable(row) || !row.atrzSeComCd
-                          }
-                          onStartEdit={() => startEdit(row.rowKey)}
-                          onSave={() => handleRowSave(row.rowKey)}
-                          onCancel={cancelEdit}
-                          onDelete={() => markDeleted(row.rowKey)}
-                          onChange={(patch) => updateRow(row.rowKey, patch)}
-                          onPickAprvr={() => {
-                            setPickingRowKey(row.rowKey);
-                            setPickerOpen(true);
-                          }}
-                        />
-                      ))}
-                    </SortableContext>
-                  </TableBody>
-                </Table>
-              </DndContext>
-            )}
-          </div>
-
-          {canApprove && (
-            <div>
-              <h4 className="mb-3 text-xl font-semibold">반려 의견</h4>
-              <Textarea
-                value={rjctRsn}
-                onChange={(event) => setRjctRsn(event.target.value)}
-                placeholder="반려 시 사유를 입력하세요"
-                rows={4}
-                className="!text-xl"
-              />
-            </div>
-          )}
-        </div>
-
-        <DialogFooter>
-          <div className="flex w-full items-center justify-between">
-            <Button type="button" color="white" onClick={handleClose} disabled={isBusy}>
-              취소
-            </Button>
-            {canApprove && (
-              <div className="flex items-center gap-2">
-                <div className="mr-2 flex items-center gap-2">
-                  <Checkbox
-                    id="all-approve"
-                    checked={finalApprovalYn}
-                    onCheckedChange={(checked) => setFinalApprovalYn(checked === true)}
-                  />
-                  <Label htmlFor="all-approve" className="text-xl">
-                    전결
-                  </Label>
-                </div>
-                <Button onClick={handleApprove} disabled={isBusy}>
-                  결재
-                </Button>
-                <Button color="red" onClick={handleReject} disabled={isBusy}>
-                  반려
-                </Button>
-              </div>
-            )}
-          </div>
-        </DialogFooter>
-      </DialogContent>
-
-      <AprvrPickerDialog
-        open={pickerOpen}
-        onOpenChange={setPickerOpen}
-        atrzSeComCd={pickingRow?.atrzSeComCd ?? ""}
-        onSelect={handleReviewerSelect}
-      />
-    </Dialog>
-  );
-}
-
-export { ElaprApprovalDialog };
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx
index 6dc25c16c..47c222dfc 100644
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx
+++ b/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx
@@ -11,6 +11,7 @@ import { ENDPOINT } from "@/shared/config";
 import { useAlertStore, useUserStore } from "@/shared/lib";
 import {
   buildElaprPrgrsSttsListFromAplnRows,
+  ElaprApprovalDialog,
   type ElaprDmndSaveRequestDto,
   elaprDmndService,
   type ElaprTmpltPickerConfirmPayload,
@@ -45,8 +46,6 @@ import {
 import { type ChecklistFormState } from "../../model/view-types";
 import type { TechReviewOpinionSectionHandle } from "../sections/tech-review-opinion-section";
 
-import { ElaprApprovalDialog } from "./elapr-approval-dialog";
-
 interface FloatingActionButtonsProps {
   data: FnrsCnsltnMngDetResponseDto;
   docSeComCd: string;
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/components/sortable-prgrs-stts-row.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/components/sortable-prgrs-stts-row.tsx
deleted file mode 100644
index 795c9d08d..000000000
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/sortable-prgrs-stts-row.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-"use client";
-
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { MoveVertical } from "lucide-react";
-
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
-import { CodeSelect, findCodeLabel, useCodeList } from "@/entities/code";
-import { type ElaprPrgrsSttsRow, isPrgrsSttsRowEditable } from "@/entities/elapr";
-import { Button, cn, TableCell, TableRow } from "@common/components";
-
-import { getApproverStatus } from "../../lib/approval-utils";
-
-interface SortablePrgrsSttsRowProps {
-  row: ElaprPrgrsSttsRow;
-  displaySeqNo: number;
-  isEditing: boolean;
-  isLocked: boolean;
-  dragDisabled: boolean;
-  onStartEdit: () => void;
-  onSave: () => void;
-  onCancel: () => void;
-  onDelete: () => void;
-  onChange: (patch: Partial<ElaprPrgrsSttsRow>) => void;
-  onPickAprvr: () => void;
-}
-
-function SortablePrgrsSttsRow({
-  row,
-  displaySeqNo,
-  isEditing,
-  isLocked,
-  dragDisabled,
-  onStartEdit,
-  onSave,
-  onCancel,
-  onDelete,
-  onChange,
-  onPickAprvr,
-}: SortablePrgrsSttsRowProps) {
-  const { data: atrzSeCodes } = useCodeList("ATRZSE");
-
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: row.rowKey,
-    disabled: dragDisabled,
-  });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.6 : 1,
-  };
-
-  const isEditable = isPrgrsSttsRowEditable(row);
-  const rowDisabled = isLocked && !isEditing;
-  const atrzSeLabel = row.atrzSeComNm || findCodeLabel(atrzSeCodes, row.atrzSeComCd);
-  const status = getApproverStatus(row.atrzPrgrsSttsComCd);
-  const isRejectedRow = row.atrzPrgrsSttsComCd === "ATRZ_PRGRS_004";
-  const rjctRsn = row.rjctRsn?.trim();
-
-  const statusBadge = (
-    <span
-      className={cn(
-        "inline-flex items-center rounded-sm px-3 py-1.5 text-lg font-semibold",
-        status.badgeClass,
-        isRejectedRow && rjctRsn && "cursor-help underline decoration-dotted underline-offset-4",
-      )}
-    >
-      {status.label}
-    </span>
-  );
-
-  return (
-    <TableRow ref={setNodeRef} style={style} className={isEditing ? "bg-accent/30" : undefined}>
-      <TableCell align="center" className="w-10">
-        {!dragDisabled && (
-          <Button
-            type="button"
-            size="icon"
-            className="cursor-grab !bg-transparent text-muted-foreground disabled:cursor-not-allowed disabled:opacity-40"
-            {...attributes}
-            {...listeners}
-            aria-label="순서 변경"
-          >
-            <MoveVertical className="!size-6" />
-          </Button>
-        )}
-      </TableCell>
-      <TableCell align="center">{displaySeqNo}</TableCell>
-      <TableCell align="center">
-        {isEditing ? (
-          <CodeSelect
-            upCd="ATRZSE"
-            className="min-w-[120px]"
-            value={row.atrzSeComCd ?? ""}
-            onValueChange={(v) =>
-              onChange({
-                atrzSeComCd: v,
-                atrzSeComNm: findCodeLabel(atrzSeCodes, v),
-              })
-            }
-            placeholder="결재구분"
-          />
-        ) : (
-          atrzSeLabel || "-"
-        )}
-      </TableCell>
-      <TableCell align="center">
-        <div className="flex flex-col items-center gap-1">
-          <div className="flex items-center justify-center gap-2">
-            <span>{row.aprvrNm || row.aprvrUuid || "-"}</span>
-            {isEditing && (
-              <Button type="button" size="sm" onClick={onPickAprvr}>
-                선택
-              </Button>
-            )}
-          </div>
-          {!isEditing && (row.ognzNm || row.jbpsSeNm || row.jbgdSeNm) && (
-            <div className="text-base text-gray-500">
-              {row.ognzNm ?? ""}
-              {row.jbpsSeNm ? ` · ${row.jbpsSeNm}` : ""}
-            </div>
-          )}
-        </div>
-      </TableCell>
-      <TableCell align="center">
-        {isRejectedRow && rjctRsn ? (
-          <Tooltip>
-            <TooltipTrigger asChild>{statusBadge}</TooltipTrigger>
-            <TooltipContent sideOffset={4} className="max-w-md whitespace-pre-wrap">
-              {rjctRsn}
-            </TooltipContent>
-          </Tooltip>
-        ) : (
-          statusBadge
-        )}
-      </TableCell>
-      <TableCell align="center">
-        <div className="flex justify-center gap-2">
-          {isEditing ? (
-            <>
-              <Button type="button" size="sm" onClick={onSave}>
-                확인
-              </Button>
-              <Button type="button" size="sm" color="white" onClick={onCancel}>
-                취소
-              </Button>
-            </>
-          ) : isEditable ? (
-            <>
-              <Button
-                type="button"
-                size="sm"
-                color="white"
-                disabled={rowDisabled}
-                onClick={onStartEdit}
-              >
-                수정
-              </Button>
-              <Button
-                type="button"
-                size="sm"
-                color="gray"
-                disabled={rowDisabled}
-                onClick={onDelete}
-              >
-                삭제
-              </Button>
-            </>
-          ) : (
-            <span className="text-sm text-muted-foreground">-</span>
-          )}
-        </div>
-      </TableCell>
-    </TableRow>
-  );
-}
-
-export { SortablePrgrsSttsRow };
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-view-page.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-view-page.tsx
index 3e955ee0f..d4f110f0a 100644
--- a/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-view-page.tsx
+++ b/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-view-page.tsx
@@ -3,7 +3,9 @@
 import { useRef } from "react";
 
 import { useUserStore } from "@/shared/lib";
+import { ElaprDocPrgrsStatus } from "@/entities/elapr";
 import { useFnrsCnsltnMng } from "@/entities/fnrs-cnsltn";
+import { SectionCollapsible } from "@/widgets/pbadms-sprt";
 import { Skeleton } from "@common/components";
 
 import { getEditableReviewStep } from "../lib/review-step-utils";
@@ -76,6 +78,9 @@ function FnrsViewPage({ id }: FnrsViewPageProps) {
     <div className="mt-6 space-y-4">
       <BasicInfoSection det={detDto} />
       <ContactInfoSection det={detDto} />
+      <SectionCollapsible title="결재현황">
+        <ElaprDocPrgrsStatus elaprDocNo={detDto.fnrsCnsltnDocNo} />
+      </SectionCollapsible>
       <BusinessScaleSection bizSclList={bizSclList} />
       <BusinessCostSection bizCstList={bizCstList} />
       <FnrsSharSection fnrsSharList={fnrsSharList} />
diff --git a/apps/as/src/pages/instl-sncn/lib/approval-utils.ts b/apps/as/src/pages/instl-sncn/lib/approval-utils.ts
deleted file mode 100644
index 83f22a011..000000000
--- a/apps/as/src/pages/instl-sncn/lib/approval-utils.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { ElaprDocPrgrsClientResponseDto } from "@/entities/instl-sncn";
-
-export interface ApproverStatusConfig {
-  label: string;
-  badgeClass: string;
-}
-
-export const APPROVER_STATUS_MAP: Record<string, ApproverStatusConfig> = {
-  ATRZ_PRGRS_001: { label: "대기", badgeClass: "bg-gray-100 text-gray-700" },
-  ATRZ_PRGRS_002: { label: "요청", badgeClass: "bg-yellow-100 text-yellow-800" },
-  ATRZ_PRGRS_003: { label: "승인", badgeClass: "bg-green-100 text-green-800" },
-  ATRZ_PRGRS_004: { label: "반려", badgeClass: "bg-red-100 text-red-800" },
-};
-
-export function sortByAtrzSeqNo(
-  list: ElaprDocPrgrsClientResponseDto[],
-): ElaprDocPrgrsClientResponseDto[] {
-  return list.slice().sort((a, b) => Number(a.atrzSeqNo ?? 0) - Number(b.atrzSeqNo ?? 0));
-}
-
-export function getApproverStatus(status: string | undefined): ApproverStatusConfig {
-  return (
-    APPROVER_STATUS_MAP[status ?? ""] ?? {
-      label: status || "-",
-      badgeClass: "bg-gray-100 text-gray-700",
-    }
-  );
-}
diff --git a/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx b/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx
index 90bc8018e..eaed1e8c5 100644
--- a/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx
@@ -11,6 +11,7 @@ import { ENDPOINT } from "@/shared/config";
 import { useAlertStore, useUserStore } from "@/shared/lib";
 import {
   buildElaprPrgrsSttsListFromAplnRows,
+  ElaprApprovalDialog,
   type ElaprDmndSaveRequestDto,
   elaprDmndService,
   type ElaprTmpltPickerConfirmPayload,
@@ -40,8 +41,6 @@ import { buildSavePayload, buildTechReviewReplyPayload } from "../../lib/save-pa
 import { type ChecklistFormState } from "../../model/view-types";
 import type { TechReviewOpinionSectionHandle } from "../sections/tech-review-opinion-section";
 
-import { ElaprApprovalDialog } from "./elapr-approval-dialog";
-
 interface FloatingActionButtonsProps {
   data: InstlSncnMngDetResponse;
   docSeComCd: string;
diff --git a/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx b/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx
index 7ce7142cc..e7b482c67 100644
--- a/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx
@@ -150,6 +150,7 @@ function InstlFormPage({ id, mode, initialData, taskSeComCd }: InstlFormPageProp
       setIsSubmitting(true);
       await instlSncnService.remove(docNo);
       alert("삭제되었습니다.");
+      queryClient.invalidateQueries({ queryKey: instlSncnKeys.list() });
       router.push("/instl-sncn");
     } catch (error) {
       console.error("삭제 실패:", error);
diff --git a/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx b/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx
index 12ae43453..a838c4a0c 100644
--- a/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx
@@ -3,7 +3,9 @@
 import { useRef } from "react";
 
 import { useUserStore } from "@/shared/lib";
+import { ElaprDocPrgrsStatus } from "@/entities/elapr";
 import { useInstlSncnDetail } from "@/entities/instl-sncn";
+import { SectionCollapsible } from "@/widgets/pbadms-sprt";
 import { Skeleton } from "@common/components";
 
 import { getEditableReviewStep } from "../lib/review-step-utils";
@@ -74,6 +76,9 @@ function InstlViewPage({ id }: InstlViewPageProps) {
     <div className="mt-6 space-y-4">
       <BasicInfoSection det={detDto} />
       <ContactInfoSection det={detDto} />
+      <SectionCollapsible title="결재현황">
+        <ElaprDocPrgrsStatus elaprDocNo={detDto.instlSncnDocNo} />
+      </SectionCollapsible>
       <BusinessScaleSection bizSclList={bizSclList} />
       <BusinessCostSection bizCstList={bizCstList} />
       <ChecklistSection
diff --git a/apps/as/src/shared/model/pbadms-sprt.ts b/apps/as/src/shared/model/pbadms-sprt.ts
index 141d655bb..2196ac07a 100644
--- a/apps/as/src/shared/model/pbadms-sprt.ts
+++ b/apps/as/src/shared/model/pbadms-sprt.ts
@@ -152,6 +152,7 @@ export interface ElaprDocPrgrsClientResponseDto {
   jbpsSeNm?: string;
   jbgdSeNm?: string;
   ognzNm?: string;
+  dcarbYn?: string;
 }
 
 /** 사업규모 저장 공통 필드 */

From 2eb1809f36b35deb154037cfa0dbcf14367ea452 Mon Sep 17 00:00:00 2001
From: ljpark <mind-one005@mind-one.co.kr>
Date: Wed, 15 Jul 2026 17:22:51 +0900
Subject: [PATCH 21/32] =?UTF-8?q?wr:=20=EA=B3=B5=ED=86=B5=20=EB=AA=A8?=
 =?UTF-8?q?=EB=93=88=EA=B8=B0=EB=B0=98=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/wr/.env.local                            |   4 +-
 apps/wr/app/(auth)/auth/layout.tsx            |  17 +
 apps/wr/app/(auth)/auth/login/page.tsx        |   2 +
 apps/wr/app/(with-layout)/jwttest/page.tsx    |   6 +-
 apps/wr/app/api/proxy/[...url]/route.ts       | 193 +++++------
 apps/wr/app/auth/login/page.tsx               |   2 -
 apps/wr/app/auth/login/route-bak.ts           |  12 -
 apps/wr/package.json                          |   5 +-
 apps/wr/src/auth/login/index.ts               |   1 +
 apps/wr/src/auth/login/ui/login-page.tsx      | 156 +++++++++
 apps/wr/src/auth/login/ui/login.css           | 325 +++++++++++++++++
 apps/wr/src/entities/auth/api/auth-service.ts | 109 ++++++
 .../wr/src/entities/auth/api/login-service.ts |  89 -----
 apps/wr/src/entities/auth/index.ts            |   3 +-
 .../wr/src/entities/auth/lib/auth-wrapper.tsx | 119 ++++---
 .../wr/src/entities/auth/lib/token-manager.ts | 120 +------
 apps/wr/src/entities/menu-authority/index.ts  |   7 +
 apps/wr/src/entities/menu/index.ts            |   3 +-
 apps/wr/src/shared/config/auth.ts             |  17 +
 apps/wr/src/shared/config/env.ts              |   5 +
 apps/wr/src/shared/lib/bbs-notice-menu.ts     |  12 +
 apps/wr/src/shared/lib/index.ts               |   7 +
 apps/wr/src/shared/lib/statistics-menu-url.ts |  84 +++++
 apps/wr/src/store/admin-store.ts              |  29 ++
 apps/wr/src/store/tab-store.ts                | 327 ++++++++++++++++++
 pnpm-lock.yaml                                |  27 +-
 26 files changed, 1301 insertions(+), 380 deletions(-)
 create mode 100644 apps/wr/app/(auth)/auth/layout.tsx
 create mode 100644 apps/wr/app/(auth)/auth/login/page.tsx
 delete mode 100644 apps/wr/app/auth/login/page.tsx
 delete mode 100644 apps/wr/app/auth/login/route-bak.ts
 create mode 100644 apps/wr/src/auth/login/index.ts
 create mode 100644 apps/wr/src/auth/login/ui/login-page.tsx
 create mode 100644 apps/wr/src/auth/login/ui/login.css
 create mode 100644 apps/wr/src/entities/auth/api/auth-service.ts
 delete mode 100644 apps/wr/src/entities/auth/api/login-service.ts
 create mode 100644 apps/wr/src/shared/config/auth.ts
 create mode 100644 apps/wr/src/shared/lib/bbs-notice-menu.ts
 create mode 100644 apps/wr/src/shared/lib/statistics-menu-url.ts
 create mode 100644 apps/wr/src/store/admin-store.ts
 create mode 100644 apps/wr/src/store/tab-store.ts

diff --git a/apps/wr/.env.local b/apps/wr/.env.local
index 36faf6c47..96b66b536 100644
--- a/apps/wr/.env.local
+++ b/apps/wr/.env.local
@@ -13,8 +13,8 @@ NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
 NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
 NEXT_PUBLIC_GEOSERVER_URL = https://hasudo.geo.rsonesoft.com/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
-# NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
-NEXT_PUBLIC_WR_SERVER_API_URL = http://localhost:8883/reuse-service/api/v1
+NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
+# NEXT_PUBLIC_WR_SERVER_API_URL = http://localhost:8883/reuse-service/api/v1
 NEXT_PUBLIC_SEWERAGE_API_URL = http://con.mind-one.co.kr:11083/sewerage-service   # 개발 서버 API
 # NEXT_PUBLIC_SEWERAGE_API_URL=http://localhost:8883/sewerage-service
 NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr
diff --git a/apps/wr/app/(auth)/auth/layout.tsx b/apps/wr/app/(auth)/auth/layout.tsx
new file mode 100644
index 000000000..2e676e5e0
--- /dev/null
+++ b/apps/wr/app/(auth)/auth/layout.tsx
@@ -0,0 +1,17 @@
+import "@/src/app/styles/base.css";
+
+export const metadata = {
+    title: "유역하수도 통합 정보플랫폼",
+};
+
+export default function AuthLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="ko">
+            <body>{children}</body>
+        </html>
+    );
+}
diff --git a/apps/wr/app/(auth)/auth/login/page.tsx b/apps/wr/app/(auth)/auth/login/page.tsx
new file mode 100644
index 000000000..52bab35c9
--- /dev/null
+++ b/apps/wr/app/(auth)/auth/login/page.tsx
@@ -0,0 +1,2 @@
+import { LoginPage } from "@/src/auth/login";
+export default LoginPage;
diff --git a/apps/wr/app/(with-layout)/jwttest/page.tsx b/apps/wr/app/(with-layout)/jwttest/page.tsx
index a0d9735a0..c9df447ef 100644
--- a/apps/wr/app/(with-layout)/jwttest/page.tsx
+++ b/apps/wr/app/(with-layout)/jwttest/page.tsx
@@ -6,7 +6,7 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { LoginApi } from "@/src/entities/auth/api/login-service";
+import { authService } from "@/src/entities/auth";
 import { CLAIM_NAME } from "@/src/shared/config";
 import { getCookie } from "@/src/shared/lib";
 
@@ -125,7 +125,7 @@ export default function Page() {
 
   const handleSilentRefresh = async () => {
     try {
-      await LoginApi.silentRefresh();
+      await authService.silentRefresh();
     } catch (error) {
       console.error("Manual silent refresh failed:", error);
     } finally {
@@ -145,7 +145,7 @@ export default function Page() {
       ) {
         isRefreshingRef.current = true;
         try {
-          await LoginApi.silentRefresh();
+          await authService.silentRefresh();
         } catch (error) {
           console.error("JWT test silent refresh failed:", error);
         }
diff --git a/apps/wr/app/api/proxy/[...url]/route.ts b/apps/wr/app/api/proxy/[...url]/route.ts
index 8fabc89dc..48dd3c72c 100644
--- a/apps/wr/app/api/proxy/[...url]/route.ts
+++ b/apps/wr/app/api/proxy/[...url]/route.ts
@@ -1,125 +1,106 @@
-/**
- * 📄 Proxy Route
- * API 프록시 라우트
- *
- * - 서버 API로의 요청 프록시 처리
- * - 쿠키 기반 인증 토큰 및 리프레시 토큰 관리
- * - POST 및 PUT 요청 핸들링
- * - 사용자 인증 정보 검증 및 응답 처리
- * - 에러 핸들링 및 상태 코드 반환
- * - 사이트 ID 및 헤더 설정
- */
+import {
+    ACCESS_TOKEN,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    REFRESH_TOKEN,
+    SERVER_API_URL,
+    SITE_ID,
+} from "@/src/shared/config";
 import { cookies } from "next/headers";
 import { NextResponse } from "next/server";
 
-const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token";
-const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";
-const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
-const COOKIE_DOMAIN = process.env.NEXT_PUBLIC_COOKIE_DOMAIN;
-const REFRESH_TOKEN = process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token";
-const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL || "";
-const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "WR";
-
 async function handler(
-  request: Request,
-  params: { url: string[] },
-  method: "GET" | "POST" | "PUT" | "DELETE",
+    request: Request,
+    params: { url: string[] },
+    method: "GET" | "POST" | "PUT" | "DELETE",
 ) {
-  const cookieStore = await cookies();
-  const headers: Record<string, string> = {
-    "Content-Type": "application/json",
-    "X-Site-Id": SITE_ID,
-  };
-  let body = {};
-  const isRefreshHandler = params.url.includes("refresh");
+    const cookieStore = await cookies();
+    const headers: Record<string, string> = {
+        "Content-Type": "application/json",
+        "X-Site-Id": SITE_ID,
+    };
+    let body = {};
+    const isRefreshHandler = params.url.includes("refresh");
 
-  // silent refresh
-  if (isRefreshHandler) {
-    const refreshToken = cookieStore.get(REFRESH_TOKEN); // "refresh-token"
-    console.log("refreshToken", refreshToken?.value);
-    headers[CLAIM_NAME] = refreshToken?.value ?? ""; // "Authorization"
+    // silent refresh
+    if (isRefreshHandler) {
+        const refreshToken = cookieStore.get(REFRESH_TOKEN);
+        headers[CLAIM_NAME] = refreshToken?.value ?? "";
 
-    if (!headers[CLAIM_NAME]) { // "Authorization"
-      return NextResponse.json({ message: "Can't refresh" }, { status: 401 });
-    }
-  }
-
-  try {
-    if (!isRefreshHandler) {
-      body = await request.json();
+        if (!headers[CLAIM_NAME]) {
+            return NextResponse.json(
+                { message: "Can't refresh" },
+                { status: 401 },
+            );
+        }
     }
 
-    const result = await fetch(`${SERVER_API_URL}/${params.url.join("/")}`, {
-      method,
-      headers,
-      body: JSON.stringify(body),
-    });
-// console.log(result);
-    if (!result.ok) {
-      return NextResponse.json(
-        { message: "first Invalid Credentials" },
-        { status: result.status },
-      );
+    try {
+        if (!isRefreshHandler) {
+            body = await request.json();
+        }
+
+        const result = await fetch(
+            `${SERVER_API_URL}/${params.url.join("/")}`,
+            {
+                method,
+                headers,
+                body: JSON.stringify(body),
+            },
+        );
+
+        if (!result.ok) {
+            return NextResponse.json(
+                { message: "Invalid Credentials" },
+                { status: 401 },
+            );
+        }
+
+        const accessToken = result.headers.get(ACCESS_TOKEN);
+        const refreshToken = result.headers.get(REFRESH_TOKEN);
+        const userId = result.headers.get(AUTH_USER_ID);
+
+        if (accessToken && userId) {
+            const response = NextResponse.json({
+                [ACCESS_TOKEN]: accessToken,
+                [AUTH_USER_ID]: userId,
+            });
+
+            if (refreshToken) {
+                cookieStore.set(REFRESH_TOKEN, refreshToken, {
+                    httpOnly: true,
+                    sameSite: "lax",
+                    path: "/",
+                });
+            }
+
+            return response;
+        }
+
+        return NextResponse.json(
+            { message: "Invalid Credentials" },
+            { status: 401 },
+        );
+    } catch (error) {
+        return NextResponse.json(
+            { message: "Server Error", error },
+            { status: 500 },
+        );
     }
-
-    const accessToken = result.headers.get(ACCESS_TOKEN); // "access-token"
-    const refreshToken = result.headers.get(REFRESH_TOKEN); // "refresh-token" 신규 받아온 token
-    const userId = result.headers.get(AUTH_USER_ID); // "token-id"
-
-    if (accessToken && userId) {
-      const response = NextResponse.json({
-        [ACCESS_TOKEN]: accessToken,
-        [AUTH_USER_ID]: userId,
-      });
-
-      if (refreshToken) {
-        response.cookies.set(REFRESH_TOKEN, refreshToken, {
-          httpOnly: true,
-          sameSite: "lax", // 다른 사이트에서 들어오는 모든 요청에 대해 쿠키를 보내지 않는 가장 강력한 설정
-          domain: getCookieDomain(),
-          path: "/",
-        });
-        console.log("refresh cookie setting : " + refreshToken);
-      }
-
-      return response;
-    }
-
-    return NextResponse.json(
-      { message: "Invalid Credentials" },
-      { status: 401 },
-    );
-  } catch (error) {
-    return NextResponse.json(
-      { message: "Server Error", error },
-      { status: 500 },
-    );
-  }
 }
 
 export async function POST(
-  request: Request,
-  props: { params: Promise<{ url: string[] }> },
+    request: Request,
+    props: { params: Promise<{ url: string[] }> },
 ) {
-  const params = await props.params;
-  return handler(request, params, "POST");
+    const params = await props.params;
+    return handler(request, params, "POST");
 }
 
 export async function PUT(
-  request: Request,
-  props: { params: Promise<{ url: string[] }> },
+    request: Request,
+    props: { params: Promise<{ url: string[] }> },
 ) {
-  const params = await props.params;
-  return handler(request, params, "PUT");
-}
-
-function getCookieDomain(): string | undefined {
-  if (typeof window === "undefined") return undefined;
-
-  if (COOKIE_DOMAIN) return COOKIE_DOMAIN;
-
-  const { hostname } = window.location;
-  if (hostname === "localhost" || hostname === "127.0.0.1") return undefined;
-
-  return hostname;
+    const params = await props.params;
+    return handler(request, params, "PUT");
 }
diff --git a/apps/wr/app/auth/login/page.tsx b/apps/wr/app/auth/login/page.tsx
deleted file mode 100644
index 0dbc42284..000000000
--- a/apps/wr/app/auth/login/page.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-import { LoginPage } from "@/src/features/auth/login";
-export default LoginPage;
diff --git a/apps/wr/app/auth/login/route-bak.ts b/apps/wr/app/auth/login/route-bak.ts
deleted file mode 100644
index 65bbce15e..000000000
--- a/apps/wr/app/auth/login/route-bak.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-
-export async function GET(request: NextRequest) {
-  const hostname = request.nextUrl.hostname;
-  const redirectUrl = process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "https://portal.hasuon.or.kr";
-
-  if (hostname === "localhost" || hostname === "127.0.0.1" || hostname === "con.mind-one.co.kr") {
-    return NextResponse.redirect(new URL("/", request.url));  // 로컬 및 개발 환경
-  } else {
-    return NextResponse.redirect(new URL(redirectUrl)); // 공단 환경
-  }
-}
\ No newline at end of file
diff --git a/apps/wr/package.json b/apps/wr/package.json
index 864de626c..3ec9cecfb 100644
--- a/apps/wr/package.json
+++ b/apps/wr/package.json
@@ -15,8 +15,11 @@
   },
   "dependencies": {
     "@common/assets": "workspace:*",
-    "@common/business_components": "workspace:*",
+    "@common/auth": "workspace:*",
     "@common/components": "workspace:*",
+    "@common/config": "workspace:*",
+    "@common/network": "workspace:*",
+    "@common/business_components": "workspace:*",
     "@fontsource-variable/noto-sans-kr": "^5.2.5",
     "@frontend-opensource/use-react-hooks": "^1.1.4",
     "@hookform/resolvers": "^4.1.3",
diff --git a/apps/wr/src/auth/login/index.ts b/apps/wr/src/auth/login/index.ts
new file mode 100644
index 000000000..2093c3d8d
--- /dev/null
+++ b/apps/wr/src/auth/login/index.ts
@@ -0,0 +1 @@
+export { LoginPage } from "./ui/login-page";
diff --git a/apps/wr/src/auth/login/ui/login-page.tsx b/apps/wr/src/auth/login/ui/login-page.tsx
new file mode 100644
index 000000000..6398700b9
--- /dev/null
+++ b/apps/wr/src/auth/login/ui/login-page.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+
+import { authService } from "@/src/entities/auth";
+import { images } from "@common/assets";
+
+import "./login.css";
+
+function LoginPage() {
+    const [errorMessage, setErrorMessage] = useState<string>("");
+
+    const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        setErrorMessage("");
+
+        const formData = new FormData(e.target as HTMLFormElement);
+        const userId = formData.get("id") as string;
+        const password = formData.get("password") as string;
+
+        try {
+            await authService.login({ userId, password });
+            window.location.href = "/";
+        } catch (error) {
+            const message =
+                error instanceof Error
+                    ? error.message
+                    : "로그인에 실패했습니다.";
+            setErrorMessage(message);
+        }
+    };
+
+    return (
+        <div className="login fx">
+            <div className="left_box fx">
+                <div className="text">
+                    <h1>
+                        유역하수도통합플랫폼
+                        <br />
+                        <span>하수도통계 관리시스템</span>
+                    </h1>
+                    <p>
+                        유역하수도통합플랫폼 하수도통계 관리시스템에 오신 것을
+                        환영합니다.
+                    </p>
+                </div>
+                <div className="img">
+                    <Image
+                        src={images.logo}
+                        width={229}
+                        height={46}
+                        alt="logo"
+                    />
+                </div>
+            </div>
+            <form
+                id="loginForm"
+                name="loginForm"
+                method="post"
+                onSubmit={handleSubmit}
+            >
+                <div className="login_box fx">
+                    <ul className="fx">
+                        <li>
+                            <h2>ID</h2>
+                            <div className="input_st st1">
+                                <i className="diveicon di-account-box" />
+                                <input
+                                    type="text"
+                                    className="id"
+                                    title="아이디를 입력하세요."
+                                    id="id"
+                                    name="id"
+                                    maxLength={12}
+                                />
+                            </div>
+                        </li>
+                        <li>
+                            <h2>PASSWORD</h2>
+                            <div className="input_st st2">
+                                <i className="diveicon di-key" />
+                                <input
+                                    type="password"
+                                    className="input_style"
+                                    maxLength={25}
+                                    title="비밀번호를 입력하세요."
+                                    id="password"
+                                    name="password"
+                                />
+                            </div>
+                        </li>
+                    </ul>
+                    <div className="bottom_box fx">
+                        <div className="checks fx">
+                            <input
+                                type="checkbox"
+                                name="checkId"
+                                title="로그인ID 저장여부"
+                                id="checkId"
+                            />
+                            <label htmlFor="checkId">아이디저장</label>
+                        </div>
+                        {/* <a href="javascript:fnUserSearch();" className=" pw_message fx"><i className="xi-external-link"></i>비밀번호 또는 아이디를 잃어버리셨나요?</a> */}
+                    </div>
+                    {errorMessage && (
+                        <div className="error_message">
+                            <span>{errorMessage}</span>
+                        </div>
+                    )}
+                    <button type="submit" className="login_btn fx">
+                        <span>LOGIN</span>
+                    </button>
+                    <div className="footer">
+                        <div className="copy fx">
+                            <p>copyright © 2023 KECO. All rights reserved.</p>
+                        </div>
+                        <div className="fot_btn fx">
+                            <a
+                                href="https://keco.or.kr/web/lay1/S1T6C1348/contents.do"
+                                target="_blank"
+                            >
+                                개인정보처리방침
+                            </a>
+                            <a
+                                href="https://keco.or.kr/web/lay1/S1T6C1349/contents.do"
+                                target="_blank"
+                            >
+                                저작권정책안내
+                            </a>
+                            <a
+                                href="https://keco.or.kr/web/lay1/S1T6C1350/contents.do"
+                                target="_blank"
+                            >
+                                이메일무단수집거부
+                            </a>
+                        </div>
+                        <p className="addr fx">
+                            <span>
+                                주소 : (22689) 인천광역시 서구 환경로 42(경서동
+                                종합환경연구단지)
+                            </span>
+                            <span>
+                                전화 : (시스템) 032-590-4321, 3752, 4314 / (통
+                                계) 032-590-3723, 3722
+                            </span>
+                            <span>팩스 :032-590-3729</span>
+                        </p>
+                    </div>
+                </div>
+            </form>
+        </div>
+    );
+}
+
+export { LoginPage };
diff --git a/apps/wr/src/auth/login/ui/login.css b/apps/wr/src/auth/login/ui/login.css
new file mode 100644
index 000000000..e65180ae7
--- /dev/null
+++ b/apps/wr/src/auth/login/ui/login.css
@@ -0,0 +1,325 @@
+/**
+* OLYM Cascading Style Sheets
+* File Name : login.css
+* Description : 로그인 스타일시트
+* Author : Web business Team / Choi Hyun Mi
+* Email : desingtj@olym.co.kr
+* Date : 2023.07.20
+* Update : 2023.07.26
+* Copyright(c) 2023 OLYM Communications. All Rights Reserved.
+*/
+html,
+body {
+  background: #fff;
+}
+.fx {
+  display: flex;
+  -ms-display: flex;
+  -webkit-display: flex;
+  box-sizing: border-box;
+}
+.login {
+  width: 100%;
+  height: 100vh;
+}
+.login .left_box {
+  width: 100%;
+  background: url(../../../../public/images/bg_login.jpg) no-repeat
+    center/cover;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 7% 5% 5% 5%;
+}
+.login .left_box .text h1 {
+  font-size: 53px;
+  color: #fff;
+}
+.login .left_box .text h1 span {
+  font-weight: 800;
+}
+.login .left_box .text p {
+  margin-top: 40px;
+  font-size: 18px;
+  color: #fff;
+}
+.login .login_box {
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  padding: 4% 12% 4% 6%;
+}
+.login .login_box > ul {
+  flex-direction: column;
+  gap: 40px;
+}
+.login .login_box > ul > li h2 {
+  font-size: 22px;
+  font-weight: 600;
+  color: #2640a5;
+  margin-bottom: 14px;
+}
+.login .login_box > ul > li .input_st {
+  position: relative;
+}
+.login .login_box > ul > li .input_st .diveicon {
+  position: absolute;
+  top: 50%;
+  left: 28px;
+  transform: translateY(-50%);
+  font-family: "Xeicon";
+  font-size: 25px;
+  color: #003288;
+}
+.login .login_box > ul > li input {
+  width: 100%;
+  padding: 20px 20px 20px 70px;
+  background: #f7f7f7;
+  box-sizing: border-box;
+  border: none;
+  border-radius: 5px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #000;
+  height: auto;
+}
+.login .login_box > ul > li input:focus {
+  outline: 1px solid #3c5fe5;
+}
+.login .login_box > ul > li input::placeholder {
+  color: #afabab;
+  font-weight: 500;
+}
+.login .login_box .bottom_box {
+  justify-content: space-between;
+  gap: 20px;
+  padding: 50px 0 45px 0;
+}
+.login .login_box .bottom_box .checks {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.login .login_box .bottom_box .checks input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+}
+.login .login_box .bottom_box .checks label {
+  font-size: 14px;
+}
+.login .login_box .bottom_box .pw_message {
+  align-items: center;
+  gap: 5px;
+  color: #636363;
+  font-weight: 500;
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 5px;
+}
+.login .login_box .bottom_box .pw_message i {
+  color: #327af5;
+  font-size: 20px;
+}
+.login .login_box .error_message {
+  margin: 20px 0;
+  padding: 12px 20px;
+  background: #fee;
+  border: 1px solid #fcc;
+  border-radius: 5px;
+  color: #c33;
+  font-size: 14px;
+  text-align: center;
+}
+.login .login_box .error_message span {
+  display: block;
+  font-weight: 500;
+}
+.login .login_box .login_btn {
+  position: relative;
+  border-radius: 5px;
+  padding: 24px 15px;
+  background: linear-gradient(
+    to left,
+    #1d3969 0%,
+    #264078 10%,
+    #172558 40%,
+    #162254 50%,
+    #111c43 60%,
+    #111c42 100%
+  );
+  overflow: hidden;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  color: #fff;
+  cursor: pointer;
+}
+.login .login_box .login_btn span {
+  font-family: "Montserrat";
+  font-size: 19px;
+  font-weight: 700;
+  position: relative;
+}
+.login .login_box .login_btn i {
+  font-size: 22px;
+  transform: translateY(-2px);
+}
+.login .login_box .login_btn:before {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  background: linear-gradient(
+    to right,
+    #1d3969 0%,
+    #264078 10%,
+    #172558 40%,
+    #162254 50%,
+    #111c43 60%,
+    #111c42 100%
+  );
+  transition: opacity 0.5s;
+}
+.login .login_box .login_btn:hover::before {
+  opacity: 1;
+}
+.login .footer .copy {
+  margin-top: 36px;
+  justify-content: space-between;
+  align-items: center;
+  gap: 3%;
+}
+.login .footer .copy p {
+  font-size: 13px;
+  color: #d4d4d4;
+  width: 44%;
+  text-align: center;
+}
+.login .footer .copy::before,
+.login .login_box .copy::after {
+  content: "";
+  width: 20%;
+  height: 1px;
+  background: #d4d4d4;
+}
+.login .footer .fot_btn {
+  gap: 20px;
+  margin: 30px 0 10px 0;
+}
+.login .footer .fot_btn a {
+  color: #333;
+  font-weight: 700;
+  font-size: 13px;
+}
+.login .footer .fot_btn a:hover {
+  color: #003288;
+}
+.login .footer .addr {
+  color: #666;
+  font-size: 13px;
+  gap: 3px 20px;
+  flex-wrap: wrap;
+}
+/* 비밀번호 변경 팝업창 */
+.login .modal .modal_container {
+  width: 750px;
+}
+.login .pw_desc {
+  padding: 10px 10px 30px 10px;
+  color: #666;
+}
+.login .pw_desc p {
+  font-size: 1.25rem;
+  color: #000;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+.login .pw_desc span {
+  color: #f60;
+  font-weight: 700;
+}
+.login .modal .form_write {
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  padding: 20px 50px;
+}
+@media (max-width: 1024px) {
+  .login {
+    flex-direction: column;
+    height: auto;
+  }
+  .login .left_box {
+    padding: 30px;
+    flex-direction: column-reverse;
+    gap: 20px;
+  }
+  .login .left_box .text h1 {
+    font-size: 30px;
+    line-height: 1.2em;
+  }
+  .login .left_box .text p {
+    margin-top: 20px;
+    font-size: 14px;
+  }
+  .login .left_box .img img {
+    height: 40px;
+  }
+  .login .login_box {
+    padding: 30px;
+  }
+  .login .login_box > ul {
+    gap: 20px;
+  }
+  .login .login_box > ul > li h2 {
+    margin-bottom: 7px;
+  }
+  .login .login_box > ul > li .input_st::after {
+    left: 15px;
+    font-size: 20px;
+  }
+  .login .login_box > ul > li input {
+    padding: 15px 10px 15px 50px;
+    font-size: 16px;
+  }
+  .login .login_box .bottom_box {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 30px 0;
+  }
+  .login .login_box .bottom_box .id_save label {
+    font-size: 14px;
+  }
+  .login .login_box .login_btn {
+    padding: 15px;
+  }
+  .login .login_box .login_btn span {
+    font-size: 16px;
+  }
+  .login .login_box .login_btn i {
+    font-size: 18px;
+    transform: translateY(-1px);
+  }
+  .login .login_box .copy p {
+    width: 100%;
+  }
+  .login .login_box .copy::before,
+  .login .login_box .copy::after {
+    display: none;
+  }
+  .login .footer .addr {
+    font-size: 11px;
+    gap: 3px 10px;
+  }
+  .login .modal .modal_container {
+    width: 90%;
+  }
+  .login .pw_desc {
+    padding: 0 0 20px 0;
+  }
+  .login .modal .form_write {
+    padding: 10px;
+  }
+}
+/* // login */
diff --git a/apps/wr/src/entities/auth/api/auth-service.ts b/apps/wr/src/entities/auth/api/auth-service.ts
new file mode 100644
index 000000000..1bc235e5e
--- /dev/null
+++ b/apps/wr/src/entities/auth/api/auth-service.ts
@@ -0,0 +1,109 @@
+import {
+    ACCESS_TOKEN,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    ENDPOINT,
+} from "@/src/shared/config";
+import { getCookie } from "@/src/shared/lib";
+import {
+    type AuthPayload,
+    type AuthService,
+    getRemainingMs,
+} from "@common/auth";
+
+import {
+    clearRefreshTimer,
+    removeToken,
+    setToken,
+    setupRefreshTimer,
+    tokenManager,
+} from "../lib/token-manager";
+
+import { clearTabStorePersist } from "@/src/store/tab-store";
+
+async function login(payload: AuthPayload): Promise<void> {
+    const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+    });
+
+    const data = await response.json();
+
+    const accessToken = data[ACCESS_TOKEN];
+    const tokenId = data[AUTH_USER_ID];
+
+    if (!accessToken || !tokenId) {
+        throw new Error("인증 토큰을 받지 못했습니다.");
+    }
+
+    const prevTokenId = getCookie(AUTH_USER_ID);
+    if (prevTokenId !== undefined && prevTokenId !== tokenId) {
+        clearTabStorePersist();
+    }
+
+    setToken(CLAIM_NAME, accessToken);
+    setToken(AUTH_USER_ID, tokenId);
+
+    const remainingMs = getRemainingMs(accessToken);
+    if (remainingMs > 0) {
+        setupRefreshTimer(silentRefresh, remainingMs);
+    }
+}
+
+async function silentRefresh(): Promise<void> {
+    console.log(`[silentRefresh] Called at ${new Date().toISOString()}`);
+    try {
+        const response = await fetch(
+            `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
+            { method: "PUT" },
+        );
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            throw new Error(data?.message ?? "토큰 갱신에 실패했습니다.");
+        }
+
+        const accessToken = data[ACCESS_TOKEN];
+        const tokenId = data[AUTH_USER_ID];
+
+        if (!accessToken || !tokenId) {
+            throw new Error("갱신된 인증 토큰을 받지 못했습니다.");
+        }
+
+        setToken(CLAIM_NAME, accessToken);
+        setToken(AUTH_USER_ID, tokenId);
+
+        const remainingMs = getRemainingMs(accessToken);
+        if (remainingMs > 0) {
+            setupRefreshTimer(silentRefresh, remainingMs);
+        }
+    } catch (error) {
+        console.error(
+            `[silentRefresh] Failed at ${new Date().toISOString()}`,
+            error,
+        );
+        tokenManager.clearAuthToken();
+        if (typeof window !== "undefined") {
+            window.dispatchEvent(new CustomEvent("auth:logout"));
+        }
+    }
+}
+
+export async function logout(): Promise<void> {
+    tokenManager.clearAuthToken();
+    removeToken("site-id-key");
+    removeToken("site-theme-key");
+
+    if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("auth:logout"));
+    }
+}
+
+export const authService: AuthService = {
+    login,
+    silentRefresh,
+    declineSessionExtend: clearRefreshTimer,
+    logout,
+};
diff --git a/apps/wr/src/entities/auth/api/login-service.ts b/apps/wr/src/entities/auth/api/login-service.ts
deleted file mode 100644
index 92535f7b0..000000000
--- a/apps/wr/src/entities/auth/api/login-service.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-
-import type { LoginService, ILogin } from "../model/login-interface";
-import { tokenManager } from "../lib/token-manager";
-import { ACCESS_TOKEN, AUTH_USER_ID, SITE_ID, CLAIM_NAME, ENDPOINT,JWT_EXPIRATION_TIME } from "../../../shared/config";
-
-export class LoginApiService implements LoginService {
-  private static instance: LoginApiService;
-
-  private constructor() {}
-
-  public static getInstance(): LoginApiService {
-    if (!LoginApiService.instance) {
-      LoginApiService.instance = new LoginApiService();
-    }
-    return LoginApiService.instance;
-  }
-
-  public async login(payload: ILogin): Promise<void> {
-    try {
-      tokenManager.clearAuthToken();
-      const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          userId: payload.userId,
-          password: payload.password,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data?.message ?? "Login failed");
-      }
-
-      const accessToken = data[ACCESS_TOKEN];
-      const tokenId = data[AUTH_USER_ID];
-      
-      if (!accessToken || !tokenId) {
-        throw new Error("Missing required authentication tokens");
-      }
-      tokenManager.setToken(CLAIM_NAME, accessToken);
-      tokenManager.setToken(AUTH_USER_ID, tokenId);
-      tokenManager.setToken("site-id-key", SITE_ID);
-      tokenManager.setupRefreshTimer(() => this.silentRefresh(),JWT_EXPIRATION_TIME );
-    } catch (error) {
-
-      throw new Error(`Login failed: ${error}`);
-    }
-  }
-
-
-  public async silentRefresh(): Promise<void> {
-    console.log('  silentRefresh ')
-    
-    try {
-      const response = await fetch(
-        `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
-        {
-          method: "PUT",
-        },
-      );
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data?.message ?? "Silent refresh failed");
-      }
-
-      const accessToken = data[ACCESS_TOKEN];
-      const tokenId = data[AUTH_USER_ID];
-
-      if (!accessToken || !tokenId) {
-        throw new Error("Missing required authentication tokens");
-      }
-     
-      tokenManager.setToken(CLAIM_NAME, accessToken);
-      tokenManager.setToken(AUTH_USER_ID, tokenId);
-      tokenManager.setupRefreshTimer(() => this.silentRefresh(),JWT_EXPIRATION_TIME);
-    } catch (error) {
-      tokenManager.clearAuthToken();
-      throw new Error(`Silent refresh failed: ${error}`);
-    }
-  }
-}
-
-export const LoginApi = LoginApiService.getInstance();
diff --git a/apps/wr/src/entities/auth/index.ts b/apps/wr/src/entities/auth/index.ts
index 97e142225..7f0d0081a 100644
--- a/apps/wr/src/entities/auth/index.ts
+++ b/apps/wr/src/entities/auth/index.ts
@@ -1,2 +1,3 @@
-export { LoginApi } from "./api/login-service";
+export { authService } from "./api/auth-service";
 export { AuthWrapper } from "./lib/auth-wrapper";
+export { tokenManager } from "./lib/token-manager";
diff --git a/apps/wr/src/entities/auth/lib/auth-wrapper.tsx b/apps/wr/src/entities/auth/lib/auth-wrapper.tsx
index 796cd44a9..0dc0661ea 100644
--- a/apps/wr/src/entities/auth/lib/auth-wrapper.tsx
+++ b/apps/wr/src/entities/auth/lib/auth-wrapper.tsx
@@ -1,69 +1,88 @@
 "use client";
 
 import { useEffect } from "react";
-import { usePathname } from "next/navigation";
-import { client } from "../../../shared/api";
-import type { IUserInfo } from "../../../shared/store";
-import { useUserStore } from "../../../shared/lib";
-import { ENDPOINT, AUTH_USER_ID } from "../../../shared/config";
-import { isAtLoginRedirectUrl } from "@common/network";
-import { getCookie } from "../../../shared/lib";
+import { useRouter } from "next/navigation";
 
-const LOGIN_PAGE_URL =
-  process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
+import { isAxiosError } from "axios";
+
+import { client } from "@/src/shared/api";
+import {
+    AUTH_LOGIN_REDIRECT_URL,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    ENDPOINT,
+} from "@/src/shared/config";
+import { useUserStore } from "@/src/shared/lib";
+import type { IUserInfo } from "@/src/shared/store";
+import { getRemainingMs } from "@common/auth";
+import { isAtLoginRedirectUrl } from "@common/network";
+
+import { authService } from "../api/auth-service";
+
+import { getToken, setupRefreshTimer } from "./token-manager";
 
 const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
-  const pathname = usePathname();
-  const { userInfo, setUserInfo } = useUserStore((state) => state);
+    const router = useRouter();
+    const userInfo = useUserStore((state) => state.userInfo);
+    const setUserInfo = useUserStore((state) => state.setUserInfo);
 
-  async function authCheck() {
-    if (isAtLoginRedirectUrl(LOGIN_PAGE_URL)) {
-      return;
-    }
+    useEffect(() => {
+        // 페이지 새로고침 시 silentRefresh 타이머 복구
+        const token = getToken(CLAIM_NAME);
+        if (token) {
+            const remainingMs = getRemainingMs(token);
+            if (remainingMs > 0) {
+                console.log(
+                    `[AuthWrapper] Refresh timer set: ${remainingMs}ms (${remainingMs / 1000}s)`,
+                );
+                setupRefreshTimer(authService.silentRefresh, remainingMs);
+            }
+        }
 
-    const userId = getCookie(AUTH_USER_ID);
-    if (!userId) {
-      throw new Error("Missing required authentication tokens");
-    }
+        if (isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) return;
 
-    const response = await client.get<IUserInfo>(
-      `${ENDPOINT.USER_SERVICE.USERS}/info/me`,
-    );
-    if (!userInfo) setUserInfo(response.data);
-  }
+        async function authCheck() {
+            const userId = getToken(AUTH_USER_ID);
+            if (!userId) {
+                router.replace(AUTH_LOGIN_REDIRECT_URL);
+                return;
+            }
 
-  useEffect(() => {
-    (async () => {
-      try {
-        await authCheck();
-      } catch (error) {
-        console.error(error);
-        setUserInfo(null);
+            if (userInfo) return;
 
-        if (isAtLoginRedirectUrl(LOGIN_PAGE_URL)) return;
+            const response = await client.get<IUserInfo>(
+                `${ENDPOINT.USER_SERVICE.USERS}/info/me`,
+            );
+            setUserInfo(response.data);
+        }
 
-        // const hostname = window.location.hostname;
+        authCheck().catch((error) => {
+            // 401은 @common/network error-interceptor에서 이미 리다이렉트 처리됨
+            if (isAxiosError(error) && error.response?.status === 401) return;
 
-        // // 개발 환경에서는 localhost 도메인 사용
-        // if (
-        //   hostname === "localhost" ||
-        //   hostname === "127.0.0.1" ||
-        //   hostname === "con.mind-one.co.kr"
-        // )
-        //   router.push("/auth/login");
+            console.error(error);
+            setUserInfo(null);
+            if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+                router.replace(AUTH_LOGIN_REDIRECT_URL);
+            }
+        });
+    }, []);
 
-        // // 운영 환경에서는 서브도메인을 포함한 최상위 도메인 사용
-        // // router.push는 같은 Next.js 앱 내에서만 작동하므로 다른 앱으로 이동할 때는 window.location.href 사용
-        // if (hostname.includes("hasuon.or.kr"))
-        //   window.location.assign(LOGIN_PAGE_URL); // 세션 만료 시 CM 로그인 페이지로 리다이렉트
+    // silentRefresh 실패 시 auth:logout 이벤트를 수신해 로그인으로 이동
+    useEffect(() => {
+        function handleAuthLogout() {
+            setUserInfo(null);
+            if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+                router.replace(AUTH_LOGIN_REDIRECT_URL);
+            }
+        }
 
-        // 개발/운영 환경에서 로그인 URL 분기는 환경 변수로 처리 (.env.*)
-        window.location.assign(LOGIN_PAGE_URL);
-      }
-    })();
-  }, [pathname]);
+        window.addEventListener("auth:logout", handleAuthLogout);
+        return () =>
+            window.removeEventListener("auth:logout", handleAuthLogout);
+    }, []);
 
-  return <>{children}</>;
+    return <>{children}</>;
 };
 
 export { AuthWrapper };
diff --git a/apps/wr/src/entities/auth/lib/token-manager.ts b/apps/wr/src/entities/auth/lib/token-manager.ts
index 919386622..172f2cc3a 100644
--- a/apps/wr/src/entities/auth/lib/token-manager.ts
+++ b/apps/wr/src/entities/auth/lib/token-manager.ts
@@ -1,109 +1,15 @@
-import { AUTH_USER_ID, CLAIM_NAME } from "@/src/shared/config";
-import { getCookie, removeCookie, setCookie } from "@/src/shared/lib/cookie";
+import { authConfig } from "@/src/shared/config/auth";
+import { createTokenManager } from "@common/auth";
 
-type JwtPayload = {
-  sub?: string; // 토큰 subject
-  exp?: number; // 만료 시각(초 단위)
-  iat?: number; // 발급 시각(초 단위)
-  [key: string]: unknown;
-};
+export const tokenManager = createTokenManager(authConfig);
 
-export class TokenManager {
-  private static instance: TokenManager;
-  private refreshTimer: NodeJS.Timeout | null = null;
-
-  private constructor() {}
-
-  public static getInstance(): TokenManager {
-    if (!TokenManager.instance) {
-      TokenManager.instance = new TokenManager();
-    }
-    return TokenManager.instance;
-  }
-
-  public getToken(key: string): string | undefined {
-    return getCookie(key);
-  }
-
-  private parseJwt(token: string): JwtPayload {
-    const parts = token.split(".");
-    if (parts.length !== 3) {
-      throw new Error("유효한 JWT 형식이 아닙니다.");
-    }
-
-    const base64Url = parts[1] ?? ""; // Payload를 가져온다.
-    const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
-    const padded = base64.padEnd(Math.ceil(base64.length / 4) * 4, "=");
-    const jsonPayload = decodeURIComponent(
-      atob(padded)
-        .split("")
-        .map((char) => `%${char.charCodeAt(0).toString(16).padStart(2, "0")}`)
-        .join("")
-    );
-
-    return JSON.parse(jsonPayload) as JwtPayload;
-  }
-
-  public getRemainingMsFromToken(key: string = CLAIM_NAME): number | null {
-    const token = this.getToken(key);
-    if (!token) {
-      return null;
-    }
-
-    try {
-      const payload = this.parseJwt(token);
-      if (typeof payload.exp !== "number") {
-        return null;
-      }
-
-      return payload.exp * 1000 - Date.now();
-    } catch (error) {
-      console.error("JWT 파싱 오류:", error);
-      return null;
-    }
-  }
-
-  public isExpiredToken(key: string = CLAIM_NAME): boolean {
-    const remainingMs = this.getRemainingMsFromToken(key);
-    return remainingMs === null || remainingMs <= 0;
-  }
-
-  public setToken(key: string, value: string): void {
-    setCookie(key, value, {
-      secure: window.location.protocol === "https:",
-      sameSite: "lax",
-    });
-  }
-
-  public removeToken(key: string): void {
-    removeCookie(key);
-  }
-
-  public setupRefreshTimer(
-    callback: () => Promise<void>,
-    expirationTime: number,
-  ): void {
-    if (this.refreshTimer) {
-      clearTimeout(this.refreshTimer);
-    }
-
-    this.refreshTimer = setTimeout(() => {
-      callback().catch((error) => {
-        console.error("Silent refresh failed:", error);
-        this.clearAuthToken();
-      });
-    }, expirationTime - 60000);
-  }
-
-  public clearAuthToken(): void {
-    if (this.refreshTimer) {
-      clearTimeout(this.refreshTimer);
-      this.refreshTimer = null;
-    }
-
-    this.removeToken(CLAIM_NAME);
-    this.removeToken(AUTH_USER_ID);
-  }
-}
-
-export const tokenManager = TokenManager.getInstance();
+export const {
+    getToken,
+    setToken,
+    removeToken,
+    setupRefreshTimer,
+    clearRefreshTimer,
+    getAccessToken,
+    getRefreshToken,
+    getUserId,
+} = tokenManager;
diff --git a/apps/wr/src/entities/menu-authority/index.ts b/apps/wr/src/entities/menu-authority/index.ts
index 2a555b77e..d5991d01c 100644
--- a/apps/wr/src/entities/menu-authority/index.ts
+++ b/apps/wr/src/entities/menu-authority/index.ts
@@ -1,2 +1,9 @@
+export { MenuAuthorityApi } from "./api/menu-authority-service";
+export {
+    menuAuthorityFormSchema,
+    type MenuAuthority,
+    type MenuAuthorityPayload,
+    type MenuAuthorityFormData,
+} from "./model/menu-authority-interface";
 export { AuthorityButton } from "./ui/authority-button";
 export { ManagementAuthorityDialog } from "./ui/management-authority-dialog";
diff --git a/apps/wr/src/entities/menu/index.ts b/apps/wr/src/entities/menu/index.ts
index 04f63e38b..2bd1b1787 100644
--- a/apps/wr/src/entities/menu/index.ts
+++ b/apps/wr/src/entities/menu/index.ts
@@ -1,2 +1,3 @@
+export { MenuApi } from "./api/menu-service";
+export type { MenuItem, MenuService } from "./model/menu-interface";
 export { MenuWrapper } from "./lib/menu-wrapper";
-export type { MenuItem } from "./model/menu-interface";
diff --git a/apps/wr/src/shared/config/auth.ts b/apps/wr/src/shared/config/auth.ts
new file mode 100644
index 000000000..7c35ad9f0
--- /dev/null
+++ b/apps/wr/src/shared/config/auth.ts
@@ -0,0 +1,17 @@
+import type { AuthConfig } from "@common/auth";
+
+import {
+  ACCESS_TOKEN,
+  AUTH_USER_ID,
+  CLAIM_NAME,
+  COOKIE_DOMAIN,
+  REFRESH_TOKEN,
+} from "./env";
+
+export const authConfig: AuthConfig = {
+  authUserId: AUTH_USER_ID || "token-id",
+  claimName: CLAIM_NAME || "Authorization",
+  cookieDomain: COOKIE_DOMAIN,
+  accessToken: ACCESS_TOKEN || "access-token",
+  refreshToken: REFRESH_TOKEN || "refresh-token",
+};
diff --git a/apps/wr/src/shared/config/env.ts b/apps/wr/src/shared/config/env.ts
index 89dd8addd..857b2d197 100644
--- a/apps/wr/src/shared/config/env.ts
+++ b/apps/wr/src/shared/config/env.ts
@@ -4,12 +4,17 @@ export const PROXY_HOST = process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhos
 export const SERVER_API_WR_URL = process.env.NEXT_PUBLIC_WR_SERVER_API_URL ||'http://apigateway.iipbs-dev.svc.cluster.local:8000/api/v1';
 export const SERVER_API_FO_URL = process.env.NEXT_PUBLIC_FO_SERVER_API_URL||' http://con.mind-one.co.kr:11082/api/v1';
 export const SERVER_API_CS_URL = process.env.NEXT_PUBLIC_CS_SERVER_API_URL||'http://dev.onasys.co.kr:8000';
+export const SERVER_API_URL = process.env.NEXT_PUBLIC_CS_SERVER_API_URL||'http://dev.onasys.co.kr:8000';
 export const SERVER_API_CS_TUS_URL = process.env.NEXT_PUBLIC_CS_TUS_UPLOAD ||'/attach-service/api/v1/tus/upload'
+export const AUTH_LOGIN_REDIRECT_URL =
+    process.env.NEXT_PUBLIC_AUTH_LOGIN_REDIRECT_URL || "/auth/login";
 export const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
 export const ACCESS_TOKEN =  process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token";
 export const REFRESH_TOKEN =process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token";
 export const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";
 export const SERVER_SEWERAGE_API_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL;
+export const COOKIE_DOMAIN = process.env.NEXT_PUBLIC_COOKIE_DOMAIN;
+
 
 
 
diff --git a/apps/wr/src/shared/lib/bbs-notice-menu.ts b/apps/wr/src/shared/lib/bbs-notice-menu.ts
new file mode 100644
index 000000000..a621ed669
--- /dev/null
+++ b/apps/wr/src/shared/lib/bbs-notice-menu.ts
@@ -0,0 +1,12 @@
+import type { MenuItem } from "@/src/entities/menu";
+
+export const BBS_NOTICE_MENU_MARKER = "bbsnotice";
+
+export function isBbsNoticeMenu(item: MenuItem): boolean {
+    const marker = BBS_NOTICE_MENU_MARKER;
+    return (
+        item.urlPath?.toLowerCase().includes(marker) ||
+        item.menuEngNm?.toLowerCase().includes(marker) ||
+        item.menuPath?.toLowerCase().includes(marker)
+    );
+}
diff --git a/apps/wr/src/shared/lib/index.ts b/apps/wr/src/shared/lib/index.ts
index b8b4c52c0..1d0c4a3a8 100644
--- a/apps/wr/src/shared/lib/index.ts
+++ b/apps/wr/src/shared/lib/index.ts
@@ -4,3 +4,10 @@ export { useMenuStore } from "./use-menu-store";
 export { useUserStore } from "./use-user-store";
 export { usePrompt } from "./use-prompt";
 export { getCookie, setCookie, removeCookie } from "./cookie";
+export {
+    buildStatisticsComponentImportPath,
+    menuMatchesStatisticsTabId,
+    parseStatisticsMenuUrlPath,
+    resolveStatisticsCategory,
+    resolveStatisticsTabId,
+} from "./statistics-menu-url";
diff --git a/apps/wr/src/shared/lib/statistics-menu-url.ts b/apps/wr/src/shared/lib/statistics-menu-url.ts
new file mode 100644
index 000000000..c20dded4c
--- /dev/null
+++ b/apps/wr/src/shared/lib/statistics-menu-url.ts
@@ -0,0 +1,84 @@
+import type { MenuItem } from "@/src/entities/menu";
+
+export type ParsedStatisticsMenuUrl = {
+    categoryFromPath: string | null;
+    componentName: string | null;
+    rawUrlPath: string;
+};
+
+/** 메뉴 `urlPath`에서 통계 화면 카테고리·컴포넌트명을 파싱합니다. */
+export function parseStatisticsMenuUrlPath(
+    urlPath: string,
+): ParsedStatisticsMenuUrl {
+    const trimmed = (urlPath ?? "").trim();
+    if (!trimmed) {
+        return { categoryFromPath: null, componentName: null, rawUrlPath: trimmed };
+    }
+
+    let pathPart = trimmed;
+    let queryString = "";
+    const queryIndex = trimmed.indexOf("?");
+    if (queryIndex >= 0) {
+        pathPart = trimmed.slice(0, queryIndex);
+        queryString = trimmed.slice(queryIndex + 1);
+    }
+
+    const tabParam = new URLSearchParams(queryString).get("tab")?.trim() || null;
+    const segments = pathPart.replace(/^\/+/, "").split("/").filter(Boolean);
+
+    let categoryFromPath: string | null = null;
+    if (segments[0] === "statistics" && segments.length >= 2) {
+        categoryFromPath = segments[1] ?? null;
+    }
+
+    let componentName = tabParam;
+    if (!componentName) {
+        if (!pathPart.includes("/") && !queryString) {
+            componentName = trimmed;
+        } else if (segments.length === 1 && segments[0] !== "statistics") {
+            componentName = segments[0] ?? null;
+        } else if (segments[0] === "statistics" && segments.length >= 3) {
+            componentName = segments[segments.length - 1] ?? null;
+        }
+    }
+
+    return { categoryFromPath, componentName, rawUrlPath: trimmed };
+}
+
+/** 동적 import용 카테고리 폴더명 (`input`, `review` 등) */
+export function resolveStatisticsCategory(
+    urlPath: string,
+    parentEngNm: string,
+): string {
+    const { categoryFromPath } = parseStatisticsMenuUrlPath(urlPath);
+    return categoryFromPath || parentEngNm || "";
+}
+
+/** 탭 ID·URL `?tab=` 값 - 컴포넌트 파일명(확장자 제외) */
+export function resolveStatisticsTabId(urlPath: string): string {
+    const { componentName, rawUrlPath } = parseStatisticsMenuUrlPath(urlPath);
+    return componentName || rawUrlPath;
+}
+
+/** `@/src/components/statistics/{category}/{Component}` 또는 루트 컴포넌트 경로 */
+export function buildStatisticsComponentImportPath(
+    urlPath: string,
+    parentEngNm: string,
+): string {
+    const { componentName } = parseStatisticsMenuUrlPath(urlPath);
+    const category = resolveStatisticsCategory(urlPath, parentEngNm);
+    const name = componentName || urlPath;
+    if (!category) {
+        return `@/src/components/statistics/${name}`;
+    }
+    return `@/src/components/statistics/${category}/${name}`;
+}
+
+export function menuMatchesStatisticsTabId(
+    menu: MenuItem,
+    tabId: string,
+): boolean {
+    if (!tabId) return false;
+    if (menu.urlPath === tabId) return true;
+    return resolveStatisticsTabId(menu.urlPath) === tabId;
+}
diff --git a/apps/wr/src/store/admin-store.ts b/apps/wr/src/store/admin-store.ts
new file mode 100644
index 000000000..098ff816e
--- /dev/null
+++ b/apps/wr/src/store/admin-store.ts
@@ -0,0 +1,29 @@
+import { create } from "zustand";
+import { UserApi } from "@/src/entities/user";
+import { getUserInfo } from "../../../../packages/common/components/src/api";
+
+interface AdminStore {
+    /** 현재 사용자가 관리자 목록에 있는지 */
+    isAdminInfo: boolean;
+    setAdminInfo: (value: boolean) => void;
+    /** API로 관리자 목록 조회 후 현재 사용자 일치 여부 설정 */
+    fetchAdminInfo: () => Promise<void>;
+}
+
+const useAdminStoreHook = create<AdminStore>((set) => ({
+    isAdminInfo: false,
+    setAdminInfo: (value) => set({ isAdminInfo: value }),
+    fetchAdminInfo: async () => {
+        try {
+            const userInfo = await getUserInfo();
+            const adminList = await UserApi.findPageAdminUser({ userName: userInfo.userName });
+            const matched = adminList.content?.filter((a) => a.userName === userInfo.userName) ?? [];
+            set({ isAdminInfo: matched.length > 0 });
+        } catch {
+            set({ isAdminInfo: false });
+        }
+    },
+}));
+
+export const useAdminStore = useAdminStoreHook;
+export const getAdminStoreState = () => useAdminStoreHook.getState();
diff --git a/apps/wr/src/store/tab-store.ts b/apps/wr/src/store/tab-store.ts
new file mode 100644
index 000000000..0379b3601
--- /dev/null
+++ b/apps/wr/src/store/tab-store.ts
@@ -0,0 +1,327 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+import type { MenuItem } from "@/src/entities/menu";
+import { MenuAuthorityApi } from "@/src/entities/menu-authority";
+import type { PageMenuAuthority } from "@/src/entities/menu-authority/model/menu-authority-interface";
+import { isBbsNoticeMenu } from "@/src/shared/lib/bbs-notice-menu";
+import { resolveStatisticsTabId } from "@/src/shared/lib/statistics-menu-url";
+
+export interface Tab {
+    id: string; // 고유 ID (urlPath)
+    label: string; // 탭에 표시될 이름
+    path: string; // 메뉴 경로
+    urlPath: string; // url 경로
+    parentEngNm: string; // 부모 menuEngNm
+    menuItem: MenuItem; // 메뉴 정보
+    /** undefined: 미조회, null: 조회했으나 없음/실패 */
+    pageMenuAuthority?: PageMenuAuthority | null;
+}
+
+async function fetchTabPageMenuAuthority(
+    menuCd: number,
+    apply: (authority: PageMenuAuthority | null) => void,
+): Promise<void> {
+    try {
+        const response = await MenuAuthorityApi.getPageMenuAuthority(menuCd);
+        apply(response?.[0] ?? null);
+    } catch {
+        apply(null);
+    }
+}
+
+function scheduleTabPageMenuAuthorityFetch(
+    get: () => TabStore,
+    set: (
+        partial:
+            | Partial<TabStore>
+            | ((state: TabStore) => Partial<TabStore>),
+    ) => void,
+    tabId: string,
+    menuCd: number,
+): void {
+    void fetchTabPageMenuAuthority(menuCd, (authority) => {
+        const { tabs } = get();
+        if (!tabs.some((tab) => tab.id === tabId)) return;
+        set((state) => ({
+            tabs: state.tabs.map((tab) =>
+                tab.id === tabId ? { ...tab, pageMenuAuthority: authority } : tab,
+            ),
+        }));
+    });
+}
+
+type TabStoreSetState = (
+    partial:
+        | Partial<TabStore>
+        | ((state: TabStore) => Partial<TabStore>),
+) => void;
+
+const tabStoreSetState: TabStoreSetState = (partial) => {
+    useTabStoreHook.setState(partial);
+};
+
+function ensureTabPageMenuAuthority(
+    get: () => TabStore,
+    set: TabStoreSetState,
+    tab: Tab,
+): void {
+    if (tab.pageMenuAuthority !== undefined) return;
+    scheduleTabPageMenuAuthorityFetch(get, set, tab.id, tab.menuItem.menuCd);
+}
+
+/** persist 복원·새로고침 후 활성 탭 메뉴 권한이 없으면 조회 */
+export function hydrateActiveTabPageMenuAuthority(): void {
+    const { tabs, activeTabId } = getTabStoreState();
+    if (!activeTabId) return;
+    const tab = tabs.find((t) => t.id === activeTabId);
+    if (!tab) return;
+    ensureTabPageMenuAuthority(getTabStoreState, tabStoreSetState, tab);
+}
+
+interface TabStore {
+    tabs: Tab[];
+    activeTabId: string | null;
+    menuList: MenuItem[] | null;
+    addTab: (menuItem: MenuItem) => boolean;
+    removeTab: (tabId: string) => void;
+    setActiveTab: (tabId: string) => void;
+    setMenuList: (menuList: MenuItem[] | null) => void;
+    closeAllTabs: () => void;
+    closeOtherTabs: (tabId: string) => void;
+    closeTabsToLeft: (tabId: string) => void;
+    closeTabsToRight: (tabId: string) => void;
+}
+
+export const TAB_STORE_PERSIST_KEY = "st-tab-store";
+const TAB_STORE_VERSION = 1;
+const MAX_TABS = 10;
+
+function tabForPersist(tab: Tab): Tab {
+    return {
+        ...tab,
+        menuItem: { ...tab.menuItem, children: null },
+        pageMenuAuthority: undefined,
+    };
+}
+
+function normalizePersistedTab(tab: Tab): Tab {
+    const tabId = resolveStatisticsTabId(tab.urlPath || tab.id);
+    return tabId === tab.id ? tab : { ...tab, id: tabId };
+}
+
+function sanitizePersistedTabsAndActive(
+    tabs: Tab[],
+    activeTabId: string | null,
+): { tabs: Tab[]; activeTabId: string | null } {
+    let nextTabs = Array.isArray(tabs)
+        ? tabs.filter((tab) => !isBbsNoticeMenu(tab.menuItem)).map(normalizePersistedTab)
+        : [];
+    if (nextTabs.length > MAX_TABS) nextTabs = nextTabs.slice(0, MAX_TABS);
+
+    if (nextTabs.length === 0) {
+        return { tabs: [], activeTabId: null };
+    }
+
+    let nextActive = activeTabId;
+    if (nextActive && !nextTabs.some((t) => t.id === nextActive)) {
+        nextActive = nextTabs[0]?.id ?? null;
+    }
+    if (nextActive == null && nextTabs.length > 0) {
+        nextActive = nextTabs[0]?.id ?? null;
+    }
+
+    return { tabs: nextTabs, activeTabId: nextActive };
+}
+
+const useTabStoreHook = create<TabStore>()(
+    persist(
+        (set, get) => ({
+            tabs: [],
+            activeTabId: null,
+            menuList: null,
+            addTab: (menuItem: MenuItem) => {
+                if (isBbsNoticeMenu(menuItem)) {
+                    return false;
+                }
+
+                const { tabs, menuList } = get();
+                const tabId = resolveStatisticsTabId(menuItem.urlPath || "");
+
+                const existingTab = tabs.find((tab) => tab.id === tabId);
+
+                if (existingTab) {
+                    set({ activeTabId: tabId });
+                    ensureTabPageMenuAuthority(get, set, existingTab);
+                    return true;
+                }
+
+                if (tabs.length < MAX_TABS) {
+                    const newTab: Tab = {
+                        id: tabId,
+                        label: menuItem.menuKornNm,
+                        path: menuItem.menuPath,
+                        urlPath: menuItem.urlPath,
+                        parentEngNm:
+                            menuList?.find(
+                                (m) => m.menuCd === menuItem.parentId,
+                            )?.menuEngNm || "",
+                        menuItem,
+                        pageMenuAuthority: undefined,
+                    };
+
+                    set({
+                        tabs: [...tabs, newTab],
+                        activeTabId: tabId,
+                    });
+
+                    scheduleTabPageMenuAuthorityFetch(
+                        get,
+                        set,
+                        tabId,
+                        menuItem.menuCd,
+                    );
+
+                    return true;
+                }
+                return false;
+            },
+            removeTab: (tabId: string): void => {
+                const { tabs, activeTabId } = get();
+                const newTabs = tabs.filter((tab) => tab.id !== tabId);
+
+                let newActiveTabId = activeTabId;
+                if (activeTabId === tabId) {
+                    const closedTabIndex = tabs.findIndex(
+                        (tab) => tab.id === tabId,
+                    );
+                    if (newTabs.length > 0) {
+                        if (closedTabIndex > 0) {
+                            const prevTab = tabs[closedTabIndex - 1];
+                            newActiveTabId = prevTab ? prevTab.id : null;
+                        } else {
+                            const firstTab = newTabs[0];
+                            newActiveTabId = firstTab ? firstTab.id : null;
+                        }
+                    } else {
+                        newActiveTabId = null;
+                    }
+                }
+
+                set({
+                    tabs: newTabs,
+                    activeTabId: newActiveTabId,
+                });
+                if (newActiveTabId) {
+                    const nextActive = get().tabs.find((t) => t.id === newActiveTabId);
+                    if (nextActive) ensureTabPageMenuAuthority(get, set, nextActive);
+                }
+            },
+            setActiveTab: (tabId: string) => {
+                set({ activeTabId: tabId });
+                const tab = get().tabs.find((t) => t.id === tabId);
+                if (tab) ensureTabPageMenuAuthority(get, set, tab);
+            },
+            setMenuList: (menuList: MenuItem[] | null) => {
+                set({ menuList });
+            },
+            closeAllTabs: () => {
+                set({
+                    tabs: [],
+                    activeTabId: null,
+                });
+            },
+            closeOtherTabs: (tabId: string) => {
+                const { tabs } = get();
+                const tabToKeep = tabs.find((tab) => tab.id === tabId);
+
+                if (tabToKeep) {
+                    set({
+                        tabs: [tabToKeep],
+                        activeTabId: tabId,
+                    });
+                }
+            },
+            closeTabsToLeft: (tabId: string) => {
+                const { tabs, activeTabId } = get();
+                const index = tabs.findIndex((tab) => tab.id === tabId);
+                if (index <= 0) return;
+
+                const newTabs = tabs.slice(index);
+                let newActiveTabId = activeTabId;
+                if (activeTabId && !newTabs.some((tab) => tab.id === activeTabId)) {
+                    newActiveTabId = tabId;
+                }
+
+                set({
+                    tabs: newTabs,
+                    activeTabId: newActiveTabId,
+                });
+                if (newActiveTabId) {
+                    const nextActive = get().tabs.find((t) => t.id === newActiveTabId);
+                    if (nextActive) ensureTabPageMenuAuthority(get, set, nextActive);
+                }
+            },
+            closeTabsToRight: (tabId: string) => {
+                const { tabs, activeTabId } = get();
+                const index = tabs.findIndex((tab) => tab.id === tabId);
+                if (index === -1 || index >= tabs.length - 1) return;
+
+                const newTabs = tabs.slice(0, index + 1);
+                let newActiveTabId = activeTabId;
+                if (activeTabId && !newTabs.some((tab) => tab.id === activeTabId)) {
+                    newActiveTabId = tabId;
+                }
+
+                set({
+                    tabs: newTabs,
+                    activeTabId: newActiveTabId,
+                });
+                if (newActiveTabId) {
+                    const nextActive = get().tabs.find((t) => t.id === newActiveTabId);
+                    if (nextActive) ensureTabPageMenuAuthority(get, set, nextActive);
+                }
+            },
+        }),
+        {
+            name: TAB_STORE_PERSIST_KEY,
+            version: TAB_STORE_VERSION,
+            storage: createJSONStorage(() => localStorage),
+            partialize: (state) => ({
+                tabs: state.tabs.map(tabForPersist),
+                activeTabId: state.activeTabId,
+            }),
+            merge: (persistedState, currentState) => {
+                const p = persistedState as Partial<
+                    Pick<TabStore, "tabs" | "activeTabId">
+                > | null;
+                const rawTabs = p?.tabs;
+                const rawActive = p?.activeTabId;
+                const { tabs, activeTabId } = sanitizePersistedTabsAndActive(
+                    (rawTabs as Tab[]) ?? [],
+                    typeof rawActive === "string" || rawActive === null
+                        ? rawActive
+                        : null,
+                );
+                return {
+                    ...currentState,
+                    tabs,
+                    activeTabId,
+                };
+            },
+            onRehydrateStorage: () => (state, error) => {
+                if (error || !state) return;
+                queueMicrotask(() => hydrateActiveTabPageMenuAuthority());
+            },
+        },
+    ),
+);
+
+export const useTabStore = useTabStoreHook;
+export const getTabStoreState = () => useTabStoreHook.getState();
+
+// 로그아웃 또는 사용자 전환 시 로컬 탭 스냅샷 제거 및 메모리 상태 초기화
+export function clearTabStorePersist(): void {
+    useTabStoreHook.getState().closeAllTabs();
+    useTabStoreHook.persist.clearStorage();
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 59ae08eb0..9fd7a2576 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -104,10 +104,10 @@ importers:
     devDependencies:
       eslint:
         specifier: ^9.0.0
-        version: 9.39.4(jiti@2.6.1)
+        version: 9.39.4(jiti@1.21.7)
       eslint-config-next:
         specifier: 15.3.8
-        version: 15.3.8(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+        version: 15.3.8(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3)
       postcss:
         specifier: ^8.4.49
         version: 8.5.8
@@ -370,10 +370,10 @@ importers:
         version: 5.28.5
       eslint:
         specifier: ^9.0.0
-        version: 9.39.4(jiti@1.21.7)
+        version: 9.39.4(jiti@2.6.1)
       eslint-config-next:
         specifier: 15.3.8
-        version: 15.3.8(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3)
+        version: 15.3.8(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       postcss:
         specifier: ^8.4.49
         version: 8.5.8
@@ -537,6 +537,9 @@ importers:
       '@common/config':
         specifier: workspace:*
         version: link:../../packages/common/config
+      '@common/network':
+        specifier: workspace:*
+        version: link:../../packages/common/network
       '@fontsource-variable/noto-sans-kr':
         specifier: ^5.2.5
         version: 5.2.10
@@ -851,10 +854,10 @@ importers:
         version: 5.28.5
       eslint:
         specifier: ^9
-        version: 9.39.4(jiti@1.21.7)
+        version: 9.39.4(jiti@2.6.1)
       eslint-config-next:
         specifier: 15.3.8
-        version: 15.3.8(eslint@9.39.4(jiti@1.21.7))(typescript@5.9.3)
+        version: 15.3.8(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       postcss:
         specifier: ^8
         version: 8.5.8
@@ -1299,12 +1302,21 @@ importers:
       '@common/assets':
         specifier: workspace:*
         version: link:../../packages/common/assets
+      '@common/auth':
+        specifier: workspace:*
+        version: link:../../packages/common/auth
       '@common/business_components':
         specifier: workspace:*
         version: link:../../packages/common/business_components
       '@common/components':
         specifier: workspace:*
         version: link:../../packages/common/components
+      '@common/config':
+        specifier: workspace:*
+        version: link:../../packages/common/config
+      '@common/network':
+        specifier: workspace:*
+        version: link:../../packages/common/network
       '@fontsource-variable/noto-sans-kr':
         specifier: ^5.2.5
         version: 5.2.10
@@ -1347,6 +1359,9 @@ importers:
       js-cookie:
         specifier: ^3.0.5
         version: 3.0.5
+      js-sha512:
+        specifier: ^0.9.0
+        version: 0.9.0
       lucide-react:
         specifier: ^0.474.0
         version: 0.474.0(react@19.2.4)

From 70faadb27eaa3a7a7d0ec2dbb95cce38ec3f83e6 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 15 Jul 2026 17:52:43 +0900
Subject: [PATCH 22/32] =?UTF-8?q?[as]=20feat:=20=EB=B3=B4=EC=99=84?=
 =?UTF-8?q?=EC=9A=94=EC=B2=AD=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../instl-sncn/api/instl-sncn-service.ts      |   9 +
 .../as/src/entities/instl-sncn/api/queries.ts |  13 +
 apps/as/src/entities/instl-sncn/index.ts      |   1 +
 .../instl-sncn/model/instl-sncn-interface.ts  |  16 +-
 .../pages/fnrs-cnsltn/lib/button-config.ts    |   5 -
 .../fnrs-cnsltn/lib/save-payload-utils.ts     | 318 +++++++++--------
 .../ui/components/floating-action-buttons.tsx |  20 +-
 .../src/pages/instl-sncn/lib/button-config.ts |   5 -
 .../lib/instl-sncn-regist-schema.ts           |  26 +-
 .../instl-sncn/lib/save-payload-utils.ts      | 235 +++++++------
 .../ui/components/floating-action-buttons.tsx |  39 ++-
 .../pages/instl-sncn/ui/instl-form-page.tsx   |  42 ++-
 apps/as/src/widgets/pbadms-sprt/index.ts      |   6 +-
 .../pbadms-sprt/ui/splmnt-dmnd-dialog.tsx     | 329 ++++++++++++++++++
 .../pbadms-sprt/ui/text-input-dialog.tsx      |  77 ----
 15 files changed, 735 insertions(+), 406 deletions(-)
 create mode 100644 apps/as/src/widgets/pbadms-sprt/ui/splmnt-dmnd-dialog.tsx
 delete mode 100644 apps/as/src/widgets/pbadms-sprt/ui/text-input-dialog.tsx

diff --git a/apps/as/src/entities/instl-sncn/api/instl-sncn-service.ts b/apps/as/src/entities/instl-sncn/api/instl-sncn-service.ts
index 38ce8e69a..5739b82bb 100644
--- a/apps/as/src/entities/instl-sncn/api/instl-sncn-service.ts
+++ b/apps/as/src/entities/instl-sncn/api/instl-sncn-service.ts
@@ -65,6 +65,14 @@ async function techReview(id: string, payload: InstlSncnApplySaveRequestDto): Pr
   await client.post(`${BASE}/${id}/tech-review`, payload);
 }
 
+async function submitReqSupplement(
+  id: string,
+  payload: InstlSncnApplySaveRequestDto,
+): Promise<string> {
+  const response = await client.post<string>(`${BASE}/${id}/reqsupplement`, payload);
+  return response.data;
+}
+
 async function remove(id: string): Promise<void> {
   await client.delete(`${BASE}/${id}`);
 }
@@ -80,6 +88,7 @@ export const instlSncnService = {
   saveApply,
   update,
   techReview,
+  submitReqSupplement,
   remove,
   changePrgrsSttsComCd,
 } satisfies InstlSncnMngService;
diff --git a/apps/as/src/entities/instl-sncn/api/queries.ts b/apps/as/src/entities/instl-sncn/api/queries.ts
index ac651be47..6044db955 100644
--- a/apps/as/src/entities/instl-sncn/api/queries.ts
+++ b/apps/as/src/entities/instl-sncn/api/queries.ts
@@ -99,6 +99,19 @@ export function useInstlSncnTechReview() {
   });
 }
 
+export function useInstlSncnSubmitReqSupplement() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, payload }: { id: string; payload: InstlSncnApplySaveRequestDto }) =>
+      instlSncnService.submitReqSupplement(id, payload),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: instlSncnKeys.all });
+      queryClient.invalidateQueries({ queryKey: instlSncnKeys.detail(variables.id) });
+    },
+  });
+}
+
 export function useInstlSncnRemove() {
   const queryClient = useQueryClient();
 
diff --git a/apps/as/src/entities/instl-sncn/index.ts b/apps/as/src/entities/instl-sncn/index.ts
index 9547dd6db..c528eca07 100644
--- a/apps/as/src/entities/instl-sncn/index.ts
+++ b/apps/as/src/entities/instl-sncn/index.ts
@@ -5,6 +5,7 @@ export {
   useInstlSncnList,
   useInstlSncnSidoCombo,
   useInstlSncnSigunguCombo,
+  useInstlSncnSubmitReqSupplement,
   useInstlSncnTechReview,
 } from "./api/queries";
 export {
diff --git a/apps/as/src/entities/instl-sncn/model/instl-sncn-interface.ts b/apps/as/src/entities/instl-sncn/model/instl-sncn-interface.ts
index 500cfb842..0f6fc36ee 100644
--- a/apps/as/src/entities/instl-sncn/model/instl-sncn-interface.ts
+++ b/apps/as/src/entities/instl-sncn/model/instl-sncn-interface.ts
@@ -190,15 +190,15 @@ export interface InstlSncnApplySaveRequestDto extends PbadmsApplySaveHeader {
   /** 설치인가관리 정보 */
   instlSncnMng: InstlSncnMngSaveRequestDto;
   /** 사업규모 목록 */
-  bzScaleList: InstlSncnBzScaleSaveDto[];
+  bzScaleList?: InstlSncnBzScaleSaveDto[];
   /** 총사업비 목록 */
-  bizCstList: InstlSncnBizCstSaveRequestDto[];
+  bizCstList?: InstlSncnBizCstSaveRequestDto[];
   /** 체크리스트 검토결과 목록 */
-  cklstResultList: InstlSncnCklstResultSaveDto[];
+  cklstResultList?: InstlSncnCklstResultSaveDto[];
   /** 체크리스트 검토결과 맵 (rvwStpComCd -> 목록) */
   cklstResultMap?: Record<string, InstlSncnCklstResultSaveDto[]>;
   /** 필수첨부파일 목록 */
-  esntlAtchFileList: InstlSncnEsntlAtchFileSaveDto[];
+  esntlAtchFileList?: InstlSncnEsntlAtchFileSaveDto[];
   /** 검토의견 목록 */
   rvwOpnnList?: InstlSncnRvwOpnnSaveRequestDto[];
   /** 보완요구 목록 */
@@ -222,8 +222,11 @@ export type InstlSncnRvwOpnnResponseDto = InstlSncnRvwOpnnSaveRequestDto &
   };
 
 /** 설치인가관리 상세 응답 DTO */
-export interface InstlSncnMngDetResponse
-  extends PbadmsMngDetResponseBase<InstlSncnMngResponseDto, InstlSncnRvwOpnnResponseDto> {
+export interface InstlSncnMngDetResponse extends PbadmsMngDetResponseBase<
+  InstlSncnMngResponseDto,
+  InstlSncnRvwOpnnResponseDto,
+  InstlSncnSplmntDmndSaveDto
+> {
   detDto: InstlSncnMngResponseDto;
   bizSclList: BizSclTreeDto[];
   bizCstList: BizCstTreeDto[];
@@ -239,6 +242,7 @@ export interface InstlSncnMngService {
   saveApply: (payload: InstlSncnApplySaveRequestDto) => Promise<string>;
   update: (id: string, payload: InstlSncnMngUpdateRequestDto) => Promise<void>;
   techReview: (id: string, payload: InstlSncnApplySaveRequestDto) => Promise<void>;
+  submitReqSupplement: (id: string, payload: InstlSncnApplySaveRequestDto) => Promise<string>;
   remove: (id: string) => Promise<void>;
   changePrgrsSttsComCd: (payload: DocPrgrsUpdateRequestDto) => Promise<void>;
 }
diff --git a/apps/as/src/pages/fnrs-cnsltn/lib/button-config.ts b/apps/as/src/pages/fnrs-cnsltn/lib/button-config.ts
index cc6d8d4b9..55ec0e0ae 100644
--- a/apps/as/src/pages/fnrs-cnsltn/lib/button-config.ts
+++ b/apps/as/src/pages/fnrs-cnsltn/lib/button-config.ts
@@ -15,7 +15,6 @@ export const FNRS_CNSLTN_VIEW_BUTTON_ACTION = {
   dmndSplmnt: "dmndSplmnt",
   atrzAprv: "atrzAprv",
   atrzRply: "atrzRply",
-  grndsChck: "grndsChck",
 } as const;
 
 export type FnrsCnsltnViewButtonAction =
@@ -44,10 +43,6 @@ const ROLE_STATUS_BUTTON_ACTIONS: Record<string, Record<string, FnrsCnsltnViewBu
     LE: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.rvwRply, FNRS_CNSLTN_VIEW_BUTTON_ACTION.rqstTechRvw],
     TP: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.rvwRply],
   },
-  ROLE_USER01: {
-    TE: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.grndsChck],
-    SL: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.splmntCmptn],
-  },
 };
 
 const ROLE_USER01_ATRZ_STATUS_CODES = ["ER", "TE"] as const;
diff --git a/apps/as/src/pages/fnrs-cnsltn/lib/save-payload-utils.ts b/apps/as/src/pages/fnrs-cnsltn/lib/save-payload-utils.ts
index 3c6b5e3a6..7c4782dbb 100644
--- a/apps/as/src/pages/fnrs-cnsltn/lib/save-payload-utils.ts
+++ b/apps/as/src/pages/fnrs-cnsltn/lib/save-payload-utils.ts
@@ -1,150 +1,168 @@
-import type {
-  BizCstItem,
-  BizCstTreeDto,
-  BizSclTreeDto,
-  BzScaleItem,
-  CklstResultItem,
-  EsntlAtchFileItem,
-  EsntlAtchFileMngTreeResponseDto,
-  FnrsCnsltnApplySaveRequestDto,
-  FnrsCnsltnMngDetResponseDto,
-  FnrsCnsltnMngResponseDto,
-  FnrsCnsltnSplmntDmndItem,
-} from "@/entities/fnrs-cnsltn";
-import { mapFnrsSharDetToFormList, toFnrsSharSaveList } from "@/widgets/pbadms-sprt";
-
-import type { ChecklistFormState, ReviewStepCode } from "../model/view-types";
-
-import { toCklstSaveDto } from "./checklist-utils";
-import { type ReviewOpinionGetFormDataResult, toRvwOpnnSaveDto } from "./review-opinion-utils";
-
-export function toBzScaleSaveDto(bizSclList: BizSclTreeDto[]): BzScaleItem[] {
-  return bizSclList
-    .filter((node) => node.useYn === "Y")
-    .map((node) => ({
-      cnstpSeCd: node.cnstpSeCd,
-      bscPl: node.bscPlanQty,
-      budgetReflct: node.bgtRfltQty,
-      thtiDsgn: node.tstmDesignQty,
-    }));
-}
-
-export function toBizCstSaveDto(bizCstList: BizCstTreeDto[]): BizCstItem[] {
-  return bizCstList
-    .filter((node) => node.useYn === "Y")
-    .map((node) => ({
-      acntgSeCd: node.acntgSeCd,
-      bscPlanAmt: node.bscPlanAmt,
-      bgtRfltAmt: node.bgtRfltAmt,
-      tstmDesignAmt: node.tstmDesignAmt,
-    }));
-}
-
-export function toEsntlAtchFileSaveDto(
-  esntlFileList: EsntlAtchFileMngTreeResponseDto[],
-): EsntlAtchFileItem[] {
-  const esntlMap = new Map<string, string>();
-
-  for (const item of esntlFileList) {
-    if (!item.esntlAtchFileId || !item.atflCd) continue;
-    esntlMap.set(item.esntlAtchFileId, item.atflCd);
-  }
-
-  return Array.from(esntlMap.entries()).map(([esntlAtchFileId, atchFileGroupId]) => ({
-    esntlAtchFileId,
-    atchFileGroupId,
-  }));
-}
-
-export function buildSavePayload(
-  data: FnrsCnsltnMngDetResponseDto,
-  checklistFormState: ChecklistFormState,
-  reviewStep: ReviewStepCode,
-  prgrsSttsComCd: string,
-): FnrsCnsltnApplySaveRequestDto {
-  const detDto = data.detDto;
-  if (!detDto) {
-    throw new Error("상세 정보(detDto)가 없습니다.");
-  }
-
-  const bizSclList = data.bizSclList ?? [];
-  const bizCstList = data.bizCstList ?? [];
-  const cklstResultList = data.cklstResultList ?? [];
-  const esntlFileList = data.esntlFileList ?? [];
-
-  return {
-    fnrsCnsltnMng: { ...detDto, prgrsSttsComCd },
-    bzScaleList: toBzScaleSaveDto(bizSclList),
-    bizCstList: toBizCstSaveDto(bizCstList),
-    cklstResultList: toCklstSaveDto(cklstResultList, checklistFormState, reviewStep),
-    esntlAtchFileList: toEsntlAtchFileSaveDto(esntlFileList),
-    fnrsSharList: toFnrsSharSaveList(mapFnrsSharDetToFormList(data.fnrsSharList ?? [])),
-  };
-}
-
-export function buildTechReviewReplyPayload(
-  data: FnrsCnsltnMngDetResponseDto,
-  checklistFormState: ChecklistFormState,
-  reviewStep: ReviewStepCode,
-  prgrsSttsComCd: string,
-  techReViewSaveCd: string,
-  reviewOpinionFormData?: ReviewOpinionGetFormDataResult | null,
-  opnrNm?: string,
-): FnrsCnsltnApplySaveRequestDto {
-  return {
-    ...buildSavePayload(data, checklistFormState, reviewStep, prgrsSttsComCd),
-    techReViewSaveCd,
-    rvwStpCd: reviewStep,
-    rvwOpnnList: toRvwOpnnSaveDto(data, reviewOpinionFormData, opnrNm),
-  };
-}
-
-export function buildSupplementReqPayload(
-  data: FnrsCnsltnMngDetResponseDto,
-  splmntDmndCn: string,
-): FnrsCnsltnApplySaveRequestDto {
-  const detDto = data.detDto;
-  if (!detDto) {
-    throw new Error("상세 정보(detDto)가 없습니다.");
-  }
-
-  const nextSn =
-    (data.splmntDmndList?.reduce((max, item) => Math.max(max, item.splmntDmndSn ?? 0), 0) ?? 0) + 1;
-
-  const splmntDmndList: FnrsCnsltnSplmntDmndItem[] = [
-    ...(data.splmntDmndList ?? []),
-    {
-      splmntDmndSn: nextSn,
-      splmntDmndCn,
-      cmptnYn: "N",
-    },
-  ];
-
-  return {
-    fnrsCnsltnMng: detDto,
-    splmntDmndList,
-  };
-}
-
-export function buildSupplementSubmitPayload(
-  data: FnrsCnsltnMngDetResponseDto,
-  checklistFormState: ChecklistFormState,
-): FnrsCnsltnApplySaveRequestDto {
-  return {
-    ...buildSavePayload(data, checklistFormState, "LOCAL", "SL"),
-    splmntDmndList: data.splmntDmndList,
-  };
-}
-
-export function buildTechReviewPayload(
-  det: FnrsCnsltnMngResponseDto,
-  cklstResultList: CklstResultItem[],
-): FnrsCnsltnApplySaveRequestDto {
-  return {
-    fnrsCnsltnMng: { ...det, prgrsSttsComCd: "ER" },
-    bzScaleList: [],
-    bizCstList: [],
-    cklstResultList,
-    esntlAtchFileList: [],
-  };
-}
+import type {
+  BizCstItem,
+  BizCstTreeDto,
+  BizSclTreeDto,
+  BzScaleItem,
+  CklstResultItem,
+  EsntlAtchFileItem,
+  EsntlAtchFileMngTreeResponseDto,
+  FnrsCnsltnApplySaveRequestDto,
+  FnrsCnsltnMngDetResponseDto,
+  FnrsCnsltnMngResponseDto,
+  FnrsCnsltnSplmntDmndItem,
+} from "@/entities/fnrs-cnsltn";
+import {
+  mapFnrsSharDetToFormList,
+  type SplmntDmndDialogConfirmPayload,
+  toFnrsSharSaveList,
+} from "@/widgets/pbadms-sprt";
+
+import type { ChecklistFormState, ReviewStepCode } from "../model/view-types";
+
+import { toCklstSaveDto } from "./checklist-utils";
+import { type ReviewOpinionGetFormDataResult, toRvwOpnnSaveDto } from "./review-opinion-utils";
+
+export function toBzScaleSaveDto(bizSclList: BizSclTreeDto[]): BzScaleItem[] {
+  return bizSclList
+    .filter((node) => node.useYn === "Y")
+    .map((node) => ({
+      cnstpSeCd: node.cnstpSeCd,
+      bscPl: node.bscPlanQty,
+      budgetReflct: node.bgtRfltQty,
+      thtiDsgn: node.tstmDesignQty,
+    }));
+}
+
+export function toBizCstSaveDto(bizCstList: BizCstTreeDto[]): BizCstItem[] {
+  return bizCstList
+    .filter((node) => node.useYn === "Y")
+    .map((node) => ({
+      acntgSeCd: node.acntgSeCd,
+      bscPlanAmt: node.bscPlanAmt,
+      bgtRfltAmt: node.bgtRfltAmt,
+      tstmDesignAmt: node.tstmDesignAmt,
+    }));
+}
+
+export function toEsntlAtchFileSaveDto(
+  esntlFileList: EsntlAtchFileMngTreeResponseDto[],
+): EsntlAtchFileItem[] {
+  const esntlMap = new Map<string, string>();
+
+  for (const item of esntlFileList) {
+    if (!item.esntlAtchFileId || !item.atflCd) continue;
+    esntlMap.set(item.esntlAtchFileId, item.atflCd);
+  }
+
+  return Array.from(esntlMap.entries()).map(([esntlAtchFileId, atchFileGroupId]) => ({
+    esntlAtchFileId,
+    atchFileGroupId,
+  }));
+}
+
+export function buildSavePayload(
+  data: FnrsCnsltnMngDetResponseDto,
+  checklistFormState: ChecklistFormState,
+  reviewStep: ReviewStepCode,
+  prgrsSttsComCd: string,
+): FnrsCnsltnApplySaveRequestDto {
+  const detDto = data.detDto;
+  if (!detDto) {
+    throw new Error("상세 정보(detDto)가 없습니다.");
+  }
+
+  const bizSclList = data.bizSclList ?? [];
+  const bizCstList = data.bizCstList ?? [];
+  const cklstResultList = data.cklstResultList ?? [];
+  const esntlFileList = data.esntlFileList ?? [];
+
+  return {
+    fnrsCnsltnMng: { ...detDto, prgrsSttsComCd },
+    bzScaleList: toBzScaleSaveDto(bizSclList),
+    bizCstList: toBizCstSaveDto(bizCstList),
+    cklstResultList: toCklstSaveDto(cklstResultList, checklistFormState, reviewStep),
+    esntlAtchFileList: toEsntlAtchFileSaveDto(esntlFileList),
+    fnrsSharList: toFnrsSharSaveList(mapFnrsSharDetToFormList(data.fnrsSharList ?? [])),
+  };
+}
+
+export function buildTechReviewReplyPayload(
+  data: FnrsCnsltnMngDetResponseDto,
+  checklistFormState: ChecklistFormState,
+  reviewStep: ReviewStepCode,
+  prgrsSttsComCd: string,
+  techReViewSaveCd: string,
+  reviewOpinionFormData?: ReviewOpinionGetFormDataResult | null,
+  opnrNm?: string,
+): FnrsCnsltnApplySaveRequestDto {
+  return {
+    ...buildSavePayload(data, checklistFormState, reviewStep, prgrsSttsComCd),
+    techReViewSaveCd,
+    rvwStpCd: reviewStep,
+    rvwOpnnList: toRvwOpnnSaveDto(data, reviewOpinionFormData, opnrNm),
+  };
+}
+
+export function buildSupplementReqPayload(
+  data: FnrsCnsltnMngDetResponseDto,
+  payload: SplmntDmndDialogConfirmPayload,
+  checklistFormState: ChecklistFormState,
+): FnrsCnsltnApplySaveRequestDto {
+  const existingItems: FnrsCnsltnSplmntDmndItem[] = (data.splmntDmndList ?? []).map((item) =>
+    toSplmntDmndSaveItem(item),
+  );
+
+  const nextSn =
+    existingItems.reduce((max, item) => Math.max(max, item.splmntDmndSn ?? 0), 0) + 1;
+
+  const newItems: FnrsCnsltnSplmntDmndItem[] = payload.items.map((item, index) => ({
+    splmntDmndSn: nextSn + index,
+    splmntArtclComCd: item.splmntArtclComCd,
+    splmntDmndCn: item.splmntDmndCn,
+    splmntDmndAtchFileGroupId: item.splmntDmndAtchFileGroupId,
+    cmptnYn: "N",
+  }));
+
+  return {
+    ...buildSavePayload(data, checklistFormState, "LOCAL", "SL"),
+    splmntDmndList: [...existingItems, ...newItems],
+  };
+}
+
+function toSplmntDmndSaveItem(item: FnrsCnsltnSplmntDmndItem): FnrsCnsltnSplmntDmndItem {
+  return {
+    splmntDmndSn: item.splmntDmndSn,
+    splmntArtclComCd: item.splmntArtclComCd,
+    splmntDmndCn: item.splmntDmndCn,
+    splmntDmndDt: item.splmntDmndDt,
+    splmntDmndAtchFileGroupId: item.splmntDmndAtchFileGroupId,
+    splmntCn: item.splmntCn,
+    splmntPicNm: item.splmntPicNm,
+    splmntCmptnDt: item.splmntCmptnDt,
+    splmntAtchFileGroupId: item.splmntAtchFileGroupId,
+    cmptnYn: item.cmptnYn,
+  };
+}
+
+export function buildSupplementSubmitPayload(
+  data: FnrsCnsltnMngDetResponseDto,
+  checklistFormState: ChecklistFormState,
+): FnrsCnsltnApplySaveRequestDto {
+  return {
+    ...buildSavePayload(data, checklistFormState, "LOCAL", "SL"),
+    splmntDmndList: data.splmntDmndList,
+  };
+}
+
+export function buildTechReviewPayload(
+  det: FnrsCnsltnMngResponseDto,
+  cklstResultList: CklstResultItem[],
+): FnrsCnsltnApplySaveRequestDto {
+  return {
+    fnrsCnsltnMng: { ...det, prgrsSttsComCd: "ER" },
+    bzScaleList: [],
+    bizCstList: [],
+    cklstResultList,
+    esntlAtchFileList: [],
+  };
+}
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx
index 47c222dfc..46d8f9eee 100644
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx
+++ b/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx
@@ -27,7 +27,7 @@ import {
   fnrsCnsltnMngService,
 } from "@/entities/fnrs-cnsltn";
 import { useRvwMnpwMngLoginUserList } from "@/entities/rvw-mnpw";
-import { TextInputDialog } from "@/widgets/pbadms-sprt";
+import { SplmntDmndDialog, type SplmntDmndDialogConfirmPayload } from "@/widgets/pbadms-sprt";
 import { Button } from "@common/components";
 
 import {
@@ -402,12 +402,12 @@ function FloatingActionButtons({
     setActiveDialog("dmndSplmnt");
   }
 
-  async function handleDmndSplmntConfirm(splmntDmndCn: string) {
+  async function handleDmndSplmntConfirm(payload: SplmntDmndDialogConfirmPayload) {
     setActiveDialog(null);
-    const payload = buildSupplementReqPayload(data, splmntDmndCn);
+    const requestPayload = buildSupplementReqPayload(data, payload, checklistFormState);
     await executeAction({
       action: FNRS_CNSLTN_VIEW_BUTTON_ACTION.dmndSplmnt,
-      request: payload,
+      request: requestPayload,
       successMessage: "보완요청이 처리되었습니다.",
     });
   }
@@ -514,13 +514,11 @@ function FloatingActionButtons({
         onConfirm={handleElaprTmpltConfirm}
       />
 
-      <TextInputDialog
+      <SplmntDmndDialog
         open={activeDialog === "dmndSplmnt"}
         onOpenChange={() => setActiveDialog(null)}
-        title="보완요청 내용 입력"
-        placeholder="보완요청 내용을 입력하세요."
         isSubmitting={isProcessing}
-        onConfirm={handleDmndSplmntConfirm}
+        onConfirm={(payload) => void handleDmndSplmntConfirm(payload)}
       />
 
       <ElaprApprovalDialog
@@ -632,11 +630,6 @@ async function handleAtrzRply(context: ActionHandlerContext): Promise<void> {
   context.onSuccess?.();
 }
 
-async function handleGrndsChck(context: ActionHandlerContext): Promise<void> {
-  // TODO: 현장점검 등록 API 호출
-  context.onSuccess?.();
-}
-
 const buttonActionHandlers: Record<FnrsCnsltnViewButtonAction, ActionHandler> = {
   strg: handleSaveApply,
   aply: handleSaveApply,
@@ -654,7 +647,6 @@ const buttonActionHandlers: Record<FnrsCnsltnViewButtonAction, ActionHandler> =
   dmndSplmnt: handleDmndSplmnt,
   atrzAprv: handleAtrzAprv,
   atrzRply: handleAtrzRply,
-  grndsChck: handleGrndsChck,
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/apps/as/src/pages/instl-sncn/lib/button-config.ts b/apps/as/src/pages/instl-sncn/lib/button-config.ts
index 83ad6c54a..28ce89f9e 100644
--- a/apps/as/src/pages/instl-sncn/lib/button-config.ts
+++ b/apps/as/src/pages/instl-sncn/lib/button-config.ts
@@ -15,7 +15,6 @@ export const INSTL_SNCN_VIEW_BUTTON_ACTION = {
   dmndSplmnt: "dmndSplmnt",
   atrzAprv: "atrzAprv",
   atrzRply: "atrzRply",
-  grndsChck: "grndsChck",
 } as const;
 
 export type InstlSncnViewButtonAction =
@@ -44,10 +43,6 @@ const ROLE_STATUS_BUTTON_ACTIONS: Record<string, Record<string, InstlSncnViewBut
     LE: [INSTL_SNCN_VIEW_BUTTON_ACTION.rvwRply, INSTL_SNCN_VIEW_BUTTON_ACTION.rqstTechRvw],
     TP: [INSTL_SNCN_VIEW_BUTTON_ACTION.rvwRply],
   },
-  ROLE_USER01: {
-    TE: [INSTL_SNCN_VIEW_BUTTON_ACTION.grndsChck],
-    SL: [INSTL_SNCN_VIEW_BUTTON_ACTION.splmntCmptn],
-  },
 };
 
 const ROLE_USER01_ATRZ_STATUS_CODES = ["ER", "TE"] as const;
diff --git a/apps/as/src/pages/instl-sncn/lib/instl-sncn-regist-schema.ts b/apps/as/src/pages/instl-sncn/lib/instl-sncn-regist-schema.ts
index ae55e92b9..64865d49c 100644
--- a/apps/as/src/pages/instl-sncn/lib/instl-sncn-regist-schema.ts
+++ b/apps/as/src/pages/instl-sncn/lib/instl-sncn-regist-schema.ts
@@ -24,23 +24,23 @@ export const instlSncnRegistSchema = z.object({
     aplcntMblTelno: z.string().optional(),
     aplcntOgdpNm: z.string().optional(),
     aplcntEmlAddr: z.string().optional(),
-    instlSncnDocNo: z.string().optional(),
+    instlSncnDocNo: z.string().nullish(),
     admdstCd: z.string().optional(),
     envoSeComCd: z.string().optional(),
-    prgrsSttsComCd: z.string().optional(),
+    prgrsSttsComCd: z.string().nullish(),
     atchFileGroupId: z.string().optional(),
     rtlztnFcltSeComCd: z.string().optional(),
     rtlztnUsgSeComCd: z.string().optional(),
-    envoSeCdNm: z.string().optional(),
-    sncnSeCdNm: z.string().optional(),
-    taskSeCdNm: z.string().optional(),
-    prgrsSttsCdNm: z.string().optional(),
-    sido: z.string().optional(),
-    gugun: z.string().optional(),
-    regDt: z.string().optional(),
-    rgtr: z.string().optional(),
-    rgtrNm: z.string().optional(),
-    mdfcnDt: z.string().optional(),
+    envoSeCdNm: z.string().nullish(),
+    sncnSeCdNm: z.string().nullish(),
+    taskSeCdNm: z.string().nullish(),
+    prgrsSttsCdNm: z.string().nullish(),
+    sido: z.string().nullish(),
+    gugun: z.string().nullish(),
+    regDt: z.string().nullish(),
+    rgtr: z.string().nullish(),
+    rgtrNm: z.string().nullish(),
+    mdfcnDt: z.string().nullish(),
   }),
   bzScaleList: z.array(
     z.object({
@@ -66,7 +66,7 @@ export const instlSncnRegistSchema = z.object({
       cklstRvwSn: z.number(),
       rvwStpComCd: z.string(),
       selected: z.enum(["Y", "N"]).nullable(),
-      picRvwCn: z.string().nullable().optional(),
+      picRvwCn: z.string().nullish(),
     }),
   ),
   esntlAtchFileList: z.array(
diff --git a/apps/as/src/pages/instl-sncn/lib/save-payload-utils.ts b/apps/as/src/pages/instl-sncn/lib/save-payload-utils.ts
index adea42a99..209c02a3c 100644
--- a/apps/as/src/pages/instl-sncn/lib/save-payload-utils.ts
+++ b/apps/as/src/pages/instl-sncn/lib/save-payload-utils.ts
@@ -1,104 +1,131 @@
-import type {
-  BizCstTreeDto,
-  BizSclTreeDto,
-  EsntlAtchFileMngTreeResponseDto,
-  InstlSncnApplySaveRequestDto,
-  InstlSncnBizCstSaveRequestDto,
-  InstlSncnBzScaleSaveDto,
-  InstlSncnCklstResultSaveDto,
-  InstlSncnEsntlAtchFileSaveDto,
-  InstlSncnMngDetResponse,
-  InstlSncnMngResponseDto,
-  ReviewStepCode,
-} from "@/entities/instl-sncn";
-
-import type { ChecklistFormState } from "../model/view-types";
-
-import { toCklstSaveDto } from "./checklist-utils";
-import { type ReviewOpinionFormData, toRvwOpnnSaveDto } from "./review-opinion-utils";
-
-export function toBzScaleSaveDto(bizSclList: BizSclTreeDto[]): InstlSncnBzScaleSaveDto[] {
-  return bizSclList
-    .filter((node) => node.useYn === "Y")
-    .map((node) => ({
-      cnstpSeCd: node.cnstpSeCd,
-      bscPl: node.bscPlanQty,
-      budgetReflct: node.bgtRfltQty,
-      thtiDsgn: node.tstmDesignQty,
-      diff: node.tstmDesignQty - node.bgtRfltQty,
-    }));
-}
-
-export function toBizCstSaveDto(bizCstList: BizCstTreeDto[]): InstlSncnBizCstSaveRequestDto[] {
-  return bizCstList
-    .filter((node) => node.useYn === "Y")
-    .map((node) => ({
-      acntgSeCd: node.acntgSeCd,
-      bscPlanAmt: node.bscPlanAmt,
-      bgtRfltAmt: node.bgtRfltAmt,
-      tstmDesignAmt: node.tstmDesignAmt,
-    }));
-}
-
-export function toEsntlAtchFileSaveDto(
-  esntlFileList: EsntlAtchFileMngTreeResponseDto[],
-): InstlSncnEsntlAtchFileSaveDto[] {
-  const esntlMap = new Map<string, string>();
-
-  for (const item of esntlFileList) {
-    if (!item.esntlAtchFileId || !item.atflCd) continue;
-    esntlMap.set(item.esntlAtchFileId, item.atflCd);
-  }
-
-  return Array.from(esntlMap.entries()).map(([esntlAtchFileId, atchFileGroupId]) => ({
-    esntlAtchFileId,
-    atchFileGroupId,
-  }));
-}
-
-export function buildSavePayload(
-  data: InstlSncnMngDetResponse,
-  checklistFormState: ChecklistFormState,
-  reviewStep: ReviewStepCode,
-  prgrsSttsComCd: string,
-): InstlSncnApplySaveRequestDto {
-  const { detDto, bizSclList, bizCstList, cklstResultList = [], esntlFileList } = data;
-
-  return {
-    instlSncnMng: { ...detDto, prgrsSttsComCd },
-    bzScaleList: toBzScaleSaveDto(bizSclList),
-    bizCstList: toBizCstSaveDto(bizCstList),
-    cklstResultList: toCklstSaveDto(cklstResultList, checklistFormState, reviewStep),
-    esntlAtchFileList: toEsntlAtchFileSaveDto(esntlFileList),
-  };
-}
-
-export function buildTechReviewReplyPayload(
-  data: InstlSncnMngDetResponse,
-  checklistFormState: ChecklistFormState,
-  reviewStep: ReviewStepCode,
-  prgrsSttsComCd: string,
-  techReViewSaveCd: string,
-  reviewOpinionFormData?: ReviewOpinionFormData | null,
-  opnrNm?: string,
-): InstlSncnApplySaveRequestDto {
-  return {
-    ...buildSavePayload(data, checklistFormState, reviewStep, prgrsSttsComCd),
-    techReViewSaveCd,
-    rvwStpCd: reviewStep,
-    rvwOpnnList: toRvwOpnnSaveDto(data, reviewOpinionFormData, opnrNm),
-  };
-}
-
-export function buildTechReviewPayload(
-  det: InstlSncnMngResponseDto,
-  cklstResultList: InstlSncnCklstResultSaveDto[],
-): InstlSncnApplySaveRequestDto {
-  return {
-    instlSncnMng: { ...det, prgrsSttsComCd: "ER" },
-    bzScaleList: [],
-    bizCstList: [],
-    cklstResultList,
-    esntlAtchFileList: [],
-  };
-}
+import type {
+  BizCstTreeDto,
+  BizSclTreeDto,
+  EsntlAtchFileMngTreeResponseDto,
+  InstlSncnApplySaveRequestDto,
+  InstlSncnBizCstSaveRequestDto,
+  InstlSncnBzScaleSaveDto,
+  InstlSncnEsntlAtchFileSaveDto,
+  InstlSncnMngDetResponse,
+  InstlSncnSplmntDmndSaveDto,
+  ReviewStepCode,
+} from "@/entities/instl-sncn";
+import type { SplmntDmndDialogConfirmPayload } from "@/widgets/pbadms-sprt";
+
+import type { ChecklistFormState } from "../model/view-types";
+
+import { toCklstSaveDto } from "./checklist-utils";
+import { type ReviewOpinionFormData, toRvwOpnnSaveDto } from "./review-opinion-utils";
+
+export function toBzScaleSaveDto(bizSclList: BizSclTreeDto[]): InstlSncnBzScaleSaveDto[] {
+  return bizSclList
+    .filter((node) => node.useYn === "Y")
+    .map((node) => ({
+      cnstpSeCd: node.cnstpSeCd,
+      bscPl: node.bscPlanQty,
+      budgetReflct: node.bgtRfltQty,
+      thtiDsgn: node.tstmDesignQty,
+      diff: node.tstmDesignQty - node.bgtRfltQty,
+    }));
+}
+
+export function toBizCstSaveDto(bizCstList: BizCstTreeDto[]): InstlSncnBizCstSaveRequestDto[] {
+  return bizCstList
+    .filter((node) => node.useYn === "Y")
+    .map((node) => ({
+      acntgSeCd: node.acntgSeCd,
+      bscPlanAmt: node.bscPlanAmt,
+      bgtRfltAmt: node.bgtRfltAmt,
+      tstmDesignAmt: node.tstmDesignAmt,
+    }));
+}
+
+export function toEsntlAtchFileSaveDto(
+  esntlFileList: EsntlAtchFileMngTreeResponseDto[],
+): InstlSncnEsntlAtchFileSaveDto[] {
+  const esntlMap = new Map<string, string>();
+
+  for (const item of esntlFileList) {
+    if (!item.esntlAtchFileId || !item.atflCd) continue;
+    esntlMap.set(item.esntlAtchFileId, item.atflCd);
+  }
+
+  return Array.from(esntlMap.entries()).map(([esntlAtchFileId, atchFileGroupId]) => ({
+    esntlAtchFileId,
+    atchFileGroupId,
+  }));
+}
+
+export function buildSavePayload(
+  data: InstlSncnMngDetResponse,
+  checklistFormState: ChecklistFormState,
+  reviewStep: ReviewStepCode,
+  prgrsSttsComCd: string,
+): InstlSncnApplySaveRequestDto {
+  const { detDto, bizSclList, bizCstList, cklstResultList = [], esntlFileList } = data;
+
+  return {
+    instlSncnMng: { ...detDto, prgrsSttsComCd },
+    bzScaleList: toBzScaleSaveDto(bizSclList),
+    bizCstList: toBizCstSaveDto(bizCstList),
+    cklstResultList: toCklstSaveDto(cklstResultList, checklistFormState, reviewStep),
+    esntlAtchFileList: toEsntlAtchFileSaveDto(esntlFileList),
+  };
+}
+
+export function buildTechReviewReplyPayload(
+  data: InstlSncnMngDetResponse,
+  checklistFormState: ChecklistFormState,
+  reviewStep: ReviewStepCode,
+  prgrsSttsComCd: string,
+  techReViewSaveCd: string,
+  reviewOpinionFormData?: ReviewOpinionFormData | null,
+  opnrNm?: string,
+): InstlSncnApplySaveRequestDto {
+  return {
+    ...buildSavePayload(data, checklistFormState, reviewStep, prgrsSttsComCd),
+    techReViewSaveCd,
+    rvwStpCd: reviewStep,
+    rvwOpnnList: toRvwOpnnSaveDto(data, reviewOpinionFormData, opnrNm),
+  };
+}
+
+export function buildSupplementReqPayload(
+  data: InstlSncnMngDetResponse,
+  payload: SplmntDmndDialogConfirmPayload,
+  checklistFormState: ChecklistFormState,
+): InstlSncnApplySaveRequestDto {
+  const existingItems: InstlSncnSplmntDmndSaveDto[] = (data.splmntDmndList ?? []).map((item) =>
+    toSplmntDmndSaveItem(item),
+  );
+
+  const nextSn = existingItems.reduce((max, item) => Math.max(max, item.splmntDmndSn ?? 0), 0) + 1;
+
+  const newItems: InstlSncnSplmntDmndSaveDto[] = payload.items.map((item, index) => ({
+    splmntDmndSn: nextSn + index,
+    splmntArtclComCd: item.splmntArtclComCd,
+    splmntDmndCn: item.splmntDmndCn,
+    splmntDmndAtchFileGroupId: item.splmntDmndAtchFileGroupId,
+    cmptnYn: "N",
+  }));
+
+  return {
+    ...buildSavePayload(data, checklistFormState, "LOCAL", "SL"),
+    splmntDmndList: [...existingItems, ...newItems],
+  };
+}
+
+function toSplmntDmndSaveItem(item: InstlSncnSplmntDmndSaveDto): InstlSncnSplmntDmndSaveDto {
+  return {
+    splmntDmndSn: item.splmntDmndSn,
+    splmntArtclComCd: item.splmntArtclComCd,
+    splmntDmndCn: item.splmntDmndCn,
+    splmntDmndDt: item.splmntDmndDt,
+    splmntDmndAtchFileGroupId: item.splmntDmndAtchFileGroupId,
+    splmntCn: item.splmntCn,
+    splmntPicNm: item.splmntPicNm,
+    splmntCmptnDt: item.splmntCmptnDt,
+    splmntAtchFileGroupId: item.splmntAtchFileGroupId,
+    cmptnYn: item.cmptnYn,
+  };
+}
diff --git a/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx b/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx
index eaed1e8c5..a65ddc291 100644
--- a/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx
@@ -27,7 +27,7 @@ import {
   instlSncnService,
 } from "@/entities/instl-sncn";
 import { useRvwMnpwMngLoginUserList } from "@/entities/rvw-mnpw";
-import { TextInputDialog } from "@/widgets/pbadms-sprt";
+import { SplmntDmndDialog, type SplmntDmndDialogConfirmPayload } from "@/widgets/pbadms-sprt";
 import { Button } from "@common/components";
 
 import {
@@ -37,7 +37,11 @@ import {
   needsRoleUser01AtrzResolve,
 } from "../../lib/button-config";
 import { computeReviewStepChecklistProgress } from "../../lib/checklist-utils";
-import { buildSavePayload, buildTechReviewReplyPayload } from "../../lib/save-payload-utils";
+import {
+  buildSavePayload,
+  buildSupplementReqPayload,
+  buildTechReviewReplyPayload,
+} from "../../lib/save-payload-utils";
 import { type ChecklistFormState } from "../../model/view-types";
 import type { TechReviewOpinionSectionHandle } from "../sections/tech-review-opinion-section";
 
@@ -401,11 +405,12 @@ function FloatingActionButtons({
     setActiveDialog("dmndSplmnt");
   }
 
-  async function handleDmndSplmntConfirm(splmntCn: string) {
+  async function handleDmndSplmntConfirm(payload: SplmntDmndDialogConfirmPayload) {
     setActiveDialog(null);
+    const requestPayload = buildSupplementReqPayload(data, payload, checklistFormState);
     await executeAction({
       action: INSTL_SNCN_VIEW_BUTTON_ACTION.dmndSplmnt,
-      request: splmntCn,
+      request: requestPayload,
       successMessage: "보완요청이 처리되었습니다.",
     });
   }
@@ -517,13 +522,11 @@ function FloatingActionButtons({
         onConfirm={handleElaprTmpltConfirm}
       />
 
-      <TextInputDialog
+      <SplmntDmndDialog
         open={activeDialog === "dmndSplmnt"}
         onOpenChange={() => setActiveDialog(null)}
-        title="보완요청 내용 입력"
-        placeholder="보완요청 내용을 입력하세요."
         isSubmitting={isProcessing}
-        onConfirm={(value) => void handleDmndSplmntConfirm(value)}
+        onConfirm={handleDmndSplmntConfirm}
       />
 
       <ElaprApprovalDialog
@@ -601,9 +604,17 @@ async function handleDsgntRvwr(
   }
 }
 
-async function handleDmndSplmnt(context: ActionHandlerContext): Promise<void> {
-  // TODO: 보완요청 API 호출
-  context.onSuccess?.();
+async function handleDmndSplmnt(
+  context: ActionHandlerContext<InstlSncnApplySaveRequestDto>,
+): Promise<void> {
+  try {
+    const docNo = context.data.detDto.instlSncnDocNo;
+    if (!docNo) throw new Error("문서번호가 없습니다.");
+    await instlSncnService.submitReqSupplement(docNo, context.request);
+    context.onSuccess?.();
+  } catch (error) {
+    context.onError?.(error as Error);
+  }
 }
 
 async function handleAtrzAprv(context: ActionHandlerContext): Promise<void> {
@@ -616,11 +627,6 @@ async function handleAtrzRply(context: ActionHandlerContext): Promise<void> {
   context.onSuccess?.();
 }
 
-async function handleGrndsChck(context: ActionHandlerContext): Promise<void> {
-  // TODO: 현장점검 등록 API 호출
-  context.onSuccess?.();
-}
-
 const buttonActionHandlers: Record<InstlSncnViewButtonAction, ActionHandler> = {
   strg: handleSaveApply,
   aply: handleSaveApply,
@@ -638,7 +644,6 @@ const buttonActionHandlers: Record<InstlSncnViewButtonAction, ActionHandler> = {
   dmndSplmnt: handleDmndSplmnt,
   atrzAprv: handleAtrzAprv,
   atrzRply: handleAtrzRply,
-  grndsChck: handleGrndsChck,
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx b/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx
index e7b482c67..1e5230384 100644
--- a/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx
@@ -48,6 +48,7 @@ function InstlFormPage({ id, mode, initialData, taskSeComCd }: InstlFormPageProp
   const alert = useAlertStore((state) => state.setMessage);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const isEditMode = mode === "edit";
+  const isSplmntPrgrsStts = initialData?.detDto.prgrsSttsComCd === "SL";
 
   const form = useForm<InstlSncnRegistFormData>({
     resolver: zodResolver(instlSncnRegistSchema),
@@ -186,23 +187,36 @@ function InstlFormPage({ id, mode, initialData, taskSeComCd }: InstlFormPageProp
             >
               목록
             </Button>
-            <Button type="submit" disabled={isSubmitting}>
-              저장
-            </Button>
-            {isEditMode && (
+            {!isSplmntPrgrsStts ? (
               <>
-                <Button
-                  color="green"
-                  type="button"
-                  onClick={handleApplyClick}
-                  disabled={isSubmitting}
-                >
-                  신청완료
-                </Button>
-                <Button color="red" type="button" onClick={handleDelClick} disabled={isSubmitting}>
-                  삭제
+                <Button type="submit" disabled={isSubmitting}>
+                  저장
                 </Button>
+                {isEditMode && (
+                  <>
+                    <Button
+                      color="green"
+                      type="button"
+                      onClick={handleApplyClick}
+                      disabled={isSubmitting}
+                    >
+                      신청완료
+                    </Button>
+                    <Button
+                      color="red"
+                      type="button"
+                      onClick={handleDelClick}
+                      disabled={isSubmitting}
+                    >
+                      삭제
+                    </Button>
+                  </>
+                )}
               </>
+            ) : (
+              <Button type="submit" disabled={isSubmitting}>
+                보완완료
+              </Button>
             )}
           </div>
         </div>
diff --git a/apps/as/src/widgets/pbadms-sprt/index.ts b/apps/as/src/widgets/pbadms-sprt/index.ts
index aeee59a58..bec3bc4c6 100644
--- a/apps/as/src/widgets/pbadms-sprt/index.ts
+++ b/apps/as/src/widgets/pbadms-sprt/index.ts
@@ -30,5 +30,9 @@ export { ContactInfoFormSection } from "./ui/contact-info-form-section";
 export { FnrsSharFormSection } from "./ui/fnrs-shar-form-section";
 export { PrivacyConsentSection } from "./ui/privacy-consent-section";
 export { SectionCollapsible } from "./ui/section-collapsible";
+export {
+  SplmntDmndDialog,
+  type SplmntDmndDialogConfirmItem,
+  type SplmntDmndDialogConfirmPayload,
+} from "./ui/splmnt-dmnd-dialog";
 export { TaskSePickerDialog } from "./ui/task-se-picker-dialog";
-export { TextInputDialog } from "./ui/text-input-dialog";
diff --git a/apps/as/src/widgets/pbadms-sprt/ui/splmnt-dmnd-dialog.tsx b/apps/as/src/widgets/pbadms-sprt/ui/splmnt-dmnd-dialog.tsx
new file mode 100644
index 000000000..9373285c2
--- /dev/null
+++ b/apps/as/src/widgets/pbadms-sprt/ui/splmnt-dmnd-dialog.tsx
@@ -0,0 +1,329 @@
+"use client";
+
+import { useEffect, useId, useState } from "react";
+
+import { getDefaultFileKey, useTus } from "@/shared/lib";
+import { attachService } from "@/entities/attach";
+import { CodeSelect } from "@/entities/code";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Textarea,
+} from "@common/components";
+
+const SPLMNT_ARTCL_UP_CD = "SPLMNTARTCL";
+const SPLMNT_DMND_FILE_KEY_PREFIX = "splmnt-dmnd::";
+
+interface UploadedSplmntFile {
+  fileName: string;
+  fileKey: string;
+  atflId?: string;
+  atflCd?: string;
+}
+
+interface SplmntDmndRow {
+  rowKey: string;
+  splmntArtclComCd: string;
+  splmntDmndCn: string;
+  splmntDmndAtchFileGroupId: string;
+  uploadedFile: UploadedSplmntFile | null;
+}
+
+interface SplmntDmndDialogConfirmItem {
+  splmntArtclComCd: string;
+  splmntDmndCn: string;
+  splmntDmndAtchFileGroupId?: string;
+}
+
+interface SplmntDmndDialogConfirmPayload {
+  items: SplmntDmndDialogConfirmItem[];
+}
+
+interface SplmntDmndDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  isSubmitting?: boolean;
+  onConfirm: (payload: SplmntDmndDialogConfirmPayload) => void;
+}
+
+function createRowKey() {
+  return `splmnt-row-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+function createEmptyRow(): SplmntDmndRow {
+  return {
+    rowKey: createRowKey(),
+    splmntArtclComCd: "",
+    splmntDmndCn: "",
+    splmntDmndAtchFileGroupId: "",
+    uploadedFile: null,
+  };
+}
+
+function createUploadKey(rowKey: string, file: File) {
+  return `${SPLMNT_DMND_FILE_KEY_PREFIX}${rowKey}::${getDefaultFileKey(file)}`;
+}
+
+function getRowKeyFromFileKey(fileKey: string): string | null {
+  if (!fileKey.startsWith(SPLMNT_DMND_FILE_KEY_PREFIX)) return null;
+  const rest = fileKey.slice(SPLMNT_DMND_FILE_KEY_PREFIX.length);
+  const separatorIndex = rest.indexOf("::");
+  if (separatorIndex < 0) return null;
+  return rest.slice(0, separatorIndex);
+}
+
+function isRowsValid(rows: SplmntDmndRow[]) {
+  return rows.every((row) => row.splmntArtclComCd.trim() && row.splmntDmndCn.trim());
+}
+
+function SplmntDmndDialog({ open, onOpenChange, isSubmitting, onConfirm }: SplmntDmndDialogProps) {
+  const formId = useId();
+  const [rows, setRows] = useState<SplmntDmndRow[]>([createEmptyRow()]);
+
+  const { uploadFileAsync, isUploading, uploads } = useTus({
+    onSuccess: (atflCd, atflId, _file, fileKey) => {
+      if (!atflCd || !atflId) return;
+      const rowKey = getRowKeyFromFileKey(fileKey);
+      if (!rowKey) return;
+
+      setRows((prev) =>
+        prev.map((row) => {
+          if (row.rowKey !== rowKey || row.uploadedFile?.fileKey !== fileKey) return row;
+          return {
+            ...row,
+            splmntDmndAtchFileGroupId: atflCd,
+            uploadedFile: { ...row.uploadedFile, atflCd, atflId },
+          };
+        }),
+      );
+    },
+    onError: (_error, _file, fileKey) => {
+      const rowKey = getRowKeyFromFileKey(fileKey);
+      if (!rowKey) return;
+
+      setRows((prev) =>
+        prev.map((row) => {
+          if (row.rowKey !== rowKey || row.uploadedFile?.fileKey !== fileKey) return row;
+          return { ...row, uploadedFile: null };
+        }),
+      );
+    },
+  });
+
+  useEffect(() => {
+    if (!open) return;
+    setRows([createEmptyRow()]);
+  }, [open]);
+
+  const isAnyUploading = rows.some(
+    (row) => row.uploadedFile != null && (isUploading[row.uploadedFile.fileKey] ?? false),
+  );
+  const canSubmit = isRowsValid(rows) && !isAnyUploading && !isSubmitting;
+
+  function updateRow(rowKey: string, patch: Partial<SplmntDmndRow>) {
+    setRows((prev) => prev.map((row) => (row.rowKey === rowKey ? { ...row, ...patch } : row)));
+  }
+
+  function handleAddRow() {
+    setRows((prev) => [...prev, createEmptyRow()]);
+  }
+
+  function handleRemoveRow(rowKey: string) {
+    setRows((prev) => (prev.length <= 1 ? prev : prev.filter((row) => row.rowKey !== rowKey)));
+  }
+
+  async function handleFileUpload(rowKey: string, files: FileList | null) {
+    if (!files || files.length === 0) return;
+
+    const file = files[0];
+    const fileKey = createUploadKey(rowKey, file);
+    const targetRow = rows.find((row) => row.rowKey === rowKey);
+    const existingAtflCd = targetRow?.splmntDmndAtchFileGroupId;
+
+    updateRow(rowKey, {
+      uploadedFile: { fileName: file.name, fileKey },
+    });
+
+    try {
+      await uploadFileAsync(file, {
+        fileKey,
+        metadata: existingAtflCd ? { atflCd: existingAtflCd } : undefined,
+      });
+    } catch {
+      // onError callback handles cleanup
+    }
+  }
+
+  async function handleFileRemove(rowKey: string) {
+    const targetRow = rows.find((row) => row.rowKey === rowKey);
+    if (!targetRow?.uploadedFile) return;
+
+    const { fileKey, atflId } = targetRow.uploadedFile;
+    uploads[fileKey]?.abort();
+
+    if (atflId) {
+      try {
+        await attachService.deleteAttachmentByAtflId(atflId);
+      } catch (error) {
+        console.error("보완요청 첨부파일 삭제 실패:", error);
+      }
+    }
+
+    updateRow(rowKey, {
+      uploadedFile: null,
+      splmntDmndAtchFileGroupId: "",
+    });
+  }
+
+  function handleConfirm() {
+    if (!canSubmit) return;
+
+    onConfirm({
+      items: rows.map((row) => ({
+        splmntArtclComCd: row.splmntArtclComCd.trim(),
+        splmntDmndCn: row.splmntDmndCn.trim(),
+        splmntDmndAtchFileGroupId: row.splmntDmndAtchFileGroupId || undefined,
+      })),
+    });
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[100rem]" aria-describedby={undefined}>
+        <DialogHeader>
+          <DialogTitle>보완요청</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-3">
+          <div className="flex items-center justify-between gap-3">
+            <h4 className="text-xl font-semibold">보완 내용</h4>
+            <Button type="button" size="sm" color="green" onClick={handleAddRow}>
+              항목 추가
+            </Button>
+          </div>
+
+          <div className="overflow-x-auto">
+            <Table variant="secondary">
+              <colgroup>
+                <col width="20%" />
+                <col width="50%" />
+                <col width="20%" />
+                {rows.length > 1 ? <col width="10%" /> : null}
+              </colgroup>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>보완 항목</TableHead>
+                  <TableHead>보완 의견</TableHead>
+                  <TableHead>첨부파일</TableHead>
+                  {rows.length > 1 ? <TableHead>관리</TableHead> : null}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {rows.map((row) => {
+                  const uploading = row.uploadedFile
+                    ? (isUploading[row.uploadedFile.fileKey] ?? false)
+                    : false;
+                  const fileInputId = `${formId}-${row.rowKey}-file`;
+
+                  return (
+                    <TableRow key={row.rowKey}>
+                      <TableCell align="center" className="align-top">
+                        <CodeSelect
+                          upCd={SPLMNT_ARTCL_UP_CD}
+                          value={row.splmntArtclComCd || undefined}
+                          onValueChange={(value) =>
+                            updateRow(row.rowKey, { splmntArtclComCd: value })
+                          }
+                          placeholder="보완항목 선택"
+                          className="w-full min-w-[12rem]"
+                        />
+                      </TableCell>
+                      <TableCell className="align-top">
+                        <Textarea
+                          value={row.splmntDmndCn}
+                          onChange={(event) =>
+                            updateRow(row.rowKey, { splmntDmndCn: event.target.value })
+                          }
+                          placeholder="보완 의견을 입력하세요."
+                          rows={4}
+                          className="min-h-[8rem] !text-xl"
+                        />
+                      </TableCell>
+                      <TableCell className="align-top">
+                        <div className="flex items-center gap-2">
+                          {row.uploadedFile ? (
+                            <div className="flex items-stretch gap-2">
+                              <span className="text-xl">{row.uploadedFile.fileName}</span>
+                              <Button
+                                type="button"
+                                size="icon"
+                                className="size-8 shrink-0 !bg-destructive"
+                                disabled={uploading}
+                                onClick={() => void handleFileRemove(row.rowKey)}
+                              >
+                                <i className="diveicon di-x text-xs" aria-label="삭제" />
+                              </Button>
+                            </div>
+                          ) : (
+                            <Button type="button" size="sm" disabled={uploading} asChild>
+                              <label htmlFor={fileInputId} className="cursor-pointer">
+                                파일추가
+                                <input
+                                  id={fileInputId}
+                                  type="file"
+                                  className="hidden"
+                                  onChange={(event) => {
+                                    void handleFileUpload(row.rowKey, event.target.files);
+                                    event.target.value = "";
+                                  }}
+                                />
+                              </label>
+                            </Button>
+                          )}
+                        </div>
+                      </TableCell>
+                      {rows.length > 1 ? (
+                        <TableCell align="center" className="align-top">
+                          <Button
+                            type="button"
+                            color="white"
+                            size="sm"
+                            onClick={() => handleRemoveRow(row.rowKey)}
+                          >
+                            삭제
+                          </Button>
+                        </TableCell>
+                      ) : null}
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button type="button" color="white" onClick={() => onOpenChange(false)}>
+            취소
+          </Button>
+          <Button type="button" onClick={handleConfirm} disabled={!canSubmit}>
+            보완요청
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { SplmntDmndDialog };
+export type { SplmntDmndDialogConfirmItem, SplmntDmndDialogConfirmPayload };
diff --git a/apps/as/src/widgets/pbadms-sprt/ui/text-input-dialog.tsx b/apps/as/src/widgets/pbadms-sprt/ui/text-input-dialog.tsx
deleted file mode 100644
index 168012416..000000000
--- a/apps/as/src/widgets/pbadms-sprt/ui/text-input-dialog.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Textarea,
-} from "@common/components";
-
-interface TextInputDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  title: string;
-  placeholder?: string;
-  defaultValue?: string;
-  isSubmitting?: boolean;
-  onConfirm: (text: string) => void;
-}
-
-function TextInputDialog({
-  open,
-  onOpenChange,
-  title,
-  placeholder,
-  defaultValue,
-  isSubmitting,
-  onConfirm,
-}: TextInputDialogProps) {
-  const [value, setValue] = useState("");
-
-  useEffect(() => {
-    if (!open) return;
-    setValue(defaultValue ?? "");
-  }, [defaultValue, open]);
-
-  function handleConfirm() {
-    onConfirm(value.trim());
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-[44rem]" aria-describedby={undefined}>
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-        </DialogHeader>
-
-        <Textarea
-          value={value}
-          onChange={(event) => setValue(event.target.value)}
-          placeholder={placeholder}
-          rows={6}
-          className="!text-xl"
-        />
-
-        <DialogFooter>
-          <Button type="button" color="white" onClick={() => onOpenChange(false)}>
-            취소
-          </Button>
-          <Button
-            type="button"
-            onClick={handleConfirm}
-            disabled={isSubmitting || value.trim().length === 0}
-          >
-            확인
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export { TextInputDialog };

From 52a79eca6029c967d963bb8ffac16bf9fdbc7b95 Mon Sep 17 00:00:00 2001
From: ljpark <mind-one005@mind-one.co.kr>
Date: Wed, 15 Jul 2026 18:22:39 +0900
Subject: [PATCH 23/32] =?UTF-8?q?fo:=20=EA=B3=B5=ED=86=B5=20=EB=AA=A8?=
 =?UTF-8?q?=EB=93=88=20=EA=B8=B0=EB=B0=98=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/fo/.env.local                            |   4 +-
 apps/fo/.env.mindone                          |   4 +-
 apps/fo/.env.production                       |   4 +-
 apps/fo/app/(auth)/auth/layout.tsx            |  17 +
 apps/fo/app/(auth)/auth/login/page.tsx        |   2 +
 apps/fo/app/api/proxy/[...url]/route.ts       | 177 +++++-----
 apps/fo/app/auth/login/page.tsx               |   2 -
 apps/fo/app/auth/login/route-bak.ts           |  12 -
 apps/fo/app/components/api/config/env.ts      |   4 +-
 apps/fo/package.json                          |   5 +-
 apps/fo/src/auth/login/index.ts               |   1 +
 apps/fo/src/auth/login/ui/login-page.tsx      | 156 +++++++++
 apps/fo/src/auth/login/ui/login.css           | 325 +++++++++++++++++
 apps/fo/src/entities/auth/api/auth-service.ts | 109 ++++++
 .../fo/src/entities/auth/api/login-service.ts |  76 ----
 apps/fo/src/entities/auth/index.ts            |   3 +-
 .../fo/src/entities/auth/lib/auth-wrapper.tsx | 124 ++++---
 .../fo/src/entities/auth/lib/token-manager.ts | 120 +------
 apps/fo/src/entities/menu-authority/index.ts  |   7 +
 apps/fo/src/entities/menu/index.ts            |   3 +-
 apps/fo/src/shared/config/api.ts              |  31 +-
 apps/fo/src/shared/config/auth.ts             |  17 +
 apps/fo/src/shared/config/env.ts              |  23 +-
 apps/fo/src/shared/config/index.ts            |   2 +
 apps/fo/src/shared/lib/bbs-notice-menu.ts     |  12 +
 apps/fo/src/shared/lib/index.ts               |   7 +
 apps/fo/src/shared/lib/statistics-menu-url.ts |  84 +++++
 apps/fo/src/store/admin-store.ts              |  29 ++
 apps/fo/src/store/tab-store.ts                | 327 ++++++++++++++++++
 pnpm-lock.yaml                                |   9 +
 30 files changed, 1341 insertions(+), 355 deletions(-)
 create mode 100644 apps/fo/app/(auth)/auth/layout.tsx
 create mode 100644 apps/fo/app/(auth)/auth/login/page.tsx
 delete mode 100644 apps/fo/app/auth/login/page.tsx
 delete mode 100644 apps/fo/app/auth/login/route-bak.ts
 create mode 100644 apps/fo/src/auth/login/index.ts
 create mode 100644 apps/fo/src/auth/login/ui/login-page.tsx
 create mode 100644 apps/fo/src/auth/login/ui/login.css
 create mode 100644 apps/fo/src/entities/auth/api/auth-service.ts
 delete mode 100644 apps/fo/src/entities/auth/api/login-service.ts
 create mode 100644 apps/fo/src/shared/config/auth.ts
 create mode 100644 apps/fo/src/shared/lib/bbs-notice-menu.ts
 create mode 100644 apps/fo/src/shared/lib/statistics-menu-url.ts
 create mode 100644 apps/fo/src/store/admin-store.ts
 create mode 100644 apps/fo/src/store/tab-store.ts

diff --git a/apps/fo/.env.local b/apps/fo/.env.local
index 646d80c2c..3cbefb6a7 100644
--- a/apps/fo/.env.local
+++ b/apps/fo/.env.local
@@ -7,8 +7,8 @@ NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 NEXT_PUBLIC_PROXY_HOST = http://localhost:3000
 NEXT_PUBLIC_SUB_DOMAIN = http://localhost:13000
 #NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://localhost:3001/auth/login
-NEXT_PUBLIC_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service
-NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service
+NEXT_PUBLIC_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
+NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
 NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
 NEXT_PUBLIC_GEOSERVER_URL = https://hasudo.geo.rsonesoft.com/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
diff --git a/apps/fo/.env.mindone b/apps/fo/.env.mindone
index 2fd7e91c2..28b7b3ac8 100644
--- a/apps/fo/.env.mindone
+++ b/apps/fo/.env.mindone
@@ -7,8 +7,8 @@ NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11300
 NEXT_PUBLIC_SUB_DOMAIN = http://con.mind-one.co.kr:13000
 NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
-NEXT_PUBLIC_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service
-NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/
+NEXT_PUBLIC_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
+NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
 NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
 NEXT_PUBLIC_GEOSERVER_URL = https://hasudo.geo.rsonesoft.com/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
diff --git a/apps/fo/.env.production b/apps/fo/.env.production
index bd0d0f04b..a28e86d7b 100644
--- a/apps/fo/.env.production
+++ b/apps/fo/.env.production
@@ -7,8 +7,8 @@ NEXT_PUBLIC_ACCESS_TOKEN = access-token
 NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 #NEXT_PUBLIC_PROXY_HOST = https://devlarva.hasuon.or.kr
 #NEXT_PUBLIC_CM_LOGIN_PAGE_URL = https://devqueen.hasuon.or.kr/auth/login
-NEXT_PUBLIC_SERVER_API_URL =  http://apigateway.iipbs-was.svc.cluster.local:8000/operation-service
-NEXT_PUBLIC_WR_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/reuse-service
+NEXT_PUBLIC_SERVER_API_URL =  http://apigateway.iipbs-was.svc.cluster.local:8000/operation-service/api/v1
+NEXT_PUBLIC_WR_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/reuse-service/api/v1
 NEXT_PUBLIC_CS_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
 NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
 NEXT_PUBLIC_GEOSERVER_URL = http://172.29.143.87:8080/geoserver
diff --git a/apps/fo/app/(auth)/auth/layout.tsx b/apps/fo/app/(auth)/auth/layout.tsx
new file mode 100644
index 000000000..2e676e5e0
--- /dev/null
+++ b/apps/fo/app/(auth)/auth/layout.tsx
@@ -0,0 +1,17 @@
+import "@/src/app/styles/base.css";
+
+export const metadata = {
+    title: "유역하수도 통합 정보플랫폼",
+};
+
+export default function AuthLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="ko">
+            <body>{children}</body>
+        </html>
+    );
+}
diff --git a/apps/fo/app/(auth)/auth/login/page.tsx b/apps/fo/app/(auth)/auth/login/page.tsx
new file mode 100644
index 000000000..52bab35c9
--- /dev/null
+++ b/apps/fo/app/(auth)/auth/login/page.tsx
@@ -0,0 +1,2 @@
+import { LoginPage } from "@/src/auth/login";
+export default LoginPage;
diff --git a/apps/fo/app/api/proxy/[...url]/route.ts b/apps/fo/app/api/proxy/[...url]/route.ts
index cf6447b1a..48dd3c72c 100644
--- a/apps/fo/app/api/proxy/[...url]/route.ts
+++ b/apps/fo/app/api/proxy/[...url]/route.ts
@@ -1,111 +1,106 @@
-/**
- * 📄 Proxy Route
- * API 프록시 라우트
- *
- * - 서버 API로의 요청 프록시 처리
- * - 쿠키 기반 인증 토큰 및 리프레시 토큰 관리
- * - POST 및 PUT 요청 핸들링
- * - 사용자 인증 정보 검증 및 응답 처리
- * - 에러 핸들링 및 상태 코드 반환
- * - 사이트 ID 및 헤더 설정
- */
+import {
+    ACCESS_TOKEN,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    REFRESH_TOKEN,
+    SERVER_API_URL,
+    SITE_ID,
+} from "@/src/shared/config";
 import { cookies } from "next/headers";
 import { NextResponse } from "next/server";
 
-const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token";
-const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";
-const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
-const REFRESH_TOKEN = process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token";
-const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL || "";
-const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "SN";
-
 async function handler(
-  request: Request,
-  params: { url: string[] },
-  method: "GET" | "POST" | "PUT" | "DELETE",
+    request: Request,
+    params: { url: string[] },
+    method: "GET" | "POST" | "PUT" | "DELETE",
 ) {
-  const cookieStore = await cookies();
-  const headers: Record<string, string> = {
-    "Content-Type": "application/json",
-    "X-Site-Id": SITE_ID,
-  };
-  let body = {};
-  const isRefreshHandler = params.url.includes("refresh");
+    const cookieStore = await cookies();
+    const headers: Record<string, string> = {
+        "Content-Type": "application/json",
+        "X-Site-Id": SITE_ID,
+    };
+    let body = {};
+    const isRefreshHandler = params.url.includes("refresh");
 
-  // silent refresh
-  if (isRefreshHandler) {
-    const refreshToken = cookieStore.get(REFRESH_TOKEN);
-    headers[CLAIM_NAME] = refreshToken?.value ?? "";
+    // silent refresh
+    if (isRefreshHandler) {
+        const refreshToken = cookieStore.get(REFRESH_TOKEN);
+        headers[CLAIM_NAME] = refreshToken?.value ?? "";
 
-    if (!headers[CLAIM_NAME]) {
-      return NextResponse.json({ message: "Can't refresh" }, { status: 401 });
-    }
-  }
-
-  try {
-    if (!isRefreshHandler) {
-      body = await request.json();
+        if (!headers[CLAIM_NAME]) {
+            return NextResponse.json(
+                { message: "Can't refresh" },
+                { status: 401 },
+            );
+        }
     }
 
-    const result = await fetch(`${SERVER_API_URL}/${params.url.join("/")}`, {
-      method,
-      headers,
-      body: JSON.stringify(body),
-    });
+    try {
+        if (!isRefreshHandler) {
+            body = await request.json();
+        }
 
-    if (!result.ok) {
-      console.log("Invalid Credentials ");
-      return NextResponse.json(
-        { message: "Invalid Credentials" },
-        { status: 401 },
-      );
+        const result = await fetch(
+            `${SERVER_API_URL}/${params.url.join("/")}`,
+            {
+                method,
+                headers,
+                body: JSON.stringify(body),
+            },
+        );
+
+        if (!result.ok) {
+            return NextResponse.json(
+                { message: "Invalid Credentials" },
+                { status: 401 },
+            );
+        }
+
+        const accessToken = result.headers.get(ACCESS_TOKEN);
+        const refreshToken = result.headers.get(REFRESH_TOKEN);
+        const userId = result.headers.get(AUTH_USER_ID);
+
+        if (accessToken && userId) {
+            const response = NextResponse.json({
+                [ACCESS_TOKEN]: accessToken,
+                [AUTH_USER_ID]: userId,
+            });
+
+            if (refreshToken) {
+                cookieStore.set(REFRESH_TOKEN, refreshToken, {
+                    httpOnly: true,
+                    sameSite: "lax",
+                    path: "/",
+                });
+            }
+
+            return response;
+        }
+
+        return NextResponse.json(
+            { message: "Invalid Credentials" },
+            { status: 401 },
+        );
+    } catch (error) {
+        return NextResponse.json(
+            { message: "Server Error", error },
+            { status: 500 },
+        );
     }
-
-    const accessToken = result.headers.get(ACCESS_TOKEN);
-    const refreshToken = result.headers.get(REFRESH_TOKEN);
-    const userId = result.headers.get(AUTH_USER_ID);
-
-    if (accessToken && userId) {
-      const response = NextResponse.json({
-        [ACCESS_TOKEN]: accessToken,
-        [AUTH_USER_ID]: userId,
-      });
-
-      if (refreshToken) {
-        cookieStore.set(REFRESH_TOKEN, refreshToken, {
-          httpOnly: true,
-          sameSite: "lax",
-          path: "/",
-        });
-      }
-
-      return response;
-    }
-
-    return NextResponse.json(
-      { message: "Invalid Credentials" },
-      { status: 401 },
-    );
-  } catch (error) {
-    return NextResponse.json(
-      { message: "Server Error", error },
-      { status: 500 },
-    );
-  }
 }
 
 export async function POST(
-  request: Request,
-  props: { params: Promise<{ url: string[] }> },
+    request: Request,
+    props: { params: Promise<{ url: string[] }> },
 ) {
-  const params = await props.params;
-  return handler(request, params, "POST");
+    const params = await props.params;
+    return handler(request, params, "POST");
 }
 
 export async function PUT(
-  request: Request,
-  props: { params: Promise<{ url: string[] }> },
+    request: Request,
+    props: { params: Promise<{ url: string[] }> },
 ) {
-  const params = await props.params;
-  return handler(request, params, "PUT");
+    const params = await props.params;
+    return handler(request, params, "PUT");
 }
diff --git a/apps/fo/app/auth/login/page.tsx b/apps/fo/app/auth/login/page.tsx
deleted file mode 100644
index 0dbc42284..000000000
--- a/apps/fo/app/auth/login/page.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-import { LoginPage } from "@/src/features/auth/login";
-export default LoginPage;
diff --git a/apps/fo/app/auth/login/route-bak.ts b/apps/fo/app/auth/login/route-bak.ts
deleted file mode 100644
index 65bbce15e..000000000
--- a/apps/fo/app/auth/login/route-bak.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-
-export async function GET(request: NextRequest) {
-  const hostname = request.nextUrl.hostname;
-  const redirectUrl = process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "https://portal.hasuon.or.kr";
-
-  if (hostname === "localhost" || hostname === "127.0.0.1" || hostname === "con.mind-one.co.kr") {
-    return NextResponse.redirect(new URL("/", request.url));  // 로컬 및 개발 환경
-  } else {
-    return NextResponse.redirect(new URL(redirectUrl)); // 공단 환경
-  }
-}
\ No newline at end of file
diff --git a/apps/fo/app/components/api/config/env.ts b/apps/fo/app/components/api/config/env.ts
index 1c0ba8b0e..009916beb 100644
--- a/apps/fo/app/components/api/config/env.ts
+++ b/apps/fo/app/components/api/config/env.ts
@@ -1,5 +1,5 @@
 import { PROXY_HOST } from "@/src/shared/config/env";
 
-export const DEV_URL_FO = "/operation-service/api/v1";
+export const DEV_URL_FO = "/operation-service";
 export const LOCAL_URL = PROXY_HOST;
-export const DEV_URL_WR = "/reuse-service/api/v1";
\ No newline at end of file
+export const DEV_URL_WR = "/reuse-service";
diff --git a/apps/fo/package.json b/apps/fo/package.json
index 4dd6c3e3c..8116359df 100644
--- a/apps/fo/package.json
+++ b/apps/fo/package.json
@@ -10,8 +10,11 @@
   },
   "dependencies": {
     "@common/assets": "workspace:*",
-    "@common/business_components": "workspace:*",
+    "@common/auth": "workspace:*",
     "@common/components": "workspace:*",
+    "@common/config": "workspace:*",
+    "@common/network": "workspace:*",
+    "@common/business_components": "workspace:*",
     "@tailwindcss/vite": "^4.0.10",
     "html2canvas": "^1.4.1",
     "js-cookie": "^3.0.5",
diff --git a/apps/fo/src/auth/login/index.ts b/apps/fo/src/auth/login/index.ts
new file mode 100644
index 000000000..2093c3d8d
--- /dev/null
+++ b/apps/fo/src/auth/login/index.ts
@@ -0,0 +1 @@
+export { LoginPage } from "./ui/login-page";
diff --git a/apps/fo/src/auth/login/ui/login-page.tsx b/apps/fo/src/auth/login/ui/login-page.tsx
new file mode 100644
index 000000000..6398700b9
--- /dev/null
+++ b/apps/fo/src/auth/login/ui/login-page.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+
+import { authService } from "@/src/entities/auth";
+import { images } from "@common/assets";
+
+import "./login.css";
+
+function LoginPage() {
+    const [errorMessage, setErrorMessage] = useState<string>("");
+
+    const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        setErrorMessage("");
+
+        const formData = new FormData(e.target as HTMLFormElement);
+        const userId = formData.get("id") as string;
+        const password = formData.get("password") as string;
+
+        try {
+            await authService.login({ userId, password });
+            window.location.href = "/";
+        } catch (error) {
+            const message =
+                error instanceof Error
+                    ? error.message
+                    : "로그인에 실패했습니다.";
+            setErrorMessage(message);
+        }
+    };
+
+    return (
+        <div className="login fx">
+            <div className="left_box fx">
+                <div className="text">
+                    <h1>
+                        유역하수도통합플랫폼
+                        <br />
+                        <span>하수도통계 관리시스템</span>
+                    </h1>
+                    <p>
+                        유역하수도통합플랫폼 하수도통계 관리시스템에 오신 것을
+                        환영합니다.
+                    </p>
+                </div>
+                <div className="img">
+                    <Image
+                        src={images.logo}
+                        width={229}
+                        height={46}
+                        alt="logo"
+                    />
+                </div>
+            </div>
+            <form
+                id="loginForm"
+                name="loginForm"
+                method="post"
+                onSubmit={handleSubmit}
+            >
+                <div className="login_box fx">
+                    <ul className="fx">
+                        <li>
+                            <h2>ID</h2>
+                            <div className="input_st st1">
+                                <i className="diveicon di-account-box" />
+                                <input
+                                    type="text"
+                                    className="id"
+                                    title="아이디를 입력하세요."
+                                    id="id"
+                                    name="id"
+                                    maxLength={12}
+                                />
+                            </div>
+                        </li>
+                        <li>
+                            <h2>PASSWORD</h2>
+                            <div className="input_st st2">
+                                <i className="diveicon di-key" />
+                                <input
+                                    type="password"
+                                    className="input_style"
+                                    maxLength={25}
+                                    title="비밀번호를 입력하세요."
+                                    id="password"
+                                    name="password"
+                                />
+                            </div>
+                        </li>
+                    </ul>
+                    <div className="bottom_box fx">
+                        <div className="checks fx">
+                            <input
+                                type="checkbox"
+                                name="checkId"
+                                title="로그인ID 저장여부"
+                                id="checkId"
+                            />
+                            <label htmlFor="checkId">아이디저장</label>
+                        </div>
+                        {/* <a href="javascript:fnUserSearch();" className=" pw_message fx"><i className="xi-external-link"></i>비밀번호 또는 아이디를 잃어버리셨나요?</a> */}
+                    </div>
+                    {errorMessage && (
+                        <div className="error_message">
+                            <span>{errorMessage}</span>
+                        </div>
+                    )}
+                    <button type="submit" className="login_btn fx">
+                        <span>LOGIN</span>
+                    </button>
+                    <div className="footer">
+                        <div className="copy fx">
+                            <p>copyright © 2023 KECO. All rights reserved.</p>
+                        </div>
+                        <div className="fot_btn fx">
+                            <a
+                                href="https://keco.or.kr/web/lay1/S1T6C1348/contents.do"
+                                target="_blank"
+                            >
+                                개인정보처리방침
+                            </a>
+                            <a
+                                href="https://keco.or.kr/web/lay1/S1T6C1349/contents.do"
+                                target="_blank"
+                            >
+                                저작권정책안내
+                            </a>
+                            <a
+                                href="https://keco.or.kr/web/lay1/S1T6C1350/contents.do"
+                                target="_blank"
+                            >
+                                이메일무단수집거부
+                            </a>
+                        </div>
+                        <p className="addr fx">
+                            <span>
+                                주소 : (22689) 인천광역시 서구 환경로 42(경서동
+                                종합환경연구단지)
+                            </span>
+                            <span>
+                                전화 : (시스템) 032-590-4321, 3752, 4314 / (통
+                                계) 032-590-3723, 3722
+                            </span>
+                            <span>팩스 :032-590-3729</span>
+                        </p>
+                    </div>
+                </div>
+            </form>
+        </div>
+    );
+}
+
+export { LoginPage };
diff --git a/apps/fo/src/auth/login/ui/login.css b/apps/fo/src/auth/login/ui/login.css
new file mode 100644
index 000000000..e65180ae7
--- /dev/null
+++ b/apps/fo/src/auth/login/ui/login.css
@@ -0,0 +1,325 @@
+/**
+* OLYM Cascading Style Sheets
+* File Name : login.css
+* Description : 로그인 스타일시트
+* Author : Web business Team / Choi Hyun Mi
+* Email : desingtj@olym.co.kr
+* Date : 2023.07.20
+* Update : 2023.07.26
+* Copyright(c) 2023 OLYM Communications. All Rights Reserved.
+*/
+html,
+body {
+  background: #fff;
+}
+.fx {
+  display: flex;
+  -ms-display: flex;
+  -webkit-display: flex;
+  box-sizing: border-box;
+}
+.login {
+  width: 100%;
+  height: 100vh;
+}
+.login .left_box {
+  width: 100%;
+  background: url(../../../../public/images/bg_login.jpg) no-repeat
+    center/cover;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 7% 5% 5% 5%;
+}
+.login .left_box .text h1 {
+  font-size: 53px;
+  color: #fff;
+}
+.login .left_box .text h1 span {
+  font-weight: 800;
+}
+.login .left_box .text p {
+  margin-top: 40px;
+  font-size: 18px;
+  color: #fff;
+}
+.login .login_box {
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  padding: 4% 12% 4% 6%;
+}
+.login .login_box > ul {
+  flex-direction: column;
+  gap: 40px;
+}
+.login .login_box > ul > li h2 {
+  font-size: 22px;
+  font-weight: 600;
+  color: #2640a5;
+  margin-bottom: 14px;
+}
+.login .login_box > ul > li .input_st {
+  position: relative;
+}
+.login .login_box > ul > li .input_st .diveicon {
+  position: absolute;
+  top: 50%;
+  left: 28px;
+  transform: translateY(-50%);
+  font-family: "Xeicon";
+  font-size: 25px;
+  color: #003288;
+}
+.login .login_box > ul > li input {
+  width: 100%;
+  padding: 20px 20px 20px 70px;
+  background: #f7f7f7;
+  box-sizing: border-box;
+  border: none;
+  border-radius: 5px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #000;
+  height: auto;
+}
+.login .login_box > ul > li input:focus {
+  outline: 1px solid #3c5fe5;
+}
+.login .login_box > ul > li input::placeholder {
+  color: #afabab;
+  font-weight: 500;
+}
+.login .login_box .bottom_box {
+  justify-content: space-between;
+  gap: 20px;
+  padding: 50px 0 45px 0;
+}
+.login .login_box .bottom_box .checks {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.login .login_box .bottom_box .checks input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+}
+.login .login_box .bottom_box .checks label {
+  font-size: 14px;
+}
+.login .login_box .bottom_box .pw_message {
+  align-items: center;
+  gap: 5px;
+  color: #636363;
+  font-weight: 500;
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 5px;
+}
+.login .login_box .bottom_box .pw_message i {
+  color: #327af5;
+  font-size: 20px;
+}
+.login .login_box .error_message {
+  margin: 20px 0;
+  padding: 12px 20px;
+  background: #fee;
+  border: 1px solid #fcc;
+  border-radius: 5px;
+  color: #c33;
+  font-size: 14px;
+  text-align: center;
+}
+.login .login_box .error_message span {
+  display: block;
+  font-weight: 500;
+}
+.login .login_box .login_btn {
+  position: relative;
+  border-radius: 5px;
+  padding: 24px 15px;
+  background: linear-gradient(
+    to left,
+    #1d3969 0%,
+    #264078 10%,
+    #172558 40%,
+    #162254 50%,
+    #111c43 60%,
+    #111c42 100%
+  );
+  overflow: hidden;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  color: #fff;
+  cursor: pointer;
+}
+.login .login_box .login_btn span {
+  font-family: "Montserrat";
+  font-size: 19px;
+  font-weight: 700;
+  position: relative;
+}
+.login .login_box .login_btn i {
+  font-size: 22px;
+  transform: translateY(-2px);
+}
+.login .login_box .login_btn:before {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  background: linear-gradient(
+    to right,
+    #1d3969 0%,
+    #264078 10%,
+    #172558 40%,
+    #162254 50%,
+    #111c43 60%,
+    #111c42 100%
+  );
+  transition: opacity 0.5s;
+}
+.login .login_box .login_btn:hover::before {
+  opacity: 1;
+}
+.login .footer .copy {
+  margin-top: 36px;
+  justify-content: space-between;
+  align-items: center;
+  gap: 3%;
+}
+.login .footer .copy p {
+  font-size: 13px;
+  color: #d4d4d4;
+  width: 44%;
+  text-align: center;
+}
+.login .footer .copy::before,
+.login .login_box .copy::after {
+  content: "";
+  width: 20%;
+  height: 1px;
+  background: #d4d4d4;
+}
+.login .footer .fot_btn {
+  gap: 20px;
+  margin: 30px 0 10px 0;
+}
+.login .footer .fot_btn a {
+  color: #333;
+  font-weight: 700;
+  font-size: 13px;
+}
+.login .footer .fot_btn a:hover {
+  color: #003288;
+}
+.login .footer .addr {
+  color: #666;
+  font-size: 13px;
+  gap: 3px 20px;
+  flex-wrap: wrap;
+}
+/* 비밀번호 변경 팝업창 */
+.login .modal .modal_container {
+  width: 750px;
+}
+.login .pw_desc {
+  padding: 10px 10px 30px 10px;
+  color: #666;
+}
+.login .pw_desc p {
+  font-size: 1.25rem;
+  color: #000;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+.login .pw_desc span {
+  color: #f60;
+  font-weight: 700;
+}
+.login .modal .form_write {
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  padding: 20px 50px;
+}
+@media (max-width: 1024px) {
+  .login {
+    flex-direction: column;
+    height: auto;
+  }
+  .login .left_box {
+    padding: 30px;
+    flex-direction: column-reverse;
+    gap: 20px;
+  }
+  .login .left_box .text h1 {
+    font-size: 30px;
+    line-height: 1.2em;
+  }
+  .login .left_box .text p {
+    margin-top: 20px;
+    font-size: 14px;
+  }
+  .login .left_box .img img {
+    height: 40px;
+  }
+  .login .login_box {
+    padding: 30px;
+  }
+  .login .login_box > ul {
+    gap: 20px;
+  }
+  .login .login_box > ul > li h2 {
+    margin-bottom: 7px;
+  }
+  .login .login_box > ul > li .input_st::after {
+    left: 15px;
+    font-size: 20px;
+  }
+  .login .login_box > ul > li input {
+    padding: 15px 10px 15px 50px;
+    font-size: 16px;
+  }
+  .login .login_box .bottom_box {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 30px 0;
+  }
+  .login .login_box .bottom_box .id_save label {
+    font-size: 14px;
+  }
+  .login .login_box .login_btn {
+    padding: 15px;
+  }
+  .login .login_box .login_btn span {
+    font-size: 16px;
+  }
+  .login .login_box .login_btn i {
+    font-size: 18px;
+    transform: translateY(-1px);
+  }
+  .login .login_box .copy p {
+    width: 100%;
+  }
+  .login .login_box .copy::before,
+  .login .login_box .copy::after {
+    display: none;
+  }
+  .login .footer .addr {
+    font-size: 11px;
+    gap: 3px 10px;
+  }
+  .login .modal .modal_container {
+    width: 90%;
+  }
+  .login .pw_desc {
+    padding: 0 0 20px 0;
+  }
+  .login .modal .form_write {
+    padding: 10px;
+  }
+}
+/* // login */
diff --git a/apps/fo/src/entities/auth/api/auth-service.ts b/apps/fo/src/entities/auth/api/auth-service.ts
new file mode 100644
index 000000000..1bc235e5e
--- /dev/null
+++ b/apps/fo/src/entities/auth/api/auth-service.ts
@@ -0,0 +1,109 @@
+import {
+    ACCESS_TOKEN,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    ENDPOINT,
+} from "@/src/shared/config";
+import { getCookie } from "@/src/shared/lib";
+import {
+    type AuthPayload,
+    type AuthService,
+    getRemainingMs,
+} from "@common/auth";
+
+import {
+    clearRefreshTimer,
+    removeToken,
+    setToken,
+    setupRefreshTimer,
+    tokenManager,
+} from "../lib/token-manager";
+
+import { clearTabStorePersist } from "@/src/store/tab-store";
+
+async function login(payload: AuthPayload): Promise<void> {
+    const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+    });
+
+    const data = await response.json();
+
+    const accessToken = data[ACCESS_TOKEN];
+    const tokenId = data[AUTH_USER_ID];
+
+    if (!accessToken || !tokenId) {
+        throw new Error("인증 토큰을 받지 못했습니다.");
+    }
+
+    const prevTokenId = getCookie(AUTH_USER_ID);
+    if (prevTokenId !== undefined && prevTokenId !== tokenId) {
+        clearTabStorePersist();
+    }
+
+    setToken(CLAIM_NAME, accessToken);
+    setToken(AUTH_USER_ID, tokenId);
+
+    const remainingMs = getRemainingMs(accessToken);
+    if (remainingMs > 0) {
+        setupRefreshTimer(silentRefresh, remainingMs);
+    }
+}
+
+async function silentRefresh(): Promise<void> {
+    console.log(`[silentRefresh] Called at ${new Date().toISOString()}`);
+    try {
+        const response = await fetch(
+            `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
+            { method: "PUT" },
+        );
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            throw new Error(data?.message ?? "토큰 갱신에 실패했습니다.");
+        }
+
+        const accessToken = data[ACCESS_TOKEN];
+        const tokenId = data[AUTH_USER_ID];
+
+        if (!accessToken || !tokenId) {
+            throw new Error("갱신된 인증 토큰을 받지 못했습니다.");
+        }
+
+        setToken(CLAIM_NAME, accessToken);
+        setToken(AUTH_USER_ID, tokenId);
+
+        const remainingMs = getRemainingMs(accessToken);
+        if (remainingMs > 0) {
+            setupRefreshTimer(silentRefresh, remainingMs);
+        }
+    } catch (error) {
+        console.error(
+            `[silentRefresh] Failed at ${new Date().toISOString()}`,
+            error,
+        );
+        tokenManager.clearAuthToken();
+        if (typeof window !== "undefined") {
+            window.dispatchEvent(new CustomEvent("auth:logout"));
+        }
+    }
+}
+
+export async function logout(): Promise<void> {
+    tokenManager.clearAuthToken();
+    removeToken("site-id-key");
+    removeToken("site-theme-key");
+
+    if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("auth:logout"));
+    }
+}
+
+export const authService: AuthService = {
+    login,
+    silentRefresh,
+    declineSessionExtend: clearRefreshTimer,
+    logout,
+};
diff --git a/apps/fo/src/entities/auth/api/login-service.ts b/apps/fo/src/entities/auth/api/login-service.ts
deleted file mode 100644
index 760858b99..000000000
--- a/apps/fo/src/entities/auth/api/login-service.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-
-import type { LoginService, ILogin } from "../model/login-interface";
-import { tokenManager } from "../lib/token-manager";
-import {PROXY_HOST, ACCESS_TOKEN, AUTH_USER_ID,SITE_ID, CLAIM_NAME, ENDPOINT, JWT_EXPIRATION_TIME } from "../../../shared/config";
-
-export class LoginApiService implements LoginService {
-  private static instance: LoginApiService;
-
-  private constructor() {}
-
-  public static getInstance(): LoginApiService {
-    if (!LoginApiService.instance) {
-      LoginApiService.instance = new LoginApiService();
-    }
-    return LoginApiService.instance;
-  }
-
-  public async login(payload: ILogin): Promise<void> {
-    try {
-      const response = await fetch( PROXY_HOST+ ENDPOINT.USER_SERVICE.LOGIN, {
-        method: "POST",
-        body: JSON.stringify({
-          userId: payload.userId,
-          password: payload.password,
-        }),
-      });
-      // const data =  response.headers.get(ACCESS_TOKEN);
-      const accessToken = response.headers.get(ACCESS_TOKEN);
-      const tokenId =    response.headers.get(AUTH_USER_ID);
-      
-      if (!accessToken || !tokenId) {
-        throw new Error("Missing required authentication tokens");
-      }
-
-      tokenManager.setToken(CLAIM_NAME, accessToken);
-      tokenManager.setToken(AUTH_USER_ID, tokenId);
-      tokenManager.setToken("site-id-key", SITE_ID);
-      tokenManager.setupRefreshTimer(
-        () => this.silentRefresh(),
-        JWT_EXPIRATION_TIME,
-      );
-    } catch (error) {
-
-      console.log(' login err ' , error)
-      throw new Error(`Login failed: ${error}`);
-    }
-  }
-
-
-  public async silentRefresh(): Promise<void> {
-    console.log('  silentRefresh ')
-    
-    try {
-      const response = await fetch(PROXY_HOST+
-        `${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
-        { method: "PUT" },
-      );
-
-      const data = await response.json();
-      const accessToken = data[ACCESS_TOKEN];
-      const tokenId = data[AUTH_USER_ID];
-
-      if (!accessToken || !tokenId) {
-        throw new Error("Missing required authentication tokens");
-      }
-
-      tokenManager.setToken(CLAIM_NAME, accessToken);
-      tokenManager.setToken(AUTH_USER_ID, tokenId);
-    } catch (error) {
-      tokenManager.clearAuthToken();
-      throw new Error(`Silent refresh failed: ${error}`);
-    }
-  }
-}
-
-export const LoginApi = LoginApiService.getInstance();
diff --git a/apps/fo/src/entities/auth/index.ts b/apps/fo/src/entities/auth/index.ts
index 97e142225..7f0d0081a 100644
--- a/apps/fo/src/entities/auth/index.ts
+++ b/apps/fo/src/entities/auth/index.ts
@@ -1,2 +1,3 @@
-export { LoginApi } from "./api/login-service";
+export { authService } from "./api/auth-service";
 export { AuthWrapper } from "./lib/auth-wrapper";
+export { tokenManager } from "./lib/token-manager";
diff --git a/apps/fo/src/entities/auth/lib/auth-wrapper.tsx b/apps/fo/src/entities/auth/lib/auth-wrapper.tsx
index 21fd87180..0dc0661ea 100644
--- a/apps/fo/src/entities/auth/lib/auth-wrapper.tsx
+++ b/apps/fo/src/entities/auth/lib/auth-wrapper.tsx
@@ -1,68 +1,88 @@
 "use client";
 
 import { useEffect } from "react";
-import { client } from "@/src/shared/api";
-import type { IUserInfo } from "@/src/shared/store";
-import { isAtLoginRedirectUrl } from "@common/network";
-import { useUserStore, getCookie } from "@/src/shared/lib";
-import { ENDPOINT, AUTH_USER_ID } from "@/src/shared/config";
+import { useRouter } from "next/navigation";
 
-const LOGIN_PAGE_URL =
-  process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
+import { isAxiosError } from "axios";
+
+import { client } from "@/src/shared/api";
+import {
+    AUTH_LOGIN_REDIRECT_URL,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    ENDPOINT,
+} from "@/src/shared/config";
+import { useUserStore } from "@/src/shared/lib";
+import type { IUserInfo } from "@/src/shared/store";
+import { getRemainingMs } from "@common/auth";
+import { isAtLoginRedirectUrl } from "@common/network";
+
+import { authService } from "../api/auth-service";
+
+import { getToken, setupRefreshTimer } from "./token-manager";
 
 const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
-  const { userInfo, setUserInfo } = useUserStore((state) => state);
+    const router = useRouter();
+    const userInfo = useUserStore((state) => state.userInfo);
+    const setUserInfo = useUserStore((state) => state.setUserInfo);
 
-  async function authCheck() {
-    if (isAtLoginRedirectUrl(LOGIN_PAGE_URL)) {
-      return;
-    }
-
-    const userId = getCookie(AUTH_USER_ID);
-    if (!userId) {
-      throw new Error("Missing required authentication tokens");
-    }
-
-    const response = await client.get<IUserInfo>(
-      `${ENDPOINT.USER_SERVICE.USERS}/info/me`,
-    );
-    if (!userInfo) setUserInfo(response.data);
-  }
-
-  useEffect(() => {
-    (async () => {
-      try {
-        await authCheck();
-      } catch (error) {
-        console.error(error);
-        setUserInfo(null);
-        if (isAtLoginRedirectUrl(LOGIN_PAGE_URL)) {
-          return;
+    useEffect(() => {
+        // 페이지 새로고침 시 silentRefresh 타이머 복구
+        const token = getToken(CLAIM_NAME);
+        if (token) {
+            const remainingMs = getRemainingMs(token);
+            if (remainingMs > 0) {
+                console.log(
+                    `[AuthWrapper] Refresh timer set: ${remainingMs}ms (${remainingMs / 1000}s)`,
+                );
+                setupRefreshTimer(authService.silentRefresh, remainingMs);
+            }
         }
 
-        // const hostname = window.location.hostname;
+        if (isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) return;
 
-        // // 개발 환경에서는 localhost 도메인 사용
-        // if (
-        //   hostname === "localhost" ||
-        //   hostname === "127.0.0.1" ||
-        //   hostname === "con.mind-one.co.kr"
-        // ) {
-        //   router.push("/"); // 개발시 홈으로 돌아가기
-        // }
+        async function authCheck() {
+            const userId = getToken(AUTH_USER_ID);
+            if (!userId) {
+                router.replace(AUTH_LOGIN_REDIRECT_URL);
+                return;
+            }
 
-        // // 운영 환경에서는 서브도메인을 포함한 최상위 도메인 사용
-        // // router.push는 같은 Next.js 앱 내에서만 작동하므로 다른 앱으로 이동할 때는 window.location.href 사용
-        // if (hostname.includes("hasuon.or.kr"))
-        //   window.location.assign(LOGIN_PAGE_URL); // 세션 만료 시 CM 로그인 페이지로 리다이렉트
+            if (userInfo) return;
 
-        // 개발/운영 환경에서 로그인 URL 분기는 환경 변수로 처리 (.env.*)
-        window.location.assign(LOGIN_PAGE_URL);
-      }
-    })();
-  }, []);
+            const response = await client.get<IUserInfo>(
+                `${ENDPOINT.USER_SERVICE.USERS}/info/me`,
+            );
+            setUserInfo(response.data);
+        }
 
-  return <>{children}</>;
+        authCheck().catch((error) => {
+            // 401은 @common/network error-interceptor에서 이미 리다이렉트 처리됨
+            if (isAxiosError(error) && error.response?.status === 401) return;
+
+            console.error(error);
+            setUserInfo(null);
+            if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+                router.replace(AUTH_LOGIN_REDIRECT_URL);
+            }
+        });
+    }, []);
+
+    // silentRefresh 실패 시 auth:logout 이벤트를 수신해 로그인으로 이동
+    useEffect(() => {
+        function handleAuthLogout() {
+            setUserInfo(null);
+            if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+                router.replace(AUTH_LOGIN_REDIRECT_URL);
+            }
+        }
+
+        window.addEventListener("auth:logout", handleAuthLogout);
+        return () =>
+            window.removeEventListener("auth:logout", handleAuthLogout);
+    }, []);
+
+    return <>{children}</>;
 };
 
 export { AuthWrapper };
diff --git a/apps/fo/src/entities/auth/lib/token-manager.ts b/apps/fo/src/entities/auth/lib/token-manager.ts
index 5908dd091..172f2cc3a 100644
--- a/apps/fo/src/entities/auth/lib/token-manager.ts
+++ b/apps/fo/src/entities/auth/lib/token-manager.ts
@@ -1,109 +1,15 @@
-import { AUTH_USER_ID, CLAIM_NAME } from "@/src/shared/config";
-import { getCookie, removeCookie, setCookie } from "@/src/shared/lib/cookie";
+import { authConfig } from "@/src/shared/config/auth";
+import { createTokenManager } from "@common/auth";
 
-type JwtPayload = {
-  sub?: string;
-  exp?: number;
-  iat?: number;
-  [key: string]: unknown;
-};
+export const tokenManager = createTokenManager(authConfig);
 
-export class TokenManager {
-  private static instance: TokenManager;
-  private refreshTimer: NodeJS.Timeout | null = null;
-
-  private constructor() {}
-
-  public static getInstance(): TokenManager {
-    if (!TokenManager.instance) {
-      TokenManager.instance = new TokenManager();
-    }
-    return TokenManager.instance;
-  }
-
-  public getToken(key: string): string | undefined {
-    return getCookie(key);
-  }
-
-  private parseJwt(token: string): JwtPayload {
-    const parts = token.split(".");
-    if (parts.length !== 3) {
-      throw new Error("유효한 JWT 형식이 아닙니다.");
-    }
-
-    const base64Url = parts[1] ?? "";
-    const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
-    const padded = base64.padEnd(Math.ceil(base64.length / 4) * 4, "=");
-    const jsonPayload = decodeURIComponent(
-      atob(padded)
-        .split("")
-        .map((char) => `%${char.charCodeAt(0).toString(16).padStart(2, "0")}`)
-        .join("")
-    );
-
-    return JSON.parse(jsonPayload) as JwtPayload;
-  }
-
-  public getRemainingMsFromToken(key: string = CLAIM_NAME): number | null {
-    const token = this.getToken(key);
-    if (!token) {
-      return null;
-    }
-
-    try {
-      const payload = this.parseJwt(token);
-      if (typeof payload.exp !== "number") {
-        return null;
-      }
-
-      return payload.exp * 1000 - Date.now();
-    } catch (error) {
-      console.error("JWT 파싱 오류:", error);
-      return null;
-    }
-  }
-
-  public isExpiredToken(key: string = CLAIM_NAME): boolean {
-    const remainingMs = this.getRemainingMsFromToken(key);
-    return remainingMs === null || remainingMs <= 0;
-  }
-
-  public setToken(key: string, value: string): void {
-    setCookie(key, value, {
-      secure: location.protocol === "https:",
-      sameSite: "lax",
-    });
-  }
-
-  public removeToken(key: string): void {
-    removeCookie(key);
-  }
-
-  public setupRefreshTimer(
-    callback: () => Promise<void>,
-    expirationTime: number,
-  ): void {
-    if (this.refreshTimer) {
-      clearTimeout(this.refreshTimer);
-    }
-
-    this.refreshTimer = setTimeout(() => {
-      callback().catch((error) => {
-        console.error("Silent refresh failed:", error);
-        this.clearAuthToken();
-      });
-    }, expirationTime - 60000);
-  }
-
-  public clearAuthToken(): void {
-    if (this.refreshTimer) {
-      clearTimeout(this.refreshTimer);
-      this.refreshTimer = null;
-    }
-
-    this.removeToken(CLAIM_NAME);
-    this.removeToken(AUTH_USER_ID);
-  }
-}
-
-export const tokenManager = TokenManager.getInstance();
+export const {
+    getToken,
+    setToken,
+    removeToken,
+    setupRefreshTimer,
+    clearRefreshTimer,
+    getAccessToken,
+    getRefreshToken,
+    getUserId,
+} = tokenManager;
diff --git a/apps/fo/src/entities/menu-authority/index.ts b/apps/fo/src/entities/menu-authority/index.ts
index 2a555b77e..d5991d01c 100644
--- a/apps/fo/src/entities/menu-authority/index.ts
+++ b/apps/fo/src/entities/menu-authority/index.ts
@@ -1,2 +1,9 @@
+export { MenuAuthorityApi } from "./api/menu-authority-service";
+export {
+    menuAuthorityFormSchema,
+    type MenuAuthority,
+    type MenuAuthorityPayload,
+    type MenuAuthorityFormData,
+} from "./model/menu-authority-interface";
 export { AuthorityButton } from "./ui/authority-button";
 export { ManagementAuthorityDialog } from "./ui/management-authority-dialog";
diff --git a/apps/fo/src/entities/menu/index.ts b/apps/fo/src/entities/menu/index.ts
index 04f63e38b..2bd1b1787 100644
--- a/apps/fo/src/entities/menu/index.ts
+++ b/apps/fo/src/entities/menu/index.ts
@@ -1,2 +1,3 @@
+export { MenuApi } from "./api/menu-service";
+export type { MenuItem, MenuService } from "./model/menu-interface";
 export { MenuWrapper } from "./lib/menu-wrapper";
-export type { MenuItem } from "./model/menu-interface";
diff --git a/apps/fo/src/shared/config/api.ts b/apps/fo/src/shared/config/api.ts
index 3eba9fa91..eebb15c19 100644
--- a/apps/fo/src/shared/config/api.ts
+++ b/apps/fo/src/shared/config/api.ts
@@ -1,6 +1,6 @@
 import { PROXY_HOST } from "./env";
 
-export const BASE_URL = `${PROXY_HOST}/server`;
+export const BASE_URL = `${PROXY_HOST}`;
 
 export const ENDPOINT = {
   ATTACH_SERVICE: {
@@ -14,13 +14,21 @@ export const ENDPOINT = {
   },
   USER_SERVICE: {
     LOGIN: "/user-service/login",
+    LOGIN_2FA: "/user-service/api/v1/auth/login",
     USERS: "/user-service/api/v1/users",
     SILENT_REFRESH: "/user-service/api/v1/users/token/refresh",
     AUTHORIZATIONS: "/user-service/api/v1/authorizations",
     ROLE_AUTHORIZATIONS: "/user-service/api/v1/role-authorizations",
     ROLES: "/user-service/api/v1/roles",
+    LOGINLOG: "/user-service/api/v1/login-logs",
+    PRIVACYLOG: "/user-service//api/v1/prvc-inq-logs",
+    OTP_VERIFY: "/user-service/api/v1/auth/2fa/verify",
+    TWOFA_SETUP: "/user-service/api/v1/auth/2fa/setup",
+    TWOFA_ENABLE: "/user-service/api/v1/auth/2fa/enable",
+    USER_JOIN: "/user-service/api/v1/anonymouse/users/join",
   },
   CMS_SERVICE: {
+    DASHBOARD: "/cms-service/api/v1/dashboard",
     SITES: "/cms-service/api/v1/sites",
     IPS: "/cms-service/api/v1/site-ips",
     DOMAINS: "/cms-service/api/v1/site-dmns",
@@ -29,6 +37,8 @@ export const ENDPOINT = {
     MENUS: "/cms-service/api/v1/menus",
     MENU_ROLES: "/cms-service/api/v1/menu-roles",
     MENU_AUTHRTS: "/cms-service/api/v1/menu-authrts",
+    MENU_TEMPORARY_STORAGE: "/cms-service/api/v1/menu-tmpr-strg",
+    MENU_HISTORY: "/cms-service/api/v1/menu-hstry",
     CONTENTS: "/cms-service/api/v1/contents",
     CONTENTS_DETAILS: "/cms-service/api/v1/contents-details",
     ORGANIZATIONS: "/cms-service/api/v1/ognzs",
@@ -44,13 +54,32 @@ export const ENDPOINT = {
     SURVEY: "/cms-service/api/v1/srvy",
     SURVEY_QUESTION: "/cms-service/api/v1/srvy-qitem",
     SURVEY_ARTICLE: "/cms-service/api/v1/srvy-artcl",
+    ZIPS: "/cms-service/api/v1/zips",
+    GROUPS: "/cms-service/api/v1/groups",
+    GROUP_USERS: "/cms-service/api/v1/group-users",
+    MANAGER_IP: "/cms-service/api/v1/mgrip",
+    APILOG: "/cms-service/api/v1/api-logs",
+    SITE_AUTHORITY: "/cms-service/api/v1/site-authrt",
+    CONNECTION_LOG: "/cms-service/api/v1/cntnlog",
   },
   BOARD_SERVICE: {
     BBS: "/board-service/api/v1/bbs",
     BBS_TEMPLATES: "/board-service/api/v1/bbsTmplt",
     POSTS: "/board-service/api/v1/posts",
     POSTS_COMMENTS: "/board-service/api/v1/posts-cmnts",
+    POST_EVALUATION: "/board-service/api/v1/pstEvl",
   },
+  SEWERAGE_SERVICE: {
+    PPL_COUNTS: "/sewerage-service/api/v1/ms/pplCounts",
+    OLD_PPL_COUNTS: "/sewerage-service/api/v1/ms/oldPplCounts",
+  },    
+  IC_SERVICE: {
+    GROUPING_STATISTICS: "/ic-service/api/v1/nti/grouping-statistics",
+  },
+  DC_SERVICE: {
+    DATA_STATUS: "/dc-service/api/v1/dc/dataStatus",
+  },
+
 };
 
 export const JWT_EXPIRATION_TIME = 1800000;
diff --git a/apps/fo/src/shared/config/auth.ts b/apps/fo/src/shared/config/auth.ts
new file mode 100644
index 000000000..7c35ad9f0
--- /dev/null
+++ b/apps/fo/src/shared/config/auth.ts
@@ -0,0 +1,17 @@
+import type { AuthConfig } from "@common/auth";
+
+import {
+  ACCESS_TOKEN,
+  AUTH_USER_ID,
+  CLAIM_NAME,
+  COOKIE_DOMAIN,
+  REFRESH_TOKEN,
+} from "./env";
+
+export const authConfig: AuthConfig = {
+  authUserId: AUTH_USER_ID || "token-id",
+  claimName: CLAIM_NAME || "Authorization",
+  cookieDomain: COOKIE_DOMAIN,
+  accessToken: ACCESS_TOKEN || "access-token",
+  refreshToken: REFRESH_TOKEN || "refresh-token",
+};
diff --git a/apps/fo/src/shared/config/env.ts b/apps/fo/src/shared/config/env.ts
index 6e3bf223e..6db578629 100644
--- a/apps/fo/src/shared/config/env.ts
+++ b/apps/fo/src/shared/config/env.ts
@@ -1,14 +1,31 @@
 export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "FO";
 export const PORT = process.env.NEXT_PUBLIC_PORT || "3000";
 export const PROXY_HOST = process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`;
-export const SERVER_API_WR_URL = process.env.NEXT_PUBLIC_WR_SERVER_API_URL ||'http://con.mind-one.co.kr:11080/api/v1';
-export const SERVER_API_FO_URL = process.env.NEXT_PUBLIC_SERVER_API_URL||' http://con.mind-one.co.kr:11082/api/v1';
-export const SERVER_API_CS_URL = process.env.NEXT_PUBLIC_CS_SERVER_API_URL||'http://dev.onasys.co.kr:8000';
+export const SERVER_API_WR_URL =
+    process.env.NEXT_PUBLIC_WR_SERVER_API_URL ||
+    "http://con.mind-one.co.kr:11083/reuse-service/api/v1";
+export const SERVER_API_FO_URL =
+    process.env.NEXT_PUBLIC_FO_SERVER_API_URL ||
+    process.env.NEXT_PUBLIC_SERVER_API_URL ||
+    "http://con.mind-one.co.kr:11083/operation-service/api/v1";
+export const SERVER_API_CS_URL =
+    process.env.NEXT_PUBLIC_CS_SERVER_API_URL ||
+    "http://dev.onasys.co.kr:8000";
+export const SERVER_API_URL =
+    process.env.NEXT_PUBLIC_CS_SERVER_API_URL ||
+    "http://dev.onasys.co.kr:8000";
+export const SERVER_API_CS_TUS_URL =
+    process.env.NEXT_PUBLIC_CS_TUS_UPLOAD ||
+    "/attach-service/api/v1/tus/upload";
+export const AUTH_LOGIN_REDIRECT_URL =
+    process.env.NEXT_PUBLIC_AUTH_LOGIN_REDIRECT_URL || "/auth/login";
 export const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
 export const ACCESS_TOKEN =  process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token";
 export const REFRESH_TOKEN =process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token";
 export const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";
 export const SERVER_SEWERAGE_API_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL;
+export const COOKIE_DOMAIN = process.env.NEXT_PUBLIC_COOKIE_DOMAIN;
+
 
 
 
diff --git a/apps/fo/src/shared/config/index.ts b/apps/fo/src/shared/config/index.ts
index cd83447d5..04e4f2df5 100644
--- a/apps/fo/src/shared/config/index.ts
+++ b/apps/fo/src/shared/config/index.ts
@@ -1,2 +1,4 @@
 export * from "./api";
 export * from "./env";
+
+export const DEFAULT_LIST_SIZE = 10;
diff --git a/apps/fo/src/shared/lib/bbs-notice-menu.ts b/apps/fo/src/shared/lib/bbs-notice-menu.ts
new file mode 100644
index 000000000..a621ed669
--- /dev/null
+++ b/apps/fo/src/shared/lib/bbs-notice-menu.ts
@@ -0,0 +1,12 @@
+import type { MenuItem } from "@/src/entities/menu";
+
+export const BBS_NOTICE_MENU_MARKER = "bbsnotice";
+
+export function isBbsNoticeMenu(item: MenuItem): boolean {
+    const marker = BBS_NOTICE_MENU_MARKER;
+    return (
+        item.urlPath?.toLowerCase().includes(marker) ||
+        item.menuEngNm?.toLowerCase().includes(marker) ||
+        item.menuPath?.toLowerCase().includes(marker)
+    );
+}
diff --git a/apps/fo/src/shared/lib/index.ts b/apps/fo/src/shared/lib/index.ts
index b8b4c52c0..1d0c4a3a8 100644
--- a/apps/fo/src/shared/lib/index.ts
+++ b/apps/fo/src/shared/lib/index.ts
@@ -4,3 +4,10 @@ export { useMenuStore } from "./use-menu-store";
 export { useUserStore } from "./use-user-store";
 export { usePrompt } from "./use-prompt";
 export { getCookie, setCookie, removeCookie } from "./cookie";
+export {
+    buildStatisticsComponentImportPath,
+    menuMatchesStatisticsTabId,
+    parseStatisticsMenuUrlPath,
+    resolveStatisticsCategory,
+    resolveStatisticsTabId,
+} from "./statistics-menu-url";
diff --git a/apps/fo/src/shared/lib/statistics-menu-url.ts b/apps/fo/src/shared/lib/statistics-menu-url.ts
new file mode 100644
index 000000000..c20dded4c
--- /dev/null
+++ b/apps/fo/src/shared/lib/statistics-menu-url.ts
@@ -0,0 +1,84 @@
+import type { MenuItem } from "@/src/entities/menu";
+
+export type ParsedStatisticsMenuUrl = {
+    categoryFromPath: string | null;
+    componentName: string | null;
+    rawUrlPath: string;
+};
+
+/** 메뉴 `urlPath`에서 통계 화면 카테고리·컴포넌트명을 파싱합니다. */
+export function parseStatisticsMenuUrlPath(
+    urlPath: string,
+): ParsedStatisticsMenuUrl {
+    const trimmed = (urlPath ?? "").trim();
+    if (!trimmed) {
+        return { categoryFromPath: null, componentName: null, rawUrlPath: trimmed };
+    }
+
+    let pathPart = trimmed;
+    let queryString = "";
+    const queryIndex = trimmed.indexOf("?");
+    if (queryIndex >= 0) {
+        pathPart = trimmed.slice(0, queryIndex);
+        queryString = trimmed.slice(queryIndex + 1);
+    }
+
+    const tabParam = new URLSearchParams(queryString).get("tab")?.trim() || null;
+    const segments = pathPart.replace(/^\/+/, "").split("/").filter(Boolean);
+
+    let categoryFromPath: string | null = null;
+    if (segments[0] === "statistics" && segments.length >= 2) {
+        categoryFromPath = segments[1] ?? null;
+    }
+
+    let componentName = tabParam;
+    if (!componentName) {
+        if (!pathPart.includes("/") && !queryString) {
+            componentName = trimmed;
+        } else if (segments.length === 1 && segments[0] !== "statistics") {
+            componentName = segments[0] ?? null;
+        } else if (segments[0] === "statistics" && segments.length >= 3) {
+            componentName = segments[segments.length - 1] ?? null;
+        }
+    }
+
+    return { categoryFromPath, componentName, rawUrlPath: trimmed };
+}
+
+/** 동적 import용 카테고리 폴더명 (`input`, `review` 등) */
+export function resolveStatisticsCategory(
+    urlPath: string,
+    parentEngNm: string,
+): string {
+    const { categoryFromPath } = parseStatisticsMenuUrlPath(urlPath);
+    return categoryFromPath || parentEngNm || "";
+}
+
+/** 탭 ID·URL `?tab=` 값 - 컴포넌트 파일명(확장자 제외) */
+export function resolveStatisticsTabId(urlPath: string): string {
+    const { componentName, rawUrlPath } = parseStatisticsMenuUrlPath(urlPath);
+    return componentName || rawUrlPath;
+}
+
+/** `@/src/components/statistics/{category}/{Component}` 또는 루트 컴포넌트 경로 */
+export function buildStatisticsComponentImportPath(
+    urlPath: string,
+    parentEngNm: string,
+): string {
+    const { componentName } = parseStatisticsMenuUrlPath(urlPath);
+    const category = resolveStatisticsCategory(urlPath, parentEngNm);
+    const name = componentName || urlPath;
+    if (!category) {
+        return `@/src/components/statistics/${name}`;
+    }
+    return `@/src/components/statistics/${category}/${name}`;
+}
+
+export function menuMatchesStatisticsTabId(
+    menu: MenuItem,
+    tabId: string,
+): boolean {
+    if (!tabId) return false;
+    if (menu.urlPath === tabId) return true;
+    return resolveStatisticsTabId(menu.urlPath) === tabId;
+}
diff --git a/apps/fo/src/store/admin-store.ts b/apps/fo/src/store/admin-store.ts
new file mode 100644
index 000000000..098ff816e
--- /dev/null
+++ b/apps/fo/src/store/admin-store.ts
@@ -0,0 +1,29 @@
+import { create } from "zustand";
+import { UserApi } from "@/src/entities/user";
+import { getUserInfo } from "../../../../packages/common/components/src/api";
+
+interface AdminStore {
+    /** 현재 사용자가 관리자 목록에 있는지 */
+    isAdminInfo: boolean;
+    setAdminInfo: (value: boolean) => void;
+    /** API로 관리자 목록 조회 후 현재 사용자 일치 여부 설정 */
+    fetchAdminInfo: () => Promise<void>;
+}
+
+const useAdminStoreHook = create<AdminStore>((set) => ({
+    isAdminInfo: false,
+    setAdminInfo: (value) => set({ isAdminInfo: value }),
+    fetchAdminInfo: async () => {
+        try {
+            const userInfo = await getUserInfo();
+            const adminList = await UserApi.findPageAdminUser({ userName: userInfo.userName });
+            const matched = adminList.content?.filter((a) => a.userName === userInfo.userName) ?? [];
+            set({ isAdminInfo: matched.length > 0 });
+        } catch {
+            set({ isAdminInfo: false });
+        }
+    },
+}));
+
+export const useAdminStore = useAdminStoreHook;
+export const getAdminStoreState = () => useAdminStoreHook.getState();
diff --git a/apps/fo/src/store/tab-store.ts b/apps/fo/src/store/tab-store.ts
new file mode 100644
index 000000000..0379b3601
--- /dev/null
+++ b/apps/fo/src/store/tab-store.ts
@@ -0,0 +1,327 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+import type { MenuItem } from "@/src/entities/menu";
+import { MenuAuthorityApi } from "@/src/entities/menu-authority";
+import type { PageMenuAuthority } from "@/src/entities/menu-authority/model/menu-authority-interface";
+import { isBbsNoticeMenu } from "@/src/shared/lib/bbs-notice-menu";
+import { resolveStatisticsTabId } from "@/src/shared/lib/statistics-menu-url";
+
+export interface Tab {
+    id: string; // 고유 ID (urlPath)
+    label: string; // 탭에 표시될 이름
+    path: string; // 메뉴 경로
+    urlPath: string; // url 경로
+    parentEngNm: string; // 부모 menuEngNm
+    menuItem: MenuItem; // 메뉴 정보
+    /** undefined: 미조회, null: 조회했으나 없음/실패 */
+    pageMenuAuthority?: PageMenuAuthority | null;
+}
+
+async function fetchTabPageMenuAuthority(
+    menuCd: number,
+    apply: (authority: PageMenuAuthority | null) => void,
+): Promise<void> {
+    try {
+        const response = await MenuAuthorityApi.getPageMenuAuthority(menuCd);
+        apply(response?.[0] ?? null);
+    } catch {
+        apply(null);
+    }
+}
+
+function scheduleTabPageMenuAuthorityFetch(
+    get: () => TabStore,
+    set: (
+        partial:
+            | Partial<TabStore>
+            | ((state: TabStore) => Partial<TabStore>),
+    ) => void,
+    tabId: string,
+    menuCd: number,
+): void {
+    void fetchTabPageMenuAuthority(menuCd, (authority) => {
+        const { tabs } = get();
+        if (!tabs.some((tab) => tab.id === tabId)) return;
+        set((state) => ({
+            tabs: state.tabs.map((tab) =>
+                tab.id === tabId ? { ...tab, pageMenuAuthority: authority } : tab,
+            ),
+        }));
+    });
+}
+
+type TabStoreSetState = (
+    partial:
+        | Partial<TabStore>
+        | ((state: TabStore) => Partial<TabStore>),
+) => void;
+
+const tabStoreSetState: TabStoreSetState = (partial) => {
+    useTabStoreHook.setState(partial);
+};
+
+function ensureTabPageMenuAuthority(
+    get: () => TabStore,
+    set: TabStoreSetState,
+    tab: Tab,
+): void {
+    if (tab.pageMenuAuthority !== undefined) return;
+    scheduleTabPageMenuAuthorityFetch(get, set, tab.id, tab.menuItem.menuCd);
+}
+
+/** persist 복원·새로고침 후 활성 탭 메뉴 권한이 없으면 조회 */
+export function hydrateActiveTabPageMenuAuthority(): void {
+    const { tabs, activeTabId } = getTabStoreState();
+    if (!activeTabId) return;
+    const tab = tabs.find((t) => t.id === activeTabId);
+    if (!tab) return;
+    ensureTabPageMenuAuthority(getTabStoreState, tabStoreSetState, tab);
+}
+
+interface TabStore {
+    tabs: Tab[];
+    activeTabId: string | null;
+    menuList: MenuItem[] | null;
+    addTab: (menuItem: MenuItem) => boolean;
+    removeTab: (tabId: string) => void;
+    setActiveTab: (tabId: string) => void;
+    setMenuList: (menuList: MenuItem[] | null) => void;
+    closeAllTabs: () => void;
+    closeOtherTabs: (tabId: string) => void;
+    closeTabsToLeft: (tabId: string) => void;
+    closeTabsToRight: (tabId: string) => void;
+}
+
+export const TAB_STORE_PERSIST_KEY = "st-tab-store";
+const TAB_STORE_VERSION = 1;
+const MAX_TABS = 10;
+
+function tabForPersist(tab: Tab): Tab {
+    return {
+        ...tab,
+        menuItem: { ...tab.menuItem, children: null },
+        pageMenuAuthority: undefined,
+    };
+}
+
+function normalizePersistedTab(tab: Tab): Tab {
+    const tabId = resolveStatisticsTabId(tab.urlPath || tab.id);
+    return tabId === tab.id ? tab : { ...tab, id: tabId };
+}
+
+function sanitizePersistedTabsAndActive(
+    tabs: Tab[],
+    activeTabId: string | null,
+): { tabs: Tab[]; activeTabId: string | null } {
+    let nextTabs = Array.isArray(tabs)
+        ? tabs.filter((tab) => !isBbsNoticeMenu(tab.menuItem)).map(normalizePersistedTab)
+        : [];
+    if (nextTabs.length > MAX_TABS) nextTabs = nextTabs.slice(0, MAX_TABS);
+
+    if (nextTabs.length === 0) {
+        return { tabs: [], activeTabId: null };
+    }
+
+    let nextActive = activeTabId;
+    if (nextActive && !nextTabs.some((t) => t.id === nextActive)) {
+        nextActive = nextTabs[0]?.id ?? null;
+    }
+    if (nextActive == null && nextTabs.length > 0) {
+        nextActive = nextTabs[0]?.id ?? null;
+    }
+
+    return { tabs: nextTabs, activeTabId: nextActive };
+}
+
+const useTabStoreHook = create<TabStore>()(
+    persist(
+        (set, get) => ({
+            tabs: [],
+            activeTabId: null,
+            menuList: null,
+            addTab: (menuItem: MenuItem) => {
+                if (isBbsNoticeMenu(menuItem)) {
+                    return false;
+                }
+
+                const { tabs, menuList } = get();
+                const tabId = resolveStatisticsTabId(menuItem.urlPath || "");
+
+                const existingTab = tabs.find((tab) => tab.id === tabId);
+
+                if (existingTab) {
+                    set({ activeTabId: tabId });
+                    ensureTabPageMenuAuthority(get, set, existingTab);
+                    return true;
+                }
+
+                if (tabs.length < MAX_TABS) {
+                    const newTab: Tab = {
+                        id: tabId,
+                        label: menuItem.menuKornNm,
+                        path: menuItem.menuPath,
+                        urlPath: menuItem.urlPath,
+                        parentEngNm:
+                            menuList?.find(
+                                (m) => m.menuCd === menuItem.parentId,
+                            )?.menuEngNm || "",
+                        menuItem,
+                        pageMenuAuthority: undefined,
+                    };
+
+                    set({
+                        tabs: [...tabs, newTab],
+                        activeTabId: tabId,
+                    });
+
+                    scheduleTabPageMenuAuthorityFetch(
+                        get,
+                        set,
+                        tabId,
+                        menuItem.menuCd,
+                    );
+
+                    return true;
+                }
+                return false;
+            },
+            removeTab: (tabId: string): void => {
+                const { tabs, activeTabId } = get();
+                const newTabs = tabs.filter((tab) => tab.id !== tabId);
+
+                let newActiveTabId = activeTabId;
+                if (activeTabId === tabId) {
+                    const closedTabIndex = tabs.findIndex(
+                        (tab) => tab.id === tabId,
+                    );
+                    if (newTabs.length > 0) {
+                        if (closedTabIndex > 0) {
+                            const prevTab = tabs[closedTabIndex - 1];
+                            newActiveTabId = prevTab ? prevTab.id : null;
+                        } else {
+                            const firstTab = newTabs[0];
+                            newActiveTabId = firstTab ? firstTab.id : null;
+                        }
+                    } else {
+                        newActiveTabId = null;
+                    }
+                }
+
+                set({
+                    tabs: newTabs,
+                    activeTabId: newActiveTabId,
+                });
+                if (newActiveTabId) {
+                    const nextActive = get().tabs.find((t) => t.id === newActiveTabId);
+                    if (nextActive) ensureTabPageMenuAuthority(get, set, nextActive);
+                }
+            },
+            setActiveTab: (tabId: string) => {
+                set({ activeTabId: tabId });
+                const tab = get().tabs.find((t) => t.id === tabId);
+                if (tab) ensureTabPageMenuAuthority(get, set, tab);
+            },
+            setMenuList: (menuList: MenuItem[] | null) => {
+                set({ menuList });
+            },
+            closeAllTabs: () => {
+                set({
+                    tabs: [],
+                    activeTabId: null,
+                });
+            },
+            closeOtherTabs: (tabId: string) => {
+                const { tabs } = get();
+                const tabToKeep = tabs.find((tab) => tab.id === tabId);
+
+                if (tabToKeep) {
+                    set({
+                        tabs: [tabToKeep],
+                        activeTabId: tabId,
+                    });
+                }
+            },
+            closeTabsToLeft: (tabId: string) => {
+                const { tabs, activeTabId } = get();
+                const index = tabs.findIndex((tab) => tab.id === tabId);
+                if (index <= 0) return;
+
+                const newTabs = tabs.slice(index);
+                let newActiveTabId = activeTabId;
+                if (activeTabId && !newTabs.some((tab) => tab.id === activeTabId)) {
+                    newActiveTabId = tabId;
+                }
+
+                set({
+                    tabs: newTabs,
+                    activeTabId: newActiveTabId,
+                });
+                if (newActiveTabId) {
+                    const nextActive = get().tabs.find((t) => t.id === newActiveTabId);
+                    if (nextActive) ensureTabPageMenuAuthority(get, set, nextActive);
+                }
+            },
+            closeTabsToRight: (tabId: string) => {
+                const { tabs, activeTabId } = get();
+                const index = tabs.findIndex((tab) => tab.id === tabId);
+                if (index === -1 || index >= tabs.length - 1) return;
+
+                const newTabs = tabs.slice(0, index + 1);
+                let newActiveTabId = activeTabId;
+                if (activeTabId && !newTabs.some((tab) => tab.id === activeTabId)) {
+                    newActiveTabId = tabId;
+                }
+
+                set({
+                    tabs: newTabs,
+                    activeTabId: newActiveTabId,
+                });
+                if (newActiveTabId) {
+                    const nextActive = get().tabs.find((t) => t.id === newActiveTabId);
+                    if (nextActive) ensureTabPageMenuAuthority(get, set, nextActive);
+                }
+            },
+        }),
+        {
+            name: TAB_STORE_PERSIST_KEY,
+            version: TAB_STORE_VERSION,
+            storage: createJSONStorage(() => localStorage),
+            partialize: (state) => ({
+                tabs: state.tabs.map(tabForPersist),
+                activeTabId: state.activeTabId,
+            }),
+            merge: (persistedState, currentState) => {
+                const p = persistedState as Partial<
+                    Pick<TabStore, "tabs" | "activeTabId">
+                > | null;
+                const rawTabs = p?.tabs;
+                const rawActive = p?.activeTabId;
+                const { tabs, activeTabId } = sanitizePersistedTabsAndActive(
+                    (rawTabs as Tab[]) ?? [],
+                    typeof rawActive === "string" || rawActive === null
+                        ? rawActive
+                        : null,
+                );
+                return {
+                    ...currentState,
+                    tabs,
+                    activeTabId,
+                };
+            },
+            onRehydrateStorage: () => (state, error) => {
+                if (error || !state) return;
+                queueMicrotask(() => hydrateActiveTabPageMenuAuthority());
+            },
+        },
+    ),
+);
+
+export const useTabStore = useTabStoreHook;
+export const getTabStoreState = () => useTabStoreHook.getState();
+
+// 로그아웃 또는 사용자 전환 시 로컬 탭 스냅샷 제거 및 메모리 상태 초기화
+export function clearTabStorePersist(): void {
+    useTabStoreHook.getState().closeAllTabs();
+    useTabStoreHook.persist.clearStorage();
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9fd7a2576..4c7b558c7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -873,12 +873,21 @@ importers:
       '@common/assets':
         specifier: workspace:*
         version: link:../../packages/common/assets
+      '@common/auth':
+        specifier: workspace:*
+        version: link:../../packages/common/auth
       '@common/business_components':
         specifier: workspace:*
         version: link:../../packages/common/business_components
       '@common/components':
         specifier: workspace:*
         version: link:../../packages/common/components
+      '@common/config':
+        specifier: workspace:*
+        version: link:../../packages/common/config
+      '@common/network':
+        specifier: workspace:*
+        version: link:../../packages/common/network
       '@fontsource-variable/noto-sans-kr':
         specifier: ^5.2.5
         version: 5.2.10

From 6acacbfcf49dc6ee87688318e1e6dfae5defa9c5 Mon Sep 17 00:00:00 2001
From: dongsilove <ljparkmindone@gmail.com>
Date: Wed, 15 Jul 2026 22:04:26 +0900
Subject: [PATCH 24/32] =?UTF-8?q?sn:=20=EA=B3=B5=ED=86=B5=20=EB=AA=A8?=
 =?UTF-8?q?=EB=93=88=20=EA=B8=B0=EB=B0=98=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/sn/app/(auth)/auth/layout.tsx            |  17 +
 apps/sn/app/(auth)/auth/login/page.tsx        |   2 +
 apps/sn/app/auth/login/page.tsx               |   2 -
 apps/sn/app/auth/login/route-bak.ts           |  14 -
 apps/sn/app/page.tsx                          |   4 +-
 apps/sn/package.json                          |   4 +-
 .../sn/src/{features => }/auth/login/index.ts |   0
 apps/sn/src/auth/login/ui/login-page.tsx      | 156 ++++++++
 .../{features => }/auth/login/ui/login.css    |  19 +-
 apps/sn/src/entities/auth/api/auth-service.ts | 109 ++++++
 apps/sn/src/entities/auth/index.ts            |   3 +-
 .../sn/src/entities/auth/lib/auth-wrapper.tsx | 121 +++---
 .../sn/src/entities/auth/lib/token-manager.ts | 138 +------
 apps/sn/src/entities/menu-authority/index.ts  |   7 +
 apps/sn/src/entities/menu/index.ts            |   3 +-
 apps/sn/src/entities/user/api/user-service.ts | 225 +++++++++++
 apps/sn/src/entities/user/index.ts            |  17 +
 .../src/entities/user/model/user-interface.ts | 362 ++++++++++++++++++
 .../user/ui/password-reset-dialog.tsx         | 124 ++++++
 .../src/features/auth/login/ui/login-page.tsx | 139 -------
 apps/sn/src/shared/config/api.ts              |  34 +-
 apps/sn/src/shared/config/auth.ts             |  17 +
 apps/sn/src/shared/config/env.ts              |  17 +-
 apps/sn/src/shared/config/index.ts            |   2 +
 apps/sn/src/shared/lib/bbs-notice-menu.ts     |  12 +
 apps/sn/src/shared/lib/cookie.ts              |   2 +
 apps/sn/src/shared/lib/index.ts               |   8 +-
 apps/sn/src/shared/lib/statistics-menu-url.ts |  84 ++++
 apps/sn/src/shared/ui/form.tsx                | 175 +++++++++
 apps/sn/src/store/admin-store.ts              |  29 ++
 apps/sn/src/store/tab-store.ts                | 327 ++++++++++++++++
 pnpm-lock.yaml                                |   6 +
 32 files changed, 1831 insertions(+), 348 deletions(-)
 create mode 100644 apps/sn/app/(auth)/auth/layout.tsx
 create mode 100644 apps/sn/app/(auth)/auth/login/page.tsx
 delete mode 100644 apps/sn/app/auth/login/page.tsx
 delete mode 100644 apps/sn/app/auth/login/route-bak.ts
 rename apps/sn/src/{features => }/auth/login/index.ts (100%)
 create mode 100644 apps/sn/src/auth/login/ui/login-page.tsx
 rename apps/sn/src/{features => }/auth/login/ui/login.css (94%)
 create mode 100644 apps/sn/src/entities/auth/api/auth-service.ts
 create mode 100644 apps/sn/src/entities/user/api/user-service.ts
 create mode 100644 apps/sn/src/entities/user/index.ts
 create mode 100644 apps/sn/src/entities/user/model/user-interface.ts
 create mode 100644 apps/sn/src/entities/user/ui/password-reset-dialog.tsx
 delete mode 100644 apps/sn/src/features/auth/login/ui/login-page.tsx
 create mode 100644 apps/sn/src/shared/config/auth.ts
 create mode 100644 apps/sn/src/shared/lib/bbs-notice-menu.ts
 create mode 100644 apps/sn/src/shared/lib/statistics-menu-url.ts
 create mode 100644 apps/sn/src/shared/ui/form.tsx
 create mode 100644 apps/sn/src/store/admin-store.ts
 create mode 100644 apps/sn/src/store/tab-store.ts

diff --git a/apps/sn/app/(auth)/auth/layout.tsx b/apps/sn/app/(auth)/auth/layout.tsx
new file mode 100644
index 000000000..42f63e71a
--- /dev/null
+++ b/apps/sn/app/(auth)/auth/layout.tsx
@@ -0,0 +1,17 @@
+import "../../../src/app/styles/base.css";
+
+export const metadata = {
+    title: "유역하수도 통합 정보플랫폼",
+};
+
+export default function AuthLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="ko">
+            <body>{children}</body>
+        </html>
+    );
+}
diff --git a/apps/sn/app/(auth)/auth/login/page.tsx b/apps/sn/app/(auth)/auth/login/page.tsx
new file mode 100644
index 000000000..8b642ac57
--- /dev/null
+++ b/apps/sn/app/(auth)/auth/login/page.tsx
@@ -0,0 +1,2 @@
+import { LoginPage } from "@/auth/login";
+export default LoginPage;
diff --git a/apps/sn/app/auth/login/page.tsx b/apps/sn/app/auth/login/page.tsx
deleted file mode 100644
index 7a35b0ddd..000000000
--- a/apps/sn/app/auth/login/page.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-import { LoginPage } from "@/features/auth/login";
-export default LoginPage;
diff --git a/apps/sn/app/auth/login/route-bak.ts b/apps/sn/app/auth/login/route-bak.ts
deleted file mode 100644
index 796537cc3..000000000
--- a/apps/sn/app/auth/login/route-bak.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { tokenManager } from "@/entities/auth/lib/token-manager";
-
-export async function GET(request: NextRequest) {
-  const hostname = request.nextUrl.hostname;
-  const redirectUrl = process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "https://portal.hasuon.or.kr";
-
-  if (hostname === "localhost" || hostname === "127.0.0.1" || hostname === "con.mind-one.co.kr") {
-    tokenManager.clearAuthToken();
-    return NextResponse.redirect(new URL("/", request.url));  // 로컬 및 개발 환경
-  } else {
-    return NextResponse.redirect(new URL(redirectUrl)); // 공단 환경
-  }
-}
\ No newline at end of file
diff --git a/apps/sn/app/page.tsx b/apps/sn/app/page.tsx
index b02c4bdca..a81b401db 100644
--- a/apps/sn/app/page.tsx
+++ b/apps/sn/app/page.tsx
@@ -15,7 +15,7 @@
  * - 로그인: POST /api/v1/auth/login (user-service)
  */
 "use client";
-import { LoginApi } from "@/entities/auth";
+import { authService } from "@/entities/auth";
 import { useEffect } from "react";
 
 const DEV_HOSTNAMES = new Set(["localhost", "127.0.0.1", "con.mind-one.co.kr"]);
@@ -38,7 +38,7 @@ export default function Home() {
     async function doLogin() {
       try {
         // 개발 환경에서는 남아 있는 만료/부분 쿠키로 인한 /map <-> / 루프를 막기 위해 항상 토큰을 재발급한다.
-        await LoginApi.login(DEV_LOGIN_PAYLOAD);
+        await authService.login(DEV_LOGIN_PAYLOAD);
         window.location.replace("/map");
       } catch (err) {
         console.error("로그인 실패", err);
diff --git a/apps/sn/package.json b/apps/sn/package.json
index 5b89e93db..ec64de9ce 100644
--- a/apps/sn/package.json
+++ b/apps/sn/package.json
@@ -10,9 +10,11 @@
   },
   "dependencies": {
     "@common/assets": "workspace:*",
-    "@common/business_components": "workspace:*",
+    "@common/auth": "workspace:*",
     "@common/components": "workspace:*",
     "@common/config": "workspace:*",
+    "@common/network": "workspace:*",
+    "@common/business_components": "workspace:*",
     "@fontsource-variable/noto-sans-kr": "^5.2.5",
     "@frontend-opensource/use-react-hooks": "^1.1.4",
     "@hookform/resolvers": "^4.1.3",
diff --git a/apps/sn/src/features/auth/login/index.ts b/apps/sn/src/auth/login/index.ts
similarity index 100%
rename from apps/sn/src/features/auth/login/index.ts
rename to apps/sn/src/auth/login/index.ts
diff --git a/apps/sn/src/auth/login/ui/login-page.tsx b/apps/sn/src/auth/login/ui/login-page.tsx
new file mode 100644
index 000000000..c41ca5f0a
--- /dev/null
+++ b/apps/sn/src/auth/login/ui/login-page.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+
+import { authService } from "@/entities/auth";
+import { images } from "@common/assets";
+
+import "./login.css";
+
+function LoginPage() {
+    const [errorMessage, setErrorMessage] = useState<string>("");
+
+    const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        setErrorMessage("");
+
+        const formData = new FormData(e.target as HTMLFormElement);
+        const userId = formData.get("id") as string;
+        const password = formData.get("password") as string;
+
+        try {
+            await authService.login({ userId, password });
+            window.location.href = "/";
+        } catch (error) {
+            const message =
+                error instanceof Error
+                    ? error.message
+                    : "로그인에 실패했습니다.";
+            setErrorMessage(message);
+        }
+    };
+
+    return (
+        <div className="login fx">
+            <div className="left_box fx">
+                <div className="text">
+                    <h1>
+                        유역하수도통합플랫폼
+                        <br />
+                        <span>하수도통계 관리시스템</span>
+                    </h1>
+                    <p>
+                        유역하수도통합플랫폼 하수도통계 관리시스템에 오신 것을
+                        환영합니다.
+                    </p>
+                </div>
+                <div className="img">
+                    <Image
+                        src={images.logo}
+                        width={229}
+                        height={46}
+                        alt="logo"
+                    />
+                </div>
+            </div>
+            <form
+                id="loginForm"
+                name="loginForm"
+                method="post"
+                onSubmit={handleSubmit}
+            >
+                <div className="login_box fx">
+                    <ul className="fx">
+                        <li>
+                            <h2>ID</h2>
+                            <div className="input_st st1">
+                                <i className="diveicon di-account-box" />
+                                <input
+                                    type="text"
+                                    className="id"
+                                    title="아이디를 입력하세요."
+                                    id="id"
+                                    name="id"
+                                    maxLength={12}
+                                />
+                            </div>
+                        </li>
+                        <li>
+                            <h2>PASSWORD</h2>
+                            <div className="input_st st2">
+                                <i className="diveicon di-key" />
+                                <input
+                                    type="password"
+                                    className="input_style"
+                                    maxLength={25}
+                                    title="비밀번호를 입력하세요."
+                                    id="password"
+                                    name="password"
+                                />
+                            </div>
+                        </li>
+                    </ul>
+                    <div className="bottom_box fx">
+                        <div className="checks fx">
+                            <input
+                                type="checkbox"
+                                name="checkId"
+                                title="로그인ID 저장여부"
+                                id="checkId"
+                            />
+                            <label htmlFor="checkId">아이디저장</label>
+                        </div>
+                        {/* <a href="javascript:fnUserSearch();" className=" pw_message fx"><i className="xi-external-link"></i>비밀번호 또는 아이디를 잃어버리셨나요?</a> */}
+                    </div>
+                    {errorMessage && (
+                        <div className="error_message">
+                            <span>{errorMessage}</span>
+                        </div>
+                    )}
+                    <button type="submit" className="login_btn fx">
+                        <span>LOGIN</span>
+                    </button>
+                    <div className="footer">
+                        <div className="copy fx">
+                            <p>copyright © 2023 KECO. All rights reserved.</p>
+                        </div>
+                        <div className="fot_btn fx">
+                            <a
+                                href="https://keco.or.kr/web/lay1/S1T6C1348/contents.do"
+                                target="_blank"
+                            >
+                                개인정보처리방침
+                            </a>
+                            <a
+                                href="https://keco.or.kr/web/lay1/S1T6C1349/contents.do"
+                                target="_blank"
+                            >
+                                저작권정책안내
+                            </a>
+                            <a
+                                href="https://keco.or.kr/web/lay1/S1T6C1350/contents.do"
+                                target="_blank"
+                            >
+                                이메일무단수집거부
+                            </a>
+                        </div>
+                        <p className="addr fx">
+                            <span>
+                                주소 : (22689) 인천광역시 서구 환경로 42(경서동
+                                종합환경연구단지)
+                            </span>
+                            <span>
+                                전화 : (시스템) 032-590-4321, 3752, 4314 / (통
+                                계) 032-590-3723, 3722
+                            </span>
+                            <span>팩스 :032-590-3729</span>
+                        </p>
+                    </div>
+                </div>
+            </form>
+        </div>
+    );
+}
+
+export { LoginPage };
diff --git a/apps/sn/src/features/auth/login/ui/login.css b/apps/sn/src/auth/login/ui/login.css
similarity index 94%
rename from apps/sn/src/features/auth/login/ui/login.css
rename to apps/sn/src/auth/login/ui/login.css
index af73c9c68..e65180ae7 100644
--- a/apps/sn/src/features/auth/login/ui/login.css
+++ b/apps/sn/src/auth/login/ui/login.css
@@ -1,4 +1,4 @@
-/**
+/**
 * OLYM Cascading Style Sheets
 * File Name : login.css
 * Description : 로그인 스타일시트
@@ -24,7 +24,8 @@ body {
 }
 .login .left_box {
   width: 100%;
-  background: url(/images/bg_login.jpg) no-repeat center/cover;
+  background: url(../../../../public/images/bg_login.jpg) no-repeat
+    center/cover;
   flex-direction: column;
   justify-content: space-between;
   padding: 7% 5% 5% 5%;
@@ -117,6 +118,20 @@ body {
   color: #327af5;
   font-size: 20px;
 }
+.login .login_box .error_message {
+  margin: 20px 0;
+  padding: 12px 20px;
+  background: #fee;
+  border: 1px solid #fcc;
+  border-radius: 5px;
+  color: #c33;
+  font-size: 14px;
+  text-align: center;
+}
+.login .login_box .error_message span {
+  display: block;
+  font-weight: 500;
+}
 .login .login_box .login_btn {
   position: relative;
   border-radius: 5px;
diff --git a/apps/sn/src/entities/auth/api/auth-service.ts b/apps/sn/src/entities/auth/api/auth-service.ts
new file mode 100644
index 000000000..b407c2f37
--- /dev/null
+++ b/apps/sn/src/entities/auth/api/auth-service.ts
@@ -0,0 +1,109 @@
+import {
+    ACCESS_TOKEN,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    ENDPOINT,
+} from "@/shared/config";
+import { getCookie } from "@/shared/lib";
+import {
+    type AuthPayload,
+    type AuthService,
+    getRemainingMs,
+} from "@common/auth";
+
+import {
+    clearRefreshTimer,
+    removeToken,
+    setToken,
+    setupRefreshTimer,
+    tokenManager,
+} from "../lib/token-manager";
+
+import { clearTabStorePersist } from "../../../store/tab-store";
+
+async function login(payload: AuthPayload): Promise<void> {
+    const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+    });
+
+    const data = await response.json();
+
+    const accessToken = data[ACCESS_TOKEN];
+    const tokenId = data[AUTH_USER_ID];
+
+    if (!accessToken || !tokenId) {
+        throw new Error("인증 토큰을 받지 못했습니다.");
+    }
+
+    const prevTokenId = getCookie(AUTH_USER_ID);
+    if (prevTokenId !== undefined && prevTokenId !== tokenId) {
+        clearTabStorePersist();
+    }
+
+    setToken(CLAIM_NAME, accessToken);
+    setToken(AUTH_USER_ID, tokenId);
+
+    const remainingMs = getRemainingMs(accessToken);
+    if (remainingMs > 0) {
+        setupRefreshTimer(silentRefresh, remainingMs);
+    }
+}
+
+async function silentRefresh(): Promise<void> {
+    console.log(`[silentRefresh] Called at ${new Date().toISOString()}`);
+    try {
+        const response = await fetch(
+            `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
+            { method: "PUT" },
+        );
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            throw new Error(data?.message ?? "토큰 갱신에 실패했습니다.");
+        }
+
+        const accessToken = data[ACCESS_TOKEN];
+        const tokenId = data[AUTH_USER_ID];
+
+        if (!accessToken || !tokenId) {
+            throw new Error("갱신된 인증 토큰을 받지 못했습니다.");
+        }
+
+        setToken(CLAIM_NAME, accessToken);
+        setToken(AUTH_USER_ID, tokenId);
+
+        const remainingMs = getRemainingMs(accessToken);
+        if (remainingMs > 0) {
+            setupRefreshTimer(silentRefresh, remainingMs);
+        }
+    } catch (error) {
+        console.error(
+            `[silentRefresh] Failed at ${new Date().toISOString()}`,
+            error,
+        );
+        tokenManager.clearAuthToken();
+        if (typeof window !== "undefined") {
+            window.dispatchEvent(new CustomEvent("auth:logout"));
+        }
+    }
+}
+
+export async function logout(): Promise<void> {
+    tokenManager.clearAuthToken();
+    removeToken("site-id-key");
+    removeToken("site-theme-key");
+
+    if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("auth:logout"));
+    }
+}
+
+export const authService: AuthService = {
+    login,
+    silentRefresh,
+    declineSessionExtend: clearRefreshTimer,
+    logout,
+};
diff --git a/apps/sn/src/entities/auth/index.ts b/apps/sn/src/entities/auth/index.ts
index 97e142225..7f0d0081a 100644
--- a/apps/sn/src/entities/auth/index.ts
+++ b/apps/sn/src/entities/auth/index.ts
@@ -1,2 +1,3 @@
-export { LoginApi } from "./api/login-service";
+export { authService } from "./api/auth-service";
 export { AuthWrapper } from "./lib/auth-wrapper";
+export { tokenManager } from "./lib/token-manager";
diff --git a/apps/sn/src/entities/auth/lib/auth-wrapper.tsx b/apps/sn/src/entities/auth/lib/auth-wrapper.tsx
index f37ff4041..534e1c776 100644
--- a/apps/sn/src/entities/auth/lib/auth-wrapper.tsx
+++ b/apps/sn/src/entities/auth/lib/auth-wrapper.tsx
@@ -1,71 +1,88 @@
 "use client";
 
 import { useEffect } from "react";
-import { usePathname } from "next/navigation";
-import { client } from "@/shared/api";
-import type { IUserInfo } from "@/shared/store";
-import { useUserStore } from "@/shared/lib";
-import { ENDPOINT, AUTH_USER_ID } from "@/shared/config";
-import { isAtLoginRedirectUrl } from "@common/network";
-import { getCookie } from "@/shared/lib";
-import { tokenManager } from "./token-manager";
+import { useRouter } from "next/navigation";
 
-const LOGIN_PAGE_URL =
-  process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
+import { isAxiosError } from "axios";
+
+import { client } from "@/shared/api";
+import {
+    AUTH_LOGIN_REDIRECT_URL,
+    AUTH_USER_ID,
+    CLAIM_NAME,
+    ENDPOINT,
+} from "@/shared/config";
+import { useUserStore } from "@/shared/lib";
+import type { IUserInfo } from "@/shared/store";
+import { getRemainingMs } from "@common/auth";
+import { isAtLoginRedirectUrl } from "@common/network";
+
+import { authService } from "../api/auth-service";
+
+import { getToken, setupRefreshTimer } from "./token-manager";
 
 const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
-  const pathname = usePathname();
-  const { userInfo, setUserInfo } = useUserStore((state) => state);
+    const router = useRouter();
+    const userInfo = useUserStore((state) => state.userInfo);
+    const setUserInfo = useUserStore((state) => state.setUserInfo);
 
-  async function authCheck() {
-    if (isAtLoginRedirectUrl(LOGIN_PAGE_URL)) {
-      return;
-    }
+    useEffect(() => {
+        // 페이지 새로고침 시 silentRefresh 타이머 복구
+        const token = getToken(CLAIM_NAME);
+        if (token) {
+            const remainingMs = getRemainingMs(token);
+            if (remainingMs > 0) {
+                console.log(
+                    `[AuthWrapper] Refresh timer set: ${remainingMs}ms (${remainingMs / 1000}s)`,
+                );
+                setupRefreshTimer(authService.silentRefresh, remainingMs);
+            }
+        }
 
-    const userId = getCookie(AUTH_USER_ID);
-    if (!userId) {
-      throw new Error("Missing required authentication tokens");
-    }
+        if (isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) return;
 
-    const response = await client.get<IUserInfo>(
-      `${ENDPOINT.USER_SERVICE.USERS}/info/me`,
-    );
-    if (!userInfo) setUserInfo(response.data);
-  }
+        async function authCheck() {
+            const userId = getToken(AUTH_USER_ID);
+            if (!userId) {
+                router.replace(AUTH_LOGIN_REDIRECT_URL);
+                return;
+            }
 
-  useEffect(() => {
-    (async () => {
-      try {
-        await authCheck();
-      } catch (error) {
-        console.error(error);
-        
-        setUserInfo(null);
+            if (userInfo) return;
 
-        if (isAtLoginRedirectUrl(LOGIN_PAGE_URL)) return;
+            const response = await client.get<IUserInfo>(
+                `${ENDPOINT.USER_SERVICE.USERS}/info/me`,
+            );
+            setUserInfo(response.data);
+        }
 
-        // const hostname = window.location.hostname;
+        authCheck().catch((error) => {
+            // 401은 @common/network error-interceptor에서 이미 리다이렉트 처리됨
+            if (isAxiosError(error) && error.response?.status === 401) return;
 
-        // // 개발 환경에서는 localhost 도메인 사용
-        // if (
-        //   hostname === "localhost" ||
-        //   hostname === "127.0.0.1" ||
-        //   hostname === "con.mind-one.co.kr"
-        // )
-        //   window.location.href = "/";
+            console.error(error);
+            setUserInfo(null);
+            if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+                router.replace(AUTH_LOGIN_REDIRECT_URL);
+            }
+        });
+    }, []);
 
-        // // 운영 환경에서는 서브도메인을 포함한 최상위 도메인 사용
-        // // router.push는 같은 Next.js 앱 내에서만 작동하므로 다른 앱으로 이동할 때는 window.location.href 사용
-        // if (hostname.includes("hasuon.or.kr"))
-        //   window.location.href = LOGIN_PAGE_URL; // 세션 만료 시 CM 로그인 페이지로 리다이렉트
+    // silentRefresh 실패 시 auth:logout 이벤트를 수신해 로그인으로 이동
+    useEffect(() => {
+        function handleAuthLogout() {
+            setUserInfo(null);
+            if (!isAtLoginRedirectUrl(AUTH_LOGIN_REDIRECT_URL)) {
+                router.replace(AUTH_LOGIN_REDIRECT_URL);
+            }
+        }
 
-        // 개발/운영 환경에서 로그인 URL 분기는 환경 변수로 처리 (.env.*)
-        window.location.assign(LOGIN_PAGE_URL);
-      }
-    })();
-  }, [pathname]);
+        window.addEventListener("auth:logout", handleAuthLogout);
+        return () =>
+            window.removeEventListener("auth:logout", handleAuthLogout);
+    }, []);
 
-  return <>{children}</>;
+    return <>{children}</>;
 };
 
 export { AuthWrapper };
diff --git a/apps/sn/src/entities/auth/lib/token-manager.ts b/apps/sn/src/entities/auth/lib/token-manager.ts
index 5b24c8bd3..83affbcaf 100644
--- a/apps/sn/src/entities/auth/lib/token-manager.ts
+++ b/apps/sn/src/entities/auth/lib/token-manager.ts
@@ -1,127 +1,15 @@
-import { AUTH_USER_ID, CLAIM_NAME } from "@/shared/config";
-import { getCookie, setCookie, removeCookie } from "@/shared/lib";;
+import { authConfig } from "@/shared/config/auth";
+import { createTokenManager } from "@common/auth";
 
-type JwtPayload = {
-  sub?: string;
-  exp?: number;
-  iat?: number;
-  [key: string]: unknown;
-};
+export const tokenManager = createTokenManager(authConfig);
 
-export class TokenManager {
-  private static instance: TokenManager;
-  private refreshTimer: NodeJS.Timeout | null = null;
-
-  private constructor() { }
-
-  public static getInstance(): TokenManager {
-    if (!TokenManager.instance) {
-      TokenManager.instance = new TokenManager();
-    }
-    return TokenManager.instance;
-  }
-
-  public getToken(key: string): string | undefined {
-    return getCookie(key);
-  }
-
-  private parseJwt(token: string): JwtPayload {
-    const parts = token.split(".");
-    if (parts.length !== 3) {
-      throw new Error("유효한 JWT 형식이 아닙니다.");
-    }
-
-    const base64Url = parts[1] ?? "";
-    const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
-    const padded = base64.padEnd(Math.ceil(base64.length / 4) * 4, "=");
-    const jsonPayload = decodeURIComponent(
-      atob(padded)
-        .split("")
-        .map((char) => `%${char.charCodeAt(0).toString(16).padStart(2, "0")}`)
-        .join("")
-    );
-
-    return JSON.parse(jsonPayload) as JwtPayload;
-  }
-
-  public getRemainingMsFromToken(key: string = CLAIM_NAME): number | null {
-    const token = this.getToken(key);
-    if (!token) {
-      return null;
-    }
-
-    try {
-      const payload = this.parseJwt(token);
-      if (typeof payload.exp !== "number") {
-        return null;
-      }
-
-      return payload.exp * 1000 - Date.now();
-    } catch (error) {
-      console.error("JWT 파싱 오류:", error);
-      return null;
-    }
-  }
-
-  public isExpiredToken(key: string = CLAIM_NAME): boolean {
-    const remainingMs = this.getRemainingMsFromToken(key);
-    return remainingMs === null || remainingMs <= 0;
-  }
-
-  public setToken(key: string, value: string): void {
-    // 환경에 따른 도메인 설정
-    //const domain = this.getCookieDomain();
-
-    setCookie(key, value, {
-      secure: window.location.protocol === "https:",
-      sameSite: "lax",
-      //domain: domain,
-      path: "/",
-    });
-  }
-
-  private getCookieDomain(): string | undefined {
-    const hostname = window.location.hostname;
-
-    // 개발 환경에서는 localhost 도메인 사용
-    if (hostname === "localhost" || hostname === "127.0.0.1") return undefined; // localhost에서는 도메인 설정하지 않음
-
-    // 운영 환경에서는 서브도메인을 포함한 최상위 도메인 사용
-    if (hostname.includes("hasuon.or.kr")) return ".hasuon.or.kr"; // 모든 서브도메인에서 공유
-
-    // 기타 환경에서는 현재 호스트명 사용
-    return hostname;
-  }
-
-  public removeToken(key: string): void {
-    removeCookie(key);
-  }
-
-  public setupRefreshTimer(
-    callback: () => Promise<void>,
-    expirationTime: number,
-  ): void {
-    if (this.refreshTimer) {
-      clearTimeout(this.refreshTimer);
-    }
-
-    this.refreshTimer = setTimeout(() => {
-      callback().catch((error) => {
-        console.error("Silent refresh failed:", error);
-        this.clearAuthToken();
-      });
-    }, expirationTime - 60000);
-  }
-
-  public clearAuthToken(): void {
-    if (this.refreshTimer) {
-      clearTimeout(this.refreshTimer);
-      this.refreshTimer = null;
-    }
-
-    this.removeToken(CLAIM_NAME);
-    this.removeToken(AUTH_USER_ID);
-  }
-}
-
-export const tokenManager = TokenManager.getInstance();
+export const {
+    getToken,
+    setToken,
+    removeToken,
+    setupRefreshTimer,
+    clearRefreshTimer,
+    getAccessToken,
+    getRefreshToken,
+    getUserId,
+} = tokenManager;
diff --git a/apps/sn/src/entities/menu-authority/index.ts b/apps/sn/src/entities/menu-authority/index.ts
index 2a555b77e..d5991d01c 100644
--- a/apps/sn/src/entities/menu-authority/index.ts
+++ b/apps/sn/src/entities/menu-authority/index.ts
@@ -1,2 +1,9 @@
+export { MenuAuthorityApi } from "./api/menu-authority-service";
+export {
+    menuAuthorityFormSchema,
+    type MenuAuthority,
+    type MenuAuthorityPayload,
+    type MenuAuthorityFormData,
+} from "./model/menu-authority-interface";
 export { AuthorityButton } from "./ui/authority-button";
 export { ManagementAuthorityDialog } from "./ui/management-authority-dialog";
diff --git a/apps/sn/src/entities/menu/index.ts b/apps/sn/src/entities/menu/index.ts
index 04f63e38b..2bd1b1787 100644
--- a/apps/sn/src/entities/menu/index.ts
+++ b/apps/sn/src/entities/menu/index.ts
@@ -1,2 +1,3 @@
+export { MenuApi } from "./api/menu-service";
+export type { MenuItem, MenuService } from "./model/menu-interface";
 export { MenuWrapper } from "./lib/menu-wrapper";
-export type { MenuItem } from "./model/menu-interface";
diff --git a/apps/sn/src/entities/user/api/user-service.ts b/apps/sn/src/entities/user/api/user-service.ts
new file mode 100644
index 000000000..482d51e16
--- /dev/null
+++ b/apps/sn/src/entities/user/api/user-service.ts
@@ -0,0 +1,225 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type {
+  UserService,
+  UserSearchParams,
+  UserList,
+  UserDetailResponse,
+  UserSttsStatsList,
+  UserUpdateData,
+  UserPasswordUpdateData,
+  UserFindPasswordUpdateData,
+  UserPasswordMatchData,
+  UserUpdateInfoData,
+  UserSaveData,
+  UserFindPasswordSaveData,
+  UserVerifyData,
+  UserEmailData,
+  UserIdData,
+  AdminUserList,
+} from "../model/user-interface";
+
+export class UserApiService implements UserService {
+  // 사용자 목록 조회
+  public async findPageUser(params: UserSearchParams): Promise<UserList> {
+    const response = await client.get<UserList>(
+      `${ENDPOINT.USER_SERVICE.USERS}`,
+      { params },
+    );
+    return response.data;
+  }
+
+  // 사용자 단건 조회
+  public async findByUserUnqId(userUnqId: string): Promise<UserDetailResponse> {
+    const response = await client.get<UserDetailResponse>(
+      `${ENDPOINT.USER_SERVICE.USERS}/${userUnqId}`,
+    );
+    return response.data;
+  }
+
+  // 로그인한 사용자 정보 조회
+  public async findByUserUnqIdByLogin(): Promise<UserDetailResponse> {
+    const response = await client.get<UserDetailResponse>(
+      `${ENDPOINT.USER_SERVICE.USERS}/info/me`,
+    );
+    return response.data;
+  }
+
+  // 사용자 회원상태 통계 조회
+  public async selectUserSttsStats(): Promise<UserSttsStatsList> {
+    const response = await client.get<UserSttsStatsList>(
+      `${ENDPOINT.USER_SERVICE.USERS}/stts/stats`,
+    );
+    return response.data;
+  }
+
+  // 사용자 저장
+  public async saveUser(data: UserSaveData): Promise<string> {
+    const response = await client.post<string>(
+      `${ENDPOINT.USER_SERVICE.USERS}`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 사용자 수정
+  public async updateUser(
+    userUnqId: string,
+    data: UserUpdateData,
+  ): Promise<string> {
+    const response = await client.put<string>(
+      `${ENDPOINT.USER_SERVICE.USERS}/${userUnqId}`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 사용자 삭제
+  public async deleteUser(userUnqId: string): Promise<boolean> {
+    const response = await client.delete<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/delete/${userUnqId}`,
+    );
+    return response.data;
+  }
+
+  // 사용자 계정잠금 처리
+  public async lockUser(userUnqId: string): Promise<boolean> {
+    const response = await client.put<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/lock/${userUnqId}`,
+    );
+    return response.data;
+  }
+
+  // 사용자 계정잠금 해제처리
+  public async unlockUser(userUnqId: string): Promise<boolean> {
+    const response = await client.put<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/unlock/${userUnqId}`,
+    );
+    return response.data;
+  }
+
+  // 리프레시 토큰 정보 재발급
+  public async refreshToken(): Promise<void> {
+    await client.put(`${ENDPOINT.USER_SERVICE.USERS}/token/refresh`);
+  }
+
+  // 사용자 비밀번호 변경
+  public async updatePassword(data: UserPasswordUpdateData): Promise<boolean> {
+    const response = await client.put<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/password/update`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 사용자 비밀번호 초기화(관리자용)
+  public async initializePassword(
+    userUnqId: string,
+    data: UserPasswordUpdateData,
+  ): Promise<boolean> {
+    const response = await client.put<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/password/initialize/${userUnqId}`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 사용자 비밀번호 찾기 변경
+  public async changePassword(
+    data: UserFindPasswordUpdateData,
+  ): Promise<boolean> {
+    const response = await client.put<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/password/change`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 사용자 비밀번호 확인
+  public async matchPassword(data: UserPasswordMatchData): Promise<boolean> {
+    const response = await client.post<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/password/match`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 사용자 비밀번호 찾기
+  public async findPasswordUser(
+    data: UserFindPasswordSaveData,
+  ): Promise<boolean> {
+    const response = await client.post<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/password/find`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 사용자 비밀번호 찾기 유효성 확인
+  public async validPassword(token: string): Promise<boolean> {
+    const response = await client.get<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/password/valid/${token}`,
+    );
+    return response.data;
+  }
+
+  // 사용자 회원정보 변경
+  public async updateInfo(
+    userUnqId: string,
+    data: UserUpdateInfoData,
+  ): Promise<string> {
+    const response = await client.put<string>(
+      `${ENDPOINT.USER_SERVICE.USERS}/info/${userUnqId}`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 사용자 승인처리
+  public async applyUser(userUnqId: string): Promise<boolean> {
+    const response = await client.put<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/apply/${userUnqId}`,
+    );
+    return response.data;
+  }
+
+  // 사용자 회원탈퇴
+  public async leaveUser(data: UserVerifyData): Promise<boolean> {
+    const response = await client.post<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/leave`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 사용자 이메일 중복 체크
+  public async existsEmail(data: UserEmailData): Promise<boolean> {
+    const response = await client.post<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/exists`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 사용자 아이디 중복 체크
+  public async existsUserId(data: UserIdData): Promise<boolean> {
+    const response = await client.post<boolean>(
+      `${ENDPOINT.USER_SERVICE.USERS}/existsUserId`,
+      data,
+    );
+    return response.data;
+  }
+
+  // 관리자 목록 조회
+  public async findPageAdminUser(
+    params: UserSearchParams,
+  ): Promise<AdminUserList> {
+    const response = await client.get<AdminUserList>(
+      `${ENDPOINT.USER_SERVICE.USERS}/admin/list`,
+      { params },
+    );
+    return response.data;
+  }
+}
+
+export const UserApi = new UserApiService();
diff --git a/apps/sn/src/entities/user/index.ts b/apps/sn/src/entities/user/index.ts
new file mode 100644
index 000000000..8927256f9
--- /dev/null
+++ b/apps/sn/src/entities/user/index.ts
@@ -0,0 +1,17 @@
+export { UserApi } from "./api/user-service";
+export {
+  USER_STATE_CODE,
+  userSaveSchema,
+  userPasswordUpdateSchema,
+  userUpdateSchema,
+  type UserStateCode,
+  type UserSearchParams,
+  type UserListResponse,
+  type UserSaveData,
+  type UserDetailResponse,
+  type UserPasswordUpdateData,
+  type UserUpdateData,
+  type AdminUserList,
+  type AdminUserListResponse,
+} from "./model/user-interface";
+export { PasswordResetDialog } from "./ui/password-reset-dialog";
diff --git a/apps/sn/src/entities/user/model/user-interface.ts b/apps/sn/src/entities/user/model/user-interface.ts
new file mode 100644
index 000000000..012fe9e92
--- /dev/null
+++ b/apps/sn/src/entities/user/model/user-interface.ts
@@ -0,0 +1,362 @@
+import { z } from "zod";
+import type { PageableList, PageableParams } from "@/shared/model";
+
+export const USER_STATE_CODE = {
+  대기: "00",
+  정상: "01",
+  정지: "07",
+  탈퇴: "08",
+  삭제: "09",
+} as const;
+
+export type UserStateCode =
+  (typeof USER_STATE_CODE)[keyof typeof USER_STATE_CODE];
+
+// 사용자 검색 파라미터
+export interface UserSearchParams extends PageableParams {
+  keywordType?: string;
+  keyword?: string;
+  userStateCode?: string;
+  aprvYn?: string;
+  grpId?: string;
+  frDateYmd?: string;
+  toDateYmd?: string;
+  userName?: string;
+}
+
+// 사용자 목록 응답 인터페이스
+export interface UserListResponse {
+  userId: string;
+  userName: string;
+  email: string;
+  roleId: string;
+  roleName: string;
+  userStateCode: UserStateCode;
+  userStateCodeName: string;
+  lastLoginDate: string;
+  loginFailCount: number;
+  userUnqId: string;
+  mphn: string;
+  telno: string;
+  aprvYn: string;
+  regDt: string;
+  laeSeCd: string;
+  laeSeNm: string;
+  ogdpSeCd: string;
+  ogdpSeNm: string;
+  instSeCd: string;
+  instSeNm: string;
+  aprvYmd: string;
+}
+
+// 사용자 상세 응답 인터페이스
+export interface UserDetailResponse {
+  regDt: string;
+  mdfcnDt: string;
+  rgtr: string;
+  mdfr: string;
+  userUnqId: string;
+  userId: string;
+  userName: string;
+  email: string;
+  encryptedPassword: string;
+  refreshToken: string;
+  userStateCode: UserStateCode;
+  lastLoginDate: string;
+  loginFailCount: number;
+  pswdHnt: string;
+  pswdAns: string;
+  mphn: string;
+  telno: string;
+  zip: string;
+  addr: string;
+  daddr: string;
+  laeSeCd: string;
+  ogdpSeCd: string;
+  aprvYn: string;
+  autzrId: string;
+  expryYmd: string;
+  lastPswdChgDt: string;
+  googleId: string;
+  kakaoId: string;
+  naverId: string;
+  isSocialUser: boolean;
+  hasPassword: boolean;
+  twoFactorEnabled: boolean;
+  adminRoleYn: string;
+  instSeCd: string;
+  aprvYmd: string;
+  enoCd: string;
+  dtlInstCd: string;
+  laeSeNm: string;
+  ogdpSeNm: string;
+  instSeNm: string;
+  userStateNm: string;
+  pswdHntNm: string;
+  ecoNm: string;
+  dtlInstNm: string;
+}
+
+// 사용자 상태 통계 응답 인터페이스
+export interface UserSttsStatsResponse {
+  sttsCd: string;
+  sttsNm: string;
+  cnt: number;
+}
+
+// 관리자 목록 응답 인터페이스
+export interface AdminUserListResponse {
+  userUnqId: string;
+  userId: string;
+  userName: string;
+  groupId: string;
+  groupNm: string;
+  userStateCode: string;
+  userStateCodeName: string;
+  laeSeCd: string;
+  laeSeNm: string;
+  ogdpSeCd: string;
+  ogdpSeNm: string;
+  instSeCd: string;
+  instSeNm: string;
+  dtlInstCd: string;
+  dtlInstNm: string;
+  mdfr: string;
+  mdfrNm: string;
+  mdfcnDt: string;
+}
+
+// 사용자 수정 요청 스키마
+export const userUpdateSchema = z.object({
+  userId: z.string().optional(),
+  userName: z.string(),
+  email: z.string().email().optional(),
+  password: z
+    .string()
+    .regex(
+      /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/,
+      "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.",
+    )
+    .optional(),
+  roleId: z.string().optional(),
+  userStateCode: z.string(),
+  pswdHnt: z.string().max(10),
+  pswdAns: z.string().max(100).optional(),
+  mphn: z.string().max(11).optional(),
+  telno: z.string().max(11).optional(),
+  zip: z.string().max(5).optional(),
+  addr: z.string().max(200).optional(),
+  daddr: z.string().max(200).optional(),
+  laeSeCd: z.string().max(10),
+  ogdpSeCd: z.string().max(10),
+  aprvYn: z.string(),
+  autzrId: z.string().uuid().optional(),
+  expryYmd: z.string().max(8),
+  instSeCd: z.string().optional(),
+  dtlInstCd: z.string().optional(),
+  aprvYmd: z.string().max(8).optional(),
+  enoCd: z.string().optional(),
+});
+
+// 사용자 비밀번호 변경 스키마
+export const userPasswordUpdateSchema = z
+  .object({
+    password: z.string().optional(),
+    provider: z.string().optional(),
+    token: z.string().optional(),
+    newPassword: z
+      .string()
+      .regex(
+        /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/,
+        "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.",
+      ),
+    newPasswordConfirm: z.string(),
+  })
+  .refine((data) => data.newPassword === data.newPasswordConfirm, {
+    message: "비밀번호가 일치하지 않습니다.",
+    path: ["newPasswordConfirm"],
+  });
+
+// 사용자 비밀번호 찾기 변경 스키마
+export const userFindPasswordUpdateSchema = z.object({
+  tokenValue: z.string(),
+  password: z
+    .string()
+    .regex(
+      /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/,
+      "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.",
+    ),
+});
+
+// 사용자 비밀번호 확인 스키마
+export const userPasswordMatchSchema = z.object({
+  password: z
+    .string()
+    .regex(
+      /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/,
+      "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.",
+    ),
+});
+
+// 사용자 회원정보 변경 스키마
+export const userUpdateInfoSchema = z.object({
+  password: z
+    .string()
+    .regex(
+      /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/,
+      "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.",
+    )
+    .optional(),
+  provider: z.string().optional(),
+  token: z.string().optional(),
+  userName: z.string(),
+  email: z.string().email().optional(),
+});
+
+// 사용자 저장 스키마
+export const userSaveSchema = z.object({
+  userId: z.string(),
+  userName: z.string(),
+  email: z.string().email().optional(),
+  password: z
+    .string()
+    .regex(
+      /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,20}$/,
+      "비밀번호는 8~20자, 영문/숫자/특수기호를 모두 포함해야 합니다.",
+    ),
+  pswdHnt: z.string().max(10),
+  pswdAns: z.string().max(100).optional(),
+  mphn: z.string().max(11).optional(),
+  telno: z.string().max(11).optional(),
+  zip: z.string().max(5).optional(),
+  addr: z.string().max(200).optional(),
+  daddr: z.string().max(200).optional(),
+  laeSeCd: z.string().max(10),
+  ogdpSeCd: z.string().max(10),
+  expryYmd: z.string().max(8),
+  instSeCd: z.string().optional(),
+  dtlInstCd: z.string().optional(),
+  enoCd: z.string().optional(),
+});
+
+// 사용자 비밀번호 찾기 저장 스키마
+export const userFindPasswordSaveSchema = z.object({
+  userName: z.string(),
+  emailAddr: z.string().email(),
+  mainUrl: z.string(),
+  changePasswordUrl: z.string(),
+});
+
+// 사용자 인증 요청 스키마
+export const userVerifySchema = z.object({
+  password: z
+    .string()
+    .regex(/((?=.*[0-9])(?=.*[a-zA-Z])(?=.*\W)(?=\S+$).{8,20})|()/)
+    .optional(),
+  provider: z.string().optional(),
+  token: z.string().optional(),
+});
+
+// 사용자 이메일 요청 스키마
+export const userEmailSchema = z.object({
+  userId: z.string().optional(),
+  email: z.string().email(),
+});
+
+// 사용자 ID 요청 스키마
+export const userIdSchema = z.object({
+  userId: z.string(),
+});
+
+// Zod 스키마 타입 정의
+export type UserUpdateData = z.infer<typeof userUpdateSchema>;
+export type UserPasswordUpdateData = z.infer<typeof userPasswordUpdateSchema>;
+export type UserFindPasswordUpdateData = z.infer<
+  typeof userFindPasswordUpdateSchema
+>;
+export type UserPasswordMatchData = z.infer<typeof userPasswordMatchSchema>;
+export type UserUpdateInfoData = z.infer<typeof userUpdateInfoSchema>;
+export type UserSaveData = z.infer<typeof userSaveSchema>;
+export type UserFindPasswordSaveData = z.infer<
+  typeof userFindPasswordSaveSchema
+>;
+export type UserVerifyData = z.infer<typeof userVerifySchema>;
+export type UserEmailData = z.infer<typeof userEmailSchema>;
+export type UserIdData = z.infer<typeof userIdSchema>;
+
+// 페이지네이션 타입 정의
+export type UserList = PageableList<UserListResponse>;
+export type UserSttsStatsList = UserSttsStatsResponse[];
+export type AdminUserList = PageableList<AdminUserListResponse>;
+
+// 사용자 서비스 인터페이스
+export interface UserService {
+  // 사용자 목록 조회
+  findPageUser: (params: UserSearchParams) => Promise<UserList>;
+
+  // 사용자 단건 조회
+  findByUserUnqId: (userUnqId: string) => Promise<UserDetailResponse>;
+
+  // 로그인한 사용자 정보 조회
+  findByUserUnqIdByLogin: () => Promise<UserDetailResponse>;
+
+  // 사용자 회원상태 통계 조회
+  selectUserSttsStats: () => Promise<UserSttsStatsList>;
+
+  // 사용자 저장
+  saveUser: (data: UserSaveData) => Promise<string>;
+
+  // 사용자 수정
+  updateUser: (userUnqId: string, data: UserUpdateData) => Promise<string>;
+
+  // 사용자 삭제
+  deleteUser: (userUnqId: string) => Promise<boolean>;
+
+  // 사용자 계정잠금 처리
+  lockUser: (userUnqId: string) => Promise<boolean>;
+
+  // 사용자 계정잠금 해제처리
+  unlockUser: (userUnqId: string) => Promise<boolean>;
+
+  // 리프레시 토큰 정보 재발급
+  refreshToken: () => Promise<void>;
+
+  // 사용자 비밀번호 변경
+  updatePassword: (data: UserPasswordUpdateData) => Promise<boolean>;
+
+  // 사용자 비밀번호 초기화(관리자용)
+  initializePassword: (
+    userUnqId: string,
+    data: UserPasswordUpdateData,
+  ) => Promise<boolean>;
+
+  // 사용자 비밀번호 찾기 변경
+  changePassword: (data: UserFindPasswordUpdateData) => Promise<boolean>;
+
+  // 사용자 비밀번호 확인
+  matchPassword: (data: UserPasswordMatchData) => Promise<boolean>;
+
+  // 사용자 비밀번호 찾기
+  findPasswordUser: (data: UserFindPasswordSaveData) => Promise<boolean>;
+
+  // 사용자 비밀번호 찾기 유효성 확인
+  validPassword: (token: string) => Promise<boolean>;
+
+  // 사용자 회원정보 변경
+  updateInfo: (userUnqId: string, data: UserUpdateInfoData) => Promise<string>;
+
+  // 사용자 승인처리
+  applyUser: (userUnqId: string) => Promise<boolean>;
+
+  // 사용자 회원탈퇴
+  leaveUser: (data: UserVerifyData) => Promise<boolean>;
+
+  // 사용자 이메일 중복 체크
+  existsEmail: (data: UserEmailData) => Promise<boolean>;
+
+  // 사용자 아이디 중복 체크
+  existsUserId: (data: UserIdData) => Promise<boolean>;
+
+  // 관리자 목록 조회
+  findPageAdminUser: (params: UserSearchParams) => Promise<AdminUserList>;
+}
diff --git a/apps/sn/src/entities/user/ui/password-reset-dialog.tsx b/apps/sn/src/entities/user/ui/password-reset-dialog.tsx
new file mode 100644
index 000000000..548e8fa1a
--- /dev/null
+++ b/apps/sn/src/entities/user/ui/password-reset-dialog.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+  Button,
+  Input,
+  DialogTrigger,
+} from "@common/components";
+import {
+  UserApi,
+  userPasswordUpdateSchema,
+  type UserPasswordUpdateData,
+} from "@/entities/user";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/shared/ui/form";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+
+interface PasswordResetDialogProps {
+  userUnqId: string;
+  children: ReactNode;
+}
+
+export function PasswordResetDialog({
+  userUnqId,
+  children,
+}: PasswordResetDialogProps) {
+  const alert = useAlertStore((state) => state.setMessage);
+
+  const [open, setOpen] = useState(false);
+
+  const form = useForm<UserPasswordUpdateData>({
+    resolver: zodResolver(userPasswordUpdateSchema),
+    defaultValues: {
+      newPassword: "",
+      newPasswordConfirm: "",
+      provider: "password",
+    },
+  });
+
+  const { mutate: onPasswordReset } = useMutationWrapper({
+    mutationFn: (data: UserPasswordUpdateData) =>
+      UserApi.initializePassword(userUnqId, data),
+    onSuccess: () => {
+      alert("비밀번호가 초기화되었습니다.", () => {
+        setOpen(false);
+        form.reset();
+      });
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>비밀번호 초기화</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit((data) => onPasswordReset(data))}
+            className="space-y-6"
+          >
+            <FormField
+              control={form.control}
+              name="newPassword"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>새 비밀번호</FormLabel>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      type="password"
+                      className="!text-[1.3rem]"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="newPasswordConfirm"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>새 비밀번호 확인</FormLabel>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      type="password"
+                      className="!text-[1.3rem]"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button type="button" className="white">
+                  취소
+                </Button>
+              </DialogClose>
+              <Button type="submit">확인</Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/sn/src/features/auth/login/ui/login-page.tsx b/apps/sn/src/features/auth/login/ui/login-page.tsx
deleted file mode 100644
index dea3c90f1..000000000
--- a/apps/sn/src/features/auth/login/ui/login-page.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import { useEffect } from "react";
-import { images } from "@common/assets";
-import { LoginApi } from "@/entities/auth";
-import "./login.css";
-
-function LoginPage() {
-  useEffect(() => {
-    const hostname = window.location.hostname;
-    if (hostname.includes("hasuon.or.kr")) {
-      window.location.href =
-        process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
-    }
-  }, []);
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    const formData = new FormData(e.target as HTMLFormElement);
-    const userId = formData.get("id") as string;
-    const password = formData.get("password") as string;
-
-    await LoginApi.login({ userId, password });
-    window.location.href = "/map";
-  };
-
-  return (
-    <div className="login fx">
-      <div className="left_box fx">
-        <div className="text">
-          <h1>
-            하수도정보시스템
-            <br />
-            <span>CMS 통합관리시스템</span>
-          </h1>
-          <p>하수도정보시스템 CMS 통합관리시스템에 오신 것을 환영합니다.</p>
-        </div>
-        <div className="img">
-          <Image src={images.logo} width={229} height={46} alt="logo" />
-        </div>
-      </div>
-      <form
-        id="loginForm"
-        name="loginForm"
-        method="post"
-        onSubmit={handleSubmit}
-      >
-        <div className="login_box fx">
-          <ul className="fx">
-            <li>
-              <h2>ID</h2>
-              <div className="input_st st1">
-                <i className="diveicon di-account-box" />
-                <input
-                  type="text"
-                  className="id"
-                  title="아이디를 입력하세요."
-                  id="id"
-                  name="id"
-                  maxLength={12}
-                />
-              </div>
-            </li>
-            <li>
-              <h2>PASSWORD</h2>
-              <div className="input_st st2">
-                <i className="diveicon di-key" />
-                <input
-                  type="password"
-                  className="input_style"
-                  maxLength={25}
-                  title="비밀번호를 입력하세요."
-                  id="password"
-                  name="password"
-                />
-              </div>
-            </li>
-          </ul>
-          <div className="bottom_box fx">
-            <div className="checks fx">
-              <input
-                type="checkbox"
-                name="checkId"
-                title="로그인ID 저장여부"
-                id="checkId"
-              />
-              <label htmlFor="checkId">아이디저장</label>
-            </div>
-            {/* <a href="javascript:fnUserSearch();" className=" pw_message fx"><i className="xi-external-link"></i>비밀번호 또는 아이디를 잃어버리셨나요?</a> */}
-          </div>
-          <button type="submit" className="login_btn fx">
-            <span>LOGIN</span>
-          </button>
-          <div className="footer">
-            <div className="copy fx">
-              <p>copyright © 2023 KECO. All rights reserved.</p>
-            </div>
-            <div className="fot_btn fx">
-              <a
-                href="https://keco.or.kr/web/lay1/S1T6C1348/contents.do"
-                target="_blank"
-              >
-                개인정보처리방침
-              </a>
-              <a
-                href="https://keco.or.kr/web/lay1/S1T6C1349/contents.do"
-                target="_blank"
-              >
-                저작권정책안내
-              </a>
-              <a
-                href="https://keco.or.kr/web/lay1/S1T6C1350/contents.do"
-                target="_blank"
-              >
-                이메일무단수집거부
-              </a>
-            </div>
-            <p className="addr fx">
-              <span>
-                주소 : (22689) 인천광역시 서구 환경로 42(경서동
-                종합환경연구단지)
-              </span>
-              <span>
-                전화 : (시스템) 032-590-4321, 3752, 4314 / (통 계) 032-590-3723,
-                3722
-              </span>
-              <span>팩스 :032-590-3729</span>
-            </p>
-          </div>
-        </div>
-      </form>
-    </div>
-  );
-}
-
-export { LoginPage };
-
diff --git a/apps/sn/src/shared/config/api.ts b/apps/sn/src/shared/config/api.ts
index 16d1b5452..eebb15c19 100644
--- a/apps/sn/src/shared/config/api.ts
+++ b/apps/sn/src/shared/config/api.ts
@@ -1,9 +1,6 @@
 import { PROXY_HOST } from "./env";
 
-// 브라우저에서는 동일 오리진으로 상대경로 호출 → CORS/localhost 고정 문제 방지
-// (Next middleware가 /server/* 요청을 백엔드로 rewrite)
-// 서버 환경(SSR 등)에서는 절대 URL이 필요할 수 있어 기존 PROXY_HOST 기반 유지
-export const BASE_URL = `${PROXY_HOST}/server`;
+export const BASE_URL = `${PROXY_HOST}`;
 
 export const ENDPOINT = {
   ATTACH_SERVICE: {
@@ -17,13 +14,21 @@ export const ENDPOINT = {
   },
   USER_SERVICE: {
     LOGIN: "/user-service/login",
+    LOGIN_2FA: "/user-service/api/v1/auth/login",
     USERS: "/user-service/api/v1/users",
     SILENT_REFRESH: "/user-service/api/v1/users/token/refresh",
     AUTHORIZATIONS: "/user-service/api/v1/authorizations",
     ROLE_AUTHORIZATIONS: "/user-service/api/v1/role-authorizations",
     ROLES: "/user-service/api/v1/roles",
+    LOGINLOG: "/user-service/api/v1/login-logs",
+    PRIVACYLOG: "/user-service//api/v1/prvc-inq-logs",
+    OTP_VERIFY: "/user-service/api/v1/auth/2fa/verify",
+    TWOFA_SETUP: "/user-service/api/v1/auth/2fa/setup",
+    TWOFA_ENABLE: "/user-service/api/v1/auth/2fa/enable",
+    USER_JOIN: "/user-service/api/v1/anonymouse/users/join",
   },
   CMS_SERVICE: {
+    DASHBOARD: "/cms-service/api/v1/dashboard",
     SITES: "/cms-service/api/v1/sites",
     IPS: "/cms-service/api/v1/site-ips",
     DOMAINS: "/cms-service/api/v1/site-dmns",
@@ -32,6 +37,8 @@ export const ENDPOINT = {
     MENUS: "/cms-service/api/v1/menus",
     MENU_ROLES: "/cms-service/api/v1/menu-roles",
     MENU_AUTHRTS: "/cms-service/api/v1/menu-authrts",
+    MENU_TEMPORARY_STORAGE: "/cms-service/api/v1/menu-tmpr-strg",
+    MENU_HISTORY: "/cms-service/api/v1/menu-hstry",
     CONTENTS: "/cms-service/api/v1/contents",
     CONTENTS_DETAILS: "/cms-service/api/v1/contents-details",
     ORGANIZATIONS: "/cms-service/api/v1/ognzs",
@@ -47,13 +54,32 @@ export const ENDPOINT = {
     SURVEY: "/cms-service/api/v1/srvy",
     SURVEY_QUESTION: "/cms-service/api/v1/srvy-qitem",
     SURVEY_ARTICLE: "/cms-service/api/v1/srvy-artcl",
+    ZIPS: "/cms-service/api/v1/zips",
+    GROUPS: "/cms-service/api/v1/groups",
+    GROUP_USERS: "/cms-service/api/v1/group-users",
+    MANAGER_IP: "/cms-service/api/v1/mgrip",
+    APILOG: "/cms-service/api/v1/api-logs",
+    SITE_AUTHORITY: "/cms-service/api/v1/site-authrt",
+    CONNECTION_LOG: "/cms-service/api/v1/cntnlog",
   },
   BOARD_SERVICE: {
     BBS: "/board-service/api/v1/bbs",
     BBS_TEMPLATES: "/board-service/api/v1/bbsTmplt",
     POSTS: "/board-service/api/v1/posts",
     POSTS_COMMENTS: "/board-service/api/v1/posts-cmnts",
+    POST_EVALUATION: "/board-service/api/v1/pstEvl",
   },
+  SEWERAGE_SERVICE: {
+    PPL_COUNTS: "/sewerage-service/api/v1/ms/pplCounts",
+    OLD_PPL_COUNTS: "/sewerage-service/api/v1/ms/oldPplCounts",
+  },    
+  IC_SERVICE: {
+    GROUPING_STATISTICS: "/ic-service/api/v1/nti/grouping-statistics",
+  },
+  DC_SERVICE: {
+    DATA_STATUS: "/dc-service/api/v1/dc/dataStatus",
+  },
+
 };
 
 export const JWT_EXPIRATION_TIME = 1800000;
diff --git a/apps/sn/src/shared/config/auth.ts b/apps/sn/src/shared/config/auth.ts
new file mode 100644
index 000000000..7c35ad9f0
--- /dev/null
+++ b/apps/sn/src/shared/config/auth.ts
@@ -0,0 +1,17 @@
+import type { AuthConfig } from "@common/auth";
+
+import {
+  ACCESS_TOKEN,
+  AUTH_USER_ID,
+  CLAIM_NAME,
+  COOKIE_DOMAIN,
+  REFRESH_TOKEN,
+} from "./env";
+
+export const authConfig: AuthConfig = {
+  authUserId: AUTH_USER_ID || "token-id",
+  claimName: CLAIM_NAME || "Authorization",
+  cookieDomain: COOKIE_DOMAIN,
+  accessToken: ACCESS_TOKEN || "access-token",
+  refreshToken: REFRESH_TOKEN || "refresh-token",
+};
diff --git a/apps/sn/src/shared/config/env.ts b/apps/sn/src/shared/config/env.ts
index ad982d727..2778a4b34 100644
--- a/apps/sn/src/shared/config/env.ts
+++ b/apps/sn/src/shared/config/env.ts
@@ -1,8 +1,17 @@
+export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "SN";
 export const PORT = process.env.NEXT_PUBLIC_PORT || "3000";
 export const PROXY_HOST = process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`;
-export const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL;
-export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "SN";
+export const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL||'http://dev.onasys.co.kr:8000';
+
+export const AUTH_LOGIN_REDIRECT_URL =
+    process.env.NEXT_PUBLIC_AUTH_LOGIN_REDIRECT_URL || "/auth/login";
 export const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
-export const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token";
-export const REFRESH_TOKEN = process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token";
+export const ACCESS_TOKEN =  process.env.NEXT_PUBLIC_ACCESS_TOKEN || "access-token";
+export const REFRESH_TOKEN =process.env.NEXT_PUBLIC_REFRESH_TOKEN || "refresh-token";
 export const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";
+export const SERVER_SEWERAGE_API_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL;
+export const COOKIE_DOMAIN = process.env.NEXT_PUBLIC_COOKIE_DOMAIN;
+
+
+
+
diff --git a/apps/sn/src/shared/config/index.ts b/apps/sn/src/shared/config/index.ts
index cd83447d5..04e4f2df5 100644
--- a/apps/sn/src/shared/config/index.ts
+++ b/apps/sn/src/shared/config/index.ts
@@ -1,2 +1,4 @@
 export * from "./api";
 export * from "./env";
+
+export const DEFAULT_LIST_SIZE = 10;
diff --git a/apps/sn/src/shared/lib/bbs-notice-menu.ts b/apps/sn/src/shared/lib/bbs-notice-menu.ts
new file mode 100644
index 000000000..a621ed669
--- /dev/null
+++ b/apps/sn/src/shared/lib/bbs-notice-menu.ts
@@ -0,0 +1,12 @@
+import type { MenuItem } from "@/src/entities/menu";
+
+export const BBS_NOTICE_MENU_MARKER = "bbsnotice";
+
+export function isBbsNoticeMenu(item: MenuItem): boolean {
+    const marker = BBS_NOTICE_MENU_MARKER;
+    return (
+        item.urlPath?.toLowerCase().includes(marker) ||
+        item.menuEngNm?.toLowerCase().includes(marker) ||
+        item.menuPath?.toLowerCase().includes(marker)
+    );
+}
diff --git a/apps/sn/src/shared/lib/cookie.ts b/apps/sn/src/shared/lib/cookie.ts
index 8f5d0011b..4bc0fe142 100644
--- a/apps/sn/src/shared/lib/cookie.ts
+++ b/apps/sn/src/shared/lib/cookie.ts
@@ -1,5 +1,7 @@
+
 import Cookies from "js-cookie";
 
+
 export function getCookie(name: string): string | undefined {
   if (typeof window === "undefined") {
     return undefined;
diff --git a/apps/sn/src/shared/lib/index.ts b/apps/sn/src/shared/lib/index.ts
index 061346946..1d0c4a3a8 100644
--- a/apps/sn/src/shared/lib/index.ts
+++ b/apps/sn/src/shared/lib/index.ts
@@ -2,6 +2,12 @@ export { useMutationWrapper } from "./use-mutation-wrapper";
 export { useAlertStore } from "./use-alert-store";
 export { useMenuStore } from "./use-menu-store";
 export { useUserStore } from "./use-user-store";
-export { useDataStore } from "./use-data-store";
 export { usePrompt } from "./use-prompt";
 export { getCookie, setCookie, removeCookie } from "./cookie";
+export {
+    buildStatisticsComponentImportPath,
+    menuMatchesStatisticsTabId,
+    parseStatisticsMenuUrlPath,
+    resolveStatisticsCategory,
+    resolveStatisticsTabId,
+} from "./statistics-menu-url";
diff --git a/apps/sn/src/shared/lib/statistics-menu-url.ts b/apps/sn/src/shared/lib/statistics-menu-url.ts
new file mode 100644
index 000000000..c20dded4c
--- /dev/null
+++ b/apps/sn/src/shared/lib/statistics-menu-url.ts
@@ -0,0 +1,84 @@
+import type { MenuItem } from "@/src/entities/menu";
+
+export type ParsedStatisticsMenuUrl = {
+    categoryFromPath: string | null;
+    componentName: string | null;
+    rawUrlPath: string;
+};
+
+/** 메뉴 `urlPath`에서 통계 화면 카테고리·컴포넌트명을 파싱합니다. */
+export function parseStatisticsMenuUrlPath(
+    urlPath: string,
+): ParsedStatisticsMenuUrl {
+    const trimmed = (urlPath ?? "").trim();
+    if (!trimmed) {
+        return { categoryFromPath: null, componentName: null, rawUrlPath: trimmed };
+    }
+
+    let pathPart = trimmed;
+    let queryString = "";
+    const queryIndex = trimmed.indexOf("?");
+    if (queryIndex >= 0) {
+        pathPart = trimmed.slice(0, queryIndex);
+        queryString = trimmed.slice(queryIndex + 1);
+    }
+
+    const tabParam = new URLSearchParams(queryString).get("tab")?.trim() || null;
+    const segments = pathPart.replace(/^\/+/, "").split("/").filter(Boolean);
+
+    let categoryFromPath: string | null = null;
+    if (segments[0] === "statistics" && segments.length >= 2) {
+        categoryFromPath = segments[1] ?? null;
+    }
+
+    let componentName = tabParam;
+    if (!componentName) {
+        if (!pathPart.includes("/") && !queryString) {
+            componentName = trimmed;
+        } else if (segments.length === 1 && segments[0] !== "statistics") {
+            componentName = segments[0] ?? null;
+        } else if (segments[0] === "statistics" && segments.length >= 3) {
+            componentName = segments[segments.length - 1] ?? null;
+        }
+    }
+
+    return { categoryFromPath, componentName, rawUrlPath: trimmed };
+}
+
+/** 동적 import용 카테고리 폴더명 (`input`, `review` 등) */
+export function resolveStatisticsCategory(
+    urlPath: string,
+    parentEngNm: string,
+): string {
+    const { categoryFromPath } = parseStatisticsMenuUrlPath(urlPath);
+    return categoryFromPath || parentEngNm || "";
+}
+
+/** 탭 ID·URL `?tab=` 값 - 컴포넌트 파일명(확장자 제외) */
+export function resolveStatisticsTabId(urlPath: string): string {
+    const { componentName, rawUrlPath } = parseStatisticsMenuUrlPath(urlPath);
+    return componentName || rawUrlPath;
+}
+
+/** `@/src/components/statistics/{category}/{Component}` 또는 루트 컴포넌트 경로 */
+export function buildStatisticsComponentImportPath(
+    urlPath: string,
+    parentEngNm: string,
+): string {
+    const { componentName } = parseStatisticsMenuUrlPath(urlPath);
+    const category = resolveStatisticsCategory(urlPath, parentEngNm);
+    const name = componentName || urlPath;
+    if (!category) {
+        return `@/src/components/statistics/${name}`;
+    }
+    return `@/src/components/statistics/${category}/${name}`;
+}
+
+export function menuMatchesStatisticsTabId(
+    menu: MenuItem,
+    tabId: string,
+): boolean {
+    if (!tabId) return false;
+    if (menu.urlPath === tabId) return true;
+    return resolveStatisticsTabId(menu.urlPath) === tabId;
+}
diff --git a/apps/sn/src/shared/ui/form.tsx b/apps/sn/src/shared/ui/form.tsx
new file mode 100644
index 000000000..bd579d263
--- /dev/null
+++ b/apps/sn/src/shared/ui/form.tsx
@@ -0,0 +1,175 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form";
+import { cn, Label } from "@common/components";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[1rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};
diff --git a/apps/sn/src/store/admin-store.ts b/apps/sn/src/store/admin-store.ts
new file mode 100644
index 000000000..098ff816e
--- /dev/null
+++ b/apps/sn/src/store/admin-store.ts
@@ -0,0 +1,29 @@
+import { create } from "zustand";
+import { UserApi } from "@/src/entities/user";
+import { getUserInfo } from "../../../../packages/common/components/src/api";
+
+interface AdminStore {
+    /** 현재 사용자가 관리자 목록에 있는지 */
+    isAdminInfo: boolean;
+    setAdminInfo: (value: boolean) => void;
+    /** API로 관리자 목록 조회 후 현재 사용자 일치 여부 설정 */
+    fetchAdminInfo: () => Promise<void>;
+}
+
+const useAdminStoreHook = create<AdminStore>((set) => ({
+    isAdminInfo: false,
+    setAdminInfo: (value) => set({ isAdminInfo: value }),
+    fetchAdminInfo: async () => {
+        try {
+            const userInfo = await getUserInfo();
+            const adminList = await UserApi.findPageAdminUser({ userName: userInfo.userName });
+            const matched = adminList.content?.filter((a) => a.userName === userInfo.userName) ?? [];
+            set({ isAdminInfo: matched.length > 0 });
+        } catch {
+            set({ isAdminInfo: false });
+        }
+    },
+}));
+
+export const useAdminStore = useAdminStoreHook;
+export const getAdminStoreState = () => useAdminStoreHook.getState();
diff --git a/apps/sn/src/store/tab-store.ts b/apps/sn/src/store/tab-store.ts
new file mode 100644
index 000000000..7e942879a
--- /dev/null
+++ b/apps/sn/src/store/tab-store.ts
@@ -0,0 +1,327 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+import type { MenuItem } from "@/entities/menu";
+import { MenuAuthorityApi } from "@/entities/menu-authority";
+import type { PageMenuAuthority } from "@/entities/menu-authority/model/menu-authority-interface";
+import { isBbsNoticeMenu } from "@/shared/lib/bbs-notice-menu";
+import { resolveStatisticsTabId } from "@/shared/lib/statistics-menu-url";
+
+export interface Tab {
+    id: string; // 고유 ID (urlPath)
+    label: string; // 탭에 표시될 이름
+    path: string; // 메뉴 경로
+    urlPath: string; // url 경로
+    parentEngNm: string; // 부모 menuEngNm
+    menuItem: MenuItem; // 메뉴 정보
+    /** undefined: 미조회, null: 조회했으나 없음/실패 */
+    pageMenuAuthority?: PageMenuAuthority | null;
+}
+
+async function fetchTabPageMenuAuthority(
+    menuCd: number,
+    apply: (authority: PageMenuAuthority | null) => void,
+): Promise<void> {
+    try {
+        const response = await MenuAuthorityApi.getPageMenuAuthority(menuCd);
+        apply(response?.[0] ?? null);
+    } catch {
+        apply(null);
+    }
+}
+
+function scheduleTabPageMenuAuthorityFetch(
+    get: () => TabStore,
+    set: (
+        partial:
+            | Partial<TabStore>
+            | ((state: TabStore) => Partial<TabStore>),
+    ) => void,
+    tabId: string,
+    menuCd: number,
+): void {
+    void fetchTabPageMenuAuthority(menuCd, (authority) => {
+        const { tabs } = get();
+        if (!tabs.some((tab) => tab.id === tabId)) return;
+        set((state) => ({
+            tabs: state.tabs.map((tab) =>
+                tab.id === tabId ? { ...tab, pageMenuAuthority: authority } : tab,
+            ),
+        }));
+    });
+}
+
+type TabStoreSetState = (
+    partial:
+        | Partial<TabStore>
+        | ((state: TabStore) => Partial<TabStore>),
+) => void;
+
+const tabStoreSetState: TabStoreSetState = (partial) => {
+    useTabStoreHook.setState(partial);
+};
+
+function ensureTabPageMenuAuthority(
+    get: () => TabStore,
+    set: TabStoreSetState,
+    tab: Tab,
+): void {
+    if (tab.pageMenuAuthority !== undefined) return;
+    scheduleTabPageMenuAuthorityFetch(get, set, tab.id, tab.menuItem.menuCd);
+}
+
+/** persist 복원·새로고침 후 활성 탭 메뉴 권한이 없으면 조회 */
+export function hydrateActiveTabPageMenuAuthority(): void {
+    const { tabs, activeTabId } = getTabStoreState();
+    if (!activeTabId) return;
+    const tab = tabs.find((t) => t.id === activeTabId);
+    if (!tab) return;
+    ensureTabPageMenuAuthority(getTabStoreState, tabStoreSetState, tab);
+}
+
+interface TabStore {
+    tabs: Tab[];
+    activeTabId: string | null;
+    menuList: MenuItem[] | null;
+    addTab: (menuItem: MenuItem) => boolean;
+    removeTab: (tabId: string) => void;
+    setActiveTab: (tabId: string) => void;
+    setMenuList: (menuList: MenuItem[] | null) => void;
+    closeAllTabs: () => void;
+    closeOtherTabs: (tabId: string) => void;
+    closeTabsToLeft: (tabId: string) => void;
+    closeTabsToRight: (tabId: string) => void;
+}
+
+export const TAB_STORE_PERSIST_KEY = "st-tab-store";
+const TAB_STORE_VERSION = 1;
+const MAX_TABS = 10;
+
+function tabForPersist(tab: Tab): Tab {
+    return {
+        ...tab,
+        menuItem: { ...tab.menuItem, children: null },
+        pageMenuAuthority: undefined,
+    };
+}
+
+function normalizePersistedTab(tab: Tab): Tab {
+    const tabId = resolveStatisticsTabId(tab.urlPath || tab.id);
+    return tabId === tab.id ? tab : { ...tab, id: tabId };
+}
+
+function sanitizePersistedTabsAndActive(
+    tabs: Tab[],
+    activeTabId: string | null,
+): { tabs: Tab[]; activeTabId: string | null } {
+    let nextTabs = Array.isArray(tabs)
+        ? tabs.filter((tab) => !isBbsNoticeMenu(tab.menuItem)).map(normalizePersistedTab)
+        : [];
+    if (nextTabs.length > MAX_TABS) nextTabs = nextTabs.slice(0, MAX_TABS);
+
+    if (nextTabs.length === 0) {
+        return { tabs: [], activeTabId: null };
+    }
+
+    let nextActive = activeTabId;
+    if (nextActive && !nextTabs.some((t) => t.id === nextActive)) {
+        nextActive = nextTabs[0]?.id ?? null;
+    }
+    if (nextActive == null && nextTabs.length > 0) {
+        nextActive = nextTabs[0]?.id ?? null;
+    }
+
+    return { tabs: nextTabs, activeTabId: nextActive };
+}
+
+const useTabStoreHook = create<TabStore>()(
+    persist(
+        (set, get) => ({
+            tabs: [],
+            activeTabId: null,
+            menuList: null,
+            addTab: (menuItem: MenuItem) => {
+                if (isBbsNoticeMenu(menuItem)) {
+                    return false;
+                }
+
+                const { tabs, menuList } = get();
+                const tabId = resolveStatisticsTabId(menuItem.urlPath || "");
+
+                const existingTab = tabs.find((tab) => tab.id === tabId);
+
+                if (existingTab) {
+                    set({ activeTabId: tabId });
+                    ensureTabPageMenuAuthority(get, set, existingTab);
+                    return true;
+                }
+
+                if (tabs.length < MAX_TABS) {
+                    const newTab: Tab = {
+                        id: tabId,
+                        label: menuItem.menuKornNm,
+                        path: menuItem.menuPath,
+                        urlPath: menuItem.urlPath,
+                        parentEngNm:
+                            menuList?.find(
+                                (m) => m.menuCd === menuItem.parentId,
+                            )?.menuEngNm || "",
+                        menuItem,
+                        pageMenuAuthority: undefined,
+                    };
+
+                    set({
+                        tabs: [...tabs, newTab],
+                        activeTabId: tabId,
+                    });
+
+                    scheduleTabPageMenuAuthorityFetch(
+                        get,
+                        set,
+                        tabId,
+                        menuItem.menuCd,
+                    );
+
+                    return true;
+                }
+                return false;
+            },
+            removeTab: (tabId: string): void => {
+                const { tabs, activeTabId } = get();
+                const newTabs = tabs.filter((tab) => tab.id !== tabId);
+
+                let newActiveTabId = activeTabId;
+                if (activeTabId === tabId) {
+                    const closedTabIndex = tabs.findIndex(
+                        (tab) => tab.id === tabId,
+                    );
+                    if (newTabs.length > 0) {
+                        if (closedTabIndex > 0) {
+                            const prevTab = tabs[closedTabIndex - 1];
+                            newActiveTabId = prevTab ? prevTab.id : null;
+                        } else {
+                            const firstTab = newTabs[0];
+                            newActiveTabId = firstTab ? firstTab.id : null;
+                        }
+                    } else {
+                        newActiveTabId = null;
+                    }
+                }
+
+                set({
+                    tabs: newTabs,
+                    activeTabId: newActiveTabId,
+                });
+                if (newActiveTabId) {
+                    const nextActive = get().tabs.find((t) => t.id === newActiveTabId);
+                    if (nextActive) ensureTabPageMenuAuthority(get, set, nextActive);
+                }
+            },
+            setActiveTab: (tabId: string) => {
+                set({ activeTabId: tabId });
+                const tab = get().tabs.find((t) => t.id === tabId);
+                if (tab) ensureTabPageMenuAuthority(get, set, tab);
+            },
+            setMenuList: (menuList: MenuItem[] | null) => {
+                set({ menuList });
+            },
+            closeAllTabs: () => {
+                set({
+                    tabs: [],
+                    activeTabId: null,
+                });
+            },
+            closeOtherTabs: (tabId: string) => {
+                const { tabs } = get();
+                const tabToKeep = tabs.find((tab) => tab.id === tabId);
+
+                if (tabToKeep) {
+                    set({
+                        tabs: [tabToKeep],
+                        activeTabId: tabId,
+                    });
+                }
+            },
+            closeTabsToLeft: (tabId: string) => {
+                const { tabs, activeTabId } = get();
+                const index = tabs.findIndex((tab) => tab.id === tabId);
+                if (index <= 0) return;
+
+                const newTabs = tabs.slice(index);
+                let newActiveTabId = activeTabId;
+                if (activeTabId && !newTabs.some((tab) => tab.id === activeTabId)) {
+                    newActiveTabId = tabId;
+                }
+
+                set({
+                    tabs: newTabs,
+                    activeTabId: newActiveTabId,
+                });
+                if (newActiveTabId) {
+                    const nextActive = get().tabs.find((t) => t.id === newActiveTabId);
+                    if (nextActive) ensureTabPageMenuAuthority(get, set, nextActive);
+                }
+            },
+            closeTabsToRight: (tabId: string) => {
+                const { tabs, activeTabId } = get();
+                const index = tabs.findIndex((tab) => tab.id === tabId);
+                if (index === -1 || index >= tabs.length - 1) return;
+
+                const newTabs = tabs.slice(0, index + 1);
+                let newActiveTabId = activeTabId;
+                if (activeTabId && !newTabs.some((tab) => tab.id === activeTabId)) {
+                    newActiveTabId = tabId;
+                }
+
+                set({
+                    tabs: newTabs,
+                    activeTabId: newActiveTabId,
+                });
+                if (newActiveTabId) {
+                    const nextActive = get().tabs.find((t) => t.id === newActiveTabId);
+                    if (nextActive) ensureTabPageMenuAuthority(get, set, nextActive);
+                }
+            },
+        }),
+        {
+            name: TAB_STORE_PERSIST_KEY,
+            version: TAB_STORE_VERSION,
+            storage: createJSONStorage(() => localStorage),
+            partialize: (state) => ({
+                tabs: state.tabs.map(tabForPersist),
+                activeTabId: state.activeTabId,
+            }),
+            merge: (persistedState, currentState) => {
+                const p = persistedState as Partial<
+                    Pick<TabStore, "tabs" | "activeTabId">
+                > | null;
+                const rawTabs = p?.tabs;
+                const rawActive = p?.activeTabId;
+                const { tabs, activeTabId } = sanitizePersistedTabsAndActive(
+                    (rawTabs as Tab[]) ?? [],
+                    typeof rawActive === "string" || rawActive === null
+                        ? rawActive
+                        : null,
+                );
+                return {
+                    ...currentState,
+                    tabs,
+                    activeTabId,
+                };
+            },
+            onRehydrateStorage: () => (state, error) => {
+                if (error || !state) return;
+                queueMicrotask(() => hydrateActiveTabPageMenuAuthority());
+            },
+        },
+    ),
+);
+
+export const useTabStore = useTabStoreHook;
+export const getTabStoreState = () => useTabStoreHook.getState();
+
+// 로그아웃 또는 사용자 전환 시 로컬 탭 스냅샷 제거 및 메모리 상태 초기화
+export function clearTabStorePersist(): void {
+    useTabStoreHook.getState().closeAllTabs();
+    useTabStoreHook.persist.clearStorage();
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4c7b558c7..ea942780c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -976,6 +976,9 @@ importers:
       '@common/assets':
         specifier: workspace:*
         version: link:../../packages/common/assets
+      '@common/auth':
+        specifier: workspace:*
+        version: link:../../packages/common/auth
       '@common/business_components':
         specifier: workspace:*
         version: link:../../packages/common/business_components
@@ -985,6 +988,9 @@ importers:
       '@common/config':
         specifier: workspace:*
         version: link:../../packages/common/config
+      '@common/network':
+        specifier: workspace:*
+        version: link:../../packages/common/network
       '@fontsource-variable/noto-sans-kr':
         specifier: ^5.2.5
         version: 5.2.10

From f584e21480f6e8d39be92052c2e8fa072cde5c03 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 16 Jul 2026 15:17:43 +0900
Subject: [PATCH 25/32] =?UTF-8?q?[as]=20feat:=20=EC=84=A4=EC=B9=98?=
 =?UTF-8?q?=EC=9D=B8=EA=B0=80=20=EB=B3=B4=EC=99=84=EC=9A=94=EC=B2=AD=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=99=84=EB=A3=8C=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../instl-sncn/api/instl-sncn-service.ts      |   9 +
 .../as/src/entities/instl-sncn/api/queries.ts |  13 +
 apps/as/src/entities/instl-sncn/index.ts      |   2 +
 .../instl-sncn/model/instl-sncn-interface.ts  |  10 +-
 .../pages/instl-sncn/lib/form-data-mapper.ts  |  20 +-
 .../lib/instl-sncn-regist-schema.ts           |  18 +
 .../instl-sncn/lib/save-payload-utils.ts      |   2 +-
 .../ui/components/floating-action-buttons.tsx |  41 ++-
 .../pages/instl-sncn/ui/instl-form-page.tsx   |  66 +++-
 .../pages/instl-sncn/ui/instl-view-page.tsx   |  12 +
 .../ui/sections/supplement-demand-section.tsx | 181 ++++++++++
 .../sections/tech-review-opinion-section.tsx  |  16 +-
 apps/as/src/widgets/pbadms-sprt/index.ts      |   1 +
 .../ui/splmnt-dmnd-form-section.tsx           | 324 ++++++++++++++++++
 14 files changed, 683 insertions(+), 32 deletions(-)
 create mode 100644 apps/as/src/pages/instl-sncn/ui/sections/supplement-demand-section.tsx
 create mode 100644 apps/as/src/widgets/pbadms-sprt/ui/splmnt-dmnd-form-section.tsx

diff --git a/apps/as/src/entities/instl-sncn/api/instl-sncn-service.ts b/apps/as/src/entities/instl-sncn/api/instl-sncn-service.ts
index 5739b82bb..2bef72628 100644
--- a/apps/as/src/entities/instl-sncn/api/instl-sncn-service.ts
+++ b/apps/as/src/entities/instl-sncn/api/instl-sncn-service.ts
@@ -65,6 +65,14 @@ async function techReview(id: string, payload: InstlSncnApplySaveRequestDto): Pr
   await client.post(`${BASE}/${id}/tech-review`, payload);
 }
 
+async function submitSupplement(
+  id: string,
+  payload: InstlSncnApplySaveRequestDto,
+): Promise<string> {
+  const response = await client.post<string>(`${BASE}/${id}/submitsupplement`, payload);
+  return response.data;
+}
+
 async function submitReqSupplement(
   id: string,
   payload: InstlSncnApplySaveRequestDto,
@@ -88,6 +96,7 @@ export const instlSncnService = {
   saveApply,
   update,
   techReview,
+  submitSupplement,
   submitReqSupplement,
   remove,
   changePrgrsSttsComCd,
diff --git a/apps/as/src/entities/instl-sncn/api/queries.ts b/apps/as/src/entities/instl-sncn/api/queries.ts
index 6044db955..f9d94dbff 100644
--- a/apps/as/src/entities/instl-sncn/api/queries.ts
+++ b/apps/as/src/entities/instl-sncn/api/queries.ts
@@ -99,6 +99,19 @@ export function useInstlSncnTechReview() {
   });
 }
 
+export function useInstlSncnSubmitSupplement() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, payload }: { id: string; payload: InstlSncnApplySaveRequestDto }) =>
+      instlSncnService.submitSupplement(id, payload),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: instlSncnKeys.all });
+      queryClient.invalidateQueries({ queryKey: instlSncnKeys.detail(variables.id) });
+    },
+  });
+}
+
 export function useInstlSncnSubmitReqSupplement() {
   const queryClient = useQueryClient();
 
diff --git a/apps/as/src/entities/instl-sncn/index.ts b/apps/as/src/entities/instl-sncn/index.ts
index c528eca07..946e756f1 100644
--- a/apps/as/src/entities/instl-sncn/index.ts
+++ b/apps/as/src/entities/instl-sncn/index.ts
@@ -6,6 +6,7 @@ export {
   useInstlSncnSidoCombo,
   useInstlSncnSigunguCombo,
   useInstlSncnSubmitReqSupplement,
+  useInstlSncnSubmitSupplement,
   useInstlSncnTechReview,
 } from "./api/queries";
 export {
@@ -29,6 +30,7 @@ export {
   type InstlSncnMngSearchParams,
   type InstlSncnRvwOpnnResponseDto,
   type InstlSncnRvwOpnnSaveRequestDto,
+  type InstlSncnSplmntDmndResponseDto,
   type InstlSncnSplmntDmndSaveDto,
   type ReviewStepCode,
 } from "./model/instl-sncn-interface";
diff --git a/apps/as/src/entities/instl-sncn/model/instl-sncn-interface.ts b/apps/as/src/entities/instl-sncn/model/instl-sncn-interface.ts
index 0f6fc36ee..6ead54c13 100644
--- a/apps/as/src/entities/instl-sncn/model/instl-sncn-interface.ts
+++ b/apps/as/src/entities/instl-sncn/model/instl-sncn-interface.ts
@@ -15,6 +15,7 @@ import type {
   PbadmsMngDetResponseBase,
   RvwOpnnResponseExtension,
   RvwOpnnSaveBase,
+  SplmntDmndResponseExtension,
   SplmntDmndSaveBase,
 } from "@/shared/model";
 
@@ -185,6 +186,12 @@ export interface InstlSncnRvwOpnnSaveRequestDto extends RvwOpnnSaveBase {
 /** 설치인가 보완요구 저장 DTO(배열 원소) */
 export type InstlSncnSplmntDmndSaveDto = SplmntDmndSaveBase;
 
+/** 설치인가 보완요구 응답 DTO */
+export type InstlSncnSplmntDmndResponseDto = InstlSncnSplmntDmndSaveDto &
+  SplmntDmndResponseExtension & {
+    instlSncnDocNo?: string;
+  };
+
 /** 설치인가 신청 - 통합 저장 요청 DTO */
 export interface InstlSncnApplySaveRequestDto extends PbadmsApplySaveHeader {
   /** 설치인가관리 정보 */
@@ -225,7 +232,7 @@ export type InstlSncnRvwOpnnResponseDto = InstlSncnRvwOpnnSaveRequestDto &
 export interface InstlSncnMngDetResponse extends PbadmsMngDetResponseBase<
   InstlSncnMngResponseDto,
   InstlSncnRvwOpnnResponseDto,
-  InstlSncnSplmntDmndSaveDto
+  InstlSncnSplmntDmndResponseDto
 > {
   detDto: InstlSncnMngResponseDto;
   bizSclList: BizSclTreeDto[];
@@ -242,6 +249,7 @@ export interface InstlSncnMngService {
   saveApply: (payload: InstlSncnApplySaveRequestDto) => Promise<string>;
   update: (id: string, payload: InstlSncnMngUpdateRequestDto) => Promise<void>;
   techReview: (id: string, payload: InstlSncnApplySaveRequestDto) => Promise<void>;
+  submitSupplement: (id: string, payload: InstlSncnApplySaveRequestDto) => Promise<string>;
   submitReqSupplement: (id: string, payload: InstlSncnApplySaveRequestDto) => Promise<string>;
   remove: (id: string) => Promise<void>;
   changePrgrsSttsComCd: (payload: DocPrgrsUpdateRequestDto) => Promise<void>;
diff --git a/apps/as/src/pages/instl-sncn/lib/form-data-mapper.ts b/apps/as/src/pages/instl-sncn/lib/form-data-mapper.ts
index 0b02454f8..a0a36a298 100644
--- a/apps/as/src/pages/instl-sncn/lib/form-data-mapper.ts
+++ b/apps/as/src/pages/instl-sncn/lib/form-data-mapper.ts
@@ -24,7 +24,7 @@ function mapEsntlAtchFileList(esntlFileList: InstlSncnMngDetResponse["esntlFileL
 }
 
 export function mapDetailToFormData(data: InstlSncnMngDetResponse): InstlSncnRegistFormData {
-  const { detDto, bizSclList, bizCstList, cklstResultList, esntlFileList } = data;
+  const { detDto, bizSclList, bizCstList, cklstResultList, esntlFileList, splmntDmndList } = data;
 
   return {
     instlSncnMng: {
@@ -85,6 +85,23 @@ export function mapDetailToFormData(data: InstlSncnMngDetResponse): InstlSncnReg
         picRvwCn: item.picRvwCn,
       })) ?? [],
     esntlAtchFileList: mapEsntlAtchFileList(esntlFileList),
+    splmntDmndList:
+      splmntDmndList?.map((item) => ({
+        splmntDmndSn: item.splmntDmndSn,
+        splmntArtclComCd: item.splmntArtclComCd,
+        splmntArtclCdNm: item.splmntArtclCdNm,
+        splmntDmndCn: item.splmntDmndCn,
+        splmntDmndDt: item.splmntDmndDt,
+        splmntDmndAtchFileGroupId: item.splmntDmndAtchFileGroupId ?? "",
+        splmntDmndAtchFileNm: item.splmntDmndAtchFileInfo?.orgnlFileNm ?? "",
+        splmntCn: item.splmntCn ?? "",
+        splmntPicNm: item.splmntPicNm ?? "",
+        splmntCmptnDt: item.splmntCmptnDt ?? "",
+        splmntAtchFileGroupId: item.splmntAtchFileGroupId ?? "",
+        splmntAtchFileNm: item.splmntAtchFileInfo?.orgnlFileNm ?? "",
+        splmntAtchFileAtflId: item.splmntAtchFileInfo?.atflId ?? "",
+        cmptnYn: item.cmptnYn,
+      })) ?? [],
     privacyConsent: "Y",
   };
 }
@@ -116,6 +133,7 @@ export function getCreateDefaultValues(
     bizCstList: [],
     cklstResultList: [],
     esntlAtchFileList: [],
+    splmntDmndList: [],
     privacyConsent: "N",
   };
 }
diff --git a/apps/as/src/pages/instl-sncn/lib/instl-sncn-regist-schema.ts b/apps/as/src/pages/instl-sncn/lib/instl-sncn-regist-schema.ts
index 64865d49c..5cc52d296 100644
--- a/apps/as/src/pages/instl-sncn/lib/instl-sncn-regist-schema.ts
+++ b/apps/as/src/pages/instl-sncn/lib/instl-sncn-regist-schema.ts
@@ -75,6 +75,24 @@ export const instlSncnRegistSchema = z.object({
       atchFileGroupId: z.string(),
     }),
   ),
+  splmntDmndList: z.array(
+    z.object({
+      splmntDmndSn: z.number().optional(),
+      splmntArtclComCd: z.string().optional(),
+      splmntArtclCdNm: z.string().nullish(),
+      splmntDmndCn: z.string().optional(),
+      splmntDmndDt: z.string().optional(),
+      splmntDmndAtchFileGroupId: z.string().optional(),
+      splmntDmndAtchFileNm: z.string().optional(),
+      splmntCn: z.string().optional(),
+      splmntPicNm: z.string().optional(),
+      splmntCmptnDt: z.string().optional(),
+      splmntAtchFileGroupId: z.string().optional(),
+      splmntAtchFileNm: z.string().optional(),
+      splmntAtchFileAtflId: z.string().optional(),
+      cmptnYn: z.string().optional(),
+    }),
+  ),
   privacyConsent: z.enum(["Y", "N"], {
     required_error: "개인정보 수집/이용 동의는 필수입니다",
   }),
diff --git a/apps/as/src/pages/instl-sncn/lib/save-payload-utils.ts b/apps/as/src/pages/instl-sncn/lib/save-payload-utils.ts
index 209c02a3c..bb9bc18ab 100644
--- a/apps/as/src/pages/instl-sncn/lib/save-payload-utils.ts
+++ b/apps/as/src/pages/instl-sncn/lib/save-payload-utils.ts
@@ -115,7 +115,7 @@ export function buildSupplementReqPayload(
   };
 }
 
-function toSplmntDmndSaveItem(item: InstlSncnSplmntDmndSaveDto): InstlSncnSplmntDmndSaveDto {
+export function toSplmntDmndSaveItem(item: InstlSncnSplmntDmndSaveDto): InstlSncnSplmntDmndSaveDto {
   return {
     splmntDmndSn: item.splmntDmndSn,
     splmntArtclComCd: item.splmntArtclComCd,
diff --git a/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx b/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx
index a65ddc291..0f36c1ee6 100644
--- a/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx
@@ -41,8 +41,10 @@ import {
   buildSavePayload,
   buildSupplementReqPayload,
   buildTechReviewReplyPayload,
+  toSplmntDmndSaveItem,
 } from "../../lib/save-payload-utils";
 import { type ChecklistFormState } from "../../model/view-types";
+import type { SupplementDemandSectionHandle } from "../sections/supplement-demand-section";
 import type { TechReviewOpinionSectionHandle } from "../sections/tech-review-opinion-section";
 
 interface FloatingActionButtonsProps {
@@ -53,6 +55,7 @@ interface FloatingActionButtonsProps {
   dtlInstCd: string | undefined;
   checklistFormState: ChecklistFormState;
   techReviewOpinionRef?: React.RefObject<TechReviewOpinionSectionHandle | null>;
+  supplementDemandRef?: React.RefObject<SupplementDemandSectionHandle | null>;
   opnrNm?: string;
 }
 
@@ -66,6 +69,7 @@ function FloatingActionButtons({
   dtlInstCd,
   checklistFormState,
   techReviewOpinionRef,
+  supplementDemandRef,
   opnrNm,
 }: FloatingActionButtonsProps) {
   const router = useRouter();
@@ -383,15 +387,20 @@ function FloatingActionButtons({
       return;
     }
 
-    const payload = buildTechReviewReplyPayload(
-      data,
-      checklistFormState,
-      "KECO",
-      "TE",
-      "SV",
-      getReviewOpinionFormData(),
-      opnrNm,
-    );
+    const payload = {
+      ...buildTechReviewReplyPayload(
+        data,
+        checklistFormState,
+        "KECO",
+        "TE",
+        "SV",
+        getReviewOpinionFormData(),
+        opnrNm,
+      ),
+      splmntDmndList:
+        supplementDemandRef?.current?.getSplmntDmndList() ??
+        (data.splmntDmndList ?? []).map(toSplmntDmndSaveItem),
+    };
 
     await executeAction({
       action: INSTL_SNCN_VIEW_BUTTON_ACTION.rvwCmptn,
@@ -566,9 +575,17 @@ async function handleDel(context: ActionHandlerContext): Promise<void> {
   }
 }
 
-async function handleSplmntCmptn(context: ActionHandlerContext): Promise<void> {
-  // TODO: 보완완료 API 호출
-  context.onSuccess?.();
+async function handleSplmntCmptn(
+  context: ActionHandlerContext<InstlSncnApplySaveRequestDto>,
+): Promise<void> {
+  try {
+    const docNo = context.data.detDto?.instlSncnDocNo;
+    if (!docNo) throw new Error("문서번호가 없습니다.");
+    await instlSncnService.submitSupplement(docNo, context.request);
+    context.onSuccess?.();
+  } catch (error) {
+    context.onError?.(error as Error);
+  }
 }
 
 async function handleChangePrgrsSttsComCd(
diff --git a/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx b/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx
index 1e5230384..2b0e1fe1b 100644
--- a/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx
@@ -10,6 +10,7 @@ import { useQueryClient } from "@tanstack/react-query";
 
 import { useAlertStore, useUserStore } from "@/shared/lib";
 import {
+  type InstlSncnApplySaveRequestDto,
   instlSncnKeys,
   type InstlSncnMngDetResponse,
   instlSncnService,
@@ -22,6 +23,7 @@ import {
   ContactInfoFormSection,
   isFormChecklistComplete,
   PrivacyConsentSection,
+  SplmntDmndFormSection,
 } from "@/widgets/pbadms-sprt";
 import { Button } from "@common/components";
 
@@ -59,13 +61,13 @@ function InstlFormPage({ id, mode, initialData, taskSeComCd }: InstlFormPageProp
         : getCreateDefaultValues(userInfo, taskSeComCd),
   });
 
-  async function submitForm(
+  function buildFormPayload(
     data: InstlSncnRegistFormData,
-    prgrsSttsComCd: "SV" | "ST",
-  ): Promise<string | undefined> {
+    prgrsSttsComCd: "SV" | "ST" | "TE",
+  ): InstlSncnApplySaveRequestDto {
     const { taskSeComCd: formTaskSeComCd, ...instlSncnMngRest } = data.instlSncnMng;
 
-    const payload = {
+    return {
       instlSncnMng: {
         ...instlSncnMngRest,
         instlSncnDocNo: isEditMode ? initialData?.detDto.instlSncnDocNo : undefined,
@@ -79,9 +81,50 @@ function InstlFormPage({ id, mode, initialData, taskSeComCd }: InstlFormPageProp
         selected: item.selected,
       })),
       esntlAtchFileList: data.esntlAtchFileList,
+      splmntDmndList: data.splmntDmndList.map(
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        ({ splmntAtchFileNm, splmntAtchFileAtflId, splmntDmndAtchFileNm, ...item }) => item,
+      ),
     };
+  }
 
-    return instlSncnService.saveApply(payload);
+  async function submitForm(
+    data: InstlSncnRegistFormData,
+    prgrsSttsComCd: "SV" | "ST",
+  ): Promise<string | undefined> {
+    return instlSncnService.saveApply(buildFormPayload(data, prgrsSttsComCd));
+  }
+
+  async function submitSupplementForm(data: InstlSncnRegistFormData): Promise<string | undefined> {
+    const docNo = initialData?.detDto.instlSncnDocNo;
+    if (!docNo) return undefined;
+    return instlSncnService.submitSupplement(docNo, buildFormPayload(data, "TE"));
+  }
+
+  async function onSplmntCmptn(data: InstlSncnRegistFormData) {
+    if (isSubmitting) return;
+
+    const docNo = initialData?.detDto.instlSncnDocNo;
+    if (!docNo) {
+      alert("문서번호가 없습니다.");
+      return;
+    }
+
+    try {
+      setIsSubmitting(true);
+      const result = await submitSupplementForm(data);
+      if (!result) return;
+
+      alert("보완완료 처리되었습니다.");
+      router.push(`/instl-sncn/${docNo}`);
+      queryClient.invalidateQueries({ queryKey: instlSncnKeys.list() });
+      queryClient.invalidateQueries({ queryKey: instlSncnKeys.detail(docNo) });
+    } catch (error) {
+      console.error("보완완료 실패:", error);
+      alert("보완완료 처리 중 오류가 발생했습니다.");
+    } finally {
+      setIsSubmitting(false);
+    }
   }
 
   async function onSave(data: InstlSncnRegistFormData) {
@@ -132,10 +175,6 @@ function InstlFormPage({ id, mode, initialData, taskSeComCd }: InstlFormPageProp
     }
   }
 
-  function handleApplyClick() {
-    form.handleSubmit(onApply)();
-  }
-
   async function handleDelClick() {
     if (isSubmitting) return;
 
@@ -176,6 +215,7 @@ function InstlFormPage({ id, mode, initialData, taskSeComCd }: InstlFormPageProp
           initialEsntlFiles={isEditMode ? initialData?.esntlFileList : undefined}
           initialEtcFiles={isEditMode ? initialData?.etcFileList : undefined}
         />
+        <SplmntDmndFormSection readOnly={!isSplmntPrgrsStts} />
 
         <div className="sticky bottom-0 z-40 !-mb-2 border-t bg-white pb-8 pt-6 shadow-[0_-4px_12px_rgba(0,0,0,0.06)]">
           <div className="mx-4 flex flex-wrap justify-center gap-3 sm:gap-4">
@@ -197,7 +237,7 @@ function InstlFormPage({ id, mode, initialData, taskSeComCd }: InstlFormPageProp
                     <Button
                       color="green"
                       type="button"
-                      onClick={handleApplyClick}
+                      onClick={form.handleSubmit(onApply)}
                       disabled={isSubmitting}
                     >
                       신청완료
@@ -214,7 +254,11 @@ function InstlFormPage({ id, mode, initialData, taskSeComCd }: InstlFormPageProp
                 )}
               </>
             ) : (
-              <Button type="submit" disabled={isSubmitting}>
+              <Button
+                type="button"
+                onClick={form.handleSubmit(onSplmntCmptn)}
+                disabled={isSubmitting}
+              >
                 보완완료
               </Button>
             )}
diff --git a/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx b/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx
index a838c4a0c..bee427e3f 100644
--- a/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx
@@ -18,6 +18,10 @@ 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 {
+  SupplementDemandSection,
+  type SupplementDemandSectionHandle,
+} from "./sections/supplement-demand-section";
 import {
   TechReviewOpinionSection,
   type TechReviewOpinionSectionHandle,
@@ -30,6 +34,7 @@ interface InstlViewPageProps {
 function InstlViewPage({ id }: InstlViewPageProps) {
   const userInfo = useUserStore((state) => state.userInfo);
   const techReviewOpinionRef = useRef<TechReviewOpinionSectionHandle>(null);
+  const supplementDemandRef = useRef<SupplementDemandSectionHandle>(null);
   const { data, isLoading, isError } = useInstlSncnDetail(id);
   const { formState: checklistFormState, setFormState: setChecklistFormState } =
     useChecklistFormState(data?.cklstResultList ?? EMPTY_CKLST_RESULT_LIST);
@@ -65,6 +70,7 @@ function InstlViewPage({ id }: InstlViewPageProps) {
     esntlFileList,
     etcFileList,
     rvwList = [],
+    splmntDmndList = [],
   } = data;
 
   const editableReviewStep = getEditableReviewStep(
@@ -94,6 +100,11 @@ function InstlViewPage({ id }: InstlViewPageProps) {
         rvwList={rvwList}
         editableReviewStep={editableReviewStep}
       />
+      <SupplementDemandSection
+        ref={supplementDemandRef}
+        splmntDmndList={splmntDmndList}
+        canEditCmptnYn={userInfo?.dtlInstCd === "ROLE_USER01"}
+      />
       <FloatingActionButtons
         data={data}
         docSeComCd="INSTL"
@@ -102,6 +113,7 @@ function InstlViewPage({ id }: InstlViewPageProps) {
         dtlInstCd={userInfo?.dtlInstCd}
         checklistFormState={checklistFormState}
         techReviewOpinionRef={techReviewOpinionRef}
+        supplementDemandRef={supplementDemandRef}
         opnrNm={userInfo?.userName}
       />
     </div>
diff --git a/apps/as/src/pages/instl-sncn/ui/sections/supplement-demand-section.tsx b/apps/as/src/pages/instl-sncn/ui/sections/supplement-demand-section.tsx
new file mode 100644
index 000000000..319c79815
--- /dev/null
+++ b/apps/as/src/pages/instl-sncn/ui/sections/supplement-demand-section.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import { forwardRef, useImperativeHandle, useState } from "react";
+
+import { Paperclip } from "lucide-react";
+
+import { dayjs } from "@/shared/lib";
+import { Field, FieldLabel, FieldSet } from "@/shared/ui/field";
+import { useDownloadAttachmentByAtflCd } from "@/entities/attach";
+import type {
+  InstlSncnSplmntDmndResponseDto,
+  InstlSncnSplmntDmndSaveDto,
+} from "@/entities/instl-sncn";
+import { SectionCollapsible } from "@/widgets/pbadms-sprt";
+import {
+  Badge,
+  RadioGroup,
+  RadioGroupItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@common/components";
+
+import { toSplmntDmndSaveItem } from "../../lib/save-payload-utils";
+
+interface SupplementDemandSectionProps {
+  splmntDmndList: InstlSncnSplmntDmndResponseDto[];
+  canEditCmptnYn: boolean;
+}
+
+export interface SupplementDemandSectionHandle {
+  getSplmntDmndList: () => InstlSncnSplmntDmndSaveDto[];
+}
+
+const SupplementDemandSection = forwardRef<
+  SupplementDemandSectionHandle,
+  SupplementDemandSectionProps
+>(function SupplementDemandSection({ splmntDmndList, canEditCmptnYn }, ref) {
+  const [cmptnYnBySn, setCmptnYnBySn] = useState<Record<number, string>>({});
+  const { mutate: downloadAttachment } = useDownloadAttachmentByAtflCd();
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getSplmntDmndList: () =>
+        splmntDmndList.map((item) => {
+          const saveItem = toSplmntDmndSaveItem(item);
+          const sn = item.splmntDmndSn;
+          if (sn == null || cmptnYnBySn[sn] == null) return saveItem;
+          return { ...saveItem, cmptnYn: cmptnYnBySn[sn] };
+        }),
+    }),
+    [splmntDmndList, cmptnYnBySn],
+  );
+
+  function getCmptnYn(item: InstlSncnSplmntDmndResponseDto) {
+    const sn = item.splmntDmndSn;
+    if (sn != null && cmptnYnBySn[sn] != null) return cmptnYnBySn[sn];
+    return item.cmptnYn ?? "N";
+  }
+
+  return (
+    <SectionCollapsible title="보완요청 및 완료 현황">
+      <div className="overflow-x-auto">
+        <Table variant="secondary">
+          <colgroup>
+            <col width="14%" />
+            <col width="8%" />
+            <col width="30%" />
+            <col width="8%" />
+            <col width="30%" />
+            <col width="10%" />
+          </colgroup>
+          <TableHeader>
+            <TableRow>
+              <TableHead>보완항목</TableHead>
+              <TableHead>보완요청일시</TableHead>
+              <TableHead>보완요청내용</TableHead>
+              <TableHead>보완완료일시</TableHead>
+              <TableHead>보완완료내용</TableHead>
+              <TableHead>완료여부</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {splmntDmndList.map((item) => {
+              const sn = item.splmntDmndSn;
+              const cmptnYn = getCmptnYn(item);
+              const dmndAtchFileNm = item.splmntDmndAtchFileInfo?.orgnlFileNm;
+              const cmptnAtchFileNm = item.splmntAtchFileInfo?.orgnlFileNm;
+
+              return (
+                <TableRow key={sn ?? `${item.splmntArtclComCd}-${item.splmntDmndDt}`}>
+                  <TableCell align="center" className="align-top">
+                    {item.splmntArtclCdNm || "-"}
+                  </TableCell>
+                  <TableCell align="center" className="whitespace-nowrap align-top">
+                    {item.splmntDmndDt ? dayjs(item.splmntDmndDt).format("YYYY-MM-DD HH:mm") : "-"}
+                  </TableCell>
+                  <TableCell className="align-top">
+                    <div className="space-y-2">
+                      <div className="whitespace-pre-wrap">{item.splmntDmndCn || "-"}</div>
+                      {item.splmntDmndAtchFileGroupId ? (
+                        <a
+                          className="inline-flex cursor-pointer items-start gap-1 text-blue-600 hover:underline"
+                          onClick={() => downloadAttachment(item.splmntDmndAtchFileGroupId!)}
+                        >
+                          <Paperclip className="my-1 size-5 shrink-0" />
+                          {dmndAtchFileNm || "다운로드"}
+                        </a>
+                      ) : null}
+                    </div>
+                  </TableCell>
+                  <TableCell align="center" className="whitespace-nowrap align-top">
+                    {item.splmntCmptnDt
+                      ? dayjs(item.splmntCmptnDt).format("YYYY-MM-DD HH:mm")
+                      : "-"}
+                  </TableCell>
+                  <TableCell className="align-top">
+                    <div className="space-y-2">
+                      <div className="whitespace-pre-wrap">{item.splmntCn || "-"}</div>
+                      {item.splmntAtchFileGroupId ? (
+                        <a
+                          className="inline-flex cursor-pointer items-start gap-1 text-blue-600 hover:underline"
+                          onClick={() => downloadAttachment(item.splmntAtchFileGroupId!)}
+                        >
+                          <Paperclip className="my-1 size-5 shrink-0" />
+                          {cmptnAtchFileNm || "다운로드"}
+                        </a>
+                      ) : null}
+                    </div>
+                  </TableCell>
+                  <TableCell align="center" className="align-top">
+                    {canEditCmptnYn && sn != null ? (
+                      <FieldSet>
+                        <RadioGroup
+                          value={cmptnYn}
+                          onValueChange={(value) =>
+                            setCmptnYnBySn((prev) => ({ ...prev, [sn]: value }))
+                          }
+                          className="flex justify-center gap-4"
+                        >
+                          <FieldLabel
+                            htmlFor={`splmnt-cmptn-y-${sn}`}
+                            className="!w-auto border-none"
+                          >
+                            <Field orientation="horizontal" className="w-auto">
+                              <RadioGroupItem value="Y" id={`splmnt-cmptn-y-${sn}`} />
+                              <span className="font-normal">완료</span>
+                            </Field>
+                          </FieldLabel>
+                          <FieldLabel
+                            htmlFor={`splmnt-cmptn-n-${sn}`}
+                            className="!w-auto border-none"
+                          >
+                            <Field orientation="horizontal" className="w-auto">
+                              <RadioGroupItem value="N" id={`splmnt-cmptn-n-${sn}`} />
+                              <span className="font-normal">미완료</span>
+                            </Field>
+                          </FieldLabel>
+                        </RadioGroup>
+                      </FieldSet>
+                    ) : (
+                      <Badge size="lg" color={cmptnYn === "Y" ? "green" : "gray"}>
+                        {cmptnYn === "Y" ? "완료" : "미완료"}
+                      </Badge>
+                    )}
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+    </SectionCollapsible>
+  );
+});
+
+export { SupplementDemandSection };
diff --git a/apps/as/src/pages/instl-sncn/ui/sections/tech-review-opinion-section.tsx b/apps/as/src/pages/instl-sncn/ui/sections/tech-review-opinion-section.tsx
index 175d31a42..c958835b6 100644
--- a/apps/as/src/pages/instl-sncn/ui/sections/tech-review-opinion-section.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/sections/tech-review-opinion-section.tsx
@@ -167,8 +167,8 @@ const TechReviewOpinionSection = forwardRef<
     const uploading = uploadedFile ? (isUploading[uploadedFile.fileKey] ?? false) : false;
 
     return (
-      <div className="p-2">
-        <h4 className="mb-4 text-xl font-semibold">검토의견 작성</h4>
+      <div className="space-y-2">
+        <h4 className="text-xl font-semibold">검토의견 작성</h4>
         <Table variant="secondary">
           <TableHeader>
             <TableRow>
@@ -267,14 +267,18 @@ const TechReviewOpinionSection = forwardRef<
     <>
       {hasEnvSection ? (
         <SectionCollapsible title={`${REVIEW_STEP_LABELS.ENV} 검토의견`}>
-          {envRvwList.length > 0 ? <TechReviewOpinionTable items={envRvwList} /> : null}
-          {renderOpinionForm("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} 검토의견`}>
-          {kecoRvwList.length > 0 ? <TechReviewOpinionTable items={kecoRvwList} /> : null}
-          {renderOpinionForm("KECO")}
+          <div className="space-y-6">
+            {kecoRvwList.length > 0 ? <TechReviewOpinionTable items={kecoRvwList} /> : null}
+            {renderOpinionForm("KECO")}
+          </div>
         </SectionCollapsible>
       ) : null}
     </>
diff --git a/apps/as/src/widgets/pbadms-sprt/index.ts b/apps/as/src/widgets/pbadms-sprt/index.ts
index bec3bc4c6..550a07dd5 100644
--- a/apps/as/src/widgets/pbadms-sprt/index.ts
+++ b/apps/as/src/widgets/pbadms-sprt/index.ts
@@ -35,4 +35,5 @@ export {
   type SplmntDmndDialogConfirmItem,
   type SplmntDmndDialogConfirmPayload,
 } from "./ui/splmnt-dmnd-dialog";
+export { type SplmntDmndFormItem, SplmntDmndFormSection } from "./ui/splmnt-dmnd-form-section";
 export { TaskSePickerDialog } from "./ui/task-se-picker-dialog";
diff --git a/apps/as/src/widgets/pbadms-sprt/ui/splmnt-dmnd-form-section.tsx b/apps/as/src/widgets/pbadms-sprt/ui/splmnt-dmnd-form-section.tsx
new file mode 100644
index 000000000..28cb40497
--- /dev/null
+++ b/apps/as/src/widgets/pbadms-sprt/ui/splmnt-dmnd-form-section.tsx
@@ -0,0 +1,324 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+
+import { Paperclip } from "lucide-react";
+
+import { dayjs, getDefaultFileKey, useTus } from "@/shared/lib";
+import { attachService, useDownloadAttachmentByAtflCd } from "@/entities/attach";
+import {
+  Badge,
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Textarea,
+} from "@common/components";
+
+import { SectionCollapsible } from "./section-collapsible";
+
+const SPLMNT_CMPTN_FILE_KEY_PREFIX = "splmnt-cmptn::";
+
+interface UploadedSplmntFile {
+  fileName: string;
+  fileKey: string;
+  atflId?: string;
+  atflCd?: string;
+}
+
+interface SplmntDmndFormItem {
+  splmntDmndSn?: number;
+  splmntArtclComCd?: string;
+  splmntArtclCdNm?: string | null;
+  splmntDmndCn?: string;
+  splmntDmndDt?: string;
+  splmntDmndAtchFileGroupId?: string;
+  splmntDmndAtchFileNm?: string;
+  splmntCn?: string;
+  splmntPicNm?: string;
+  splmntCmptnDt?: string;
+  splmntAtchFileGroupId?: string;
+  splmntAtchFileNm?: string;
+  splmntAtchFileAtflId?: string;
+  cmptnYn?: string;
+}
+
+interface SplmntDmndFormData {
+  splmntDmndList: SplmntDmndFormItem[];
+}
+
+interface SplmntDmndFormSectionProps {
+  readOnly?: boolean;
+}
+
+function createUploadKey(rowKey: string, file: File) {
+  return `${SPLMNT_CMPTN_FILE_KEY_PREFIX}${rowKey}::${getDefaultFileKey(file)}`;
+}
+
+function getRowKeyFromFileKey(fileKey: string): string | null {
+  if (!fileKey.startsWith(SPLMNT_CMPTN_FILE_KEY_PREFIX)) return null;
+  const rest = fileKey.slice(SPLMNT_CMPTN_FILE_KEY_PREFIX.length);
+  const separatorIndex = rest.indexOf("::");
+  if (separatorIndex < 0) return null;
+  return rest.slice(0, separatorIndex);
+}
+
+function getRowKey(item: SplmntDmndFormItem, index: number) {
+  return item.splmntDmndSn != null ? String(item.splmntDmndSn) : `idx-${index}`;
+}
+
+function SplmntDmndFormSection({ readOnly = false }: SplmntDmndFormSectionProps) {
+  const formId = useId();
+  const { control, setValue, getValues } = useFormContext<SplmntDmndFormData>();
+  const splmntDmndList = useWatch({ control, name: "splmntDmndList" }) ?? [];
+  const [uploadedFiles, setUploadedFiles] = useState<Record<string, UploadedSplmntFile | null>>({});
+  const initialFilesMappedRef = useRef(false);
+  const { mutate: downloadAttachment } = useDownloadAttachmentByAtflCd();
+
+  const { uploadFileAsync, isUploading, uploads } = useTus({
+    onSuccess: (atflCd, atflId, _file, fileKey) => {
+      if (!atflCd || !atflId) return;
+      const rowKey = getRowKeyFromFileKey(fileKey);
+      if (!rowKey) return;
+
+      setUploadedFiles((prev) => {
+        const current = prev[rowKey];
+        if (!current || current.fileKey !== fileKey) return prev;
+        return {
+          ...prev,
+          [rowKey]: { ...current, atflCd, atflId },
+        };
+      });
+
+      const list = getValues("splmntDmndList") ?? [];
+      const index = list.findIndex((item, idx) => getRowKey(item, idx) === rowKey);
+      if (index < 0) return;
+
+      setValue(`splmntDmndList.${index}.splmntAtchFileGroupId`, atflCd, { shouldDirty: true });
+      setValue(`splmntDmndList.${index}.splmntAtchFileAtflId`, atflId, { shouldDirty: true });
+    },
+    onError: (_error, _file, fileKey) => {
+      const rowKey = getRowKeyFromFileKey(fileKey);
+      if (!rowKey) return;
+
+      setUploadedFiles((prev) => {
+        const current = prev[rowKey];
+        if (!current || current.fileKey !== fileKey) return prev;
+        return { ...prev, [rowKey]: null };
+      });
+    },
+  });
+
+  useEffect(() => {
+    if (initialFilesMappedRef.current) return;
+    if (splmntDmndList.length === 0) return;
+
+    const initial: Record<string, UploadedSplmntFile | null> = {};
+    for (let index = 0; index < splmntDmndList.length; index += 1) {
+      const item = splmntDmndList[index];
+      const rowKey = getRowKey(item, index);
+      if (item.splmntAtchFileGroupId && item.splmntAtchFileNm) {
+        initial[rowKey] = {
+          fileName: item.splmntAtchFileNm,
+          fileKey: `${SPLMNT_CMPTN_FILE_KEY_PREFIX}${rowKey}::initial`,
+          atflCd: item.splmntAtchFileGroupId,
+          atflId: item.splmntAtchFileAtflId,
+        };
+      } else {
+        initial[rowKey] = null;
+      }
+    }
+
+    setUploadedFiles(initial);
+    initialFilesMappedRef.current = true;
+  }, [splmntDmndList]);
+
+  if (splmntDmndList.length === 0) return null;
+
+  async function handleFileUpload(index: number, files: FileList | null) {
+    if (!files || files.length === 0) return;
+
+    const item = splmntDmndList[index];
+    const rowKey = getRowKey(item, index);
+    const file = files[0];
+    const fileKey = createUploadKey(rowKey, file);
+    const existingAtflCd = item.splmntAtchFileGroupId;
+
+    setUploadedFiles((prev) => ({
+      ...prev,
+      [rowKey]: { fileName: file.name, fileKey },
+    }));
+    setValue(`splmntDmndList.${index}.splmntAtchFileNm`, file.name, { shouldDirty: true });
+
+    try {
+      await uploadFileAsync(file, {
+        fileKey,
+        metadata: existingAtflCd ? { atflCd: existingAtflCd } : undefined,
+      });
+    } catch {
+      // onError callback handles cleanup
+    }
+  }
+
+  async function handleFileRemove(index: number) {
+    const item = splmntDmndList[index];
+    const rowKey = getRowKey(item, index);
+    const uploaded = uploadedFiles[rowKey];
+    if (!uploaded) return;
+
+    const { fileKey, atflId } = uploaded;
+    uploads[fileKey]?.abort();
+
+    if (atflId) {
+      try {
+        await attachService.deleteAttachmentByAtflId(atflId);
+      } catch (error) {
+        console.error("보완완료 첨부파일 삭제 실패:", error);
+      }
+    }
+
+    setUploadedFiles((prev) => ({ ...prev, [rowKey]: null }));
+    setValue(`splmntDmndList.${index}.splmntAtchFileGroupId`, "", { shouldDirty: true });
+    setValue(`splmntDmndList.${index}.splmntAtchFileNm`, "", { shouldDirty: true });
+    setValue(`splmntDmndList.${index}.splmntAtchFileAtflId`, "", { shouldDirty: true });
+  }
+
+  return (
+    <SectionCollapsible title="보완요청">
+      <div className="overflow-x-auto">
+        <Table variant="secondary">
+          <colgroup>
+            <col width="12%" />
+            <col width="14%" />
+            <col width="22%" />
+            <col width="22%" />
+            <col width="18%" />
+            <col width="12%" />
+          </colgroup>
+          <TableHeader>
+            <TableRow>
+              <TableHead>보완항목</TableHead>
+              <TableHead>보완요청일시</TableHead>
+              <TableHead>보완요청내용</TableHead>
+              <TableHead>보완완료내용</TableHead>
+              <TableHead>파일첨부</TableHead>
+              <TableHead>완료여부</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {splmntDmndList.map((item, index) => {
+              const rowKey = getRowKey(item, index);
+              const uploaded = uploadedFiles[rowKey] ?? null;
+              const uploading = uploaded ? (isUploading[uploaded.fileKey] ?? false) : false;
+              const fileInputId = `${formId}-${rowKey}-file`;
+              const isRowReadOnly = readOnly || item.cmptnYn === "Y";
+
+              return (
+                <TableRow key={rowKey}>
+                  <TableCell align="center" className="align-top">
+                    {item.splmntArtclCdNm || "-"}
+                  </TableCell>
+                  <TableCell align="center" className="whitespace-nowrap align-top">
+                    {item.splmntDmndDt ? dayjs(item.splmntDmndDt).format("YYYY-MM-DD HH:mm") : "-"}
+                  </TableCell>
+                  <TableCell className="align-top">
+                    <div className="space-y-2">
+                      <div className="whitespace-pre-wrap">{item.splmntDmndCn || "-"}</div>
+                      {item.splmntDmndAtchFileGroupId ? (
+                        <a
+                          className="inline-flex cursor-pointer items-start gap-1 text-blue-600 hover:underline"
+                          onClick={() => downloadAttachment(item.splmntDmndAtchFileGroupId!)}
+                        >
+                          <Paperclip className="my-1 size-5 shrink-0" />
+                          {item.splmntDmndAtchFileNm || "다운로드"}
+                        </a>
+                      ) : null}
+                    </div>
+                  </TableCell>
+                  <TableCell className="align-top">
+                    {isRowReadOnly ? (
+                      <span className="whitespace-pre-wrap">{item.splmntCn || "-"}</span>
+                    ) : (
+                      <Controller
+                        control={control}
+                        name={`splmntDmndList.${index}.splmntCn`}
+                        render={({ field }) => (
+                          <Textarea
+                            value={field.value ?? ""}
+                            onChange={field.onChange}
+                            onBlur={field.onBlur}
+                            placeholder="보완완료 내용을 입력하세요."
+                            className="min-h-[6rem] !text-xl"
+                          />
+                        )}
+                      />
+                    )}
+                  </TableCell>
+                  <TableCell className="align-top">
+                    {uploaded ? (
+                      <div className="flex items-stretch gap-2">
+                        {uploaded.atflCd || item.splmntAtchFileGroupId ? (
+                          <a
+                            className="inline-flex cursor-pointer items-start gap-1 text-blue-600 hover:underline"
+                            onClick={() =>
+                              downloadAttachment((uploaded.atflCd || item.splmntAtchFileGroupId)!)
+                            }
+                          >
+                            <Paperclip className="my-1 size-5 shrink-0" />
+                            {uploaded.fileName}
+                          </a>
+                        ) : (
+                          <span className="text-xl">{uploaded.fileName}</span>
+                        )}
+                        {!isRowReadOnly ? (
+                          <Button
+                            type="button"
+                            size="icon"
+                            className="size-8 shrink-0 !bg-destructive"
+                            disabled={uploading}
+                            onClick={() => void handleFileRemove(index)}
+                          >
+                            <i className="diveicon di-x text-xs" aria-label="삭제" />
+                          </Button>
+                        ) : null}
+                      </div>
+                    ) : isRowReadOnly ? (
+                      <span>-</span>
+                    ) : (
+                      <Button type="button" size="sm" disabled={uploading} asChild>
+                        <label htmlFor={fileInputId} className="cursor-pointer">
+                          파일추가
+                          <input
+                            id={fileInputId}
+                            type="file"
+                            className="hidden"
+                            onChange={(event) => {
+                              void handleFileUpload(index, event.target.files);
+                              event.target.value = "";
+                            }}
+                          />
+                        </label>
+                      </Button>
+                    )}
+                  </TableCell>
+                  <TableCell align="center" className="align-top">
+                    <Badge size="lg" color={item.cmptnYn === "Y" ? "green" : "gray"}>
+                      {item.cmptnYn === "Y" ? "완료" : "미완료"}
+                    </Badge>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+    </SectionCollapsible>
+  );
+}
+
+export { SplmntDmndFormSection };
+export type { SplmntDmndFormItem };

From 19dfe45b0be2de02d1ca5e58e417b95764e5438f Mon Sep 17 00:00:00 2001
From: ljpark <mind-one005@mind-one.co.kr>
Date: Thu, 16 Jul 2026 16:58:26 +0900
Subject: [PATCH 26/32] =?UTF-8?q?wr:=20sn:=20fo:=20BaseLayout=20=ED=98=B8?=
 =?UTF-8?q?=EC=B6=9C=20param=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/fo/app/components/api/index.ts           |   5 +-
 apps/fo/app/page.tsx                          |   4 +-
 apps/fo/app/pages/(map-layout)/layout.tsx     |   1 +
 .../app/pages/(with-layout)/jwttest/page.tsx  | 220 +++++++++++++
 apps/fo/app/pages/(with-layout)/layout.tsx    |   2 +
 apps/fo/src/features/auth/login/index.ts      |   1 -
 .../src/features/auth/login/ui/login-page.tsx | 139 --------
 apps/fo/src/features/auth/login/ui/login.css  | 310 ------------------
 apps/fo/src/store/admin-store.ts              |  29 --
 apps/sn/app/(with-base-layout)/layout.tsx     |   2 +
 apps/sn/app/components/lib/api/index.ts       |   4 +-
 apps/sn/src/store/admin-store.ts              |  29 --
 apps/wr/app/(with-layout)/layout.tsx          |  25 +-
 apps/wr/components/lib/api/index.ts           |   4 +-
 apps/wr/src/features/auth/login/index.ts      |   1 -
 .../src/features/auth/login/ui/login-page.tsx | 138 --------
 apps/wr/src/features/auth/login/ui/login.css  | 310 ------------------
 apps/wr/src/store/admin-store.ts              |  29 --
 docs/session-extend-confirm-guide.md          |   2 +-
 19 files changed, 243 insertions(+), 1012 deletions(-)
 create mode 100644 apps/fo/app/pages/(with-layout)/jwttest/page.tsx
 delete mode 100644 apps/fo/src/features/auth/login/index.ts
 delete mode 100644 apps/fo/src/features/auth/login/ui/login-page.tsx
 delete mode 100644 apps/fo/src/features/auth/login/ui/login.css
 delete mode 100644 apps/fo/src/store/admin-store.ts
 delete mode 100644 apps/sn/src/store/admin-store.ts
 delete mode 100644 apps/wr/src/features/auth/login/index.ts
 delete mode 100644 apps/wr/src/features/auth/login/ui/login-page.tsx
 delete mode 100644 apps/wr/src/features/auth/login/ui/login.css
 delete mode 100644 apps/wr/src/store/admin-store.ts

diff --git a/apps/fo/app/components/api/index.ts b/apps/fo/app/components/api/index.ts
index 542e72947..5fab2ee12 100644
--- a/apps/fo/app/components/api/index.ts
+++ b/apps/fo/app/components/api/index.ts
@@ -1,14 +1,17 @@
 import { CLAIM_NAME, SITE_ID } from "@/src/shared/config/env";
 import { tokenManager } from "@/src/entities/auth/lib/token-manager";
+import { getRemainingMs } from "@common/auth";
 import { DEV_URL_FO, DEV_URL_WR, LOCAL_URL } from "./config/env";
 
 const LOGIN_PAGE_URL =
   process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
 
+// client 화면인 경우, 토큰 만료여부 점검하여 로그인 페이지로 이동
 const handleUnauthorizedResponse = () => {
   if (typeof window === "undefined") return;
 
-  const remainingMs = tokenManager.getRemainingMsFromToken(CLAIM_NAME);
+  const accessToken = tokenManager.getToken(CLAIM_NAME);
+  const remainingMs = accessToken ? getRemainingMs(accessToken) : null;
   const isExpired = remainingMs === null || remainingMs <= 0;
 
   if (!isExpired) return;
diff --git a/apps/fo/app/page.tsx b/apps/fo/app/page.tsx
index 143dfdc90..351e87885 100644
--- a/apps/fo/app/page.tsx
+++ b/apps/fo/app/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LoginApi } from "@/src/entities/auth";
+import { authService } from "@/src/entities/auth";
 import { useEffect } from "react";
 import { AUTH_USER_ID } from "@/src/shared/config";
 import { getCookie } from "@/src/shared/lib/cookie";
@@ -17,7 +17,7 @@ export default function Home() {
       if (!checkToken) {
         async function doLogin() {
           try {
-            await LoginApi.login({ userId: "CLEANWATER", password: "gktneh12!@" });
+            await authService.login({ userId: "CLEANWATER", password: "gktneh12!@" });
             window.location.href = "/pages/dashboard";
           } catch (err) {
             console.error("로그인 실패", err);
diff --git a/apps/fo/app/pages/(map-layout)/layout.tsx b/apps/fo/app/pages/(map-layout)/layout.tsx
index 69a60b7a2..9c45eabc8 100644
--- a/apps/fo/app/pages/(map-layout)/layout.tsx
+++ b/apps/fo/app/pages/(map-layout)/layout.tsx
@@ -3,6 +3,7 @@ import { NoFooterLayout } from "@common/components";
 import type { MenuItem } from "../../store/common";
 import { useFoStore } from "../../store";
 import { usePathname, useRouter } from "next/navigation";
+// import { authService } from "@/src/entities/auth";
 
 export default function RootLayout({
   children,
diff --git a/apps/fo/app/pages/(with-layout)/jwttest/page.tsx b/apps/fo/app/pages/(with-layout)/jwttest/page.tsx
new file mode 100644
index 000000000..c9df447ef
--- /dev/null
+++ b/apps/fo/app/pages/(with-layout)/jwttest/page.tsx
@@ -0,0 +1,220 @@
+/**
+ * JWT를 decoding하면 만료시간을 읽을 수 있다.
+ * JWT는 3부분으로 구성 : Header.Payload.Signature
+ * Payload 부분에 만료시간(exp)이 있다.
+ */
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { authService } from "@/src/entities/auth";
+import { CLAIM_NAME } from "@/src/shared/config";
+import { getCookie } from "@/src/shared/lib";
+
+interface JwtPayload {
+  sub?: string; // 토큰 subject. 일반적으로 사용자 식별자나 주체 정보
+  exp?: number; // 만료 시각(Unix timestamp, 초 단위)
+  iat?: number; // 토큰 발급 시각(Unix timestamp, 초 단위)
+  [key: string]: unknown; // 그 외 JWT payload에 포함될 수 있는 추가 클레임
+}
+
+interface JwtState {
+  token: string; // 쿠키에서 읽어온 JWT 원본 문자열
+  payload: JwtPayload | null; // JWT를 파싱한 payload 객체
+  exp: number | null; // payload에서 추출한 exp 값
+  expDateLocal: string | null; // exp를 로컬 시간 문자열로 변환한 값
+  remainingMs: number | null; // 현재 시각 기준 남은 시간(ms)
+  error: string | null; // 쿠키 없음, 파싱 실패 등 오류 메시지
+}
+
+const initialJwtState: JwtState = {
+  token: "",
+  payload: null,
+  exp: null,
+  expDateLocal: null,
+  remainingMs: null,
+  error: null,
+};
+
+function parseJwt(token: string): JwtPayload {
+  const parts = token.split(".");
+  if (parts.length !== 3) {
+    throw new Error("유효한 JWT 형식이 아닙니다.");
+  }
+
+  const base64Url = parts[1] ?? ""; // Payload를 가져온다.
+  const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+  const padded = base64.padEnd(Math.ceil(base64.length / 4) * 4, "=");
+  const jsonPayload = decodeURIComponent(
+    atob(padded)
+      .split("")
+      .map((char) => `%${char.charCodeAt(0).toString(16).padStart(2, "0")}`)
+      .join("")
+  );
+
+  return JSON.parse(jsonPayload) as JwtPayload;
+}
+
+function formatRemainingMs(remainingMs: number | null): string {
+  if (remainingMs === null) return "-";
+  if (remainingMs <= 0) return "만료됨";
+
+  const totalSeconds = Math.floor(remainingMs / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  return `${hours}시간 ${minutes}분 ${seconds}초`;
+}
+
+function readJwtState(): JwtState {
+  const token = getCookie(CLAIM_NAME) ?? "";
+
+  if (!token) {
+    return {
+      token: "",
+      payload: null,
+      exp: null,
+      expDateLocal: null,
+      remainingMs: null,
+      error: `${CLAIM_NAME} 쿠키가 없습니다.`,
+    };
+  }
+
+  try {
+    const payload = parseJwt(token);
+
+    if (typeof payload.exp !== "number") {
+      return {
+        token,
+        payload,
+        exp: null,
+        expDateLocal: null,
+        remainingMs: null,
+        error: "JWT payload에 exp 값이 없습니다.",
+      };
+    }
+
+    const expMs = payload.exp * 1000;
+
+    return {
+      token,
+      payload,
+      exp: payload.exp,
+      expDateLocal: new Date(expMs).toLocaleString(),
+      remainingMs: Math.max(expMs - Date.now(), 0),
+      error: null,
+    };
+  } catch (error) {
+    return {
+      token,
+      payload: null,
+      exp: null,
+      expDateLocal: null,
+      remainingMs: null,
+      error:
+        error instanceof Error
+          ? error.message
+          : "JWT 파싱 중 오류가 발생했습니다.",
+    };
+  }
+}
+
+export default function Page() {
+  const [jwtState, setJwtState] = useState<JwtState>(initialJwtState);
+  const isRefreshingRef = useRef(false);
+
+  const handleSilentRefresh = async () => {
+    try {
+      await authService.silentRefresh();
+    } catch (error) {
+      console.error("Manual silent refresh failed:", error);
+    } finally {
+      setJwtState(readJwtState());
+    }
+  };
+
+  useEffect(() => {
+    const syncJwtState = async () => {
+      const nextState = readJwtState();
+
+      if (
+        nextState.remainingMs !== null &&
+        nextState.remainingMs > 0 &&
+        nextState.remainingMs < 5 * 60 * 1000 &&
+        !isRefreshingRef.current
+      ) {
+        isRefreshingRef.current = true;
+        try {
+          await authService.silentRefresh();
+        } catch (error) {
+          console.error("JWT test silent refresh failed:", error);
+        }
+      }
+
+      setJwtState(readJwtState());
+
+      if (
+        nextState.remainingMs === null ||
+        nextState.remainingMs >= 5 * 60 * 1000 ||
+        nextState.remainingMs <= 0
+      ) {
+        isRefreshingRef.current = false;
+      }
+    };
+
+    void syncJwtState();
+    const timer = window.setInterval(() => {
+      void syncJwtState();
+    }, 1000);
+
+    return () => window.clearInterval(timer);
+  }, []);
+
+  return (
+    <div className="space-y-4 p-8 text-base">
+      <h1 className="text-2xl font-bold">JWT Exp Test</h1>
+
+      <button
+        type="button"
+        className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
+        onClick={() => {
+          void handleSilentRefresh();
+        }}
+      >
+        Silent Refresh 호출
+      </button>
+
+      <div className="rounded border p-4">
+        <div className="font-semibold">쿠키명</div>
+        <div>{CLAIM_NAME}</div>
+      </div>
+
+      <div className="rounded border p-4">
+        <div className="font-semibold">exp</div>
+        <div>{jwtState.exp ?? "-"}</div>
+      </div>
+
+      <div className="rounded border p-4">
+        <div className="font-semibold">만료시각</div>
+        <div>{jwtState.expDateLocal ?? "-"}</div>
+      </div>
+
+      <div className="rounded border p-4">
+        <div className="font-semibold">남은시간</div>
+        <div>{formatRemainingMs(jwtState.remainingMs)}</div>
+      </div>
+
+      <div className="rounded border p-4">
+        <div className="font-semibold">상태</div>
+        <div>{jwtState.error ?? "정상"}</div>
+      </div>
+
+      <div className="rounded border p-4">
+        <div className="font-semibold">payload</div>
+        <pre className="overflow-auto whitespace-pre-wrap break-all text-sm">
+          {jwtState.payload ? JSON.stringify(jwtState.payload, null, 2) : "-"}
+        </pre>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/fo/app/pages/(with-layout)/layout.tsx b/apps/fo/app/pages/(with-layout)/layout.tsx
index 38276b541..768d66670 100644
--- a/apps/fo/app/pages/(with-layout)/layout.tsx
+++ b/apps/fo/app/pages/(with-layout)/layout.tsx
@@ -7,6 +7,7 @@ import { useFoStore } from "@/app/store";
 import { usePathname, useRouter } from "next/navigation";
 import { useMenuStore } from "@/src/shared/lib";
 import { PageLayout } from "@/src/shared/ui/page-layout";
+import { authService } from "@/src/entities/auth";
 
 export default function RootLayout({
   children,
@@ -28,6 +29,7 @@ export default function RootLayout({
   return (
     <BaseLayout
       queryClient={queryClient}
+      authService={authService}
       currentPath={pathname ?? ""}
       handleMenuClick={handleClick}
     >
diff --git a/apps/fo/src/features/auth/login/index.ts b/apps/fo/src/features/auth/login/index.ts
deleted file mode 100644
index 2093c3d8d..000000000
--- a/apps/fo/src/features/auth/login/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { LoginPage } from "./ui/login-page";
diff --git a/apps/fo/src/features/auth/login/ui/login-page.tsx b/apps/fo/src/features/auth/login/ui/login-page.tsx
deleted file mode 100644
index fe14819f3..000000000
--- a/apps/fo/src/features/auth/login/ui/login-page.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import { useEffect } from "react";
-import { images } from "@common/assets";
-import { LoginApi } from "@/src/entities/auth";
-import "./login.css";
-
-function LoginPage() {
-  useEffect(() => {
-    const hostname = window.location.hostname;
-    if (hostname.includes("hasuon.or.kr")) {
-      window.location.href =
-        process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
-    }
-  }, []);
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    const formData = new FormData(e.target as HTMLFormElement);
-    const userId = formData.get("id") as string;
-    const password = formData.get("password") as string;
-
-    await LoginApi.login({ userId, password });
-    window.location.href = "/pages/dashboard";
-  };
-
-  return (
-    <div className="login fx">
-      <div className="left_box fx">
-        <div className="text">
-          <h1>
-            하수도정보시스템
-            <br />
-            <span>CMS 통합관리시스템</span>
-          </h1>
-          <p>하수도정보시스템 CMS 통합관리시스템에 오신 것을 환영합니다.</p>
-        </div>
-        <div className="img">
-          <Image src={images.logo} width={229} height={46} alt="logo" />
-        </div>
-      </div>
-      <form
-        id="loginForm"
-        name="loginForm"
-        method="post"
-        onSubmit={handleSubmit}
-      >
-        <div className="login_box fx">
-          <ul className="fx">
-            <li>
-              <h2>ID</h2>
-              <div className="input_st st1">
-                <i className="diveicon di-account-box" />
-                <input
-                  type="text"
-                  className="id"
-                  title="아이디를 입력하세요."
-                  id="id"
-                  name="id"
-                  maxLength={12}
-                />
-              </div>
-            </li>
-            <li>
-              <h2>PASSWORD</h2>
-              <div className="input_st st2">
-                <i className="diveicon di-key" />
-                <input
-                  type="password"
-                  className="input_style"
-                  maxLength={25}
-                  title="비밀번호를 입력하세요."
-                  id="password"
-                  name="password"
-                />
-              </div>
-            </li>
-          </ul>
-          <div className="bottom_box fx">
-            <div className="checks fx">
-              <input
-                type="checkbox"
-                name="checkId"
-                title="로그인ID 저장여부"
-                id="checkId"
-              />
-              <label htmlFor="checkId">아이디저장</label>
-            </div>
-            {/* <a href="javascript:fnUserSearch();" className=" pw_message fx"><i className="xi-external-link"></i>비밀번호 또는 아이디를 잃어버리셨나요?</a> */}
-          </div>
-          <button type="submit" className="login_btn fx">
-            <span>LOGIN</span>
-          </button>
-          <div className="footer">
-            <div className="copy fx">
-              <p>copyright © 2023 KECO. All rights reserved.</p>
-            </div>
-            <div className="fot_btn fx">
-              <a
-                href="https://keco.or.kr/web/lay1/S1T6C1348/contents.do"
-                target="_blank"
-              >
-                개인정보처리방침
-              </a>
-              <a
-                href="https://keco.or.kr/web/lay1/S1T6C1349/contents.do"
-                target="_blank"
-              >
-                저작권정책안내
-              </a>
-              <a
-                href="https://keco.or.kr/web/lay1/S1T6C1350/contents.do"
-                target="_blank"
-              >
-                이메일무단수집거부
-              </a>
-            </div>
-            <p className="addr fx">
-              <span>
-                주소 : (22689) 인천광역시 서구 환경로 42(경서동
-                종합환경연구단지)
-              </span>
-              <span>
-                전화 : (시스템) 032-590-4321, 3752, 4314 / (통 계) 032-590-3723,
-                3722
-              </span>
-              <span>팩스 :032-590-3729</span>
-            </p>
-          </div>
-        </div>
-      </form>
-    </div>
-  );
-}
-
-export { LoginPage };
-
diff --git a/apps/fo/src/features/auth/login/ui/login.css b/apps/fo/src/features/auth/login/ui/login.css
deleted file mode 100644
index af73c9c68..000000000
--- a/apps/fo/src/features/auth/login/ui/login.css
+++ /dev/null
@@ -1,310 +0,0 @@
-/**
-* OLYM Cascading Style Sheets
-* File Name : login.css
-* Description : 로그인 스타일시트
-* Author : Web business Team / Choi Hyun Mi
-* Email : desingtj@olym.co.kr
-* Date : 2023.07.20
-* Update : 2023.07.26
-* Copyright(c) 2023 OLYM Communications. All Rights Reserved.
-*/
-html,
-body {
-  background: #fff;
-}
-.fx {
-  display: flex;
-  -ms-display: flex;
-  -webkit-display: flex;
-  box-sizing: border-box;
-}
-.login {
-  width: 100%;
-  height: 100vh;
-}
-.login .left_box {
-  width: 100%;
-  background: url(/images/bg_login.jpg) no-repeat center/cover;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 7% 5% 5% 5%;
-}
-.login .left_box .text h1 {
-  font-size: 53px;
-  color: #fff;
-}
-.login .left_box .text h1 span {
-  font-weight: 800;
-}
-.login .left_box .text p {
-  margin-top: 40px;
-  font-size: 18px;
-  color: #fff;
-}
-.login .login_box {
-  width: 100%;
-  flex-direction: column;
-  justify-content: center;
-  padding: 4% 12% 4% 6%;
-}
-.login .login_box > ul {
-  flex-direction: column;
-  gap: 40px;
-}
-.login .login_box > ul > li h2 {
-  font-size: 22px;
-  font-weight: 600;
-  color: #2640a5;
-  margin-bottom: 14px;
-}
-.login .login_box > ul > li .input_st {
-  position: relative;
-}
-.login .login_box > ul > li .input_st .diveicon {
-  position: absolute;
-  top: 50%;
-  left: 28px;
-  transform: translateY(-50%);
-  font-family: "Xeicon";
-  font-size: 25px;
-  color: #003288;
-}
-.login .login_box > ul > li input {
-  width: 100%;
-  padding: 20px 20px 20px 70px;
-  background: #f7f7f7;
-  box-sizing: border-box;
-  border: none;
-  border-radius: 5px;
-  font-size: 18px;
-  font-weight: 700;
-  color: #000;
-  height: auto;
-}
-.login .login_box > ul > li input:focus {
-  outline: 1px solid #3c5fe5;
-}
-.login .login_box > ul > li input::placeholder {
-  color: #afabab;
-  font-weight: 500;
-}
-.login .login_box .bottom_box {
-  justify-content: space-between;
-  gap: 20px;
-  padding: 50px 0 45px 0;
-}
-.login .login_box .bottom_box .checks {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.login .login_box .bottom_box .checks input[type="checkbox"] {
-  width: 18px;
-  height: 18px;
-}
-.login .login_box .bottom_box .checks label {
-  font-size: 14px;
-}
-.login .login_box .bottom_box .pw_message {
-  align-items: center;
-  gap: 5px;
-  color: #636363;
-  font-weight: 500;
-  border-bottom: 1px solid #ccc;
-  padding-bottom: 5px;
-}
-.login .login_box .bottom_box .pw_message i {
-  color: #327af5;
-  font-size: 20px;
-}
-.login .login_box .login_btn {
-  position: relative;
-  border-radius: 5px;
-  padding: 24px 15px;
-  background: linear-gradient(
-    to left,
-    #1d3969 0%,
-    #264078 10%,
-    #172558 40%,
-    #162254 50%,
-    #111c43 60%,
-    #111c42 100%
-  );
-  overflow: hidden;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  color: #fff;
-  cursor: pointer;
-}
-.login .login_box .login_btn span {
-  font-family: "Montserrat";
-  font-size: 19px;
-  font-weight: 700;
-  position: relative;
-}
-.login .login_box .login_btn i {
-  font-size: 22px;
-  transform: translateY(-2px);
-}
-.login .login_box .login_btn:before {
-  display: block;
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  background: linear-gradient(
-    to right,
-    #1d3969 0%,
-    #264078 10%,
-    #172558 40%,
-    #162254 50%,
-    #111c43 60%,
-    #111c42 100%
-  );
-  transition: opacity 0.5s;
-}
-.login .login_box .login_btn:hover::before {
-  opacity: 1;
-}
-.login .footer .copy {
-  margin-top: 36px;
-  justify-content: space-between;
-  align-items: center;
-  gap: 3%;
-}
-.login .footer .copy p {
-  font-size: 13px;
-  color: #d4d4d4;
-  width: 44%;
-  text-align: center;
-}
-.login .footer .copy::before,
-.login .login_box .copy::after {
-  content: "";
-  width: 20%;
-  height: 1px;
-  background: #d4d4d4;
-}
-.login .footer .fot_btn {
-  gap: 20px;
-  margin: 30px 0 10px 0;
-}
-.login .footer .fot_btn a {
-  color: #333;
-  font-weight: 700;
-  font-size: 13px;
-}
-.login .footer .fot_btn a:hover {
-  color: #003288;
-}
-.login .footer .addr {
-  color: #666;
-  font-size: 13px;
-  gap: 3px 20px;
-  flex-wrap: wrap;
-}
-/* 비밀번호 변경 팝업창 */
-.login .modal .modal_container {
-  width: 750px;
-}
-.login .pw_desc {
-  padding: 10px 10px 30px 10px;
-  color: #666;
-}
-.login .pw_desc p {
-  font-size: 1.25rem;
-  color: #000;
-  font-weight: 700;
-  margin-bottom: 10px;
-}
-.login .pw_desc span {
-  color: #f60;
-  font-weight: 700;
-}
-.login .modal .form_write {
-  border-top: 1px solid #ddd;
-  border-bottom: 1px solid #ddd;
-  padding: 20px 50px;
-}
-@media (max-width: 1024px) {
-  .login {
-    flex-direction: column;
-    height: auto;
-  }
-  .login .left_box {
-    padding: 30px;
-    flex-direction: column-reverse;
-    gap: 20px;
-  }
-  .login .left_box .text h1 {
-    font-size: 30px;
-    line-height: 1.2em;
-  }
-  .login .left_box .text p {
-    margin-top: 20px;
-    font-size: 14px;
-  }
-  .login .left_box .img img {
-    height: 40px;
-  }
-  .login .login_box {
-    padding: 30px;
-  }
-  .login .login_box > ul {
-    gap: 20px;
-  }
-  .login .login_box > ul > li h2 {
-    margin-bottom: 7px;
-  }
-  .login .login_box > ul > li .input_st::after {
-    left: 15px;
-    font-size: 20px;
-  }
-  .login .login_box > ul > li input {
-    padding: 15px 10px 15px 50px;
-    font-size: 16px;
-  }
-  .login .login_box .bottom_box {
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 30px 0;
-  }
-  .login .login_box .bottom_box .id_save label {
-    font-size: 14px;
-  }
-  .login .login_box .login_btn {
-    padding: 15px;
-  }
-  .login .login_box .login_btn span {
-    font-size: 16px;
-  }
-  .login .login_box .login_btn i {
-    font-size: 18px;
-    transform: translateY(-1px);
-  }
-  .login .login_box .copy p {
-    width: 100%;
-  }
-  .login .login_box .copy::before,
-  .login .login_box .copy::after {
-    display: none;
-  }
-  .login .footer .addr {
-    font-size: 11px;
-    gap: 3px 10px;
-  }
-  .login .modal .modal_container {
-    width: 90%;
-  }
-  .login .pw_desc {
-    padding: 0 0 20px 0;
-  }
-  .login .modal .form_write {
-    padding: 10px;
-  }
-}
-/* // login */
diff --git a/apps/fo/src/store/admin-store.ts b/apps/fo/src/store/admin-store.ts
deleted file mode 100644
index 098ff816e..000000000
--- a/apps/fo/src/store/admin-store.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { create } from "zustand";
-import { UserApi } from "@/src/entities/user";
-import { getUserInfo } from "../../../../packages/common/components/src/api";
-
-interface AdminStore {
-    /** 현재 사용자가 관리자 목록에 있는지 */
-    isAdminInfo: boolean;
-    setAdminInfo: (value: boolean) => void;
-    /** API로 관리자 목록 조회 후 현재 사용자 일치 여부 설정 */
-    fetchAdminInfo: () => Promise<void>;
-}
-
-const useAdminStoreHook = create<AdminStore>((set) => ({
-    isAdminInfo: false,
-    setAdminInfo: (value) => set({ isAdminInfo: value }),
-    fetchAdminInfo: async () => {
-        try {
-            const userInfo = await getUserInfo();
-            const adminList = await UserApi.findPageAdminUser({ userName: userInfo.userName });
-            const matched = adminList.content?.filter((a) => a.userName === userInfo.userName) ?? [];
-            set({ isAdminInfo: matched.length > 0 });
-        } catch {
-            set({ isAdminInfo: false });
-        }
-    },
-}));
-
-export const useAdminStore = useAdminStoreHook;
-export const getAdminStoreState = () => useAdminStoreHook.getState();
diff --git a/apps/sn/app/(with-base-layout)/layout.tsx b/apps/sn/app/(with-base-layout)/layout.tsx
index 346521d17..60f4a2ffe 100644
--- a/apps/sn/app/(with-base-layout)/layout.tsx
+++ b/apps/sn/app/(with-base-layout)/layout.tsx
@@ -21,6 +21,7 @@ import type { MenuItem } from "@/entities/menu";
 import { useMenuStore } from "@/shared/lib";
 import { PageLayout } from "@/shared/ui/page-layout";
 import useStore from '../store/useStore';
+import { authService } from "@/entities/auth";
 
 export default function WithBaseLayout({
   children,
@@ -50,6 +51,7 @@ export default function WithBaseLayout({
   return (
     <BaseLayout
       queryClient={queryClient}
+      authService={authService}
       currentPath={pathname ?? ""}
       handleMenuClick={handleMenuClick}
     >
diff --git a/apps/sn/app/components/lib/api/index.ts b/apps/sn/app/components/lib/api/index.ts
index 28c9f4500..73cc2e984 100644
--- a/apps/sn/app/components/lib/api/index.ts
+++ b/apps/sn/app/components/lib/api/index.ts
@@ -13,6 +13,7 @@ import { useEffect, useState } from "react";
 import axios from 'axios';
 import { CLAIM_NAME, SITE_ID } from "@/shared/config";
 import { tokenManager } from "@/entities/auth/lib/token-manager";
+import { getRemainingMs } from "@common/auth";
 
 const BASE_URL = '/sewerage-service/api';
 const DEFAULT_HEADERS = {
@@ -32,7 +33,8 @@ const resolveApiUrl = (url: string) =>
 const handleUnauthorizedResponse = () => {
   if (typeof window === "undefined") return;
 
-  const remainingMs = tokenManager.getRemainingMsFromToken(CLAIM_NAME);
+  const accessToken = tokenManager.getToken(CLAIM_NAME);
+  const remainingMs = accessToken ? getRemainingMs(accessToken) : null;
   const isExpired = remainingMs === null || remainingMs <= 0;
 
   if (!isExpired) return;
diff --git a/apps/sn/src/store/admin-store.ts b/apps/sn/src/store/admin-store.ts
deleted file mode 100644
index 098ff816e..000000000
--- a/apps/sn/src/store/admin-store.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { create } from "zustand";
-import { UserApi } from "@/src/entities/user";
-import { getUserInfo } from "../../../../packages/common/components/src/api";
-
-interface AdminStore {
-    /** 현재 사용자가 관리자 목록에 있는지 */
-    isAdminInfo: boolean;
-    setAdminInfo: (value: boolean) => void;
-    /** API로 관리자 목록 조회 후 현재 사용자 일치 여부 설정 */
-    fetchAdminInfo: () => Promise<void>;
-}
-
-const useAdminStoreHook = create<AdminStore>((set) => ({
-    isAdminInfo: false,
-    setAdminInfo: (value) => set({ isAdminInfo: value }),
-    fetchAdminInfo: async () => {
-        try {
-            const userInfo = await getUserInfo();
-            const adminList = await UserApi.findPageAdminUser({ userName: userInfo.userName });
-            const matched = adminList.content?.filter((a) => a.userName === userInfo.userName) ?? [];
-            set({ isAdminInfo: matched.length > 0 });
-        } catch {
-            set({ isAdminInfo: false });
-        }
-    },
-}));
-
-export const useAdminStore = useAdminStoreHook;
-export const getAdminStoreState = () => useAdminStoreHook.getState();
diff --git a/apps/wr/app/(with-layout)/layout.tsx b/apps/wr/app/(with-layout)/layout.tsx
index 1e43f4c32..03d48aa1c 100644
--- a/apps/wr/app/(with-layout)/layout.tsx
+++ b/apps/wr/app/(with-layout)/layout.tsx
@@ -1,22 +1,3 @@
-// "use client";
-// import Base from "../base";
-
-// export default function RootLayout({
-//   children,
-// }: Readonly<{
-//   children: React.ReactNode;
-// }>) {
-
-
-//   return (
-   
-//             <Base>
-//               {children}
-//             </Base>
-    
-//   );
-// }
-
 "use client";
 import { BaseLayout } from "@common/components/ui";
 import { useQueryClient } from "@tanstack/react-query";
@@ -26,6 +7,7 @@ import type { MenuItem } from "../store/common/type/menu";
 import { usePathname, useRouter } from "next/navigation";
 import { useMenuStore } from "@/src/shared/lib";
 import { PageLayout } from "@/src/shared/ui/page-layout";
+import { authService } from "@/src/entities/auth";
 
 export default function RootLayout({
   children,
@@ -48,7 +30,10 @@ export default function RootLayout({
     }
   };
   return (
-    <BaseLayout queryClient={queryClient} currentPath={pathname ?? ""} handleMenuClick={changeMenu}>
+    <BaseLayout queryClient={queryClient}
+      authService={authService}
+      currentPath={pathname ?? ""}
+      handleMenuClick={changeMenu}>
       <PageLayout>
         <MainDiv>{children}</MainDiv>
       </PageLayout>
diff --git a/apps/wr/components/lib/api/index.ts b/apps/wr/components/lib/api/index.ts
index 44eef5924..fba544685 100644
--- a/apps/wr/components/lib/api/index.ts
+++ b/apps/wr/components/lib/api/index.ts
@@ -1,6 +1,7 @@
 import { DEV_URL_FO, DEV_URL_WR, LOCAL_URL } from "../config/";
 import { CLAIM_NAME, SITE_ID } from "@/src/shared/config";
 import { tokenManager } from "@/src/entities/auth/lib/token-manager";
+import { getRemainingMs } from "@common/auth";
 
 export const fetchType = {
   COMMON: "common",
@@ -20,7 +21,8 @@ const getDefaultHeaders = (headers: HeadersInit = {}) => ({
 const handleUnauthorizedResponse = () => {
   if (typeof window === "undefined") return;
 
-  const remainingMs = tokenManager.getRemainingMsFromToken(CLAIM_NAME);
+  const accessToken = tokenManager.getToken(CLAIM_NAME);
+  const remainingMs = accessToken ? getRemainingMs(accessToken) : null;
   const isExpired = remainingMs === null || remainingMs <= 0;
 
   if (!isExpired) return;
diff --git a/apps/wr/src/features/auth/login/index.ts b/apps/wr/src/features/auth/login/index.ts
deleted file mode 100644
index 2093c3d8d..000000000
--- a/apps/wr/src/features/auth/login/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { LoginPage } from "./ui/login-page";
diff --git a/apps/wr/src/features/auth/login/ui/login-page.tsx b/apps/wr/src/features/auth/login/ui/login-page.tsx
deleted file mode 100644
index 4c340f78e..000000000
--- a/apps/wr/src/features/auth/login/ui/login-page.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import { useEffect } from "react";
-import { images } from "@common/assets";
-import { LoginApi } from "@/src/entities/auth";
-import "./login.css";
-
-function LoginPage() {
-  useEffect(() => {
-    const hostname = window.location.hostname;
-    if (hostname.includes("hasuon.or.kr")) {
-      window.location.href =
-        process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
-    }
-  }, []);
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    const formData = new FormData(e.target as HTMLFormElement);
-    const userId = formData.get("id") as string;
-    const password = formData.get("password") as string;
-
-    await LoginApi.login({ userId, password });
-    window.location.href = "/map/mainMap";
-  };
-
-  return (
-    <div className="login fx">
-      <div className="left_box fx">
-        <div className="text">
-          <h1>
-            하수도정보시스템
-            <br />
-            <span>CMS 통합관리시스템</span>
-          </h1>
-          <p>하수도정보시스템 CMS 통합관리시스템에 오신 것을 환영합니다.</p>
-        </div>
-        <div className="img">
-          <Image src={images.logo} width={229} height={46} alt="logo" />
-        </div>
-      </div>
-      <form
-        id="loginForm"
-        name="loginForm"
-        method="post"
-        onSubmit={handleSubmit}
-      >
-        <div className="login_box fx">
-          <ul className="fx">
-            <li>
-              <h2>ID</h2>
-              <div className="input_st st1">
-                <i className="diveicon di-account-box" />
-                <input
-                  type="text"
-                  className="id"
-                  title="아이디를 입력하세요."
-                  id="id"
-                  name="id"
-                  maxLength={12}
-                />
-              </div>
-            </li>
-            <li>
-              <h2>PASSWORD</h2>
-              <div className="input_st st2">
-                <i className="diveicon di-key" />
-                <input
-                  type="password"
-                  className="input_style"
-                  maxLength={25}
-                  title="비밀번호를 입력하세요."
-                  id="password"
-                  name="password"
-                />
-              </div>
-            </li>
-          </ul>
-          <div className="bottom_box fx">
-            <div className="checks fx">
-              <input
-                type="checkbox"
-                name="checkId"
-                title="로그인ID 저장여부"
-                id="checkId"
-              />
-              <label htmlFor="checkId">아이디저장</label>
-            </div>
-            {/* <a href="javascript:fnUserSearch();" className=" pw_message fx"><i className="xi-external-link"></i>비밀번호 또는 아이디를 잃어버리셨나요?</a> */}
-          </div>
-          <button type="submit" className="login_btn fx">
-            <span>LOGIN</span>
-          </button>
-          <div className="footer">
-            <div className="copy fx">
-              <p>copyright © 2023 KECO. All rights reserved.</p>
-            </div>
-            <div className="fot_btn fx">
-              <a
-                href="https://keco.or.kr/web/lay1/S1T6C1348/contents.do"
-                target="_blank"
-              >
-                개인정보처리방침
-              </a>
-              <a
-                href="https://keco.or.kr/web/lay1/S1T6C1349/contents.do"
-                target="_blank"
-              >
-                저작권정책안내
-              </a>
-              <a
-                href="https://keco.or.kr/web/lay1/S1T6C1350/contents.do"
-                target="_blank"
-              >
-                이메일무단수집거부
-              </a>
-            </div>
-            <p className="addr fx">
-              <span>
-                주소 : (22689) 인천광역시 서구 환경로 42(경서동
-                종합환경연구단지)
-              </span>
-              <span>
-                전화 : (시스템) 032-590-4321, 3752, 4314 / (통 계) 032-590-3723,
-                3722
-              </span>
-              <span>팩스 :032-590-3729</span>
-            </p>
-          </div>
-        </div>
-      </form>
-    </div>
-  );
-}
-
-export { LoginPage };
diff --git a/apps/wr/src/features/auth/login/ui/login.css b/apps/wr/src/features/auth/login/ui/login.css
deleted file mode 100644
index af73c9c68..000000000
--- a/apps/wr/src/features/auth/login/ui/login.css
+++ /dev/null
@@ -1,310 +0,0 @@
-/**
-* OLYM Cascading Style Sheets
-* File Name : login.css
-* Description : 로그인 스타일시트
-* Author : Web business Team / Choi Hyun Mi
-* Email : desingtj@olym.co.kr
-* Date : 2023.07.20
-* Update : 2023.07.26
-* Copyright(c) 2023 OLYM Communications. All Rights Reserved.
-*/
-html,
-body {
-  background: #fff;
-}
-.fx {
-  display: flex;
-  -ms-display: flex;
-  -webkit-display: flex;
-  box-sizing: border-box;
-}
-.login {
-  width: 100%;
-  height: 100vh;
-}
-.login .left_box {
-  width: 100%;
-  background: url(/images/bg_login.jpg) no-repeat center/cover;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 7% 5% 5% 5%;
-}
-.login .left_box .text h1 {
-  font-size: 53px;
-  color: #fff;
-}
-.login .left_box .text h1 span {
-  font-weight: 800;
-}
-.login .left_box .text p {
-  margin-top: 40px;
-  font-size: 18px;
-  color: #fff;
-}
-.login .login_box {
-  width: 100%;
-  flex-direction: column;
-  justify-content: center;
-  padding: 4% 12% 4% 6%;
-}
-.login .login_box > ul {
-  flex-direction: column;
-  gap: 40px;
-}
-.login .login_box > ul > li h2 {
-  font-size: 22px;
-  font-weight: 600;
-  color: #2640a5;
-  margin-bottom: 14px;
-}
-.login .login_box > ul > li .input_st {
-  position: relative;
-}
-.login .login_box > ul > li .input_st .diveicon {
-  position: absolute;
-  top: 50%;
-  left: 28px;
-  transform: translateY(-50%);
-  font-family: "Xeicon";
-  font-size: 25px;
-  color: #003288;
-}
-.login .login_box > ul > li input {
-  width: 100%;
-  padding: 20px 20px 20px 70px;
-  background: #f7f7f7;
-  box-sizing: border-box;
-  border: none;
-  border-radius: 5px;
-  font-size: 18px;
-  font-weight: 700;
-  color: #000;
-  height: auto;
-}
-.login .login_box > ul > li input:focus {
-  outline: 1px solid #3c5fe5;
-}
-.login .login_box > ul > li input::placeholder {
-  color: #afabab;
-  font-weight: 500;
-}
-.login .login_box .bottom_box {
-  justify-content: space-between;
-  gap: 20px;
-  padding: 50px 0 45px 0;
-}
-.login .login_box .bottom_box .checks {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.login .login_box .bottom_box .checks input[type="checkbox"] {
-  width: 18px;
-  height: 18px;
-}
-.login .login_box .bottom_box .checks label {
-  font-size: 14px;
-}
-.login .login_box .bottom_box .pw_message {
-  align-items: center;
-  gap: 5px;
-  color: #636363;
-  font-weight: 500;
-  border-bottom: 1px solid #ccc;
-  padding-bottom: 5px;
-}
-.login .login_box .bottom_box .pw_message i {
-  color: #327af5;
-  font-size: 20px;
-}
-.login .login_box .login_btn {
-  position: relative;
-  border-radius: 5px;
-  padding: 24px 15px;
-  background: linear-gradient(
-    to left,
-    #1d3969 0%,
-    #264078 10%,
-    #172558 40%,
-    #162254 50%,
-    #111c43 60%,
-    #111c42 100%
-  );
-  overflow: hidden;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  color: #fff;
-  cursor: pointer;
-}
-.login .login_box .login_btn span {
-  font-family: "Montserrat";
-  font-size: 19px;
-  font-weight: 700;
-  position: relative;
-}
-.login .login_box .login_btn i {
-  font-size: 22px;
-  transform: translateY(-2px);
-}
-.login .login_box .login_btn:before {
-  display: block;
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  background: linear-gradient(
-    to right,
-    #1d3969 0%,
-    #264078 10%,
-    #172558 40%,
-    #162254 50%,
-    #111c43 60%,
-    #111c42 100%
-  );
-  transition: opacity 0.5s;
-}
-.login .login_box .login_btn:hover::before {
-  opacity: 1;
-}
-.login .footer .copy {
-  margin-top: 36px;
-  justify-content: space-between;
-  align-items: center;
-  gap: 3%;
-}
-.login .footer .copy p {
-  font-size: 13px;
-  color: #d4d4d4;
-  width: 44%;
-  text-align: center;
-}
-.login .footer .copy::before,
-.login .login_box .copy::after {
-  content: "";
-  width: 20%;
-  height: 1px;
-  background: #d4d4d4;
-}
-.login .footer .fot_btn {
-  gap: 20px;
-  margin: 30px 0 10px 0;
-}
-.login .footer .fot_btn a {
-  color: #333;
-  font-weight: 700;
-  font-size: 13px;
-}
-.login .footer .fot_btn a:hover {
-  color: #003288;
-}
-.login .footer .addr {
-  color: #666;
-  font-size: 13px;
-  gap: 3px 20px;
-  flex-wrap: wrap;
-}
-/* 비밀번호 변경 팝업창 */
-.login .modal .modal_container {
-  width: 750px;
-}
-.login .pw_desc {
-  padding: 10px 10px 30px 10px;
-  color: #666;
-}
-.login .pw_desc p {
-  font-size: 1.25rem;
-  color: #000;
-  font-weight: 700;
-  margin-bottom: 10px;
-}
-.login .pw_desc span {
-  color: #f60;
-  font-weight: 700;
-}
-.login .modal .form_write {
-  border-top: 1px solid #ddd;
-  border-bottom: 1px solid #ddd;
-  padding: 20px 50px;
-}
-@media (max-width: 1024px) {
-  .login {
-    flex-direction: column;
-    height: auto;
-  }
-  .login .left_box {
-    padding: 30px;
-    flex-direction: column-reverse;
-    gap: 20px;
-  }
-  .login .left_box .text h1 {
-    font-size: 30px;
-    line-height: 1.2em;
-  }
-  .login .left_box .text p {
-    margin-top: 20px;
-    font-size: 14px;
-  }
-  .login .left_box .img img {
-    height: 40px;
-  }
-  .login .login_box {
-    padding: 30px;
-  }
-  .login .login_box > ul {
-    gap: 20px;
-  }
-  .login .login_box > ul > li h2 {
-    margin-bottom: 7px;
-  }
-  .login .login_box > ul > li .input_st::after {
-    left: 15px;
-    font-size: 20px;
-  }
-  .login .login_box > ul > li input {
-    padding: 15px 10px 15px 50px;
-    font-size: 16px;
-  }
-  .login .login_box .bottom_box {
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 30px 0;
-  }
-  .login .login_box .bottom_box .id_save label {
-    font-size: 14px;
-  }
-  .login .login_box .login_btn {
-    padding: 15px;
-  }
-  .login .login_box .login_btn span {
-    font-size: 16px;
-  }
-  .login .login_box .login_btn i {
-    font-size: 18px;
-    transform: translateY(-1px);
-  }
-  .login .login_box .copy p {
-    width: 100%;
-  }
-  .login .login_box .copy::before,
-  .login .login_box .copy::after {
-    display: none;
-  }
-  .login .footer .addr {
-    font-size: 11px;
-    gap: 3px 10px;
-  }
-  .login .modal .modal_container {
-    width: 90%;
-  }
-  .login .pw_desc {
-    padding: 0 0 20px 0;
-  }
-  .login .modal .form_write {
-    padding: 10px;
-  }
-}
-/* // login */
diff --git a/apps/wr/src/store/admin-store.ts b/apps/wr/src/store/admin-store.ts
deleted file mode 100644
index 098ff816e..000000000
--- a/apps/wr/src/store/admin-store.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { create } from "zustand";
-import { UserApi } from "@/src/entities/user";
-import { getUserInfo } from "../../../../packages/common/components/src/api";
-
-interface AdminStore {
-    /** 현재 사용자가 관리자 목록에 있는지 */
-    isAdminInfo: boolean;
-    setAdminInfo: (value: boolean) => void;
-    /** API로 관리자 목록 조회 후 현재 사용자 일치 여부 설정 */
-    fetchAdminInfo: () => Promise<void>;
-}
-
-const useAdminStoreHook = create<AdminStore>((set) => ({
-    isAdminInfo: false,
-    setAdminInfo: (value) => set({ isAdminInfo: value }),
-    fetchAdminInfo: async () => {
-        try {
-            const userInfo = await getUserInfo();
-            const adminList = await UserApi.findPageAdminUser({ userName: userInfo.userName });
-            const matched = adminList.content?.filter((a) => a.userName === userInfo.userName) ?? [];
-            set({ isAdminInfo: matched.length > 0 });
-        } catch {
-            set({ isAdminInfo: false });
-        }
-    },
-}));
-
-export const useAdminStore = useAdminStoreHook;
-export const getAdminStoreState = () => useAdminStoreHook.getState();
diff --git a/docs/session-extend-confirm-guide.md b/docs/session-extend-confirm-guide.md
index 0668f1f3d..23a1ce099 100644
--- a/docs/session-extend-confirm-guide.md
+++ b/docs/session-extend-confirm-guide.md
@@ -47,7 +47,7 @@ sequenceDiagram
   else 취소
     Header->>API: declineSessionExtend()
     API->>RefreshTimer: clearRefreshTimer()
-    Note over RefreshTimer: 만료까지 자동 갱신 없음
+    Note over RefreshTimer: 취소시 만료까지 자동 갱신 없음
   end
 ```
 

From a6f9ba7526d64ff10eee9669976064c56b97d6ee Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 16 Jul 2026 17:54:57 +0900
Subject: [PATCH 27/32] =?UTF-8?q?[as]=20feat:=20=EC=9E=AC=EC=9B=90?=
 =?UTF-8?q?=ED=98=91=EC=9D=98=20=EB=B3=B4=EC=99=84=EC=9A=94=EC=B2=AD=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/fnrs-cnsltn/lib/button-config.ts    |   2 -
 .../lib/fnrs-cnsltn-regist-schema.ts          |  18 ++
 .../pages/fnrs-cnsltn/lib/form-data-mapper.ts |  19 ++
 .../fnrs-cnsltn/lib/save-payload-utils.ts     |   5 +-
 .../ui/components/floating-action-buttons.tsx |  53 +---
 .../pages/fnrs-cnsltn/ui/fnrs-form-page.tsx   | 119 +++++--
 .../pages/fnrs-cnsltn/ui/fnrs-view-page.tsx   |   3 +-
 .../ui/sections/supplement-demand-section.tsx |  57 ----
 .../src/pages/instl-sncn/lib/button-config.ts |   2 -
 .../ui/components/floating-action-buttons.tsx |  31 +-
 .../pages/instl-sncn/ui/instl-form-page.tsx   |  13 +-
 .../pages/instl-sncn/ui/instl-view-page.tsx   |  14 +-
 apps/as/src/widgets/pbadms-sprt/index.ts      |   1 +
 .../ui}/supplement-demand-section.tsx         | 295 +++++++-----------
 14 files changed, 284 insertions(+), 348 deletions(-)
 delete mode 100644 apps/as/src/pages/fnrs-cnsltn/ui/sections/supplement-demand-section.tsx
 rename apps/as/src/{pages/instl-sncn/ui/sections => widgets/pbadms-sprt/ui}/supplement-demand-section.tsx (53%)

diff --git a/apps/as/src/pages/fnrs-cnsltn/lib/button-config.ts b/apps/as/src/pages/fnrs-cnsltn/lib/button-config.ts
index 55ec0e0ae..6fdba8073 100644
--- a/apps/as/src/pages/fnrs-cnsltn/lib/button-config.ts
+++ b/apps/as/src/pages/fnrs-cnsltn/lib/button-config.ts
@@ -2,7 +2,6 @@ export const FNRS_CNSLTN_VIEW_BUTTON_ACTION = {
   strg: "strg",
   aply: "aply",
   del: "del",
-  splmntCmptn: "splmntCmptn",
   fnrsCnsltnAncmnt: "fnrsCnsltnAncmnt",
   envoSbmsn: "envoSbmsn",
   rjct: "rjct",
@@ -32,7 +31,6 @@ const ROLE_STATUS_BUTTON_ACTIONS: Record<string, Record<string, FnrsCnsltnViewBu
       FNRS_CNSLTN_VIEW_BUTTON_ACTION.aply,
       FNRS_CNSLTN_VIEW_BUTTON_ACTION.del,
     ],
-    SL: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.splmntCmptn],
     TA: [FNRS_CNSLTN_VIEW_BUTTON_ACTION.fnrsCnsltnAncmnt],
   },
   ROLE_USER04: {
diff --git a/apps/as/src/pages/fnrs-cnsltn/lib/fnrs-cnsltn-regist-schema.ts b/apps/as/src/pages/fnrs-cnsltn/lib/fnrs-cnsltn-regist-schema.ts
index 276fe6e9c..8bfc0c317 100644
--- a/apps/as/src/pages/fnrs-cnsltn/lib/fnrs-cnsltn-regist-schema.ts
+++ b/apps/as/src/pages/fnrs-cnsltn/lib/fnrs-cnsltn-regist-schema.ts
@@ -83,6 +83,24 @@ export const fnrsCnsltnRegistSchema = z.object({
       atchFileGroupId: z.string(),
     }),
   ),
+  splmntDmndList: z.array(
+    z.object({
+      splmntDmndSn: z.number().optional(),
+      splmntArtclComCd: z.string().optional(),
+      splmntArtclCdNm: z.string().nullish(),
+      splmntDmndCn: z.string().optional(),
+      splmntDmndDt: z.string().optional(),
+      splmntDmndAtchFileGroupId: z.string().optional(),
+      splmntDmndAtchFileNm: z.string().optional(),
+      splmntCn: z.string().optional(),
+      splmntPicNm: z.string().optional(),
+      splmntCmptnDt: z.string().optional(),
+      splmntAtchFileGroupId: z.string().optional(),
+      splmntAtchFileNm: z.string().optional(),
+      splmntAtchFileAtflId: z.string().optional(),
+      cmptnYn: z.string().optional(),
+    }),
+  ),
   privacyConsent: z.enum(["Y", "N"], {
     required_error: "개인정보 수집/이용 동의는 필수입니다",
   }),
diff --git a/apps/as/src/pages/fnrs-cnsltn/lib/form-data-mapper.ts b/apps/as/src/pages/fnrs-cnsltn/lib/form-data-mapper.ts
index d76887394..82707757d 100644
--- a/apps/as/src/pages/fnrs-cnsltn/lib/form-data-mapper.ts
+++ b/apps/as/src/pages/fnrs-cnsltn/lib/form-data-mapper.ts
@@ -34,6 +34,7 @@ export function mapDetailToFormData(data: FnrsCnsltnMngDetResponseDto): FnrsCnsl
   const bizCstList = data.bizCstList ?? [];
   const cklstResultList = data.cklstResultList;
   const esntlFileList = data.esntlFileList;
+  const splmntDmndList = data.splmntDmndList;
 
   return {
     fnrsCnsltnMng: {
@@ -94,6 +95,23 @@ export function mapDetailToFormData(data: FnrsCnsltnMngDetResponseDto): FnrsCnsl
         picRvwCn: item.picRvwCn,
       })) ?? [],
     esntlAtchFileList: mapEsntlAtchFileList(esntlFileList),
+    splmntDmndList:
+      splmntDmndList?.map((item) => ({
+        splmntDmndSn: item.splmntDmndSn,
+        splmntArtclComCd: item.splmntArtclComCd,
+        splmntArtclCdNm: item.splmntArtclCdNm,
+        splmntDmndCn: item.splmntDmndCn,
+        splmntDmndDt: item.splmntDmndDt,
+        splmntDmndAtchFileGroupId: item.splmntDmndAtchFileGroupId ?? "",
+        splmntDmndAtchFileNm: item.splmntDmndAtchFileInfo?.orgnlFileNm ?? "",
+        splmntCn: item.splmntCn ?? "",
+        splmntPicNm: item.splmntPicNm ?? "",
+        splmntCmptnDt: item.splmntCmptnDt ?? "",
+        splmntAtchFileGroupId: item.splmntAtchFileGroupId ?? "",
+        splmntAtchFileNm: item.splmntAtchFileInfo?.orgnlFileNm ?? "",
+        splmntAtchFileAtflId: item.splmntAtchFileInfo?.atflId ?? "",
+        cmptnYn: item.cmptnYn,
+      })) ?? [],
     privacyConsent: "Y",
   };
 }
@@ -130,6 +148,7 @@ export function getCreateDefaultValues(
     fnrsSharList: [],
     cklstResultList: [],
     esntlAtchFileList: [],
+    splmntDmndList: [],
     privacyConsent: "N",
   };
 }
diff --git a/apps/as/src/pages/fnrs-cnsltn/lib/save-payload-utils.ts b/apps/as/src/pages/fnrs-cnsltn/lib/save-payload-utils.ts
index 7c4782dbb..fb34d7d0e 100644
--- a/apps/as/src/pages/fnrs-cnsltn/lib/save-payload-utils.ts
+++ b/apps/as/src/pages/fnrs-cnsltn/lib/save-payload-utils.ts
@@ -112,8 +112,7 @@ export function buildSupplementReqPayload(
     toSplmntDmndSaveItem(item),
   );
 
-  const nextSn =
-    existingItems.reduce((max, item) => Math.max(max, item.splmntDmndSn ?? 0), 0) + 1;
+  const nextSn = existingItems.reduce((max, item) => Math.max(max, item.splmntDmndSn ?? 0), 0) + 1;
 
   const newItems: FnrsCnsltnSplmntDmndItem[] = payload.items.map((item, index) => ({
     splmntDmndSn: nextSn + index,
@@ -129,7 +128,7 @@ export function buildSupplementReqPayload(
   };
 }
 
-function toSplmntDmndSaveItem(item: FnrsCnsltnSplmntDmndItem): FnrsCnsltnSplmntDmndItem {
+export function toSplmntDmndSaveItem(item: FnrsCnsltnSplmntDmndItem): FnrsCnsltnSplmntDmndItem {
   return {
     splmntDmndSn: item.splmntDmndSn,
     splmntArtclComCd: item.splmntArtclComCd,
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx
index 46d8f9eee..d55333763 100644
--- a/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx
+++ b/apps/as/src/pages/fnrs-cnsltn/ui/components/floating-action-buttons.tsx
@@ -40,8 +40,8 @@ import { computeReviewStepChecklistProgress } from "../../lib/checklist-utils";
 import {
   buildSavePayload,
   buildSupplementReqPayload,
-  buildSupplementSubmitPayload,
   buildTechReviewReplyPayload,
+  toSplmntDmndSaveItem,
 } from "../../lib/save-payload-utils";
 import { type ChecklistFormState } from "../../model/view-types";
 import type { TechReviewOpinionSectionHandle } from "../sections/tech-review-opinion-section";
@@ -219,15 +219,6 @@ function FloatingActionButtons({
     router.push("/fnrs-cnsltn");
   }
 
-  async function handleSplmntCmptnClick() {
-    const payload = buildSupplementSubmitPayload(data, checklistFormState);
-    await executeAction({
-      action: FNRS_CNSLTN_VIEW_BUTTON_ACTION.splmntCmptn,
-      request: payload,
-      successMessage: "보완완료 처리되었습니다.",
-    });
-  }
-
   async function handleFnrsCnsltnAncmntClick() {
     const payload: DocPrgrsUpdateRequestDto = {
       docNo,
@@ -380,15 +371,18 @@ function FloatingActionButtons({
       return;
     }
 
-    const payload = buildTechReviewReplyPayload(
-      data,
-      checklistFormState,
-      "KECO",
-      "TE",
-      "SV",
-      getReviewOpinionFormData(),
-      opnrNm,
-    );
+    const payload = {
+      ...buildTechReviewReplyPayload(
+        data,
+        checklistFormState,
+        "KECO",
+        "TE",
+        "SV",
+        getReviewOpinionFormData(),
+        opnrNm,
+      ),
+      splmntDmndList: (data.splmntDmndList ?? []).map(toSplmntDmndSaveItem),
+    };
 
     await executeAction({
       action: FNRS_CNSLTN_VIEW_BUTTON_ACTION.rvwCmptn,
@@ -439,11 +433,6 @@ function FloatingActionButtons({
               삭제
             </Button>
           )}
-          {shouldShowButton(FNRS_CNSLTN_VIEW_BUTTON_ACTION.splmntCmptn) && (
-            <Button onClick={handleSplmntCmptnClick} disabled={isProcessing}>
-              보완완료
-            </Button>
-          )}
           {shouldShowButton(FNRS_CNSLTN_VIEW_BUTTON_ACTION.fnrsCnsltnAncmnt) && (
             <Button onClick={handleFnrsCnsltnAncmntClick} disabled={isProcessing}>
               재원협의 고시
@@ -518,7 +507,7 @@ function FloatingActionButtons({
         open={activeDialog === "dmndSplmnt"}
         onOpenChange={() => setActiveDialog(null)}
         isSubmitting={isProcessing}
-        onConfirm={(payload) => void handleDmndSplmntConfirm(payload)}
+        onConfirm={handleDmndSplmntConfirm}
       />
 
       <ElaprApprovalDialog
@@ -558,19 +547,6 @@ async function handleDel(context: ActionHandlerContext): Promise<void> {
   }
 }
 
-async function handleSplmntCmptn(
-  context: ActionHandlerContext<FnrsCnsltnApplySaveRequestDto>,
-): Promise<void> {
-  try {
-    const docNo = context.data.detDto?.fnrsCnsltnDocNo;
-    if (!docNo) throw new Error("문서번호가 없습니다.");
-    await fnrsCnsltnMngService.submitSupplement(docNo, context.request);
-    context.onSuccess?.();
-  } catch (error) {
-    context.onError?.(error as Error);
-  }
-}
-
 async function handleChangePrgrsSttsComCd(
   context: ActionHandlerContext<DocPrgrsUpdateRequestDto>,
 ): Promise<void> {
@@ -634,7 +610,6 @@ const buttonActionHandlers: Record<FnrsCnsltnViewButtonAction, ActionHandler> =
   strg: handleSaveApply,
   aply: handleSaveApply,
   del: handleDel,
-  splmntCmptn: handleSplmntCmptn,
   fnrsCnsltnAncmnt: handleChangePrgrsSttsComCd,
   envoSbmsn: handleChangePrgrsSttsComCd,
   rjct: handleChangePrgrsSttsComCd,
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-form-page.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-form-page.tsx
index ddcd2074f..76c42f38f 100644
--- a/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-form-page.tsx
+++ b/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-form-page.tsx
@@ -11,6 +11,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useAlertStore, useUserStore } from "@/shared/lib";
 import { useAcntgSeMngTree } from "@/entities/acntg";
 import {
+  type FnrsCnsltnApplySaveRequestDto,
   fnrsCnsltnMngBaseKey,
   type FnrsCnsltnMngDetResponseDto,
   fnrsCnsltnMngService,
@@ -28,6 +29,7 @@ import {
   isFormChecklistComplete,
   PrivacyConsentSection,
   recalculateFnrsSharTotals,
+  SplmntDmndFormSection,
   toFnrsSharSaveList,
   validateBizCstSharBalance,
 } from "@/widgets/pbadms-sprt";
@@ -56,6 +58,7 @@ function FnrsFormPage({ id, mode, initialData, taskSeComCd }: FnrsFormPageProps)
   const alert = useAlertStore((state) => state.setMessage);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const isEditMode = mode === "edit";
+  const isSplmntPrgrsStts = initialData?.detDto?.prgrsSttsComCd === "SL";
 
   const { data: masterSharTree = [] } = useFnrsSharSeMngTree();
   const { data: acntgTree = [] } = useAcntgSeMngTree();
@@ -73,10 +76,10 @@ function FnrsFormPage({ id, mode, initialData, taskSeComCd }: FnrsFormPageProps)
         : getCreateDefaultValues(userInfo, taskSeComCd),
   });
 
-  async function submitForm(
+  function buildFormPayload(
     data: FnrsCnsltnRegistFormData,
-    prgrsSttsComCd: "SV" | "ST",
-  ): Promise<string | undefined> {
+    prgrsSttsComCd: "SV" | "ST" | "TE",
+  ): FnrsCnsltnApplySaveRequestDto | undefined {
     const withTotals = recalculateFnrsSharTotals(data.fnrsSharList, sharItems);
     const validationMessage = validateBizCstSharBalance(
       data.bizCstList,
@@ -86,12 +89,12 @@ function FnrsFormPage({ id, mode, initialData, taskSeComCd }: FnrsFormPageProps)
     );
     if (validationMessage) {
       alert(validationMessage);
-      return;
+      return undefined;
     }
 
     const { taskSeComCd: formTaskSeComCd, ...fnrsCnsltnMngRest } = data.fnrsCnsltnMng;
 
-    const payload = {
+    return {
       fnrsCnsltnMng: {
         ...fnrsCnsltnMngRest,
         taskSeComCd: formatTaskSeComCdForApi(formTaskSeComCd),
@@ -106,11 +109,71 @@ function FnrsFormPage({ id, mode, initialData, taskSeComCd }: FnrsFormPageProps)
         selected: item.selected ?? undefined,
       })),
       esntlAtchFileList: data.esntlAtchFileList,
+      splmntDmndList: data.splmntDmndList.map(
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        ({ splmntAtchFileNm, splmntAtchFileAtflId, splmntDmndAtchFileNm, ...item }) => ({
+          ...item,
+          ...(prgrsSttsComCd === "TE" ? { cmptnYn: "Y" } : null),
+        }),
+      ),
     };
+  }
 
+  async function submitForm(
+    data: FnrsCnsltnRegistFormData,
+    prgrsSttsComCd: "SV" | "ST",
+  ): Promise<string | undefined> {
+    const payload = buildFormPayload(data, prgrsSttsComCd);
+    if (!payload) return undefined;
     return fnrsCnsltnMngService.saveApply(payload);
   }
 
+  async function submitSupplementForm(data: FnrsCnsltnRegistFormData): Promise<string | undefined> {
+    const docNo = initialData?.detDto?.fnrsCnsltnDocNo;
+    if (!docNo) return undefined;
+
+    const payload = buildFormPayload(data, "TE");
+    if (!payload) return undefined;
+
+    return fnrsCnsltnMngService.submitSupplement(docNo, payload);
+  }
+
+  async function onSplmntCmptn(data: FnrsCnsltnRegistFormData) {
+    if (isSubmitting) return;
+
+    const hasEmptySplmntCn = data.splmntDmndList?.some(
+      (item) => !item.splmntCn || !item.splmntCn.trim(),
+    );
+    if (hasEmptySplmntCn) {
+      alert("보완요청내용이 있습니다. 보완완료내용을 입력해 주세요.");
+      return;
+    }
+
+    const docNo = initialData?.detDto?.fnrsCnsltnDocNo;
+    if (!docNo) {
+      alert("문서번호가 없습니다.");
+      return;
+    }
+
+    try {
+      setIsSubmitting(true);
+      const result = await submitSupplementForm(data);
+      if (!result) return;
+
+      alert("보완완료 처리되었습니다.");
+      router.push(`/fnrs-cnsltn/${docNo}`);
+      queryClient.invalidateQueries({ queryKey: fnrsCnsltnMngBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...fnrsCnsltnMngBaseKey, "findById", docNo],
+      });
+    } catch (error) {
+      console.error("보완완료 실패:", error);
+      alert("보완완료 처리 중 오류가 발생했습니다.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
   async function onSave(data: FnrsCnsltnRegistFormData) {
     if (isSubmitting) return;
 
@@ -210,6 +273,7 @@ function FnrsFormPage({ id, mode, initialData, taskSeComCd }: FnrsFormPageProps)
           initialEsntlFiles={isEditMode ? initialData?.esntlFileList : undefined}
           initialEtcFiles={isEditMode ? initialData?.etcFileList : undefined}
         />
+        <SplmntDmndFormSection readOnly={!isSplmntPrgrsStts} />
 
         <div className="sticky bottom-0 z-40 !-mb-2 border-t bg-white pb-8 pt-6 shadow-[0_-4px_12px_rgba(0,0,0,0.06)]">
           <div className="mx-4 flex flex-wrap justify-center gap-3 sm:gap-4">
@@ -221,23 +285,40 @@ function FnrsFormPage({ id, mode, initialData, taskSeComCd }: FnrsFormPageProps)
             >
               목록
             </Button>
-            <Button type="submit" disabled={isSubmitting}>
-              저장
-            </Button>
-            {isEditMode && (
+            {!isSplmntPrgrsStts ? (
               <>
-                <Button
-                  color="green"
-                  type="button"
-                  onClick={handleApplyClick}
-                  disabled={isSubmitting}
-                >
-                  신청완료
-                </Button>
-                <Button color="red" type="button" onClick={handleDelClick} disabled={isSubmitting}>
-                  삭제
+                <Button type="submit" disabled={isSubmitting}>
+                  저장
                 </Button>
+                {isEditMode && (
+                  <>
+                    <Button
+                      color="green"
+                      type="button"
+                      onClick={handleApplyClick}
+                      disabled={isSubmitting}
+                    >
+                      신청완료
+                    </Button>
+                    <Button
+                      color="red"
+                      type="button"
+                      onClick={handleDelClick}
+                      disabled={isSubmitting}
+                    >
+                      삭제
+                    </Button>
+                  </>
+                )}
               </>
+            ) : (
+              <Button
+                type="button"
+                onClick={form.handleSubmit(onSplmntCmptn)}
+                disabled={isSubmitting}
+              >
+                보완완료
+              </Button>
             )}
           </div>
         </div>
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-view-page.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-view-page.tsx
index d4f110f0a..2423e1ead 100644
--- a/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-view-page.tsx
+++ b/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-view-page.tsx
@@ -5,7 +5,7 @@ import { useRef } from "react";
 import { useUserStore } from "@/shared/lib";
 import { ElaprDocPrgrsStatus } from "@/entities/elapr";
 import { useFnrsCnsltnMng } from "@/entities/fnrs-cnsltn";
-import { SectionCollapsible } from "@/widgets/pbadms-sprt";
+import { SectionCollapsible, SupplementDemandSection } from "@/widgets/pbadms-sprt";
 import { Skeleton } from "@common/components";
 
 import { getEditableReviewStep } from "../lib/review-step-utils";
@@ -19,7 +19,6 @@ import { BusinessScaleSection } from "./sections/business-scale-section";
 import { ChecklistSection } from "./sections/checklist-section";
 import { ContactInfoSection } from "./sections/contact-info-section";
 import { FnrsSharSection } from "./sections/fnrs-shar-section";
-import { SupplementDemandSection } from "./sections/supplement-demand-section";
 import {
   TechReviewOpinionSection,
   type TechReviewOpinionSectionHandle,
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/sections/supplement-demand-section.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/sections/supplement-demand-section.tsx
deleted file mode 100644
index 339b803b1..000000000
--- a/apps/as/src/pages/fnrs-cnsltn/ui/sections/supplement-demand-section.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-"use client";
-
-import { dayjs } from "@/shared/lib";
-import type { FnrsCnsltnSplmntDmndResponseDto } from "@/entities/fnrs-cnsltn";
-import { SectionCollapsible } from "@/widgets/pbadms-sprt";
-import {
-  Badge,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@common/components";
-
-interface SupplementDemandSectionProps {
-  splmntDmndList: FnrsCnsltnSplmntDmndResponseDto[];
-}
-
-function SupplementDemandSection({ splmntDmndList }: SupplementDemandSectionProps) {
-  if (splmntDmndList.length === 0) return null;
-
-  return (
-    <SectionCollapsible title="보완요청">
-      <Table variant="secondary">
-        <TableHeader>
-          <TableRow>
-            <TableHead className="w-[8rem]">항목</TableHead>
-            <TableHead>보완요청 내용</TableHead>
-            <TableHead>보완 내용</TableHead>
-            <TableHead className="w-[8rem]">완료여부</TableHead>
-            <TableHead className="w-[12rem]">요청일시</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {splmntDmndList.map((item) => (
-            <TableRow key={item.splmntDmndSn}>
-              <TableCell>{item.splmntArtclCdNm || "-"}</TableCell>
-              <TableCell className="whitespace-pre-wrap">{item.splmntDmndCn || "-"}</TableCell>
-              <TableCell className="whitespace-pre-wrap">{item.splmntCn || "-"}</TableCell>
-              <TableCell>
-                <Badge color={item.cmptnYn === "Y" ? "green" : "gray"}>
-                  {item.cmptnYn === "Y" ? "완료" : "미완료"}
-                </Badge>
-              </TableCell>
-              <TableCell>
-                {item.splmntDmndDt ? dayjs(item.splmntDmndDt).format("YYYY-MM-DD HH:mm") : "-"}
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </SectionCollapsible>
-  );
-}
-
-export { SupplementDemandSection };
diff --git a/apps/as/src/pages/instl-sncn/lib/button-config.ts b/apps/as/src/pages/instl-sncn/lib/button-config.ts
index 28ce89f9e..8dafefd31 100644
--- a/apps/as/src/pages/instl-sncn/lib/button-config.ts
+++ b/apps/as/src/pages/instl-sncn/lib/button-config.ts
@@ -2,7 +2,6 @@ export const INSTL_SNCN_VIEW_BUTTON_ACTION = {
   strg: "strg",
   aply: "aply",
   del: "del",
-  splmntCmptn: "splmntCmptn",
   instlSncnAncmnt: "instlSncnAncmnt",
   envoSbmsn: "envoSbmsn",
   rjct: "rjct",
@@ -32,7 +31,6 @@ const ROLE_STATUS_BUTTON_ACTIONS: Record<string, Record<string, InstlSncnViewBut
       INSTL_SNCN_VIEW_BUTTON_ACTION.aply,
       INSTL_SNCN_VIEW_BUTTON_ACTION.del,
     ],
-    SL: [INSTL_SNCN_VIEW_BUTTON_ACTION.splmntCmptn],
     TA: [INSTL_SNCN_VIEW_BUTTON_ACTION.instlSncnAncmnt],
   },
   ROLE_USER04: {
diff --git a/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx b/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx
index 0f36c1ee6..982921997 100644
--- a/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/components/floating-action-buttons.tsx
@@ -44,7 +44,6 @@ import {
   toSplmntDmndSaveItem,
 } from "../../lib/save-payload-utils";
 import { type ChecklistFormState } from "../../model/view-types";
-import type { SupplementDemandSectionHandle } from "../sections/supplement-demand-section";
 import type { TechReviewOpinionSectionHandle } from "../sections/tech-review-opinion-section";
 
 interface FloatingActionButtonsProps {
@@ -55,7 +54,6 @@ interface FloatingActionButtonsProps {
   dtlInstCd: string | undefined;
   checklistFormState: ChecklistFormState;
   techReviewOpinionRef?: React.RefObject<TechReviewOpinionSectionHandle | null>;
-  supplementDemandRef?: React.RefObject<SupplementDemandSectionHandle | null>;
   opnrNm?: string;
 }
 
@@ -69,7 +67,6 @@ function FloatingActionButtons({
   dtlInstCd,
   checklistFormState,
   techReviewOpinionRef,
-  supplementDemandRef,
   opnrNm,
 }: FloatingActionButtonsProps) {
   const router = useRouter();
@@ -397,9 +394,7 @@ function FloatingActionButtons({
         getReviewOpinionFormData(),
         opnrNm,
       ),
-      splmntDmndList:
-        supplementDemandRef?.current?.getSplmntDmndList() ??
-        (data.splmntDmndList ?? []).map(toSplmntDmndSaveItem),
+      splmntDmndList: (data.splmntDmndList ?? []).map(toSplmntDmndSaveItem),
     };
 
     await executeAction({
@@ -451,16 +446,6 @@ function FloatingActionButtons({
               삭제
             </Button>
           )}
-          {shouldShowButton(INSTL_SNCN_VIEW_BUTTON_ACTION.splmntCmptn) && (
-            <Button
-              onClick={() =>
-                void executeAction({ action: INSTL_SNCN_VIEW_BUTTON_ACTION.splmntCmptn })
-              }
-              disabled={isProcessing}
-            >
-              보완완료
-            </Button>
-          )}
           {shouldShowButton(INSTL_SNCN_VIEW_BUTTON_ACTION.instlSncnAncmnt) && (
             <Button onClick={handleInstlSncnAncmntClick} disabled={isProcessing}>
               설치인가 고시
@@ -575,19 +560,6 @@ async function handleDel(context: ActionHandlerContext): Promise<void> {
   }
 }
 
-async function handleSplmntCmptn(
-  context: ActionHandlerContext<InstlSncnApplySaveRequestDto>,
-): Promise<void> {
-  try {
-    const docNo = context.data.detDto?.instlSncnDocNo;
-    if (!docNo) throw new Error("문서번호가 없습니다.");
-    await instlSncnService.submitSupplement(docNo, context.request);
-    context.onSuccess?.();
-  } catch (error) {
-    context.onError?.(error as Error);
-  }
-}
-
 async function handleChangePrgrsSttsComCd(
   context: ActionHandlerContext<DocPrgrsUpdateRequestDto>,
 ): Promise<void> {
@@ -648,7 +620,6 @@ const buttonActionHandlers: Record<InstlSncnViewButtonAction, ActionHandler> = {
   strg: handleSaveApply,
   aply: handleSaveApply,
   del: handleDel,
-  splmntCmptn: handleSplmntCmptn,
   instlSncnAncmnt: handleChangePrgrsSttsComCd,
   envoSbmsn: handleChangePrgrsSttsComCd,
   rjct: handleChangePrgrsSttsComCd,
diff --git a/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx b/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx
index 2b0e1fe1b..6cfd0f488 100644
--- a/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx
@@ -83,7 +83,10 @@ function InstlFormPage({ id, mode, initialData, taskSeComCd }: InstlFormPageProp
       esntlAtchFileList: data.esntlAtchFileList,
       splmntDmndList: data.splmntDmndList.map(
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        ({ splmntAtchFileNm, splmntAtchFileAtflId, splmntDmndAtchFileNm, ...item }) => item,
+        ({ splmntAtchFileNm, splmntAtchFileAtflId, splmntDmndAtchFileNm, ...item }) => ({
+          ...item,
+          ...(prgrsSttsComCd === "TE" ? { cmptnYn: "Y" } : null),
+        }),
       ),
     };
   }
@@ -104,6 +107,14 @@ function InstlFormPage({ id, mode, initialData, taskSeComCd }: InstlFormPageProp
   async function onSplmntCmptn(data: InstlSncnRegistFormData) {
     if (isSubmitting) return;
 
+    const hasEmptySplmntCn = data.splmntDmndList?.some(
+      (item) => !item.splmntCn || !item.splmntCn.trim(),
+    );
+    if (hasEmptySplmntCn) {
+      alert("보완요청내용이 있습니다. 보완완료내용을 입력해 주세요.");
+      return;
+    }
+
     const docNo = initialData?.detDto.instlSncnDocNo;
     if (!docNo) {
       alert("문서번호가 없습니다.");
diff --git a/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx b/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx
index bee427e3f..c5904ebae 100644
--- a/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/instl-view-page.tsx
@@ -5,7 +5,7 @@ import { useRef } from "react";
 import { useUserStore } from "@/shared/lib";
 import { ElaprDocPrgrsStatus } from "@/entities/elapr";
 import { useInstlSncnDetail } from "@/entities/instl-sncn";
-import { SectionCollapsible } from "@/widgets/pbadms-sprt";
+import { SectionCollapsible, SupplementDemandSection } from "@/widgets/pbadms-sprt";
 import { Skeleton } from "@common/components";
 
 import { getEditableReviewStep } from "../lib/review-step-utils";
@@ -18,10 +18,6 @@ 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 {
-  SupplementDemandSection,
-  type SupplementDemandSectionHandle,
-} from "./sections/supplement-demand-section";
 import {
   TechReviewOpinionSection,
   type TechReviewOpinionSectionHandle,
@@ -34,7 +30,6 @@ interface InstlViewPageProps {
 function InstlViewPage({ id }: InstlViewPageProps) {
   const userInfo = useUserStore((state) => state.userInfo);
   const techReviewOpinionRef = useRef<TechReviewOpinionSectionHandle>(null);
-  const supplementDemandRef = useRef<SupplementDemandSectionHandle>(null);
   const { data, isLoading, isError } = useInstlSncnDetail(id);
   const { formState: checklistFormState, setFormState: setChecklistFormState } =
     useChecklistFormState(data?.cklstResultList ?? EMPTY_CKLST_RESULT_LIST);
@@ -100,11 +95,7 @@ function InstlViewPage({ id }: InstlViewPageProps) {
         rvwList={rvwList}
         editableReviewStep={editableReviewStep}
       />
-      <SupplementDemandSection
-        ref={supplementDemandRef}
-        splmntDmndList={splmntDmndList}
-        canEditCmptnYn={userInfo?.dtlInstCd === "ROLE_USER01"}
-      />
+      <SupplementDemandSection splmntDmndList={splmntDmndList} />
       <FloatingActionButtons
         data={data}
         docSeComCd="INSTL"
@@ -113,7 +104,6 @@ function InstlViewPage({ id }: InstlViewPageProps) {
         dtlInstCd={userInfo?.dtlInstCd}
         checklistFormState={checklistFormState}
         techReviewOpinionRef={techReviewOpinionRef}
-        supplementDemandRef={supplementDemandRef}
         opnrNm={userInfo?.userName}
       />
     </div>
diff --git a/apps/as/src/widgets/pbadms-sprt/index.ts b/apps/as/src/widgets/pbadms-sprt/index.ts
index 550a07dd5..caab6fba0 100644
--- a/apps/as/src/widgets/pbadms-sprt/index.ts
+++ b/apps/as/src/widgets/pbadms-sprt/index.ts
@@ -36,4 +36,5 @@ export {
   type SplmntDmndDialogConfirmPayload,
 } from "./ui/splmnt-dmnd-dialog";
 export { type SplmntDmndFormItem, SplmntDmndFormSection } from "./ui/splmnt-dmnd-form-section";
+export { SupplementDemandSection } from "./ui/supplement-demand-section";
 export { TaskSePickerDialog } from "./ui/task-se-picker-dialog";
diff --git a/apps/as/src/pages/instl-sncn/ui/sections/supplement-demand-section.tsx b/apps/as/src/widgets/pbadms-sprt/ui/supplement-demand-section.tsx
similarity index 53%
rename from apps/as/src/pages/instl-sncn/ui/sections/supplement-demand-section.tsx
rename to apps/as/src/widgets/pbadms-sprt/ui/supplement-demand-section.tsx
index 319c79815..c4637fd4e 100644
--- a/apps/as/src/pages/instl-sncn/ui/sections/supplement-demand-section.tsx
+++ b/apps/as/src/widgets/pbadms-sprt/ui/supplement-demand-section.tsx
@@ -1,181 +1,114 @@
-"use client";
-
-import { forwardRef, useImperativeHandle, useState } from "react";
-
-import { Paperclip } from "lucide-react";
-
-import { dayjs } from "@/shared/lib";
-import { Field, FieldLabel, FieldSet } from "@/shared/ui/field";
-import { useDownloadAttachmentByAtflCd } from "@/entities/attach";
-import type {
-  InstlSncnSplmntDmndResponseDto,
-  InstlSncnSplmntDmndSaveDto,
-} from "@/entities/instl-sncn";
-import { SectionCollapsible } from "@/widgets/pbadms-sprt";
-import {
-  Badge,
-  RadioGroup,
-  RadioGroupItem,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@common/components";
-
-import { toSplmntDmndSaveItem } from "../../lib/save-payload-utils";
-
-interface SupplementDemandSectionProps {
-  splmntDmndList: InstlSncnSplmntDmndResponseDto[];
-  canEditCmptnYn: boolean;
-}
-
-export interface SupplementDemandSectionHandle {
-  getSplmntDmndList: () => InstlSncnSplmntDmndSaveDto[];
-}
-
-const SupplementDemandSection = forwardRef<
-  SupplementDemandSectionHandle,
-  SupplementDemandSectionProps
->(function SupplementDemandSection({ splmntDmndList, canEditCmptnYn }, ref) {
-  const [cmptnYnBySn, setCmptnYnBySn] = useState<Record<number, string>>({});
-  const { mutate: downloadAttachment } = useDownloadAttachmentByAtflCd();
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      getSplmntDmndList: () =>
-        splmntDmndList.map((item) => {
-          const saveItem = toSplmntDmndSaveItem(item);
-          const sn = item.splmntDmndSn;
-          if (sn == null || cmptnYnBySn[sn] == null) return saveItem;
-          return { ...saveItem, cmptnYn: cmptnYnBySn[sn] };
-        }),
-    }),
-    [splmntDmndList, cmptnYnBySn],
-  );
-
-  function getCmptnYn(item: InstlSncnSplmntDmndResponseDto) {
-    const sn = item.splmntDmndSn;
-    if (sn != null && cmptnYnBySn[sn] != null) return cmptnYnBySn[sn];
-    return item.cmptnYn ?? "N";
-  }
-
-  return (
-    <SectionCollapsible title="보완요청 및 완료 현황">
-      <div className="overflow-x-auto">
-        <Table variant="secondary">
-          <colgroup>
-            <col width="14%" />
-            <col width="8%" />
-            <col width="30%" />
-            <col width="8%" />
-            <col width="30%" />
-            <col width="10%" />
-          </colgroup>
-          <TableHeader>
-            <TableRow>
-              <TableHead>보완항목</TableHead>
-              <TableHead>보완요청일시</TableHead>
-              <TableHead>보완요청내용</TableHead>
-              <TableHead>보완완료일시</TableHead>
-              <TableHead>보완완료내용</TableHead>
-              <TableHead>완료여부</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {splmntDmndList.map((item) => {
-              const sn = item.splmntDmndSn;
-              const cmptnYn = getCmptnYn(item);
-              const dmndAtchFileNm = item.splmntDmndAtchFileInfo?.orgnlFileNm;
-              const cmptnAtchFileNm = item.splmntAtchFileInfo?.orgnlFileNm;
-
-              return (
-                <TableRow key={sn ?? `${item.splmntArtclComCd}-${item.splmntDmndDt}`}>
-                  <TableCell align="center" className="align-top">
-                    {item.splmntArtclCdNm || "-"}
-                  </TableCell>
-                  <TableCell align="center" className="whitespace-nowrap align-top">
-                    {item.splmntDmndDt ? dayjs(item.splmntDmndDt).format("YYYY-MM-DD HH:mm") : "-"}
-                  </TableCell>
-                  <TableCell className="align-top">
-                    <div className="space-y-2">
-                      <div className="whitespace-pre-wrap">{item.splmntDmndCn || "-"}</div>
-                      {item.splmntDmndAtchFileGroupId ? (
-                        <a
-                          className="inline-flex cursor-pointer items-start gap-1 text-blue-600 hover:underline"
-                          onClick={() => downloadAttachment(item.splmntDmndAtchFileGroupId!)}
-                        >
-                          <Paperclip className="my-1 size-5 shrink-0" />
-                          {dmndAtchFileNm || "다운로드"}
-                        </a>
-                      ) : null}
-                    </div>
-                  </TableCell>
-                  <TableCell align="center" className="whitespace-nowrap align-top">
-                    {item.splmntCmptnDt
-                      ? dayjs(item.splmntCmptnDt).format("YYYY-MM-DD HH:mm")
-                      : "-"}
-                  </TableCell>
-                  <TableCell className="align-top">
-                    <div className="space-y-2">
-                      <div className="whitespace-pre-wrap">{item.splmntCn || "-"}</div>
-                      {item.splmntAtchFileGroupId ? (
-                        <a
-                          className="inline-flex cursor-pointer items-start gap-1 text-blue-600 hover:underline"
-                          onClick={() => downloadAttachment(item.splmntAtchFileGroupId!)}
-                        >
-                          <Paperclip className="my-1 size-5 shrink-0" />
-                          {cmptnAtchFileNm || "다운로드"}
-                        </a>
-                      ) : null}
-                    </div>
-                  </TableCell>
-                  <TableCell align="center" className="align-top">
-                    {canEditCmptnYn && sn != null ? (
-                      <FieldSet>
-                        <RadioGroup
-                          value={cmptnYn}
-                          onValueChange={(value) =>
-                            setCmptnYnBySn((prev) => ({ ...prev, [sn]: value }))
-                          }
-                          className="flex justify-center gap-4"
-                        >
-                          <FieldLabel
-                            htmlFor={`splmnt-cmptn-y-${sn}`}
-                            className="!w-auto border-none"
-                          >
-                            <Field orientation="horizontal" className="w-auto">
-                              <RadioGroupItem value="Y" id={`splmnt-cmptn-y-${sn}`} />
-                              <span className="font-normal">완료</span>
-                            </Field>
-                          </FieldLabel>
-                          <FieldLabel
-                            htmlFor={`splmnt-cmptn-n-${sn}`}
-                            className="!w-auto border-none"
-                          >
-                            <Field orientation="horizontal" className="w-auto">
-                              <RadioGroupItem value="N" id={`splmnt-cmptn-n-${sn}`} />
-                              <span className="font-normal">미완료</span>
-                            </Field>
-                          </FieldLabel>
-                        </RadioGroup>
-                      </FieldSet>
-                    ) : (
-                      <Badge size="lg" color={cmptnYn === "Y" ? "green" : "gray"}>
-                        {cmptnYn === "Y" ? "완료" : "미완료"}
-                      </Badge>
-                    )}
-                  </TableCell>
-                </TableRow>
-              );
-            })}
-          </TableBody>
-        </Table>
-      </div>
-    </SectionCollapsible>
-  );
-});
-
-export { SupplementDemandSection };
+"use client";
+
+import { Paperclip } from "lucide-react";
+
+import { dayjs } from "@/shared/lib";
+import type { SplmntDmndResponseExtension, SplmntDmndSaveBase } from "@/shared/model";
+import { useDownloadAttachmentByAtflCd } from "@/entities/attach";
+import {
+  Badge,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@common/components";
+
+import { SectionCollapsible } from "./section-collapsible";
+
+type SplmntDmndItem = SplmntDmndSaveBase & SplmntDmndResponseExtension;
+
+interface SupplementDemandSectionProps {
+  splmntDmndList: SplmntDmndItem[];
+}
+
+function SupplementDemandSection({ splmntDmndList }: SupplementDemandSectionProps) {
+  const { mutate: downloadAttachment } = useDownloadAttachmentByAtflCd();
+
+  return (
+    <SectionCollapsible title="보완요청 및 완료 현황">
+      <div className="overflow-x-auto">
+        <Table variant="secondary">
+          <colgroup>
+            <col width="14%" />
+            <col width="8%" />
+            <col width="30%" />
+            <col width="8%" />
+            <col width="30%" />
+            <col width="10%" />
+          </colgroup>
+          <TableHeader>
+            <TableRow>
+              <TableHead>보완항목</TableHead>
+              <TableHead>보완요청일시</TableHead>
+              <TableHead>보완요청내용</TableHead>
+              <TableHead>보완완료일시</TableHead>
+              <TableHead>보완완료내용</TableHead>
+              <TableHead>완료여부</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {splmntDmndList.map((item) => {
+              const sn = item.splmntDmndSn;
+              const cmptnYn = item.cmptnYn ?? "N";
+              const dmndAtchFileNm = item.splmntDmndAtchFileInfo?.orgnlFileNm;
+              const cmptnAtchFileNm = item.splmntAtchFileInfo?.orgnlFileNm;
+
+              return (
+                <TableRow key={sn ?? `${item.splmntArtclComCd}-${item.splmntDmndDt}`}>
+                  <TableCell align="center" className="align-top">
+                    {item.splmntArtclCdNm || "-"}
+                  </TableCell>
+                  <TableCell align="center" className="whitespace-nowrap align-top">
+                    {item.splmntDmndDt ? dayjs(item.splmntDmndDt).format("YYYY-MM-DD HH:mm") : "-"}
+                  </TableCell>
+                  <TableCell className="align-top">
+                    <div className="space-y-2">
+                      <div className="whitespace-pre-wrap">{item.splmntDmndCn || "-"}</div>
+                      {item.splmntDmndAtchFileGroupId ? (
+                        <a
+                          className="inline-flex cursor-pointer items-start gap-1 text-blue-600 hover:underline"
+                          onClick={() => downloadAttachment(item.splmntDmndAtchFileGroupId!)}
+                        >
+                          <Paperclip className="my-1 size-5 shrink-0" />
+                          {dmndAtchFileNm || "다운로드"}
+                        </a>
+                      ) : null}
+                    </div>
+                  </TableCell>
+                  <TableCell align="center" className="whitespace-nowrap align-top">
+                    {item.splmntCmptnDt
+                      ? dayjs(item.splmntCmptnDt).format("YYYY-MM-DD HH:mm")
+                      : "-"}
+                  </TableCell>
+                  <TableCell className="align-top">
+                    <div className="space-y-2">
+                      <div className="whitespace-pre-wrap">{item.splmntCn || "-"}</div>
+                      {item.splmntAtchFileGroupId ? (
+                        <a
+                          className="inline-flex cursor-pointer items-start gap-1 text-blue-600 hover:underline"
+                          onClick={() => downloadAttachment(item.splmntAtchFileGroupId!)}
+                        >
+                          <Paperclip className="my-1 size-5 shrink-0" />
+                          {cmptnAtchFileNm || "다운로드"}
+                        </a>
+                      ) : null}
+                    </div>
+                  </TableCell>
+                  <TableCell align="center" className="align-top">
+                    <Badge size="lg" color={cmptnYn === "Y" ? "green" : "gray"}>
+                      {cmptnYn === "Y" ? "완료" : "미완료"}
+                    </Badge>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+    </SectionCollapsible>
+  );
+}
+
+export { SupplementDemandSection };

From 10d89279bcc6cd4f3b73053e6fdffbac63bab687 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 16 Jul 2026 18:21:37 +0900
Subject: [PATCH 28/32] =?UTF-8?q?[cm]=20refactor:=20auth=20service=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cm/app/api/proxy/[...url]/route.ts       | 39 ++++++++++++++-----
 apps/cm/package.json                          |  1 +
 .../cm/src/entities/auth/lib/auth-wrapper.tsx | 10 +----
 apps/cm/src/entities/auth/lib/device-id.ts    | 20 ++++++++++
 .../pages/auth/login/ui/UserSignupModal.tsx   |  5 ---
 apps/cm/src/shared/config/index.ts            |  1 +
 6 files changed, 54 insertions(+), 22 deletions(-)
 create mode 100644 apps/cm/src/entities/auth/lib/device-id.ts

diff --git a/apps/cm/app/api/proxy/[...url]/route.ts b/apps/cm/app/api/proxy/[...url]/route.ts
index 105b36fa7..c0f646cd2 100644
--- a/apps/cm/app/api/proxy/[...url]/route.ts
+++ b/apps/cm/app/api/proxy/[...url]/route.ts
@@ -19,6 +19,10 @@ async function handler(
     "Content-Type": "application/json",
     "X-Site-Id": SITE_ID,
   };
+  const deviceId = request.headers.get("X-Device-Id");
+  if (deviceId) {
+    headers["X-Device-Id"] = deviceId;
+  }
   let body = {};
   const isRefreshHandler = params.url.includes("refresh");
 
@@ -57,40 +61,57 @@ async function handler(
     });
 
     console.log(`[Proxy] Response status: ${result.status}`);
-    console.log(`[Proxy] Response headers:`, Object.fromEntries(result.headers.entries()));
+    console.log(
+      `[Proxy] Response headers:`,
+      Object.fromEntries(result.headers.entries()),
+    );
 
     // 2FA 관련 엔드포인트인 경우 응답 본문도 확인
-    const is2FAEndpoint = params.url.includes("2fa") || params.url.includes("auth");
+    const is2FAEndpoint =
+      params.url.includes("2fa") || params.url.includes("auth");
     // 배너 API는 인증 없이 호출 가능
     const isBannerEndpoint = params.url.includes("bnrs");
     let responseData = {};
-    
+
     if (is2FAEndpoint || isBannerEndpoint) {
       try {
         responseData = await result.json();
-        console.log(`[Proxy] ${is2FAEndpoint ? '2FA' : 'Banner'} Response data:`, responseData);
+        console.log(
+          `[Proxy] ${is2FAEndpoint ? "2FA" : "Banner"} Response data:`,
+          responseData,
+        );
       } catch {
         // JSON 파싱 실패 시 빈 객체 사용
         console.log(`[Proxy] Failed to parse JSON response`);
       }
     }
 
-    const accessToken = result.headers.get(ACCESS_TOKEN) || result.headers.get('ss-token');
+    const accessToken =
+      result.headers.get(ACCESS_TOKEN) || result.headers.get("ss-token");
     const refreshToken = result.headers.get(REFRESH_TOKEN);
     const userId = result.headers.get(AUTH_USER_ID);
 
-    console.log(`[Proxy] Tokens - accessToken: ${!!accessToken}, userId: ${!!userId}, refreshToken: ${!!refreshToken}`);
-    console.log(`[Proxy] Available headers:`, Array.from(result.headers.keys()));
+    console.log(
+      `[Proxy] Tokens - accessToken: ${!!accessToken}, userId: ${!!userId}, refreshToken: ${!!refreshToken}`,
+    );
+    console.log(
+      `[Proxy] Available headers:`,
+      Array.from(result.headers.keys()),
+    );
 
     // 2FA 또는 배너 엔드포인트이고 실패한 경우 실제 오류 메시지 반환
     if (!result.ok && (is2FAEndpoint || isBannerEndpoint)) {
-      console.log(`[Proxy] ${is2FAEndpoint ? '2FA' : 'Banner'} endpoint failed, returning actual error`);
+      console.log(
+        `[Proxy] ${is2FAEndpoint ? "2FA" : "Banner"} endpoint failed, returning actual error`,
+      );
       return NextResponse.json(responseData, { status: result.status });
     }
 
     // 2FA 또는 배너 엔드포인트이고 성공한 경우 (토큰이 헤더에 없을 수 있음)
     if (result.ok && (is2FAEndpoint || isBannerEndpoint)) {
-      console.log(`[Proxy] ${is2FAEndpoint ? '2FA' : 'Banner'} endpoint succeeded, returning response data`);
+      console.log(
+        `[Proxy] ${is2FAEndpoint ? "2FA" : "Banner"} endpoint succeeded, returning response data`,
+      );
       return NextResponse.json(responseData, { status: result.status });
     }
 
diff --git a/apps/cm/package.json b/apps/cm/package.json
index e9c722d39..64eb7edb4 100644
--- a/apps/cm/package.json
+++ b/apps/cm/package.json
@@ -47,6 +47,7 @@
     "sonner": "^2.0.1",
     "tailwindcss-animate": "^1.0.7",
     "tus-js-client": "^4.3.1",
+    "uuid": "^14.0.1",
     "zod": "^3.24.2",
     "zustand": "^5.0.3"
   },
diff --git a/apps/cm/src/entities/auth/lib/auth-wrapper.tsx b/apps/cm/src/entities/auth/lib/auth-wrapper.tsx
index d1a2a48c3..87f932817 100644
--- a/apps/cm/src/entities/auth/lib/auth-wrapper.tsx
+++ b/apps/cm/src/entities/auth/lib/auth-wrapper.tsx
@@ -18,10 +18,9 @@ import { getRemainingMs } from "@common/auth";
 import { isAtLoginRedirectUrl } from "@common/network";
 
 import { authService } from "../api/auth-service";
-
 import { getToken, setupRefreshTimer } from "./token-manager";
 
-const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
+export function AuthWrapper({ children }: { children: React.ReactNode }) {
   const router = useRouter();
   const userInfo = useUserStore((state) => state.userInfo);
   const setUserInfo = useUserStore((state) => state.setUserInfo);
@@ -31,9 +30,6 @@ const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
     if (token) {
       const remainingMs = getRemainingMs(token);
       if (remainingMs > 0) {
-        console.log(
-          `[AuthWrapper] Refresh timer set: ${remainingMs}ms (${remainingMs / 1000}s)`,
-        );
         setupRefreshTimer(authService.silentRefresh, remainingMs);
       }
     }
@@ -79,6 +75,4 @@ const AuthWrapper = ({ children }: { children: React.ReactNode }) => {
   }, []);
 
   return <>{children}</>;
-};
-
-export { AuthWrapper };
+}
diff --git a/apps/cm/src/entities/auth/lib/device-id.ts b/apps/cm/src/entities/auth/lib/device-id.ts
new file mode 100644
index 000000000..3683c7189
--- /dev/null
+++ b/apps/cm/src/entities/auth/lib/device-id.ts
@@ -0,0 +1,20 @@
+import { v4 as uuidv4 } from "uuid";
+
+const DEVICE_ID_KEY = "x-device-id";
+
+export function getOrCreateDeviceId(): string {
+  if (typeof window === "undefined") return "";
+
+  const existing = localStorage.getItem(DEVICE_ID_KEY);
+  if (existing) return existing;
+
+  const id = uuidv4();
+  localStorage.setItem(DEVICE_ID_KEY, id);
+  return id;
+}
+
+export function clearDeviceId(): void {
+  if (typeof window === "undefined") return;
+
+  localStorage.removeItem(DEVICE_ID_KEY);
+}
diff --git a/apps/cm/src/pages/auth/login/ui/UserSignupModal.tsx b/apps/cm/src/pages/auth/login/ui/UserSignupModal.tsx
index 8faf518f1..e4a542cfa 100644
--- a/apps/cm/src/pages/auth/login/ui/UserSignupModal.tsx
+++ b/apps/cm/src/pages/auth/login/ui/UserSignupModal.tsx
@@ -882,11 +882,6 @@ function UserSignupModal({ open, onClose, onSuccess }: UserSignupModalProps) {
                 type="submit"
                 className="user-signup-submit-button"
                 disabled={isLoading}
-                onClick={(e) => {
-                  e.preventDefault();
-                  console.log("회원가입 버튼 클릭됨 - onClick");
-                  handleSubmit(e);
-                }}
               >
                 {isLoading ? "가입 중..." : "회원가입"}
               </button>
diff --git a/apps/cm/src/shared/config/index.ts b/apps/cm/src/shared/config/index.ts
index cd83447d5..ea6a6f16a 100644
--- a/apps/cm/src/shared/config/index.ts
+++ b/apps/cm/src/shared/config/index.ts
@@ -1,2 +1,3 @@
 export * from "./api";
+export * from "./auth";
 export * from "./env";

From 1a1ff2ec3001ff03aa70dcdad5afca95e99cb00f Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 16 Jul 2026 18:22:58 +0900
Subject: [PATCH 29/32] =?UTF-8?q?[cs]=20feat:=20=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EC=9D=B8=20=EC=8B=9C=20X-Device-Id=20=ED=97=A4=EB=8D=94=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cs/app/api/proxy/[...url]/route.ts       |  9 +++++++--
 apps/cs/package.json                          |  1 +
 apps/cs/src/entities/auth/api/auth-service.ts | 14 +++++++++++--
 apps/cs/src/entities/auth/lib/device-id.ts    | 20 +++++++++++++++++++
 4 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 apps/cs/src/entities/auth/lib/device-id.ts

diff --git a/apps/cs/app/api/proxy/[...url]/route.ts b/apps/cs/app/api/proxy/[...url]/route.ts
index 0929ca57c..4385956d3 100644
--- a/apps/cs/app/api/proxy/[...url]/route.ts
+++ b/apps/cs/app/api/proxy/[...url]/route.ts
@@ -1,3 +1,6 @@
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+
 import {
   ACCESS_TOKEN,
   AUTH_USER_ID,
@@ -7,8 +10,6 @@ import {
   SERVER_API_URL,
   SITE_ID,
 } from "@/shared/config";
-import { cookies } from "next/headers";
-import { NextResponse } from "next/server";
 
 async function handler(
   request: Request,
@@ -20,6 +21,10 @@ async function handler(
     "Content-Type": "application/json",
     "X-Site-Id": SITE_ID,
   };
+  const deviceId = request.headers.get("X-Device-Id");
+  if (deviceId) {
+    headers["X-Device-Id"] = deviceId;
+  }
   let body = {};
   const isRefreshHandler = params.url.includes("refresh");
 
diff --git a/apps/cs/package.json b/apps/cs/package.json
index d362d1178..710032627 100644
--- a/apps/cs/package.json
+++ b/apps/cs/package.json
@@ -45,6 +45,7 @@
     "sonner": "^2.0.1",
     "tailwindcss-animate": "^1.0.7",
     "tus-js-client": "^4.3.1",
+    "uuid": "^14.0.1",
     "zod": "^3.24.2",
     "zustand": "^5.0.3"
   },
diff --git a/apps/cs/src/entities/auth/api/auth-service.ts b/apps/cs/src/entities/auth/api/auth-service.ts
index 3efb1bf85..a8312e46c 100644
--- a/apps/cs/src/entities/auth/api/auth-service.ts
+++ b/apps/cs/src/entities/auth/api/auth-service.ts
@@ -10,6 +10,7 @@ import {
   getRemainingMs,
 } from "@common/auth";
 
+import { clearDeviceId, getOrCreateDeviceId } from "../lib/device-id";
 import {
   clearRefreshTimer,
   removeToken,
@@ -36,7 +37,10 @@ function resolveLoginError(message: string | undefined): string {
 async function login(payload: AuthPayload): Promise<void> {
   const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
     method: "POST",
-    headers: { "Content-Type": "application/json" },
+    headers: {
+      "Content-Type": "application/json",
+      "X-Device-Id": getOrCreateDeviceId(),
+    },
     body: JSON.stringify(payload),
   });
 
@@ -67,7 +71,12 @@ async function silentRefresh(): Promise<void> {
   try {
     const response = await fetch(
       `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
-      { method: "PUT" },
+      {
+        method: "PUT",
+        headers: {
+          "X-Device-Id": getOrCreateDeviceId(),
+        },
+      },
     );
 
     const data = await response.json();
@@ -105,6 +114,7 @@ async function silentRefresh(): Promise<void> {
 
 async function logout(): Promise<void> {
   tokenManager.clearAuthToken();
+  clearDeviceId();
   removeToken("site-id-key");
   removeToken("site-theme-key");
 
diff --git a/apps/cs/src/entities/auth/lib/device-id.ts b/apps/cs/src/entities/auth/lib/device-id.ts
new file mode 100644
index 000000000..3683c7189
--- /dev/null
+++ b/apps/cs/src/entities/auth/lib/device-id.ts
@@ -0,0 +1,20 @@
+import { v4 as uuidv4 } from "uuid";
+
+const DEVICE_ID_KEY = "x-device-id";
+
+export function getOrCreateDeviceId(): string {
+  if (typeof window === "undefined") return "";
+
+  const existing = localStorage.getItem(DEVICE_ID_KEY);
+  if (existing) return existing;
+
+  const id = uuidv4();
+  localStorage.setItem(DEVICE_ID_KEY, id);
+  return id;
+}
+
+export function clearDeviceId(): void {
+  if (typeof window === "undefined") return;
+
+  localStorage.removeItem(DEVICE_ID_KEY);
+}

From ddd72f71d2778f752435370875aa06921ee5983b Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 16 Jul 2026 18:24:39 +0900
Subject: [PATCH 30/32] =?UTF-8?q?[st]=20feat:=20=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EC=9D=B8=20=EC=8B=9C=20X-Device-Id=20=ED=97=A4=EB=8D=94=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/st/app/api/proxy/[...url]/route.ts       |  9 +++++++--
 apps/st/package.json                          |  1 +
 apps/st/src/entities/auth/api/auth-service.ts | 18 +++++++++++------
 apps/st/src/entities/auth/lib/device-id.ts    | 20 +++++++++++++++++++
 4 files changed, 40 insertions(+), 8 deletions(-)
 create mode 100644 apps/st/src/entities/auth/lib/device-id.ts

diff --git a/apps/st/app/api/proxy/[...url]/route.ts b/apps/st/app/api/proxy/[...url]/route.ts
index c9f0d3730..261d6b259 100644
--- a/apps/st/app/api/proxy/[...url]/route.ts
+++ b/apps/st/app/api/proxy/[...url]/route.ts
@@ -1,3 +1,6 @@
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+
 import {
     ACCESS_TOKEN,
     AUTH_USER_ID,
@@ -6,8 +9,6 @@ import {
     SERVER_API_URL,
     SITE_ID,
 } from "@/shared/config";
-import { cookies } from "next/headers";
-import { NextResponse } from "next/server";
 
 async function handler(
     request: Request,
@@ -19,6 +20,10 @@ async function handler(
         "Content-Type": "application/json",
         "X-Site-Id": SITE_ID,
     };
+    const deviceId = request.headers.get("X-Device-Id");
+    if (deviceId) {
+        headers["X-Device-Id"] = deviceId;
+    }
     let body = {};
     const isRefreshHandler = params.url.includes("refresh");
 
diff --git a/apps/st/package.json b/apps/st/package.json
index 7ae6c9f53..08f5bde6b 100644
--- a/apps/st/package.json
+++ b/apps/st/package.json
@@ -57,6 +57,7 @@
         "swr": "^2.3.7",
         "tailwindcss-animate": "^1.0.7",
         "tus-js-client": "^4.3.1",
+        "uuid": "^14.0.1",
         "xlsx": "^0.18.5",
         "zod": "^3.24.2",
         "zustand": "^5.0.3"
diff --git a/apps/st/src/entities/auth/api/auth-service.ts b/apps/st/src/entities/auth/api/auth-service.ts
index 48ead6a84..0c51d6dc3 100644
--- a/apps/st/src/entities/auth/api/auth-service.ts
+++ b/apps/st/src/entities/auth/api/auth-service.ts
@@ -11,9 +11,9 @@ import {
     getRemainingMs,
 } from "@common/auth";
 
+import { clearDeviceId, getOrCreateDeviceId } from "../lib/device-id";
 import {
     clearRefreshTimer,
-    removeToken,
     setToken,
     setupRefreshTimer,
     tokenManager,
@@ -24,7 +24,10 @@ import { clearTabStorePersist } from "@/store/tab-store";
 async function login(payload: AuthPayload): Promise<void> {
     const response = await fetch(`/api/proxy${ENDPOINT.USER_SERVICE.LOGIN}`, {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: {
+            "Content-Type": "application/json",
+            "X-Device-Id": getOrCreateDeviceId(),
+        },
         body: JSON.stringify(payload),
     });
 
@@ -56,7 +59,12 @@ async function silentRefresh(): Promise<void> {
     try {
         const response = await fetch(
             `/api/proxy${ENDPOINT.USER_SERVICE.SILENT_REFRESH}`,
-            { method: "PUT" },
+            {
+                method: "PUT",
+                headers: {
+                    "X-Device-Id": getOrCreateDeviceId(),
+                },
+            },
         );
 
         const data = await response.json();
@@ -93,9 +101,7 @@ async function silentRefresh(): Promise<void> {
 
 export async function logout(): Promise<void> {
     tokenManager.clearAuthToken();
-    removeToken("site-id-key");
-    removeToken("site-theme-key");
-
+    clearDeviceId();
     if (typeof window !== "undefined") {
         window.dispatchEvent(new CustomEvent("auth:logout"));
     }
diff --git a/apps/st/src/entities/auth/lib/device-id.ts b/apps/st/src/entities/auth/lib/device-id.ts
new file mode 100644
index 000000000..a3b1aa800
--- /dev/null
+++ b/apps/st/src/entities/auth/lib/device-id.ts
@@ -0,0 +1,20 @@
+import { v4 as uuidv4 } from "uuid";
+
+const DEVICE_ID_KEY = "x-device-id";
+
+export function getOrCreateDeviceId(): string {
+    if (typeof window === "undefined") return "";
+
+    const existing = localStorage.getItem(DEVICE_ID_KEY);
+    if (existing) return existing;
+
+    const id = uuidv4();
+    localStorage.setItem(DEVICE_ID_KEY, id);
+    return id;
+}
+
+export function clearDeviceId(): void {
+    if (typeof window === "undefined") return;
+
+    localStorage.removeItem(DEVICE_ID_KEY);
+}

From 1dcf01bb0e231919ca248802a2bbe22aed5a6dc4 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 16 Jul 2026 18:26:58 +0900
Subject: [PATCH 31/32] =?UTF-8?q?chore:=20=EC=9D=98=EC=A1=B4=EC=84=B1=20?=
 =?UTF-8?q?=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pnpm-lock.yaml | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a93fa55bb..9997d5e45 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -352,6 +352,9 @@ importers:
       tus-js-client:
         specifier: ^4.3.1
         version: 4.3.1
+      uuid:
+        specifier: ^14.0.1
+        version: 14.0.1
       zod:
         specifier: ^3.24.2
         version: 3.25.76
@@ -636,6 +639,9 @@ importers:
       tus-js-client:
         specifier: ^4.3.1
         version: 4.3.1
+      uuid:
+        specifier: ^14.0.1
+        version: 14.0.1
       zod:
         specifier: ^3.24.2
         version: 3.25.76
@@ -1265,6 +1271,9 @@ importers:
       tus-js-client:
         specifier: ^4.3.1
         version: 4.3.1
+      uuid:
+        specifier: ^14.0.1
+        version: 14.0.1
       xlsx:
         specifier: ^0.18.5
         version: 0.18.5

From 7f53badcf351c3d90bd1b151f06a358cefc0198b Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 16 Jul 2026 18:33:35 +0900
Subject: [PATCH 32/32] =?UTF-8?q?chore:=20auth=20service=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/cm/src/entities/auth/api/auth-service.ts | 5 ++---
 apps/cs/src/entities/auth/api/auth-service.ts | 3 ---
 apps/st/src/entities/auth/api/auth-service.ts | 1 +
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/apps/cm/src/entities/auth/api/auth-service.ts b/apps/cm/src/entities/auth/api/auth-service.ts
index a8fa70622..ddb3dffac 100644
--- a/apps/cm/src/entities/auth/api/auth-service.ts
+++ b/apps/cm/src/entities/auth/api/auth-service.ts
@@ -12,11 +12,11 @@ import {
 
 import {
   clearRefreshTimer,
-  removeToken,
   setToken,
   setupRefreshTimer,
   tokenManager,
 } from "../lib/token-manager";
+import { clearDeviceId } from "../lib/device-id";
 
 function resolveLoginError(message: string | undefined): string {
   switch (message) {
@@ -102,8 +102,7 @@ async function silentRefresh(): Promise<void> {
 
 async function logout(): Promise<void> {
   tokenManager.clearAuthToken();
-  removeToken("site-id-key");
-  removeToken("site-theme-key");
+  clearDeviceId();
 
   if (typeof window !== "undefined") {
     window.dispatchEvent(new CustomEvent("auth:logout"));
diff --git a/apps/cs/src/entities/auth/api/auth-service.ts b/apps/cs/src/entities/auth/api/auth-service.ts
index a8312e46c..cf7281ff9 100644
--- a/apps/cs/src/entities/auth/api/auth-service.ts
+++ b/apps/cs/src/entities/auth/api/auth-service.ts
@@ -13,7 +13,6 @@ import {
 import { clearDeviceId, getOrCreateDeviceId } from "../lib/device-id";
 import {
   clearRefreshTimer,
-  removeToken,
   setToken,
   setupRefreshTimer,
   tokenManager,
@@ -115,8 +114,6 @@ async function silentRefresh(): Promise<void> {
 async function logout(): Promise<void> {
   tokenManager.clearAuthToken();
   clearDeviceId();
-  removeToken("site-id-key");
-  removeToken("site-theme-key");
 
   if (typeof window !== "undefined") {
     window.dispatchEvent(new CustomEvent("auth:logout"));
diff --git a/apps/st/src/entities/auth/api/auth-service.ts b/apps/st/src/entities/auth/api/auth-service.ts
index 0c51d6dc3..198e69c81 100644
--- a/apps/st/src/entities/auth/api/auth-service.ts
+++ b/apps/st/src/entities/auth/api/auth-service.ts
@@ -102,6 +102,7 @@ async function silentRefresh(): Promise<void> {
 export async function logout(): Promise<void> {
     tokenManager.clearAuthToken();
     clearDeviceId();
+
     if (typeof window !== "undefined") {
         window.dispatchEvent(new CustomEvent("auth:logout"));
     }