diff --git a/INDEX.md b/INDEX.md index 981b96c..8addef8 100644 --- a/INDEX.md +++ b/INDEX.md @@ -270,6 +270,7 @@ DB 도메인별: | [20260318_stock_production_item_add_removal.md](changes/20260318_stock_production_item_add_removal.md) | 재고생산 수정 화면 레이아웃 통일 (등록과 동일 BendingLotForm 사용) | | [20260318_rm_spec_field_restructure.md](changes/20260318_rm_spec_field_restructure.md) | 원자재(RM) 규격 필드 구조 개선 (라벨 분리, 섹션 그룹핑, 테스트 데이터 정리) | | [20260319_item_master_field_search.md](changes/20260319_item_master_field_search.md) | 서비스 품목기준관리 항목 탭 검색 기능 추가 | +| [20260319_statcards_grid_layout_fix.md](changes/20260319_statcards_grid_layout_fix.md) | StatCards 카드 6개 한 행 표시 개선 | --- diff --git a/changes/20260319_statcards_grid_layout_fix.md b/changes/20260319_statcards_grid_layout_fix.md new file mode 100644 index 0000000..fcf5c0e --- /dev/null +++ b/changes/20260319_statcards_grid_layout_fix.md @@ -0,0 +1,70 @@ +# 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