Deploy 1.0.1 (#13)

* Create PULL_REQUEST_TEMPLATE.md * Update PULL_REQUEST_TEMPLATE.md * Update PULL_REQUEST_TEMPLATE.md * [Feat] 개발 환경 세팅 (#2) * feat: 필요없는 파일 정리 * chore: 패키지 설치 * style: set Global Style * feat: set absolute path * feat: set react router * chore: 웹폰트 파일 추가(Pretendard, 현대하모니) * style: 웹 폰트 font-family 설정 * style: theme, colors 설정 * feat: Layout 컴포넌트, 하단바 조건부 렌더링 설정 * Create aws.yml * [Feat] 하단바 UI 작업, 페이지 라우터 연결 (#10) * feat: 필요없는 파일 정리 * chore: 패키지 설치 * style: set Global Style * feat: set absolute path * feat: set react router * chore: 웹폰트 파일 추가(Pretendard, 현대하모니) * style: 웹 폰트 font-family 설정 * style: theme, colors 설정 * feat: Layout 컴포넌트, 하단바 조건부 렌더링 설정 * Create PULL_REQUEST_TEMPLATE.md * Update PULL_REQUEST_TEMPLATE.md * Update PULL_REQUEST_TEMPLATE.md * chore: 하단바용 아이콘 이미지 추가 * feat: 페이지 컴포넌트 생성, 라우터 연결 * feat: 하단바 UI 구현 * chore: Navbar 컴포넌트 위치 변경 * [Feat] 주행 기록 페이지 UI 구현 (#12) * feat: 페이지별 공통 Header 컴포넌트 * chore: date-fns 패키지 설치 * feat: 날짜 계산 utility 함수 * feat: 자세히 보기 버튼 icon asset 추가 * fix: 공통 페이지 헤더 height 수정 * feat: 주행 기록 API response type 추가 * feat: 주행 기록 페이지 UI 1차 작업 * feat: 닫기 아이콘 asset 추가 * feat: import 규칙 추가 * style: 레이아웃 방식 수정 * feat: 주행기록 자세히 보기 UI 구현
SSU-CAR · Feb 15, 2024 · 06b5a27 · 06b5a27
1 parent 93b08c5
commit 06b5a27
Show file tree

Hide file tree

Showing 14 changed files with 386 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@types/node": "^20.11.17",
     "@types/react-router-dom": "^5.3.3",
+    "date-fns": "^3.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.0",

diff --git a/src/assets/icons/arrow_down_icon.svg b/src/assets/icons/arrow_down_icon.svg
diff --git a/src/assets/icons/arrow_up_icon.svg b/src/assets/icons/arrow_up_icon.svg
diff --git a/src/components/Note/DetailReport/Detail.styles.ts b/src/components/Note/DetailReport/Detail.styles.ts
@@ -0,0 +1,37 @@
+import styled from "styled-components";
+
+export const ProtectedFrom = styled.div`
+  font-family: "Pretendard";
+  font-weight: 500;
+  font-size: 14px;
+  color: ${({ theme }) => theme.colors.blue400};
+
+  margin: 15px 0;
+`;
+
+export const Scenario = styled.div`
+  width: 100%;
+  height: 20px;
+  margin: 4px 0;
+  padding: 0 8px;
+
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const ScenarioName = styled.div`
+  font-family: "Pretendard";
+  font-weight: 400;
+  font-size: 14px;
+  color: ${({ theme }) => theme.colors.gray9};
+`;
+
+export const Number = styled.div`
+  font-family: "Pretendard";
+  font-weight: 400;
+  font-size: 14px;
+  color: ${({ theme }) => theme.colors.blue400};
+
+  width: 40px;
+  text-align: end;
+`;
diff --git a/src/components/Note/DetailReport/index.tsx b/src/components/Note/DetailReport/index.tsx
@@ -0,0 +1,50 @@
+import { useState, useEffect } from "react";
+import { ReportDetailType } from "src/types/report";
+import * as styles from "./Detail.styles";
+
+interface DetailReportProps {
+  reportId: number;
+}
+
+const data = [
+  {
+    scenarioType: 1,
+    scenarioName: "차선 변경",
+    total: 1,
+  },
+  {
+    scenarioType: 4,
+    scenarioName: "정면 주시 안함",
+    total: 12,
+  },
+];
+export const DetailReport = ({ reportId }: DetailReportProps) => {
+  const [deatils, setDetails] = useState<ReportDetailType[]>([]);
+
+  //TODO: API 연결
+  useEffect(() => {
+    setDetails(data);
+  }, []);
+  return (
+    <>
+      <styles.ProtectedFrom>차량 외부</styles.ProtectedFrom>
+      {deatils.map((el) => {
+        return (
+          <styles.Scenario key={el.scenarioType}>
+            <styles.ScenarioName>{el.scenarioName}</styles.ScenarioName>
+            <styles.Number>{el.total}번</styles.Number>
+          </styles.Scenario>
+        );
+      })}
+      <styles.ProtectedFrom>차량 내부</styles.ProtectedFrom>
+      {deatils.map((el) => {
+        return (
+          <styles.Scenario key={el.scenarioType}>
+            <styles.ScenarioName>{el.scenarioName}</styles.ScenarioName>
+            <styles.Number>{el.total}번</styles.Number>
+          </styles.Scenario>
+        );
+      })}
+    </>
+  );
+};
diff --git a/src/components/Note/Report/Report.styles.ts b/src/components/Note/Report/Report.styles.ts
@@ -0,0 +1,62 @@
+import styled from "styled-components";
+
+export const ReportContainer = styled.div<{ open: boolean }>`
+  width: 360px;
+  height: ${(props) => (props.open ? "360px" : "164px")};
+  margin: 5px 0;
+  padding: 15px 22px;
+
+  background-color: white;
+  border: 1px solid ${({ theme }) => theme.colors.gray2};
+  border-radius: 4px;
+`;
+
+export const InfoContainer = styled.div`
+  margin: 6px 0;
+`;
+
+export const InfoType = styled.span`
+  font-family: "Pretendard";
+  font-weight: 400;
+  font-size: 14px;
+  color: ${({ theme }) => theme.colors.gray5};
+
+  margin-right: 10px;
+`;
+
+export const InfoContent = styled.span`
+  font-family: "Pretendard";
+  font-weight: 400;
+  font-size: 14px;
+  color: ${({ theme }) => theme.colors.gray9};
+`;
+
+export const SplitLine = styled.div`
+  width: 100%;
+  height: 1px;
+  background-color: ${({ theme }) => theme.colors.gray5};
+  margin-top: 12px;
+`;
+
+export const ShowMoreButton = styled.button`
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  margin-top: 12px;
+
+  font-family: "Pretendard";
+  font-weight: 400;
+  font-size: 12px;
+  color: ${({ theme }) => theme.colors.gray5};
+
+  display: flex;
+  align-items: center;
+
+  img {
+    width: 16px;
+    height: 16px;
+    margin-left: 4px;
+  }
+`;
+
+export const DetailContents = styled.div``;
diff --git a/src/components/Note/Report/index.tsx b/src/components/Note/Report/index.tsx
@@ -0,0 +1,66 @@
+import { useState } from "react";
+import { ReportHistoryType } from "src/types/report";
+import * as styles from "./Report.styles";
+import { getDateString } from "src/utils/datetime";
+import arrow_down_icon from "@assets/icons/arrow_down_icon.svg";
+import arrow_up_icon from "@assets/icons/arrow_up_icon.svg";
+
+import { DetailReport } from "../DetailReport";
+
+interface ReportProps {
+  data: ReportHistoryType;
+}
+export const Report = ({ data }: ReportProps) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false); //자세히 보기 open 여부
+
+  return (
+    <styles.ReportContainer open={isOpen}>
+      <styles.InfoContainer>
+        <styles.InfoType>날짜</styles.InfoType>
+        <styles.InfoContent>
+          {getDateString(data.departuredAt)}
+        </styles.InfoContent>
+      </styles.InfoContainer>
+      <styles.InfoContainer>
+        <styles.InfoType>운행 시간</styles.InfoType>
+        <styles.InfoContent>
+          {data.departuredAt.slice(11, 16) +
+            " - " +
+            data.arrivedAt.slice(11, 16)}
+        </styles.InfoContent>
+      </styles.InfoContainer>
+      <styles.InfoContainer>
+        <styles.InfoType>주행 거리</styles.InfoType>
+        <styles.InfoContent>{data.mileage + " km"}</styles.InfoContent>
+      </styles.InfoContainer>
+      <styles.InfoContainer>
+        <styles.InfoType>운전 점수</styles.InfoType>
+        <styles.InfoContent>{data.score}</styles.InfoContent>
+      </styles.InfoContainer>
+      <styles.SplitLine></styles.SplitLine>
+
+      {isOpen ? (
+        <styles.DetailContents>
+          <DetailReport reportId={data.reportId} />
+          <styles.ShowMoreButton
+            onClick={() => {
+              setIsOpen(false);
+            }}
+          >
+            닫기
+            <img src={arrow_up_icon} alt="자세히 보기 버튼" />
+          </styles.ShowMoreButton>
+        </styles.DetailContents>
+      ) : (
+        <styles.ShowMoreButton
+          onClick={() => {
+            setIsOpen(true);
+          }}
+        >
+          자세히 보기
+          <img src={arrow_down_icon} alt="자세히 보기 버튼" />
+        </styles.ShowMoreButton>
+      )}
+    </styles.ReportContainer>
+  );
+};
diff --git a/src/components/Note/index.tsx b/src/components/Note/index.tsx
@@ -0,0 +1,81 @@
+import { PageHeader } from "@components/common/PageHeader";
+import { Report } from "./Report";
+import styled from "styled-components";
+
+const data = [
+  {
+    reportId: 1,
+    departuredAt: "2023-07-23T18:51:16.007759",
+    arrivedAt: "2023-07-23T18:52:44.789957",
+    mileage: "5.1",
+    score: "62",
+  },
+  {
+    reportId: 2,
+    departuredAt: "2023-10-23T18:51:16.007759",
+    arrivedAt: "2023-10-23T19:30:44.789957",
+    mileage: "5.1",
+    score: "71",
+  },
+  {
+    reportId: 3,
+    departuredAt: "2023-07-23T18:51:16.007759",
+    arrivedAt: "2023-07-23T18:52:44.789957",
+    mileage: "5.1",
+    score: "62",
+  },
+  {
+    reportId: 4,
+    departuredAt: "2023-10-23T18:51:16.007759",
+    arrivedAt: "2023-10-23T19:30:44.789957",
+    mileage: "5.1",
+    score: "71",
+  },
+  {
+    reportId: 5,
+    departuredAt: "2023-07-23T18:51:16.007759",
+    arrivedAt: "2023-07-23T18:52:44.789957",
+    mileage: "5.1",
+    score: "62",
+  },
+  {
+    reportId: 6,
+    departuredAt: "2023-10-23T18:51:16.007759",
+    arrivedAt: "2023-10-23T19:30:44.789957",
+    mileage: "5.1",
+    score: "71",
+  },
+];
+export const Note = () => {
+  return (
+    <NoteContainer>
+      <PageHeader name="주행 기록" />
+      <Reports>
+        {data.map((el) => {
+          return <Report key={el.reportId} data={el} />;
+        })}
+      </Reports>
+    </NoteContainer>
+  );
+};
+
+const NoteContainer = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+const Reports = styled.div`
+  height: 100%;
+  padding-top: 15px;
+  padding-bottom: 100px;
+
+  overflow-y: scroll;
+
+  //hide scroll bar
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+  &::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera*/
+  }
+`;
diff --git a/src/components/common/PageHeader/index.tsx b/src/components/common/PageHeader/index.tsx
@@ -0,0 +1,33 @@
+import styled from "styled-components";
+
+interface PageHeaderProps {
+  name?: string;
+  height?: string;
+}
+
+export const PageHeader = ({ name, height }: PageHeaderProps) => {
+  return (
+    <PageHeaderContainer height={height}>
+      <PageNameText>{name}</PageNameText>
+    </PageHeaderContainer>
+  );
+};
+
+const PageHeaderContainer = styled.div<{ height?: string }>`
+  width: 100%;
+  height: ${(props) => props.height || "60px"};
+
+  background-color: white;
+  font-family: "Pretendard";
+  font-weight: 700;
+  font-size: 20px;
+  color: ${({ theme }) => theme.colors.blue800};
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const PageNameText = styled.div`
+  width: 360px;
+`;
diff --git a/src/pages/Note/index.tsx b/src/pages/Note/index.tsx
@@ -1,9 +1,10 @@
 import { Layout } from "@components/common/Layout";
+import { Note } from "@components/Note";
 
 export const NotePage = () => {
   return (
     <Layout navbar>
-      <div>주행 기록</div>
+      <Note />
     </Layout>
   );
 };