[21/07/28] 필터 추가 기능

병원도다니고.. 토익준비도하고.. 하튼 여러모로 바쁜 탓에 개발을 리팩토링 말고는 못했다..

오늘을 마무리로 내일부턴 검색 기능, 에디터 확장 기능 구현에 들어가야겠다..

선택한 아이템이면 focus

// true이면 포커스 해준다.
<DropDownItem
              key={l}
              onClick={(e) =>
                onClick({
                  e,
                  value: l,
                  type,
                  allowDuplicate,
                })
              }
              focus={
                Array.isArray(selectedList.value)
    // select.hashtag.value는 배열이므로 포함되었는지를 체크한다.
                  ? selectedList.value.includes(l.id)
                  : selectedList.value === l.id
              }
            >
              {l.name}
            </DropDownItem>

FilterItem props로 전해주는걸 children으로 바꾸어 전달

직접 입력의 경우 input으로 내부 요소를 변경해주어야함. 다른 컴포넌트에서 사용하는 경우 input은 사용되지 않으므로 이렇게 자식으로 넘겨주기로함.

<FilterItem
          key={t}
          onClick={onClickFilterItem}
          focus={currentType === t}
          type={t}
          size={138}
        >
          {/* 직접입력인 경우 input을, 아닌 경우 current 값을 자식으로 보내준다. */}
  
          {select[t].current === '직접입력' ? (
            <Input
              placeholder={'직접입력'}
              onChange={(e) => onChangeInput(e, t)}
              value={select[t].value === 0 ? '' : `${select[t].value}`}
            ></Input>
          ) : (
            <div>
              {Array.isArray(select[t].current)
                ? select[t].current.join(' / ')
                : select[t].current}
            </div>
          )}
        </FilterItem>

필터 텍스트가 요소 크기를 넘어가면

모바일

잘리고 스크롤이 가능해진다.

데스크탑

...으로 처리하고, 스크롤 불가능하게

& > div:first-child {
    overflow-x: scroll;
    
    // 줄바꿈 금지
    white-space: nowrap;

    /* No Scroll Bar */
    -ms-overflow-style: none;
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
    ${(props) => props.theme.desktop} {
    // 데스크탑
    
    
      overflow-x: hidden;
      
      // ... 처리 
      text-overflow: ellipsis;
    }
  }

직접입력을 선택하면 input으로 변경

FilterItem 다른곳에서도 사용하도록 변경

아래는 업체 탐색 페이지안에있는 FactoryItemsFilter Component이다.
이 컴포넌트도 FilterItem을 사용하므로 기존의 코드를 삭제하고 atomic 컴포넌트를 사용하도록 한다.

<FilterItem
            key={f.eng}
            type={f.eng}
            onClick={onClick}
            focus={
              (
                Array.isArray(querySelect[f.eng])
                  ? querySelect[f.eng].length !== 0
                  : querySelect[f.eng] && querySelect[f.eng] !== 0
              )
                ? true
                : false
            }
          >
            {f.kor}
          </FilterItem>