# StatCards 컴포넌트 레이아웃 변경

## 변경일
2026-01-05

## 변경 파일
`/src/components/organisms/StatCards.tsx`

## 변경 내용

### Before (flex 기반)
```tsx
<div className="flex flex-col sm:flex-row gap-3 md:gap-4">
```
- 모바일: 세로 1열
- SM 이상: 가로 한 줄로 모든 카드 표시 (`flex-1`)

### After (grid 기반)
```tsx
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3 md:gap-4">
```
- 모바일: 2열 그리드
- SM 이상: 3열 그리드

## 변경 사유

### 문제점
- 급여관리 등 카드가 6개인 페이지에서 한 줄에 모든 카드가 들어가면 각 카드가 너무 좁아짐
- PC 화면에서도 카드 내용이 빽빽하게 보여 가독성 저하

### 해결
- grid 기반 레이아웃으로 변경하여 PC에서 3개씩 2줄로 표시
- 각 카드가 충분한 너비를 확보하여 가독성 향상
- 카드 개수에 따라 자연스럽게 줄바꿈

## 영향 범위
`StatCards` 컴포넌트는 공통 컴포넌트로, 다음 템플릿에서 사용:
- `IntegratedListTemplateV2`
- `ListPageTemplate`

해당 템플릿을 사용하는 모든 페이지에 적용됨.

## 레이아웃 예시

### 카드 6개 (급여관리)
```
| 카드1 | 카드2 | 카드3 |
| 카드4 | 카드5 | 카드6 |
```

### 카드 4개
```
| 카드1 | 카드2 | 카드3 |
| 카드4 |       |       |
```

### 카드 3개
```
| 카드1 | 카드2 | 카드3 |
```