POP 파일 상세 목록
최종 업데이트: 2026-02-05 (v5 그리드 시스템 통합)
이 문서는 POP 화면 시스템과 관련된 모든 파일을 나열하고 각 파일의 역할을 설명합니다.
목차
- App Router 파일
- Designer 파일
- Panels 파일
- Renderers 파일
- Types 파일
- Utils 파일
- Management 파일
- Dashboard 파일
- Library 파일
- 루트 컴포넌트 파일
1. App Router 파일
frontend/app/(pop)/layout.tsx
| 항목 |
내용 |
| 역할 |
POP 전용 레이아웃 래퍼 |
| 라우트 그룹 |
(pop) - URL에 포함되지 않음 |
| 특징 |
데스크톱과 분리된 터치 최적화 환경 |
frontend/app/(pop)/pop/page.tsx
| 항목 |
내용 |
| 역할 |
POP 메인 대시보드 |
| 경로 |
/pop |
| 사용 컴포넌트 |
PopDashboard |
frontend/app/(pop)/pop/screens/[screenId]/page.tsx
| 항목 |
내용 |
| 역할 |
개별 POP 화면 뷰어 (v5 전용) |
| 경로 |
/pop/screens/:screenId |
| 버전 |
v5 그리드 시스템 전용 |
핵심 코드 구조:
// v5 레이아웃 상태
const [layout, setLayout] = useState<PopLayoutDataV5>(createEmptyPopLayoutV5());
// 레이아웃 로드
useEffect(() => {
const popLayout = await screenApi.getLayoutPop(screenId);
if (isV5Layout(popLayout)) {
setLayout(popLayout);
} else {
// 레거시 레이아웃은 빈 v5로 처리
setLayout(createEmptyPopLayoutV5());
}
}, [screenId]);
// v5 그리드 렌더링
{hasComponents ? (
<PopRenderer
layout={layout}
viewportWidth={viewportWidth}
currentMode={currentModeKey}
isDesignMode={false}
/>
) : (
// 빈 화면
)}
제공 기능:
- 반응형 모드 감지 (useResponsiveModeWithOverride)
- 프리뷰 모드 (
?preview=true)
- 디바이스/방향 수동 전환 (프리뷰 모드)
- 4개 그리드 모드 지원
frontend/app/(pop)/pop/work/page.tsx
| 항목 |
내용 |
| 역할 |
작업 화면 (샘플) |
| 경로 |
/pop/work |
2. Designer 파일
frontend/components/pop/designer/PopDesigner.tsx
| 항목 |
내용 |
| 역할 |
POP 화면 디자이너 메인 (v5 전용) |
| 의존성 |
react-dnd, ResizablePanelGroup |
핵심 Props:
interface PopDesignerProps {
selectedScreen: ScreenDefinition;
onBackToList: () => void;
onScreenUpdate?: (updatedScreen: Partial<ScreenDefinition>) => void;
}
상태 관리:
// v5 레이아웃
const [layout, setLayout] = useState<PopLayoutDataV5>(createEmptyPopLayoutV5());
// 선택 상태
const [selectedComponentId, setSelectedComponentId] = useState<string | null>(null);
// 그리드 모드 (4개)
const [currentMode, setCurrentMode] = useState<GridMode>("tablet_landscape");
// UI 상태
const [isLoading, setIsLoading] = useState(true);
const [isSaving, setIsSaving] = useState(false);
const [hasChanges, setHasChanges] = useState(false);
주요 핸들러:
| 핸들러 |
역할 |
handleDropComponent |
컴포넌트 드롭 (그리드 위치 계산) |
handleUpdateComponent |
컴포넌트 속성 수정 |
handleDeleteComponent |
컴포넌트 삭제 |
handleSave |
v5 레이아웃 저장 |
frontend/components/pop/designer/PopCanvas.tsx
| 항목 |
내용 |
| 역할 |
v5 CSS Grid 기반 캔버스 |
| 렌더링 |
CSS Grid (4/6/8/12칸) |
| 모드 |
4개 (태블릿/모바일 x 가로/세로) |
핵심 Props:
interface PopCanvasProps {
layout: PopLayoutDataV5;
selectedComponentId: string | null;
currentMode: GridMode;
onModeChange: (mode: GridMode) => void;
onSelectComponent: (id: string | null) => void;
onDropComponent: (type: PopComponentType, position: PopGridPosition) => void;
onUpdateComponent: (componentId: string, updates: Partial<PopComponentDefinitionV5>) => void;
onDeleteComponent: (componentId: string) => void;
}
뷰포트 프리셋:
const VIEWPORT_PRESETS = [
{ id: "mobile_portrait", label: "모바일 세로", width: 375, height: 667 }, // 4칸
{ id: "mobile_landscape", label: "모바일 가로", width: 667, height: 375 }, // 6칸
{ id: "tablet_portrait", label: "태블릿 세로", width: 768, height: 1024 }, // 8칸
{ id: "tablet_landscape", label: "태블릿 가로", width: 1024, height: 768 }, // 12칸
];
제공 기능:
- 4개 모드 프리셋 전환
- 줌 컨트롤 (30% ~ 150%)
- 패닝 (Space + 드래그)
- 컴포넌트 드래그 앤 드롭
- 그리드 좌표 계산
frontend/components/pop/designer/index.ts
export { default as PopDesigner } from "./PopDesigner";
export { default as PopCanvas } from "./PopCanvas";
export { default as ComponentEditorPanel } from "./panels/ComponentEditorPanel";
export { default as PopRenderer } from "./renderers/PopRenderer";
export * from "./types";
export * from "./utils/gridUtils";
3. Panels 파일
frontend/components/pop/designer/panels/ComponentEditorPanel.tsx
| 항목 |
내용 |
| 역할 |
v5 컴포넌트 편집 패널 |
| 위치 |
오른쪽 사이드바 |
핵심 Props:
interface ComponentEditorPanelProps {
component: PopComponentDefinitionV5 | null;
currentMode: GridMode;
onUpdateComponent?: (updates: Partial<PopComponentDefinitionV5>) => void;
className?: string;
}
3개 탭:
| 탭 |
아이콘 |
내용 |
grid |
Grid3x3 |
그리드 위치 (col, row, colSpan, rowSpan) |
settings |
Settings |
라벨, 타입별 설정 |
data |
Database |
데이터 바인딩 (Phase 4) |
frontend/components/pop/designer/panels/index.ts
export { default as ComponentEditorPanel, default } from "./ComponentEditorPanel";
4. Renderers 파일
frontend/components/pop/designer/renderers/PopRenderer.tsx
| 항목 |
내용 |
| 역할 |
v5 레이아웃 CSS Grid 렌더러 |
| 입력 |
PopLayoutDataV5, viewportWidth, currentMode |
핵심 Props:
interface PopRendererProps {
layout: PopLayoutDataV5;
viewportWidth: number;
currentMode?: GridMode;
isDesignMode?: boolean;
selectedComponentId?: string | null;
onComponentClick?: (componentId: string) => void;
onBackgroundClick?: () => void;
className?: string;
}
CSS Grid 스타일 생성:
const gridStyle: React.CSSProperties = {
display: "grid",
gridTemplateColumns: `repeat(${breakpoint.columns}, 1fr)`,
gridAutoRows: `${breakpoint.rowHeight}px`,
gap: `${breakpoint.gap}px`,
padding: `${breakpoint.padding}px`,
};
컴포넌트 위치 변환:
const convertPosition = (position: PopGridPosition): React.CSSProperties => ({
gridColumn: `${position.col} / span ${position.colSpan}`,
gridRow: `${position.row} / span ${position.rowSpan}`,
});
frontend/components/pop/designer/renderers/index.ts
export { default as PopRenderer, default } from "./PopRenderer";
5. Types 파일
frontend/components/pop/designer/types/pop-layout.ts
| 항목 |
내용 |
| 역할 |
POP 레이아웃 v5 타입 시스템 |
| 버전 |
v5 전용 (레거시 제거됨) |
핵심 타입:
// 그리드 모드
type GridMode = "mobile_portrait" | "mobile_landscape" | "tablet_portrait" | "tablet_landscape";
// 그리드 브레이크포인트
interface GridBreakpoint {
label: string;
columns: number;
minWidth: number;
maxWidth: number;
rowHeight: number;
gap: number;
padding: number;
}
// v5 레이아웃
interface PopLayoutDataV5 {
version: "pop-5.0";
gridConfig: PopGridConfig;
components: Record<string, PopComponentDefinitionV5>;
dataFlow: PopDataFlow;
settings: PopGlobalSettingsV5;
metadata?: PopLayoutMetadata;
overrides?: Record<GridMode, PopModeOverrideV5>;
}
// 그리드 위치
interface PopGridPosition {
col: number; // 시작 열 (1부터)
row: number; // 시작 행 (1부터)
colSpan: number; // 열 크기
rowSpan: number; // 행 크기
}
// v5 컴포넌트 정의
interface PopComponentDefinitionV5 {
id: string;
type: PopComponentType;
label?: string;
position: PopGridPosition;
visibility?: { modes: GridMode[]; defaultVisible: boolean };
dataBinding?: PopDataBinding;
style?: PopStylePreset;
config?: PopComponentConfig;
}
주요 함수:
| 함수 |
역할 |
createEmptyPopLayoutV5() |
빈 v5 레이아웃 생성 |
addComponentToV5Layout() |
v5에 컴포넌트 추가 |
createComponentDefinitionV5() |
v5 컴포넌트 정의 생성 |
isV5Layout() |
v5 타입 가드 |
detectGridMode() |
뷰포트 너비로 모드 감지 |
frontend/components/pop/designer/types/index.ts
export * from "./pop-layout";
6. Utils 파일
frontend/components/pop/designer/utils/gridUtils.ts
| 항목 |
내용 |
| 역할 |
그리드 위치 계산 유틸리티 |
| 용도 |
좌표 변환, 겹침 감지, 자동 배치 |
주요 함수:
| 함수 |
역할 |
convertPositionToMode() |
12칸 기준 위치를 다른 모드로 변환 |
isOverlapping() |
두 위치 겹침 여부 확인 |
resolveOverlaps() |
겹침 해결 (아래로 밀기) |
mouseToGridPosition() |
마우스 좌표 → 그리드 좌표 |
gridToPixelPosition() |
그리드 좌표 → 픽셀 좌표 |
isValidPosition() |
위치 유효성 검사 |
clampPosition() |
위치 범위 조정 |
findNextEmptyPosition() |
다음 빈 위치 찾기 |
autoLayoutComponents() |
자동 배치 |
7. Management 파일
frontend/components/pop/management/PopCategoryTree.tsx
| 항목 |
내용 |
| 역할 |
POP 화면 카테고리 트리 |
| 기능 |
그룹 추가/수정/삭제, 화면 목록 |
frontend/components/pop/management/PopScreenSettingModal.tsx
| 항목 |
내용 |
| 역할 |
POP 화면 설정 모달 |
| 기능 |
화면명, 설명, 그룹 설정 |
frontend/components/pop/management/PopScreenPreview.tsx
| 항목 |
내용 |
| 역할 |
POP 화면 미리보기 |
| 기능 |
썸네일, 기본 정보 표시 |
frontend/components/pop/management/PopScreenFlowView.tsx
| 항목 |
내용 |
| 역할 |
화면 간 플로우 시각화 |
| 기능 |
화면 연결 관계 표시 |
frontend/components/pop/management/index.ts
export { PopCategoryTree } from "./PopCategoryTree";
export { PopScreenSettingModal } from "./PopScreenSettingModal";
export { PopScreenPreview } from "./PopScreenPreview";
export { PopScreenFlowView } from "./PopScreenFlowView";
8. Dashboard 파일
frontend/components/pop/dashboard/PopDashboard.tsx
| 항목 |
내용 |
| 역할 |
POP 대시보드 메인 |
| 구성 |
헤더, KPI, 메뉴그리드, 공지, 푸터 |
기타 Dashboard 컴포넌트
| 파일 |
역할 |
DashboardHeader.tsx |
상단 헤더 |
DashboardFooter.tsx |
하단 푸터 |
MenuGrid.tsx |
메뉴 그리드 |
KpiBar.tsx |
KPI 요약 바 |
NoticeBanner.tsx |
공지 배너 |
NoticeList.tsx |
공지 목록 |
ActivityList.tsx |
최근 활동 목록 |
9. Library 파일
frontend/lib/api/popScreenGroup.ts
| 항목 |
내용 |
| 역할 |
POP 화면 그룹 API 클라이언트 |
API 함수:
async function getPopScreenGroups(searchTerm?: string): Promise<PopScreenGroup[]>
async function createPopScreenGroup(data: CreatePopScreenGroupRequest): Promise<...>
async function updatePopScreenGroup(id: number, data: UpdatePopScreenGroupRequest): Promise<...>
async function deletePopScreenGroup(id: number): Promise<...>
async function ensurePopRootGroup(): Promise<...>
frontend/lib/registry/PopComponentRegistry.ts
| 항목 |
내용 |
| 역할 |
POP 컴포넌트 중앙 레지스트리 |
frontend/lib/schemas/popComponentConfig.ts
| 항목 |
내용 |
| 역할 |
POP 컴포넌트 설정 스키마 |
| 검증 |
Zod 기반 |
10. 루트 컴포넌트 파일
frontend/components/pop/index.ts
export * from "./designer";
export * from "./management";
export * from "./dashboard";
// 개별 컴포넌트 export
기타 루트 레벨 컴포넌트
| 파일 |
역할 |
PopApp.tsx |
POP 앱 셸 |
PopHeader.tsx |
공통 헤더 |
PopBottomNav.tsx |
하단 네비게이션 |
PopStatusTabs.tsx |
상태 탭 |
PopWorkCard.tsx |
작업 카드 |
PopProductionPanel.tsx |
생산 패널 |
PopSettingsModal.tsx |
설정 모달 |
PopAcceptModal.tsx |
수락 모달 |
PopProcessModal.tsx |
프로세스 모달 |
PopEquipmentModal.tsx |
설비 모달 |
파일 수 통계
| 폴더 |
파일 수 |
설명 |
app/(pop) |
4 |
App Router 페이지 |
components/pop/designer |
9 |
디자이너 모듈 (v5) |
components/pop/management |
5 |
관리 모듈 |
components/pop/dashboard |
12 |
대시보드 모듈 |
components/pop (루트) |
15 |
루트 컴포넌트 |
lib |
3 |
라이브러리 |
| 총계 |
48 |
|
삭제된 파일 (v5 통합으로 제거)
| 파일 |
이유 |
PopCanvasV4.tsx |
v4 Flexbox 캔버스 |
PopFlexRenderer.tsx |
v4 Flexbox 렌더러 |
PopLayoutRenderer.tsx |
v3 CSS Grid 렌더러 |
ComponentRenderer.tsx |
레거시 컴포넌트 렌더러 |
ComponentEditorPanelV4.tsx |
v4 편집 패널 |
PopPanel.tsx |
레거시 팔레트 패널 |
test-v4/page.tsx |
v4 테스트 페이지 |
이 문서는 POP 화면 시스템의 파일 목록을 관리하기 위한 참조용으로 작성되었습니다. (v5 그리드 시스템 기준)