[patternflow-bot]

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

Pattern Lab Pixel 패널의 − + 단추는 그림을 뷰포트 왼쪽 위를 기준으로 키워서, 크게 보던 곳이 누를 때마다 옆으로 밀려났어요. 1440 화면에서 10× 일 때 + 한 번에 가운데가 64번째 칸에서 58번째로 갔어요. 휠처럼 지금 보는 가운데를 붙잡게 고쳐서, 머지하면 − + 를 눌러도 보던 칸이 패널 가운데에 그대로 남아요.

좋아지는 것: 픽셀 그림을 − + 로 키워도 보던 곳이 밀리지 않는다 — 다시 찾아 굴릴 일이 없다

할 일

• 앞 바퀴 PR 댓글 읽기. 바퀴 PR 83개([DONE] Pattern Lab 에서 매트릭스 크기를 바꾼 뒤에도 픽셀 되돌리기가 그림을 지킨다 #96~[DONE] 폰에서 Pattern Lab 의 Pixel 패널이 그림을 1× 대신 2× 로 맞춰 연다 #210)의 대화 댓글, 리뷰, 줄 댓글이 다 합쳐 0개예요
• 고르기. 「창작자 지시」 15 는 [DONE] Pattern Lab 에서 AI 갤러리와 Gemini 키 칸이 없어지고, Copy prompt 옆에서 v-field · rgb 를 고른다 #183[DONE] Pattern Lab 에 처음 온 사람이 막히는 곳 16개를 재서 바퀴 후보 표 맨 위에 넣는다 #188, 후보 118 은 [DONE] 폰에서 Pattern Lab 아래 탭을 눌러도 다른 패널이 닫히지 않고, 「⌄」 메뉴가 패널 위에 열린다 #189[DONE] 폰에서 Pattern Lab 의 Pixel 패널이 그림을 1× 대신 2× 로 맞춰 연다 #210 가 했어요. 남은 줄 22개 가운데 맨 위가 후보 19
• dev 에서 1440×900 을 다시 재기. 표와 같은 64.1 → 58.2, 29.1 (+), 71.2, 32 (− −)
• 고치기와 시험
• lint, typecheck, build, check:ci
• 폰 390, 데스크톱 1440 사진
• dev merge. 일하는 동안 [DONE] 연구 페이지에 철도와 필름·영화 갈래가 열리고, 강삭철도와 X선 해골, 용암 호수를 포함한 새 패턴 열 개가 선다 #211 이 머지돼 0c040d0 을 합쳤어요. incoming/pattern-study/ 만 바뀌어서 web/ 은 그대로이고, check:drift 를 다시 돌려 통과했어요
• GitHub 검사 초록

한 일

• app/pattern-lab/panels/pixel/usePixelViewport.ts: 휠만 쓰던 붙잡을 자리(wheelAnchor)를 zoomAnchor 와 anchorAt 으로 꺼냈어요. 휠은 커서 자리를, − + 가 부르는 zoomBy 는 뷰포트의 보이는 가운데를 넣어요. 확대 뒤 굴림을 되돌리는 레이아웃 효과는 둘이 같이 써요. Director 의 ± 가 보이는 가운데를 지키는 꼴(panels/director/useTimelineZoom.ts:62~:73)을 따랐어요. zoomBy 는 지금 배율을 zoomRef 에서 읽고, 1× 나 32× 끝에서 더 누르면 아무것도 하지 않아요.
• app/pattern-lab/panels/PixelPanel.test.tsx: 300×200 패널을 6× 로 키워 (50, 20) 칸을 가운데에 두고, + + − − 를 누를 때마다 가운데 칸이 그대로인지, 끝에 굴림이 처음 자리로 돌아오는지 봐요.

증거

Playwright 로 /pattern-lab 을 열고 Pixel 탭, 「+ Add pixel layer」 를 누른 뒤 − + 로 배율을 맞추고, 그림 가운데를 뷰포트 가운데로 굴려서 쟀어요. 값은 뷰포트 가운데 점이 128×64 그림의 몇째 칸에 있는지예요. 폰은 hasTouch, isMobile 을 준 창이에요.

창 · 단계	고치기 전	고친 뒤
1440×900 (뷰포트 649×648), 10× 가운데	64.1, 32	64.1, 32
1440×900, + 로 11×	58.2, 29.1	64, 32
1440×900, − − 로 9×	71.2, 32	64.1, 32
390×844 터치 (뷰포트 372×177), 10× 가운데	재지 않음	64, 32.1
390×844 터치, + 로 11×	재지 않음	64, 32
390×844 터치, − − 로 9×	재지 않음	64, 32.1

가운데가 아닌 곳도 봤어요. 12× 에서 45.5, 22.5 를 가운데에 두고 + 세 번, − 세 번을 누르니 390 에선 45.6, 22.6 을 거쳐 45.5, 22.5 로 돌아왔어요. 1440 에선 22.5 줄이 위에 붙어 가운데까지 굴러오지 않아서 45.5, 25.7 에서 시작했고, 45.6, 25.7 을 거쳐 45.5, 25.7 로 돌아왔어요. 폰의 고치기 전 값은 고친 빌드로 갈아 끼운 뒤에 폰을 재기 시작해서 없어요. 두 폭이 같은 zoomBy 를 불러요.

고친 것을 되돌리고(git stash 로 usePixelViewport.ts 만) 돌리면 새 시험이 빨개요.

   × PixelPanel > the zoom buttons keep the cell in the middle of the panel where it was
     → Unable to find an element with the text: 50,20.

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

npm ci                            → exit 0
npm run lint -- --max-warnings=0  → exit 0 (경고 0)
npm run typecheck                 → exit 0
npm run build                     → ✓ Generating static pages using 3 workers (145/145) in 12.4s
npm run check:ci                  → Test Files  97 passed (97) · Tests  1235 passed (1235)
                                    … passed virtual-panel · skipped links-absolute · skipped roadmap · exit 0
npm run check:voice               → check:voice: nothing found

GitHub 에선 dev 를 합친 head 86957fd 의 Drift checks 와 Web CI 가 둘 다 success 예요. 합치기 전 7510de3 에서도 둘 다 success 였어요.

10× 에서 그림 가운데 칸 (64, 32) 둘레에 주황 십자를 그리고 + 를 두 번 눌러 12× 로 키운 화면이에요. 십자가 패널 가운데에 남고, 상태 줄의 칸은 64,32 예요.

실행법

web/ 에서 npx vitest run src/app/pattern-lab/panels/PixelPanel.test.tsx. 손으로는 /pattern-lab 에서 Pixel, 「+ Add pixel layer」 를 누르고 + 로 그림을 패널보다 크게 키워요. 아무 칸에 점을 찍어 패널 가운데로 굴린 뒤 + − 를 누르면 점이 가운데에 남아요.

가정

• 붙잡는 점은 뷰포트의 보이는 가운데예요. getBoundingClientRect 의 왼쪽 위에 테두리(clientLeft, clientTop)와 clientWidth, clientHeight 의 반을 더해요. 16px 패딩은 굴리는 칸 안이라 따로 빼지 않았어요.
• 그림이 뷰포트보다 작으면 margin: auto 가 가운데에 두고 브라우저가 굴림을 0 으로 잡아서 전과 같아요. 1440 에서 4× 로 돌아가면 64, 32 예요.
• Fit 은 건드리지 않았어요. 표의 줄대로 그림이 다 들어가 가운데에 와요.
• 시험은 처음 맞춤으로 2× 에서 열려 + 네 번으로 6× 가 돼요. 그 네 번도 새 길을 지나고, 그 뒤 굴림을 손으로 정해 (50, 20) 을 가운데에 둬요. jsdom 은 굴림을 잡지 않아서 셈이 그대로 맞아요.

Changelog

Web

• Pattern Lab's Pixel zoom buttons keep the middle of the view still. − and + zoomed from the viewport's top-left corner, so one + at 10× moved the middle of the 649px desktop panel from column 64 to 58. They now hold the cell in the middle the way the wheel holds the one under the cursor.

경험

언제: 바퀴에서 Pattern Lab Pixel 패널의 굴림이나 확대를 jsdom 시험으로 볼 때
교훈: panelSize 로 패널 크기를 주면 처음 맞춤이 배율을 바꾸니 상태 줄의 배율부터 확인하고, 굴림은 overlay 의 getBoundingClientRect 를 scrollLeft 로 짓는 휠 시험 틀을 빌린다 (jsdom 은 굴림을 잡지 않는다)
근거: #214 에서 300×200 패널이 2× 로 열려 + 네 번으로 6× 를 만들었고, 그 틀로 + + − − 뒤 굴림이 처음 값으로 돌아오는지 봤어요

바퀴

바퀴 84 · 후보 19 「Pattern Lab Pixel 의 − + 단추가 보이는 가운데를 붙잡고 확대한다」

다음 바퀴

• 20 「Lab 의 Share 창이 Esc 로 닫힌다」. components/community/PublishModal.tsx 에 키 리스너가 없어 바깥 판 클릭으로만 닫혀요. Lab 의 다른 창이 쓰는 lib/hooks/useDialog.ts 꼴이 있고, To hardware 창의 주석과 시험도 같이 고쳐요.
• 21 「커뮤니티의 「Add firmware header」 창이 Lab 의 지금 단추 이름을 말한다」. AddHeaderModal.tsx:154, :176 이 Lab 에 없는 「Copy C++ prompt」 를 가리켜요.
• 22 「범위가 0.001 보다 좁은 노브도 커뮤니티 카드에서 Lab 과 같은 값으로 돈다」. 노브를 0..1 로 펴는 바닥값이 0.0001 과 0.001 로 갈렸어요. 표가 크면 커뮤니티 쪽부터 하라고 적었어요.

https://claude.ai/code/session_013Z1E4f68JawhtXCKxLEy8h

---

Generated by Claude Code