클론사이트 : 프로스펙스(Prospecs)[https://www.prospecs.com/display.do?cmd=mallMain]
JavaScript
React
Vite
styled-components
Git
✅ 설치방법
-
Node.JS를 다운받아 설치해주세요. vite를 사용하였기 때문에 최소 14.18 버전 이상이 요구됩니다. https://nodejs.org/
-
리포지토리를 클론해주세요.
git clone https://github.com/wecode-bootcamp-korea/justcode-6-1st-pro-coders-front.git
- dependencies를 설치해주세요.
npm install
✅ 실행방법
- 다음 명령어를 이용해 Dev server를 실행해주세요.
npm run dev
- 브라우저에서 http://localhost:5173에 접속해주세요.
[이미지출처] https://www.prospecs.com
클릭 시작시의 clientX값을 저장해서 이동시의 clientX값과의 차이를 이용해 transform속성을 직접 조작하는 방식을 이용하였습니다.
Intersection observer를 활용하였습니다.
원본 사이트의 메뉴가 너무 좁다는 느낌이 들어서 위아래로 스크롤 할 수 있도록 분리하였습니다.
- Skeleton 구현
- UI 구현
- 카테고리 별로 달라지는 목록
- Skeleton 구현
- 슬라이드 구현
- 토글 UI 및 기능 구현
- Skeleton 구현
- 카카오맵 API를 이용한 매장 지도
- 매장 타입별 지도 & 상세 지도 구현
- Smartfit 페이지 UI 구현
- GO 클릭시 로그인 모달 또는 로그인 확인 모달이 나오도록 구현
- topbutton 구현
- Skeleton 구현
- 키워드 검색 기능 구현
- 인기검색어 검색 기능 구현