feat: 바텀 네비게이션 개선

[Bumang-Cyber]

Issue Number

close #352

⛳️ Task

• 화이팅하기
• 바텀네비게이션 아이콘 교체
• react-router-dom의 isActive 속성 사용하여 children 조건적 렌더링
• 찜 페이지는 아직 없기 때문에 제외

✍️ Note

1. 바텀네비게이션 아이콘 교체

원래 react-icons로 불러온 아이콘을 active상태에 따라 색상 변경만 했었는데
현재 아이콘은 약간 커스텀 된 것 같은 느낌적인 느낌?이 있어서 svg로 다운받아서 사용했습니다.

import IconHomeFill from "@assets/icons/navIcon/icon_home_fill.svg?react";
import IconHomeLine from "@assets/icons/navIcon/icon_home_line.svg?react";
import IconMyFill from "@assets/icons/navIcon/icon_my_fill.svg?react";
import IconMyLine from "@assets/icons/navIcon/icon_my_line.svg?react";
import IconSearchFill from "@assets/icons/navIcon/icon_search_fill.svg?react";
import IconSearchLine from "@assets/icons/navIcon/icon_search_line.svg?react";
import IconTransferWritingFill from "@assets/icons/navIcon/icon_transferWriting_fill.svg?react";
import IconTransferWritingLine from "@assets/icons/navIcon/icon_transferWriting_line.svg?react";
// 찜 페이지용
// import IconWishFill from "@assets/icons/navIcon/icon_wish_fill.svg?react";
// import IconWishLine from "@assets/icons/navIcon/icon_wish_Line.svg?react";

2. svgr 라이브러리의 바뀐 문법 적용

아래 보시면 svg import문 뒤에 ?react라고 쿼리가 하나 붙어있는게 보입니다.
원래 svgr 라이브러리 사용할 때, import { ReactComponent as Something } from "..."으로
불러왔었는데, 신규 버전에서는 리액트 쿼리문으로 import한다고 합니다.

신규 버전으로 모든 라이브러리가 한 번 업데이트되어 이런 귀찮은 일들이 생긴거 같습니다.
(모두 최신 업뎃한게 아마 저였던거 같은데 죄송함다..)
관련 블로그 글
스택오버플로 관련글

import IconWishLine from "@assets/icons/navIcon/icon_wish_Line.svg?react";

3. react-router-dom의 isActive 속성 사용하여 children 조건적 렌더링

원래 단일 아이콘에서 색상만 바꿔주면 됐었는데, 현재는 선택/미선택 여부에 따라 아이콘타입이 line/fill이 바뀝니다.
그래서 svg아이콘들을 튜플로 만들어 관리했습니다.

  // 수정전
  const navList = [
    {
      id: 1,
      name: "홈",
      path: PATH.ROOT,
      icon: <S.NavIconHomes isActive={pathname === PATH.ROOT ? true : false} />,
    },
    // ...

  const navList = [
    // 수정후
    {
      id: 1,
      name: "홈",
      path: PATH.ROOT,
      icon: [<IconHomeFill />, <IconHomeLine />], // 리액트컴포넌트로 만든 svg를 튜플 형태로 관리.
    },
    // ...

그리고 children 속성에서 콜백 패러미터를 꺼내 조건적 렌더링을 했습니다.

            // jsx 리턴부
            <S.BottomNavCell //
              key={id}
              to={path}
              // children 속성에서 isActive를 콜백 패러미터로 쓸 수 있더라구요. 사용해서 조건적 렌더링을 했습니다.
              children={({ isActive }) => (
                <S.BottomNavCellContent className={isActive ? "active" : ""}>
                  {isActive ? icon[0] : icon[1]}
                  {name}
                </S.BottomNavCellContent>
              )}
            />

원래 isActive를 아래처럼 사용하려 했는데, isActive패러미터는 '속성'에서만 꺼내쓸 수 있더라구요.

                <S.BottomNavCell /*속성에서만 isActive 쓸 수 있음*/>
                    {/* 직접적으로 내부에선 isActive 못 씀 */ ({isActive}) => isActive ? icon[0] : icon[1]}
                </S.BottomNavCell>

📸 Screenshot

[github-actions]

Visit the preview URL for this PR (updated for commit 86335e6):

https://percenthotel--pr353-feat-352-navi-0ir4lp1v.web.app

_{(expires Thu, 23 May 2024 14:20:44 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 5f3aee9d8d8535dbb552ad12361bc813c5a90573}