[React.js+SpringBoot] 태양광 발전량 예측 모델과 웹사이트 개발

프로젝트 소개 : 태양광 발전량 예측 모델과 웹사이트 개발 

참여인원 (총 6명)

개발기간 : 2024.01.26~2024.02.21

 

💻 필요기능

홈페이지 

- 메인 페이지  : 스크롤 다운 및 페이지에 대한 소개

 

상세 메뉴 

- 제품 소개 

• 세 종류의 태양광 패널에 대한 상세 정보 제공 및 발전수익 및 설치비용 바로 가기 버튼 제공

- 발전량 예측 조회

• 사전에 지정한 기간 동안의 전국 일별 발전량과 누적 발전량을 그래프 및 표로 제공
• 날짜 선택을 위한 캘린더 및 전국 지도에서 지역 선택 가능
• 사용자가 지정한 기간 동안의 지역별 발전량과 누적 발전량을 그래프 및 표로 제공

- 발전 수익 및 설치비용 예측 조회

• 지역, 모듈, 면적, 기간을 입력하여 발전수익을 그래프로 확인 가능
• 면적에 따른 설치 가능 개수, 설치 비용, 예상 수익, 흑자 전환 시기 제공

- FAQ 

• 사용자가 자주 묻는 질문과 답변 제공

- 문의하기 

• 사용자가 개인정보와 질문을 입력하여 개발자에게 질문을 보낼 수 있는 기능 제공

데이터 분석

• 기상 예측 모델: 지역별 미래 기상 예측 (Prophet 사용)
• 발전량 예측 모델: 지역별 기상 데이터를 활용한 지역별 발전량 예측 (XGBoost 사용)
• SMP 예측 모델: 육지와 제주 SMP 데이터를 활용한 예측 (Prophet 사용)

💚 나의 역할 :  Full - Stack 💚

- 헤더

• 메인 페이지에서는 햄버거 메뉴로, 아래 상세 페이지들 에서는 상단 고정 메뉴로 작성

 

- 발전수익 및 예측 조회 

발전 수익 계산 입력 페이지

-  발전수익 및 예측 조회  입력 페이지 

• ValueInput.js : 발전수익 입력 폼
  • 지역, 모듈선택(모델명), 면적, 기간을 입력받음 
• ValueInfo.js : 발전 수익 입력 방법 설명 
  
  • 태양광을 설치하고자 하는 이용자의 연령 등을 고려하여 입력 폼에 데이터를 입력하는 방법을 설명하고자 하는 목적을 가지고 작성함
• MapsvgPath.js :  입력폼의 지역 선택 지도 
  •  select 박스에서 옵션을 누른 위치를 가져와 지도에서 선택시에도 select 옵션 에 값이 입력되도록함
  • 위와 동일하게 select 옵션박스에서 지역명을 선택해도 지도에 위치가 표시되게 작성함

- 발전수익 및 예측 조회  결과페이지

발전수익의 결과 페이지

• ValueResult.js: 설치가능 모듈 개수, 설치 비용, 예상수익결과, 흑자 전환 시기 계산하여 결과페이지에서 제시  
  
  • 패널별로 달라지는 값 :  패널 사이즈, 패널 개당 가격, 패널의 총 W
  • 지역별로 달라지는 값 : 연도별로 구분된 지역별 설비 용량, 제주와 육지는 SMP 값이 구분됨
  • 설치 가능 모듈의 개수 계산 식
    • (사용자가 입력한 면적의 값 / 선택한 모듈의 사이즈 )
    • (inputArea / PanelSize)
  • 설치 비용의 계산식
    • (토지 가격 및 기타 전기료 등의 요인을 제외하고 순수한 모듈의 설치 비용만을 계산)
    • 설치 비용
      • (사용자가 입력한 면적의 값 / 선택한 모듈의 사이즈 ) * 선택한 모듈의 가격
      • (inputArea / PanelSize) * PanelCost
       
  • 수익 및 흑자 전환 일자 계산 식
    • 사용자가 지정한 패널의 발전량 = 예측 발전량(데이터 분석을 통해 DB 저장된 해당 일자의 발전량) * (사용자가 지정한 패널의 총 W) / 지역별 설비용량(DB에 저장된 연도별 설비용량)
    • 일자별 수익 = 특정 일자의 발전량 * 특정 일자의 SMP
    • 사용자가 입력한 기간의 수익 = 일자별 수익으로 계산되어 저장된 배열의 합 
    •  흑자 전환 일자 = 일자별 수익으로 계산되어 저장된 배열 에서 설치 비용보다 값이 커지는 행의 일자  
• ValueChart .js : 예상수익결과는 차트로 상단에 제시

- 문의하기 

문의하기 페이지

• InquiryInput : 문의하기 페이지  
• EmailJS를 사용하여 폼 데이터를 관리자 메일로 전송

emailJs 결과 화면

[관련 링크]

GitHub - yyoonjju/slsl-consulting: 2024.01.26 - 2024.02.18(24일)_KEPCO Digital Boot Camp FinalProject -팀- 태양광 발전