🚗 클래식카를 전기차로 " radian "

🎨 굴렁쇠 Figma

배포 된 라디안 링크 🚘

📑 프로젝트 소개

• radian은 클래식카를 좋아하지만, 전기차를 사용하고 싶은 사람들을 위해 클래식카의 느낌과 전기차의 기능을 함께 사용할 수 있는 차를 판매하는 사이트입니다.
• 클래식카의 감성은 유지하되, 전기차의 성능을 함께 느낄 수 있습니다.
• 옵션들을 선택하여 화면에서 해당 옵션에 따라 변화되는 것을 보며, 사용자가 원하는 느낌인지 눈으로 확인 할 수 있습니다.
• 옵션 선택을 통해 사용자가 원하는 차의 대략적인 가격을 확인해 볼 수 있습니다.

📆 개발 일정

12월 2일 - 4일 : 기획
12월 5일 : 기획 발표
12월 6일 - 13일 : 담당 페이지 개발 🛠️
12월 16 - 19일 : 메인페이지 / 백엔드 공통 개발 🛠️
12월 20 - 23일 : 테스트 및 오류 수정
12월 24일 : 발표 준비
12월 27일 : 프로젝트 발표

🧑‍🧑‍🧒‍🧒 팀원 구성

radian 팀장 : 김도연

radian 팀원 : 김수진

radian 팀원 : 김우주

radian 팀원 : 박한솔

✅ 실행 방법

프로젝트 clone 이후 패키지 설치

npm install

설치 이후

vite 실행

npm run dev 

배포 (npm run deploy 작성 시 build 와 deploy 자동 작동)

npm run deploy  

eslint 사용 시

npm run lint (확인하는 방법)
npm run lint:fix (오류 사항 자동 수정하는 방법)

prettier 사용 시

npm run format

🚘 radian 사이트 화면 설명

🏁 메인화면 페이지

radian 사이트의 메인페이지로, 스크롤 값을 활용한 페이드인, 플립, 확대 애니메이션과 같은 다양한 애니메이션 효과를 통해 사용자에게 시각적인 즐거움을 보여드립니다.

🔐 로그인/회원가입 페이지

radian 사이트의 로그인 및 회원가입 페이지로, 입력 양식 점검 폼을 통해 사용자에게 올바르지 않은 입력임을 알려주고, 정규식 조건에 입력한 정보가 만족할 경우 버튼이 활성화됩니다.

🚘 상품 리스트 페이지

radian 사이트의 상품 리스트 페이지로, 다양한 전기차 모델을 한눈에 볼 수 있는 인터페이스를 제공합니다. 상단 이미지 캐러셀을 통해 전체 상품 이미지들이 보여지고, 하단에는 상품들이 순차적으로 구성되어 있습니다. 또한 해당 상품의 상세 이미지들을 모달창의 캐러셀을 통해 보여드립니다.

🔎 상품 상세 페이지

상품 상세 페이지는 사용자가 선택한 차량에 대한 소개를 중점으로 구성되어있습니다. 메뉴 네비게이션을 통해 손쉽게 원하는 위치 이동을 할 수 있고, 마우스를 이용하여 스크롤을 내리게 되면 스크롤 트리거 애니메이션이 작동되어 사용자가 정보를 탐색하며 시각적인 즐거움을 느낄 수 있습니다.

📝 상품 예약 페이지

상품 예약 페이지로, 사용자가 쉽게 옵션들을 선택할 수 있고, 3D 화면을 통하여 사용자가 선택한 차량을 입체적이고 직관적으로 볼 수 있습니다. 색상 뿐만 아니라 엔진 소리도 들어볼 수 있습니다.

💻 Tech Stack

🔗 팀 규칙 - 상세보기🔍

⚙️ 주요 기능 - 상세보기🔍

🗂️ 폴더 구조 - 상세보기🔍

📑 회의록 - 상세보기🔍