TIL | 버튼 중복 선택(find, filter)

filter와 find 메서드를 사용해서 버튼을 중복 선택하기

// mock 데이터
const DateFilterData = [
  {
    id: 1,
    value: "전체",
  },
  {
    id: 2,
    value: "쇼핑몰",
  },
  {
    id: 3,
    value: "마켓",
  },
  {
    id: 4,
    value: "로드샵",
  },
  {
    id: 5,
    value: "디자이너브랜드",
  },
  {
    id: 6,
    value: "제너럴브랜드",
  },
  {
    id: 7,
    value: "내셔널브랜드",
  },
  {
    id: 8,
    value: "뷰티",
  },
];

export default DateFilterData;

// 기본 코드
import React, { useState, useEffect } from "react";
import SellerAttriFilterData from "../../Data/SellerAttriFilterData";

function FilterArea() {
  // duplicated라는 state에 배열을 초기값으로 저장하였다.
  const [duplicated, setDuplicated] = useState(["전체"]);
  
  // 선택 버튼이 모드 선택되거나, 선택된 버튼이 없을 시, 전체이 선택되도록 함
  useEffect(() => {
    if (duplicated.length === 7 || duplicated.length === 0) {
      setDuplicated(["전체"]);
    }
  }, [duplicated]);
  
  const handleDuplicated = (e) => {
    // e.target.value를 버튼을 클릭했을 때,
    // value의 값을 console로 확인할 수 있다.
    console.log(e.target.value);
    // duplicated에서의 각 element와
   	// e.target.value가 같은 element를 찾아서
    // isIncludes에 (배열로) 즉시 반환한다.
    const isIncludes = duplicated.find((el) => el === e.target.value);
    
    // e.target.value가 "전체"이면
    // duplicated에 ["전체"]를 넣어준다.
    // 이렇게 되면 후에, "전체"라는 버튼에 style이 적용된다.
    if (e.target.value === "전체") {
      setDuplicated(["전체"])
  } 
    // isIncludes에 element가 있으면(true면)
    // duplicated의 element와 e.target.value가 같은 것을 제외하고,
    // 새로운 배열을 반환한다.
    else if (isIncludes) {
      setDuplicated(duplicated.filter((el) => el !== e.target.value));
  } 
    // duplicated의 length가 0보다 크면 => 클릭 된 버튼이 1개 이상이면
    // duplicated에서 "전체" 제외한
    // element들을 가져오고,
    // *** 그리고 새로 클릭 된 버튼을 duplicated에 넣어 준다. 
    else if (duplicated.length > 0) {
 	setDuplicated([...duplicated.filter((el) => el !== "전체"), e.target.value,
  ]);
  } 
    
    /* (수정)
    duplicated의 길이가 1보다 작을 수 없으니,
    아래는 필요 없는 조건문이었다.
    나머지의 경우에는 duplicated에 있는 element들과 새로 클릭되는 버튼들을
    duplicated에 넣어준다.
    else {
      setDuplicated([...duplicated, e.target.vaue]);
    }
    */
  
  return(
  	<SellerAttri>
      <SellerAttriBtn>
        // mock 데이터를 map 메서드를 사용해서 돌린다.
        {SellerAttriFilterData.map((el, index) => (
        	<AttriBtn
              key={index}
              type="button"
              // onClick 이벤트를 만든다.
              onClick={handleDuplicated}
              // value에 data의 value를 입력한다.
              value={el.value}
              // duplicated의 element가 el.value와 일치하면
              // styled.component에 backgroundColor를
              // props로 넘겨주고
              // 조건에 따라서 background가 달라지도록한다.
              backgroundColor={duplicated.find(
              	(element) => element === el.value
              )}
            >
            {el.value}
            </AttriBtn>
        ))} 
      </SellerAttriBtn>
    </SellerAttri>
  );
}

export default FilterArea;
  
  
// styled.component 영역
  
const AttriBtn = styled.button`
  margin: 0 3px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;

// props로 넘겨준 스타일은 backgroundColor의 조건이 만족될 시에만, 실행이 된다.

  color: ${({ backgroundColor }) => (backgroundColor ? "white" : "black")};
  background-color: ${({ backgroundColor }) =>
    backgroundColor ? "#428bca" : "#fff"};
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  outline: none;
  cursor: pointer;

  &:hover {
    color: #333;
    color: ${({ backgroundColor }) => (backgroundColor ? "white" : "black")};
    background-color: ${({ backgroundColor }) =>
      backgroundColor ? "#428bca" : "#e6e6e6"};
    border-color: #adadad;
  }
`;