[Progress] 우정테스트 사이트 만들기(Feat.리액트)

 

 

 

이번에는 퀴즈를 풀때마다 진행바 같은걸 만들어서 얼마나 진행되었는지 볼수있도록 만들어보자.

 

Progress.js 

 

import React from "react"; import styled from "styled-components"; import { useSelector } from "react-redux"; const Progress = (props) => { // 퀴즈 리스트 가지고 오기 const quiz_list = useSelector((state) => state.quiz.quiz); // 유저 답 리스트 가지고 오기 const answers = useSelector((state) => state.quiz.answers); // 답 리스트 갯수 세기 let count = answers.length; return ( <ProgressBar> <HighLight width={(count / quiz_list.length) * 100 + "%"} /> <Dot /> </ProgressBar> ); }; const ProgressBar = styled.div` width: 80%; margin: 20px auto; background: #eee; // width: 100%; height: 20px; display: flex; align-items: center; border-radius: 10px; `; const HighLight = styled.div` background: #03c75a; height: 20px; width: ${(props) => props.width}; transition: width 1s; border-radius: 10px; `; const Dot = styled.div` background: #fff; border: 5px solid #03c75a; box-sizing: border-box; margin: 0px 0px 0px -10px; width: 40px; height: 40px; border-radius: 20px; `; export default Progress;

 

이제 사용할 화면인 Quiz.js에 임포트 해주고 return 화면에 넣어주면끝!

상태바를 만든 전체코드에대해서는 나중에 활용할 수 있도록 어떻게 동작하는 원리를 이해해두자