[#25] Feat/25/공통컴포넌트 통계카드

src/components/StatCard.tsx

@@ -0,0 +1,22 @@
+import { cn } from '@/utils/cn';
+
+interface StatCardProps {
+  name: string;
+  total: number;
+}
+
+export default function StatCard({ name, total }: StatCardProps) {
+  return (
+    <div
+      className={cn(
+        'text-black-200 flex h-11 items-center justify-between rounded-md border border-gray-300 px-3.5 py-3.25 font-medium md:h-13 md:p-3.5 lg:h-22 lg:flex-col lg:items-start lg:gap-1',
+      )}
+    >
+      <div className={cn('text-md h-6 md:h-6.5 md:text-lg')}>{name}</div>
+      <div className={cn('flex h-8 items-baseline gap-1.5')}>
+        <span className={cn('text-xl font-bold md:text-2xl')}>{total}</span>
+        <p className={cn('text-md md:text-lg')}>건</p>
+      </div>
+    </div>
+  );
+}

src/mocks/statistics.ts

@@ -0,0 +1,29 @@
+export interface GetWorkSpaceStatistics {
+  success: boolean;
+  data: {
+    pendingCount: number;
+    totalCount: number;
+    rejectedCount: number;
+    totalAmount: number;
+    approvedCount: number;
+  };
+  meta: {
+    timestamp: string;
+    traceId: string;
+  };
+}
+
+export const mockStatistics: GetWorkSpaceStatistics = {
+  success: true,
+  data: {
+    pendingCount: 5,
+    totalCount: 20,
+    rejectedCount: 3,
+    totalAmount: 150000,
+    approvedCount: 12,
+  },
+  meta: {
+    timestamp: '2024-06-09T12:34:56Z',
+    traceId: 'abc123def456',
+  },
+};