제주 여행 플랫폼, 제주완니
- Spirng boot와 React 프레임워크를 사용하여 REST API로 통신하는 웹서비스 제작
- 디자인 시스템을 준수, 심미성이 높으며 재사용이 가능한 컴포넌트로 구성된 Single Page Application방식의 웹서비스 제작
| 개발 환경 | 이용 프로그램 |
|---|---|
| 개발도구 | VS Code, Eclipse |
| DBMS | Oracle |
| Server | Tomcat |
| Language | JAVA, JavaScript(ES6), HTML5, CSS3, SCSS |
| 프레임 워크 | React, Spring Boot & Spring Security, JPA |
| UX/UI | Figma |
https://www.figma.com/file/BWmbBPJp8k0CGEclJt65jB/jejuwani_allPage?node-id=65%3A3598
액티비티, 맛집, 블로그 정보의 게시글을 메인에 카드 UI 컴포넌트로 노출하여 주목성을 높이고, 압축적으로 정보를 전달하였습니다.
또한 액티비티, 맛집, 블로그 카드 UI 컴포넌트에 유형별 변화를 주어 같은 디자인 시스템 안에서 정보의 성격에 따라 시각적인 구분을 할 수 있도록 하였습니다. 액티비티 상품의 경우, 컴포넌트의 장바구니 버튼을 통해 해당 상품을 Local Storage에 저장합니다. 회원과 비회원 모두 클릭이 가능합니다.
정보 유형 별 상태 디자인/모션
[액티비티]
[맛집]
[블로그]
[맛집]
[블로그]
지도 검색
이벤트 발생 시 함수를 실행하여 service의 kakaoMap 컴포넌트로 props를 전달하고, 검색의 결과가 true일 경우 하단부에 검색 결과를 노출하도록 하였습니다.
데이터 시각화
제주데이터허브에서 제공하는 온라인 여행 플랫폼 실 이용자의 샘플 데이터와 Recharts 라이브러리를 이용하여 인터랙티브한 데이터 시각화를 구현하여 사용자의 렌터카 선호 정보를 제공하였습니다. (데이터 출처 : https://www.jejudatahub.net/data/view/data/911)
예약 하기
액티비티 게시판의 예약하기 버튼을 통해 상세 페이지와 장바구니를 거치지 않고 빠르게 결제 페이지로 진입할 수 있습니다. 결제 정보를 입력한 뒤에는 KG이니시스 결제 모듈을 통해 액티비티 상품을 구매할 수 있습니다.