# POP 크기 프리셋 가이드

## 컴포넌트별 기본 크기

컴포넌트를 만들면 자동으로 적용되는 크기입니다.

---

## 버튼 (PopButton)

| 사이즈 | 높이 | 최소 너비 | 폰트 | 용도 |
|-------|------|----------|------|-----|
| sm | 32px | 60px | 12px | 보조 버튼 |
| md | 40px | 80px | 14px | 일반 버튼 |
| **lg** | **48px** | **100px** | **16px** | **POP 기본** |
| xl | 56px | 120px | 18px | 주요 액션 |
| industrial | 60px | 140px | 20px | 장갑 착용 |

```typescript
// POP에서는 lg가 기본
<PopButton size="lg">확인</PopButton>

// 산업현장
<PopButton size="industrial">작업 완료</PopButton>
```

---

## 입력창 (PopInput)

| 사이즈 | 높이 | 폰트 | 용도 |
|-------|------|------|-----|
| md | 40px | 14px | 일반 |
| **lg** | **48px** | **16px** | **POP 기본** |
| xl | 56px | 18px | 강조 입력 |

```typescript
// 입력창 너비는 항상 부모 채움 (fill)
<PopInput size="lg" />
```

---

## 리스트 행 (PopListItem)

| 사이즈 | 높이 | 폰트 | 용도 |
|-------|------|------|-----|
| compact | 40px | 14px | 많은 데이터 |
| **normal** | **48px** | **16px** | **POP 기본** |
| spacious | 56px | 18px | 여유로운 |
| industrial | 64px | 20px | 장갑 착용 |

```typescript
<PopListItem size="normal">
  <span>작업지시 #1234</span>
</PopListItem>
```

---

## 아이콘 (PopIcon)

| 사이즈 | 크기 | 터치 영역 | 용도 |
|-------|-----|----------|-----|
| sm | 16px | 32px | 뱃지 안 |
| md | 20px | 40px | 텍스트 옆 |
| **lg** | **24px** | **48px** | **POP 기본** |
| xl | 32px | 56px | 강조 |

```typescript
// 아이콘만 있는 버튼
<PopButton icon="check" size="lg" />

// 텍스트 + 아이콘
<PopButton icon="save" size="lg">저장</PopButton>
```

---

## 카드 (PopCard)

| 요소 | 크기 |
|------|-----|
| 패딩 | 16px |
| 제목 폰트 | 18px (heading) |
| 본문 폰트 | 16px (body) |
| 모서리 | 8px |
| 최소 높이 | 100px |

```typescript
<PopCard>
  <PopCard.Header>작업지시</PopCard.Header>
  <PopCard.Body>내용</PopCard.Body>
</PopCard>
```

---

## 숫자패드 (PopNumberPad)

| 요소 | 크기 |
|------|-----|
| 버튼 크기 | 60px x 60px |
| 버튼 간격 | 8px |
| 전체 너비 | 240px |
| 폰트 | 24px |

```
┌─────────────────────┐
│      [ 123 ]        │  ← 디스플레이 48px
├─────┬─────┬─────────┤
│  7  │  8  │  9  │ ← │  ← 각 버튼 60x60
├─────┼─────┼─────────┤
│  4  │  5  │  6  │ C │
├─────┼─────┼─────────┤
│  1  │  2  │  3  │   │
├─────┼─────┼─────│ OK│
│  0  │  .  │ +- │   │
└─────┴─────┴─────────┘
```

---

## 상태 표시 (PopStatusBox)

| 사이즈 | 너비 | 높이 | 아이콘 | 용도 |
|-------|-----|------|-------|-----|
| sm | 80px | 60px | 24px | 여러 개 나열 |
| **md** | **120px** | **80px** | **32px** | **POP 기본** |
| lg | 160px | 100px | 40px | 강조 |

```typescript
<PopStatusBox 
  label="설비 상태" 
  value="가동중" 
  status="success"
  size="md"
/>
```

---

## KPI 게이지 (PopKpiGauge)

| 사이즈 | 너비 | 높이 | 용도 |
|-------|-----|------|-----|
| sm | 120px | 120px | 여러 개 나열 |
| **md** | **180px** | **180px** | **POP 기본** |
| lg | 240px | 240px | 강조 |

---

## 간격 (Gap/Padding)

| 이름 | 값 | 용도 |
|------|---|-----|
| xs | 4px | 아이콘-텍스트 |
| sm | 8px | 요소 내부 |
| **md** | **16px** | **컴포넌트 간** |
| lg | 24px | 섹션 간 |
| xl | 32px | 영역 구분 |

---

## 반응형 조절

화면 크기에 따라 자동 조절되는 값들:

| 요소 | 8인치 태블릿 | 12인치 태블릿 |
|------|------------|--------------|
| 본문 폰트 | 14px | 18px |
| 제목 폰트 | 18px | 28px |
| 컨테이너 패딩 | 12px | 24px |
| 카드 간격 | 12px | 16px |

**고정되는 값들 (변하지 않음)**:
- 버튼 높이: 48px
- 입력창 높이: 48px
- 리스트 행 높이: 48px
- 터치 최소 영역: 48px

---

## 적용 예시

```typescript
// 컴포넌트 내부에서 자동 적용
function PopButton({ size = "lg", ...props }) {
  const sizeStyles = {
    sm: { height: 32, minWidth: 60, fontSize: 12 },
    md: { height: 40, minWidth: 80, fontSize: 14 },
    lg: { height: 48, minWidth: 100, fontSize: 16 },  // POP 기본
    xl: { height: 56, minWidth: 120, fontSize: 18 },
    industrial: { height: 60, minWidth: 140, fontSize: 20 },
  };
  
  return (
    <button style={sizeStyles[size]} {...props} />
  );
}
```

---

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