[Feat] 홈 화면 API 연결, 주행 중 Toast UI (#23)

* feat: 홈 화면 코멘트 API 연결

* feat: 주행 중 알림 Toast UI

* 홈 화면 API 추가

* 홈 화면 API 연결

src/api/homeAPIS.ts

@@ -0,0 +1,41 @@
+import { HomeRecentType, LatestScoresType } from "src/types/home";
+import { axiosInstance } from "./instance";
+
+//최근 주행 점수
+export const homeScoreAPI = async () => {
+  try {
+    const response = await axiosInstance.get("/home/score");
+    return response.data;
+  } catch {
+    return null;
+  }
+};
+
+export const homeLatestScoreAPI = async () => {
+  try {
+    const response = await axiosInstance.get("/home/latestScores");
+    return response.data as LatestScoresType;
+  } catch {
+    return null;
+  }
+};
+
+//최근 주행 피드백
+export const homeFeedbackAPI = async () => {
+  try {
+    const response = await axiosInstance.get("/home/feedback");
+    return response.data;
+  } catch {
+    return null;
+  }
+};
+
+//주의해야 할 운전 습관
+export const homeRecentsAPI = async () => {
+  try {
+    const response = await axiosInstance.get("/home/recentRisks");
+    return response.data as HomeRecentType;
+  } catch {
+    return null;
+  }
+};

src/components/Home/Comment.tsx

@@ -1,12 +1,25 @@
 import styled from "styled-components";
 import comment_icon from "@assets/icons/comment_icon.svg";
+import { homeFeedbackAPI } from "@api/homeAPIS";
+import { useEffect, useState } from "react";
 
 export const Comment = () => {
+  const [data, setData] = useState<{
+    feedback: string;
+  }>();
+
+  useEffect(() => {
+    const response = homeFeedbackAPI();
+    response.then((res) => {
+      setData(res);
+    });
+  }, []);
+
   return (
     <CommentContainer>
       <CommentContents>
         <img src={comment_icon} alt="코멘트" />
-        <CommentText>{"오늘도 안전한 운전 하세요!"}</CommentText>
+        <CommentText>{data?.feedback}</CommentText>
       </CommentContents>
     </CommentContainer>
   );

src/components/Home/CurrentScoreChart.tsx

@@ -9,6 +9,7 @@ import {
   Legend,
 } from "chart.js";
 import { Line } from "react-chartjs-2";
+import { LatestScoresType } from "src/types/home";
 
 ChartJS.register(
   CategoryScale,
@@ -45,12 +46,16 @@ export const options = {
 
 const labels = ["", "", ""];
 
-export const CurrentScoreChart = () => {
+interface CurrentScoreChartProps {
+  scoresData: LatestScoresType | undefined;
+}
+export const CurrentScoreChart = ({ scoresData }: CurrentScoreChartProps) => {
+  const scores = scoresData?.latestScores?.map((el) => el.score);
   const data = {
     labels,
     datasets: [
       {
-        data: [63, 88, 72],
+        data: scores,
         borderColor: "#87A3FF",
         backgroundColor: "#4561DB",
       },

src/components/Home/Scores.tsx

@@ -2,18 +2,41 @@ import styled from "styled-components";
 import ChangingProgressProvider from "@components/Report/Score/ChaingingProgressProvider";
 import { CircularProgressbar, buildStyles } from "react-circular-progressbar";
 import { CurrentScoreChart } from "./CurrentScoreChart";
+import { useEffect, useState } from "react";
+import { homeScoreAPI, homeLatestScoreAPI } from "@api/homeAPIS";
+import { LatestScoresType } from "src/types/home";
 
 export const Scores = () => {
+  const [scoreData, setScoreData] = useState<{
+    score: Number;
+  }>({ score: 0 });
+
+  useEffect(() => {
+    const response = homeScoreAPI();
+    response.then((res) => {
+      if (res.score) setScoreData(res);
+    });
+  }, []);
+
+  const [scoresData, setScoresData] = useState<LatestScoresType>();
+
+  useEffect(() => {
+    const response = homeLatestScoreAPI();
+    response.then((res) => {
+      if (res) setScoresData(res);
+    });
+  }, []);
+
   return (
     <ScoresContainer>
       <ScoresHeader>나의 운전 점수</ScoresHeader>
       <ScoreContents>
         <ProgressbarContainer>
-          <ChangingProgressProvider values={[0, 80]}>
+          <ChangingProgressProvider values={[0, scoreData?.score]}>
             {(percentage) => (
               <CircularProgressbar
                 value={percentage}
-                text={`80점`}
+                text={`${scoreData?.score}점`}
                 className="progressbar"
                 strokeWidth={8}
                 styles={buildStyles({
@@ -27,7 +50,7 @@ export const Scores = () => {
         </ProgressbarContainer>
         <ChartContainer>
           <div>최근 3회 주행 기록</div>
-          <CurrentScoreChart />
+          <CurrentScoreChart scoresData={scoresData} />
         </ChartContainer>
       </ScoreContents>
     </ScoresContainer>

src/components/Home/Warning.tsx

@@ -1,7 +1,19 @@
 import styled from "styled-components";
 import info_icon from "@assets/icons/info_icon.svg";
+import { homeRecentsAPI } from "@api/homeAPIS";
+import { useState, useEffect } from "react";
+import { ScenarioType } from "src/types/driving";
 
 export const Warning = () => {
+  const [data, setData] = useState<ScenarioType[]>();
+
+  useEffect(() => {
+    const response = homeRecentsAPI();
+    response.then((res) => {
+      if (res) setData(res?.recentRisks);
+    });
+  }, []);
+
   return (
     <WarningContainer>
       <WarningContents>
@@ -10,15 +22,13 @@ export const Warning = () => {
           <img src={info_icon} alt="정보" />
           최근 주행 기록을 바탕으로 산정된 주의 항목입니다.
         </InfoText>
-        <WarningItem>
-          1. 실선에서 차선 변경 <span>12번</span>
-        </WarningItem>
-        <WarningItem>
-          2. 실선에서 차선 변경 <span>8번</span>
-        </WarningItem>
-        <WarningItem>
-          3. 실선에서 차선 변경 <span>4번</span>
-        </WarningItem>
+        {data?.map((el, idx) => {
+          return (
+            <WarningItem key={el.scenarioType}>
+              {`${idx}. ${el.scenarioName}`} <span>{el.scenarioCount}번</span>
+            </WarningItem>
+          );
+        })}
       </WarningContents>
     </WarningContainer>
   );

src/components/common/Toast.tsx

@@ -0,0 +1,59 @@
+import { useEffect } from "react";
+import styled from "styled-components";
+import alarm_sound from "@assets/sound/alram.mp3";
+
+interface ToastProps {
+  message: string;
+  setToast: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export const Toast = ({ message, setToast }: ToastProps) => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setToast(false);
+    }, 3000);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+  return (
+    <ToastContainer>
+      <audio src={alarm_sound} autoPlay />
+      {message}
+    </ToastContainer>
+  );
+};
+
+const ToastContainer = styled.div`
+  width: 280px;
+  height: 42px;
+  padding: 0 12px;
+  border-radius: 4px;
+  background-color: #f86d60;
+
+  color: white;
+  font-family: "Pretendard";
+  font-weight: 500;
+  line-height: 42px;
+
+  position: absolute;
+  left: 10px;
+  top: 40px;
+
+  animation: fadeout 2s ease-in-out;
+  opacity: 0;
+
+  @keyframes fadeout {
+    0% {
+      opacity: 0;
+    }
+    25% {
+      opacity: 1;
+    }
+    75% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+`;

src/types/home.ts

@@ -0,0 +1,13 @@
+import { ScenarioType } from "./driving";
+
+interface ScoreType {
+  reportId: number;
+  score: number;
+}
+export interface LatestScoresType {
+  latestScores: ScoreType[];
+}
+
+export interface HomeRecentType {
+  recentRisks: ScenarioType[];
+}

tsconfig.json

@@ -14,6 +14,7 @@
       "@utils/*": ["src/utils/*"],
       "@api/*": ["src/api/*"]
     },
+    "typeRoots": ["./use-sound.d.ts"],
 
     /* Bundler mode */
     "moduleResolution": "bundler",