Merge pull request #17 from whatever-mentoring/feature/home

design: 홈페이지 & 탭바
whatever-mentoring · Sep 10, 2023 · 0133c94 · 0133c94
2 parents 9c1db01 + d037274
commit 0133c94
Show file tree

Hide file tree

Showing 9 changed files with 318 additions and 74 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -2,6 +2,8 @@ import './App.css';
 import GlobalStyle from './GlobalStyle';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Home from './pages/home/Home';
+import Feed from './pages/feed/Feed';
+import My from './pages/my/My'
 import MissionCertification from './MissionCertification';
 
 function App() {
@@ -11,7 +13,9 @@ function App() {
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Home />}></Route>
-         <Route path="/mission" element={<MissionCertification />}></Route>
+          <Route path="/feed" element={<Feed />}></Route>
+          <Route path="/my" element={<My />}></Route>
+          <Route path="/mission" element={<MissionCertification />}></Route>
         </Routes>
       </BrowserRouter>
     </>

diff --git a/src/components/common/Buttons.jsx → src/components/common/Buttons.js b/src/components/common/Buttons.jsx → src/components/common/Buttons.js
diff --git a/src/components/common/TabBar/StyledNav.js b/src/components/common/TabBar/StyledNav.js
@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+const StyledNav = styled.nav`
+  position: fixed;
+  display: flex;
+  gap: 10px;
+  bottom: 0;
+  width: min(100%, 430px);
+  padding: 0 20px;
+  background: var(--white);
+  border-top: 1px solid var(--gray-100);
+
+  a {
+    padding: 13px 0;
+    text-align: center;
+    width: 100%;
+    font-size: var(--text-s);
+
+    svg {
+      display: block;
+      margin: 0 auto 4px;
+    }
+    path {
+      stroke: var(--gray-200);
+    }
+  }
+  a.current {
+    path {
+      stroke: var(--primary-500);
+    }
+  }
+`;
+
+export default StyledNav;
diff --git a/src/components/common/TabBar/TabBar.jsx b/src/components/common/TabBar/TabBar.jsx
@@ -0,0 +1,26 @@
+import StyledNav from './StyledNav';
+import { Link, useLocation } from 'react-router-dom';
+import navList from './navList';
+
+const TabBar = () => {
+  const { pathname } = useLocation();
+
+  return (
+    <StyledNav>
+      {navList.map((v, i) => {
+        return (
+          <Link
+            to={v.path}
+            key={i}
+            className={pathname === v.path ? 'current' : ''}
+          >
+            {v.img}
+            {v.name}
+          </Link>
+        );
+      })}
+    </StyledNav>
+  );
+};
+
+export default TabBar;
diff --git a/src/components/common/TabBar/navList.jsx b/src/components/common/TabBar/navList.jsx
@@ -0,0 +1,158 @@
+const navList = [
+  {
+    name: '홈',
+    path: '/',
+    img: (
+      <svg
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clip0_226_356)">
+          <path
+            d="M17.3175 17.6823C13.3275 11.0311 18.6475 4.38105 29.9537 5.04605C30.625 16.3523 23.9687 21.6723 17.3175 17.6823Z"
+            stroke="#02B550"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M11.0586 19.059C13.9086 14.309 10.1086 9.55898 2.0324 10.0327C1.5574 18.109 6.30865 21.909 11.0586 19.059Z"
+            stroke="#02B550"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M7 15L15 23"
+            stroke="#02B550"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M25 10L17.3438 17.6562C16.6007 18.3991 16.0113 19.2811 15.6091 20.2519C15.207 21.2226 15 22.263 15 23.3137V27"
+            stroke="#02B550"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_226_356">
+            <rect width="32" height="32" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    ),
+  },
+  {
+    name: '챌린지피드',
+    path: '/feed',
+    img: (
+      <svg
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clip0_226_365)">
+          <path
+            d="M12 16H20"
+            stroke="#C5C9C7"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M12 20H20"
+            stroke="#C5C9C7"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M7 5H25C25.2652 5 25.5196 5.10536 25.7071 5.29289C25.8946 5.48043 26 5.73478 26 6V25C26 25.7956 25.6839 26.5587 25.1213 27.1213C24.5587 27.6839 23.7956 28 23 28H9C8.20435 28 7.44129 27.6839 6.87868 27.1213C6.31607 26.5587 6 25.7956 6 25V6C6 5.73478 6.10536 5.48043 6.29289 5.29289C6.48043 5.10536 6.73478 5 7 5Z"
+            stroke="#C5C9C7"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M10 3V7"
+            stroke="#C5C9C7"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M16 3V7"
+            stroke="#C5C9C7"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M22 3V7"
+            stroke="#C5C9C7"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_226_365">
+            <rect width="32" height="32" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    ),
+  },
+  {
+    name: 'My',
+    path: '/my',
+    img: (
+      <svg
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clip0_226_376)">
+          <path
+            d="M16 28C22.6274 28 28 22.6274 28 16C28 9.37258 22.6274 4 16 4C9.37258 4 4 9.37258 4 16C4 22.6274 9.37258 28 16 28Z"
+            stroke="#C5C9C7"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M16 20C18.7614 20 21 17.7614 21 15C21 12.2386 18.7614 10 16 10C13.2386 10 11 12.2386 11 15C11 17.7614 13.2386 20 16 20Z"
+            stroke="#C5C9C7"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M7.9751 24.9214C8.72749 23.4394 9.87555 22.1947 11.292 21.3253C12.7085 20.4558 14.3381 19.9956 16.0001 19.9956C17.6621 19.9956 19.2917 20.4558 20.7082 21.3253C22.1246 22.1947 23.2727 23.4394 24.0251 24.9214"
+            stroke="#C5C9C7"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_226_376">
+            <rect width="32" height="32" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    ),
+  },
+];
+
+export default navList;
diff --git a/src/pages/feed/Feed.jsx b/src/pages/feed/Feed.jsx
@@ -0,0 +1,11 @@
+import TabBar from '../../components/common/TabBar/TabBar';
+
+const Feed = () => {
+  return (
+    <>
+      <TabBar></TabBar>
+    </>
+  );
+};
+
+export default Feed;