[fix] 네비게이션 아이콘 잘 나오게 수정 및 디자인 반영

bsideproject · Oct 19, 2023 · 434880d · 434880d
1 parent 53fb47c
commit 434880d
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 8 deletions.
diff --git a/components/Nav/Nav.tsx b/components/Nav/Nav.tsx
@@ -31,12 +31,10 @@ const menus = [
 ];
 
 export default function Nav({ initMenu }: NavProps) {
-  const [activeMenu, setActiveMenu] = useState(initMenu || 0); // 초기 활성 메뉴 인덱스
   const [hoverMenu, setHoverMenu] = useState(-1); // 초기화
   const router = useRouter();
 
   const handleNavClicked = (index: number) => {
-    setActiveMenu(index);
     router.push(menus[index].router);
   };
 
@@ -55,12 +53,14 @@ export default function Nav({ initMenu }: NavProps) {
           >
             <div className="grid justify-center">
               <IconComponent
-                className={`${index === activeMenu ? activeStrokeColor : defaultStrokeColor} ${
+                className={`${menu.router === router.pathname ? activeStrokeColor : defaultStrokeColor} ${
                   hoverMenu === index ? 'cursor-pointer' : ''
                 }`}
               />
             </div>
-            <div className={styles[`${index === activeMenu ? 'nav-activeText' : 'nav-text'}`]}>{menu.name}</div>
+            <div className={styles[`${menu.router === router.pathname ? 'nav-activeText' : 'nav-text'}`]}>
+              {menu.name}
+            </div>
           </div>
         );
       })}

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -194,7 +194,7 @@ function Home() {
         </div>
       ))}
       <div ref={target} />
-      <div className="mt-[83px] fixed bottom-[-15px] w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max z-20">
+      <div className="mt-[83px] fixed bottom-[-15px] w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max z-20 border-t-[1px] border-g2">
         <div className="w-full">
           <div className="mb-[13px] space-x-[8px] max-w-max">
             <Nav />

diff --git a/pages/liked/index.tsx b/pages/liked/index.tsx
@@ -35,9 +35,8 @@ export default function Liked({ roomInfo }: MyPostingProps) {
             Look around
           </button>
         </div>
-        <div className="fixed bottom-[0px] w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max">
+        <div className="mt-[83px] fixed bottom-[-15px] w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max z-20 border-t-[1px] border-g2">
           <div className="w-full">
-            <hr />
             <div className="mb-[13px] space-x-[8px] max-w-max">
               <Nav initMenu={2} />
             </div>

diff --git a/pages/userInfo/index.tsx b/pages/userInfo/index.tsx
@@ -15,7 +15,7 @@ export default function UserProfile({ imgSrc }: UserProfileProps) {
   return (
     <>
       <ProfileCard age={age} name={userInfo.name} gender={userInfo.gender} imageSrc={userInfo.image || imgSrc} />
-      <div className="mt-[83px] fixed bottom-[-15px] w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max">
+      <div className="mt-[83px] fixed bottom-[-15px] w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max border-t-[1px] border-g2">
         <div className="w-full">
           <div className="mb-[13px] space-x-[8px] max-w-max">
             <Nav initMenu={3} />