[patternflow-bot]

ops / https://claude.ai/code/session_01KrwPAQrXtjp1YkhF57Z6rc

Pattern Lab 의 To hardware, Code guide, Import image 창에서 글을 끌어 고르다 창 밖에서 손을 떼면 창이 닫혔어요. 이제 누름이 바깥 판에서 시작했을 때만 닫혀서, 붙인 헤더를 고르거나 그림 자리를 끌다 밖으로 나가도 창이 그대로 있어요.

좋아지는 것: 창 안 글을 끌어 고르다 밖에서 놓아도 창이 남는다 — 하던 일을 잃지 않는다

체크리스트

• incoming/ROUND.md 읽기
• 앞 바퀴 PR 의 댓글·리뷰 읽기 (OWNER·MEMBER·COLLABORATOR 만): 맡을 글 없음
• 일 고르기: 후보 13 (112 는 바퀴 6677 이 했어요)
• dev 빌드에서 재현: 세 창 × 폭 둘, 여섯 번 다 닫힘
• 고치고 시험: 고친 빌드에서 여섯 번 다 열려 있음, 바깥 판을 한 번 누르면 여섯 번 다 닫힘
• 다섯 검사 · 사진
• dev merge (dev 가 44c7f78 그대로라 merge 할 것이 없었어요)
• PR 검사: 69429a1 에서 Web CI, Drift checks 둘 다 success

한 일

• 새 훅 web/src/lib/hooks/useBackdropClose.ts. 바깥 판의 onPointerDownCapture 가 누름이 판 자신에서 시작했는지 적어 두고, onClick 은 그 누름이 판에서 시작했고 click 도 판 자신에 떨어졌을 때만 onClose 를 불러요. 잡기 단계에서 들으니 안의 캔버스가 pointerdown 을 혼자 가져도 지난 값이 남지 않아요.
• app/pattern-lab/HardwareModal.tsx, panels/CodeGuideModal.tsx, panels/ImportImageModal.tsx 의 바깥 판이 이 훅을 써요.
• 시험: 훅 시험 다섯(useBackdropClose.test.tsx), To hardware 의 「헤더 칸에서 시작한 끌기가 바깥 판에서 끝나도 열려 있다」, Import image 의 「미리보기를 끌다 바깥에서 떼도 열려 있다」. To hardware 의 바깥 판 시험 넷은 click 만 쏘던 것을 pointerdown 다음 click 으로 바꿨어요. 실제 누름이 그 차례예요.

증거

새 시험 둘은 옛 판에서 빨개요. 고침을 커밋한 뒤 세 파일만 git show origin/dev:<경로> > <경로> 로 깔고 돌렸어요.

× ImportImageModal > stays open when a drag on the preview ends on the backdrop
× HardwareModal > stays open when a drag that began in the header box ends on the backdrop

크로미움에서 잰 것. NEXT_PUBLIC_BUILD_ENABLED=1 npx next build 로 빌드해서 To hardware 단추를 띄우고, 창 안 글에서 마우스를 눌러 카드 왼쪽 14px 바깥까지 끌고 뗐어요. 그다음 같은 자리를 한 번 눌렀어요.

옛 판 (dev 44c7f78)
1440px Code guide: open after drag-out: no
1440px Hardware: open after drag-out: no
1440px Import image: open after drag-out: no
390px Code guide: open after drag-out: no
390px Hardware: open after drag-out: no
390px Import image: open after drag-out: no

고친 판
1440px Code guide: drag selected 145 chars, open after drag-out: yes, open after a press on the backdrop: no
1440px Hardware: drag selected 33 chars, open after drag-out: yes · header box 91 chars, open after a press on the backdrop: no
1440px Import image: drag selected 23 chars, open after drag-out: yes, open after a press on the backdrop: no
390px Code guide: drag selected 963 chars, open after drag-out: yes, open after a press on the backdrop: no
390px Hardware: drag selected 91 chars, open after drag-out: yes · header box 91 chars, open after a press on the backdrop: no
390px Import image: drag selected 267 chars, open after drag-out: yes, open after a press on the backdrop: no

To hardware 에 헤더를 붙이고 끌어 고르다 바깥에서 뗀 뒤예요. 창이 남고 고른 글이 그대로예요.

다섯 검사 끝줄 (web/):

npm ci                            added 762 packages, and audited 763 packages in 36s
npm run lint -- --max-warnings=0  (출력 없음, exit 0)
npm run typecheck                 tsc --noEmit && tsc --noEmit -p ../tools/virtual-panel  exit 0
npm run build                     ✓ Compiled successfully in 16.1s  exit 0
npm run check:ci                  passed   virtual-panel  exit 0  (links-absolute, roadmap 은 gh 로그인이 없어 skipped)
npm run check:panels              Test Files  96 passed (96) · Tests  1211 passed (1211)
npm run check:voice               check:voice: nothing found

check:ci 를 돌린 뒤 브라우저가 하지 않는 click 을 쏘던 훅 시험 하나를 뺐어요(아래 「가정」). 그래서 check:panels 만 다시 돌렸어요.

실행법

# web/ 에서
npx vitest run src/lib/hooks/useBackdropClose.test.tsx src/app/pattern-lab/HardwareModal.test.tsx src/app/pattern-lab/panels/ImportImageModal.test.tsx

손으로는 npm run dev 에서 Pattern Lab 의 Code guide 를 열고, 코드 글을 끌어 고르며 창 밖에서 떼요. 창이 남아요. 바깥 판을 그냥 누르면 닫혀요.

가정

• 후보 13 은 바깥 판마다 onPointerDown 을 달라고 했는데, 세 창이 같은 일을 해서 lib/hooks/ 의 훅 하나로 묶었어요. 누름은 잡기 단계(onPointerDownCapture)에서 들어요. 끌어 옮기는 캔버스처럼 안쪽이 pointerdown 을 멈춰도 바깥 판이 들어요.
• 바깥 판에서 누르고 카드 안에서 떼면 크로미움은 click 을 바깥 판에 보내서 창이 닫혀요. 바깥에서 시작한 누름이라 그대로 뒀어요. 처음엔 그 경우 열려 있다는 훅 시험을 썼는데, click 을 카드에 쏘는 것이라 브라우저가 하지 않는 일이었어요. 그 시험은 뺐어요. click 이 판 자신에 떨어져야 하는 검사는 「위 창만 닫는다」 시험이 지켜요.
• 옛 판 재기의 「drag selected」 칸은 창이 닫히며 고른 글이 사라져 다 0 이라 빼고 적었어요.
• 표 밖: components/community/ 의 창 열한 곳(SendModuleModal, PublishModal 처럼 To hardware 안에서 여는 둘도)은 바깥 판이 아직 onClick={onClose} 라 같은 끌기에 닫혀요. 이 바퀴는 후보 13 의 Lab 창 셋만 고쳤어요.

Changelog

Web

• Pattern Lab's dialogs stay open when a drag that began inside them ends outside. Selecting text in To hardware, Code guide or Import image and letting go on the backdrop closed the window; only a press that starts on the backdrop closes it now.

경험

언제: 바퀴에서 Pattern Lab 의 To hardware 창을 실제 브라우저로 재거나 찍을 때
교훈: NEXT_PUBLIC_BUILD_ENABLED=1 npx next build 로 빌드해야 머리에 To hardware 단추가 생기니, 낱장 HTML 로 흉내 내지 말고 그렇게 빌드해서 잰다 (평소 npm run build 엔 단추가 없다)
근거: #204 에서 그렇게 빌드한 옛 판과 고친 판으로 To hardware 끌기를 390·1440 에서 쟀어요 (후보 13 을 적은 #188 은 단추가 없어 낱장 HTML 로 쟀어요)

바퀴

바퀴 78 · 후보 13 「Lab 의 창 안에서 글을 끌어 고르다 창 밖에서 놓아도 창이 닫히지 않는다」

다음 바퀴

• 14위 · 텍스트 효과의 빠르기를 Text 패널에서 바로 돌린다: 폰에선 빠르기를 바꿀 때마다 Knobs 탭까지 두 번 옮겨요.
• 15위 · Code 패널의 붙여넣기 상자와 안내가 영어로, 고른 레이어의 종류대로 말한다: lang="en" 쪽에 한국어 window.prompt 가 뜨고, 텍스트 레이어를 「pixel art」 라고 불러요.
• 16위 · Knobs 패널에서 화살표 키 한 번이 기기의 노브 한 칸만큼 움직인다: 지금은 step="0.001" 이라 Freq 끝에서 끝이 화살표 110,000번이에요.

https://claude.ai/code/session_01KrwPAQrXtjp1YkhF57Z6rc

---

Generated by Claude Code