Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 바텀 네비게이션 개선 #353

Merged
merged 3 commits into from
Jun 15, 2024
Merged

feat: 바텀 네비게이션 개선 #353

merged 3 commits into from
Jun 15, 2024

Conversation

Bumang-Cyber
Copy link
Contributor

@Bumang-Cyber Bumang-Cyber commented May 16, 2024

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

image

@Bumang-Cyber Bumang-Cyber self-assigned this May 16, 2024
Copy link

github-actions bot commented May 16, 2024

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

@Bumang-Cyber Bumang-Cyber added the DESIGN DESIGN label May 16, 2024
@Bumang-Cyber Bumang-Cyber merged commit 6b24e2f into main Jun 15, 2024
0 of 2 checks passed
@Bumang-Cyber Bumang-Cyber deleted the feat/#352-navi branch June 15, 2024 07:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
DESIGN DESIGN
Projects
None yet
Development

Successfully merging this pull request may close these issues.

바텀네비게이션 개조
1 participant