# 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)

```typescript
{
  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 (현재)

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

### v4 (계획)

```typescript
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`*