• 앱의 하단 메뉴바는 디자인 시안이 나올때까지 임시로 material UI 를 사용했다.

Bottom Navigation React component - MUI

• 아이콘 및 라벨 변경

  • label attribute로 라벨 변경하고 icon attribute에 material ui icon 컴포넌트를 넣어서 아이콘 변경

    

    

• css 변경(배경, 글씨, 선택된 메뉴 색 변경)

  // BottomMenu.tsx
  
  ...
  
  import MuiBottomNavigationAction from '@mui/material/BottomNavigationAction';
  import { styled } from '@mui/material';
  import palette from '../../style/palette';
  
  const BottomNavigationAction = styled(MuiBottomNavigationAction)(`
    &.Mui-selected {
      color: ${palette.darkBlue};
    }
    background-color: ${palette.green};
    color: ${palette.grayBlue};
  `);
  
  ...
  
  return (
      <Box
        sx={{ width: '100%', position: 'fixed', bottom: 0, left: 0, right: 0 }}
      >
        <BottomNavigation
          showLabels
          value={value}
          onChange={(event, newValue) => onChangeMenu(event, newValue)}
        >
          <BottomNavigationAction label="홈" icon={<HomeIcon />} />
          <BottomNavigationAction label="검색" icon={<SearchIcon />} />
          <BottomNavigationAction label="프로필" icon={<AccountCircleIcon />} />
          <BottomNavigationAction label="북마크" icon={<BookmarkIcon />} />
          <BottomNavigationAction label="설정" icon={<SettingsIcon />} />
        </BottomNavigation>
      </Box>
    );
  

• 메뉴 클릭시 페이지 이동

  • 메뉴 버튼을 누르면 <BottomNavigation> 컴포넌트의 속성인 onChange 이벤트에서 newValue 값에 메뉴 index 를 넣어준다.
  • 메뉴버튼 change 마다 useState로 setValue(newValue) 해주어 value 상태값을 변경시키고 value 값을 <BottomNavigation> 컴포넌트에서 가지고 있는 형태.
  • 메뉴버튼 change 마다 navigate() 로 paths 배열에서 가지고 있는 경로로 라우팅하게 해주었는데 라우팅 페이지로 이동하면서 value 값이 초기화되어 선택된 메뉴 값이 0으로 돌아가버린다. 따라서 useEffect로 현재 경로에 해당하는 value로 setValue 해주었다.
  • 코드

  // BottomMenu.tsx
  
  ...
  
  export default function BottomMenu() {
    const currentPath = useLocation().pathname;
    const navigate = useNavigate();
    const [value, setValue] = useState(0);
  
    const onChangeMenu = (event: any, newValue: number) => {
      setValue(newValue);
      const paths = ['/', '/search', '/profile/manage', '/bookmark', '/setting'];
      navigate(paths[newValue]);
    };
  
    useEffect(() => {
      if (currentPath.includes('/profile/')) {
        setValue(2);
      } //나머지 메뉴들 생기면 추가로 만들어줘야함
      else {
        setValue(0);
      }
    }, [currentPath]);
  
  return (
      <Box
        sx={{ width: '100%', position: 'fixed', bottom: 0, left: 0, right: 0 }}
      >
        <BottomNavigation
          showLabels
          value={value}
          onChange={(event, newValue) => onChangeMenu(event, newValue)}
        >
          <BottomNavigationAction label="홈" icon={<HomeIcon />} />
          <BottomNavigationAction label="검색" icon={<SearchIcon />} />
          <BottomNavigationAction label="프로필" icon={<AccountCircleIcon />} />
          <BottomNavigationAction label="북마크" icon={<BookmarkIcon />} />
          <BottomNavigationAction label="설정" icon={<SettingsIcon />} />
        </BottomNavigation>
      </Box>
    );