안녕하세요, 프론트엔드 개발을 공부 중인 이수현입니다.
첫 프로젝트로 제작한 NSAD* 모바일 웹앱 클론 코딩 페이지 입니다.
쇼핑몰 웹사이트이니 만큼, 비주얼적인 요소를 최대한 똑같이 구현하려고 노력했고,
서버 없이 로컬 스토리지만으로 간단하게 장바구니 로직을 구현했습니다.
아직 부족한 실력이라 지원이 안 되는 기능이 많지만, 남의 도움을 받지 않고
최대한 제 머릿속으로 로직을 짜보려고 노력했습니다.
이 웹앱의 주요 디자인적 요소는 glitch 애니메이션 효과입니다.
glitch 애니메이션은 js없이 css만으로 구현했습니다.
js로 구현한 기능 중에 신경써서 만든 것은
-
슬라이드 기능
JQUERY의 드래거블 UI를 이용하여 모바일에서 터치로 슬라이드를 이동하는 것과
화살표 버튼으로 슬라이드를 이동하는 로직을 구현했습니다.
특히, LOOKBOOK의 세부 페이지에서 무한 슬라이드 로직을 구현하는데 어려움이 있었지만 끝까지 완성시켰습니다. -
스크롤 위치값에 따른 CSS 변경
스크롤의 위치값을 이용하여 상품 리스트 페이지에서 상단의 타이틀 CSS를 변경하는 효과를 주었습니다.
이를 구현하면서 offsetTop과 scrollTop의 개념을 이해하게 되었습니다. -
탭 기능
탭기능은 classList를 더하고 제하는 것으로 구현해봤습니다. -
장바구니 기능
상품을 장바구니에 담았을 경우, 상품 정보를 로컬스토리지에 남겨 장바구니에 표시하도록 간단하게
기능을 구현했습니다.