기능별 색인
용도: "이 기능 어디있어?", "비슷한 기능 찾아줘"
검색 팁: Ctrl+F로 기능명, 키워드 검색
렌더링
| 기능 |
파일 |
함수/컴포넌트 |
설명 |
| 그리드 렌더링 |
PopRenderer.tsx |
PopRenderer |
CSS Grid 기반 v5 렌더링 |
| 위치 변환 |
gridUtils.ts |
convertPositionToMode() |
12칸 → 4/6/8칸 변환 |
| 모드 감지 |
pop-layout.ts |
detectGridMode() |
뷰포트 너비로 모드 판별 |
| 컴포넌트 스타일 |
PopRenderer.tsx |
convertPosition() |
그리드 좌표 → CSS |
드래그 앤 드롭
| 기능 |
파일 |
함수/컴포넌트 |
설명 |
| 드롭 영역 |
PopCanvas.tsx |
useDrop |
캔버스에 컴포넌트 드롭 |
| 좌표 계산 |
gridUtils.ts |
mouseToGridPosition() |
마우스 → 그리드 좌표 |
| 빈 위치 찾기 |
gridUtils.ts |
findNextEmptyPosition() |
자동 배치 |
| DnD 타입 정의 |
PopCanvas.tsx |
DND_ITEM_TYPES |
인라인 정의 |
편집
| 기능 |
파일 |
함수/컴포넌트 |
설명 |
| 위치 편집 |
ComponentEditorPanel.tsx |
position 탭 |
col, row 수정 |
| 크기 편집 |
ComponentEditorPanel.tsx |
position 탭 |
colSpan, rowSpan 수정 |
| 라벨 편집 |
ComponentEditorPanel.tsx |
settings 탭 |
컴포넌트 라벨 |
| 표시/숨김 |
ComponentEditorPanel.tsx |
visibility 탭 |
모드별 표시 |
레이아웃 관리
| 기능 |
파일 |
함수/컴포넌트 |
설명 |
| 컴포넌트 추가 |
pop-layout.ts |
addComponentToV5Layout() |
v5에 컴포넌트 추가 |
| 빈 레이아웃 |
pop-layout.ts |
createEmptyPopLayoutV5() |
초기 레이아웃 생성 |
| 타입 가드 |
pop-layout.ts |
isV5Layout() |
v5 여부 확인 |
상태 관리
| 기능 |
파일 |
함수/컴포넌트 |
설명 |
| 레이아웃 상태 |
PopDesigner.tsx |
useState<PopLayoutDataV5> |
메인 레이아웃 |
| 히스토리 |
PopDesigner.tsx |
history[], historyIndex |
Undo/Redo |
| 선택 상태 |
PopDesigner.tsx |
selectedComponentId |
현재 선택 |
| 모드 상태 |
PopDesigner.tsx |
currentMode |
그리드 모드 |
저장/로드
| 기능 |
파일 |
함수/컴포넌트 |
설명 |
| 레이아웃 로드 |
PopDesigner.tsx |
useEffect |
화면 로드 시 |
| 레이아웃 저장 |
PopDesigner.tsx |
handleSave() |
저장 버튼 |
| API 호출 |
screen.ts (lib/api) |
screenApi.saveLayoutPop() |
백엔드 통신 |
뷰포트/줌
| 기능 |
파일 |
함수/컴포넌트 |
설명 |
| 프리셋 전환 |
PopCanvas.tsx |
VIEWPORT_PRESETS |
4개 모드 |
| 줌 컨트롤 |
PopCanvas.tsx |
canvasScale |
30%~150% |
| 패닝 |
PopCanvas.tsx |
Space + 드래그 |
캔버스 이동 |
파일별 주요 기능
| 파일 |
핵심 기능 |
| PopDesigner.tsx |
레이아웃 로드/저장, 컴포넌트 CRUD, 히스토리 |
| PopCanvas.tsx |
DnD, 줌, 패닝, 모드 전환, 그리드 표시 |
| PopRenderer.tsx |
CSS Grid 렌더링, 위치 변환, 컴포넌트 표시 |
| ComponentEditorPanel.tsx |
속성 편집 (위치, 크기, 설정, 표시) |
| pop-layout.ts |
타입 정의, 유틸리티 함수, 상수 |
| gridUtils.ts |
좌표 계산, 겹침 감지, 자동 배치 |
새 기능 추가 시 해당 카테고리 테이블에 행 추가