## 01 조합에 쓰는 모듈 (지도 카드)

WASM 파서 JS 모듈 · 렌더러
acadrust-dwg wasm
DWG 바이너리 → JSON parseResult. 외부 네트워크 없음.
src/viewer2d/acadrust-dwg/*.wasm (이 프로젝트)
dwgParser / acadrustParser wrap
WASM 1회 init + `parseDwgBuffer(bytes)`.
dwgParser.ts · acadrustParser.ts
dxf-parser npm
DXF 텍스트 파싱 (MIT). HATCH 기본 미지원.
npm: dxf-parser
dxfHatchHandler patch
`registerEntityHandler`로 HATCH 보강.
dxfHatchHandler.js
dxfAdapter adapt
dxf-parser 출력 → Viewer2D 공통 스키마.
dxfAdapter.js
Viewer2D render
Orthographic three 씬. LINE/ARC/HATCH/TEXT/INSERT…
Viewer2D.js
three peer
WebGLRenderer + OrbitControls (pan/zoom).
npm: three ≥0.160
slugText + font text
opentype.js → GPU 텍스트. TTF를 호스트가 서빙.
slugText.ts · /fonts/*.ttf
ext2d util
`isDwg` / `isDxf` / `is2D` — 의존 zero.
ext2d.ts
propertyInspector ui
엔티티 상세 속성(LINE/CIRCLE/ARC/POLYLINE/TEXT/INSERT 등) 계산 & 렌더.
propertyInspector.ts
layerPanel ui
LayerPanelManager — 실시간 검색, 가시성 Eye 토글, 전체 켜기/끄기.
layerPanel.ts
panelUtils ui
플로팅 UI 창 헤더 드래그 이동, 접기/펼치기, Resizable 유틸.
panelUtils.ts

📖 엔티티 선택 & UI 패널 통합 가이드: docs/entity-selection-property-layer-ui.md 참조

## 02 조립 파이프라인

Host
File · URL · Drop
.dwg / .dxf
→
ext2d
isDwg / isDxf
분기
→
Parser A or B
acadrust · dxf-parser
(+ hatch · adapter)
→
Contract
CadParseResult
공통 JSON
→
Viewer2D
.load(result)
three 씬
핵심 계약: 파서는 파일을 안 열고, 렌더러는 바이트를 안 연다. 중간은 항상 `CadParseResult` 하나.

## 03 다른 프로젝트에 옮기는 순서

1

### 모듈 소스 복사

이 샘플의 `src/viewer2d/` 전체를 복사. npm: `three`, `dxf-parser`, `opentype.js`. (원본 소스는 형제 폴더 `hmwebviewer/src/viewer2d`.)

2

### 정적 자산

`public/fonts/NanumGothic-Regular.ttf` (한글 TEXT). WASM은 소스가 `?url`로 import — Vite면 `assetsInclude: ['**/*.wasm']`.

3

### 아래 스니펫처럼 조합

래퍼 클래스 없이 모듈을 직접 import 해도 됩니다. 실행 가능한 전체 예: 이 프로젝트 `src/main.ts`.

4

### 호스트 UI만 붙이기

드롭존 · 툴바 · 레이어 패널은 모듈이 아님. 샘플의 ⑤ 영역만 교체하면 디자인 시스템에 맞게 붙일 수 있음.

## 04 최소 조합 코드 (샘플과 동일 패턴)

    // ① 모듈 지도 카드 → import
    import { Viewer2D } from './viewer2d/Viewer2D.js';
    import { parseDwgBuffer } from './viewer2d/dwgParser';       // acadrust-dwg
    import { parseDxfBuffer } from './viewer2d/parseDxf';         // dxf-parser+hatch+adapter
    import { isDwg, isDxf } from './viewer2d/ext2d';
    import { setDefaultFontUrl } from './viewer2d/slugText';

    setDefaultFontUrl('/fonts/NanumGothic-Regular.ttf');

    // ② 렌더러
    const viewer = new Viewer2D(document.getElementById('app')!);

    // ③ 파서 조합
    async function parseCad(buf: ArrayBuffer, name: string) {
      if (isDxf(name)) return parseDxfBuffer(buf);                 // dxf-parser 경로
      if (isDwg(name)) return parseDwgBuffer(new Uint8Array(buf)); // WASM 경로
      throw new Error('need .dwg or .dxf name');
    }

    // ④ 계약: parseResult → load
    async function open(file: File) {
      const result = await parseCad(await file.arrayBuffer(), file.name);
      viewer.load(result);
      viewer.resize();
      viewer.fit();
    }

## 05 DWG 경로 vs DXF 경로

.dwg 경로 wasm
`parseDwgBuffer`
→ acadrustParser.init
→ parse_dwg(bytes)
→ CadParseResult
Sample DWG 버튼으로 검증
.dxf 경로 js
`parseDxfBuffer`
→ decodeDxf (UTF-8 / CP949…)
→ DxfParser + HatchHandler
→ dxfToParseResult
Sample DXF 버튼으로 검증

## 06 샘플 위치

    dwg-dxf-viewer-sample/   ← hmwebviewer 형제 폴더
      src/main.ts              ← 모듈을 직접 import 해서 조립 (핵심)
      src/viewer2d/            ← acadrust-dwg · Viewer2D · dxf-*
      index.html               ← 툴바 + Module recipe 패널
      public/fonts/            ← NanumGothic (slugText)
      public/samples/          ← BasicSample.dwg · simple.dxf
      docs/modules-dwg-dxf.html

    실행
      cd ../dwg-dxf-viewer-sample   # (hmwebviewer 기준 형제)
      npm install
      npm run dev              → http://localhost:5173