카페 검색, 정렬 기능을 구현 - 전략패턴 사용

전략 패턴을 사용한 코드 구현이 처음이라 아주 재미있는 작업이었다

 

검색창의 value와 option filer의 value 값을 서버로 전송하여 페이징 처리된 카페 리스트를 반환 받음

 

html

    <div class="filter">
        <span style="font-size: medium">정렬</span> : &nbsp;
        <select id="sorting" onchange="getCafeList()">
            <option value="createdDateDesc">-선택-</option>
            <option value="priceDesc">높은 가격순</option>
            <option value="priceAsc">낮은 가격순</option>
        </select>
    </div>

 

js

function getCafeList() {
    let dataSource = null;
    let searchVal = $("#searchBox input").val();
    let searchStrategy = $("#sorting option:selected").val();

    dataSource = `/api/cafes?searchVal=${searchVal}&searchStrategy=${searchStrategy}`;

    $('#cafeListContainer').empty();
    $('#pagination').pagination({
        dataSource,
        locator: 'content',
        alias: {
            pageNumber: 'page',
            pageSize: 'size'
        },
        totalNumberLocator: (response) => {
            return response.totalElements;
        },
        pageSize: 3,
        showPrevious: true,
        showNext: true,
        ajax: {
            beforeSend: function () {
                $('#cafeListContainer').html('불러오는 중...');
            }
        },
        callback: function (data, pagination) {
            $('#cafeListContainer').empty();
            for (let cafe of data) {
                let tempHtml = makeHtml(cafe);
                $('#cafeListContainer').append(tempHtml);
            }
        }
    });
}

 

controller

    @GetMapping("/api/cafes")
    public Page<CafeListResponseDto> ReadAllCafeList(
            @RequestParam("page") int page,
            @RequestParam("size") int size,
            @RequestParam("searchVal") String searchVal,
            @RequestParam("searchStrategy") String searchStrategy
    ){
        System.out.println(searchVal);
        System.out.println(searchStrategy);

        page = page - 1;
        return cafeService.findAllCafeList(page, size, searchVal, searchStrategy);
    }

 

service

data jpa : like문 사용시 Containing 사용

 

   private final Map<String, SortStrategy> sortStrategyMap;
   
   public Page<CafeListResponseDto> findAllCafeList(int page, int size, String searchVal, String searchStrategy) {
        
        SortStrategy sortStrategy = sortStrategyMap.get(searchStrategy);
        Sort sort = sortStrategy.sort();

        Pageable pageable = PageRequest.of(page, size, sort);

        Page<Cafe> all;
        if (searchVal.equals("")){
            all = cafeRepository.findAll(pageable);
        }else {
            all = cafeRepository.findAllByCafeNameContaining(searchVal, pageable);
            // like 대신 Containing
        }
//        return all.map(cafe -> new CafeListResponseDto(cafe));
        // 위의 주석단 람다식을 아래의 식으로 치환
        return all.map(CafeListResponseDto::new);
    }

 

전략 패턴 사용 - service 

SortStrategy의 의존성 주입을 프론트에서 받아온 'searchStrategy' 값에 따라 다른 class를 주입해주는 정략 사용 

-> Class명과 String searchStrategy를 일치시켜 주입받음

선언
private final Map<String, SortStrategy> sortStrategyMap;

주입
SortStrategy sortStrategy = sortStrategyMap.get(searchStrategy)

폴더구조