From 7e82c6a8025b2f210bad26e8fcc5d8dbb4f61d1f Mon Sep 17 00:00:00 2001 From: LEEKYUHYUN Date: Mon, 7 Sep 2026 17:44:46 +0900 Subject: [PATCH] =?UTF-8?q?"=EB=94=94=EC=A7=80=ED=84=B8=ED=95=98=EC=88=98?= =?UTF-8?q?=EA=B4=80=EB=A1=9C"=20UI=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/.env.local | 4 +- apps/sn/AGENTS.md | 33 ++++ .../agedPipe/AgedPipeLayerSettingPanel.tsx | 19 +- .../analysisMenu/AnalysisPopupMenu.tsx | 80 +++++---- .../components/exmn/ExmnLayerSettingPanel.tsx | 10 +- .../FldngHstryLayerSettingPanel.tsx | 50 ++---- .../map/components/gisEdit/GisEditToolbar.tsx | 2 +- .../layerSetting/LayerSettingCard.tsx | 16 +- .../sinkhole/SinkholeLayerSettingPanel.tsx | 34 ++-- apps/sn/app/(map-layout)/map/page.tsx | 68 +++++-- .../001-fe-FE-MAP-레이어패널헤더-구현기록.md | 79 +++++++++ .../business_components/src/ui/map/Gis.js | 17 +- .../src/ui/map/GisMapToggle.js | 89 +++++++--- .../src/ui/map/GisToolBar.js | 167 +++++++++++------- .../business_components/src/ui/map/GisTree.js | 141 ++++++++++----- .../src/ui/map/lib/css/gis.common.css | 56 +++++- .../src/ui/map/searchBar/procSearchBar.tsx | 72 ++++++++ 17 files changed, 660 insertions(+), 277 deletions(-) create mode 100644 apps/sn/docs/작업내용/FE-MAP-레이어패널헤더/001-fe-FE-MAP-레이어패널헤더-구현기록.md diff --git a/apps/sn/.env.local b/apps/sn/.env.local index dce96bf40..3d871b007 100644 --- a/apps/sn/.env.local +++ b/apps/sn/.env.local @@ -12,8 +12,8 @@ NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={x}&tilerow={y} SERVER_API_URL = http://dev.onasys.co.kr:8000 -SEWERAGE_API_URL = http://localhost:8883 -# SEWERAGE_API_URL = http://con.mind-one.co.kr:11083 +# SEWERAGE_API_URL = http://localhost:8883 +SEWERAGE_API_URL = http://con.mind-one.co.kr:11083 DC_URL = https://apigateway.apps.rsonesoft.com # NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login NEXT_PUBLIC_CM_LOGIN_PAGE_URL = /auth/login diff --git a/apps/sn/AGENTS.md b/apps/sn/AGENTS.md index 3c369a72d..037aa402a 100644 --- a/apps/sn/AGENTS.md +++ b/apps/sn/AGENTS.md @@ -6,6 +6,39 @@ 현재 목표는 리팩토링 전용 작업이 아니라, 하수관로 운영관리 시스템 2차사업 고도화를 수행하는 것이다. 즉, 기존 `sn` 화면과 흐름을 안정적으로 유지하면서 2차 요구사항에 해당하는 화면 개발, 기능 확장, 백엔드 연동 보완을 수행해야 한다. +## 사용자 작업 범위: UI/UX 및 퍼블리싱 + +현재 사용자와 진행하는 작업의 기본 범위는 UI/UX 및 프론트엔드 퍼블리싱으로 제한한다. +사용자가 별도로 명시하지 않는 한 아래 기준을 모든 후속 작업에 적용한다. + +### 허용 범위 + +- 화면 레이아웃과 시각적 위계 조정 +- JSX 마크업, Tailwind CSS, CSS 스타일 수정 +- 색상, 여백, 간격, 크기, 타이포그래피, 아이콘, 테두리, 배경 조정 +- 반응형 화면, 접근성, 포커스와 시각적 상태 개선 +- 표시 전용 컴포넌트 구성과 퍼블리싱 품질 개선 +- 기존 화면 내용과 동작을 유지하는 범위의 UI 구조 정리 + +### 기본 금지 범위 + +- 백엔드 코드, API 계약, 요청·응답 데이터 구조 변경 +- `.env*`, middleware, 프록시, 인증과 권한 설정 변경 +- 업무 로직, 상태 모델, 데이터 가공 및 저장 흐름 변경 +- 데이터베이스, 서버 프로세스와 배포 설정 변경 +- 패키지 설치·업데이트와 의존성 구조 변경 +- 사용자 요청 없이 화면의 문구, 데이터 항목, 기능 동작 변경 + +금지 범위의 변경이 필요해 보이면 직접 수정하지 않고 원인과 필요한 작업만 사용자에게 설명한다. + +### UI 검증 안전 기준 + +- 사용자가 실행한 개발 서버가 있는지 실제 앱 포트까지 먼저 확인한다. +- 개발 서버 실행 중에는 같은 앱의 `next build`를 실행하지 않는다. +- UI 작업의 기본 검증은 실행 중인 개발 서버의 HMR, 브라우저 화면 확인, `git diff --check`로 제한한다. +- 개발 서버 종료, `.next` 정리, 전체 빌드와 프로세스 재시작은 사용자가 명시적으로 승인한 경우에만 수행한다. +- UI 변경 전후에 기존 문구, 데이터, 이벤트와 업무 동작이 유지되는지 확인한다. + --- ## 공통 시작 기준 diff --git a/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipeLayerSettingPanel.tsx b/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipeLayerSettingPanel.tsx index 9dda96f8f..94edaeaef 100644 --- a/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipeLayerSettingPanel.tsx +++ b/apps/sn/app/(map-layout)/map/components/agedPipe/AgedPipeLayerSettingPanel.tsx @@ -54,23 +54,18 @@ export default function AgedPipeLayerSettingPanel({ }; const inputClass = - "h-[20px] !rounded border border-input bg-background px-[1px] text-center text-[1.1rem] leading-none text-foreground"; - const numberInputClass = inputClass + " w-[40px]"; + "h-[26px] !rounded border border-input bg-background px-2 py-0 text-center text-[12px] leading-none text-foreground"; + const numberInputClass = inputClass + " min-w-0 flex-1"; const applyButtonClass = - "grid h-[16px] w-[16px] shrink-0 place-items-center rounded-full bg-primary text-[0.85rem] font-bold leading-none text-primary-foreground"; - const indicator = ( - - ); - + "h-[26px] shrink-0 rounded border border-[#A9C5E5] bg-[#EDF4FC] px-2 py-0 text-[12px] font-medium leading-none text-[#2463A6]"; const settingRow = ( -
-
- {indicator} +
+
-
+
- ✓ + 확인
diff --git a/apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx b/apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx index fa6aa96c3..3a11a4f99 100644 --- a/apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx +++ b/apps/sn/app/(map-layout)/map/components/analysisMenu/AnalysisPopupMenu.tsx @@ -3,7 +3,6 @@ import { useEffect, useState, type ComponentType, type ReactNode } from "react"; import { ChartColumnBig, - ChevronDown, ChevronUp, PanelsTopLeft, PencilRuler, @@ -32,10 +31,10 @@ type MenuIconProps = { isActive: boolean; }; -const InftwtMenuIcon = ({ isActive }: MenuIconProps) => ( +const InftwtMenuIcon = () => (
-
-
-
- - 분석도구 +
+ + + {isOpen ? ( +
+
+
+ + 분석도구 +
+
- -
- - {isOpen ? (
{ANALYSIS_POPUP_ITEMS.map((item) => { const Icon = item.icon; @@ -208,7 +220,7 @@ export default function AnalysisPopupMenu({ ); })}
- ) : null} -
+
+ ) : null}
); } diff --git a/apps/sn/app/(map-layout)/map/components/exmn/ExmnLayerSettingPanel.tsx b/apps/sn/app/(map-layout)/map/components/exmn/ExmnLayerSettingPanel.tsx index a8e0a020f..42131793e 100644 --- a/apps/sn/app/(map-layout)/map/components/exmn/ExmnLayerSettingPanel.tsx +++ b/apps/sn/app/(map-layout)/map/components/exmn/ExmnLayerSettingPanel.tsx @@ -30,7 +30,7 @@ export default function ExmnLayerSettingPanel({ }); }; const selectClass = - "h-[20px] w-[62px] rounded border border-input bg-background px-[1px] text-center text-[1.1rem] leading-none text-foreground outline-none focus:border-primary"; + "h-[26px] w-full rounded border border-input bg-background px-2 py-0 text-center text-[12px] leading-none text-foreground outline-none focus:border-primary"; const labelClass = "shrink-0 text-[1.15rem] font-medium text-label"; const title = jobType === "PPL" ? "관로조사" : "맨홀조사"; @@ -41,8 +41,8 @@ export default function ExmnLayerSettingPanel({ onEnabledChange={onEnabledChange} onClose={onClose} > -
-