게이지바 구현

게이지바를 드디어 완벽하게 구현했다. 

 

예외처리 까지 끝냈음

어떻게 했냐면

일단 

대충 이런식으로 만들건데

 

1.게이지바를 구현 하기 위해서 중첩반복문을 통해 posts 와 comments DB값을 하나씩 필터링

2.필터링된 comments 값의 카테고리를 필터링 하여 카테고리가 A면 A값에 1 추가, B면 B값에 1을 추가하여 몇개의 득표수(댓글수) 가 있는지 확인

 

 

코드는

 const PostList = () => {
//DB에서 post 와 comment 를 호출 한 값을 변수에 담았음 
const { posts } = useSelector((state) => state.posts);
const { comments } = useSelector((state) => state.comments);
 

//posts에 반복문을 돌려서 각각 등록된 글들을 하나씩 꺼낸 뒤에    
{posts?.map((post) => {
        let countA = 0;
        let countB = 0;
        let barA = "lightgray";
        let barB = "gray";

//중첩반복문을 돌려 꺼내온 글과 댓글들을 비교 하였음 
        comments.map((comment) => {
          if (  comment.postId === post.id && comment.category === "A") {
            countA = countA + 1;
            barA = "#EC5858";
//count 가 올라가면 해당 카테고리의 득표수가 올라감
          }
          if ( comment.postId === post.id && comment.category === "B" ) {
            countB = countB + 1;
            barB = "#3E6D9C";
          }
        });
// 득표수를 백분율로 나타내기 위한 수식 선언 
        let ratioA = Math.round(100 - (countB / (countA + countB)) * 100);
        let ratioB = Math.round(100 - (countA / (countA + countB)) * 100);

// UI를 위한 예외처리 
        if (countA === 0) {
          ratioA = 50;
        }
        if (countB === 0) {
          ratioB = 50;
        }
        if (countA > 0 && countB === 0) {
          ratioA = 100;
          ratioB = 0;
        }
        if (countB > 0 && countA === 0) {
          ratioB = 100;
          ratioA = 0;
        }

        return (
//스타일 컴포넌트에 props를 값을 줘서 변수에 따라 css가 달라지게 바꿨음
                <GageBar>
                  <Bar bg={ratioA} color={ratioA === 100 ? "#EC5858" : barA}>
                    <span style={{ display: ratioA === 0 ? "none" : "block" }}>
                      {ratioA}%
                    </span>
                  </Bar>
                  <Bar bg={ratioB} color={ratioB === 100 ? "#3E6D9C" : barB}>
                    <span style={{ display: ratioB === 0 ? "none" : "block" }}>
                      {ratioB}%
                    </span>
                  </Bar>
								<GageBar>
								)

스타일은 

import styled from "styled-components";

//props 받은 값에 따라 width 와 backgroud-color 가 변경됨 
const Bar = styled.div`
  width: ${(props) => `${props.bg}%`};
  height: 100%;
  background-color: ${(props) => props.color};
  text-align: center;
`;

export {Bar}

 

 

뿌-듯