Reusable Box

나중에 한 번 쯤은 구현할 만한 것들을 미리 제작해보는 컨셉으로 만든 Repo입니다. 따로 페이지를 만들어서 배포하지 않고 스토리 북을 이용해서 배포 하였습니다.

스토리북 주소

Skills

• React
• Typescript
• scss
• storybook

만든 것

1. 토글 버튼

2. 셀렉션

   재사용성이 높은 컴포넌트라는 목적을 가지고 만들어본 컴포넌트.

   참고한 영상

   • 셀렉션을 이용한 드랍다운
   • 셀렉션을 이용한 메인Nav와 interaction하는 페이지 구현

3. 달력

   • 화면 크기에 따른 반응형 디자인 적용
   • 참고 디자인

4. 케러셀

   • 인피니티 케러셀 구현
   • 자동으로 넘어가는 부분 구현
     • 버튼에 포커스가 들어가지 않았을 경우 자동으로 넘어가게끔 구현.
   • 창 크기에 따른 이미지 최적화
   • 버튼 뿐만 아닌 인디케이터도 추가하였습니다.
   • 인피니티 케러셀을 구현하는 과정에서 이벤트가 과하게 들어가는 경우에 부자연스런 동작을 개선하기 위해 쓰로틀링 적용.

5. 검색 컴포넌트

   • 구글 검색창을 기준으로 비슷하게 구현하려 하였음.
   • 입력창에 포커스가 있을 경우 검색 기록이 드랍다운 되게 구현
     • 내가 입력한 검색어를 포함하는 검색 기록만을 표시
     • tab이나 화살표를 이용하여 검색기록을 선택하는 경우는 filtering 하지 않음.
   • 선택된 검색기록을 tab과 화살표로 움직일 수 있게 구현
   • 영어, 한글 모두 확인할 수 있게끔 추가