178 lines
6.1 KiB
Markdown
178 lines
6.1 KiB
Markdown
# 2026-02-05 작업 기록
|
||
|
||
## 요약
|
||
v5 그리드 시스템 통합 완료, 그리드 가이드 재설계, **드래그앤드롭 좌표 버그 수정**, popdocs 문서 구조 재정비
|
||
|
||
---
|
||
|
||
## 완료
|
||
|
||
### 드래그앤드롭 완전 수정 (저녁)
|
||
- [x] 스케일 보정 누락 문제 해결
|
||
- [x] calcGridPosition 함수 추가
|
||
- [x] DND 타입 상수 통합 (constants/dnd.ts)
|
||
- [x] 불필요한 toast 메시지 제거
|
||
- [x] 컴포넌트 이동/리사이즈 정상 작동 확인
|
||
- [x] **컴포넌트 중첩(겹침) 문제 해결** - toast import 누락 수정
|
||
- [x] **리사이즈 핸들 작동 문제 해결** - useDrop 훅 통합
|
||
|
||
### v5 통합 작업
|
||
- [x] 레거시 파일 삭제 (PopCanvasV4, PopFlexRenderer, PopLayoutRenderer 등)
|
||
- [x] 파일명 정규화 (V5 접미사 제거)
|
||
- [x] 뷰어 페이지 v5 전용으로 업데이트
|
||
- [x] 백엔드 screenManagementService v5 전용 단순화
|
||
- [x] DB 기존 레이아웃 데이터 삭제
|
||
|
||
### 문서 재정비 작업
|
||
- [x] SAVE_RULES.md 생성 (AI 저장/조회 규칙)
|
||
- [x] README.md 재작성 (진입점 역할)
|
||
- [x] STATUS.md 생성 (현재 상태)
|
||
- [x] PROBLEMS.md 생성 (문제-해결 색인)
|
||
- [x] INDEX.md 생성 (기능별 색인)
|
||
- [x] sessions/ 폴더 구조 도입
|
||
|
||
### 디자이너 완성 작업
|
||
- [x] 컴포넌트 팔레트 UI 추가 (ComponentPalette.tsx)
|
||
- [x] PopCanvas.tsx 타입 오류 수정
|
||
- [x] 드래그앤드롭 연결
|
||
|
||
### 그리드 가이드 재설계
|
||
- [x] GridGuide.tsx 삭제 (SVG 기반 → 좌표 불일치 문제)
|
||
- [x] PopRenderer.tsx 격자 셀 렌더링 (CSS Grid 기반, 동일 좌표계)
|
||
- [x] PopCanvas.tsx 행/열 라벨 추가 (캔버스 바깥)
|
||
- [x] 컴포넌트 타입 단순화 (pop-sample 1개)
|
||
|
||
### 기반 정리 작업
|
||
- [x] pop-layout.ts: PopComponentType을 pop-sample 1개로 단순화
|
||
- [x] ComponentPalette.tsx: 샘플 박스 1개만 표시
|
||
- [x] PopRenderer.tsx: 샘플 박스 렌더링으로 단순화
|
||
|
||
---
|
||
|
||
## 미완료
|
||
|
||
- [x] 실제 화면 테스트 (디자이너 페이지) → 완료, 정상 작동
|
||
- [x] 간격 조정 규칙 결정 → 2026-02-06 Gap 프리셋으로 해결 (좁게/보통/넓게)
|
||
|
||
---
|
||
|
||
## 그리드 가이드 재설계 상세
|
||
|
||
### 문제 원인
|
||
1. GridGuide.tsx가 SVG로 별도 렌더링 → CSS Grid 기반 컴포넌트와 좌표계 불일치
|
||
2. PopRenderer의 그리드 배경이 희미 (rgba 0.2)
|
||
3. 행/열 번호 라벨 없음
|
||
|
||
### 해결 방안 (Option C 하이브리드)
|
||
```
|
||
역할 분담:
|
||
- PopRenderer: 격자선 + 컴포넌트 (같은 좌표계)
|
||
- PopCanvas: 라벨 + 줌/패닝 + 드롭존
|
||
- GridGuide: 삭제
|
||
```
|
||
|
||
### 핵심 설계
|
||
```
|
||
SVG 격자 (별도 좌표) → CSS Grid 셀 (동일 좌표)
|
||
- gridCells: 12열 × 20행 = 240개 실제 DOM 셀
|
||
- border-dashed border-blue-300/40 스타일
|
||
- 컴포넌트는 z-index:10으로 위에 표시
|
||
```
|
||
|
||
### 라벨 구조
|
||
```
|
||
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10][11][12] ← 열 라벨 (캔버스 상단)
|
||
┌───────────────────────────────────────────┐
|
||
[1] │ │ │ │ │ │ │ │ │ │ │ │
|
||
[2] │ │ │ │ │ │ │ │ │ │ │ │
|
||
[3] │ │ │ │ ■ │ │ │ │ │ │ │ │ ← 5열 3행
|
||
└───────────────────────────────────────────┘
|
||
↑ 행 라벨 (캔버스 좌측)
|
||
```
|
||
|
||
---
|
||
|
||
## 대화 핵심
|
||
|
||
### v5 전환 배경
|
||
- **문제**: v4 Flexbox로 반응형 시도 → 배치 예측 불가능
|
||
- **상급자 피드백**: "스크린 규격과 마진 간격 규칙을 먼저 정해라"
|
||
- **연구**: Softr, Ant Design, Material Design 분석
|
||
- **결정**: CSS Grid 기반 그리드 시스템 채택
|
||
|
||
### 그리드 가이드 재설계 배경
|
||
- **문제**: SVG GridGuide와 CSS Grid PopRenderer가 좌표계 불일치
|
||
- **원칙**: "격자선은 컴포넌트와 같은 좌표계에서 태어나야 한다"
|
||
- **결정**: CSS Grid 기반 실제 DOM 셀로 격자 렌더링
|
||
|
||
### popdocs 재정비 배경
|
||
- **문제**: 문서 구조가 AI 에이전트 진입점 역할 못함
|
||
- **해결**: Progressive Disclosure 적용, 저장/조회 규칙 명시화
|
||
- **참고**: 2025-2026 AI 컨텍스트 엔지니어링 최신 기법
|
||
|
||
---
|
||
|
||
## 빌드 결과
|
||
|
||
```
|
||
exit_code: 0
|
||
popScreenMngList: 29.4 kB (311 KB First Load)
|
||
총 변경: 8,453줄 삭제, 1,819줄 추가 (순감 6,634줄)
|
||
```
|
||
|
||
---
|
||
|
||
## 관련 링크
|
||
|
||
- ADR: [decisions/003-v5-grid-system.md](../decisions/003-v5-grid-system.md)
|
||
- 삭제된 파일 목록: FILES.md 하단 "삭제된 파일" 섹션
|
||
|
||
---
|
||
|
||
## 드래그앤드롭 좌표 버그 수정 상세
|
||
|
||
### 문제 현상
|
||
- 컴포넌트를 아래로 드래그해도 위로 올라감
|
||
- Row 92 같은 비정상적인 좌표로 배치됨
|
||
- 드래그 이동/리사이즈가 전혀 작동하지 않음
|
||
|
||
### 핵심 원인
|
||
캔버스에 `transform: scale(0.8)` 적용 시 좌표 계산 불일치:
|
||
```
|
||
getBoundingClientRect() → 스케일 적용된 크기 (1024px → 819px)
|
||
getClientOffset() → 뷰포트 기준 실제 마우스 좌표
|
||
이 둘을 그대로 계산하면 좌표가 완전히 틀림
|
||
```
|
||
|
||
### 해결 방법
|
||
단순한 상대 좌표 + 스케일 보정:
|
||
```typescript
|
||
// 캔버스 내 상대 좌표 (스케일 보정)
|
||
const relX = (offset.x - canvasRect.left) / canvasScale;
|
||
const relY = (offset.y - canvasRect.top) / canvasScale;
|
||
|
||
// 그리드 좌표 계산 (실제 캔버스 크기 사용)
|
||
calcGridPosition(relX, relY, customWidth, breakpoint.columns, ...);
|
||
```
|
||
|
||
### 추가 수정
|
||
- DND 타입 상수를 3개 파일에서 중복 정의 → `constants/dnd.ts`로 통합
|
||
- 불필요한 "컴포넌트가 이동되었습니다" toast 메시지 제거
|
||
|
||
---
|
||
|
||
## 다음 작업자 참고
|
||
|
||
1. **테스트 완료**
|
||
- 디자이너 페이지에서 그리드 가이드 확인 ✅
|
||
- 컴포넌트 드래그앤드롭 테스트 ✅
|
||
- 4가지 모드 전환 테스트 (추가 확인 필요)
|
||
|
||
2. **향후 결정 필요**
|
||
- 간격 조정: 전역 고정 vs 화면별 vs 컴포넌트별
|
||
- 행 수: 현재 20행 고정, 동적 변경 여부
|
||
|
||
3. **Phase 4 준비**
|
||
- 실제 컴포넌트 구현 (pop-label, pop-button 등)
|
||
- 데이터 바인딩 연결
|