[FIX] 일부 Navbar element 색상 변경 미적용

📌 이슈 분석

기존 코드를 보면 아래와 같다.

const searchParams = usePathname();
...
          <Link
            key={element.name}
            href={element.url}
            className={`${searchParams === element.url ? "text-[#FFBF00]" : "text-white"}`}
          >

usePathname을 사용해서 현재 url의 pathname을 가져왔다. 그리고 element.url 즉, constant로 미리 정의한 "/posts", "/events" 등과 일치한지 확인을 한 후, 만약 일치하다면 하얀색이 아닌 다른 글자색을 지정하였다.

페이지 이동까지는 괜찮았지만, 포스트 페이지를 예로 들자면 포스트 상세 페이지로 이동할 경우 url이 '/posts/1' 이런 식으로 변경되기 때문에
searchParams === element.url이 false가 되어 사실상 posts 페이지에 있음에도, 지정한 글자색이 보이지 않는 이슈가 발생하였다.

📌 해결 방법

내가 생각해 낸 방법은, 상세 페이지로 넘어가더라도 navElement의 name은 계속 url에 노출된다. 다시 말해 posts페이지에서 아무리 상세 포스트로 넘어가더라도 url 주소에 posts는 남아있는 것이다. 따라서 url에 주소에 navElement의 name이 있는지 확인하고자 하였다.

  const isActive = (name: string) => {
    // "/" 경로는 예외 처리
    if (name === "home" && pathname === "/") {
      return true;
    }
    return pathname.includes(name);
  };

pathname.includes(name)를 통해 navElement의 name이 있으면 true를 반환하게 하였다. 또한 home의 경우, 주소가 '/'이기 때문에 별도로 코드를 추가하여 상황을 처리하였다.

najakgil / najakgil-blog

[FIX] 일부 Navbar element 색상 변경 미적용 #2

📌 문제 상황

📌 이슈 분석

📌 해결 방법