Merge pull request #44 from prgrms-fe-devcourse/네비게이터-컴포넌트

하단네비게이터 컴포넌트 리팩토링

src/components/Navigatior/Navigator.css

@@ -12,3 +12,17 @@
   background-color: #fff;
   z-index: 999;
 }
+
+.nav-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.nav-button:focus {
+  outline: none;
+}

src/components/Navigatior/Navigator.tsx

@@ -1,66 +1,41 @@
-import { useState } from 'react'
-import { NavLink } from 'react-router-dom'
-import HomeIcon from '@assets/icons/bottom_home.svg?react'
-import HomeIconClicked from '@assets/icons/bottom_home_clicked.svg?react'
-import SearchIcon from '@assets/icons/bottom_search.svg?react'
-import CreatePostIcon from '@assets/icons/bottom_create_post.svg?react'
-import MyIcon from '@assets/icons/bottom_my.svg?react'
-import MyIconClicked from '@assets/icons/bottom_my_clicked.svg?react'
-import './Navigator.css' // 스타일 적용을 위한 CSS 파일
-import Search from '@/pages/PostList/Search/Search'
+import { useNavigate, useLocation } from 'react-router-dom';
+import HomeIcon from '@assets/icons/bottom_home.svg?react';
+import HomeIconClicked from '@assets/icons/bottom_home_clicked.svg?react';
+import SearchIcon from '@assets/icons/bottom_search.svg?react';
+import CreatePostIcon from '@assets/icons/bottom_create_post.svg?react';
+import MyIcon from '@assets/icons/bottom_my.svg?react';
+import MyIconClicked from '@assets/icons/bottom_my_clicked.svg?react';
+import './Navigator.css';
 
 const Navigator = () => {
-  // 클릭된 아이콘을 상태로 관리
-  const [activeIcon, setActiveIcon] = useState<string>('home')
-  const [isModalOpen, setIsModalOpen] = useState(false)
-  const [search, setSearch] = useState('')
+  const navigate = useNavigate();
+  const location = useLocation();
 
-  const handleOpenModal = () => {
-    setIsModalOpen(true)
-    setActiveIcon('search')
-  }
-
-  const handleCloseModal = () => {
-    setIsModalOpen(false)
-    setSearch('')
-  }
+  const handleNavigation = (path: string) => {
+    if (path) {
+      navigate(path);
+    }
+  };
 
   return (
-    <nav className='navigator'>
-      <NavLink
-        to='/'
-        onClick={() => setActiveIcon('home')}
-      >
-        {activeIcon === 'home' ? <HomeIconClicked /> : <HomeIcon />}
-      </NavLink>
+    <nav className="navigator">
+      <button onClick={() => handleNavigation('/')} className="nav-button">
+        {location.pathname === '/' ? <HomeIconClicked /> : <HomeIcon />}
+      </button>
 
-      <NavLink
-        to='/'
-        onClick={handleOpenModal}
-      >
-        <SearchIcon></SearchIcon>
-      </NavLink>
-      {isModalOpen && (
-        <Search
-          onClose={handleCloseModal} // 모달 닫기 핸들러 전달
-        />
-      )}
+      <button className="nav-button">
+        <SearchIcon />
+      </button>
 
-      <NavLink
-        to='/create-post'
-        onClick={() => setActiveIcon('create-post')}
-      >
+      <button onClick={() => handleNavigation('/create-post')} className="nav-button">
         <CreatePostIcon />
-      </NavLink>
+      </button>
 
-      <NavLink
-        to='/my'
-        onClick={() => setActiveIcon('my')}
-      >
-        {activeIcon === 'my' ? <MyIconClicked /> : <MyIcon />}
-      </NavLink>
+      <button onClick={() => handleNavigation('/my')} className="nav-button">
+        {location.pathname === '/my' ? <MyIconClicked /> : <MyIcon />}
+      </button>
     </nav>
-  )
-}
+  );
+};
 
-export default Navigator
+export default Navigator;