최종본 병합

backend/src/main/java/com/kaspi/backend/controller/UserGasRecordController.java

@@ -14,10 +14,13 @@
 import com.kaspi.backend.service.UserRecordService;
 import com.kaspi.backend.util.response.CommonResponseDto;
 import com.kaspi.backend.util.response.code.DefaultCode;
+import com.kaspi.backend.util.response.code.ErrorCode;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
+import org.springframework.validation.BindingResult;
+import org.springframework.validation.annotation.Validated;
 import org.springframework.web.bind.annotation.*;
 
 import java.util.ArrayList;
@@ -37,12 +40,15 @@ public class UserGasRecordController {
 
     @PostMapping("/user/gas-record")
     public ResponseEntity<CommonResponseDto> postUserGasRecord(@RequestBody UserGasRecordReqDto userGasRecordReqDto) {
-
+//        if (bindingResult.hasErrors()) {
+//            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+//                    .body(CommonResponseDto.toResponse(ErrorCode.PARAMETER_ERROR));
+//        }
         //주유소 객체 얻기
         GasStation gasStation = gasStationService.getGasStationByNo(userGasRecordReqDto.getGasStationNo());
 
         //유저의 주유량
-        Long userGasAmount = userRecordService.calTodayUserGasAmount(userGasRecordReqDto, gasStation);
+        double userGasAmount = userRecordService.calTodayUserGasAmount(userGasRecordReqDto, gasStation);
 
         //전국 유가 평균 받기
         Long nationalAvgOilPrice = opinetService.nationalAvgOilPrice(userGasRecordReqDto.getGasType());
@@ -57,7 +63,7 @@ public ResponseEntity<CommonResponseDto> postUserGasRecord(@RequestBody UserGasR
         //유저 최종 저장
         userRecordService.saveUserGasRecord(userGasRecordReqDto,
                 gasStation,
-                userGasAmount,
+                (long) userGasAmount,
                 usersSavingPrice);
 
         return ResponseEntity.status(HttpStatus.CREATED)

backend/src/main/java/com/kaspi/backend/dto/UserGasRecordReqDto.java

@@ -3,6 +3,7 @@
 import com.kaspi.backend.enums.GasType;
 import lombok.Builder;
 import lombok.Getter;
+import org.checkerframework.checker.index.qual.Positive;
 
 import java.util.Date;
 
@@ -11,6 +12,7 @@
 public class UserGasRecordReqDto {
 
     private GasType gasType;
+    @Positive
     private Long refuelingPrice;
     private Long gasStationNo;
 }

backend/src/main/java/com/kaspi/backend/service/UserRecordService.java

@@ -38,21 +38,28 @@ public class UserRecordService {
     /**
      * 사용자로 부터 받은 주유금액, 유종과 주유소 정보로 얼마만큼 넣었는지 계산하는 로직
      */
-    public Long calTodayUserGasAmount(UserGasRecordReqDto userGasRecordReqDto, GasStation gasStation) {
+    public double calTodayUserGasAmount(UserGasRecordReqDto userGasRecordReqDto, GasStation gasStation) {
         Optional<Long> todayGasPrice = gasDetailDao.findTodayGasPrice(gasStation.getStationNo(),
                 userGasRecordReqDto.getGasType().name(),
                 GasDetail.getNowDateToStr());//오늘 날짜로 계산
+        validTodayGasPrice(userGasRecordReqDto, gasStation, todayGasPrice);
+        double userGasAmount = (double)userGasRecordReqDto.getRefuelingPrice() / todayGasPrice.get();
+        log.info("사용자가 주유한 가스타입:{}, 주유량:{}, 오늘 해당 주유소 가격:{}", userGasRecordReqDto.getGasType().name(), userGasAmount,todayGasPrice.get());
+        return userGasAmount;
+    }
+
+    private static void validTodayGasPrice(UserGasRecordReqDto userGasRecordReqDto, GasStation gasStation, Optional<Long> todayGasPrice) {
         if (todayGasPrice.isEmpty() || todayGasPrice.get() == 0) {
             log.error("DB에 오늘날짜에 해당되는 주유 가격 정보가 존재하지 않음 가스타입:{}, 주유소PK:{}", userGasRecordReqDto.getGasType().name(), gasStation.getStationNo());
             throw new SqlNotFoundException(ErrorCode.SQL_NOT_FOUND);
         }
-        Long userGasAmount = (long) Math.round(userGasRecordReqDto.getRefuelingPrice() / todayGasPrice.get());
-        log.info("사용자가 주유한 가스타입:{}, 주유량:{}", userGasRecordReqDto.getGasType().name(), userGasAmount);
-        return userGasAmount;
     }
 
-    public Long calUserSavingAmount(Long userRefuelingPrice, Long userGasAmount, Long nationalAvgOilPrice) {
-        return nationalAvgOilPrice * userGasAmount-userRefuelingPrice;
+    public Long calUserSavingAmount(Long userRefuelingPrice, double userGasAmount, Long nationalAvgOilPrice) {
+
+        long savingPrice = (long) (nationalAvgOilPrice * userGasAmount - userRefuelingPrice);
+        log.info("절약금액: {}", savingPrice);
+        return savingPrice;
     }
 
 

backend/src/test/java/com/kaspi/backend/controller/UserGasRecordControllerTest.java

@@ -77,7 +77,7 @@ void postUserGasRecord() throws Exception {
 
         when(gasStationService.getGasStationByNo(userGasRecordReqDto.getGasStationNo())).thenReturn(gasStation);
         when(userRecordService.calTodayUserGasAmount(userGasRecordReqDto, gasStation))
-                .thenReturn(userGasAmount);// 유저가 총 넣은 가스 리터 수
+                .thenReturn(Double.valueOf(userGasAmount));// 유저가 총 넣은 가스 리터 수
         when(opinetService.nationalAvgOilPrice(userGasRecordReqDto.getGasType())).thenReturn(
                 nationalGasAvg);//전국 리터당 평균 가격
         when(userRecordService.calUserSavingAmount(userGasRecordReqDto.getRefuelingPrice(),

backend/src/test/java/com/kaspi/backend/service/UserRecordServiceTest.java

@@ -73,7 +73,7 @@ void calTodayUserGasAmount() {
                 GasDetail.getNowDateToStr())) // 항상 오늘날짜로 기준
                 .thenReturn(Optional.of(gasolinePerLiterPrice));//가솔린 1L당 1000원
         //when
-        Long userGasAmount = userRecordService.calTodayUserGasAmount(userGasRecordReqDto, gasStation);
+        double userGasAmount = userRecordService.calTodayUserGasAmount(userGasRecordReqDto, gasStation);
         //then
         assertEquals(5L, userGasAmount);
     }

frontEnd/public/js/mapView/DetailTab.js

@@ -1,5 +1,6 @@
 let DetailTabDisplay = false;
 let SideBarDisplay = true;
+
 function ShowDetailTab(){
     const GSTDetailTab = document.getElementsByClassName("main__GSTDetailTab");
     GSTDetailTab[0].style.marginLeft = "0vw";
@@ -9,7 +10,14 @@ function ShowDetailTab(){
 }
 
 function appendNewChart(){
-    document.getElementById('myChart').remove();
+    if(document.getElementById('myChart')){
+        document.getElementById('myChart').remove();
+    }
+    if(document.getElementById('nocharterr')){
+        document.getElementById('nocharterr').remove();
+    }
+    // const ChartArea = document.getElementsByClassName('main__GSTdetail__Contents__Chart');
+    // ChartArea[0].innerHTML = "";
     const newChart = document.createElement('canvas');
     newChart.id= 'myChart'; 
 
@@ -39,7 +47,8 @@ function ShowSideBar(){
 
     SideBar[0].style.marginLeft = "0vw";
     SideBarDisplay = true;
-    HideSideBarButton.innerHTML = "<img src='img/🦆 icon _chevron left_.svg'>";
+    console.log('보인다');
+    HideSideBarButton[0].innerHTML = "<img src='./public/img/🦆 icon _chevron left_.svg'>";
 }
 
 function HideSideBar(){
@@ -49,11 +58,11 @@ function HideSideBar(){
         SideBar[0].style.marginLeft = "-44vw";
     }
     else {
+        console.log('안보인다');
         SideBar[0].style.marginLeft = "-22vw";
     }
     SideBarDisplay = false;
-    HideSideBarButton.innerHTML = "<img src='img/🦆 icon _chevron right_.svg'>";
-
+    HideSideBarButton[0].innerHTML = "<img src='./public/img/🦆 icon _chevron right_.svg'>";
 }
 
 export {ShowDetailTab, appendNewChart, closeDetailTab, DetailTabDisplay, MoveSideBar, ShowSideBar, HideSideBar, SideBarDisplay}

frontEnd/public/js/mapView/HelperFunction.js

@@ -109,9 +109,9 @@ function ShowResult(ResultArray, positionBounds){
     const resultArea = document.querySelector(".main__SearchResult");
     resultArea.innerHTML = "";
     for(var k in ResultArray){
-        if(ResultArray[k].hhPrice==0 && ResultArray[k].ggPrice==0 && ResultArray[k].llPrice==0){
-            continue;
-        }
+        // if(ResultArray[k].hhPrice==0 && ResultArray[k].ggPrice==0 && ResultArray[k].llPrice==0){
+        //     continue;
+        // }
 
         ResultHtml += SelectStIdLogo(ResultArray[k].stId, ResultArray[k].name, ResultArray[k].radius);
 
@@ -367,30 +367,7 @@ function addmouseOverEventtoMarker() {
 }
 
 function addClickEventToMarker(ResultArray){
-    // if(searchOption==0){
-    //     const HGmapmarkerarr = document.getElementsByClassName('img_HG');
-    //     const LPGmapmarkerarr = document.getElementsByClassName('img_LPG');
-    //     for(var k=0;k<HGmapmarkerarr.length;k++){
-    //         HGmapmarkerarr[k].addEventListener('click', (e) => ShowGSTDetailByMarker(e, ResultArray));
-    //     }
-    //     for(var k=0;k<LPGmapmarkerarr.length;k++){
-    //         LPGmapmarkerarr[k].addEventListener('click', (e) => ShowGSTDetailByMarker(e, ResultArray));
-    //     }
-    // }
-    // else if(searchOption==1 || searchOption ==2){
-    //     const HnGmapmarkerarr = document.getElementsByClassName('img_HnG');
-    //     for(var k=0;k<HnGmapmarkerarr.length;k++){
-    //         HnGmapmarkerarr[k].addEventListener('click', (e) => ShowGSTDetailByMarker(e, ResultArray));
-    //     }
-    // }
-    // else if(searchOption==3){
-    //     const LPGmapmarkerarr = document.getElementsByClassName('img_LPG');
-    //     for(var k=0;k<LPGmapmarkerarr.length;k++){
-    //         LPGmapmarkerarr[k].addEventListener('click', (e) => ShowGSTDetailByMarker(e, ResultArray));
-    //     }
-    // }
     const mArray = document.getElementsByClassName('tmarker');
-    console.log(mArray);
     for(var k=0;k<mArray.length;k++){
         mArray[k].addEventListener('click', (e) => {
             e.preventDefault();
@@ -461,6 +438,10 @@ function MoveToinitialPoint(){
     const resultArea = document.querySelector(".main__SearchResult");
     resultArea.innerHTML = "";
 
+    if(DetailTabDisplay){
+        closeDetailTab();
+    }
+
     SetMarkerofMapCenter();
 }
 

frontEnd/public/js/mapView/chart.js

@@ -13,7 +13,13 @@ function getChartData(Resultelem){
             withCredentials: true
         },
         success:function(response) {
-            ShowChart(response);
+            console.log(response);
+            if(Resultelem.hhPrice ==0 && Resultelem.ggPrice ==0 && Resultelem.llPrice ==0){
+                ShowErrorMessageAtChartArea();
+            }
+            else {
+                ShowChart(response);
+            }
         },
         error:function(request, error){
             ShowErrorMessageAtChartArea();
@@ -51,8 +57,9 @@ function ShowChart(response){
         else Preflag=1;
     }
 
-    if(GasolineData.length == 0){
-        for(var k =0;k<PriceInformation.length;k++){
+    console.log(PriceInformation.length/30);
+    if(LPGData.length != 0){
+        for(var k =0;k<PriceInformation.length;k+=parseInt(PriceInformation.length/30)){
             dateLabels.push(PriceInformation[k].date.slice(-2));
         }
         data = {
@@ -143,8 +150,15 @@ function ShowChart(response){
 
 
 function ShowErrorMessageAtChartArea(){
-    document.getElementById('myChart').remove();
+    if(document.getElementById('myChart')){
+        document.getElementById('myChart').remove();
+    }
+    if(document.getElementById('nocharterr')){
+        document.getElementById('nocharterr').remove();
+    }
     const ChartArea = document.getElementsByClassName('main__GSTdetail__Contents__Chart');
+    // ChartArea[0].innerHTML = "";
+
     const errorMessage = document.createElement('span');
     errorMessage.id = 'nocharterr';
     errorMessage.innerHTML = '현재 데이터를 준비중입니다.';

frontEnd/public/js/mapView/marker.js

@@ -31,8 +31,8 @@ function SetMarkerofMapCenter(){
 function SetHGmarker(markerPosition, Resultelem){
     marker = new Tmapv3.Marker({
         position : markerPosition,
-        iconHTML: `<div class='Map_Marker_HG' id='${Resultelem.name}'><div class='tmarker'><img class='img_HG'><span id="H">${Resultelem.hhPrice}</span>
-                    <span id='G'>${Resultelem.ggPrice}</span></div></div>`,
+        iconHTML: `<div class='Map_Marker_HG' id='${Resultelem.name}'><div class='tmarker'><img class='img_HG'><span id="H">${Resultelem.hhPrice == 0 ? '-' : Resultelem.hhPrice}</span>
+                    <span id='G'>${Resultelem.ggPrice == 0 ? '-' : Resultelem.ggPrice}</span></div></div>`,
         iconSize : Tmapv3.Size(10, 20),
         map:map
     });
@@ -62,7 +62,7 @@ function SetGmarker(markerPosition, Resultelem){
 function SetLPGmarker(markerPosition, Resultelem){
     marker = new Tmapv3.Marker({
         position : markerPosition,
-        iconHTML: `<div class='Map_Marker_LPG' id='${Resultelem.name}'><div class='tmarker'><img class='img_LPG'><span id="LL">${Resultelem.llPrice}</span></div></div>`,
+        iconHTML: `<div class='Map_Marker_LPG' id='${Resultelem.name}'><div class='tmarker'><img class='img_LPG'><span id="LL">${Resultelem.llPrice == 0 ? '-' : Resultelem.llPrice}</span></div></div>`,
         iconSize : Tmapv3.Size(10, 20),
         map:map
     });

frontEnd/public/js/mapView/template.js

@@ -59,9 +59,6 @@ const getMapContentTemplate = () => `
                                     <button id="sort_GG">경유</button>
                                     <button id="sort_LL">LPG</button>
                                 </div>
-                                <!-- <div class="main__CurrentLocation">
-                                    <span>현재위치</span>
-                                </div> -->
                                 <div class="main__CurrentLocationAddress">
                                     현재 위치를 계산 중입니다....
                                 </div>
@@ -78,7 +75,6 @@ const getMapContentTemplate = () => `
                         </button>
                         <div class="main__GSTdetail">
                             <div class="main__GSTdetail__Title">
-                                <!-- <img class="main__GSTdetail__Title_LOGO" src="img/GasStation_Image/hyundai.png"> -->
                                 <span id="GSTdetail__Name"></span>                          
                             </div>
                             <div class="main__GSTdetail__Contents">

frontEnd/public/js/myPage/chart/view.js

@@ -4,8 +4,8 @@ import { fetchChart } from "./fetch.js";
 import { makeChart } from "./helperFunction.js";
 import { getChartTemplate } from "./template.js";
 
-let userOilArray = [100_000, 220_000, 300_000, 290_000, 100_000, 80_000, 85_000, 80_000, 70_000, 105_000];
-let commonOilArray = [150_000, 120_000, 280_000, 190_000, 130_000, 90_000, 89_000, 73_000, 86_000, 90_000];
+let userOilArray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+let commonOilArray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
 let monthArray = [];
 
 const chartView = async () => {

frontEnd/public/js/myPage/comparison/helperFunction.js

@@ -125,7 +125,7 @@ const makeComparisonCards = ($container, userOilPrice, averageEcoPrice, userSave
     makeCommonSaveCard($commonSaveCard, age, gender, averageEcoPrice);
     makeChartCard($chartBox, userSavePrice, averageEcoPrice, userID, age, gender);
     setImageByName($compareImage, getImageName(Math.abs(userSavePrice)));
-
+    
     if(userSavePrice < 0) {
         const $banImage = _$(".oilInfoArea__ban", $container);
         changeCSS($banImage, "display", "block");

frontEnd/public/js/myPage/history/template.js

@@ -19,7 +19,7 @@ const getHistoryTemplate = () => `
             <div class="oilInfoArea__contentArea">
                 <div class="oilInfoArea__oilHistoryContainer">
                     <div class="oilInfoArea__oilHistorytitle">
-                        <h2>이번 달 주유 기록</h2>
+                        <h2>주유 기록</h2>
                     </div>
                     <div class="oilInfoArea__oilHistoryTable">
                         <div>
@@ -36,7 +36,7 @@ const getHistoryRowTemplate = (date, imgSrc, gasStationName, gasType, gasAmount,
         <span>${date}</span>
         <span><img src="${imgSrc}" alt="주유소 브랜드 이미지"></span>
         <span>${gasStationName}</span>
-        <span>${gasType} ${gasAmount}</span>
+        <span>${gasType}<br>약 ${gasAmount}</span>
         <span>${spendPrice}</span>
         <span>${savePrice}</span>
     </div>

frontEnd/public/js/myPage/inputOilInfo/event.js

@@ -1,6 +1,6 @@
 import { _$, _$_ALL, addEvent, changeArrayCSS, changeCSS, makeLighter } from "../../common/utils.js";
 import { fetchGasStationSearch, fetchOilRegister, fetchRecentGasStation } from "./fetch.js";
-import { parseOilPriceIntoKorean } from "./helperFunction.js";
+import { animateOilImage, parseOilPriceIntoKorean } from "./helperFunction.js";
 
 NodeList.prototype.forEach = Array.prototype.forEach;
 let debounceTimer = "";
@@ -12,6 +12,10 @@ const eventToOilSelectArea = ($container) => {
     const $oilSelectText = _$(".oilInfoArea__oilSelect > span", $container);
     const $oilSelectImg = _$(".oilInfoArea__oilSelect > img", $container);
     const $oilValues = _$_ALL(".oilInfoArea__oilValue", $container);
+    const $priceInput = _$(".oilInfoArea__oilPriceInput", $container);
+    const $gasStationInput = _$(".oilInfoArea__searchInput", $container);
+    const $parsedMoneyArea = _$(".oilInfoArea__oilPrice > span", $container);
+    const $effectImage = $container.querySelector(".oilInfoArea__effectImage");
 
     addEvent($oilSelect, [
         () => {
@@ -36,7 +40,12 @@ const eventToOilSelectArea = ($container) => {
         () => changeCSS($oilSelectText, "color", "#000"),
         () => changeCSS($oilSelectImg, "transform", "rotate(0deg"),
         () => changeArrayCSS($oilValues, "top", 0),
-        () => changeArrayCSS($oilValues, "outline", "none")
+        () => changeArrayCSS($oilValues, "outline", "none"),
+        () => $gasStationInput.value = "",
+        () => $gasStationInput.disabled = false,
+        () => $priceInput.value = "",
+        () => $parsedMoneyArea.innerHTML = "",
+        () => animateOilImage($effectImage, 0)
     ]));
 }
 
@@ -90,7 +99,7 @@ const eventToSearchValue = ($searchValue) => {
         () => $searchInput.value = $gasNameSection.innerHTML,
         () => $searchInput.dataset.stationNo = $gasNameSection.closest(".oilInfoArea__oilSearchValue").dataset.stationNo,
         () => $searchResultBox.innerHTML = ``,
-        () => $searchInput.disabled = true
+        () => $searchInput.disabled = true,
     ]);
 }
 

frontEnd/public/js/myPage/inputOilInfo/fetch.js

@@ -58,7 +58,14 @@ const fetchOilRegister = ($container) => {
         })
     }
     else {
-        // error modal
+        const $failModal = _$(".oilInput__failModal", $container);
+        changeCSS($failModal, "top", 0);
+        setTimeout(() => {
+            changeCSS($failModal, "top", "-30%")
+        }, 1000);
+        setTimeout(() => {
+            location.assign("/inputOilInfo");
+        }, 1800);
     }
 }
 

frontEnd/public/js/myPage/inputOilInfo/helperFunction.js

@@ -80,7 +80,7 @@ const validateGasName = ($gasText) => {
 }
 
 const validateGasPrice = ($gasPrice) => {
-    return !($gasPrice.value === "");
+    return !($gasPrice.value === "" || $gasPrice.value === "0");
 }
 
 const validateStationName = ($gasStationText) => {