feat: add ChartFallback component for handling insufficient chart data

Author: ryxxn

src/views/(developer)/wepp-dashboard/sections/wepp-dashboard-chart/chart-fallback.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { AlertTriangle } from 'lucide-react';
+import React from 'react';
+
+const ChartFallback = () => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5, ease: 'easeOut' }}
+      className="flex flex-col items-center justify-center h-[300px] border border-dashed border-gray-300 rounded-lg text-gray-500 px-4 text-center"
+    >
+      <AlertTriangle className="w-6 h-6 mb-2 text-yellow-500 animate-pulse" />
+      <p className="text-sm font-medium">
+        3일 이상의 통계가 쌓여야 차트를 확인할 수 있어요.
+      </p>
+    </motion.div>
+  );
+};
+
+export default ChartFallback;

src/views/(developer)/wepp-dashboard/sections/wepp-dashboard-chart/index.tsx

@@ -22,6 +22,7 @@ import {
   SUB_FILTERS,
 } from './utils';
 import { FilterType, SubFilterType } from './types';
+import ChartFallback from './chart-fallback';
 
 // ----------------------------------------------------------------------
 
@@ -110,49 +111,53 @@ const WeppDashboardChart = () => {
         )}
       </div>
 
-      <ResponsiveContainer width="100%" height={300}>
-        <AreaChart data={chartData}>
-          <defs>
+      {chartData.length <= 3 ? (
+        <ChartFallback />
+      ) : (
+        <ResponsiveContainer width="100%" height={300}>
+          <AreaChart data={chartData}>
+            <defs>
+              {keysByFilter.map((key) => (
+                <linearGradient
+                  id={`fill_${key}`}
+                  key={key}
+                  x1="0"
+                  y1="0"
+                  x2="0"
+                  y2="1"
+                >
+                  <stop
+                    offset="5%"
+                    stopColor={LINE_COLORS[key]}
+                    stopOpacity={0.7}
+                  />
+                  <stop
+                    offset="95%"
+                    stopColor={LINE_COLORS[key]}
+                    stopOpacity={0.1}
+                  />
+                </linearGradient>
+              ))}
+            </defs>
+
+            <XAxis dataKey="date" />
+            <YAxis allowDecimals={false} />
+            <Tooltip content={<CustomTooltip />} />
+            <Legend content={<CustomLegend />} />
+
             {keysByFilter.map((key) => (
-              <linearGradient
-                id={`fill_${key}`}
+              <Area
                 key={key}
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="1"
-              >
-                <stop
-                  offset="5%"
-                  stopColor={LINE_COLORS[key]}
-                  stopOpacity={0.7}
-                />
-                <stop
-                  offset="95%"
-                  stopColor={LINE_COLORS[key]}
-                  stopOpacity={0.1}
-                />
-              </linearGradient>
+                type="monotone"
+                dataKey={key}
+                stroke={LINE_COLORS[key]}
+                fill={`url(#fill_${key})`}
+                strokeWidth={2}
+              />
             ))}
-          </defs>
-
-          <XAxis dataKey="date" />
-          <YAxis allowDecimals={false} />
-          <Tooltip content={<CustomTooltip />} />
-          <Legend content={<CustomLegend />} />
-
-          {keysByFilter.map((key) => (
-            <Area
-              key={key}
-              type="monotone"
-              dataKey={key}
-              stroke={LINE_COLORS[key]}
-              fill={`url(#fill_${key})`}
-              strokeWidth={2}
-            />
-          ))}
-        </AreaChart>
-      </ResponsiveContainer>
+          </AreaChart>
+        </ResponsiveContainer>
+      )}
     </Section>
   );
 };