kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
ERP-node/popdocs/sessions/2026-02-05.md

6.1 KiB
Raw Blame History

2026-02-05 작업 기록

요약

v5 그리드 시스템 통합 완료, 그리드 가이드 재설계, 드래그앤드롭 좌표 버그 수정, popdocs 문서 구조 재정비

완료

드래그앤드롭 완전 수정 (저녁)

  • 스케일 보정 누락 문제 해결
  • calcGridPosition 함수 추가
  • DND 타입 상수 통합 (constants/dnd.ts)
  • 불필요한 toast 메시지 제거
  • 컴포넌트 이동/리사이즈 정상 작동 확인
  • 컴포넌트 중첩(겹침) 문제 해결 - toast import 누락 수정
  • 리사이즈 핸들 작동 문제 해결 - useDrop 훅 통합

v5 통합 작업

  • 레거시 파일 삭제 (PopCanvasV4, PopFlexRenderer, PopLayoutRenderer 등)
  • 파일명 정규화 (V5 접미사 제거)
  • 뷰어 페이지 v5 전용으로 업데이트
  • 백엔드 screenManagementService v5 전용 단순화
  • DB 기존 레이아웃 데이터 삭제

문서 재정비 작업

  • SAVE_RULES.md 생성 (AI 저장/조회 규칙)
  • README.md 재작성 (진입점 역할)
  • STATUS.md 생성 (현재 상태)
  • PROBLEMS.md 생성 (문제-해결 색인)
  • INDEX.md 생성 (기능별 색인)
  • sessions/ 폴더 구조 도입

디자이너 완성 작업

  • 컴포넌트 팔레트 UI 추가 (ComponentPalette.tsx)
  • PopCanvas.tsx 타입 오류 수정
  • 드래그앤드롭 연결

그리드 가이드 재설계

  • GridGuide.tsx 삭제 (SVG 기반 → 좌표 불일치 문제)
  • PopRenderer.tsx 격자 셀 렌더링 (CSS Grid 기반, 동일 좌표계)
  • PopCanvas.tsx 행/열 라벨 추가 (캔버스 바깥)
  • 컴포넌트 타입 단순화 (pop-sample 1개)

기반 정리 작업

  • pop-layout.ts: PopComponentType을 pop-sample 1개로 단순화
  • ComponentPalette.tsx: 샘플 박스 1개만 표시
  • PopRenderer.tsx: 샘플 박스 렌더링으로 단순화

미완료

  • 실제 화면 테스트 (디자이너 페이지) → 완료, 정상 작동
  • 간격 조정 규칙 결정 → 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줄)

관련 링크

드래그앤드롭 좌표 버그 수정 상세

문제 현상

  • 컴포넌트를 아래로 드래그해도 위로 올라감
  • 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, breakpoint.columns, ...);

추가 수정

  • DND 타입 상수를 3개 파일에서 중복 정의 → constants/dnd.ts로 통합
  • 불필요한 "컴포넌트가 이동되었습니다" toast 메시지 제거

다음 작업자 참고

  1. 테스트 완료

    • 디자이너 페이지에서 그리드 가이드 확인 ✅
    • 컴포넌트 드래그앤드롭 테스트 ✅
    • 4가지 모드 전환 테스트 (추가 확인 필요)

  2. 향후 결정 필요

    • 간격 조정: 전역 고정 vs 화면별 vs 컴포넌트별
    • 행 수: 현재 20행 고정, 동적 변경 여부

  3. Phase 4 준비

    • 실제 컴포넌트 구현 (pop-label, pop-button 등)
    • 데이터 바인딩 연결