'Tesla' 웹사이트를 클론코딩해보는 프로젝트입니다.
- 'Tesla' 웹사이트를 클론코딩해보며, 그동안 공부했던 것들을 복습하기 위해 진행하였습니다.
- Front-end
- 개발언어 : JavaScript
- React, Redux, Redux-middleware(Redux-thunk), React-query, styled-component
- Back-end
- 개발언어 : Java
- Spring boot, Spring securuty, MySQL
- 공통
- 형상관리 : Git
- 협업 툴 : Github, Notion, Slack
- 디자인 공유 : Figma
- Front-end : 김근영, 이윤진
- Back-end : 조한울, 장현석, 주희
- 회원가입 페이지입니다.
- 사용자가 정보를 입력함과 동시에 유효성 검사를 진행합니다.
- 로그인 페이지입니다.
- 가입한 이메일 주소와 비밀번호를 입력하여 로그인합니다.
- 메인 페이지입니다.
- 테슬라의 주요 차 모델이 소개되는 페이지입니다. 중앙 버튼을 누르면 해당 모델의 상세페이지로 이동합니다.
- React-intersection-observer를 사용하여 스크롤 애니메이션을 구현하였습니다.
- 바닐라 Javascript로 메뉴바 애니메이션을 구현하였습니다.
- 차량 모델 상세 소개 페이지입니다.
- 각 섹션을 컴포넌트로 나누어 재사용하여 개발 소요 시간을 최소화하였습니다.
- 하단 버튼을 클릭하면 차량 구매 페이지로 이동합니다.
- 차량 구매 페이지입니다.
- 바닐라 Javascript로 이미지 슬라이드와 모달을 구현하였습니다.
- 우측 조건을 클릭하면 조건에 맞는 차량 금액을 나타냅니다.
- select box에서 차량을 선택하면, 해당 차량의 정보를 나타냅니다.
- shop 메인페이지입니다.
- 바닐라 Javascript를 이용하여 이미지 슬라이드를 구현하였습니다.