[Portfolly] 카테고리 Selector 만들기

들어가면서...

Portfolly에서 포트폴리오 작성 페이지를 만들던 중, HTML 기본 제공 select를 사용하지 않고 직접 만들기로 결정했습니다. 그 과정을 기록합니다.

 

 

카테고리 Selector UI

카테고리 Selector UI

 

생김새는 위와 같습니다. 클릭하면 5개의 포트폴리오 카테고리가 나타납니다.

 

카테고리를 선택하면 하단에 해당 카테고리와 관련된 태그들이 정렬됩니다.

 

 

selected된 option 관리하기

코드는 다음과 같습니다.

 

당시 Selector를 자꾸 Dropdown이라고 불러서 컴포넌트명이 CategoryDropDown입니다..

 

export default function ContegroyDropDown() {
  const dispatch = useDispatch();
  const savedPortfolio = useSelector(portfolio);
  const [isOpen, setIsOpen] = useState(false);

  const onClick = () => {
    setIsOpen(!isOpen);
  }

  const selectCategory = (item: string) => {
    setIsOpen(!isOpen);
    dispatch(setCategory(item));
    dispatch(initializeTag());
  }

  return (
    <FlexColumnWrapper>
      <DropDownBox dropdownItem={matchCategory(savedPortfolio.category)} isOpen={isOpen} onClick={onClick} />
      {isOpen &&
        <DropDownItemContainer>
          {
            categories.map((category: string) => {
              return <DropDownItem item={category} onClick={() => selectCategory(category)} />
            })
          }
        </DropDownItemContainer>
      }
    </FlexColumnWrapper>
  )
}

 

 

<DropDownItem /> 을 클릭하면 발동하는 클릭 이벤트 핸들러입니다.

  const selectCategory = (item: string) => {
    setIsOpen(!isOpen);
    dispatch(setCategory(item));
    dispatch(initializeTag());
  }

 

카테고리를 선택하면 selector를 닫고,

전역 상태에 값을 저장하고,

태그 값이 카테고리에 따라 전부 바뀌기 때문에 초기화해줍니다.

 

 

구현하면서 느낀점

그렇게 어려운 걸 만든 것도 아닌데, HTML이나 브라우저에서 기본 제공하는 것들을 직접 따로 만들면 괜히 뿌듯하고 더 자식 같은 기분이 듭니다.

 

처음에 portfolio 전역 상태가 없었을 땐 categorySlice를 만들어 카테고리 값만 전역으로 관리했는데,

(react-hook-form의 setValue를 props drilling 해가며 넘겨주기 싫어서 전역으로 관리했습니다)

 

나중에 portfolio 전역 상태를 만들고 부터는 그걸로 다 통합되어서 코드가 훨씬 간단해졌습니다.