material-spec — handoff (현재 상태·불변 핵심)
갱신일: 2026-06-12
목적
오토캐드 도면 기반 가구 자재 스펙을 서버 없이 단일 HTML 파일에서 작성·편집하고 JSON 파일로 저장/불러오기 하는 앱. 데이터 단위 = 1 파일 = 1 현장.
현재 상태 (NOW)
- 2026-06-12 하이라이트 연동 엣지 동시 점등 (
25e1d87→cd3a29b, Playwright 검증) — 칼라↔엣지 양방향: 칼라 선택 시 연동(colorId) 엣지 점등 + 엣지 선택 시 연동 칼라 점등(highlightTargetMids). 최초 클릭한 원점 칩은ui.selectedOrigin({locId, part}) 추적 +.highlight-origin(7px double 아웃라인)으로 일반 점등(3px solid)과 구분. 재클릭 해제 시 전부 정리. 함정(cd3a29b): 부트스트랩 rebootbutton:focus:not(:focus-visible){outline:0}이 실클릭(포커스)된 칩의 하이라이트 outline을 제거 → highlighted/origin/search-match 3종에!important필수. JS.click()은 포커스를 안 옮겨 이 버그를 못 잡음 — 칩 outline 검증은 Playwright 실클릭으로. - 2026-06-12 현장 정보 단순화 + 칩 줄바꿈 (
b462958, Playwright 검증) — 현장 정보 카드: "현장 정보" 제목·접기 버튼 제거, 프로젝트/작성자/REV 필드 삭제(state엔 잔존), 라벨→placeholder, 1행 = 발주처·현장명·작성일·비고 균등 배분 / 2행 = 주소. 발주처 = datalist 드롭다운(넥서스/에넥스/넵스/봉적) + 직접입력. 사양서 칩: 업체명 아랫줄 줄바꿈(칼라=칼라명/브랜드 2줄, 부자재=코드/벤더 2줄), 엣지 = 품명/사양(두께T폭mm)/업체 3줄*, 코어 1줄..chip-line구조 + 칩 flex-column 전환. - 2026-06-12 코디 3건 완료 (모두 Playwright 실구동 검증·콘솔 에러 0):
① 엣지 라이브러리 탭 (
4af21f5+ 목업edge_mockup.html) — 자재 풀 3→4풀(edges 신설). 라이브러리 서브탭 재배치 = 칼라|엣지|코어 + 부자재 맨 오른쪽 분리(점선·당분간 미사용). 엣지 = 칼라 연동(colorId)·엣지명(공장 운영 넘버)·업체·소재(PET/PP/PVC)·두께(0.6/1+직접입력, "T" 자동)·폭(19/22/27/34+직접입력, "mm" 자동) — 토글배열(전체 노출) UI. 사양서/셀모달/그룹/인쇄 표기 = "칼라명 두께T*폭mm" (예: IV075MT 1T22mm), 폼에 실시간 미리보기. 엣지 셀(door.edge/body.edge) 기본 풀 = 엣지. ② 사양서 열 동적화 + CORE 기본값 + 형태 가로 표기 (42a8c12) — 형태 열 세로쓰기→가로+자동 줄바꿈. CP/FL·손잡이 열 삭제, 목찬넬 다음 걸레받이 추가. 도어/바디 하위 열 =state.parts동적(헤더에서 추가/이름변경/삭제, 섹션당 최소 1열, 삭제 시 배정 셀 정리). CORE 기본값 = 도어 18T MDF(주방/일반 공통)·바디 주방 15T PB·일반 18T PB — 빈 코어 셀 로드 시 자동 채움 + 신규 위치/타입/현장 기본 적용 + 셀 모달 추천 그룹별 갱신. ③ 라이브러리 복사 + 코어 중복 데드락 수정 (89fb37d) — 칼라/엣지/부자재 카드 복사 버튼(원본 값 채워진 폼이 새 항목으로 열림, 칼라 스와치 재배정). 코어 인라인 편집: 두께 변경 중복 시 다른 재질 자동 전환(18T MDF 존재 → 18T 선택 시 PB로), 완전 중복은 미사용 항목 자동 등록 취소+안내, 사용 중 코어는 변경만 취소·보존, 유일 조합은 그대로 저장. ④ 사양서 열 일괄 편집 (a20b4b6) — 열 이름 아래 일괄 작업 행(열마다 [편집] 버튼 1개). 모달: 전체 덮어쓰기 / 빈 항목만 채우기 / 전체 삭제 + 자재 선택(4풀 탭·검색) → [적용] 한 번에 반영. 적용 범위 = 현재 표(현재 타입·현재 그룹)만*(페페 확정), 수정 방식 = 전체 덮어쓰기만(치환 없음·페페 확정). 대상 행 수 요약·미선택 가드. - phase2 완료 —
0dddfe3(+697/-137). 칼라/부자재/코어 3풀 분리(지시문 A~H), v1→v2 마이그레이션. 지시문 =phase2_color_library_restructure.md. - phase1 완료 —
e6171ca. 3탭 + 현장/타입/위치/셀 CRUD + JSON 라운드트립 + 동적 집계 + 인쇄/PDF. - pfs 병합 전망(2026-06-11 진단): 도메인 로직·렌더·CSS 70~80% 이식 가능. 수정 3곳 = Jinja+static 분리·IIFE/pfs 규약 ② BS 버전 정합(pfs base 미확인) ③ 자동저장→명시 저장 + 현장 목록 화면.
- 리포 미추적 잔존물:
.playwright-mcp/(검증 흔적),오산 양산 4지구 …_spec.json(내보내기 산출물),verify-*.png.
불변 핵심
- 리포 경로 =
C:\dev\material-spec(user_brief 외부 독립 리포, 원격 없음·push 불가). 커밋:e6171ca(phase1) →0dddfe3(phase2) →4af21f5(엣지 탭) →42a8c12(열 동적화) →89fb37d(복사+코어 수정) →a20b4b6(열 일괄 편집) →b462958(현장 정보 단순화+칩 줄바꿈) →25e1d87(하이라이트 연동 엣지+원점 이중라인) →cd3a29b(역방향+포커스 outline 수정). - 파일:
index.html(앱 본체, 단일 파일) ·sample-site.json(시드 샘플, v2) ·material_spec_mockup.html·edge_mockup.html(시각 기준 목업) ·phase1_material_spec_app.md·phase2_color_library_restructure.md(코디 지시문 = 설계 원본). - 데이터 계층: 현장 → 타입[] → groups(kitchen/general) → 위치 → cells(부위별 id 참조). 자재 풀 = colors/cores/edges/subMaterials 4풀, 셀은 id 1개 참조(해석 순서 colors→cores→edges→subMaterials) → 집계·하이라이트·사용처 추적 자동.
- 사양 열 =
state.parts동적(기본: 도어 6 CORE·전면·후면·엣지·목찬넬·걸레받이 + 바디 6 CORE·마감면·엣지·선반·등판·기타). 사용자 열 추가/이름변경/삭제 가능. 구버전 데이터는 기본 열로 정규화 + 미정의 셀 키 정리. 프리셋 위치 = kitchen 6종·general 5종. - 제약: 백엔드/번들러/프레임워크 금지, 의존성 = Bootstrap 5.3 CDN 1개만, 순수 바닐라 JS. 스타일 토큰: 다크 표
#0d1b2a·노란 th#f4c430·테두리#ffa500(형태 열은 2026-06-12부터 가로 표기·세로쓰기 폐지). - 저장: localStorage
materialSpec:current자동저장. 내보내기{현장명}_spec.json, schemaVersion: 2 유지(edges·parts는 additive — 구 파일은 normalize가 기본값 보강). v1은 확인창 후 자동 변환. - 코어 규칙: E0 고정 / 두께 3·4.5·6·9·12·22=MDF 고정, 15·18·23·25·30=MDF/PB / (두께,재질) 중복 금지 / 기본값 도어 18T MDF·바디 주방 15T PB·일반 18T PB(빈 셀 자동 채움). 칼라 스와치 = 골든앵글 자동생성·불변. 엣지 표기 = 연동 칼라명 + 두께T*폭mm.
미구현 (의도적 보류)
- 부자재 폼/규칙 개선(v1 그대로, 탭도 우측 분리·당분간 미사용), 칼라 사진 업로드, 전면/후면 토글의 셀 노출 필터 전환, 카테고리 재정리, 코어 복사(조합 유일 제약으로 불필요 판단).
- phase3 후보: pfs 웹페이지 이식(별도 지시문), 원가/소요량 계산, 보드 프리셋, 자재 일괄적용, 타입 간 셀 복사, 기존 부자재 엣지 → 엣지 풀 일괄 변환.
다음
- 페페 실사용 피드백 수집 → phase3 범위 결정(pfs 이식 또는 선택 기능).