Repository navigation
feat: 블록 팔레트 카테고리 전환 + 확장 블록 카탈로그 - #31
Conversation
![inryeok-bot[bot]](https://avatars.githubusercontent.com/in/4815249?s=60&v=4){kind=small}
| return ( | ||
| <li> | ||
| <div | ||
| role={onGrab ? 'button' : undefined} |
There was a problem hiding this comment.
🟠 MEDIUM · BEHAVIOR
팔레트의 버튼 역할 요소를 키보드로 조작할 수 없습니다
onGrab이 있는 항목은 div에 role="button"만 부여하고 tabIndex나 키보드 이벤트를 제공하지 않습니다. 따라서 새로 추가된 이동·회전·동작 블록은 마우스나 터치로만 꺼낼 수 있고, 키보드 사용자는 포커스를 옮기거나 블록을 캔버스에 추가할 수 없습니다.
실제 <button>을 사용하고 Enter/Space로 블록을 추가하는 동작을 제공하거나, 최소한 포커스와 동등한 키보드 조작 경로를 구현해야 합니다.
There was a problem hiding this comment.
ce55c98 에서 수정했습니다. tabIndex + onKeyDown(Enter/Space)을 추가해, 드래그와 별개로 키보드로도 스택 맨 끝에 블록을 바로 연결할 수 있게 했습니다(useBlockDrag.addToStackEnd). 실제 대신 이 경로를 택한 이유는 같은 요소에 포인터 드래그(pointerdown)와 네이티브 click이 겹치면 짧은 드래그 후 같은 자리에서 놓였을 때 중복 추가될 위험이 있어서입니다.
Figma "뽀삐" node 34:951(Slide 5) — 카테고리 4개(시작·흐름·이동·동작)를 각각 선택했을 때 팔레트가 보여주는 블록 목록 레퍼런스를 구현한다. - 팔레트 카테고리 레일을 클릭으로 전환 가능하게 만들고, 카테고리별 블록 목록을 디자인대로 채운다 - 이동·동작 카테고리의 새 블록 10종(앞으로/좌우 회전 이동·정지, 앉기·일어서기·하트·춤추기·구르기·공격)을 블록 모델·시뮬레이션 wire 타입에 추가 — 드래그·스냅·파라미터 편집·직렬화·안전 제한 검증까지 기존 블록과 동일 경로로 연결 - 회전 각도 안전 범위(LIMITS.rotateDegree) 신규 정의, 앞으로 이동은 뒤로 이동과 동일하게 총 이동 거리(안전 구역 판정)에 합산 - 키보드로도 팔레트 블록을 꺼낼 수 있게 addToStackEnd 추가(PR #31 리뷰 반영) Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
팀원 파트(#32 블록 삭제, #45 서버 계약 정렬)가 main에 먼저 들어와 있어 #28을 그 위로 리베이스했다. 그 과정에서 필요했던 보정: - toServerBlockProgram 의 블록 종류 switch 가 새 블록 10종을 몰라 컴파일이 깨졌다. greet 과 같은 방식으로 "서버 계약이 아직 지원하지 않는 블록" 오류를 던지도록 명시적으로 채워 넣었다(실제 서버 계약이 확정되기 전까지는 이 블록들을 쓴 프로젝트는 로컬 초안으로만 남는다 — greet 도 이미 같은 상태). - 팔레트 카테고리 전환으로 '종료'가 '흐름' 목록이 아니라 '시작' 탭 안으로 옮겨져, 기존 통합 테스트(blockDnd.test.tsx)가 '시작' 탭을 먼저 클릭하지 않고 종료 팔레트 버튼을 찾다가 실패했다 — 탭 전환을 테스트에 추가했다. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
6c9423e to
0158dda
Compare
main 리베이스 완료이 PR을 열어둔 사이 팀원 파트(#32 블록 삭제, #45 서버 계약 정렬 등)가 main에 먼저 머지됐고, 실수로 겹쳤던 #34·#36은 PR #39로 되돌려졌습니다(제 파트 #28·#29·#30, 이 PR은 그대로 두고). 최신 main 위로 리베이스해서 아래 세 가지를 반영했습니다.
|
Summary
measuredBlock헬퍼로 정리했습니다.Closes #28
Test plan
npm run typecheck/npm run lint통과npx vitest run— 80개 테스트 통과 (신규 케이스 포함)/experience에서 카테고리 4개 전환 + 신규 블록(일어서기) 드래그·캔버스 배치·구조 오류 배너 확인, 콘솔 에러 없음