하단 navbar 구현

src/components/shared/Navbar/Navbar.style.ts

@@ -0,0 +1,51 @@
+import styled from '@emotion/styled';
+
+import { PALETTE } from '@styles/palette';
+
+export const NavbarContainer = styled.div`
+  max-width: 375px;
+  height: 4.375rem;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  z-index: 777;
+  background-color: #ffffff;
+  border-top-right-radius: 1rem;
+  border-top-left-radius: 1rem;
+  border-top: 1px solid ${PALETTE.GRAY_500};
+  padding-bottom: 1rem;
+`;
+
+export const NavbarButton = styled.button`
+  flex-shrink: 0;
+  width: 4.6875rem;
+  height: 100%;
+  border: none;
+  border-radius: 50%;
+  background-color: #ffffff;
+  cursor: pointer;
+
+  img {
+    width: 1.5rem;
+    height: 1.5rem;
+    &.create {
+      width: 2.5rem;
+      height: 2.5rem;
+    }
+    filter: invert(47%) sepia(7%) saturate(735%) hue-rotate(182deg)
+      brightness(92%) contrast(90%);
+    &.currentPage {
+      filter: invert(28%) sepia(83%) saturate(6138%) hue-rotate(351deg)
+        brightness(91%) contrast(89%);
+    }
+  }
+  p {
+    color: ${PALETTE.GRAY_500};
+    &.currentPage {
+      color: ${PALETTE.RED_600};
+    }
+  }
+`;

src/components/shared/Navbar/Navbar.tsx

@@ -0,0 +1,44 @@
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import chatIcon from '@/assets/chat.svg';
+import hamburgerIcon from '@/assets/hamburger.svg';
+import homeIcon from '@/assets/home.svg';
+import mapIcon from '@/assets/map.svg';
+import plusIcon from '@/assets/plus.svg';
+
+import { NavbarButton, NavbarContainer } from './Navbar.style';
+
+export const Navbar = () => {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+
+  const handleNavbarClick = (page: string) => {
+    navigate(`/${page}`);
+  };
+
+  const navbarMenu = [
+    { name: '홈', page: '', image: homeIcon },
+    { name: '지도', page: 'map', image: mapIcon },
+    { name: '', page: 'create', image: plusIcon },
+    { name: '메세지', page: 'message', image: chatIcon },
+    { name: '전체', page: 'all-services', image: hamburgerIcon },
+  ];
+
+  return (
+    <NavbarContainer>
+      {navbarMenu.map(({ name, page, image }) =>
+        `/${page}` === pathname ? (
+          <NavbarButton key={image} onClick={() => handleNavbarClick(page)}>
+            <img className={`${page} currentPage`} src={image} alt={name} />
+            <p className="currentPage">{name}</p>
+          </NavbarButton>
+        ) : (
+          <NavbarButton key={image} onClick={() => handleNavbarClick(page)}>
+            <img className={`${page}`} src={image} alt={name} />
+            <p>{name}</p>
+          </NavbarButton>
+        )
+      )}
+    </NavbarContainer>
+  );
+};

src/components/shared/Navbar/index.ts

@@ -0,0 +1 @@
+export { Navbar } from './Navbar';

src/pages/Layout.tsx

@@ -2,25 +2,19 @@ import { Outlet } from 'react-router-dom';
 
 import styled from '@emotion/styled';
 
+import { Navbar } from '@components/shared/Navbar/Navbar';
+
 export const Layout = () => {
   return (
     <>
       <LayoutWrapper>
         <Outlet />
       </LayoutWrapper>
-      <Nav>하단 NAV바</Nav>
+      <Navbar />
     </>
   );
 };
 
 const LayoutWrapper = styled.div`
   margin: 50px 16px 0 16px;
 `;
-
-const Nav = styled.div`
-  position: fixed;
-  width: 100%;
-  left: 0;
-  bottom: 0;
-  background-color: aqua;
-`;