📌
Eventrix는 다양한 컨퍼런스 및 이벤트 티켓을 예약할 수 있는 온라인 플랫폼입니다.
배포 URL: https://eventrix.vercel.app/
GitBook URL: https://eventrix-1.gitbook.io/docs/
개발 기간: 2024.04 ~ 2024.05 (4주)
💻 테스트 계정
[주최자]
ID: organizer@email.com
PW: abcd1234!
[참여자]
ID: buyer@email.com
PW: abcd1234!
- Node.js ^20.12.7
- Npm ^10.5.0
$ git clone https://github.com/soprue/eventrix.git
$ cd eventrix
$ npm install
$ npm run dev
- 필터링: 사용자는 카테고리, 가격 필터를 적용하여 원하는 이벤트를 쉽게 찾을 수 있습니다.
- 정렬 옵션: 사용자는 최신순 또는 인기순으로 이벤트를 정렬할 수 있습니다.
- 상세 정보 제공: 각 이벤트 페이지에서는 장소, 시간 등 상세 정보를 제공합니다.
- 참여하기와 찜하기:
참여자는 상세 페이지를 통해 참여 신청을 하거나 찜하기 기능을 이용할 수 있습니다.
- 간편한 예약 프로세스: 사용자는 티켓을 선택하고, 몇 단계의 간단한 절차를 통해 티켓을 예약하고 결제할 수 있습니다.
- 다양한 결제 옵션: 결제 과정은 여러 결제 방법을 지원하여 사용자가 편리하게 결제할 수 있도록 설계되었습니다.
- 장바구니에 추가: 사용자는 관심 있는 이벤트의 티켓을 장바구니에 추가할 수 있습니다. 이를 통해 여러 이벤트의 티켓을 한 곳에서 모아보고, 필요에 따라 한 번에 결제할 수 있습니다.
- 로컬 스토리지 활용: 장바구니에 담긴 티켓 정보는 로컬 스토리지에 저장됩니다. 이를 통해 사용자가 브라우저를 닫았다가 다시 열어도 이전에 추가한 티켓 정보가 유지됩니다.
- 티켓 상태 확인 및 관리: 참여자는 자신이 구매한 티켓의 상태를 확인할 수 있고, 필요한 경우 취소할 수 있습니다.
- 이벤트 관리: 주최자는 이벤트를 등록, 수정, 삭제할 수 있으며, 테이블을 통해 자신의 이벤트를 한눈에 볼 수 있습니다. 상태별로 필터링하여 볼 수도 있습니다.
- 주문 상태 관리: 주최자는 모든 티켓 판매 상태를 확인하고, 주문 상태를 업데이트할 수 있는 테이블을 사용할 수 있습니다.
- React DevTools 프로파일러를 활용하여 컴포넌트 렌더링 성능 개선하기
- Vite 환경에서 Bundle Analyzer로 빌드 최적화하기
- 빌드 시간 11.66초 -> 6.15초, 47% 개선
- Lighthouse를 기반으로 LCP 성능 개선하기
- LCP 3.0초 -> 1.1초, 63.33% 감소
- 성능 점수 75점 -> 92점, 22.67% 증가
📦eventrix
┣ 📂__test__
┣ 📂cypress
┣ 📂public
┣ 📂src
┃ ┣ 📂assets
┃ ┣ 📂components
┃ ┃ ┣ 📂auth
┃ ┃ ┣ 📂cart
┃ ┃ ┣ 📂event
┃ ┃ ┣ 📂layout
┃ ┃ ┣ 📂main
┃ ┃ ┣ 📂mypage
┃ ┃ ┣ 📂payment
┃ ┃ ┣ 📂register
┃ ┃ ┣ 📂shared
┃ ┣ 📂constants
┃ ┣ 📂hooks
┃ ┣ 📂pages
┃ ┣ 📂services
┃ ┣ 📂store
┃ ┣ 📂types
┗ ┗ 📂utils
__test__: 단위 테스트 파일을 포함합니다.cypress: E2E 테스트 파일을 포함합니다.src/services: 백엔드와의 통신을 처리하는 서비스 로직이 위치합니다.src/store: 상태 관리 로직이 포함된 폴더입니다.