[웹 프로젝트] 피드백 적용하기 1 - 추천, 정렬과 검색 필터 최적화

문제 정의

피드백 1.

여행 기록 추천순 정렬하면 추천이 같으면 최소한 최신순으로 정렬해주는게 어떨지?

오래된 순으로 나열된거같은데 정렬 순서를 좀더 신경써야할거같음

여행 동료모집 검색 조건이 매우 불편. 무슨 조건인지조차 모르겠음. 모집하는 작성자에 대한 필터링인지?

모집 내용에 대한 필터링인지? 나이대로 테스트해보니 아마 작성자 조건인거같은데 그에 대한 설명 부족

검색 조건 전체 초기화 하는 방법이 없음. 그냥 탭 눌러서 다시 진입해야함.

유형의 경우 전체 동행이 다른 조건들이랑 중복 체크가 가능한데 이러면 무슨 의미가 있는지?

 

 

해결 방향

추천순 정렬 로직 강화
- 추천수 기준으로 내림차순 정렬하되, 동일한 추천 수를 가진 게시글은 작성일 기준으로 최신순으로 노출

검색 조건 초기화(Reset) 버튼 추가
- 동료 모집 검색 부분에 “전체 초기화” 버튼을 배치해 클릭 한 번으로 모든 필터가 기본 상태로 리셋되도록 제공

동행 유형 명확한 기준 설정
- 헷갈리지 않도록 명확한 기준으로 나눠 제공

필터 설명 문구 및 툴팁 도입
- 검색 방식 변경 및 필터 제거

 

 

구현 상세

추천순 정렬 로직 강화

현재 게시글을 추천 순으로 정렬했을 때 추천 수가 동일할 시 게시글 작성 일자와 관계없이 마구잡이로 정렬이 돼서 출력된다. 그래서 이 부분을 수정해야 한다.

 

 

 

수정전 로직

// 정렬 옵션에 따른 Pageable 생성 메서드
    private Pageable applySortOption(String sortOption, Pageable pageable) {
        switch (sortOption) {
            case "viewCnt":
                return PageRequest.of(pageable.getPageNumber(), pageable.getPageSize(), Sort.by(Sort.Direction.DESC, "viewCnt"));
            case "goodLike":
                return PageRequest.of(pageable.getPageNumber(), pageable.getPageSize(), Sort.by(Sort.Direction.DESC, "goodLike"));
            default: // 최신순 (latest)
                return PageRequest.of(pageable.getPageNumber(), pageable.getPageSize(), Sort.by(Sort.Direction.DESC, "createdAt"));
        }
    }

 

 

 

수정 후 로직

// 정렬 옵션에 따른 Pageable 생성 메서드
    private Pageable applySortOption(String sortOption, Pageable pageable) {
        switch (sortOption) {
            case "viewCnt":
                return PageRequest.of(
                        pageable.getPageNumber(),
                        pageable.getPageSize(),
                        Sort.by(
                                Sort.Order.desc("viewCnt"),      // 조회수 내림차순
                                Sort.Order.desc("createdAt")     // 동률일 땐 최신순
                        )
                );
            case "goodLike":
                return PageRequest.of(
                        pageable.getPageNumber(),
                        pageable.getPageSize(),
                        Sort.by(
                                Sort.Order.desc("goodLike"),     // 추천 수 내림차순
                                Sort.Order.desc("createdAt")     // 동률일 땐 최신순
                        )
                );
            default: // 최신순 (latest)
                return PageRequest.of(
                        pageable.getPageNumber(),
                        pageable.getPageSize(),
                        Sort.by(Sort.Direction.DESC, "createdAt")
                );
        }
    }

조회순, 추천 순으로 게시글을 조회할 때 조건을 추가했다. 동률일 땐 최신순으로 정렬되도록 지정해 줬다.

 

 

 

수정 후 게시글을 추천 순으로 정렬했을 때 추천 수가동일할 시 게시글 작성 일자에 따라 정렬된다.

 

 

 

 

검색 조건 초기화(Reset) 버튼 추가

현재는 사진처럼 게시글에 필터링을 걸었을 때 한 번에 초기화시킬 방법이 없다. 직접 하나하나 초기화시켜야 한다. 그래서 리셋 버튼을 만들어줄 것이다. 이 작업은 화면로직을 수정하면 될 것 같다.

 

 

 

// 필터 초기화
  const handleResetFilters = () => {
    const params = new URLSearchParams(searchParams);
    // 필터 관련 파라미터 제거
    params.delete('startDate');
    params.delete('endDate');
    params.delete('gender');
    params.delete('ageGroup');
    params.delete('travelTypes');

    // 페이지는 1로 초기화
    params.set('pageNumber', '1');
    setSearchParams(params);
  };

우선 검색 관련 파라미터 제거 로직을 하나 만들어줬다.

 

 

 

그 뒤 기존 필터링 버튼 제일 오른쪽에 초기화 버튼을 만들어 넣어줬다.

 

 

 

동행 유형 명확한 기준 설정

 

여행 동료 모집 카테고리 필터

글 작성 페이지

유형 선택 모델

 

기존에는 이런 식으로 총 12개의 유형이 있었다. 그 중 전체동행 이란것에서 나머지를 포함한다는 뜻을 가진것으로 오해했다는 의견을 들으니 수정해야겠다는 생각이 들었다.

 

 

 

public enum TravelTypeCategory {
    FULL_COMPANION("전체 동행"),
    PARTIAL_COMPANION("부분 동행"),
    TOUR_COMPANION("투어 동행"),
    MEAL_COMPANION("식사 동행"),
    ACCOMMODATION_SHARE("숙박 공유"),
    PHOTO_SHOOT("사진 촬영"),
    SHOPPING_COMPANION("쇼핑 동행"),
    LEISURE_WALK_COMPANION("산책 동행"),
    CULTURAL_COMPANION("문화 동행"),
    EVENT_COMPANION("이벤트 동행"),
    EDUCATION_COMPANION("교육 동행"),
    FITNESS_COMPANION("운동 동행");
}

기존에는 이런식으로 12개의 동행유형을 넣어뒀다. 어떤 식으로 수정해야 할까 생각하다가 작성 방식자체를 수정해야겠다는 생각이 들었다.

 

 

 

 

이 부분은 아예 선택을 지워버리고 유형을 직접 입력가능하도록 수정했다. 최대 3개까지 넣을 수 있고 1개당 글자수는 5글자 이내로 사용할 수 있게 하였다.

 

 

 

그리고 필터에서 유형 부분도 아예 지웠다.

 

그 뒤 여행 동료 모집 카테고리에선 검색유형 선택 부분에 여행 유형탭을 넣어서 검색이 가능하게 했다.

 

 

이제 여행유형으로 검색을 하면 데이터, 하이라이트가 정상처리되도록 적용했다.

 

 

 

 

 

 

서버 주소

https://tripmark.co.kr/

발자국 - 여행 커뮤니티

테스트 계정 1

ID: test1@gmail.com

PW: !test1234

 

테스트 계정 2

ID: test2@gmail.com

PW: !test1234

 

피드백은 항상 감사히 받겠습니다.

 

OKKY(개발자 지식공유 플랫폼)에서 피드백 받은 내용입니다.

https://okky.kr/

OKKY - All That Developer