[Feat] 차트 레이아웃 시도 (svg, canvas)

FE/src/App.tsx

@@ -1,4 +1,6 @@
 import CalendarModal from '@/components/CalendarModal';
+import CanvasLineChart from '@/components/CanvasLineCharts';
+import SVGLineChart from '@/components/SVGLineChart';
 import useToggle from '@/hooks/useToggle';
 
 function App() {
@@ -8,6 +10,8 @@ function App() {
       <div>
         <button onClick={handleOpenModal}>캘린더 모달</button>
         <CalendarModal isModalOpen={isModalOpen} handleOpenModal={handleOpenModal} />
+        <SVGLineChart />
+        <CanvasLineChart />
       </div>
     </>
   );

FE/src/components/CanvasLineCharts/index.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from 'react';
+
+const container = {
+  width: '300px',
+  height: '300px',
+};
+
+const data = [
+  { label: 'asd', x: 0, y: 0 },
+  { label: 'z', x: 1, y: 400 },
+  { label: 'dfa', x: 2, y: 200 },
+  { label: 'wsa', x: 3, y: 100 },
+  { label: 'hh', x: 4, y: 300 },
+  { label: 'ert', x: 5, y: 500 },
+  { label: 'Snbx', x: 6, y: 100 },
+];
+
+export default function CanvasLineChart() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  const drawLine = () => {
+    // canvas 자체
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    canvas.width = 300;
+    canvas.height = 300;
+    // 선그리는 로직
+  };
+
+  useEffect(() => {
+    drawLine();
+  }, []);
+  return (
+    <div style={container}>
+      <canvas style={{ ...container, border: '3px solid #ccc' }} ref={canvasRef}></canvas>
+    </div>
+  );
+}

FE/src/components/SVGLineChart/index.tsx

@@ -0,0 +1,33 @@
+const container = {
+  width: '300px',
+  height: '300px',
+};
+
+const data = [
+  { label: 'asd', x: 0, y: 0 },
+  { label: 'z', x: 1, y: 400 },
+  { label: 'dfa', x: 2, y: 200 },
+  { label: 'wsa', x: 3, y: 100 },
+  { label: 'hh', x: 4, y: 300 },
+  { label: 'ert', x: 5, y: 500 },
+  { label: 'Snbx', x: 6, y: 100 },
+];
+
+export default function SVGLineChart() {
+  const points = data
+    .map(element => {
+      // svg에 표시할 때 px단위가 아니어서 비율로 계산
+      const x = (element.x / 6) * 100;
+      const y = 100 - (element.y / 500) * 100;
+
+      return `${x},${y}`;
+    })
+    .join(' ');
+  return (
+    <div style={container}>
+      <svg viewBox={`0 0 100 100`} style={{ border: '3px solid #ccc' }}>
+        <polyline fill="none" stroke="tomato" strokeWidth={1} points={points} />
+      </svg>
+    </div>
+  );
+}