chore(meister): API연결완료

Author: Ubinquitous

src/page/meister/chart/MeisterChart.tsx

@@ -1,57 +1,66 @@
 import React from "react";
 import * as d3 from "d3";
 import { color } from "@/styles";
-
-type YearType = "2021" | "2022" | "2023";
+import { IMeister } from "@/interfaces";
+import { useDidMountEffect } from "@/hooks/useDidMountEffect";
 
 interface MeisterChartData {
-  group: string;
-  year: YearType;
-  points: number;
+  group:
+    | "basicJobSkills"
+    | "professionalTech"
+    | "workEthic"
+    | "humanities"
+    | "foreignScore";
+  scoreType: "avg" | "meister" | "max";
 }
 
 const graphColor = {
-  "2021": color.primary_yellow,
-  "2022": color.primary_blue,
-  "2023": color.primary_red,
+  avg: color.primary_yellow,
+  meister: color.primary_blue,
+  max: color.primary_red,
 };
 
 const groups = [
-  "외국어 능력",
-  "인성 직업 의식",
+  "직업 기초 능력",
   "전문 기술 역량",
+  "인성 직업 의식",
   "인문학적 소양",
-  "직업 기초 능력",
+  "외국어 능력",
 ];
 
 const data: MeisterChartData[] = [
-  { group: "외국어 능력", year: "2021", points: 32 },
-  { group: "외국어 능력", year: "2022", points: 43 },
-  { group: "외국어 능력", year: "2023", points: 44 },
+  { group: "basicJobSkills", scoreType: "avg" },
+  { group: "basicJobSkills", scoreType: "meister" },
+  { group: "basicJobSkills", scoreType: "max" },
 
-  { group: "인성 직업 의식", year: "2021", points: 40 },
-  { group: "인성 직업 의식", year: "2022", points: 36 },
-  { group: "인성 직업 의식", year: "2023", points: 31 },
+  { group: "professionalTech", scoreType: "avg" },
+  { group: "professionalTech", scoreType: "meister" },
+  { group: "professionalTech", scoreType: "max" },
 
-  { group: "전문 기술 역량", year: "2021", points: 37 },
-  { group: "전문 기술 역량", year: "2022", points: 10 },
-  { group: "전문 기술 역량", year: "2023", points: 17 },
+  { group: "workEthic", scoreType: "avg" },
+  { group: "workEthic", scoreType: "meister" },
+  { group: "workEthic", scoreType: "max" },
 
-  { group: "인문학적 소양", year: "2021", points: 10 },
-  { group: "인문학적 소양", year: "2022", points: 23 },
-  { group: "인문학적 소양", year: "2023", points: 4 },
+  { group: "humanities", scoreType: "avg" },
+  { group: "humanities", scoreType: "meister" },
+  { group: "humanities", scoreType: "max" },
 
-  { group: "직업 기초 능력", year: "2021", points: 38 },
-  { group: "직업 기초 능력", year: "2022", points: 2 },
-  { group: "직업 기초 능력", year: "2023", points: 25 },
+  { group: "foreignScore", scoreType: "avg" },
+  { group: "foreignScore", scoreType: "meister" },
+  { group: "foreignScore", scoreType: "max" },
 ];
 
 const meisterSeparation = [0, 30, 60];
 
-const MeisterChart = () => {
+interface IMeisterChartProps {
+  meisterData: IMeister;
+}
+
+const MeisterChart = ({ meisterData }: IMeisterChartProps) => {
   const canvasRef = React.useRef(null);
 
-  React.useEffect(() => {
+  useDidMountEffect(() => {
+    if (meisterData.avg.basicJobSkills === 0) return;
     const canvas = d3.select(canvasRef.current);
     const svg = canvas
       .append("svg")
@@ -74,11 +83,14 @@ const MeisterChart = () => {
         .attr("height", "0%")
         .attr("y", "100%")
         .attr("width", 15)
-        .attr("fill", graphColor[item.year])
+        .attr("fill", graphColor[item.scoreType])
         .transition()
         .duration(1000)
-        .attr("height", `${(item.points / data.length) * 100}%`)
-        .attr("y", `${100 - item.points}%`);
+        .attr(
+          "height",
+          `${(meisterData[item.scoreType][item.group] / data.length) * 120}%`,
+        )
+        .attr("y", `${110 - meisterData[item.scoreType][item.group]}%`);
 
       svg
         .append("text")
@@ -89,8 +101,8 @@ const MeisterChart = () => {
         .style("font-size", "10px")
         .transition()
         .duration(1000)
-        .attr("y", `${98 - item.points}%`)
-        .text(item.points)
+        .attr("y", `${108 - meisterData[item.scoreType][item.group]}%`)
+        .text(Math.round(meisterData[item.scoreType][item.group]))
         .style("fill", color.gray);
     });
 
@@ -125,7 +137,7 @@ const MeisterChart = () => {
         .style("font-weight", "600")
         .style("font-size", "12px");
     });
-  }, []);
+  }, [meisterData]);
 
   return <div ref={canvasRef} />;
 };

src/page/meister/chart/RadarChart.tsx

@@ -1,3 +1,4 @@
+import { IMeister } from "@/interfaces";
 import React, { useState } from "react";
 import Radar from "react-d3-radar";
 
@@ -21,41 +22,45 @@ interface ChartData {
   sets: DataSet[];
 }
 
-const chartData: ChartData = {
-  variables: [
-    { key: "anxiety", label: "직업기초능력" },
-    { key: "illness", label: "전문기술역량" },
-    { key: "sucidal", label: "인성/직업의식" },
-    { key: "distress", label: "인문학적 소양" },
-    { key: "depression", label: "외국어 능력" },
-  ],
-  sets: [
-    {
-      key: "served",
-      label: "학년 평균",
-      values: {
-        anxiety: 20,
-        illness: 30,
-        sucidal: 26,
-        distress: 31,
-        openness: 8,
+interface IRadarChartProps {
+  meisterData: IMeister;
+}
+
+const RadarChart = ({ meisterData }: IRadarChartProps) => {
+  const chartData: ChartData = {
+    variables: [
+      { key: "a", label: "직업기초능력" },
+      { key: "b", label: "전문기술역량" },
+      { key: "c", label: "인성/직업의식" },
+      { key: "d", label: "인문학적 소양" },
+      { key: "e", label: "외국어 능력" },
+    ],
+    sets: [
+      {
+        key: "avg",
+        label: "학년 평균",
+        values: {
+          a: meisterData.avg.basicJobSkills,
+          b: meisterData.avg.professionalTech,
+          c: meisterData.avg.workEthic,
+          d: meisterData.avg.humanities,
+          e: meisterData.avg.foreignScore,
+        },
       },
-    },
-    {
-      key: "civilians",
-      label: "Civilians",
-      values: {
-        anxiety: 20,
-        illness: 52,
-        sucidal: 20,
-        distress: 10,
-        openness: 24,
+      {
+        key: "my",
+        label: "내 점수",
+        values: {
+          a: meisterData.meister.basicJobSkills,
+          b: meisterData.meister.professionalTech,
+          c: meisterData.meister.workEthic,
+          d: meisterData.meister.humanities,
+          e: meisterData.meister.foreignScore,
+        },
       },
-    },
-  ],
-};
+    ],
+  };
 
-const RadarChart = () => {
   const [highlighted, setHighlighted] = useState<Variable | null>(null);
 
   const onHover = (hovered: Variable | null) => {