빈 레이어 트리로 지도만 재사용하는 화면에서는 패널 외곽과 제목도 표시하지 않는다.
This commit is contained in:
+14
-12
@@ -686,14 +686,15 @@ const DredgingDetailPopupPage = ({
|
||||
{index + 1}
|
||||
</span>
|
||||
<span className="flex min-w-0 flex-1 items-center gap-2">
|
||||
{/* 파일명 밑줄과 글자 하단이 잘리지 않도록 글자 크기보다 넉넉한 줄 높이를 사용한다. */}
|
||||
<strong
|
||||
className="min-w-0 flex-1 truncate text-sm"
|
||||
className="min-w-0 flex-1 truncate !text-[1.2rem] !font-medium !leading-[1.8rem]"
|
||||
title={photo.originalFileName}
|
||||
>
|
||||
{photo.originalFileName ||
|
||||
`준설사진 ${index + 1}`}
|
||||
</strong>
|
||||
<span className="shrink-0 whitespace-nowrap text-sm text-muted-foreground">
|
||||
<span className="shrink-0 whitespace-nowrap !text-[1.2rem] !leading-[1.8rem] text-muted-foreground">
|
||||
{formatDredgingCapturedDate(photo.capturedAt) ??
|
||||
"촬영일시 없음"}
|
||||
</span>
|
||||
@@ -736,12 +737,12 @@ const DredgingDetailPopupPage = ({
|
||||
</span>
|
||||
<span className="flex min-w-0 flex-1 items-center gap-2">
|
||||
<strong
|
||||
className="min-w-0 flex-1 truncate text-sm"
|
||||
className="min-w-0 flex-1 truncate !text-[1.2rem] !font-medium !leading-[1.8rem]"
|
||||
title={photo.file.name}
|
||||
>
|
||||
신규 · {photo.file.name}
|
||||
</strong>
|
||||
<span className="shrink-0 whitespace-nowrap text-sm text-muted-foreground">
|
||||
<span className="shrink-0 whitespace-nowrap !text-[1.2rem] !leading-[1.8rem] text-muted-foreground">
|
||||
{formatDredgingCapturedDate(
|
||||
photo.metadata.capturedAt,
|
||||
) ?? "촬영일시 없음"}
|
||||
@@ -824,7 +825,7 @@ const DredgingDetailPopupPage = ({
|
||||
|
||||
{editable ? (
|
||||
<section className="card card-border !m-0 shrink-0 overflow-hidden !p-0">
|
||||
<div className="card-header !m-0 flex-wrap gap-2">
|
||||
<div className="card-header !m-0 flex-wrap gap-x-2 gap-y-1 !border-b-0">
|
||||
<div className="min-w-0">
|
||||
<h2 className="text-2xl font-medium text-label">
|
||||
위치 및 관로
|
||||
@@ -866,13 +867,14 @@ const DredgingDetailPopupPage = ({
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="bg-secondary/30 h-[5.2rem] overflow-y-auto px-4 py-2 text-sm text-muted-foreground"
|
||||
data-testid="dredging-edit-status"
|
||||
>
|
||||
{statusMessage ||
|
||||
"준설일자·사진·위치와 자동 연결 관로를 확인해주세요."}
|
||||
{/* 안내와 처리 상태는 위치·관로 카드의 마지막 줄에서 함께 확인한다. */}
|
||||
<p
|
||||
className="m-0 min-w-0 basis-full break-words text-sm leading-5 text-muted-foreground"
|
||||
data-testid="dredging-edit-status"
|
||||
>
|
||||
{statusMessage ||
|
||||
"준설일자·사진·위치와 자동 연결 관로를 확인해주세요."}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
@@ -77,3 +77,26 @@
|
||||
- 두 카드 사이 간격이 `6px`인지 확인한다.
|
||||
- 패널 바깥 배경이 `#E5E5E5`인지 확인한다.
|
||||
- 레이어 체크, 펼침/접힘, 설정 카드 입력과 스크롤이 기존과 동일하게 동작하는지 확인한다.
|
||||
|
||||
## 2026-09-09 회귀 보정
|
||||
|
||||
### 발생 원인과 원본 대조
|
||||
|
||||
- 2026-09-07 커밋 `7e82c6a80`에서 섹션형 레이어 패널 UI를 적용하는 과정에 `treeData`가 비어 있으면 렌더링을 종료하던 가드가 누락됐다.
|
||||
- 준설 등록과 수정 화면은 위치 선택용으로 공통 `Gis`를 재사용하면서 `treeData={[]}`를 전달하므로, 누락 이후 내용 없는 `시설물` 패널이 지도 왼쪽에 노출됐다.
|
||||
- 요구사항정의서 `3. (기능)요구사항정의 및 추적표`의 `SFR-010-012`는 준설정보 입력·지도 표출, `SFR-010-013`은 준설 등록·수정·삭제·조회를 요구한다. 빈 시설물 패널 표시는 요구하지 않는다.
|
||||
- 화면설계서 슬라이드 54 `SN_MN040201 준설 결과 위치 등록`에도 위치 검색·준설 위치 등록·준설일자 선택·저장 흐름만 있으며 시설물 패널은 없다.
|
||||
|
||||
### 보정 내용
|
||||
|
||||
- `GisTree.js`에서 `treeData`가 없거나 빈 배열이면 조기 반환하도록 가드를 복원했다.
|
||||
- 준설 등록·수정처럼 빈 트리를 사용하는 지도에서는 패널 외곽과 `시설물` 제목을 표시하지 않는다.
|
||||
- 실제 레이어 트리를 전달하는 메인 하수관망도는 기존 `레이어 관리`·`선택 레이어 설정` 섹션형 UI를 그대로 유지한다.
|
||||
- API와 DB 계약에는 영향이 없다.
|
||||
|
||||
### 검증 결과·계획과 롤백
|
||||
|
||||
- `pnpm --filter @common/business_components run build`는 2026-09-09 통과했다.
|
||||
- 준설 등록·수정 지도에서 빈 `시설물` 패널이 사라지고 위치 선택·관로 자동 연결이 유지되는지 브라우저로 확인한다.
|
||||
- 메인 하수관망도에서 비어 있지 않은 트리의 레이어 체크, 펼침·접힘과 두 섹션형 패널이 그대로 동작하는지 회귀 확인한다.
|
||||
- 롤백이 필요하면 `GisTree.js`에 추가한 빈 트리 조기 반환 가드만 제거한다. 단, 제거 시 준설 지도에 빈 패널이 다시 노출된다.
|
||||
|
||||
@@ -383,3 +383,20 @@
|
||||
- CMS에 없는 기존 `UNSUPPORTED` 상태는 `수동 입력 필요` fallback을 유지한다.
|
||||
- CMS 조회 실패 시 기존 화면 문구를 fallback으로 사용한다.
|
||||
- 백엔드 API, 준설 저장 payload와 DB 구조는 변경하지 않았다.
|
||||
|
||||
## 2026-09-09 수정 화면 안내 문구 통합
|
||||
|
||||
- 사용자 요청에 따라 수정 화면의 상태 안내를 `위치 및 관로` 카드 안 마지막 줄로 이동했다. 별도 구분선·배경과 52px 고정 높이를 제거하고 긴 문구는 줄바꿈하도록 했다.
|
||||
- 등록 화면은 현재 구성을 유지한다. 기존 안내 문구, 상태 메시지와 위치 수정·사진·저장 처리에는 변경이 없다.
|
||||
- 추적 근거: 요구사항정의서 `3. (기능)요구사항정의 및 추적표` 84~85행 `SFR-010-012/013`, 화면설계서 54번 `SN_MN040201`. 안내 배치 변경은 사용자 지시에 따른 UI 보완이다.
|
||||
- 로컬 3002 개발 서버의 HMR로 실제 수정 화면을 확인했다. 카드 높이는 110px에서 72px로 줄었고 위치 수정 진입·취소 후 안내와 버튼이 정상 표시됐다. 저장·업로드는 실행하지 않았다.
|
||||
- 긴 상태 메시지의 실제 오류·저장 시나리오는 미실행이며 줄바꿈 가능한 마크업을 확인했다. 개발 서버는 사용자 실행 상태를 유지하고 빌드는 실행하지 않았다.
|
||||
- 롤백은 `DredgingDetailPopupPage.tsx`의 안내 문단을 카드 헤더 밖 기존 고정 높이 영역으로 되돌리면 된다. API·DB 영향은 없다.
|
||||
|
||||
## 2026-09-09 사진 파일명 글자 잘림 보정
|
||||
|
||||
- 수정 화면에서 파일명 글자 크기는 13px인데 줄 높이가 12.5px여서 `truncate`의 숨김 영역에 밑줄과 글자 하단이 잘렸다.
|
||||
- 기존·신규 사진 파일명을 12px, 굵기 500, 줄 높이 18px로 통일하고 촬영일자도 12px/18px로 맞췄다. 긴 파일명의 말줄임과 전체 이름을 보여주는 `title`은 유지한다.
|
||||
- 기존 `SFR-010-012/013` 사진 확인 흐름에서 사용자 요청에 따른 표시 보완이다. 등록 화면, API·DB와 업로드·저장 처리는 변경하지 않았다.
|
||||
- 로컬 HMR 후 실제 사진 4건의 12px/18px/500 적용, 가로 잘림 없음과 밑줄 표시를 확인했다. 사진 선택·미리보기 전환 후 기존 선택으로 복원했다. 신규 사진 업로드는 실행하지 않았다.
|
||||
- `git diff --check` 통과. 롤백은 파일명·촬영일자의 글자 클래스만 기존 값으로 되돌린다.
|
||||
|
||||
@@ -588,6 +588,9 @@ export default React.memo(function GisTree({
|
||||
// 렌더링
|
||||
// =====================
|
||||
|
||||
// 빈 레이어 트리로 지도만 재사용하는 화면에서는 패널 외곽과 제목도 표시하지 않는다.
|
||||
if (!treeData || treeData.length === 0) return null;
|
||||
|
||||
const toggleButtonPositionClass =
|
||||
toggleButtonPosition === "top" ? "top-4" : "top-1/2 -translate-y-1/2";
|
||||
const thinScrollbarClass =
|
||||
|
||||
Reference in New Issue
Block a user