206 lines
4.7 KiB
Markdown
206 lines
4.7 KiB
Markdown
|
# 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*
|