13. 프로그래스바, 스크롤바 적용하기

1. 프로그래스 바

과정

---

1. 상태값의 형태 바꿔주기

• 각 list_item마다 완료여부를 알 수 있는 값이 필요함.
• completed값을 boolean형태로 추가해주고, 객체 형태로 상태값을 바꿔준다.

2. <완료하기> 버튼 만들고, UPDATE관련 액션, 액션함수, 리듀서 만들고 연결

• UPDATE 액션 추가
  
• UPDATE 생성 함수 추가
  
• 리듀서 추가 : idx번째 list
  
• Detail.js에 완료하기 버튼 만들고, dispatch이용해서 updateBucket액션함수 불러오기
  

3. 완료하기 버튼 클릭시 item의 색 바꿔주기

• 컴포넌트에 조건문으로 props를 설정해준다.
  
• 스타일드 컴포넌트로 background 색을 가져온다.
  

4. Progress.js 만들기

4-1.Progress로 리덕스 상태값 가져오기

• useSelector로 state값 가져오기
  

4-2. 완료할때마다 숫자가 증가하는 count 만들기

• state.list값을 map함수로 돌려서 completed가 시행될때마다 count를 1씩 더해주기
  

4-3. width값 설정해주기

• count된(완료된) item개수 / list 개수를 백분율로 나눠주는 props만들기
  
• styled-compoents로 width값 props로 바뀌도록 설정하기
  

2. 스크롤 바

과정

---

1. App.js에 위로가기 <button>을 추가하기

2. onClick이벤트에 window.scrollTo 추가하기

• window.scrollTo({top:0, left:0, behavior:'smooth'}); 추가해준다

3. 과제+Detail 수정