[Feat] 주행 중/주행 후 리포트 UI 구현 (#17)

* feat: 홈 화면 Home 컴포넌트 추가 * feat: 홈 화면 운전하기 버튼 추가 * feat: 주행 중, 주행 후 화면 컴포넌트 추가 * feat: 주행 중 페이지 UI 구현 * feat: 주행 후 리포트 UI
SSU-CAR · Feb 19, 2024 · ff7cb31 · ff7cb31
1 parent c304f57
commit ff7cb31
Show file tree

Hide file tree

Showing 10 changed files with 304 additions and 7 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,7 +7,8 @@ import { HomePage } from "@pages/Home";
 import { NotePage } from "@pages/Note";
 import { ReportPage } from "@pages/Report";
 import { BadgePage } from "@pages/Badge";
-
+import { DrivingPage } from "@pages/Driving";
+import { EndPage } from "@pages/End";
 
 function App() {
   return (
@@ -19,6 +20,8 @@ function App() {
           <Route path="/note" element={<NotePage />} />
           <Route path="/report" element={<ReportPage />} />
           <Route path="/badge" element={<BadgePage />} />
+          <Route path="/driving" element={<DrivingPage />} />
+          <Route path="/end" element={<EndPage />} />
         </Routes>
       </ThemeProvider>
     </BrowserRouter>

diff --git a/src/assets/images/car_driving.gif b/src/assets/images/car_driving.gif
diff --git a/src/components/Drive/index.tsx b/src/components/Drive/index.tsx
@@ -0,0 +1,60 @@
+import styled from "styled-components";
+import car_driving_img from "@assets/images/car_driving.gif";
+import { useNavigate } from "react-router-dom";
+
+export const Drive = () => {
+  const navigate = useNavigate();
+
+  const handleClickArriveBtn = () => {
+    navigate("/end");
+  };
+
+  return (
+    <DriveContainer>
+      <img src={car_driving_img} alt="주행 중" />
+      <InfoText>주행 중입니다</InfoText>
+      <ArriveButton onClick={handleClickArriveBtn}>목적지 도착</ArriveButton>
+    </DriveContainer>
+  );
+};
+
+const DriveContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: white;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+const InfoText = styled.div`
+  font-family: "HyndaiHarmony";
+  font-size: 24px;
+  color: ${({ theme }) => theme.colors.blue500};
+
+  margin-bottom: 80px;
+`;
+
+const ArriveButton = styled.button`
+  position: absolute;
+  bottom: 100px;
+  left: 50%;
+  transform: translate(-50%, 0);
+
+  width: 360px;
+  height: 45px;
+  border-radius: 8px;
+  border: none;
+  background-color: ${({ theme }) => theme.colors.blue400};
+
+  font-family: "HyndaiHarmony";
+  font-size: 15px;
+  font-weight: 300;
+  color: white;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;
diff --git a/src/components/End/EndReport/EndReport.styles.ts b/src/components/End/EndReport/EndReport.styles.ts
@@ -0,0 +1,78 @@
+import styled from "styled-components";
+
+export const EndReportContainer = styled.div`
+  width: 360px;
+  height: 480px;
+  border-radius: 8px;
+  padding: 30px;
+
+  background-color: ${({ theme }) => theme.colors.blue50};
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
+`;
+
+export const EndReportHeader = styled.div`
+  font-family: "HyndaiHarmony";
+  font-size: 22px;
+  color: ${({ theme }) => theme.colors.blue900};
+  span {
+    font-family: "HyndaiHarmony";
+    font-weight: 300;
+    color: ${({ theme }) => theme.colors.blue900};
+    font-size: 16px;
+
+    margin-right: 6px;
+  }
+`;
+
+export const BasicInfos = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  margin: 15px 0;
+  padding-bottom: 10px;
+`;
+
+export const BasicInfo = styled.div`
+  font-weight: 500;
+  font-size: 14px;
+  color: ${({ theme }) => theme.colors.gray6};
+  span {
+    color: ${({ theme }) => theme.colors.blue400};
+    margin-left: 6px;
+  }
+  margin: 4px 0;
+`;
+
+export const DetailInfo = styled.div`
+  border-top: 1px solid ${({ theme }) => theme.colors.gray4};
+  padding: 10px 0;
+  margin-bottom: 10px;
+`;
+
+export const SubHeader = styled.div`
+  font-weight: 600;
+  font-size: 16px;
+  color: ${({ theme }) => theme.colors.gray9};
+
+  margin: 15px 0;
+`;
+
+export const DetailContents = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const DetailContent = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  font-weight: 500;
+  font-size: 15px;
+  color: ${({ theme }) => theme.colors.gray8};
+
+  margin: 5px 0;
+
+  .count {
+    color: ${({ theme }) => theme.colors.blue500};
+  }
+`;
diff --git a/src/components/End/EndReport/EndReport.tsx b/src/components/End/EndReport/EndReport.tsx
@@ -0,0 +1,50 @@
+import * as styles from "./EndReport.styles";
+
+export const EndReport = () => {
+  return (
+    <styles.EndReportContainer>
+      <styles.EndReportHeader>
+        <span>김모비님을 위한</span>주행 후 리포트
+      </styles.EndReportHeader>
+      <styles.BasicInfos>
+        <styles.BasicInfo>
+          운전 점수<span>100점</span>
+        </styles.BasicInfo>
+        <styles.BasicInfo>
+          주행 거리<span>12km</span>
+        </styles.BasicInfo>
+        <styles.BasicInfo>
+          주행 시간<span>8:40 - 12:20</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>
+        </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>
+        </styles.DetailContents>
+      </styles.DetailInfo>
+    </styles.EndReportContainer>
+  );
+};
diff --git a/src/components/End/index.tsx b/src/components/End/index.tsx
@@ -0,0 +1,47 @@
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+import { EndReport } from "./EndReport/EndReport";
+
+export const End = () => {
+  return (
+    <EndContainer>
+      <EndReport />
+      <Link to="/">
+        <EndButton>주행 종료</EndButton>
+      </Link>
+    </EndContainer>
+  );
+};
+
+const EndContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: white;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 100px;
+`;
+
+const EndButton = styled.button`
+  position: absolute;
+  bottom: 100px;
+  left: 50%;
+  transform: translate(-50%, 0);
+
+  width: 360px;
+  height: 45px;
+  border-radius: 8px;
+  border: none;
+  background-color: ${({ theme }) => theme.colors.blue400};
+
+  font-family: "HyndaiHarmony";
+  font-size: 15px;
+  font-weight: 300;
+  color: white;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
@@ -0,0 +1,43 @@
+import styled from "styled-components";
+import { useNavigate } from "react-router-dom";
+
+export const Home = () => {
+  const navigate = useNavigate();
+
+  const handleClickDriveBtn = () => {
+    navigate("/driving");
+  };
+  return (
+    <HomeContainer>
+      <DrvieButton onClick={handleClickDriveBtn}>운전하기</DrvieButton>
+    </HomeContainer>
+  );
+};
+
+const HomeContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+`;
+
+const DrvieButton = styled.button`
+  position: absolute;
+  bottom: 100px;
+  left: 50%;
+  transform: translate(-50%, 0);
+
+  width: 360px;
+  height: 45px;
+  border-radius: 8px;
+  border: none;
+  background-color: ${({ theme }) => theme.colors.blue50};
+
+  font-family: "HyndaiHarmony";
+  font-size: 15px;
+  font-weight: 300;
+  color: ${({ theme }) => theme.colors.blue500};
+
+  &:hover {
+    cursor: pointer;
+  }
+`;
diff --git a/src/pages/Driving/index.tsx b/src/pages/Driving/index.tsx
@@ -0,0 +1,10 @@
+import { Layout } from "@components/common/Layout";
+import { Drive } from "@components/Drive";
+
+export const DrivingPage = () => {
+  return (
+    <Layout>
+      <Drive />
+    </Layout>
+  );
+};
diff --git a/src/pages/End/index.tsx b/src/pages/End/index.tsx
@@ -0,0 +1,10 @@
+import { Layout } from "@components/common/Layout";
+import { End } from "@components/End";
+
+export const EndPage = () => {
+  return (
+    <Layout navbar>
+      <End />
+    </Layout>
+  );
+};
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -1,14 +1,10 @@
-import styled from "styled-components";
 import { Layout } from "@components/common/Layout";
+import { Home } from "@components/Home";
 
 export const HomePage = () => {
   return (
     <Layout navbar>
-      <Title>홈</Title>
+      <Home />
     </Layout>
   );
 };
-
-const Title = styled.div`
-  font-family: "Pretendard";
-`;