차량 가격 예측 모델 디자인 변경하기

기존 진행 방식 

 

1. 메인 페이지에서 헤더의 "내차팔기" 클릭 

치명적인 단점 - 기존 프로젝트에는 내차 팔기 기능이 없다. 그래서 [내차팔기] 를 누르면 바로 가격 예측 AI 기능으로 넘어가게 되어 있다.

 

 

2. 가격 예측 페이지 1 : 정보 입력으로 넘어간다. 

매우 단순한 디자인. 정보를 입력하거나 선택한 후 이미지를 업로드 하고 예측하기 버튼을 누른다.

 

3. 가격 예측 결과 페이지 출력 

 

 

가격 예측 모델로 출력된 예측된 차량 가격에 + 손상 여부 판단 이미지 모델로 손상 감가 금액을 책정한 후 최종 예측 가격을 출력한다. 손상 등급과 감가사유, 업로드한 이미지를 같이 보여준다.

 

 

문제점 : 

 

---

 

디자인 개선 방안 

 

1. 헤더의 내차팔기를 누르면 

"내차팔기" 사이드바(드롭다운 메뉴) 기능으로 연결시킨다.

Java + Spring Legacy 기반의 프로젝트이므로  주로 JSP + JSTL + jQuery/JavaScript 조합으로 구현한다.

 

원하는 디자인 방식 

 

여기서 내차팔기 안에 "내차팔면 얼마일까 ?"의 이름으로 생성하도록 한다.

 

* 순서 

 

• JSP로 메뉴와 드롭다운 HTML 작성
• jQuery로 클릭시 토글 (열고 닫기)
• Spring Controller로 각 메뉴별 URL 연결
• CSS로 예쁘게 꾸미기

 

 

1-1 . 메뉴 버튼과 드롭다운 사이드바 구조 만들기 

<jsp(html)>

기존 <header.jsp>에 포함 

<nav>
    <ul style="position: relative;">
        <li style="position: relative; display: inline-block;">
            <span id="sellCarMenu" style="cursor:pointer;">내차팔기</span>

            <!-- 내차팔기 메뉴에 드롭다운 메뉴 추가 -->
            <div id="sellCarDropDown" class="dropdown-content">
                <ul>
                    <li><a href="${pageContext.request.contextPath}/carpredict">&#128663;내차 팔면 얼마일까?</a></li>
                </ul>
            </div>
        </li>

		// 그외 기존 코드들 생략 
        
    </ul>


</nav>

 

1-2. JavaScript (jQuery) - 버튼 누르면 드롭다운 보이게 하기 

기존  <header.jsp> 에 추가 

// 내차팔기 클릭시 드롭다운 메뉴 토글

$(document).ready(function(){
    $("#sellCarMenu").click(function(e){
        e.stopPropagation(); // 이벤트 버블링 방지
        $("#sellCarDropDown").toggle(); // 드롭다운 토글
    });

    $(document).click(function(e){
        if (!$(e.target).closest("#sellCarDropDown, #sellCarMenu").length){
            $("#sellCarDropDown").hide(); // 외부 클릭시 닫기
        }
    });
});

 

 

1-3. CSS - 드롭다운 스타일링 

 

기존 <header.css> 에 추가 

 

/* 내차팔기 드롭다운 메뉴 전용 스타일 */



 .dropdown-content {
     position: absolute;
     top: 100%; /* 버튼 바로 아래 */
     left: 0;
     background-color: white;
     min-width: 200px;
     border: 1px solid #ccc;
     box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
     z-index: 999;
 }

.dropdown-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown-content ul li {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}

.dropdown-content ul li:hover {
    background-color: #f9f9f9;
}

 

 

 

1-4. Spring Controller 수정하기 

( < a href="/sell/home"> 등의 링크를 컨트롤러에 매핑하기 ) 

내차 팔면 얼마일까 ? 메인 -->

"${pageContext.request.contextPath}/sellcar"

여기서 설명글 .. 등등이 있고 차량 가격 분석 버튼을 클릭하면 

"${pageContext.request.contextPath}/carpredict"

이 URL로 넘어가는 구조

@Controller
@RequestMapping("/sell")
public class SellCarController {

    @GetMapping("/home")
    public String sellHome() {
        return "sellHome"; // sellHome.jsp 이동
    }

    @GetMapping("/corporate")
    public String corporateSale() {
        return "corporateSale"; // corporateSale.jsp 이동
    }

    @GetMapping("/scrap")
    public String scrapCar() {
        return "scrapCar"; // scrapCar.jsp 이동
    }

    @GetMapping("/review")
    public String customerReview() {
        return "customerReview"; // customerReview.jsp 이동
    }

    @GetMapping("/branch")
    public String branchSale() {
        return "branchSale"; // branchSale.jsp 이동
    }
}

 

 

 

1-5. carPredict.jsp, carPredictResult.jsp 디자인 업데이트 

 

기존 페이지는 메인 페이지와 전혀 연동되지않은 독자적인 페이지로, header, footer, sidebar 적용과 색 맞춤, 그리고 간격 보정등을 추가하였다. 

 

* 변경된 디자인 

 

 

 

---

 

 

메인페이지 추가 

 

 

 

1. 메인페이지에서 "내차팔기" 들어가면 드롭다운 메뉴로 "내차 팔면 얼마일까?" 로 들어갈 수 있다.

 

 

 

2.  프로세스 진행상 바로 견적으로 들어가는 것보다는 차량 판매를 위한 메인페이지가 있어야 한다고 생각했다. 

따라서 "내 차 팔기 신청" 메인페이지를 만들었다. 디자인적 요소는 lovable 을 사용하였고 TypeScript, React 형식을 jsp / css 형식으로 변환하여 사용하였다. 

이 페이지를 만들때 참고한 페이지 : https://www.kcar.com/sc/HomeSvcMain     

 

 

* 여기서 "눌러서 견적 확인" 버튼을 누르면 위에서 수정한 "가격 예측 서비스" 페이지들이 연결된다.