수학교구 SVG 캔버스의 인터랙션 구조: 입력 이벤트, store 선택 흐름, 교구별 조작 규칙
수학교구 SVG 캔버스에서 PointerEvent와 KeyboardEvent를 하나의 인터랙션 상태로 묶고, 교구를 store와 registry로 추적하며, drag·rotate·place 규칙을 교구 객체로 분기한 구조를 정리합니다.
2026년 5월 13일
7분 읽기
Writing
카테고리별로 모았습니다.
- SVG 에디터 인터랙션이 꼬일 때 디버깅한 순서
- SVG 에디터에서 문서 상태와 편집 상태의 경계를 나눈 기준
- Three.js 3D 수학교구의 가림 문제를 depthTest, depthWrite, renderOrder로 정리한 기준
- SVG 수학교구 20종을 확장 가능하게 만든 DigitalMathElement 설계
- 수학교구 SVG 캔버스의 인터랙션 구조: 입력 이벤트, store 선택 흐름, 교구별 조작 규칙
- 2D SVG 교구와 3D Three.js 교구를 하나의 캔버스 경험으로 묶기
- SVG 에디터 undo/redo 스냅샷 설계
- SVG 좌표 변환에서 포인터 위치가 어긋나는 문제
- SVG 도형 리사이즈 핸들 제약 조건 정리
- Three.js 오브젝트 선택 디버깅: Raycaster 대상, hit area, 선택 우선순위 정리
- Three.js 좌표축 클릭 시 카메라 방향 꼬임 문제
- Three.js 카메라 상태 저장
- Three.js 겨냥도 구현하기
- Three.js LineGeometry 문제 해결
- useLine 로직 통합하기