[ETC] 공통 컴포넌트 추가 - 하단 탭 바

[SEMINSEMINSEMIN]

공통 컴포넌트 추가 - 하단 탭 바

• [x] 마크업
• [x] 링크 걸기
• [x] 해당하는 페이지일 경우 채워져있는 이미지로 변경
  • [x] 반복되는 css 줄이기
  • [x] useEffect를 이용했는데 useLayoutEffect를 사용하는게 더 나을지 고민됩니다. → 조건부 렌더링을 이용해 해결

[github-actions[bot]]

Branch issue-20 created for issue: [ETC] 공통 컴포넌트 추가 - 하단 탭 바

[SEMINSEMINSEMIN]

app.style.js border-box

• [x] reset에 border-box가 있지 않은거 같아서 제가 일단 추가해놨는데, 앞으로 이걸 적용하는거로 할까요?

[SEMINSEMINSEMIN]

NavBar의 링크 연결 정확하지 않음

• [x] 페이지를 어디에 연결해야 할지 아직 잘 모르겠어서 일단 제가 임의로 해놨습니다. 나중에 수정이 필요합니다. → 추후 수정으로 변경

[SEMINSEMINSEMIN]

프리티어

• [x] 사용하지 않는 거로 결정

[SEMINSEMINSEMIN]

NavBarItem.jsx의 useEffect에 관하여

• [x] useEffect와 useState를 이용해서 채워지냐 안 채워지냐를 결정했는데, useLayoutEffect를 사용할 수는 없을지 고민입니다. useLayoutEffect를 생각한 이유는 브라우저에 그려주기 전에 클래스를 정해주는게 좋을거 같다고 생각했기 때문입니다.

  
  import React, { useLayoutEffect, useState, useRef } from "react";
  import { useEffect } from "react";
  import { StyledLink } from "./navBarItem.style";

export default function NavBarItem({ linkSrc, iconSrc, navTxt, currentPath }) { const [isActivated, setIsActivated] = useState(false);

// 처음 마운트 될 때 브라우저에 그려진 후 딱 한 번실행
useEffect(() => {
    console.log(currentPath === linkSrc);
    if (currentPath === linkSrc) {
        // 페이지가 그려진 후 만약 현재 페이지와 링크가 연결된 url이 같다면
        // isActivated를 true로
        setIsActivated(true);
    }
}, []);

return (
    {/* isActivated가 true라면 activated 클래스 */}
    <StyledLink
        to={linkSrc}
        icon={iconSrc}
        className={isActivated ? "activated" : ""}
    >
        {navTxt}
    </StyledLink>
);

}

* 조건부 렌더링을 이용해 해결: https://github.com/nailedReact/react-app/pull/30

[SEMINSEMINSEMIN]

반복되는 CSS

• [x] background 빼고 그 외에는 css가 동일한데 반복되는 코드를 줄이는게 필요할 거 같습니다.

  &::before {
      content: "";
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: 24px;
      height: 24px;
      background: ${(props) => `url(${props.icon.basic}) no-repeat`};
      background-size: contain;
  }
  &.activated::before {
      content: "";
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: 24px;
      height: 24px;
      background: ${(props) => {
          return `url(${props.icon.filled}) no-repeat`;
      }};
      background-size: contain;
  }

  다음과 같이 해결: 7f0dec52af79e892e768784846da2b8bdbd8a9ee