diff --git a/apps/sn/AGENTS.md b/apps/sn/AGENTS.md
index 7eefb1676..45f49f296 100644
--- a/apps/sn/AGENTS.md
+++ b/apps/sn/AGENTS.md
@@ -22,6 +22,11 @@ Main technologies:
 ## 주석 comment
 - 한글 주석을 삭제하지 말 것
 
+## html 디렉토리
+- apps/sn/app/html
+- 이 디렉토리의 목적은 코드를 화면 publishing과 로직 설정을 위한 폴더이다.
+- html 하위 *.md 요청 작업시 html 디렉토리 이외의 수정이 되지 않도록 해야 한다.
+
 ## Monorepo structure
 apps/
   _template
diff --git a/apps/sn/app/html/(with-base-layout)/layout.tsx b/apps/sn/app/html/(with-base-layout)/layout.tsx
new file mode 100644
index 000000000..346521d17
--- /dev/null
+++ b/apps/sn/app/html/(with-base-layout)/layout.tsx
@@ -0,0 +1,59 @@
+/**
+ * ➡️ 경로 : I/I분석, 유지관리 정보 모든 페이지
+ * 
+ * 📄 With Base Layout
+ * Next.js App Router (app/) 기반 분석 페이지 기본 레이아웃 컴포넌트
+ *
+ * - 메뉴 클릭 이벤트 처리 및 라우팅
+ * - 현재 메뉴 정보 Zustand를 통한 상태 관리
+ * - 시도/시군구/사업 구분/사업 유형 데이터 초기 로드
+ * - BaseLayout을 통한 공통 레이아웃 적용
+ * - QueryClient를 통한 데이터 캐싱 및 관리
+ * - 경로 변경 시 메뉴 정보 동기화
+ */
+"use client";
+
+import React, { useEffect} from 'react';
+import { usePathname, useRouter } from "next/navigation";
+import { useQueryClient } from "@tanstack/react-query";
+import { BaseLayout } from "@common/components";
+import type { MenuItem } from "@/entities/menu";
+import { useMenuStore } from "@/shared/lib";
+import { PageLayout } from "@/shared/ui/page-layout";
+import useStore from '../store/useStore';
+
+export default function WithBaseLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const queryClient = useQueryClient();
+
+  const setCurrentMenuInfo = useMenuStore((state) => state.setCurrentMenuInfo);
+
+  const { fetchCtpv, fetchSgg, fetchBIZ_SE_CD, fetchBIZ_TY_CD } = useStore();
+
+  useEffect(() => {
+    fetchCtpv();
+    fetchSgg();
+    fetchBIZ_SE_CD();
+    fetchBIZ_TY_CD();
+  }, []);
+
+  const handleMenuClick = (item: MenuItem) => {
+    setCurrentMenuInfo(item);
+    router.push(item.urlPath);
+  };
+
+  return (
+    <BaseLayout
+      queryClient={queryClient}
+      currentPath={pathname ?? ""}
+      handleMenuClick={handleMenuClick}
+    >
+      <PageLayout>{children}</PageLayout>
+    </BaseLayout>
+  );
+}
diff --git a/apps/sn/app/html/06. 노후관로관리_시나리오_v1.0.md b/apps/sn/app/html/06. 노후관로관리_시나리오_v1.0.md
new file mode 100644
index 000000000..968fdc849
--- /dev/null
+++ b/apps/sn/app/html/06. 노후관로관리_시나리오_v1.0.md	
@@ -0,0 +1,95 @@
+# 노후관로 관리
+
+---
+
+## 화면구성
+### GIS 기본화면
+- 좌측 상단 (시설물 레이어 트리 및 목록 아이콘): 시설, 침수위험지도, 지반침하정보(우측에 목록 아이콘), 노후관로(우측에 목록 아이콘)
+- 좌측 하단 (레이어별 설정 항목 및 적용 버튼): 경과년도(년) [ 디폴트 30년 ]
+- 우측 영역(배경 지도 및 시설레이어 표출): 하수관로 중 경과년도가 30년 이상된 관로들을 시각적으로 강조 표시
+
+### 관로정보 상세화면
+- GIS 화면에서 관로 위치 클릭시 우측 정렬로 세로형 영역으로 관로정보 상세화면 팝업
+- 1차년도에서 개발한 관로정보 표출 : 시설관리번호, 기관관리번호, 설치일자, 도엽번호 등 전체 항목 그대로 표출
+
+### 노후관로정보 목록화면
+- GIS 기본화면 좌측 상단의 레이어 트리에서 노후관로 목록 아이콘 클릭시 윈도우 팝업으로 가운데 영역으로 노후관로정보 목록화면 팝업
+- 상단 조회조건( 조회조건 영역 ) : 경과년도, 시도, 시군구, 버튼 2개 (조회, 다운로드)
+- 하단 가로형 그리드 (노후관로 현황) : NO, 시설관리번호, 설치일자, 관경(mm), 연장(m), 용도, 재질, 경과년도
+
+---
+
+## 화면동작
+
+### 초기화 및 기본 설정
+
+```구조적표기
+// 화면 로드 시 초기 데이터 및 환경 설정
+ON_LOAD:
+  CALL GIS_지도_레이어_초기화()
+  SET 기본_경과년도 = 20  // 회의록(260311) 반영 디폴트 설정
+  SET 현재_조회_조건 = { "경과년도": 20, "관종": "전체" }
+  
+  // 초기 데이터 로드
+  CALL 노후관로_데이터_조회(현재_조회_조건)
+  CALL 지도_상_노후관로_표출(조회결과)
+```
+
+### 좌측 사이드바 제어 (분석 설정)
+
+```구조적표기
+// 노후관로 조회 조건 변경 및 적용
+IF 노후관로_조회_버튼.CLICK THEN
+  SET 입력_경과년도 = 사이드바.경과년도_INPUT.Value
+  SET 선택_관종 = 사이드바.관종_SELECT.Value
+  
+  // 공간 및 속성 필터링 실행
+  CALL 노후관로_필터링_프로세스(입력_경과년도, 선택_관종)
+  REFRESH_GIS_LAYER(노후관로_레이어)
+  SHOW MESSAGE "설정된 조건으로 노후관로가 필터링되었습니다."
+END IF
+
+// 목록 아이콘 클릭 (모달 호출)
+IF 레이어트리.노후관로_목록아이콘.CLICK THEN
+  DISPLAY 노후관로_목록_모달 = TRUE
+  CALL 노후관로_목록_그리드_로드()
+END IF
+```
+
+#### 노후관로 상세화면 (우측 패널)
+
+```구조적표기
+// 지도 상의 특정 관로 클릭 시
+IF GIS.노후관로_객체.CLICK THEN
+  SET 선택관로_ID = 클릭객체.ID
+  
+  // 상세 속성 정보 조회 및 매핑
+  CALL 관로_상세속성_API_호출(선택관로_ID)
+  SET 우측패널.기본정보 = [관로ID, 시설명, 주소, 관리기관]
+  SET 우측패널.제원정보 = [관경, 연장, 관종, 준공일자, 경과년도]
+  SET 우측패널.상태정보 = [최종조사일, 조사결과등급]
+  
+  DISPLAY 우측_상세_패널 = TRUE
+END IF
+```
+
+#### 노후관로 목록 및 데이터 출력 (모달 윈도우)
+```구조적표기
+// 엑셀 다운로드 (회의록 요구사항 반영)
+IF 모달.다운로드_버튼.CLICK THEN
+  // 엑셀 파일에는 관로의 '모든 기본정보'를 포함
+  SET 다운로드_컬럼 = [관로ID, 주소, 관경, 연장, 관종, 준공일, 경과년도, ...전체필드]
+  CALL 시스템_엑셀_추출_모듈(현재_조회_데이터, 다운로드_컬럼)
+END IF
+
+// 목록 그리드 행 선택 시 로직
+IF 모달.그리드_행.DOUBLE_CLICK THEN
+  SET 좌표 = 현재행.중심좌표
+  CALL GIS_지도_줌인(좌표)
+  CALL 노후관로_상세정보_표출(현재행.ID)
+  CLOSE_MODAL(노후관로_목록_모달)
+END IF
+```
+
+
+
diff --git a/apps/sn/app/html/AGENTS.md b/apps/sn/app/html/AGENTS.md
new file mode 100644
index 000000000..f1c03522e
--- /dev/null
+++ b/apps/sn/app/html/AGENTS.md
@@ -0,0 +1,27 @@
+## html 디렉토리
+- 이 디렉토리의 목적은 코드를 화면 publishing과 로직 설정을 위한 폴더이다.
+- 작업시 html 디렉토리 이외의 수정이 되지 않도록 해야 한다.
+- 추가 *.md 파일의 요청대로 만들되 상위의 <Gis>를 건드리지 않고 apps\sn\app\html 에 추가파일을 만들어서 처리한다.
+- 기존의 package/common/component 와 package/common/business_component를 잘 활용한다.
+
+## Encoding 
+- UTF-8 
+- 한글이 깨지지 않도록 주의할 것
+
+## 주석 comment
+- 한글 주석을 삭제하지 말 것
+
+## Monorepo structure
+apps/
+  _template
+  as
+  cm
+  cs
+  dc
+  dm
+  dm_new
+  fo
+  sn
+  st
+  wr
+