🍰 Team2-TiramisuCake-FE

🚙 The new IONIQ 5 이벤트 페이지 🚙

🔗 배포 URL

https://softeer.site

https://d3qmq1ffhp5il9.cloudfront.net

🚀 프로젝트 인원 및 기간

• 개발 인원: FE 2명 & BE 2명
• 프로젝트 기간: 2024.07.29 ~ 2024.08.26
  

👤 팀원

김지민	박지현	손찬혁	이석민

💡 기능 소개

서비스

1. 메인 페이지

메인 페이지는 크게 랜딩 섹션, 이벤트 섹션, 그리고 자동차 소개 섹션으로 구성되어 있습니다.
사용자가 부드럽게 섹션 간 이동할 수 있도록 스냅 기능을 적용했으며, 페이지 상단의 헤더를 통해 원하는 섹션으로 바로 이동할 수 있습니다.
랜딩 섹션, 이벤트 소개 섹션, 선착순 이벤트 소개 섹션, 추첨 이벤트 소개 섹션, 마지막으로 차량 상세 정보 섹션이 있습니다.
각 이벤트 섹션에서 이벤트 관련 정보를 확인할 수 있고,
이벤트 참여에 필요한 아이오닉 5의 차량 정보는 동영상과 간단한 소개가 있는 이미지 캐러셀에서 확인할 수 있습니다.

2. 선착순 이벤트

선착순 페이지에서 제시된 문제의 빈칸에 적절한 단어들을 드래그하여 문제를 해결할 수 있습니다.
모든 빈칸을 올바르게 채우면 자동으로 선착순 이벤트에 응모되며,
지정된 선착순 인원 안에 들면 더 뉴 아이오닉 5 24시간 렌트 이용권과 신차 할인 코드를 받을 수 있는 QR 코드를 획득할 수 있습니다.

3. 추첨 이벤트

복권 이벤트에서는 캔버스를 긁어 결과를 확인할 수 있으며, 만약 세 개의 다이아 이미지가 같은 방향으로 나오면 당첨된 것입니다.
페이지 상단에서는 사용자 공유 URL을 통해 초대한 친구 수와 남은 복권 기회를 확인할 수 있으며,
하단에서는 연속 출석 일수를 확인할 수 있습니다. 7일 연속 출석하면 상품을 받을 수 있습니다.

4. 기대평 페이지

5가지 기대평 버튼을 클릭하여 해당하는 기대평을 등록할 수 있습니다.
기대평은 커서 기반 무한 스크롤 방식으로 구현되어, 사용자가 스크롤을 올리면 이전 기대평을 계속해서 확인할 수 있습니다.

5. 공유 URL

공유 url 버튼을 클릭하면 사용자가 공유할 사이트의 url이 클립보드로 복사됩니다.
만약 사용자가 로그인이 되어 있는 상태라면, 본인 고유의 코드가 저장된 url을 받게되고
로그인이 되어 있지 않은 상태라면 단순한 이벤트 페이지 url을 받게 됩니다.

어드민

1. 로그인 페이지

어드민에 접근 가능한 사용자만 로그인이 가능합니다.

1. 메인 페이지

로그인 후에만 진입할 수 있습니다.
이벤트 관리 섹션과 당첨 관리 섹션으로 나누어져 있고
각 섹션에서 수정 버튼을 누르면 각 섹션의 관리 페이지로 이동할 수 있습니다.

2. 이벤트 관리 페이지

이벤트 관리 페이지에서 수정하기 버튼을 통해 선착순 이벤트와 추첨 이벤트의 날짜 및 시간을 설정할 수 있습니다.

3. 당첨 관리 페이지

이벤트 당첨 관리 페이지에서는 선착순 및 추첨 당첨 인원 수를 수정할 수 있습니다. 또한, 각 이벤트의 당첨자 목록을 확인할 수 있습니다.

4. 이벤트 지표 페이지

이벤트 기간 동안 날짜별 메인 페이지 접속 횟수를 막대그래프로 확인할 수 있으며, 선착순 및 추첨 이벤트의 참여율을 원그래프 형태로 확인할 수 있습니다.

⚒️ 기술 스택

DEVELOPMENT ENVIRONMENT

SKILL & UI

HOSTING & CDN

SERVER & CLIENT STATE MANAGEMENT

SCROLL & ANIMATION

🙌 팀 규칙