[1195] DESIGN 발전 시뮬레이션 색상 변경

src/components/simulator/Simulator.jsx

@@ -49,34 +49,25 @@ export default function Simulator() {
           return isNaN(num) ? 0 : num
         }),
 
-        backgroundColor: [
+        backgroundColor: (context) => {
-          'rgba(255, 99, 132, 0.2)',
+          const chart = context.chart
-          'rgba(54, 162, 235, 0.2)',
+          const { ctx, chartArea } = chart
-          'rgba(255, 206, 86, 0.2)',
+
-          'rgba(75, 192, 192, 0.2)',
+          if (!chartArea) {
-          'rgba(153, 102, 255, 0.2)',
+            // This case happens on initial chart load
-          'rgba(255, 159, 64, 0.2)',
+            return null
-          'rgba(0, 99, 132, 0.2)',
+          }
-          'rgba(0, 162, 235, 0.2)',
+
-          'rgba(0, 206, 86, 0.2)',
+          const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top)
-          'rgba(0, 192, 192, 0.2)',
+          gradient.addColorStop(0, '#4FC3F7')  // Light blue at bottom
-          'rgba(0, 102, 255, 0.2)',
+          gradient.addColorStop(0.3, '#2FA8E0') // Original blue
-          'rgba(0, 159, 64, 0.2)',
+          gradient.addColorStop(0.7, '#1976D2') // Medium blue
-        ],
+          gradient.addColorStop(1, '#0D47A1')   // Dark blue at top
-        borderColor: [
+
-          'rgba(255, 99, 132, 0.2)',
+
-          'rgba(54, 162, 235, 0.2)',
+          return gradient
-          'rgba(255, 206, 86, 0.2)',
+        },
-          'rgba(75, 192, 192, 0.2)',
+        borderColor: '#2FA8E0' ,
-          'rgba(153, 102, 255, 0.2)',
-          'rgba(255, 159, 64, 0.2)',
-          'rgba(0, 99, 132, 0.2)',
-          'rgba(0, 162, 235, 0.2)',
-          'rgba(0, 206, 86, 0.2)',
-          'rgba(0, 192, 192, 0.2)',
-          'rgba(0, 102, 255, 0.2)',
-          'rgba(0, 159, 64, 0.2)',
-        ],
         borderWidth: 1,
       },
     ],