vexplor/popdocs/archive/SIZE_PRESETS.md

POP 크기 프리셋 가이드

컴포넌트별 기본 크기

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

---

버튼 (PopButton)

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

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

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

---

입력창 (PopInput)

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

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

---

리스트 행 (PopListItem)

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

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

---

아이콘 (PopIcon)

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

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

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

---

카드 (PopCard)

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

<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	강조

<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

---

적용 예시

// 컴포넌트 내부에서 자동 적용
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