Deploy 1.0.0 (#11)

* 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 컴포넌트 위치 변경

src/App.tsx

@@ -4,6 +4,10 @@ import { theme } from "@styles/theme";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 import { HomePage } from "@pages/Home";
+import { NotePage } from "@pages/Note";
+import { ReportPage } from "@pages/Report";
+import { BadgePage } from "@pages/Badge";
+
 
 function App() {
   return (
@@ -12,6 +16,9 @@ function App() {
       <ThemeProvider theme={theme}>
         <Routes>
           <Route path="/" element={<HomePage />} />
+          <Route path="/note" element={<NotePage />} />
+          <Route path="/report" element={<ReportPage />} />
+          <Route path="/badge" element={<BadgePage />} />
         </Routes>
       </ThemeProvider>
     </BrowserRouter>

src/components/common/Layout.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { ReactNode, useEffect } from "react";
-import { Navbar } from "./Navbar";
+import { Navbar } from "@components/common/Navbar/index";
 import { theme } from "@styles/theme";
 
 interface LayoutProps {
@@ -31,6 +31,7 @@ export const Layout = ({ children, navbar }: LayoutProps) => {
 };
 
 const LayoutContainer = styled.div`
+  position: relative;
   width: 100%;
   max-width: 460px;
   height: 100vh;
@@ -46,4 +47,6 @@ const LayoutContainer = styled.div`
   }
   -ms-overflow-style: none; /* 인터넷 익스플로러 */
   scrollbar-width: none; /* 파이어폭스 */
+  border: 1px solid ${theme.colors.gray1};
+
 `;

src/components/common/Navbar/NavButton.tsx

@@ -0,0 +1,86 @@
+import styled from "styled-components";
+import home from "@assets/images/home.webp";
+import home_bold from "@assets/images/home_bold.webp";
+import note from "@assets/images/note.webp";
+import note_bold from "@assets/images/note_bold.webp";
+import report from "@assets/images/report.webp";
+import report_bold from "@assets/images/report_bold.webp";
+import badge from "@assets/images/badge.webp";
+import badge_bold from "@assets/images/badge_bold.webp";
+import etc from "@assets/images/etc.webp";
+import etc_bold from "@assets/images/etc_bold.webp";
+import { theme } from "@styles/theme";
+import { useNavigate } from "react-router-dom";
+
+interface NavButtonType {
+  type: string;
+  name: string;
+}
+
+export const NavButton = ({ type, name }: NavButtonType) => {
+  let ButtonImg;
+
+  const navigate = useNavigate();
+  const handleClickNavButton = () => {
+    if (name === "홈") navigate("/");
+    else if (name === "기록") navigate("/note");
+    else if (name === "리포트") navigate("/report");
+    else if (name === "배지") navigate("/badge");
+  };
+  switch (type) {
+    case "home":
+      ButtonImg = <img src={home} alt="홈" />;
+      break;
+    case "homeB":
+      ButtonImg = <img src={home_bold} alt="홈" />;
+      break;
+    case "note":
+      ButtonImg = <img src={note} alt="주행기록" />;
+      break;
+    case "noteB":
+      ButtonImg = <img src={note_bold} alt="주행기록" />;
+      break;
+    case "report":
+      ButtonImg = <img src={report} alt="리포트" />;
+      break;
+    case "reportB":
+      ButtonImg = <img src={report_bold} alt="리포트" />;
+      break;
+    case "badge":
+      ButtonImg = <img src={badge} alt="배지" />;
+      break;
+    case "badgeB":
+      ButtonImg = <img src={badge_bold} alt="배지" />;
+      break;
+    case "etc":
+      ButtonImg = <img src={etc} alt="더보기" />;
+      break;
+    case "etcB":
+      ButtonImg = <img src={etc_bold} alt="더보기" />;
+      break;
+  }
+  return (
+    <NavButtonElement onClick={handleClickNavButton}>
+      {ButtonImg}
+      <ButtonName>{name}</ButtonName>
+    </NavButtonElement>
+  );
+};
+
+const NavButtonElement = styled.button`
+  border: none;
+  background-color: transparent;
+  img {
+    width: 24px;
+    height: 24px;
+  }
+`;
+
+const ButtonName = styled.div`
+  font-family: "HyndaiHarmony";
+  font-weight: 300;
+  font-size: 13px;
+  color: ${theme.colors.gray9};
+
+  margin-top: 4px;
+`;

src/components/common/Navbar/index.tsx

@@ -0,0 +1,47 @@
+import { theme } from "@styles/theme";
+import styled from "styled-components";
+import { useLocation } from "react-router-dom";
+
+import { NavButton } from "./NavButton";
+
+export const Navbar = () => {
+  const { pathname } = useLocation();
+
+  return (
+    <NavbarContainer>
+      {pathname === "/note" ? (
+        <NavButton type="noteB" name="기록" />
+      ) : (
+        <NavButton type="note" name="기록" />
+      )}
+      {pathname === "/report" ? (
+        <NavButton type="reportB" name="리포트" />
+      ) : (
+        <NavButton type="report" name="리포트" />
+      )}
+      {pathname === "/" ? (
+        <NavButton type="homeB" name="홈" />
+      ) : (
+        <NavButton type="home" name="홈" />
+      )}
+      {pathname === "/badge" ? (
+        <NavButton type="badgeB" name="배지" />
+      ) : (
+        <NavButton type="badge" name="배지" />
+      )}
+      <NavButton type="etc" name="더보기" />
+    </NavbarContainer>
+  );
+};
+
+const NavbarContainer = styled.div`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 72px;
+  background-color: white;
+  border-top: 1px solid ${theme.colors.gray4};
+
+  display: flex;
+  justify-content: space-around;
+`;

src/pages/Badge/index.tsx

@@ -0,0 +1,9 @@
+import { Layout } from "@components/common/Layout";
+
+export const BadgePage = () => {
+  return (
+    <Layout navbar>
+      <div>배지</div>
+    </Layout>
+  );
+};

src/pages/Home/index.tsx

@@ -3,8 +3,8 @@ import { Layout } from "@components/common/Layout";
 
 export const HomePage = () => {
   return (
-    <Layout navbar={true}>
-      <Title>안녕하세요</Title>
+    <Layout navbar>
+      <Title>홈</Title>
     </Layout>
   );
 };

src/pages/Note/index.tsx

@@ -0,0 +1,9 @@
+import { Layout } from "@components/common/Layout";
+
+export const NotePage = () => {
+  return (
+    <Layout navbar>
+      <div>주행 기록</div>
+    </Layout>
+  );
+};

src/pages/Report/index.tsx

@@ -0,0 +1,9 @@
+import { Layout } from "@components/common/Layout";
+
+export const ReportPage = () => {
+  return (
+    <Layout navbar>
+      <div>리포트</div>
+    </Layout>
+  );
+};