5.4 KiB
5.4 KiB
기능별 색인
용도: "이 기능 어디있어?", "비슷한 기능 찾아줘" 검색 팁: Ctrl+F로 기능명, 키워드 검색
렌더링
| 기능 | 파일 | 함수/컴포넌트 | 설명 |
|---|---|---|---|
| 그리드 렌더링 | PopRenderer.tsx | PopRenderer |
CSS Grid 기반 v5 렌더링 |
| 격자 셀 렌더링 | PopRenderer.tsx | gridCells (useMemo) |
12x20 = 240개 DOM 셀 |
| 위치 변환 | gridUtils.ts | convertPositionToMode() |
12칸 → 4/6/8칸 변환 |
| 모드 감지 | pop-layout.ts | detectGridMode() |
뷰포트 너비로 모드 판별 |
| 컴포넌트 스타일 | PopRenderer.tsx | convertPosition() |
그리드 좌표 → CSS |
그리드 가이드
| 기능 | 파일 | 함수/컴포넌트 | 설명 |
|---|---|---|---|
| 격자 셀 | PopRenderer.tsx | gridCells |
CSS Grid 기반 격자선 (동적 행 수) |
| 열 라벨 | PopCanvas.tsx | gridLabels.columns |
1~12 표시 |
| 행 라벨 | PopCanvas.tsx | gridLabels.rows |
동적 계산 (dynamicCanvasHeight 기반) |
| 토글 | PopCanvas.tsx | showGridGuide 상태 |
격자 ON/OFF |
세로 자동 확장
| 기능 | 파일 | 함수/컴포넌트 | 설명 |
|---|---|---|---|
| 동적 높이 | PopCanvas.tsx | dynamicCanvasHeight |
컴포넌트 배치 기반 자동 계산 |
| 최소 높이 | PopCanvas.tsx | MIN_CANVAS_HEIGHT |
600px 보장 |
| 여유 행 | PopCanvas.tsx | CANVAS_EXTRA_ROWS |
항상 3행 추가 |
| 격자 행 수 | PopRenderer.tsx | gridCells |
maxRowEnd + 5 동적 계산 |
드래그 앤 드롭
| 기능 | 파일 | 함수/컴포넌트 | 설명 |
|---|---|---|---|
| 드롭 영역 | 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개 모드 (width만, height 제거) |
| 줌 컨트롤 | PopCanvas.tsx | canvasScale |
30%~150% |
| 패닝 | PopCanvas.tsx | Space + 드래그 | 캔버스 이동 |
| 모드 감지 | pop-layout.ts | detectGridMode() |
너비 기반 모드 판별 |
브레이크포인트
| 기능 | 파일 | 함수/컴포넌트 | 설명 |
|---|---|---|---|
| 그리드 설정 | pop-layout.ts | GRID_BREAKPOINTS |
모드별 칸 수, gap, padding |
| 모드 감지 | pop-layout.ts | detectGridMode() |
viewportWidth → GridMode |
| 훅 연동 | useDeviceOrientation.ts | BREAKPOINTS.TABLET_MIN |
768px (태블릿 경계) |
자동 줄바꿈/검토
| 기능 | 파일 | 함수/컴포넌트 | 설명 |
|---|---|---|---|
| 자동 배치 | gridUtils.ts | convertAndResolvePositions() |
col > maxCol → 맨 아래 배치 |
| 검토 필요 판별 | gridUtils.ts | needsReview() |
오버라이드 없으면 true |
| 검토 패널 | PopCanvas.tsx | ReviewPanel |
검토 필요 컴포넌트 목록 |
파일별 주요 기능
| 파일 | 핵심 기능 |
|---|---|
| PopDesigner.tsx | 레이아웃 로드/저장, 컴포넌트 CRUD, 히스토리 |
| PopCanvas.tsx | DnD, 줌, 패닝, 모드 전환, 행/열 라벨, 격자 토글 |
| PopRenderer.tsx | CSS Grid 렌더링, 격자 셀, 위치 변환, 컴포넌트 표시 |
| ComponentEditorPanel.tsx | 속성 편집 (위치, 크기, 설정, 표시) |
| ComponentPalette.tsx | 컴포넌트 팔레트 (드래그 가능한 컴포넌트 목록) |
| pop-layout.ts | 타입 정의, 유틸리티 함수, 상수 |
| gridUtils.ts | 좌표 계산, 겹침 감지, 자동 배치 |
새 기능 추가 시 해당 카테고리 테이블에 행 추가