검색창을 구현한 과제입니다.
배포 링크
Table of Contents
 |
 |
 |
| 👑 윤희준 (팀장) | 정서영 | 염상권 |
| 축약어 검색 및 자동완성 구현 | 검색 결과 표시 및 레이아웃 구현 | 태그 필터링 구현 및 debouncing 적용 |
- 자동 완성 기능
- 자소 단위로 영양제 이름 및 사용자가 입력한 검색어를 분해한 뒤, 사용자가 입력한 자소를 모두 포함하고 있는 영양제만 자동 완성에 표시된다.
- '홍삼정' 입력 시 '통큰홍삼정' 이 '홍끼와 홍삼요정' 보다 먼저 표시된다. 즉 사용자가 입력한 자소가 영양제 이름 안에서 연속해서 나타날 수록 먼저 표시된다.
- 유저가 검색하고 싶은 영양제의 줄임말, 초성, 포함하는 키워드, 혹은 브랜드 명만 입력하더라도 자동 완성이 가능하다.
- 위, 아래 방향키, 혹은 마우스 hover로 자동완성 항목을 선택할 수 있으며. 엔터 또는 클릭으로 항목을 선택하면 그에 맞추어 인풋이 바뀐다.
- 자동 완성 시 영양제 이름뿐만 아니라 제품 사진과 브랜드 명을 함께 보여 준다.
- 자동 완성 항목을 클릭하면 자동 완성 창이 사라지며, 제품 상세 정보가 검색창 아래에 표시된다.
'코어 신바이오틱스 프리바이오틱스 프로바이오틱스' 와 같은 영양제의 정식 명칭을 기억하기는 쉬운 일이 아닙니다.
또한 '커클랜드 시그니춰', '비타씨' 와 같이 일상적으로 쓰이는 외래어 표기와 다른 이름을 가진 영양제도 많습니다.
많은 사용자들이 정확한 이름을 기억하지 못한 상태로 영양제를 찾을 것이라 생각했기에, 자소 분리를 사용해서
'ㅋㅋㄹㄷ', '시그닟', '신바이프리프로', '코알라 딸기' 와 같이 영양제 이름 일부를 입력하지 않거나,
초성으로 대체하더라도 검색을 진행할 수 있도록 했습니다.
또한 사용자 경험을 위해 방향키, hover 등을 통한 자동완성 항목 선택 기능,
선택한 영양제에 대한 상세한 정보를 검색창 아래 표시하는 기능,
유사한 이름을 가진 영양제들을 구분하기 쉽도록 이름뿐만 아니라 제품 사진 및 브랜드 명 또한 자동완성에 표시하는 기능을 구현했습니다. - 태그 검색 기능
- Mock Data에 'tags' 항목을 추가적으로 부여해, 주요 키워드의 경우 한국어와 영어 어느 쪽을 사용해도 검색이 가능하다.
영양제 이름에는 영어와 한국어가 혼용되는 경우가 많습니다.
영양제 명칭에 포함된 것이 '비타민' 인지 'vitamin' 인지 고민하지 않아도 되도록,
주어진 Mock Data에 tag를 추가적으로 부여해 편의성을 높였습니다.-
검색 창에 debouncing 적용
- 유저가 검색창에 글자 하나를 입력할 때마다 자동 완성 항목이 바뀐다면 불필요한 렌더링이 일어나게 됩니다. 0.5초 간 다른 입력이 들어오지 않을 때만 자동 완성 창을 렌더링하도록 설정하여 속도를 높였습니다.
-
반응형 레이아웃 적용
- 반응형 레이아웃을 적용해 모바일 환경에서도 검색창을 사용할 수 있도록 했습니다.
- NPM Install
npm install npm@latest -g- Repository를 clone한다.
git clone https://github.com/gml9812/wanted-swit.git- NPM Package들을 설치한다.
npm install- Localhost 환경에서 프로젝트를 실행한다.
npm start.
├── @types # typescript 모듈 확장자 지정
├── public
│ └── index.html
└── src
├── Router.tsx
├── assets # 이미지 및 아이콘
├── commons # 상수
├── components # atomic design에 따른 세부 컴포넌트
├── hooks # custom hook 저장
├── index.tsx
├── pages # routing 될 페이지 모음, 본 프로젝트에서는 Main만 존재
├── styles # global styles
├── types # 재사용될 type 모음
└── utils # 유틸 함수 모음Distributed under the MIT License. See LICENSE for more information.