1204 메인 페이지(배너, 캐러셀), 모바일 대응

 

메인 페이지

리뷰 섹션

모킹서버 작성
hooks 작성
fetchReviewAll api 요청 함수 작성
리뷰 컴포넌트 작성
pages>Home에 위치

 

React Slick

• 리액트에서 사용하는 캐러셀 라이브러리
• 참고 링크 : https://react-slick.neostack.com/
• 설치 : npm install react-slick --save
• 캐러셀 설치 : npm install slick-carousel --save
• 타입 설치 : npm install @types/react-slick --save

 

슬라이더 임포트

• 전체 슬라이딩 위한 wrapper 역할

---

신간 섹션

• useMain 훅에 신간 데이터 가져오는 fetchBooks 추가해서 데이터 출력

---

베스트 섹션

모킹서버 만들기

---

배너 섹션

인덱스에 따라 transformValue 조정
인디케이터 만들기

---

모바일 대응

반응형 웹

• 브라우저의 가로 너비에 반응하는 웹사이트

viewport
상대값을 가진 레이아웃
화면 너비 감지(mediaquery)

window.matchMedia("(max-width: 768px)").matches);

• max-width가 768px 이하 여부

useMediaQuery 훅 만들기
테마에서 관리

넣어줄 때

@media screen AND ${({theme}) => theme.mediaQuery.mobile} {

}

 

input 태그에 inputMode 넣기

• 모바일 화면의 가상 키보드가 모드에 따라 다르게 나타남