84 lines
3.5 KiB
Markdown
84 lines
3.5 KiB
Markdown
# 기능별 색인
|
|
|
|
> **용도**: "이 기능 어디있어?", "비슷한 기능 찾아줘"
|
|
> **검색 팁**: 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 | 좌표 계산, 겹침 감지, 자동 배치 |
|
|
|
|
---
|
|
|
|
*새 기능 추가 시 해당 카테고리 테이블에 행 추가*
|