[patternflow-bot]

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

Lab 머리줄의 Share 가 여는 창은 바깥을 눌러야만 닫혔어요. 이제 Esc 한 번에 닫히고 초점이 Share 단추로 돌아와요. To hardware 안에서 연 Share 창도 Esc 로 그 창만 닫히고, 번역해 둔 헤더는 남아요.

좋아지는 것: Lab 의 Share 창이 Esc 로 닫힌다 — 키보드로 올리다 그만둘 때 마우스로 손을 옮기지 않는다

• 앞 바퀴 PR 댓글(세 직함) 읽기. 따를 글은 없었어요
• 「후보」 표의 남은 줄 가리기. 119위는 바퀴 6684 가 했고, 남은 줄은 20~40위 21개예요
• PublishModal 이 useDialog 로 Esc 와 초점을 맡는다
• To hardware 의 주석과 시험을 맞춘다
• 다섯 검사, voice, human-lock
• Chromium 390 · 1440 에서 Esc 눌러 보기와 사진
• dev merge, 그 뒤 bf2a706 에서 Drift checks 와 Web CI 초록

한 일

components/community/PublishModal.tsx 의 카드에 useDialog 를 달았어요. 앞 바퀴들이 커뮤니티의 다른 다섯 창과 To hardware 에 단 것과 같은 훅이에요. Esc 는 창을 닫고, 닫히면 초점은 창을 연 단추로 돌아가요.

제목 칸의 autoFocus 는 뺐어요. 그대로 두면 훅이 연 단추를 보기 전에 초점이 제목 칸으로 가서, 훅은 제목 칸을 연 단추로 알고 돌려줄 곳을 잃어요. 그래서 카드가 먼저 초점을 받고, 그 뒤 폼이 보이면 제목 칸으로 옮겨요. 세션을 확인하는 동안엔 제목 칸이 없으니 카드가 초점을 쥐고 있다가, 확인이 끝나 폼이 서면 그때 옮겨요. 전의 autoFocus 도 폼이 설 때 초점을 옮겼어요.

To hardware(app/pattern-lab/HardwareModal.tsx)의 주석은 Publish 가 키를 듣지 않는다고 적고 있어서 고쳤어요. 이제 Esc 하나를 두 리스너가 같이 듣는데, 둘 다 Publish 를 닫는 setPublishCode(null) 만 해서 To hardware 는 남아요. Send 는 여전히 키를 듣지 않아서 그 말은 그대로 뒀어요.

시험은 components/community/dialogKeys.test.tsx 에 넣었어요. 다섯 창이 Esc 와 초점을 받은 그 시험 틀에 Share to Community 를 여섯째로 더해, 진짜 단추로 열고 Esc 로 닫은 뒤 초점이 그 단추로 오는지 봐요. 거기에 셋을 더했어요. 제목 칸에서 시작하는지, 세션 확인이 끝나면 제목 칸으로 가는지, 로그인 칸이 든 창도 Esc 한 번에 닫히는지예요. HardwareModal.test.tsx 의 「Esc over the Publish modal」 시험엔 초점을 둘 더 봐요. Share 창이 열리면 제목 칸에, 닫히면 「Upload to the community」 단추에 와야 해요.

증거

고치기 전 PublishModal.tsx 로 돌리면 새 시험 넷이 빨개요(git stash push src/components/community/PublishModal.tsx 뒤).

   × the Share to Community window > closes on Esc and gives the focus back to the button that opened it
   × community windows > Share to Community moves to the title field once the session is known
   × community windows > a sign-in form inside Share to Community lets one Esc close it
   × HardwareModal > Esc over the Publish modal closes Publish alone and keeps the header
      Tests  4 failed | 45 passed (49)

고친 뒤엔 다 통과해요.

 ✓ src/components/community/PublishModal.test.tsx (6 tests)
 ✓ src/components/community/dialogKeys.test.tsx (17 tests)
 ✓ src/app/pattern-lab/HardwareModal.test.tsx (32 tests)
      Tests  55 passed (55)

web/ 의 다섯 검사 끝줄이에요.

npm ci                            added 762 packages, and audited 763 packages in 39s
npm run lint -- --max-warnings=0  exit 0
npm run typecheck                 exit 0
npm run build                     ✓ Generating static pages using 3 workers (145/145) in 23.1s
npm run check:ci                  exit 0 · Test Files 97 passed (97) · Tests 1240 passed (1240) · passed virtual-panel

check:ci 의 roadmap 은 gh 로그인이 없어서, links-absolute 는 이 클론에 옛 태그가 없어서 skipped 예요. npm run check:voice 는 「nothing found」(4 파일 88줄), npm run check:human-lock 은 「no locked words changed」예요.

Chromium 에서도 눌러 봤어요. 이 빌드엔 NEXT_PUBLIC_COMMUNITY_URL 이 없어 Share 가 안 보여서, 그 값을 http://localhost:3100 로 준 빌드를 이 컨테이너 안에서만 만들었어요. 커뮤니티 서버가 없어서 창은 로그인 칸으로 열려요. Share 를 누르고 Esc, 다시 열어 첫 칸에 초점을 둔 뒤 Esc 했어요.

390: open, focus on div.modalCard "Share to Community×Sign in…"
390: after Esc, dialogs 0 focus on button.headerToggle "Share"
390: second open, typing in input.textInput
390: after Esc from a field, dialogs 0 focus on button.headerToggle "Share"
1440: open, focus on div.modalCard "Share to Community×Sign in…"
1440: after Esc, dialogs 0 focus on button.headerToggle "Share"
1440: second open, typing in input.textInput
1440: after Esc from a field, dialogs 0 focus on button.headerToggle "Share"

실행법

# web/ 에서
npx vitest run src/components/community/dialogKeys.test.tsx src/app/pattern-lab/HardwareModal.test.tsx
NEXT_PUBLIC_COMMUNITY_URL=http://localhost:3100 npm run build && npx next start -p 3100

http://localhost:3100/pattern-lab 에서 머리줄의 Share 를 누르고 Esc 를 눌러요. 창이 닫히고 Share 단추에 초점 테두리가 있어야 해요.

가정

• 표의 「고칠 곳」은 시험 자리로 PublishModal.test.tsx 를 적었는데, dialogKeys.test.tsx 에 넣었어요. 커뮤니티 창의 Esc 와 초점 시험이 다 거기 있고, 진짜 단추로 창을 열어 초점이 돌아올 곳을 두는 틀도 거기 있어요. PublishModal.test.tsx 는 두 번 누름과 코드 크기 시험으로 남았어요.
• 표가 적은 HardwareModal.test.tsx:216 은 지금 :403 의 「Esc over the Publish modal」 시험이에요. 그 시험은 고치기 전에도 통과했어요. To hardware 의 리스너가 Publish 를 대신 닫았으니까요. 그래서 초점 두 곳을 더 보게 했고, 고치기 전 코드에선 닫힌 뒤 초점이 「Upload to the community」 로 오지 않아 빨개요.
• 브라우저에서 본 것은 로그인 칸이 든 창이에요. 로그인한 사람이 보는 폼(제목 칸에서 시작)은 jsdom 시험으로만 봤어요.
• 표 밖에서 본 것: 폰 390 폭에서 dockview 의 패널 경계 dv-sash(4px, z-index 99)가 Share 창의 바깥 판(z-index 60)보다 위에 있어요. 창의 Username 칸(41,402 · 308×40) 한가운데를 elementFromPoint 로 찍으면 그 경계가 나와서, Playwright 의 click 이 30초를 기다리다 끝났어요.
• 표 밖에서 본 것: Share 창의 바깥 판은 아직 onClick={onClose} 라서, 창 안에서 글을 끌어 고르다 바깥에서 놓으면 닫힐 거예요. 바퀴 78([DONE] Pattern Lab 의 창 안에서 글을 끌어 고르다 창 밖에서 놓아도 창이 닫히지 않는다 #204)은 To hardware 에 useBackdropClose 를 달았어요. To hardware 의 Send 창(SendModuleModal)은 아직 키를 듣지 않아요.

Changelog

Web

• Pattern Lab's Share window closes on Esc. It closed only on a press outside, and its title field took the focus before anything noted the Share button, so the focus had nowhere to go back to. One Esc now closes it and puts the focus back on Share, and inside To hardware it still closes Share alone and keeps the header.

경험

언제: 바퀴에서 Lab 의 Share 나 커뮤니티 창을 실제 브라우저로 볼 때
교훈: NEXT_PUBLIC_COMMUNITY_URL=http://localhost:3100 을 그 빌드에만 주면 Share 가 서고 창은 로그인 칸으로 열리는데, 폰 390 에선 dockview 경계가 칸을 덮으니 Playwright 로 칸을 click 하지 말고 focus 한다
근거: #217 에서 그렇게 빌드해 390·1440 에서 Esc 뒤 초점이 Share 로 오는 것을 쟀고, 390 의 Username 칸 click 은 dv-sash 가 막아 30초를 다 썼어요

바퀴

바퀴 85 · 후보 20 「Lab 의 Share 창이 Esc 로 닫힌다」

다음 바퀴

• 21위 「커뮤니티의 「Add firmware header」 창이 Lab 의 지금 단추 이름을 말한다」: 창이 Lab 에 없는 「Copy C++ prompt」 를 가리켜요. 지금 이름은 To hardware 의 「Copy the conversion prompt」 예요.
• 22위 「범위가 0.001 보다 좁은 노브도 커뮤니티 카드에서 Lab 과 같은 값으로 돈다」: 노브를 0..1 로 펴는 바닥값이 Lab 은 0.0001, 커뮤니티는 0.001 로 갈려 있어요.
• 23위 「Lab 에서 만든 헤더를 CC BY 4.0 으로 올려도 내려받은 .h 에 라이선스 줄이 하나만 있다」: Lab 뼈대가 첫 줄에 CC-BY-SA-4.0 을 박아서, CC BY 4.0 으로 감싼 헤더는 1번째 줄이 CC-BY-SA-4.0, 18번째 줄이 CC-BY-4.0 이에요.

https://claude.ai/code/session_01Difa7hNLiCp9rFtK3R7Xtt

---

Generated by Claude Code