chore(meister): 컴포넌트 리팩토링

Author: Ubinquitous

src/templates/meister/layouts/CircularProgressBox.tsx

@@ -3,8 +3,7 @@ import { styled } from "styled-components";
 import { getMeisterChapter } from "@/helpers";
 import { CircularProgressbar, buildStyles } from "react-circular-progressbar";
 import { color, flex, font } from "@/styles";
-import type { CircularProgressBoxProps } from "../interfaces";
-
+import { CircularProgressBoxProps } from "../interfaces";
 import "react-circular-progressbar/dist/styles.css";
 
 const CircularProgressBox = ({

src/templates/meister/layouts/Distribution.tsx

@@ -1,30 +1,26 @@
 import DistributionIcon from "@/assets/icons/DistributionIcon";
 import { Row } from "@/components/Flex";
-import { IMeister } from "@/interfaces";
 import { color, font } from "@/styles";
 import flex from "@/styles/flex";
 import React from "react";
 import styled from "styled-components";
 import RadarChart from "../chart/RadarChart";
+import { Meister } from "../interfaces";
 
 const spiderChartValue = [
   { name: "내 점수", color: color.spider_first },
   { name: "학년 평균", color: color.spider_second },
 ];
 
-interface IDistributionProps {
-  meisterData: IMeister;
-}
-
-const Distribution = ({ meisterData }: IDistributionProps) => {
+const Distribution = ({ ...meisterData }: Meister) => {
   return (
     <Container>
       <Row alignItems="center" gap="4px">
         <DistributionIcon />
         <TitleText>영역별 점수 분포도</TitleText>
       </Row>
       <RadarBox>
-        <RadarChart meisterData={meisterData} />
+        <RadarChart {...meisterData} />
       </RadarBox>
       <StatusBox>
         {spiderChartValue.map((chart) => (

src/templates/meister/layouts/YearlyMeisterScore.tsx

@@ -4,21 +4,17 @@ import { color, font } from "@/styles";
 import React from "react";
 import styled from "styled-components";
 import { getStatusColor } from "@/helpers";
-import { IMeister } from "@/interfaces";
 import MeisterChart from "../chart/MeisterChart";
+import { Meister } from "../interfaces";
 
-interface IYearlyMeisterScroeProps {
-  meisterData: IMeister;
-}
-
-const YearlyMeisterScore = ({ meisterData }: IYearlyMeisterScroeProps) => {
+const YearlyMeisterScore = ({ ...meisterData }: Meister) => {
   return (
     <Container>
       <Row alignItems="center" gap="8px">
         <GraphIcon />
         <TitleText>연도별 점수 그래프</TitleText>
       </Row>
-      <MeisterChart meisterData={meisterData} />
+      <MeisterChart {...meisterData} />
       <StatusBox>
         {["학년 평균", "내 점수", "최고 점수"].map((year, index) => (
           <Row key={year} alignItems="center" gap="4px">