Vanilla JS 기반의 반응형 화장품 쇼핑몰 제품 리스트 페이지를 퍼블리싱 및 개발하였습니다.
미디어쿼리에 따라 각 섹션의 배경 이미지를 변경하고, GSAP + ScrollTrigger를 활용해 가로 스크롤 애니메이션과 스크롤 기반 등장 효과를 구현했습니다.
itemData를 기반으로 동적 필터 태그 생성, 정렬 기능, 카테고리 및 서브카테고리 필터링, 페이지네이션 등을 JavaScript로 직접 처리하였습니다.
URL 쿼리스트링 파싱을 통해 사용자 선택 상태를 반영하고, 클릭 이벤트에 따라 실시간으로 상품 데이터를 필터링하여 렌더링합니다.
*로그인, 장바구니, 검색 기능은 포함되어 있지 않으며, 프론트엔드 UI/UX 구현과 필터링 로직 중심으로 개발된 프로젝트입니다.*