71 lines
1.8 KiB
Markdown
71 lines
1.8 KiB
Markdown
|
# StatCards 카드 6개 한 행 표시 개선
|
||
|
|
|
||
|
|
**날짜:** 2026-03-19
|
||
|
|
**작업자:** Claude Code
|
||
|
|
|
||
|
|
## 변경 개요
|
||
|
|
|
||
|
|
서비스 품목관리 화면의 카테고리별 통계 카드가 5개까지만 한 행에 표시되고 6번째 카드(소모품)가 다음 행으로 넘어가는 문제를 수정한다.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 수정된 파일
|
||
|
|
|
||
|
|
| 파일 | 변경 내용 |
|
||
|
|
|------|----------|
|
||
|
|
| `react/src/components/organisms/StatCards.tsx` | 카드 6개 이상일 때 `md:grid-cols-6` 적용 |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 상세 변경 사항
|
||
|
|
|
||
|
|
### 변경 전
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
const gridClass =
|
||
|
|
count >= 5
|
||
|
|
? 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2'
|
||
|
|
: 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2';
|
||
|
|
```
|
||
|
|
|
||
|
|
- 카드 5개 이상이면 무조건 `md:grid-cols-5` 적용
|
||
|
|
- 6개 카드 시 5+1 레이아웃 발생
|
||
|
|
|
||
|
|
### 변경 후
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
const gridClass =
|
||
|
|
count >= 6
|
||
|
|
? 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-2'
|
||
|
|
: count >= 5
|
||
|
|
? 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2'
|
||
|
|
: 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2';
|
||
|
|
```
|
||
|
|
|
||
|
|
- 6개 이상: `md:grid-cols-6` (한 행에 6개)
|
||
|
|
- 5개: `md:grid-cols-5` (한 행에 5개)
|
||
|
|
- 4개 이하: `md:grid-cols-4` (한 행에 4개)
|
||
|
|
|
||
|
|
### 영향 범위
|
||
|
|
|
||
|
|
`StatCards`는 공통 organisms 컴포넌트로, 품목관리 외 다른 페이지에서도 사용된다. 카드 6개 이상인 모든 페이지에 동일하게 적용된다.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 테스트 체크리스트
|
||
|
|
|
||
|
|
- [ ] 품목관리 화면에서 6개 카드가 한 행에 표시
|
||
|
|
- [ ] 모바일(sm 미만)에서 2열 그리드 유지
|
||
|
|
- [ ] 태블릿(sm)에서 3열 그리드 유지
|
||
|
|
- [ ] 다른 StatCards 사용 페이지에서 레이아웃 정상
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 관련 문서
|
||
|
|
|
||
|
|
- `docs/rules/item-policy.md` — 품목 정책
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
**최종 업데이트**: 2026-03-19
|