[DONE] Pattern Lab 의 Del 이 그림이 든 레이어를 지우기 전에 한 번 묻는다

[patternflow-bot]

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

Pattern Lab 의 Del 은 누르자마자 레이어를 지웠고 되돌릴 길이 없었어요. 자동 저장이 3초 안에 지운 판을 덮어써서 잘못 한 번 누르면 픽셀 그림 하나가 사라졌어요. 머지하면 그림이 든 픽셀 레이어나 코드를 고친 코드 레이어는 지우기 전에 이름을 대고 한 번 물어요. 빈 레이어는 지금처럼 바로 지워요.

좋아지는 것: 레이어를 지우기 전에 한 번 묻는다 — 잘못 눌러 그림을 잃지 않는다

할 일

• incoming/ROUND.md 읽기
• 앞 바퀴 PR([DONE] Pattern Lab 에서 매트릭스 크기를 바꾼 뒤에도 픽셀 되돌리기가 그림을 지킨다 #96, [DONE] 링크를 메신저나 X 에 붙이면 쪽마다 제 제목과 그림이 뜬다 #97)의 댓글·리뷰·줄 댓글 읽기. 셋 다 비어 있어요
• 후보 3 고르기. dev 에선 아직 고쳐지지 않았어요
• Del 이 묻게 고치고 시험 붙이기
• 고치기 전 판에서 새 시험이 빨개지는지 보기
• lint, typecheck, build, check:ci, check:voice
• 폰 390px 와 데스크톱 1440px 에서 직접 눌러 보기
• dev merge

한 일

app/pattern-lab/panels/LayersPanel.tsx 의 Del 이 window.confirm 으로 Delete the layer "Pixel 1"? It can't be brought back. 을 물어요. Director 가 쇼를 갈아 끼우기 전에 묻는 꼴과 같아요(DirectorPanel.tsx:97). 취소하면 아무것도 바뀌지 않아요.

묻지 않고 지우는 레이어가 둘 있어요. 알파가 0 이 아닌 픽셀이 하나도 없는 픽셀 레이어, 그리고 코드가 STARTER_CODE 와 글자까지 같은 코드 레이어예요. holdsWork 가 이 둘을 가려요.

새 시험 app/pattern-lab/panels/LayersPanel.test.tsx 는 여섯 개예요. 한 레이어일 때 Del 이 꺼져 있다. 빈 픽셀 레이어와 시작 코드 그대로인 코드 레이어는 묻지 않고 지운다. 그린 픽셀 레이어는 묻는다. 취소하면 픽셀까지 남는다. 확인하면 지운다. 코드를 바꾼 레이어도 묻는다.

증거

고치기 전 LayersPanel.tsx 로 새 시험을 돌리면 묻는 시험 둘이 빨개져요.

   × LayersPanel Del > asks before deleting a drawn pixel layer, and Cancel keeps it 34ms
   × LayersPanel Del > asks before deleting a code layer whose code was changed 20ms
      Tests  2 failed | 4 passed (6)

고친 판에서 web/ 의 다섯 줄 끝:

npm ci                            added 794 packages, and audited 795 packages in 34s
npm run lint -- --max-warnings=0  lint exit 0
npm run typecheck                 typecheck exit 0
npm run build                     ✓ Compiled successfully in 21.6s · build exit 0
npm run check:ci                  ✓ src/app/pattern-lab/panels/LayersPanel.test.tsx (6 tests)
                                  Test Files  38 passed (38) · Tests  514 passed (514)
                                  skipped  roadmap · check:ci exit 0
npm run check:voice               check:voice: nothing found

roadmap 은 gh 로그인이 없는 컨테이너라 skipped 예요. npm ci 가 알리는 audit 25건은 잠금 파일 그대로의 것이에요.

빌드한 사이트(next start)를 Chromium 으로 열어 직접 눌렀어요. 두 폭 다 같은 줄이 나왔어요.

1440 blank pixel deleted, dialogs: 0 [ 'Code 1' ]
1440 after Cancel, dialogs: ["Delete the layer \"Pixel 1\"? It can't be brought back."] [ 'Pixel 1', 'Code 1' ]
1440 after OK, dialogs: 2 [ 'Code 1' ]
390 blank pixel deleted, dialogs: 0 [ 'Code 1' ]
390 after Cancel, dialogs: ["Delete the layer \"Pixel 1\"? It can't be brought back."] [ 'Pixel 1', 'Code 1' ]
390 after OK, dialogs: 2 [ 'Code 1' ]

사진은 주황 선을 그은 Pixel 1 에서 Del 을 누르고 취소한 뒤예요. 레이어와 선이 그대로 남았어요.

실행법

cd web
npx vitest run src/app/pattern-lab/panels/LayersPanel.test.tsx
npm run dev   # /pattern-lab 에서 + Pixel, 한 줄 긋고 Del

가정

• 빈 레이어는 묻지 않아요. 후보 줄의 까닭은 그림이 사라지는 것이고, 빈 레이어엔 잃을 것이 없어요. + Pixel 을 잘못 눌러 바로 지울 때마다 묻는 창이 뜨면 번거로워요.
• 묻는 창은 새로 짓지 않고 브라우저의 window.confirm 을 썼어요. Lab 의 Director 와 Capture 가 이미 그렇게 물어요.
• 시험 파일이 .test.tsx 예요. ROUND.md 는 *.test.ts 라고 적었지만 패널을 그리려면 JSX 가 들고, vitest.config.ts 는 src/**/*.test.{ts,tsx} 를 다 찾아요. 같은 폴더의 DirectorPanel.test.tsx, PixelPanel.test.tsx 도 그래요.
• 사진엔 묻는 창이 없어요. 헤드리스 Chromium 의 스크린샷은 브라우저 대화창을 그리지 않아요. 창에 뜬 글은 Playwright 의 dialog 이벤트로 받아 위에 적었어요.
• 표 밖: 390px 에서 Pixel 패널의 768px 캔버스가 패널 밖으로 넘쳐 왼쪽 30px 쯤만 보이고, 가운데를 누르면 화면 밖이라 그려지지 않아요. 후보 4(폰 배치)와 같은 뿌리로 보여 고치지 않았어요.

Changelog

Web

• Pattern Lab asks before Del removes a layer with work in it. Deleting a layer has no undo and autosave wrote the smaller stack over the saved project within 3 s, so one misclick lost a pixel drawing. A blank pixel layer or a code layer still holding the starter pattern goes without asking.

바퀴

바퀴 3 · 후보 3 「Pattern Lab 의 Del 이 레이어를 지우기 전에 한 번 묻는다」

다음 바퀴

• 후보 4 「폰에서 Pattern Lab 패널이 한 칸씩 넓게 보인다」. 390px 에서 독이 세 칸으로 눌려 글이 잘리고, 이번에 보니 Pixel 캔버스도 패널 밖으로 넘쳐요.
• 후보 5 「Pattern Lab 에서 휠로 확대할 때 패널이 함께 구르지 않는다」. passive 리스너라 preventDefault() 가 먹지 않아요. 같은 Lab 의 useTimelineZoom.ts 에 고친 꼴이 있어요.
• 후보 6 「첫 화면 영상이 움직임 줄이기를 켠 사람에겐 사진으로 나오고, 탭은 열린 탭을 화면 읽기 프로그램에도 알린다」. 유튜브가 멈출 수 없게 돌고 prefers-reduced-motion 을 보지 않아요.

🤖 Generated with Claude Code

https://claude.ai/code/session_01BL8iimZp7KVXdh7mzkP7ex

---

Generated by Claude Code