# Foundation 토큰 사용법

색상, 간격, 크기 등의 값을 하드코딩하지 말고 Foundation 토큰을 사용하세요.

---

## 토큰 종류

| 토큰 | 용도 | 예시 |
| --- | --- | --- |
| `semantic_colors` | 색상 | `semantic_colors.content.primary` |
| `spacing` | 간격 (N × 4px) | `spacing.spacing_4` → 16px |
| `shapes` | border-radius 등 | `shapes.border_radius.medium` |
| `text_styles` | 타이포그래피 | `text_styles.body_14_regular` |

---

## 사용 예시

```tsx
// ❌ 하드코딩 금지
const Bad = styled.div`
  color: #333333;  padding: 16px;  border-radius: 8px;
`;
// ✅ Foundation 토큰 사용
import { semantic_colors, spacing, shapes } from '@croquiscom/pds';
const Good = styled.div`
  color: ${semantic_colors.content.primary};
  padding: ${spacing.spacing_4};
  border-radius: ${shapes.border_radius.medium};
`;
```

---

## spacing 토큰 주의사항

spacing 값은 이미 `'px'` 단위를 포함합니다. 중복으로 추가하지 마세요.

```tsx
// ❌ 'px' 중복 오류
padding: ${spacing.spacing_4}px;  // "16pxpx" - 잘못된 CSS!
// ✅ 올바른 사용
padding: ${spacing.spacing_4};    // "16px"
```

---

## 존재하지 않는 토큰 (자주 하는 실수)

```tsx
// ❌ 존재하지 않는 경로
semantic_colors.interactive           // 'interactive' 카테고리 없음
semantic_colors.background.primary    // 'surface' 또는 'base' 사용
semantic_colors.border.default        // 'border.primary' 사용
screens.tablet                        // 'tablet' 없음 ('desktop'만 존재)
```

**올바른 경로는 IDE 자동완성 또는 Foundation 섹션에서 확인하세요.**