amazon.prime 웹서비스를 클론하는 프로젝트입니다
-
WebStie: https://jumazonprime.netlify.com
-
기술 스택: VanillaJS, JavaScript, HTML, CSS Description
-
메인페이지 html, css 구조화 설계
-
상단 plans bar
- 스크롤을 통해 plans bar가 노출되고, 사라짐 (scroll event)
- bar가 노출된 상태에서 ‘see more plans’ 영역을 클릭하면 plan card 레이어가 생성됨 (animation 효과)
- close 버튼 or 하단 화살표를 클릭하면 plan card가 접힘
-
캐러셀(Carousel) UI
- 무한으로 동작하는 캐러셀 UI
- 총 4개의 panel, 3초 간격으로 애니메이션으로 동작함(setInterval, transition 효과)
- 좌우 버튼을 누르면 즉시 이동되고, 일정 시간 동안 버튼 클릭이 없을 시, 자동이동이 시작됨
마지막 패널에서 처음 패널로 돌아올 때, 오른쪽으로 애니메이션이 동작하며 첫 패널로 돌아오게하는 기능을 구현하는 것에 있어서 어려움이 있었음. 첫 번째 패널 왼쪽에 4번째 패널을, 4번째 패널 오른쪽에 첫 번째 패널을 숨김으로써, 기능을 구현했음. 숨겨진 5번째 패널로 이동될 때, 애니메이션 동작을 주지 않은 상태로 1번째 패널로 이동하게 구현시켰음.
-
검색어 자동완성
- 검색어를 입력하면 실시간으로 검색결과가 노출됨. (fecth API를 이용하여 JSON 데이터를 받아옴, setTimeOut API로 노출 시간(300ms) 지연시킴) 입력창의 내용을 백스페이스로 삭제해도 일치하는 자동완성결과가 노출된다.
- 실제 검색버튼을 눌러도 검색이 이뤄지진 않으며, 자동완성 결과 창은 닫힌다.
JSON데이터를 fetch API로 받아, 그 데이터를 다루는 작업에서 실질적으로 보이지 않는 데이터를 다루는 것이 어려웠음. 개발자 도구의 네트워크 탭에서 API를 받아오는 시점과 데이터에 접근하여 데이터를 조작하는 방법에 대해 이해를 할 수 있게 됨.