diff --git a/src/components/shared/Navbar/Navbar.style.ts b/src/components/shared/Navbar/Navbar.style.ts
new file mode 100644
index 00000000..4e59ec1f
--- /dev/null
+++ b/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};
+ }
+ }
+`;
diff --git a/src/components/shared/Navbar/Navbar.tsx b/src/components/shared/Navbar/Navbar.tsx
new file mode 100644
index 00000000..b23d9fdc
--- /dev/null
+++ b/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 (
+
+ {navbarMenu.map(({ name, page, image }) =>
+ `/${page}` === pathname ? (
+ handleNavbarClick(page)}>
+
+ {name}
+
+ ) : (
+ handleNavbarClick(page)}>
+
+ {name}
+
+ )
+ )}
+
+ );
+};
diff --git a/src/components/shared/Navbar/index.ts b/src/components/shared/Navbar/index.ts
new file mode 100644
index 00000000..ec1cfd76
--- /dev/null
+++ b/src/components/shared/Navbar/index.ts
@@ -0,0 +1 @@
+export { Navbar } from './Navbar';
diff --git a/src/pages/Layout.tsx b/src/pages/Layout.tsx
index d66df2d4..fcf24fa7 100644
--- a/src/pages/Layout.tsx
+++ b/src/pages/Layout.tsx
@@ -2,13 +2,15 @@ import { Outlet } from 'react-router-dom';
import styled from '@emotion/styled';
+import { Navbar } from '@components/shared/Navbar/Navbar';
+
export const Layout = () => {
return (
<>
-
+
>
);
};
@@ -16,11 +18,3 @@ export const Layout = () => {
const LayoutWrapper = styled.div`
margin: 50px 16px 0 16px;
`;
-
-const Nav = styled.div`
- position: fixed;
- width: 100%;
- left: 0;
- bottom: 0;
- background-color: aqua;
-`;