🗒️ 주제 : 프리미엄 차량 브랜드 제네시스의 오토커머스 서비스
🎯 목적 : 제네시스 공식 사이트 보다 빠른 국내 오토 커머스(Auto-commerce) 웹사이트 개발
👥 팀명 : Hyundai-morgans Genisisuyeon (현대모건스 제니시수연)
🗓️ 개발기간 : 7/29 ~ 10/27
🔗 실행 링크: https://genisisu.vercel.app/
🔒 테스트 계정(ID): hyundai-morgans@genisisu.com
🔑 테스트 계정(PW): 11111111
* 로그인을 하지 않아도 익명의 유저로 서비스 이용가능
| Field | SKILL |
|---|---|
| Frontend |      |
| Backend |     |
| Config |  |
| Environment |   |
| Communication |    |
제니시수 프로젝트는 국내 유일 프리미엄 자동차 브랜드 GENESIS 데이터를 기반으로 제공되는 오토커머스(auto-commerce) 웹 서비스입니다.
코로나 팬더믹 이후 Tesla, BMW를 주축으로 차량 판매 시장이 변화하고 있으며, 온라인 판매 성과도 매년 상승하고 있습니다. 테슬라코리아 판매 추이만 보더라도 국내 소비자이 점차 온라인 자동차 판매 적응해 나가는 있는 것을 보입니다. 이러한 오토커머스 시장에서 '현대자동차가 제네시스 온라인 판매를 개시한다면 이런 서비스가 될 것이다'라는 가정에서 기획하고 개발하게 되었습니다.
핵심 개발 기능으로는 자동차 구매와 다양한 옵션 선택 그리고 전시시승 신청 및 게시판 기능입니다. 현대모건스 제니시수연은 Next.js 프레임워크를 사용하여 웹 사이트의 로딩 시간을 최소화하여 사용자 경험 향상에 주력했습니다.
| 메인 | 메인_캐러셀 |
|---|---|
 |
 |
| 상품 목록 | 상품 보기 |
|---|---|
 |
 |
| 상품 상세 | 옵션 선택 |
|---|---|
 |
 |
| 결제 | 전시시승 신청 |
|---|---|
 |
 |
| 고객지원 게시판 | 공지사항 상세 |
|---|---|
 |
 |
| 로그인 | 회원가입 |
|---|---|
 |
 |
| 사이트 맵 | 에러 |
|---|---|
 |
 |
| 페이지 플로우 |
|---|
 |
와이어 프레임을 만들기 전 기초단계 수립을 위하여 개발 전 GNB 기준으로 페이지 구성을 나누어 전체 페이지 이동 환경을 구축했습니다. 한 눈에 페이지 흐름을 보기 위하여 선택한 방법입니다.
| 피그마 환경구성 |
|---|
 |
| https://weniv.link/C_rKwn |
페이지플로우, 와이어프레임, 디자인 시안작업을 위한 협업UI툴로 Figma를 선택하여 쉽고 빠르게 화면 관련 작업을 진행할 수 있도록 진행하였습니다.
-
feature / dev / main 세가지 브랜치를 이용한 Github-Flow 전략을 이용한 이슈관리를 진행했습니다. 이슈 및 PR생성시 Label 관리로 가독성을 살리게 되었고 Milestone, Project 단계로 이어지는 큰 단위의 프로젝트 관리를 진행했습니다. 각자 생성한 이슈의 번호를 가지고 와서 feature/#{이슈번호} 브랜치를 생성 후 최종적으로 upstream의 dev 브랜치와 main에 개발, 프로덕션 환경의 파일을 병합하는 협업의 방식으로 진행했습니다.
⭐ 메인 페이지
- 풀스크린 영상 호출
- 메인이벤트, 수상이벤트 표기 및 13가지 차량모델을 간단히 보여주는 캐러셀 기능
- 빠른 전시시승 신청 기능 개발
⭐ 차량 옵션 선택
- 12종 7가지 다양한 옵션으로 나만의 제니시수 차량 커스텀 차량 생성 가능
- 로컬스토리지 연동과 전역상태관리를 통한 옵션 선택 관리
⭐ 차량 결제
- Portone 결제 모듈 적용 (toss payments)
- 옵션을 선택하지 않고 바로 결제로 넘어왔을 경우 기본 Default 값 적용
- 옵션페이지의 다양한 옵션 적용 후 옵션 표기 기능
⭐ 게시판
- 전시시승, 공지사항, QnA 게시판 구현
- 전시시승 게시판으로 오프라인 매장에서의 차량 시승신청 기능
- 차량 관련 공지사항이나 관련 서비스에 대한 질문 작성 기능
- 로그인하지 않은 유저도 익명으로 게시글을 올릴 수 있는 기능
- 원하는 검색어로 게시물 검색 및 페이지네이션 구현
⭐ 로그인 및 회원가입
- Next auth를 활용한 아이디, 패스워드 기반의 credential login 구현
- SNS 로그인 구현 (구글, 현대, 네이버, 카카오)
- 로그인 및 회원가입 통합 인터렉션 모션 페이지 구현
끈질기게 도전하는 3명의 프론트엔드 개발자로 이루어진 “현대모건스 - 제니시수연”팀입니다.
모건 - 상품 목록 및 옵션 선택, 로그인 및 회원가입
수연 - 전시시승 신청, 고객지원, 공지사항 게시판
재준 - 메인 페이지, 주문 결제, 게시판 검색 및 페이지네이션, 퍼블리싱
기능 개발
-
1주차 | 메인 페이지 퍼블리싱, 메인 페이지 디자인, 기획 및 개발환경 세팅, 데이터 DB화
-
2주차 | 메인 페이지 퍼블리싱, 핵심 페이지 퍼블리싱, 데이터 DB화, 상품 목록
-
3주차 | 기술면접, 연휴, 메인 페이지 인터렉션, 결제, 주문, 전시시승 게시판, 상세 및 댓글, 게시판, 게시글 작성
-
4주차 | 404, 페이지별 스타일 통일, QnA 게시판 상세 및 댓글, 게시판, 게시글 작성, 이벤트 게시판 상세 및 댓글, 게시판, 게시글 작성, 각 페이지 최적화 작업
-
5주차 | README 작성하고 꾸미기, 발표 자료 만들기, 발표
리팩터링 1차
- 일정 계획
- 담당: 김모건, 류재준
- 일정: 9/2 (월)
- 내용: 신규 Repo 생성, dev 브랜치 생성 및 default 설정
- 주문 기능 개발
- 담당: 김모건
- 일정: 9/3 ~ 9/7 (기능2, 스타일1, 에러1)
- 내용: 외장, 선택 옵션 개발
- 결제 기능 개발
- 담당: 류재준
- 일정: 9/3 ~ 9/7 (기능4, 에러1)
- 내용: 세금(캐스퍼 참고), 배송(카카오 API), 사용자 옵션 적용, 약관동의(시간되면)
- 레이아웃 변동 없음
- 전시시승 게시판 개발
- 담당: 류재준
- 일정: 9/9 ~ 9/11 (기능2, 에러1)
- 내용: 페이지네이션 기능을 가진 Fetch 함수 구현, 게시글 검색 기능 추가, 권한별로 상세 이동 못하도록 막기 (관리자 아니면 alert 띄우기)
- 전시시승 게시글 작성 기능 개발
- 담당: 김모건
- 일정: 9/9 ~ 9/10 (기능1, 에러1)
- 내용: 게스트 작성 Fetch 함수 추가 (게스트가 디폴트, 권한 있는 사람은 기존 Fetch 함수 사용)
- 전시시승 게시글 상세, 댓글 기능 개발
- 담당: 김모건
- 일정: 9/11 ~ 9/13 (기능1, 에러1, 스타일1)
- 내용: 권한 보고 게시글과 댓글 삭제 버튼 숨기기, 댓글 이미지 오류 해결, 게시글 상세 레이아웃 수정
- PC 반응형 ( ~max-width 1300px)
- 담당: 류재준
- 일정: 9/12, 13 (스타일 1, 에러1)
- 내용: 전체 페이지 반응형
- 모바일 반응형
- 담당: 류재준
- 일정: 9/14, 19 ~ 22(스타일 4, 에러1)
- 내용: 전체 페이지 반응형
- 로그인
- 담당: 김모건
- 일정: 19, 21, 22 (기능2, 에러1)
- 내용: 로그인 기능, Google/GitHub/현대멤버스 로그인 기능, 헤더 수정
- 회원가입
- 담당: 류재준
- 일정: 23 ~ 24 (기능1, 에러1)
- 내용: 회원가입 기능
- 로그인 회원가입 스타일 통합
- 담당: 류재준
- 일정: 25 ~ 27 (스타일 3)
- 내용: 로그인 회원가입 통합 인터랙션 UI, 반응형 적용
리팩터링 2차
- 결제페이지 모바일에서 결제진행 불가 수정
- 담당 : 류재준
- 일정 : 10/7 ~ 10/9
- 반응형 추가 작업
- 담당 : 김모건
- 일정 : 10/7 ~ 10/10
- 내용 :
- 결제 완료 페이지
- 옵션 페이지
- 모바일 Side GNB 기능 구현
- 담당 : 류재준
- 일정 : 10/9 ~ 10/13
- 옵션 페이지 새로고침 에러
- 담당 : 김모건
- 일정 : 10/10 ~ 10/11
- 내용 : useLocalStorage 리팩터링
- 익명 게시글 작성 기능
- 담당 : 김모건
- 일정 : 10/12
- 내용 : 추후 게시판 진입이나 글작성 버튼 클릭 시에 모달 창 필요
- SNS 로그인 기능 추가
- 담당 : 김모건- 일정 : 10/13 ~ 10/16
- 내용 :
- 네이버/현대/카카오 로그인
- 회원가입 기능 확인
- 기본 회원가입 기능 개발 및 개선
- 담당 : 김모건- 일정 : 10/17
- 내용 :
- 아이디 중복 검사 (경고 문구)
- 회원가입 validation
- 헤더 개선
- 담당 : 류재준
- 일정 : 10/14
- 내용 :
- 브라우저에서 현재 페이지 표기
- 모바일 GNB 투명색 bg로 나타나는 이슈
- 모바일 GNB 입력시 숨기기
- 360도 이미지 작업 (생성, 36장으로 통일)
- 담당 : 류재준
- 일정 : 10/15 ~ 10/17
- 내용 :
- 이미지 줄이기
- 이미지 추가 작업
- 최적화 처리
- 이미지 순서 변경
- 모델 목록 페이지 개선
- 담당 : 류재준
- 일정 : 10/18 ~ 10/19
- 내용 :
- figure 태그 추가 (렌더링 시 흔들림 방지)
- UI 스타일 변경 (인터렉션 추가)
- 검색 기능 추가
- Top 버튼 만들기
- 담당 : 김모건
- 일정 : 10/18
- 내용 :
- 흰색 바탕으로 부터 전까지 sticky 처리
- 메인, 모델 상세, 결제는 필수
- 모바일 버전 (반응형) 작업
- 로그인 회원가입 통합 UI 개선
- 담당 : 류재준
- 일정 : 10/20 ~ 10/21
- 메인 페이지 개선
- 담당 : 류재준
- 일정 : 10/22 ~ 10/24
- 내용 :
- (event 1) 영상 progress bar 구현
- (event 3, 4) db에 이벤트, 수상 데이터 추가
- (event 3, 4) 메인 페이지 코드 개선
- 하드코딩 없애기
- 담당 : 김모건
- 일정 : 10/19
- 내용 :
- zustant 업데이트 기능 추가
- 정적 페이지 fetch로 목록 뽑기
- 고기 회식
- 일정 : 10/27