--- status: stale page_id: B08_DesignDetail related_pages: ["[[B08_DesignDetail/B08_backend]]", "[[B08_DesignDetail/B08_api]]", "[[B08_DesignDetail/B08_dependencies]]", "[[B08_DesignDetail/B08_CAD_blocks]]", "[[B08_DesignDetail/B08_CAD_interaction]]", "[[B08_DesignDetail/B08_CAD_usability_2026-09-01]]", "[[B08_DesignDetail/B08_CAD_table_entity]]", "[[B08_DesignDetail/B08_cross_structure_sheets]]", "[[db_schema/structure_output]]", "[[storage_paths]]", "[[architecture/project_map]]", "[[architecture/workflow_data_flow]]"] last_updated: 2026-09-09 source: ["docs/raw/verification/2026-07-19_verify_B07_DesignDetail.md", "docs/raw/verification/2026-07-19_verify_CrossPruning_and_CADStyle.md", "docs/raw/verification/2026-07-20_verify_B07_상세설계개선.md", "docs/raw/verification/2026-07-21_verify_B06_ground_section_type_B07_linkage.md", "docs/raw/verification/2026-07-21_verify_B06_default_design_B07_gating.md", "docs/raw/verification/2026-07-22_verify_B06_B07.md", "docs/raw/verification/2026-07-25_verify_n2_n3_n4.md", "docs/raw/verification/2026-07-25_verify_b07_design_detail.md", "docs/raw/verification/2026-07-26_verify_B07_도면_템플릿_및_도각_적용.md", "docs/raw/verification/2026-07-26_verify_openwebcad_성능개선.md"] --- # B08_DesignDetail — Frontend > 2026-09 책임 재배치 전 역사 기록이다. 현재 상세설계는 [[B07_DesignDetail/B07_frontend]], B08은 [[B08_Quantity/B08_overview_2026_09]]를 기준으로 한다. WF4 상세 설계(구조물 배치). **독립형 2D CAD iframe, 명령 레지스트리·AutoCAD형 리본, 수량표·측점표, 종단도 분할, 토적도·유역도, 횡단도 완료 게이팅 및 A1 도각 병합.** ## 파일 구조 | 파일 | 위치 | 역할 | |---|---|---| | `B08_DesignDetail_UI_Page.ts` | `B08_DesignDetail_UI_Page.ts` | 3단 셸 레이아웃, **[N-1-1] 30측점 분할 `종단도 (N)` 동적 버튼 생성**, **[N-1-0] design 신구조 `ditchLabel()` 렌더링**, 2분할 패널, postMessage 통신 | | `B08_DesignDetail_Api_Fetch.ts` | `B08_DesignDetail_Api_Fetch.ts` | **[N-1-0] `DitchSpec` 유니언 신구조 타입 갱신**, REST API 클라이언트 | | `B08_DesignDetail_UI_Style.css` | `B08_DesignDetail_UI_Style.css` | iframe 화면 배치 및 횡단 2열 버튼 스타일/색상 연동 (`.b07-cad-frame`) | | `openwebcad` | `B08_DesignDetail/openwebcad` | HTML Canvas 기반 독립 2D CAD SPA (더블클릭 텍스트 편집 및 CAD 수량표 엔티티 복원) | 명령은 [[B08_DesignDetail/B08_CAD_commands]], 블록·조작·표는 [[B08_DesignDetail/B08_CAD_blocks]], [[B08_DesignDetail/B08_CAD_interaction]], [[B08_DesignDetail/B08_CAD_table_entity]], 횡단 장은 [[B08_DesignDetail/B08_cross_structure_sheets]], 납품 도면은 [[B08_DesignDetail/B08_drawing_masshaul_watershed]]를 참조한다. 2026-09-01 편집 손실 방지·확정 잠금·도면별 복구 등은 [[B08_DesignDetail/B08_CAD_usability_2026-09-01]]에 기록하며, 전체 CAD 시험 실패가 남아 완료 판정은 보류한다. ## 독립형 CAD 임베드 및 데이터 연동 아키텍처 * **메타데이터 캐싱 및 단건 로드**: 도면 목록(종단도, 측점별 횡단도) 메타데이터 조회(`GET .../design-drawings`) 후 선택 도면 단건 로드. * **postMessage 기반 양방향 연동**: * `aislo:b07:save-request`: CAD iframe 프레임으로부터 편집 JSON 수신 및 확정 API(`PUT .../confirm`) 전송. * `aislo:b07:drawing-changed`: 도면/수량표 편집 시 `invalidate` API 호출로 롤백 및 게이팅 차단. * `aislo:b07:navigate`: CAD 내 수량표 패널의 이전/다음(`‹`, `›`) 버튼 클릭 시 순차 이동. * **MIT 라이선스 공시**: B07 상세설계 페이지 우측 하단에 저채도 MIT 라이선스 링크 표시. ## openwebcad 단위 정합, 선 특성/폰트 UI 및 Fit-in-all (2026-07-20) * **도면 단위 정합 (`App.consts.ts`, `MeasurementEntity.ts`)**: m 단위는 유지하되 주석 치수 상수 5종(FONT 16px, EXTENSION 12px, MARGIN 8px, LABEL_OFFSET 8px, DEFAULT_OFFSET 60px)을 화면 픽셀 스케일(`screenScale`)로 분할 적용하여 줌 무관 일정 크기 유지 및 화살표 왜곡 버그 수정. * **선 특성 및 폰트 변경 UI (`Toolbar.tsx`, `App.css`, `state.ts`)**: 툴바 리본에 라인 스타일(색상, 굵기, 4종 선종류: 실선/파선/1점쇄선/점선) 및 텍스트 스타일(폰트, 크기, 색상) 추가. 미선택 시 기본값 적용, `lineDash` 포함 엔티티 직렬화로 저장/복원 정합 보장. * **Fit-in-all 및 화면 인터페이스**: `zoomToFitScreen()` 월드 오프셋 계산 공식(`worldCenter - screenSize / zoom`) 및 10% 여백 적용. B07 도면 목록 측점 라벨을 `2+0.0` 포맷으로統一. * **CAD 내부 통합 수량산출표 패널 (`QuantityPanel.tsx`)**: CAD 하단 중심에 접이식 React 수량산출표 패널 배치. 절토고/성토고 파생 계산, 이전/다음 뷰 이동 핸들링, 표 편집 시 CAD 도면 변경 연동(`notifyDrawingChangedByTable`). CAD 하단 명령어 입력창 숨김 처리. ## CAD 계획선 레이어 연동 및 편집 지원 (2026-07-22) * **계획선 레이어 (`b07-design`) 표출 및 편집**: CAD 스키마 내에 `b07-design` 레이어로 파싱된 amethyst 계열의 PolyLine 데이터가 노선 계획선으로 자동 표출됨. * **잠금 해제 상태**: 해당 레이어의 잠금 여부가 `isLocked: false`로 정의되어 있어 실무자가 계획 도면 위에서 선 트림, 선 연장, 수정 및 구조물 라이브러리 부착 등 상세 CAD 편집 작업을 바로 수행할 수 있도록 지원. ## 주요 컴포넌트 / 함수 | 함수 | 위치 | 역할 | |---|---|---| | `renderB07DesignDetail(root)` | `B08_DesignDetail_UI_Page.ts:28` | 3단 레이아웃 조립, 도면 목록 fetch 및 iframe 임베딩 | | `buildDesignInfoPanel(drawing)` | `B08_DesignDetail_UI_Page.ts` | **[신설]** 지반정보(지반유형/절토측/지반고/지형경사) 및 계획정보(계획고/절성토경사/도로폭/측구규격/단면적) 2분할 정보 패널 서빙 | | `handleCadMessage(event)` | `B08_DesignDetail_UI_Page.ts:145` | postMessage 수신 핸들러 (save-request, drawing-changed, navigate 분기 처리) | ## 의존성 - [[a00_app_shell_framework]] — `navigateTo`, `workflowSteps` - [[ui_templates]] — `createWorkflowLayout` (3단 레이아웃) - 백엔드 API (정적 서빙 마운트 및 도면 연동) → [[B08_DesignDetail/B08_backend]]