✨Feat: Add navigation bar component

src/pages/home/Home.tsx

@@ -1,4 +1,4 @@
-import Navbar from '../../components/Navbar/Navbar';
+import Navbar from './components/Navbar/Navbar';
 import ListFilter from './components/Filter/ListFilter';
 import ListSite from './components/Site/ListSite';
 import Alert from './components/Alert/Alert';

src/pages/home/components/Filter/ItemFilter.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { useShallow } from 'zustand/react/shallow';
 import type { FilterItem } from '../../../../types/filter.type';
 import { useFilterStore } from '../../../../stores/filterStore';
 
@@ -7,7 +8,13 @@ interface ItemFilterProps {
 }
 
 const ItemFilter = ({ item }: ItemFilterProps) => {
-  const { selectedFilter, setFilter } = useFilterStore();
+  const { selectedFilter, setFilter } = useFilterStore(
+    useShallow((state) => ({
+      selectedFilter: state.selectedFilter,
+      setFilter: state.setFilter,
+    })),
+  );
+
   const active = selectedFilter === item.value;
 
   return (

src/pages/home/components/Navbar/Navbar.tsx

@@ -0,0 +1,22 @@
+import settingBtn from '../../../../assets/navbar/Gear.png';
+import useNavigation from '../../../../hooks/useNavigation';
+
+const Navbar = () => {
+  const { goTo } = useNavigation();
+
+  const handleClick = () => {
+    goTo('/setting');
+  };
+  return (
+    <div className="w-full h-[4.8rem] flex justify-end items-center">
+      <img
+        src={settingBtn}
+        alt="setting-button"
+        className="object-contain w-10 h-10 cursor-pointer"
+        onClick={handleClick}
+      />
+    </div>
+  );
+};
+
+export default Navbar;

src/pages/setting/Setting.tsx

@@ -0,0 +1,5 @@
+function Setting() {
+  return <div>세팅페이지</div>;
+}
+
+export default Setting;

src/routes/router.tsx

@@ -6,7 +6,9 @@ import Spinner from '../components/Spinner/Spinner';
 import Splash from '../components/Splash/Splash';
 
 import HomePage from '../pages/home/Home';
+
 const NotFoundPage = lazy(() => import('../pages/notFound/NotFound'));
+const SettingPage = lazy(() => import('../pages/setting/Setting'));
 
 const router = createBrowserRouter([
   {
@@ -25,6 +27,10 @@ const router = createBrowserRouter([
         path: 'home',
         element: <HomePage />,
       },
+      {
+        path: 'setting',
+        element: <SettingPage />,
+      },
       {
         path: '*',
         element: <NotFoundPage />,