ERP-node/popdocs/SPEC.md

POP 기술 스펙

---

v4 핵심 규칙 (3가지)

1. 크기 규칙 (Size)

모드	설명	예시
fixed	고정 px	버튼 48px
fill	부모 채움	입력창 100%
hug	내용 맞춤	라벨

2. 배치 규칙 (Layout)

항목	옵션
direction	horizontal / vertical
wrap	true / false
gap	8 / 16 / 24 px
alignItems	start / center / end / stretch

3. 반응형 규칙 (Responsive)

{
  direction: "horizontal",
  responsive: [{ breakpoint: 768, direction: "vertical" }]
}

---

크기 프리셋

터치 요소

요소	일반	산업
버튼 높이	48px	60px
입력창 높이	48px	56px
터치 영역	48px	60px

폰트 (clamp)

용도	범위	CSS
본문	14-18px	clamp(14px, 1.5vw, 18px)
제목	18-28px	clamp(18px, 2.5vw, 28px)

간격

이름	값	용도
sm	8px	요소 내부
md	16px	컴포넌트 간
lg	24px	섹션 간

---

반응형 원칙

누르는 것 → 고정 (48px)
읽는 것 → 범위 (clamp)
담는 것 → 비율 (%)

---

데이터 구조

v3 (현재)

interface PopLayoutDataV3 {
  version: "pop-3.0";
  layouts: {
    tablet_landscape: { componentPositions: Record<string, GridPosition> };
    // ... 4개 모드
  };
  components: Record<string, PopComponentDefinition>;
}

v4 (계획)

interface PopLayoutDataV4 {
  version: "pop-4.0";
  root: PopContainer;
  components: Record<string, PopComponentDefinitionV4>;
}

interface PopContainer {
  type: "stack";
  direction: "horizontal" | "vertical";
  children: (string | PopContainer)[];
  responsive?: { breakpoint: number; direction?: string }[];
}

---

Troubleshooting

캔버스 rowSpan 문제

• 증상: 컴포넌트가 얇게 보임
• 원인: gridTemplateRows 고정 px
• 해결: 1fr 사용

4모드 전환 안 됨

• 증상: 크기 줄여도 레이아웃 유지
• 해결: useResponsiveMode 훅 사용

---

상세 archive 참조: archive/V4_CORE_RULES.md, archive/SIZE_PRESETS.md