Spring 중고마켓 검색 부분

처음 원하던 설계는

http://localhost:8080/goods/search/?category=1
http://localhost:8080/goods/search/검색어?category=1
http://localhost:8080/goods/search/검색어

였다. 위 부분을 충족시키기 위해

컨트롤러 부분을 아래 와 같이 만들었다.

@GetMapping(value = "search/{search}")
	public String searchGoods(@PathVariable(required = false) String search, Model model,
	                          @RequestParam(name = "category", required = false) Integer category) {

	    SearchDTO searchDTO = new SearchDTO();

	    if (search != null && !search.isEmpty()) {
	        searchDTO.setKeyword(search);
	    }

	    if (category != null) {
	        searchDTO.setCategory(category);
	    }

	    List<GoodsDTO> goodsList = goodsService.getSearchGoods(searchDTO);
	    model.addAttribute("goodsLists", goodsList);
	    model.addAttribute("search", search);

	    return "goods/goods_list";
	}

위 같이 컨트롤러를 생성 시

http://localhost:8080/goods/search/검색어?category=1
http://localhost:8080/goods/search/검색어
부분은 충족을 하지만

http://localhost:8080/goods/search/?category=1
부분은 @PathVariable 이 null 이라 404 page 만 보였다..

결국 Controller 하나를 더 추가하여

@GetMapping(value = "search/")
	public String searchGoodsNoSearch(Model model,
	        @RequestParam(name = "category", required = false) Integer category) {

	    SearchDTO searchDTO = new SearchDTO();


	    if (category != null) {
	        searchDTO.setCategory(category);
	    }

	    List<GoodsDTO> goodsList = goodsService.getSearchGoods(searchDTO);
	    model.addAttribute("goodsLists", goodsList);

	    return "goods/goods_list";
	}

search 가 없는 Controller 를 하나 더 만들었다.

해당 부분을 이제 ajax 로 받아오는 작업을 해봐야 겠다..

Script 는 아래와 같다.

function fetchCategories() {
        $.ajax({
            url: '/api/getCategories',
            type: 'post',
            dataType: 'json',
            success: function (data) {
                console.log(data);
                var category1Container = $('.category1');
                var listCategortContainer1 = $('.list_category');
                var category1List = data.category_1;
                
                category1Container.empty();

                // 카테고리1 li 생성
                category1List.forEach(function (categoryMain) {
                    var category1Item = $('<li><a href="#">' + categoryMain.c1_category + '</a></li>');
                    var category2Container = $('<ul class="category2 category2Container"></ul>');
                    
                    var listCategory1Item = $('<li><a href="#">' + categoryMain.c1_category + '</a></li>');

                    listCategory1Item.on('click', function() {
                        var categoryId = categoryMain.c1_id; // 카테고리 ID 가져오기
                        var searchValue = document.querySelector(".searchName").textContent.trim();; // .search 클래스를 가진 요소의 텍스트 콘텐츠 가져오기
                        var encodedSearchValue = encodeURIComponent(searchValue);
                        console.log(searchValue)
                        var baseNewUrl = "${pageContext.request.contextPath }/goods/search/";
                        var query = "";
                        
                        if (searchValue != null) {
                            query = encodedSearchValue +"?category=" + categoryId;
                        } else {
                            query = "?category=" + categoryId;
                        }
                        
                        var newUrl = baseNewUrl + query;
                        
                        // 페이지 이동
                        window.location.href = newUrl;
                    });
                    
                    // filter 를 통해 category2 list 정리
                    var category2List = data.category_2.filter(function(category2) {
                        return category2.c1_id === categoryMain.c1_id;
                    });

                    category1Item.append(category2Container);

                    category1Item.on('mouseover', function () {
                    	// 기존의 category2Container 비우기
                        category2Container.empty(); 
                        
                        if (category2List.length > 0) {
                            category2List.forEach(function (category2) {
                                var category2Item = $('<li><a href="#">' + category2.c2_category + '</a></li>');
                                category2Container.append(category2Item);
                            });
                        }
                    });
                    
//                     listCategory1Item.onclick(function(){
                    
//                     })

//                     category1Item.on('mouseout', function () {
//                         category2Container.empty();
//                     });

                    //goods_list 테스트
                    listCategortContainer1.append(listCategory1Item);
                    category1Container.append(category1Item);
                    
                });
            },
            error: function (xhr, status, error) {
                alert("데이터 안불러와지는중");
            }
        });
    }

지금 코드에선 url 주소로 계속 변경 해주고 있지만 나중에 비동기 처리를 해야겠다.