문제-해결 색인
용도: "이전에 비슷한 문제 어떻게 해결했어?"
검색 팁: Ctrl+F로 키워드 검색 (에러 메시지, 컴포넌트명 등)
렌더링 관련
| 문제 |
해결 |
날짜 |
키워드 |
| rowSpan이 적용 안됨 |
gridTemplateRows를 1fr로 변경 |
2026-02-02 |
grid, rowSpan, CSS |
| 컴포넌트 크기 스케일 안됨 |
viewportWidth 기반 scale 계산 추가 |
2026-02-04 |
scale, viewport, 반응형 |
DnD (드래그앤드롭) 관련
| 문제 |
해결 |
날짜 |
키워드 |
| useDrag 에러 (뷰어에서) |
isDesignMode 체크 후 early return |
2026-02-04 |
DnD, useDrag, 뷰어 |
| DndProvider 중복 에러 |
최상위에서만 Provider 사용 |
2026-02-04 |
DndProvider, react-dnd |
| 컴포넌트 중첩(겹침) |
toast import 누락 → sonner에서 import |
2026-02-05 |
겹침, overlap, toast |
| 리사이즈 핸들 작동 안됨 |
useDrop 2개 중복 → 단일 useDrop으로 통합 |
2026-02-05 |
resize, 핸들, useDrop |
| 드래그 좌표 완전 틀림 (Row 92) |
캔버스 scale 보정 누락 → (offset - rect.left) / scale |
2026-02-05 |
scale, 좌표, transform |
| DND 타입 상수 불일치 |
3개 파일에 중복 정의 → constants/dnd.ts로 통합 |
2026-02-05 |
상수, DND, 타입 |
| 컴포넌트 이동 안됨 |
useDrop accept 타입 불일치 → 공통 상수 사용 |
2026-02-05 |
이동, useDrop, accept |
타입 관련
| 문제 |
해결 |
날짜 |
키워드 |
| 인터페이스 이름 불일치 |
V5 접미사 제거, 통일 |
2026-02-05 |
타입, interface, Props |
| v3/v4 타입 혼재 |
v5 전용으로 통합, 레거시 삭제 |
2026-02-05 |
버전, 타입, 마이그레이션 |
레이아웃 관련
| 문제 |
해결 |
날짜 |
키워드 |
| Flexbox 배치 예측 불가 |
CSS Grid로 전환 (v5) |
2026-02-05 |
Flexbox, Grid, 반응형 |
| 4모드 각각 배치 힘듦 |
제약조건 기반 시스템 (v4) |
2026-02-03 |
모드, 반응형, 제약조건 |
| 4모드 자동 전환 안됨 |
useResponsiveMode 훅 추가 |
2026-02-01 |
모드, 훅, 반응형 |
저장/로드 관련
| 문제 |
해결 |
날짜 |
키워드 |
| 레이아웃 버전 충돌 |
isV5Layout 타입 가드로 분기 |
2026-02-05 |
버전, 로드, 타입가드 |
| 빈 레이아웃 판별 실패 |
components 존재 여부로 판별 |
2026-02-04 |
빈 레이아웃, 로드 |
UI/UX 관련
| 문제 |
해결 |
날짜 |
키워드 |
| root 레이아웃 오염 |
tempLayout 도입 (임시 상태 분리) |
2026-02-04 |
tempLayout, 상태, 오염 |
| 속성 패널 다른 모드 수정 |
isDefaultMode 체크로 비활성화 |
2026-02-04 |
속성패널, 모드, 비활성화 |
그리드 가이드 관련
| 문제 |
해결 |
날짜 |
키워드 |
| SVG 격자와 CSS Grid 좌표 불일치 |
GridGuide.tsx 삭제, PopRenderer에서 CSS Grid 셀로 격자 렌더링 |
2026-02-05 |
격자, SVG, CSS Grid, 좌표 |
| 행/열 라벨 위치 오류 |
PopCanvas에 absolute positioning 라벨 추가 |
2026-02-05 |
라벨, 행, 열, 정렬 |
| 격자선과 컴포넌트 불일치 |
동일한 CSS Grid 좌표계 사용 |
2026-02-05 |
통합, 정렬, 일체감 |
해결 완료 (이번 세션)
| 문제 |
상태 |
해결 방법 |
| PopCanvas 타입 오류 |
해결 |
임시 타입 가드 추가 |
| 팔레트 UI 없음 |
해결 |
ComponentPalette.tsx 신규 추가 |
| SVG 격자 좌표 불일치 |
해결 |
CSS Grid 기반 통합 |
| 드래그 좌표 완전 틀림 |
해결 |
scale 보정 + calcGridPosition 함수 |
| DND 타입 상수 불일치 |
해결 |
constants/dnd.ts 통합 |
| 컴포넌트 이동 안됨 |
해결 |
useDrop/useDrag 타입 통일 |
| 컴포넌트 중첩(겹침) |
해결 |
toast import 추가 → 겹침 감지 로직 정상 작동 |
| 리사이즈 핸들 작동 안됨 |
해결 |
useDrop 통합 (2개 → 1개) |
드래그 좌표 버그 상세 (2026-02-05)
증상
- 컴포넌트를 아래로 드래그 → 위로 올라감
- Row 92 같은 비정상 좌표
- 드래그 이동/리사이즈 전혀 작동 안됨
원인
캔버스: transform: scale(0.8)
getBoundingClientRect() → 스케일 적용된 크기 (1024px → 819px)
getClientOffset() → 뷰포트 기준 실제 마우스 좌표
이 둘을 그대로 계산하면 좌표 완전 틀림
해결
// 스케일 보정된 상대 좌표 계산
const relX = (offset.x - canvasRect.left) / canvasScale;
const relY = (offset.y - canvasRect.top) / canvasScale;
// 실제 캔버스 크기로 그리드 계산
calcGridPosition(relX, relY, customWidth, ...);
교훈
CSS transform: scale() 적용된 요소에서 좌표 계산 시,
getBoundingClientRect()는 스케일 적용된 값을 반환하지만
마우스 좌표는 뷰포트 기준이므로 반드시 스케일 보정 필요
새 문제-해결 추가 시 해당 카테고리 테이블에 행 추가