메인 페이지
리뷰 섹션
모킹서버 작성
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 넣기
- 모바일 화면의 가상 키보드가 모드에 따라 다르게 나타남
'프로젝트 > BookStore 사이트' 카테고리의 다른 글
| 1203 모킹 서버 / 리뷰 api / UI 구현 - 드롭다운, 탭, 토스트, 모달, 무한스크롤 (0) | 2025.12.03 |
|---|---|
| 1202 React-Query 사용, 리팩토링 (0) | 2025.12.02 |
| 1201 장바구니 목록, 주문 요약, 주문서 작성, 주문 내역 (0) | 2025.12.01 |
| 1128 도서 상세 페이지 구현 (0) | 2025.11.28 |
| 1127 비밀번호 초기화, 도서 목록 페이지 구현 (0) | 2025.11.27 |