[Feat] 배지, 리포트 API 연결 (#21)

* feat: axios 설치

* feat: 주행 관련 API 요청 코드

* feat: 주행 API 연결

* fix: 주행 후 리포트에 코멘트 추가

* feat: 홈 페이지 헤더

* feat: 홈 화면 점수

* feat: 주행, 주행기록 API 연결

* feat: 배지 이미지 추가, API 연결

* feat: 리포트 페이지 API 추가

* feat: 리포트 API 연결

src/api/badgeAPIS.ts

@@ -0,0 +1,10 @@
+import { axiosInstance } from "./instance";
+
+export const badgeAPI = async () => {
+  try {
+    const response = await axiosInstance.get("/badge");
+    return response.data;
+  } catch {
+    return null;
+  }
+};

src/api/reportAPIS.ts

@@ -0,0 +1,63 @@
+import { axiosInstance } from "./instance";
+
+const date = new Date();
+
+/**
+ * 간단 주행 이력 조회
+ * /feedback/bio
+ */
+export const reportBioAPI = async () => {
+  try {
+    const response = await axiosInstance.post("/feedback/bio", {
+      thisMonth: date.getMonth() + 1,
+    });
+    return response.data;
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * 운전 점수 조회
+ * /feedback/score
+ */
+export const reportScoreAPI = async () => {
+  try {
+    const response = await axiosInstance.post("/feedback/score", {
+      thisMonth: date.getMonth() + 1,
+    });
+    return response.data;
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * 이번달 주의 항목 - 상위 4개
+ * /feedback/top4
+ */
+export const reportWarningAPI = async () => {
+  try {
+    const response = await axiosInstance.post("/feedback/top4", {
+      thisMonth: date.getMonth() + 1,
+    });
+    return response.data;
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * 이번달 주의 항목
+ * /feedback/caution
+ */
+export const reportCautionAPI = async () => {
+  try {
+    const response = await axiosInstance.post("/feedback/caution", {
+      thisMonth: date.getMonth() + 1,
+    });
+    return response.data;
+  } catch {
+    return null;
+  }
+};

src/components/Badge/BadgeContents/index.tsx

@@ -3,47 +3,18 @@ import styled from "styled-components";
 import { BadgeType } from "src/types/badge";
 import { Badge } from "./Badge";
 import { BottomSheet } from "./BottomSheet";
-
-const data = [
-  {
-    badgeId: 1,
-    status: 0,
-    name: "귀향길 운전왕",
-    caption: "시작이 반이다! 벌써 베스트 드라이버에 가까워지고 있어요.",
-  },
-  {
-    badgeId: 2,
-    status: 1,
-    name: "베스트 드라이버",
-    caption: "시작이 반이다! 벌써 베스트 드라이버에 가까워지고 있어요.",
-  },
-  {
-    badgeId: 3,
-    status: 0,
-    name: "피드백 만점",
-    caption: "시작이 반이다! 벌써 베스트 드라이버에 가까워지고 있어요.",
-  },
-  {
-    badgeId: 4,
-    status: 0,
-    name: "귀향길 운전왕",
-    caption: "시작이 반이다! 벌써 베스트 드라이버에 가까워지고 있어요.",
-  },
-  {
-    badgeId: 5,
-    status: 1,
-    name: "베스트 드라이버",
-    caption: "시작이 반이다! 벌써 베스트 드라이버에 가까워지고 있어요.",
-  },
-];
+import { badgeAPI } from "@api/badgeAPIS";
 
 export const BadgeContents = () => {
   const [badges, setBadges] = useState<BadgeType[]>([]);
   const [open, setOpen] = useState<Boolean>(false);
   const [current, setCurrent] = useState<BadgeType>();
 
   useEffect(() => {
-    setBadges(data);
+    const response = badgeAPI();
+    response.then((res) => {
+      setBadges(res);
+    });
   }, []);
 
   return (

src/components/Note/Report/Report.styles.ts

@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 export const ReportContainer = styled.div<{ open: boolean }>`
   width: 360px;
-  height: ${(props) => (props.open ? "345px" : "164px")};
+  height: ${(props) => (props.open ? "364px" : "164px")};
   margin: 12px 0;
   padding: 15px 22px;
 

src/components/Report/Bio/index.tsx

@@ -2,18 +2,16 @@ import * as styles from "./Bio.styles";
 import { useEffect, useState } from "react";
 import { BioType } from "src/types/report";
 import { getDateString } from "@utils/datetime";
+import { reportBioAPI } from "@api/reportAPIS";
 
-const data = {
-  monthlyMileage: "20.2",
-  totalMileage: "1206.456",
-  latestDeparture: "2023-10-23T18:51:16.007759",
-  latestArrival: "2023-10-23T19:30:44.789957",
-};
 export const Bio = () => {
   const [bio, setBio] = useState<BioType>();
 
   useEffect(() => {
-    setBio(data);
+    const response = reportBioAPI();
+    response.then((res) => {
+      setBio(res);
+    });
   }, []);
 
   return (

src/components/Report/Score/ScoreChart.tsx

@@ -59,15 +59,16 @@ const labels = [
   `${getFormerMonth(0)}월`,
 ];
 
-export interface ScoreChartProps {
-  months: number[];
+interface ScoreChartProps {
+  score: number;
 }
-export const ScoreChart = ({ months }: ScoreChartProps) => {
+
+export const ScoreChart = ({ score }: ScoreChartProps) => {
   const data = {
     labels,
     datasets: [
       {
-        data: months,
+        data: [63, 88, 72, 95, 81, score],
         borderColor: "#87A3FF",
         backgroundColor: "#4561DB",
       },

src/components/Report/Score/index.tsx

@@ -1,43 +1,20 @@
 import * as styles from "./Score.styles";
 import { useState, useEffect } from "react";
-import { MonthlyScoreType } from "src/types/report";
 import score_icon from "@assets/icons/score_icon.svg";
 import { CircularProgressbar, buildStyles } from "react-circular-progressbar";
 import ChangingProgressProvider from "./ChaingingProgressProvider";
 import "react-circular-progressbar/dist/styles.css";
 import { ScoreChart } from "./ScoreChart";
+import { reportScoreAPI } from "@api/reportAPIS";
 
-const score = {
-  averageScore: 75,
-  month1: 45,
-  month2: 50,
-  month3: 60,
-  month4: 70,
-  month5: 65,
-  month6: 80,
-};
 export const Score = () => {
-  const [data, setData] = useState<MonthlyScoreType>({
-    averageScore: 0,
-    month1: 0,
-    month2: 0,
-    month3: 0,
-    month4: 0,
-    month5: 0,
-    month6: 0,
-  });
-  const months = [
-    data.month6,
-    data.month5,
-    data.month4,
-    data.month3,
-    data.month2,
-    data.month1,
-  ];
+  const [score, setScore] = useState<number>(0);
 
   useEffect(() => {
-    //TODO: API 연결
-    setData(score);
+    const response = reportScoreAPI();
+    response.then((res) => {
+      if (res.averageScore) setScore(res?.averageScore);
+    });
   }, []);
 
   return (
@@ -48,11 +25,11 @@ export const Score = () => {
       </styles.ScoreHeader>
       <styles.ScoreContents>
         <styles.ProgressbarContainer>
-          <ChangingProgressProvider values={[0, data.averageScore]}>
+          <ChangingProgressProvider values={[0, score]}>
             {(percentage) => (
               <CircularProgressbar
                 value={percentage}
-                text={`${data.averageScore}점`}
+                text={`${score}점`}
                 className="progressbar"
                 strokeWidth={8}
                 styles={buildStyles({
@@ -65,7 +42,7 @@ export const Score = () => {
           </ChangingProgressProvider>
         </styles.ProgressbarContainer>
         <styles.LineChartContainer>
-          <ScoreChart months={months} />
+          <ScoreChart score={score} />
         </styles.LineChartContainer>
       </styles.ScoreContents>
     </styles.ScoreContainer>

src/components/Report/Warning/DetailWarning/DetailWarning.tsx

@@ -2,20 +2,22 @@ import * as styles from "./DetailWarning.styles";
 import danger_icon from "@assets/icons/danger_icon.svg";
 import { RatioBar } from "./RatioBar";
 import { RatioBarDetail } from "./RatioBarDetail";
+import { ScenarioType } from "src/types/driving";
 
 interface DetailWarningProps {
   name: string;
+  data: ScenarioType[];
 }
-export const DetailWarning = ({ name }: DetailWarningProps) => {
-  const data = [12, 8, 4];
+export const DetailWarning = ({ name, data }: DetailWarningProps) => {
+  const counts = data.map((scenario) => scenario.scenarioCount);
   return (
     <styles.DetailWarningContainer>
       <styles.DetailWarningHeader>
         <img src={danger_icon} alt="주의 항목" />
         {name}
       </styles.DetailWarningHeader>
-      <RatioBar data={data} />
-      <RatioBarDetail />
+      <RatioBar data={counts} />
+      <RatioBarDetail data={data} />
     </styles.DetailWarningContainer>
   );
 };

src/components/Report/Warning/DetailWarning/RatioBar.tsx

@@ -5,6 +5,7 @@ interface RatioBarProps {
 }
 export const RatioBar = ({ data }: RatioBarProps) => {
   const sum = data.reduce((acc, cur) => acc + cur, 0);
+  const classNames = ["first", "second", "third"];
 
   const getWidth = (num: number) => {
     const width = Math.ceil(320 * (num / sum));
@@ -13,9 +14,15 @@ export const RatioBar = ({ data }: RatioBarProps) => {
 
   return (
     <RatioBarContainer>
-      <RatioContent className="first" width={getWidth(data[0])} />
-      <RatioContent className="second" width={getWidth(data[1])} />
-      <RatioContent className="third" width={getWidth(data[2])} />
+      {data.map((el, idx) => {
+        return (
+          <RatioContent
+            key={idx}
+            className={classNames[idx]}
+            width={getWidth(el)}
+          />
+        );
+      })}
     </RatioBarContainer>
   );
 };

src/components/Report/Warning/DetailWarning/RatioBarDetail.tsx

@@ -1,23 +1,22 @@
 import styled from "styled-components";
+import { ScenarioType } from "src/types/driving";
 
-export const RatioBarDetail = () => {
+interface RatioBarDetailProps {
+  data: ScenarioType[];
+}
+export const RatioBarDetail = ({ data }: RatioBarDetailProps) => {
+  const classNames = ["first", "second", "third"];
   return (
     <RatioBarDetailContainer>
-      <BarContent>
-        <ColorMark className="first" />
-        <ContentName>실선에서 차선 변경</ContentName>
-        <ContentCount>12회</ContentCount>
-      </BarContent>
-      <BarContent>
-        <ColorMark className="second" />
-        <ContentName>앞차 간격 미유지</ContentName>
-        <ContentCount>8회</ContentCount>
-      </BarContent>
-      <BarContent>
-        <ColorMark className="third" />
-        <ContentName>전방 주시 태만</ContentName>
-        <ContentCount>4회</ContentCount>
-      </BarContent>
+      {data.map((el, idx) => {
+        return (
+          <BarContent key={el.scenarioType}>
+            <ColorMark className={classNames[idx]} />
+            <ContentName>{el.scenarioName}</ContentName>
+            <ContentCount>{el.scenarioCount}회</ContentCount>
+          </BarContent>
+        );
+      })}
     </RatioBarDetailContainer>
   );
 };

src/components/Report/Warning/DoughnutChart.tsx

@@ -11,12 +11,15 @@ export const options = {
   },
 };
 
-export const DoughnutChart = () => {
+interface DoughnutChartProps {
+  counts: number[];
+}
+export const DoughnutChart = ({ counts }: DoughnutChartProps) => {
   const data = {
     datasets: [
       {
         label: "# of Votes",
-        data: [8, 3, 5, 4],
+        data: counts,
         backgroundColor: ["#FFD762", "#64A2FF", "#564CFF", "#6CE4C0"],
         borderWidth: 0,
       },