버킷리스트 프로그래스바 만들기

기능설명

완료버튼 누를때마다 완료한 퍼센트만큼 프로그래스바가 오랜지 색깔로 채워지게 한다.

1.src 에 Progress.js 파일 만들기
2. 파일에 함수 만들고 App.js에서 Progress 임포트,
return 안쪽 적당한 위치에 추가
3.Progress.js 에서 styled components 임포트

import styled from "styled-components";

4.styled component만들기

const Progress=(props)=> {
    return (
        <ProgressBar>
            <HighLight/>
        </ProgressBar>
    )
}

const ProgressBar =styled.div`
    background: #eee;
    width: 100%;
    height: 40px;
`;
const HighLight = styled.div`
    background: orange;
    width: 50%;
    height: 40px;
`;

5.리덕스에서 데이터 가져와야되서 useSelector 임포트

import { useSelector } from "react-redux";

6.가져온 데이터를 map으로 돌리고 HightLight에 넓이 %추가

const Progress=(props)=> {
    const bucket_list= useSelector((state)=>state.bucket.list);
    let count =0;
    bucket_list.map((b, idx) =>{
        if(b.completed){
            count ++;
        }
    })
   
    return (
        <ProgressBar>
            <HighLight width={count/bucket_list.length* 100+"%"} />
        </ProgressBar>
    )
}

7.HightLight styled components에 props 추가
트랜지션은 프로그래스바가 스르륵 차게 하는 방식

const HighLight = styled.div`
    background: orange;
    transition: 1s;
    width: ${(props)=> props.width};
    height: 40px;
`;