From d11b75d541d66dfbe29066a6d68435b6be1eea27 Mon Sep 17 00:00:00 2001
From: Yongjun Park <yopark@student.42seoul.kr>
Date: Tue, 25 Jul 2023 21:51:07 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20versus=20=EB=A0=88?=
 =?UTF-8?q?=EB=B2=A8=20=EC=A6=9D=EA=B0=80=20=EA=B7=B8=EB=9E=98=ED=94=84=20?=
 =?UTF-8?q?=EC=83=89=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../General/LevelRecords.tsx                  |  2 +-
 .../Versus/LevelRecords.tsx                   | 32 ++++++++++++++++++-
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/app/src/Profile/dashboard-contents/General/LevelRecords.tsx b/app/src/Profile/dashboard-contents/General/LevelRecords.tsx
index db362268..02eb6df4 100644
--- a/app/src/Profile/dashboard-contents/General/LevelRecords.tsx
+++ b/app/src/Profile/dashboard-contents/General/LevelRecords.tsx
@@ -98,7 +98,7 @@ type LevelRecordsChartProps = {
   series: ApexAxisChartSeries;
 };
 
-export const LevelRecordsChart = ({ series }: LevelRecordsChartProps) => {
+const LevelRecordsChart = ({ series }: LevelRecordsChartProps) => {
   const theme = useTheme();
 
   const options: ApexCharts.ApexOptions = {
diff --git a/app/src/Profile/dashboard-contents/Versus/LevelRecords.tsx b/app/src/Profile/dashboard-contents/Versus/LevelRecords.tsx
index 524ef87e..9b7892bc 100644
--- a/app/src/Profile/dashboard-contents/Versus/LevelRecords.tsx
+++ b/app/src/Profile/dashboard-contents/Versus/LevelRecords.tsx
@@ -1,7 +1,8 @@
-import { LevelRecordsChart } from '@/Profile/dashboard-contents/General';
 import { useQuery } from '@apollo/client';
+import { useTheme } from '@emotion/react';
 import { gql } from '@shared/__generated__';
 import { userAtom } from '@shared/atoms/userAtom';
+import { LineChart } from '@shared/components/Chart';
 import { DashboardContent } from '@shared/components/DashboardContent';
 import {
   DashboardContentBadRequest,
@@ -85,3 +86,32 @@ export const LevelRecords = () => {
     </DashboardContent>
   );
 };
+
+type LevelRecordsChartProps = {
+  series: ApexAxisChartSeries;
+};
+
+const LevelRecordsChart = ({ series }: LevelRecordsChartProps) => {
+  const theme = useTheme();
+
+  const options: ApexCharts.ApexOptions = {
+    colors: [theme.colors.primary.default, theme.colors.accent.default],
+    xaxis: {
+      labels: {
+        formatter: (value) => `${value}`,
+      },
+    },
+    yaxis: {
+      labels: {
+        formatter: (value) => `lv. ${value}`,
+      },
+    },
+    tooltip: {
+      x: {
+        formatter: (value) => `${value}개월 차`,
+      },
+    },
+  };
+
+  return <LineChart series={series} options={options} />;
+};