From b40a974ba3da88965441f8282eb2180502263cc2 Mon Sep 17 00:00:00 2001 From: ljpark Date: Thu, 26 Mar 2026 09:45:36 +0900 Subject: [PATCH] =?UTF-8?q?sn:=20md=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/AGENTS.md | 5 + .../sn/app/html/(with-base-layout)/layout.tsx | 59 ++++++++++++ .../html/06. 노후관로관리_시나리오_v1.0.md | 95 +++++++++++++++++++ apps/sn/app/html/AGENTS.md | 27 ++++++ 4 files changed, 186 insertions(+) create mode 100644 apps/sn/app/html/(with-base-layout)/layout.tsx create mode 100644 apps/sn/app/html/06. 노후관로관리_시나리오_v1.0.md create mode 100644 apps/sn/app/html/AGENTS.md 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 ( + + {children} + + ); +} 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 파일의 요청대로 만들되 상위의 를 건드리지 않고 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 +