a938da9e22
- 회계: 거래처, 매입/매출, 입출금 상세 페이지 개선 - HR: 직원 관리 및 출퇴근 설정 기능 수정 - 주문관리: 상세폼 구조 분리 (cards, dialogs, hooks, tables) - 알림설정: 컴포넌트 구조 단순화 및 리팩토링 - 캘린더: 헤더 및 일정 타입 개선 - 출고관리: 액션 및 타입 정의 추가 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1.4 KiB
1.4 KiB
StatCards 컴포넌트 레이아웃 변경
변경일
2026-01-05
변경 파일
/src/components/organisms/StatCards.tsx
변경 내용
Before (flex 기반)
<div className="flex flex-col sm:flex-row gap-3 md:gap-4">
- 모바일: 세로 1열
- SM 이상: 가로 한 줄로 모든 카드 표시 (
flex-1)
After (grid 기반)
<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 컴포넌트는 공통 컴포넌트로, 다음 템플릿에서 사용:
IntegratedListTemplateV2ListPageTemplate
해당 템플릿을 사용하는 모든 페이지에 적용됨.
레이아웃 예시
카드 6개 (급여관리)
| 카드1 | 카드2 | 카드3 |
| 카드4 | 카드5 | 카드6 |
카드 4개
| 카드1 | 카드2 | 카드3 |
| 카드4 | | |
카드 3개
| 카드1 | 카드2 | 카드3 |