pfs›문서›2026-09-14(월) 세션 — 네스팅 QA 5건(버튼줄·제목·칼라DB·Enter 점프·계산기) — 기록: [코디]
10.7 KB · 수정 2026-09-14 14:09
목차

2026-09-14(월) 세션 — 네스팅 QA 5건(버튼줄·제목·칼라DB·Enter 점프·계산기) — 기록: [코디]

논의·대안

[페페] 가 네스팅 화면(/production/nesting 도어전용 탭)에서 QA helper 로 요소를 집어 5건 + 「운영 배포」를 던졌다. 넷은 순수 UI 였고, ③ 칼라 DB 연동만 결정거리였다.

poin_colors(board_color 840행 · 고유 835) 는 NOT NULL 칸이 3개(edge_color·poin_color_type_id·company_id)인데 네스팅 저장 시점에는 그 값이 없다. 두 안:

GPT 상의 결론도 A — 미사용 값은 조회·필터 로직을 깨뜨릴 수 있고, 이 행의 쓸모는 칼라명 자동완성 하나뿐이라 마감종류·업체는 나중에 사람이 채우는 칸이다. A 채택.

인라인 검색은 네이티브 <input list> + <datalist> 로 갔다(라이브러리 0 · JS 최소). web-designer 가 실측으로 화살표 키 충돌을 잡아냈다 — 이 그리드는 setupKeys 가 ArrowUp/Down/Enter 를 전역으로 가로채 셀 이동에 쓰기 때문에, datalist 팝업이 떠 있어도 ArrowDown 이 다음 행 컬러칸으로 포커스를 옮기고 값은 안 골라진다. 대안(컬러칸만 키 예외 처리 / 자체 콤보박스 JS)은 각각 「손맛이 다르다」는 새 혼란과 코드량 초과라 현행 유지로 결론.

④ Enter 점프는 web-designer 가 setupKeys(gridId, cols, onEnterLast, enterJump) 로 시그니처를 늘리는 안을 냈는데, 목표 칸을 실제 data-k 로 찾으면 인자가 아예 필요 없다 — 호출부 2곳 + keyup 재호출까지 3곳을 고치다 하나를 빠뜨려 조용히 깨지는 위험을 없앴다.

결정

  1. 버튼줄(+행 추가·초기화·샘플·tread JSON)을 부재 표 위로(.toolrow flex), 우측 끝에 계산기.
  2. h3 괄호 안내 + <p class="muted"> 5문단 삭제. (총 N행) 카운터는 상태값이라 유지.
  3. 컬러칸 = poin_colors 자동완성(문서에 <datalist> 1개, 부재·자재 컬러칸이 공유) + 저장 시 POST /api/poin/colors. 가드 = 빈값·32자 초과 스킵 · 대소문자 무시 중복차단(서버 collation utf8mb3_unicode_ci + 프런트 소문자 비교 두 겹) · 회당 50건 상한.
  4. 수량칸 Enter → 다음 행 「가로」(ENTER_JUMP={qty:'w'}). 마지막 행이면 새 행 만들고 그 행 가로.
  5. 계산기 = 화이트리스트 검사 후 Function. 콤마를 먼저 지운다 — 안 지우면 (1,200) 이 쉼표 연산자로 200 이 되는 조용한 오답.

산출물·커밋

2차(같은 날 오후) — 상단 고정 · 구분색 · 자체 드롭리스트

[페페] 3건. ③은 1차에서 내가 만든 것을 도로 걷어내는 지시였다.

  1. 「해당 라인까지 상단 고정(스크롤 영향 X)」 → 2단 sticky. 1단 .sticky-top(제목+탭바) · 2단 .sticky-sub(부재 제목+버튼줄). 🔴2단을 .col 안에 두면 안 된다 — sticky 컨테이닝 블록이 그 .col 이라 표를 지나 결과·BOM 으로 내려가는 순간 버튼줄이 같이 사라진다. 그런데 그게 이 화면의 주 스크롤 동작이다 → .col 밖(.wrap 직속)으로 빼고 showTab() 이 표시를 토글. 🔴고정 높이는 px 로 못 박는다 — 640px(200% 확대)에서 탭바·버튼줄이 둘 다 접혀 126→201px(실측). recalcStickyTop() 이 실측해 --stickyH 로 내리고 #partWrap 높이가 그만큼 줄어든다(1080p 33행 · 768p 23행).
  2. 컬러 값별 파스텔 구분색 — 값이 아니라 등장 순서로 8색 배정, 부재·자재가 같은 맵 공유. 🔴인라인 background 로 칠하면 범위선택 하이라이트를 덮는다 → td 에 --tint + .tint 클래스, CSS 에서 .cellsel 앞에 선언. 팔레트에서 2색 제외 = 하늘 #dbeafe 은 범위선택색 #d7e8ff 와 사실상 같은 색(45쌍 중 최소거리 4.6), 회청 #e2e8f0 은 헤더·민트와 녹색약 거리 5.1. 페페가 의심한 살구↔테라코타는 거리 26.9 로 안전.
  3. 크롬 자동완성 드롭리스트 금지 → 자체 드롭리스트 — <datalist> 삭제, data-drop="color", 그리드 텍스트칸 전부 autocomplete=off. 새로 안 만들었다 — pncad 가 26.9.3 에 만든 droplist.js(232줄, 함정 5개 반영)가 sync_to_pfs.py 로 이미 pfs 에 와 있다 → /production/pncad/droplist.js 를 import 하고 providers.color 만 등록. - setupKeys 에 if(e.defaultPrevented) return; 한 줄 — droplist 는 캡처 단계에서 소비할 때만 preventDefault 를 부르므로 팝업이 먹은 ↑↓/Enter 는 그리드가 안 건드리고, 안 먹은 Enter 는 종전대로 다음 셀로 간다. - 값이 찬 칸은 focusin 자동열기만 억제(표를 훑고 지날 때 방해). 클릭·타이핑·Alt+↓ 는 그대로 연다. ⛔click 을 stopImmediatePropagation 으로 막으면 범위선택(Shift+클릭)까지 죽는다. - 🔴new Event('change') 는 버블하지 않는다 → 구분색 갱신 리스너는 캡처여야 한다(버블만 걸었더니 조용히 안 먹었다). - 🔴팝업 CSS 는 body #pcDrop 으로 특이도를 올려야 이긴다 — droplist 가 initDrops() 때 <style> 을 런타임 append 해서 문서 순서로는 늘 나중이다. 폰트 12/11px → 13px 하한, --acc → #1a73e8.

어긴 규칙과 승격

③은 새 지시가 아니었다. 「모든 목록·자동완성은 크롬 양식 금지」는 26.9.3 페페 지시로 이미 있었는데 projects/pncad/rules.md 안에만 적혀 있어 pfs 작업에서 안 읽혔고, 오전에 배포한 1차가 그 위반이다.

2차 산출·검증 = master ab664ae → 운영 60b1eb4(체리픽, blob 일치) · 검사기 ⑥⑦⑧ 추가 → 로컬 71/71 · --test 87/87 · --prod 88/88 · 운영 쓰기 0건 · 사이트맵 미반영 1(그대로, 이번 건 아님). ⚠다른 세션이 같은 리포에 커밋 3건(요율감시, scripts/ 만)을 넣어 놨다 — 경계 확인으로 내 파일만 올라간 것 확인.

3차(같은 날 오후) — 드롭 토글 · 행 드래그 · 컬럼폭+비고 · 행별 [+]

[페페] 4건 + 운영배포. master 2449737 → 운영 975ccad(체리픽, blob 일치).

  1. 드롭 토글 — droplist 는 D.anchor!==t 일 때만 열어 재클릭에 무반응이었다. 🔴판정은 click 이 아니라 mousedown 시점(포커스 이동 전) — click 때 재면 「빈 칸 첫 클릭」까지 오인해 즉시 닫힌다.
  2. 행 드래그 — 손잡이 = 순번칸(입력 요소가 없어 범위선택과 제스처 충돌 자체가 없다). HTML5 draggable 은 setupRange 의 전역 dragstart 차단과 부딪혀 못 쓴다. 4px 임계 · 드롭선 box-shadow:inset(행높이 불변) · 가장자리 자동 스크롤 · 키보드 대체 Alt+Shift+↑↓. ⚠raw mouse 라 터치 미지원.
  3. 컬럼폭 + 비고 — 진짜 바닥은 .grid-scroll input{min-width:60px}(→36). #partGrid{max-width:1000px} 없으면 1920px 에서 auto-layout 이 두께칸까지 170px 로 부푼다. 🔴비고는 맨 끝 + newCol:1 둘 다 필수 (빼면 옛 9열 붙여넣기 판정이 9→10 으로 틀어져 조용히 어긋난다).
  4. 행별 [+] — 누른 행 바로 아래 새 행. [✕] 는 버튼 2개 폭(48px) 띄움. delbtn 12→13px. 행 높이 25px 불변.

검증 = 로컬 98/98 · --test 114/114 · --prod 114/115 · 운영 쓰기 0건. 🔴미해결 = --prod ⑦ select 팝업 1건. 운영 파일이 테스트와 바이트 동일(93279)인데 테스트만 통과. 팝업이 열린 흔적(항목 3 · top:355px)을 남기고 display:none → 열렸다 닫힌다. networkidle·scroll_into_view 로 안 풀림. 볼 곳 = droplist 의 scroll/focusout/pointerdown capture. 페페 육안 1회면 실사용 영향 여부가 갈린다.

다음

관계