From f35f93de26b3118ffc6a4ec03b98660ae7aea5ce Mon Sep 17 00:00:00 2001
From: yunho <kimyouknow@naver.com>
Date: Fri, 27 May 2022 11:04:39 +0900
Subject: [PATCH 1/3] =?UTF-8?q?Feat:=20svg=20=EA=B7=B8=EB=9E=98=ED=94=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/components/SVGLineChart/index.tsx | 32 ++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 FE/src/components/SVGLineChart/index.tsx

diff --git a/FE/src/components/SVGLineChart/index.tsx b/FE/src/components/SVGLineChart/index.tsx
new file mode 100644
index 000000000..e3e081b2c
--- /dev/null
+++ b/FE/src/components/SVGLineChart/index.tsx
@@ -0,0 +1,32 @@
+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 => {
+      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>
+  );
+}

From f702c10465242910e44a5ab70b6e1cf6f7c4ebe6 Mon Sep 17 00:00:00 2001
From: yunho <kimyouknow@naver.com>
Date: Fri, 27 May 2022 11:07:21 +0900
Subject: [PATCH 2/3] =?UTF-8?q?Feat:=20canvas=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 선 그리는 로직 미완
---
 FE/src/components/CanvasLineCharts/index.tsx | 38 ++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 FE/src/components/CanvasLineCharts/index.tsx

diff --git a/FE/src/components/CanvasLineCharts/index.tsx b/FE/src/components/CanvasLineCharts/index.tsx
new file mode 100644
index 000000000..e5a1ad5f8
--- /dev/null
+++ b/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>
+  );
+}

From ff15b486dbbb871a29c6190d66774fff07177700 Mon Sep 17 00:00:00 2001
From: yunho <kimyouknow@naver.com>
Date: Fri, 27 May 2022 11:09:44 +0900
Subject: [PATCH 3/3] =?UTF-8?q?Chore:=20svgChart=EC=97=90=EC=84=9C=20plots?=
 =?UTF-8?q?=20=EC=A2=8C=ED=91=9C=EA=B0=92=20=EA=B4=80=EB=A0=A8=20=EC=A3=BC?=
 =?UTF-8?q?=EC=84=9D=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/App.tsx                           | 4 ++++
 FE/src/components/SVGLineChart/index.tsx | 1 +
 2 files changed, 5 insertions(+)

diff --git a/FE/src/App.tsx b/FE/src/App.tsx
index 310a442f6..621d20a7d 100644
--- a/FE/src/App.tsx
+++ b/FE/src/App.tsx
@@ -1,4 +1,6 @@
+import CanvasLineChart from '@/components/CanvasLineCharts';
 import LoginModal from '@/components/LoginModal';
+import SVGLineChart from '@/components/SVGLineChart';
 import useToggle from '@/hooks/useToggle';
 
 function App() {
@@ -7,6 +9,8 @@ function App() {
     <div>
       <button onClick={handleOpenModal}>로그인 모달</button>
       <LoginModal isModalOpen={isModalOpen} handleOpenModal={handleOpenModal} />
+      <SVGLineChart />
+      <CanvasLineChart />
     </div>
   );
 }
diff --git a/FE/src/components/SVGLineChart/index.tsx b/FE/src/components/SVGLineChart/index.tsx
index e3e081b2c..ed88ba87f 100644
--- a/FE/src/components/SVGLineChart/index.tsx
+++ b/FE/src/components/SVGLineChart/index.tsx
@@ -16,6 +16,7 @@ const data = [
 export default function SVGLineChart() {
   const points = data
     .map(element => {
+      // svg에 표시할 때 px단위가 아니어서 비율로 계산
       const x = (element.x / 6) * 100;
       const y = 100 - (element.y / 500) * 100;