원티드-프리온보딩코스-선발과제

🚀 배포

배포주소 바로가기

🧐 프로젝트 빌드 및 실행 방법

1. 상단 Code 버튼을 눌러 레포지토리를 클론 받습니다.

$ git clone https://github.com/Jeong-jeong/wanted-preonboarding-course.git

2. 패키지를 설치합니다.

$ yarn install

3. 서버를 실행합니다.

$ yarn start

기술 스택

• react ^17.0.2
• react-router-dom 6
• react-scripts 4.0.3
• react-responsive ^.9.0.0-beta.5
• emotion ^11.7.1
• craco ^6.4.3
• axios ^0.24.0
• storybook ^6.4.9
• commitizen ^4.2.4

📄 요구사항

• 원티드 페이지 상단 영역 React 기반 클론

상단 GNB (Global Navigation Bar) ✅

sm < 768px
768px <= md < 992px
992px <= lg < 1100px
1100px <= xl < 1200px

슬라이드 (캐러샐) 영역 ✅

스와이프 이벤트
자동 스와이프 이벤트
왼쪽/오른쪽 버튼 이동
가운데 정렬
threshold(120) 이상 스와이프 처리
마우스 아웃 처리

반응형 구현 ✅

const breakpoints = {
  xl: 1200,
  lg: 1100,
  md: 992,
  sm: 768,
}