ZARA 메인 페이지 클론 프로젝트

► ZARA 메인 페이지 클론 프로젝트

• 레포지토리 주소 
Zara - repo < 바로가기

 

► Project 소개

메인페이지의 Slider banner / category modal 구현.

Technlogies

Front-end   HTML | CSS | JAVASCRIPT | REACT | STYLED-COMPONENTS

 

구현 기능 사항

1.  slider banner 구현.

라이브러리 없이 슬라이드 베너 구현.

 

1) 버튼 클릭 이벤트 시, 슬라이더 위치 변경 / 버튼 유무 결정 / 버튼 글자 변경

∙슬라이더 위치 변경
해당 부분을 useRef로 선택하여 스타일 변화하기.
〈CSS〉 transform 속성 : 요소의 위치를 이동시킴.
transform:translate()

∙버튼 유무 결정
첫번째 베너에서는 왼쪽 버튼 안보임.
마지막 베너에서는 오른쪽 버튼 안보임.

∙버튼 글자 변경
베너 순서 ( WOMAN > MAN > KIDS > BEAUTY )에 따라 좌우 버튼 해당 글자로 변경.

 

2) 버튼 호버 시, 버튼 위치 이동.

∙CSS 트렌스폼
요소의 위치를 이동시키는 속성.
transform:translate()

∙CSS 트랜지션
속성을 서서히 변화시키는 속성
transition-duration: 2s

---

2.  category modal 구현.

카테고리 박스 모달로 구현. 

1) header 메뉴 아이콘 클릭 시 카테고리 박스 생성

카테고리 클릭 시, setState(true)로 변경하여 카테고리 박스 보여주기.
'X' 아이콘 클릭 시, setState(false)로 변경하여 카테고리 박스 숨기기.

2) 카테고리 클릭 시, 해당 글자 스타일 변경 및 해당 디테일 카테고리 보여주기.

∙글자 스타일 변경
글자 두껍게하기
border-bottom 생성

∙디테일 카테고리
클릭하는 카테고리에 따라 디테일 카테고리 컴포넌트 보여주기.

---

3.  반응형 구현

• media-query로 desktop,tablet,mobile에 맞게 반응형 구현