sn: md 추가
This commit is contained in:
@@ -22,6 +22,11 @@ Main technologies:
|
||||
## 주석 comment
|
||||
- 한글 주석을 삭제하지 말 것
|
||||
|
||||
## html 디렉토리
|
||||
- apps/sn/app/html
|
||||
- 이 디렉토리의 목적은 코드를 화면 publishing과 로직 설정을 위한 폴더이다.
|
||||
- html 하위 *.md 요청 작업시 html 디렉토리 이외의 수정이 되지 않도록 해야 한다.
|
||||
|
||||
## Monorepo structure
|
||||
apps/
|
||||
_template
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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
|
||||
```
|
||||
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user