diff --git a/src/App.tsx b/src/App.tsx
index d3da871..f871cc3 100644
--- 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() {
} />
} />
} />
+ } />
+ } />
diff --git a/src/assets/images/car_driving.gif b/src/assets/images/car_driving.gif
new file mode 100644
index 0000000..7ea37c8
Binary files /dev/null and b/src/assets/images/car_driving.gif differ
diff --git a/src/components/Drive/index.tsx b/src/components/Drive/index.tsx
new file mode 100644
index 0000000..5e6a402
--- /dev/null
+++ 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 (
+
+
+ 주행 중입니다
+ 목적지 도착
+
+ );
+};
+
+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
new file mode 100644
index 0000000..1c2706f
--- /dev/null
+++ 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
new file mode 100644
index 0000000..cd68ee4
--- /dev/null
+++ b/src/components/End/EndReport/EndReport.tsx
@@ -0,0 +1,50 @@
+import * as styles from "./EndReport.styles";
+
+export const EndReport = () => {
+ return (
+
+
+ 김모비님을 위한주행 후 리포트
+
+
+
+ 운전 점수100점
+
+
+ 주행 거리12km
+
+
+ 주행 시간8:40 - 12:20
+
+
+
+ 차량 외부 감지 항목
+
+
+ ∙ 감지 시나리오 1번10번
+
+
+ ∙ 감지 시나리오 2번10번
+
+
+ ∙ 감지 시나리오 3번10번
+
+
+
+
+ 차량 내부 감지 항목
+
+
+ ∙ 감지 시나리오 1번10번
+
+
+ ∙ 감지 시나리오 2번10번
+
+
+ ∙ 감지 시나리오 3번10번
+
+
+
+
+ );
+};
diff --git a/src/components/End/index.tsx b/src/components/End/index.tsx
new file mode 100644
index 0000000..b95e239
--- /dev/null
+++ 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 (
+
+
+
+ 주행 종료
+
+
+ );
+};
+
+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
new file mode 100644
index 0000000..6309fdb
--- /dev/null
+++ 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 (
+
+ 운전하기
+
+ );
+};
+
+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
new file mode 100644
index 0000000..2ae1fd6
--- /dev/null
+++ 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 (
+
+
+
+ );
+};
diff --git a/src/pages/End/index.tsx b/src/pages/End/index.tsx
new file mode 100644
index 0000000..77259b3
--- /dev/null
+++ 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 (
+
+
+
+ );
+};
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index ba34d9b..1319fe8 100644
--- 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 (
- 홈
+
);
};
-
-const Title = styled.div`
- font-family: "Pretendard";
-`;