✨Feat: add chart components using Recharts

package.json

@@ -18,6 +18,7 @@
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.11.0",
     "react-spinners": "^0.17.0",
+    "recharts": "^3.6.0",
     "tailwindcss": "^4.1.18",
     "zustand": "^5.0.9"
   },

src/pages/home/Home.tsx

@@ -1,8 +1,10 @@
 import Alert from './components/Alert/Alert';
+import Chart from './components/Chart/Chart';
 
 const Home = () => {
   return (
     <>
+      <Chart />
       <Alert />
     </>
   );

src/pages/home/components/Chart/Chart.tsx

@@ -0,0 +1,13 @@
+import ChartItem from './ChartItem';
+
+function Chart() {
+  return (
+    <div className="flex items-center justify-center">
+      <div className="w-full max-w-[39.8rem] mx-6">
+        <ChartItem />
+      </div>
+    </div>
+  );
+}
+
+export default Chart;

src/pages/home/components/Chart/ChartItem.tsx

@@ -0,0 +1,135 @@
+import { useState } from 'react';
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts';
+import ChartSInfo from './ChartSInfo';
+
+interface ChartDataItem {
+  name: string;
+  subject1: number;
+  subject2: number;
+  subject3: number;
+}
+
+type StockType = 'ALL' | 'Bitcoin' | 'Ethereum' | 'Solana';
+
+const data: ChartDataItem[] = [
+  { name: '10:00', subject1: 0.5, subject2: 1.0, subject3: 0.8 },
+  { name: '11:00', subject1: 0.7, subject2: 0.1, subject3: 0.4 },
+  { name: '12:00', subject1: 0.2, subject2: -0.3, subject3: 0.6 },
+  { name: '13:00', subject1: 0.5, subject2: 0, subject3: 0.2 },
+  { name: '14:00', subject1: -0.1, subject2: -0.7, subject3: 0.9 },
+  { name: '15:00', subject1: 0.9, subject2: -0.8, subject3: 1.0 },
+  { name: '16:00', subject1: -0.7, subject2: 0.6, subject3: 0.3 },
+  { name: '17:00', subject1: 0.9, subject2: 0.4, subject3: -0.3 },
+  { name: '18:00', subject1: -0.7, subject2: 1.0, subject3: 0.9 },
+];
+
+function ChartItem() {
+  const [filter] = useState<StockType>('Bitcoin');
+
+  return (
+    <div className="flex items-center justify-center min-h-[16.8rem] bg-white rounded-xl">
+      <div className="w-full h-50 relative">
+        <ResponsiveContainer width="100%" height="100%">
+          <ChartSInfo />
+          <AreaChart
+            data={data}
+            margin={{ top: 25, right: 20, left: -30, bottom: -5 }}
+          >
+            <defs>
+              <linearGradient id="colorSub1" x1="0" y1="0" x2="0" y2="1">
+                <stop stopColor="#8979FF" stopOpacity="0.2" />
+                <stop offset="1" stopColor="#8979FF" stopOpacity="0.05" />
+              </linearGradient>
+              <linearGradient id="colorSub2" x1="0" y1="0" x2="0" y2="1">
+                <stop stopColor="#FF928A" stopOpacity="0.2" />
+                <stop offset="1" stopColor="#FF928A" stopOpacity="0.05" />
+              </linearGradient>
+              <linearGradient id="colorSub3" x1="0" y1="0" x2="0" y2="1">
+                <stop stopColor="#3CC3DF" stopOpacity="0.2" />
+                <stop offset="1" stopColor="#3CC3DF" stopOpacity="0.05" />
+              </linearGradient>
+            </defs>
+
+            <CartesianGrid
+              strokeDasharray="3 3"
+              vertical={true}
+              stroke="var(--color-gray-100)"
+            />
+
+            <XAxis
+              dataKey="name"
+              axisLine={{ stroke: '#e5e7eb' }}
+              tickLine={false}
+              tick={{ fill: 'var(--color-black)', fontSize: 8 }}
+              dy={10}
+            />
+
+            <YAxis
+              domain={[-1, 1]}
+              ticks={[-1, 0, 1]}
+              axisLine={false}
+              tickLine={false}
+              tick={{ fill: 'var(--color-black)', fontSize: 8 }}
+            />
+
+            <Tooltip
+              contentStyle={{
+                borderRadius: '0.5rem',
+                border: 'none',
+              }}
+            />
+
+            {(filter === 'ALL' || filter === 'Bitcoin') && (
+              <Area
+                type="monotone"
+                dataKey="subject1"
+                stroke="#8884d8"
+                strokeWidth={1}
+                fillOpacity={1}
+                fill="url(#colorSub1)"
+                baseValue={-1}
+                dot={{ r: 3, fill: '#fff', stroke: '#8884d8', strokeWidth: 1 }}
+              />
+            )}
+
+            {(filter === 'ALL' || filter === 'Ethereum') && (
+              <Area
+                type="monotone"
+                dataKey="subject2"
+                stroke="#ff7c7c"
+                strokeWidth={1}
+                fillOpacity={1}
+                fill="url(#colorSub2)"
+                baseValue={-1}
+                dot={{ r: 3, fill: '#fff', stroke: '#ff7c7c', strokeWidth: 1 }}
+              />
+            )}
+
+            {(filter === 'ALL' || filter === 'Solana') && (
+              <Area
+                type="monotone"
+                dataKey="subject3"
+                stroke="#2dd4bf"
+                strokeWidth={1}
+                fillOpacity={1}
+                fill="url(#colorSub3)"
+                baseValue={-1}
+                dot={{ r: 3, fill: '#fff', stroke: '#2dd4bf', strokeWidth: 1 }}
+              />
+            )}
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}
+
+export default ChartItem;

src/pages/home/components/Chart/ChartSInfo.tsx

@@ -0,0 +1,24 @@
+import bit from '../../../../assets/chart/bitcoin.png';
+import eth from '../../../../assets/chart/ethereum.png';
+import sol from '../../../../assets/chart/solana.png';
+
+function ChartSInfo() {
+  return (
+    <div className="absolute flex w-full justify-center items-center gap-6">
+      <div className="flex justify-center items-center gap-0.5">
+        <img src={bit} alt="bitcoin" className="w-5 h-5" />
+        <span>bitcoin</span>
+      </div>
+      <div className="flex justify-center items-center gap-0.5">
+        <img src={eth} alt="ethereum" className="w-5 h-5" />
+        <span>ethereum</span>
+      </div>
+      <div className="flex justify-center items-center gap-0.5 pt-px">
+        <img src={sol} alt="solana" className="w-5 h-5" />
+        <span>solana</span>
+      </div>
+    </div>
+  );
+}
+
+export default ChartSInfo;