[DONE] Pattern Lab 에서 휠로 확대할 때 패널이 함께 구르지 않는다

[patternflow-bot]

dev / https://claude.ai/code/session_011XiRG6u444B5VRcNGmCgvy

Pattern Lab 의 Pixel 패널에서 휠로 확대하면 이제 그림만 커져요. 지금은 휠을 한 번 내리면 축소와 함께 뷰포트가 100px 굴러서 보던 자리가 밀려나요. 그림 가져오기 창의 미리보기도 같아서, 키가 낮은 창에선 휠을 돌릴 때 창 안이 같이 굴렀어요.

좋아지는 것: 휠로 확대하면 그림만 커진다 — 보던 자리가 굴러가지 않는다

체크리스트

• incoming/ROUND.md 읽기
• 앞 바퀴 PR([DONE] Pattern Lab 에서 매트릭스 크기를 바꾼 뒤에도 픽셀 되돌리기가 그림을 지킨다 #96 [DONE] 링크를 메신저나 X 에 붙이면 쪽마다 제 제목과 그림이 뜬다 #97 [DONE] Pattern Lab 의 Del 이 그림이 든 레이어를 지우기 전에 한 번 묻는다 #98 [DONE] 폰에서 Pattern Lab 패널이 화면 폭 그대로 보인다 #99)의 대화 댓글, 리뷰, 줄 댓글 읽기: 넷 다 없어요
• 후보 5 가 dev 에서 아직 안 고쳐졌는지 보기: dev 빌드에서 휠 한 번에 뷰포트가 100px 굴렀어요
• usePixelViewport.ts 휠 리스너
• ImportImageModal.tsx 휠 리스너
• 시험 넷. 고치기 전 코드에서 셋이 떨어지는 것부터 봤어요
• lint, typecheck, build, check:ci, check:voice
• Chromium 에서 고치기 전과 뒤를 재기, 390, 1440 사진
• dev merge(이미 최신이었어요)
• GitHub 검사 초록: 16b6ba8 에서 Drift checks, Web CI 둘 다 success

한 일

panels/pixel/usePixelViewport.ts 는 React 의 onWheel 대신 뷰포트에 wheel 리스너를 { passive: false } 로 직접 붙여요. React 는 wheel 을 뿌리에서 passive 로 받아서, 그 안의 preventDefault() 를 브라우저가 무시했어요. Chromium 은 휠마다 「Unable to preventDefault inside passive event listener invocation」을 찍었어요. Director 의 useTimelineZoom.ts 가 이미 같은 까닭으로 같은 꼴을 써요. 뷰포트는 픽셀 레이어를 고른 동안만 그려져요. 그래서 리스너는 hasPixel 이 바뀔 때 다시 붙고, 코드 레이어를 보다 픽셀 레이어로 옮겨 가도 휠이 먹어요. PixelPanel.tsx 의 onWheel 은 뺐어요.

panels/ImportImageModal.tsx 는 미리보기 캔버스에 같은 리스너를 붙여요. 그림을 고르기 전엔 붙이지 않아서, 빈 미리보기 위에선 휠이 창을 굴려요. 리스너가 부르는 clampScale 은 컴포넌트 밖으로 올렸어요.

두 곳 다 deltaY 가 0 인 휠은 확대하지 않고 굴림으로 둬요. 트랙패드를 옆으로 밀 때나 Shift+휠이 그래요. 전엔 deltaY < 0 ? 1 : -1 이라 옆으로 밀면 한 칸 축소됐어요.

시험은 넷이에요. PixelPanel.test.tsx 에 둘을 더했어요. 위아래 휠이 확대하고 defaultPrevented 가 참인지, 옆 휠은 그대로 굴림인지 하나, 코드 레이어를 띄운 뒤 픽셀 레이어를 골라도 휠이 먹는지 하나예요. 새 ImportImageModal.test.tsx 에 둘이에요. 그림 전엔 휠을 건드리지 않는지, 그림 뒤엔 108%, 100% 로 가고 굴림을 막는지예요. jsdom 도 passive 리스너 안의 preventDefault() 를 무시해요. 그래서 고치기 전 코드에서 넷 가운데 셋이 떨어졌어요. hasPixel 을 deps 에서 잠깐 빼면 둘째 시험이 떨어지는 것도 봤어요.

증거

web/ 에서 돌린 각 출력의 끝줄이에요.

npm ci                            added 794 packages in 20s
npm run lint -- --max-warnings=0  (출력 없이 0 으로 끝남)
npm run typecheck                 (출력 없이 0 으로 끝남)
npm run build                     ƒ  (Dynamic)  server-rendered on demand
npm run check:ci                  passed   virtual-panel   (exit 0, roadmap 만 skipped: gh 로그인 없음)
npm run check:voice               check:voice: nothing found

check:ci 안의 check:panels 는 Test Files 40 passed (40), Tests 523 passed (523) 이에요. 바퀴 4 의 39, 519 에서 파일 하나, 시험 넷이 늘었어요.

고치기 전 코드에 새 시험만 얹어 돌린 끝이에요.

 × ImportImageModal > the wheel scales the image and does not scroll the card
 × PixelPanel > the wheel zooms the drawing and does not scroll the panel
 × PixelPanel > the wheel zooms once a pixel layer is picked after a code layer
AssertionError: expected false to be true // Object.is equality
      Tests  3 failed | 17 passed (20)

dev(e7de77e)와 이 브랜치를 각각 빌드해서 Chromium 으로 열고, Pixel 탭에서 픽셀 레이어를 더한 뒤 뷰포트 한가운데서 휠을 돌렸어요. 줄마다 확대 배율과 뷰포트의 굴림 위치(왼쪽, 위)예요.

            390 전             390 뒤            1440 전            1440 뒤
처음        6×   0,0           6×   0,0          6×   0,0           6×   0,0
휠 위 6번   12×  0,0           12×  0,0          12×  0,0           12×  0,0
휠 아래     11×  0,100         11×  0,0          11×  0,88          11×  0,0
옆으로 120  10×  120,100       11×  120,0        10×  120,24        11×  120,0
passive 경고 8                 0                 8                  0

그림 가져오기 창은 product_v2.jpg 를 고르고 미리보기 위에서 돌렸어요. 390×844 와 1440×900 에선 창이 화면에 다 들어가 굴릴 데가 없어요. 경고만 3 에서 0 이 됐고 배율은 전과 뒤가 같아요(100% → 93% → 108%). 폰을 눕힌 844×390 에선 창 안이 162px 굴러요.

            844×390 전              844×390 뒤
처음        100%  창 굴림 0          100%  창 굴림 0
휠 아래     93%   창 굴림 100        93%   창 굴림 0
휠 위 2번   108%  창 굴림 0          108%  창 굴림 0
passive 경고 3                       0

사진은 휠을 다 돌린 뒤예요. 고친 뒤엔 확대해도 뷰포트가 왼쪽 위에 그대로 있어요. 고치기 전 사진은 같은 차례 뒤 100px 내려가 있어요.

실행법

cd web
npm ci
npx vitest run src/app/pattern-lab/panels/PixelPanel.test.tsx src/app/pattern-lab/panels/ImportImageModal.test.tsx
npm run build && npx next start -p 3100

http://localhost:3100/pattern-lab 의 Pixel 탭에서 「+ Add pixel layer」를 누르고 그림 위에서 휠을 돌려요. 개발 도구 콘솔에 passive 경고가 없고, 확대해도 뷰포트가 제자리예요. Import image 로 그림을 하나 고르면 미리보기 위의 휠이 scale 을 바꿔요.

가정

• 옆으로 미는 휠(deltaY 가 0)을 확대에서 뺐어요. 후보 줄엔 없는 말이지만, 막지 않은 굴림이 이제 막히니 옆 굴림까지 같이 막히지 않게 하는 것이 같은 일이라고 봤어요. 위아래 휠은 전처럼 언제나 확대예요.
• Pixel 뷰포트의 휠은 Ctrl 없이도 확대예요. 지금 그대로 뒀어요. 뷰포트를 위아래로 옮기는 길은 전처럼 가운데 단추 끌기예요.
• 앞 바퀴 「다음 바퀴」대로 순위 5 를 골랐어요.
• 표 밖: 확대는 커서 자리를 붙잡지 않고 뷰포트 왼쪽 위를 기준으로 커져요. Director 의 시간 확대는 커서 자리를 지켜요.
• 표 밖: 트랙패드는 한 번 쓸어도 wheel 을 수십 번 보내고, 휠 하나가 한 칸이라 Pixel 확대가 몇 칸씩 뛰어요.

Changelog

Web

• Pattern Lab's wheel zoom no longer scrolls the panel under it. React attaches wheel listeners as passive, so the Pixel viewport and the image-import preview called preventDefault for nothing: each notch zoomed and scrolled at once. Both now listen natively with passive: false, and a sideways wheel scrolls instead of zooming out.

바퀴

바퀴 5 · 후보 5 「Pattern Lab 에서 휠로 확대할 때 패널이 함께 구르지 않는다」

다음 바퀴

• 6 「첫 화면 영상이 움직임 줄이기를 켠 사람에겐 사진으로 나오고, 탭은 열린 탭을 화면 읽기 프로그램에도 알린다」: 포스터 /product_v2.jpg 가 이미 있고, 폰 단추의 aria-pressed 를 데스크톱 단추로 옮기면 돼요.
• 7 「가이드 끝의 「다음」 링크가 사이트 안 쪽은 다시 불러오지 않고 넘어가고, 밖으로 가는 링크만 ↗ 를 달고 새 탭에서 열린다」: BuildCards.tsx 의 Links 꼴을 가져오면 돼요.
• 8 「한국어 가이드에서 화면 읽기 프로그램이 한국어 이름을 읽는다」: AudioShots.tsx 가 이미 언어별 alt 를 써서 본이 있어요.

https://claude.ai/code/session_011XiRG6u444B5VRcNGmCgvy

---

Generated by Claude Code