[Feat] 주행, 주행 기록 API 연결 (#20)

* feat: axios 설치

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

* feat: 주행 API 연결

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

* feat: 홈 페이지 헤더

* feat: 홈 화면 점수

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

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@types/node": "^20.11.17",
     "@types/react-router-dom": "^5.3.3",
+    "axios": "^1.6.7",
     "chart.js": "^4.4.1",
     "date-fns": "^3.3.1",
     "react": "^18.2.0",

src/App.tsx

@@ -21,7 +21,7 @@ function App() {
           <Route path="/report" element={<ReportPage />} />
           <Route path="/badge" element={<BadgePage />} />
           <Route path="/driving" element={<DrivingPage />} />
-          <Route path="/end" element={<EndPage />} />
+          <Route path="/end/:reportId" element={<EndPage />} />
         </Routes>
       </ThemeProvider>
     </BrowserRouter>

src/api/drivingAPIS.ts

@@ -0,0 +1,28 @@
+import { axiosInstance } from "./instance";
+
+export const drivingStartAPI = async () => {
+  try {
+    const response = await axiosInstance.post("/driving/start");
+    return response.data;
+  } catch {
+    return null;
+  }
+};
+
+export const drivingEndAPI = async () => {
+  try {
+    const response = await axiosInstance.patch("/driving/end");
+    return response.data;
+  } catch {
+    return null;
+  }
+};
+
+export const drivingEndReportAPI = async (reportId: number) => {
+  try {
+    const response = await axiosInstance.get(`/driving/end/${reportId}`);
+    return response.data;
+  } catch {
+    return null;
+  }
+};

src/api/historyAPIS.ts

@@ -0,0 +1,19 @@
+import { axiosInstance } from "./instance";
+
+export const historyAPI = async () => {
+  try {
+    const response = await axiosInstance.get("/history");
+    return response.data;
+  } catch {
+    return null;
+  }
+};
+
+export const historyDetailAPI = async (reportId: number) => {
+  try {
+    const response = await axiosInstance.get(`/history/${reportId}`);
+    return response.data;
+  } catch {
+    return null;
+  }
+};

src/api/instance.ts

@@ -0,0 +1,8 @@
+import axios from "axios";
+
+export const axiosInstance = axios.create({
+  baseURL: "http://13.209.80.41:8080",
+  headers: {
+    "Content-Type": "application/json",
+  },
+});

src/components/Drive/index.tsx

@@ -1,12 +1,17 @@
 import styled from "styled-components";
 import car_driving_img from "@assets/images/car_driving.gif";
 import { useNavigate } from "react-router-dom";
+import { drivingEndAPI } from "@api/drivingAPIS";
 
 export const Drive = () => {
   const navigate = useNavigate();
 
   const handleClickArriveBtn = () => {
-    navigate("/end");
+    const apiResponse = drivingEndAPI();
+    apiResponse.then((res) => {
+      console.log(res);
+      navigate(`/end/${res.reportId}`);
+    });
   };
 
   return (

src/components/End/EndReport/EndReport.styles.ts

@@ -29,7 +29,7 @@ export const BasicInfos = styled.div`
   flex-direction: column;
 
   margin: 15px 0;
-  padding-bottom: 10px;
+  padding-bottom: 5px;
 `;
 
 export const BasicInfo = styled.div`

src/components/End/EndReport/EndReport.tsx

@@ -1,48 +1,57 @@
 import * as styles from "./EndReport.styles";
+import { DrivingEndType } from "src/types/driving";
 
-export const EndReport = () => {
+interface EndReportProps {
+  data: DrivingEndType | undefined;
+}
+export const EndReport = ({ data }: EndReportProps) => {
   return (
     <styles.EndReportContainer>
       <styles.EndReportHeader>
         <span>김모비님을 위한</span>주행 후 리포트
       </styles.EndReportHeader>
       <styles.BasicInfos>
         <styles.BasicInfo>
-          운전 점수<span>100점</span>
+          운전 점수<span>{data?.score}점</span>
         </styles.BasicInfo>
         <styles.BasicInfo>
-          주행 거리<span>12km</span>
+          주행 거리<span>{data?.mileage}km</span>
         </styles.BasicInfo>
         <styles.BasicInfo>
-          주행 시간<span>8:40 - 12:20</span>
+          주행 시간
+          <span>{`${data?.departuredAt.slice(10, 16)} - ${data?.arrivedAt.slice(
+            10,
+            16
+          )}`}</span>
+        </styles.BasicInfo>
+        <styles.BasicInfo>
+          코멘트<span>{data?.scoreComment}</span>
         </styles.BasicInfo>
       </styles.BasicInfos>
       <styles.DetailInfo>
         <styles.SubHeader>차량 외부 감지 항목</styles.SubHeader>
         <styles.DetailContents>
-          <styles.DetailContent>
-            ∙ 감지 시나리오 1번<div className="count">10번</div>
-          </styles.DetailContent>
-          <styles.DetailContent>
-            ∙ 감지 시나리오 2번<div className="count">10번</div>
-          </styles.DetailContent>
-          <styles.DetailContent>
-            ∙ 감지 시나리오 3번<div className="count">10번</div>
-          </styles.DetailContent>
+          {data?.externalSummaries.map((el) => {
+            return (
+              <styles.DetailContent key={el.scenarioType}>
+                ∙ {el.scenarioName}
+                <div className="count">{el.scenarioCount}번</div>
+              </styles.DetailContent>
+            );
+          })}
         </styles.DetailContents>
       </styles.DetailInfo>
       <styles.DetailInfo>
         <styles.SubHeader>차량 내부 감지 항목</styles.SubHeader>
         <styles.DetailContents>
-          <styles.DetailContent>
-            ∙ 감지 시나리오 1번<div className="count">10번</div>
-          </styles.DetailContent>
-          <styles.DetailContent>
-            ∙ 감지 시나리오 2번<div className="count">10번</div>
-          </styles.DetailContent>
-          <styles.DetailContent>
-            ∙ 감지 시나리오 3번<div className="count">10번</div>
-          </styles.DetailContent>
+          {data?.internalSummaries.map((el) => {
+            return (
+              <styles.DetailContent key={el.scenarioType}>
+                ∙ {el.scenarioName}
+                <div className="count">{el.scenarioCount}번</div>
+              </styles.DetailContent>
+            );
+          })}
         </styles.DetailContents>
       </styles.DetailInfo>
     </styles.EndReportContainer>

src/components/End/index.tsx

@@ -1,11 +1,29 @@
 import { Link } from "react-router-dom";
 import styled from "styled-components";
 import { EndReport } from "./EndReport/EndReport";
+import { drivingEndReportAPI } from "@api/drivingAPIS";
+import { useEffect, useState } from "react";
+import { DrivingEndType } from "src/types/driving";
+import { useParams } from "react-router-dom";
 
 export const End = () => {
+  const [data, setData] = useState<DrivingEndType>();
+
+  const params = useParams();
+
+  useEffect(() => {
+    const reportId = params.reportId;
+    if (reportId) {
+      const response = drivingEndReportAPI(Number(reportId));
+      response.then((res) => {
+        setData(res);
+      });
+    }
+  }, []);
+
   return (
     <EndContainer>
-      <EndReport />
+      <EndReport data={data} />
       <Link to="/">
         <EndButton>주행 종료</EndButton>
       </Link>

src/components/Home/Comment.tsx

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const Comment = () => {
+  return <CommentContainer></CommentContainer>;
+};
+
+const CommentContainer = styled.div`
+  width: 100%;
+  height: 100px;
+  margin-top: 6px;
+  background-color: white;
+`;