# POP v4 핵심 규칙 가이드

## 개요

v4에서는 **"위치"를 설정하는 게 아니라 "규칙"을 설정**합니다.

```
v3 (기존): 4개 모드 각각 컴포넌트 위치 설정 → 4배 작업량
v4 (신규): 3가지 규칙만 설정 → 모든 화면 자동 적응
```

---

## 핵심 규칙 3가지

### 1. 크기 규칙 (Size Rules)

각 컴포넌트의 **너비**와 **높이**를 어떻게 결정할지 정합니다.

| 모드 | 설명 | 예시 |
|------|------|------|
| **fixed** | 고정 px | 버튼 높이 48px |
| **fill** | 부모 공간 채움 | 입력창 너비 = 화면 너비 |
| **hug** | 내용에 맞춤 | 라벨 너비 = 텍스트 길이 |

```typescript
// 예시: 버튼
{
  width: "fill",      // 화면 너비에 맞춤
  height: "fixed",    // 고정
  fixedHeight: 48     // 48px
}

// 예시: 라벨
{
  width: "hug",       // 텍스트 길이만큼
  height: "hug"       // 텍스트 높이만큼
}
```

#### 크기 모드 시각화

```
fixed (고정):
├────48px────┤
┌────────────┐
│   버튼     │ ← 화면 커져도 48px 유지
└────────────┘

fill (채움):
├─────────────────────────────────┤
┌─────────────────────────────────┐
│         입력창                   │ ← 화면 크기에 맞춤
└─────────────────────────────────┘

hug (맞춤):
├──────┤
┌──────┐
│라벨  │ ← 내용 길이만큼만
└──────┘
```

---

### 2. 배치 규칙 (Layout Rules)

컴포넌트들을 **어떻게 나열할지** 정합니다.

#### 스택 방향

```
가로 스택 (horizontal):        세로 스택 (vertical):
┌─────┬─────┬─────┐           ┌─────────────┐
│  A  │  B  │  C  │           │      A      │
└─────┴─────┴─────┘           ├─────────────┤
                               │      B      │
                               ├─────────────┤
                               │      C      │
                               └─────────────┘
```

#### 설정 항목

| 항목 | 설명 | 옵션 |
|------|------|------|
| **direction** | 스택 방향 | horizontal / vertical |
| **wrap** | 줄바꿈 허용 | true / false |
| **gap** | 요소 간 간격 | 8 / 16 / 24 px |
| **alignItems** | 교차축 정렬 | start / center / end / stretch |
| **justifyContent** | 주축 정렬 | start / center / end / space-between |

```typescript
// 예시: 버튼 그룹 (가로 배치)
{
  direction: "horizontal",
  wrap: true,           // 공간 부족하면 줄바꿈
  gap: 16,              // 버튼 간격 16px
  alignItems: "center"  // 세로 중앙 정렬
}
```

---

### 3. 반응형 규칙 (Responsive Rules)

**화면이 좁아지면** 어떻게 바꿀지 정합니다.

```typescript
// 예시: 768px 이하면 가로→세로 전환
{
  direction: "horizontal",
  responsive: [
    {
      breakpoint: 768,      // 768px 이하일 때
      direction: "vertical" // 세로로 바꿈
    }
  ]
}
```

#### 시각화

```
768px 이상 (태블릿):          768px 이하 (모바일):
┌─────┬─────┬─────┐          ┌─────────────┐
│  A  │  B  │  C  │    →     │      A      │
└─────┴─────┴─────┘          │      B      │
                              │      C      │
                              └─────────────┘
```

---

## 실제 예시: 작업지시 화면

### 규칙 설정

```typescript
{
  root: {
    type: "stack",
    direction: "vertical",
    gap: 16,
    padding: { top: 16, right: 16, bottom: 16, left: 16 },
    children: ["header", "form", "buttons"]
  },
  
  containers: {
    "header": {
      type: "stack",
      direction: "horizontal",
      alignItems: "center",
      children: ["title", "status"]
    },
    "form": {
      type: "stack",
      direction: "vertical",
      gap: 12,
      children: ["field1", "field2", "field3"]
    },
    "buttons": {
      type: "stack",
      direction: "horizontal",
      gap: 12,
      responsive: [
        { breakpoint: 480, direction: "vertical" }
      ],
      children: ["cancelBtn", "submitBtn"]
    }
  },
  
  components: {
    "title": { width: "hug", height: "hug" },
    "status": { width: "hug", height: "hug" },
    "field1": { width: "fill", height: "fixed", fixedHeight: 48 },
    "field2": { width: "fill", height: "fixed", fixedHeight: 48 },
    "field3": { width: "fill", height: "fixed", fixedHeight: 48 },
    "cancelBtn": { width: "fill", height: "fixed", fixedHeight: 48 },
    "submitBtn": { width: "fill", height: "fixed", fixedHeight: 48 }
  }
}
```

### 결과

```
태블릿 가로 (1024px)              모바일 세로 (375px)
┌──────────────────────────┐     ┌─────────────────┐
│ 작업지시 #1234    [진행중]│     │작업지시   [진행]│
├──────────────────────────┤     ├─────────────────┤
│ [품번____________]       │     │[품번_________]  │
│ [품명____________]       │     │[품명_________]  │
│ [수량____________]       │     │[수량_________]  │
├──────────────────────────┤     ├─────────────────┤
│ [취소]        [작업완료] │     │[취소]           │
└──────────────────────────┘     │[작업완료]       │
                                 └─────────────────┘
```

---

## v3 vs v4 비교

| 항목 | v3 (기존) | v4 (신규) |
|------|----------|----------|
| **설계 방식** | 4개 모드 각각 위치 설정 | 3가지 규칙 설정 |
| **작업량** | 4배 | 1배 |
| **데이터** | col, row, colSpan, rowSpan | width, height, direction, gap |
| **반응형** | 수동 (모드별 설정) | 자동 (브레이크포인트) |
| **유지보수** | 4곳 수정 | 1곳 수정 |

---

## 규칙 설계 체크리스트

### 크기 규칙
- [ ] 터치 요소(버튼, 입력창) 높이: fixed 48px
- [ ] 너비가 화면에 맞아야 하는 요소: fill
- [ ] 내용 길이에 맞아야 하는 요소: hug

### 배치 규칙
- [ ] 컴포넌트 나열 방향 결정 (가로/세로)
- [ ] 간격 설정 (8/16/24px)
- [ ] 정렬 방식 결정 (start/center/stretch)

### 반응형 규칙
- [ ] 768px 이하에서 가로→세로 전환 필요한 곳
- [ ] 480px 이하에서 추가 조정 필요한 곳

---

## 관련 문서

- [반응형 디자인 가이드](./RESPONSIVE_DESIGN_GUIDE.md) - 크기 기준
- [크기 프리셋](./SIZE_PRESETS.md) - 컴포넌트별 기본값
- [v4 구현 계획](./POP_V4_CONSTRAINT_SYSTEM_PLAN.md) - 전체 계획

---

*최종 업데이트: 2026-02-04*