122 lines
2.2 KiB
Markdown
122 lines
2.2 KiB
Markdown
|
# 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`*
|