[Spring Boot, react] 전기차 충전소 관련 페이지 제작 프로젝트 2

 

 

프로그래밍 세계를 탐구합시다.

 

 

 

 

 

전기차 충전소 관련 페이지 제작 프로젝트를 수행했습니다.

 

SpringBoot, react 활용하여 페이지를 구성하였습니다.

 

 

 

페이지 유입을 증가시키기 위해 게임, 구독 서비스, 뉴스, 유튜브 등 여러 콘텐츠를 추가하였습니다.

사용자에게 장기적인 이득과 편의성을 제공하기 위한 페이지를 만들었습니다.

게임을 통해 얻은 찌리릿 쿠폰으로는 전기차 충전 쿠폰을 교환할 수 있고, 구독 서비스를 신청하면 커피, 편의점 등 쿠폰을 받을 수 있습니다.

뉴스, 유튜브 페이지에서는 전기차 관련 뉴스와 영상을 확인할 수 있습니다.

 

 

 

[페이지 기능]

 

 

1. 회원가입/ 회원정보수정/ 회원탈퇴/ 비밀번호 변경

 

 

 

회원가입

 

 

회원정보수정 / 회원탈퇴

 

 

비밀번호 변경

 

 

 

[회원가입]

- 이용약관 필수사항 동의, 아이디 중복확인, 이메일 인증을 완료해야 회원가입 버튼이 활성화 됩니다.

- 유효성 검사를 통해 한글, 영어를 입력해야 이름을 입력할 수 있습니다.

- 비밀번호 조건(영어, 숫자)를 충족해야 가입할 수 있습니다.

 

데이터 저장은 h2 database 이용했습니다.

 

 

 

상세한 설명과 코드는 아래 게시글 참고 바랍니다.

 

2023.11.01 - [IT/Java - Spring Boot] - [Spring Boot] 회원가입/ 회원정보수정/ 회원탈퇴/ 비밀번호 변경

[Spring Boot] 회원가입/ 회원정보수정/ 회원탈퇴/ 비밀번호 변경

 

 

 

 

2. 충전소 찾기

 

 

 

충전소 찾기로 들어오면 왼쪽 사이드바를 이용하여 지정한 반경 이내의 전기차 충전소 위치를 확인할 수 있고,  전기차 카테고리별로 항목을 선택하여 전기차 위치를 볼 수 있습니다.

 

카테고리는 지역구, 운영기관, 충전기타입, 시설구분이 있으며 카테고리 별로 지도에 나타나는 핀 이미지가 다르므로 동시에 여러 정보를 식별할 수 있습니다.

 

 

 

상세한 설명과 코드는 아래 게시글 참고 바랍니다.

 

 

2023.11.01 - [IT/Java - Spring Boot] - [Spring Boot] 카카오 지도 api 활용하여 지도 출력하기

[Spring Boot] 카카오 지도 api 활용하여 지도 출력하기

 

 

 

 

3. 게시판

 

 

 

 

게시판은 공지사항, Q&A 항목이 있으며 글쓰기, 이미지 첨부, 글의 수정 삭제가 가능합니다. Q&A에는 일반 글쓰기, 충전소 추가요청, Car정보 추가요청이 있어 해당 항목을 따로 관리할 수 있습니다.

 

 

상세한 설명과 코드는 아래 게시글 참고 바랍니다.

 

2023.11.01 - [IT/Java - Spring Boot] - [Spring Boot] 게시판 만들기

[Spring Boot] 게시판 만들기

 

 

4. 정보마당

 

 

 

 

 

정보마당에는 통계정보와 충전기 서비스 안내가 있습니다. 통계정보에는 전기차 현황과 충전기 현황을 볼 수 있도록 나누어 놓았으며, 서비스 안내에는 충전요금, 전기차 충전방식을 볼 수 있도록 나누어 놓았습니다.

 

 

 

5. 미디어

 

(1)  전기차 뉴스

 

 

 

네이버 뉴스 API를 이용해 전기차 관련 keyword 뉴스를 불러와 페이지에 출력하였습니다.

네이버 뉴스 링크, 원문 링크로 이동 가능합니다.

 

 

 

상세한 설명과 코드는 아래 게시글 참고 바랍니다.

 

2023.10.28 - [IT/Java - Spring Boot] - [Spring Boot] 네이버 뉴스 API 활용해서 특정 키워드 뉴스 페이지에 출력하기

[Spring Boot] 네이버 뉴스 API 활용해서 특정 키워드 뉴스 페이지에 출력하기

 

 

 

 

(2) 전기차 영상

 

 

 

유튜브 API를 이용해 전기차 관련 영상을 출력하였습니다. 카테고리를 전기차와 친환경으로 나누어 항목에 따라 다른 영상을 볼 수 있게 하였습니다.

 

 

 

상세한 설명과 코드는 아래 게시글 참고 바랍니다.

 

2023.11.01 - [IT/Java - Spring Boot] - [Spring Boot] 유튜브 API 활용해서 특정 키워드 영상 페이지에 출력하기

[Spring Boot] 유튜브 API 활용해서 특정 키워드 영상 페이지에 출력하기

 

 

(3) 전기차 주행거리

 

 

 

해당 페이지의 프론트는 react로 구성하였습니다. 데이터는 springboot를 활용하여 가져왔습니다.

전기차에 따른 주행거리를 알 수 있으며, 차량을 검색하고 클릭하여 상단에 저장할 수 있습니다.

 

 

 

상세한 설명과 코드는 아래 게시글 참고 바랍니다.

 

 

2023.11.01 - [IT/react] - [react, Spring Boot] Spring Boot 데이터 react에 가져오기

[react, Spring Boot] Spring Boot 데이터 react에 가져오기

 

 

 

2023.10.27 - [IT/react] - React-Player를 활용하여 YouTube 영상을 페이지 배경으로 설정하기

React-Player를 활용하여 YouTube 영상을 페이지 배경으로 설정하기

 

2023.10.27 - [IT/react] - Lottie 활용하여 react에서 로딩 화면 구성하기

Lottie 활용하여 react에서 로딩 화면 구성하기

 

 

 

 

 

(4) 전기차 게임

 

 

 

<게임 시작 전 안내 화면>

 

 

 

<게임 실행 화면>

 

 

 

전기차 게임 페이지로 들어가면 왼쪽에 게임 관련 설명이 있습니다. 오른족 미니 게임에서 키보드로 자동차를 움직여 충전소로 가면 본 게임이 시작됩니다. 만약 자동차가 지도의 가장자리에 닿으면 다음 지도로 전환하도록 구현하였습니다. 본 게임은 장애물을 피해 목적지인 주유소에 도착하면 찌리릿 코인을 지급합니다. 찌리릿 코인은 하루 1개만 받을 수 있습니다.

받은 찌리릿 코인은 전기차 충전 쿠폰 및 커피 쿠폰과 교환할 수 있습니다.

 

 

 

 

(5) 멤버십

 

 

 

 

1. 코인 교환

 

<코인 교환 페이지>

 

 

<코인 교환 모달>

 

 

 

게임에서 얻은 코인을 쿠폰으로 교환할 수 있습니다. 코인 10개당 1개의 무료 충전 쿠폰으로 교환되며 교환 성공 시 교환 성공 모달 창이 뜨고, 코인이 부족해 교환이 실패하면 코인이 부족하다는 모달 창이 뜨게 됩니다.

 

 

 

 

 

2. 쿠폰함

 

 

<쿠폰 선택>

 

 

<쿠폰함>

 

 

 

피카충전소 페이지에서 얻은 쿠폰을 한 번에 볼 수 있는 페이지입니다. 사용기간이 나와 있으며 사용하기 버튼을 눌러 사용할 수 있습니다. 버튼을 누르면 쿠폰 사용하기 모달 창이 뜨는데 해당 모달에서 직원확인 버튼을 누르면 해당 쿠폰은 사라지게 됩니다.

 

 

 

 

 

(6) 전기차 구독 서비스 (PIKAPASS)

 

<상품 페이지>

 

 

<상세 페이지>

 

 

<가입 페이지>

 

 

 

<구독 마이페이지>

 

 

 

 

피카PASS 라는 멤버십에 가입할 수 있도록 멤버십 혜택 보기와 가입하기를 구현하였습니다. 그리고 멤버십에 가입한다면 로그인 했을 시 마이멤버십이라는 항목이 생깁니다. 이 곳에서 멤버십 종료 날짜, 충전소 근처 편의점, 카페, 음식점의 위치, 해당 매장의 쿠폰을 받을 수 있습니다.

 

 

 

(7) Admin 페이지

 

 

<관리자 페이지>

 

 

회원가입 시 관리자는 관리자 계정으로 회원가입을 할 수 있습니다. 관리자로 로그인하면 사이드바에 Admin이라는 항목이 나타납니다. 해당 페이지에서 user수, 구독자 수, 고객문의 수 등을 알 수 있습니다. 또한 user의 charging Q&A, Car Q&A, Coupon을 한 페이지에서 볼 수 있어 관리하기 편리합니다.