[Material Design] Material-UI(MUI)로 react & styled component 사용하기 <레벨바, 진행바, Progressbar, Levelbar>

 

https://mui.com/material-ui/react-progress/

Circular, Linear progress React components - Material UI

진행바를 사용해서, 레벨바를 구현하겠습니다!

 

 

00. Linear progress

---

본모습은 원래 이렇게 생겼습니다.

 

 

 

01. Linear progress Customization

---

mui에서 나온 것처럼, 이와 같이 커스텀 가능합니다.

import { styled } from '@mui/material/styles';
import CircularProgress, {
  circularProgressClasses,
  CircularProgressProps,
} from '@mui/material/CircularProgress';
import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';

const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
  height: 10,
  borderRadius: 5,
  [`&.${linearProgressClasses.colorPrimary}`]: {
    backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800],
  },
  [`& .${linearProgressClasses.bar}`]: {
    borderRadius: 5,
    backgroundColor: theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8',
  },
}));

이 코드는 dark, light 모드를 지원하느라 theme.palette.mode === 'light' 를 작성한 것으로...

 

 

이것도! 좋지만,, 저는 게임 효과가 나는! 밋밋과 심플보단 좀 더 캐릭터스러운 레벨바가 좋기 때문에

코드를 수정해보겠습니다!

 

02. Level Bar

---

/** Level Progress Bar */
  const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
    height: "2.4rem",
    borderRadius: "100rem",
    [`&.${linearProgressClasses.colorPrimary}`]: {
      backgroundColor: theme.palette.grey[300],
      boxShadow: "0 1px 2px #999 inset, 0 1px #ffffff",
    },
    [`& .${linearProgressClasses.bar}`]: {
      borderRadius: "100rem",
      backgroundColor: "#C8F2A7",
      boxShadow: "0px -3px 0px 9px #76D22D inset",
      width: "50%", // xp 값에 따라 얘를 조절하기
    },
  }));
  
  const levelProgressBar = (
    <Box>
      <BorderLinearProgress variant="determinate" value={100} />
    </Box>
  );

주의 하실 점은 <BorderLinearProgress variant="determinate" value={100} />에서 100으로 해놓는 이유가

아래와 같이, 선택한 부분을 얼만큼 숨기지 않고 보여줄 것인가이기 때문에 100으로 한 겁니다!

코드 직접 수정하시면서 아실 수 있을 거에요! 😁😁

그리고 XP 값에 따라 바뀔 바의 길이는 linearProgressClasses.bar의 width를 통해 바꿀 수 있죠✨✨

 

위 코드는, 제가 직접 하나하나 해보면서 구현한 거라서 본인의 컴포넌트에 맞게 참고하셔서 사용하시면 될 것 같습니다~!

 

요새 날씨가 너무 좋아서 좋음🌞🌞🌞