sam-docs/changes/20260319_statcards_grid_layout_fix.md

StatCards 카드 6개 한 행 표시 개선

날짜: 2026-03-19 작업자: Claude Code

변경 개요

서비스 품목관리 화면의 카테고리별 통계 카드가 5개까지만 한 행에 표시되고 6번째 카드(소모품)가 다음 행으로 넘어가는 문제를 수정한다.

---

수정된 파일

파일	변경 내용
react/src/components/organisms/StatCards.tsx	카드 6개 이상일 때 md:grid-cols-6 적용

---

상세 변경 사항

변경 전

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 레이아웃 발생

변경 후

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