[0810] iPark project 피드백 수정

iPark Project

피드백 사항 반영

• 우리 프로젝트는 공원을 중심으로 한 검색 또는 커뮤티니 생성이 주 목적이었다.
• 금일은 공원을 검색하는 코드를 사용자의 니즈에 맞게 수정해 보았다.

공원 옵션 검색 피드백 보완

• 먼저 가장 많이 들어온 피드백은 버튼을 눌렀을 때 공원 검색의 결과를 바로 보고 싶다는 것이었다.
• 기존에는 내가 검색하고 싶은 옵션들을 모두 누른 뒤 버튼을 눌러 정보들을 백앤드로 보내주고 있었다.
• 이를 수정하기 위해 각 버튼에 공원 정보를 불러오는 함수를 모두 달아 주었다. 또한 여러 값들에 대한 결과도 받기 위해 이전에 사용하던 파라미터 값을 담는 리스트를 활용해 주었다.
• 버튼을 눌러 결과를 보고 다시 버튼을 누르게 되면 기존에 있던 값들이 삭제되도록 조치하였다.
• api 통신을 주고 받는 코드는 아래와 같다.

// 쿼리 파라미터를 통한 공원 정보 get 
function getParks(title) {
  $("#parks").empty()

  let option_param = ""
  for (let i = 0; i < valueList.length; i++) {
    if (valueList[i] != undefined) {
      option_param += "param=" + valueList[i] + "&"
    }
  }

  $.ajax({
    type: "GET",
    url: `${backendBaseUrl}/park/option/` + "?" + option_param,
    data: {},

    error: function () {
      temp_html = `<span>조건에 맞는 검색결과가 없습니다.</span>`
      $(".parks").append(temp_html)
      $(".parks").css({ "justify-content": "center" })
    },

    success: function (response) {
      for (let i = 0; i < response.length; i++) {
        get_parks_html(
          title,
          response[i].id,
          response[i].park_name,
          response[i].image,
          response[i].check_count
        )
      }
    }
  })
}

• 앞에서 언급했던 것과 같이 나는 내가 선택한 버튼을 다시 클릭했을 때 그에 해당하는 값들만 지우고 싶었다. 위의 api 코드를 보면 함수가 실행되자마자 꼭 원래 있던 리스트들을 전부 비워주고 통신을 하게 된다.
• 따라서 머리를 좀 더 써보면 내가 백앤드로 보낸 값으로 쿼리를 쳐서 나온 결과값들을 받아오기 전에 원래 있던 값들을 다 비워주고 해당 결과들을 붙여주게 되면, 나는 현재 선택을 취소한 버튼의 결과값들을 더 이상 보이지 않도록 할 수 있는 것이다.

// 옵션값을 여러 개 받음 
var values = document.querySelectorAll("#parkOption a")
var valueList = []
values.forEach(value => {
  value.addEventListener("click", () => {
    if (!valueList.includes(value.title)) {
      valueList.push(value.title)
    } else {
      for (let i = 0; i < valueList.length; i++) {
        if (valueList[i] == value.title) {
          valueList.splice(i, 1)
          i--
        }
      }
    }
  })
})


// 버튼 클릭 시 색상 변경, 클릭한 옵션에 따른 공원 검색 결과 제시
var optionButton = document.querySelectorAll("#button")
function controlColor() {
  for (var i = 0; i < optionButton.length; i++) {
    const classes = optionButton[i].classList
    const button = optionButton[i]

    button.addEventListener("click", () => {
      classes.toggle("clicked")
      getParks(button.title)
    })
  }
}
controlColor()

• 아래는 백앤드의 코드이다.

# 검색 페이지
class OptionView(APIView):
    def get(self, request):        
        param = request.query_params.getlist("param")
        
        if not param:
            return Response({})

        option_list, zone_list, name = [], [], ""

        for p in param:
            if p in ["1", "2", "3", "4", "5", "6", "7", "8"]:
                option_list.append(p)
            else:
                if "구" == p[-1] or "시" == p[-1]:
                    zone_list.append(p)
                else:
                    name += p
                    
        try:
            if len(option_list) > 0 and len(zone_list) > 0:
                results = ParkModel.objects.filter(zone__in=zone_list).filter(parkoption__option_id__in=option_list).distinct()
            elif len(option_list) > 0:
                results = ParkModel.objects.filter(parkoption__option_id__in=option_list).distinct()
            elif len(zone_list) > 0:
                results = ParkModel.objects.filter(zone__in=zone_list).distinct()
            else:
                results = ParkModel.objects.filter(park_name__contains=name)

            if not results.exists():
                return Response({"message": "공원을 찾을 수 없습니다."}, status=status.HTTP_404_NOT_FOUND)
            elif results.exists():
                serializer = ParkSerializer(results, many=True)
                return Response(serializer.data, status=status.HTTP_200_OK)  
        except:
            return Response({"message": "공원을 찾을 수 없습니다."}, status=status.HTTP_404_NOT_FOUND)

• 결과물을 한 번 보도록 하겠다.
• 일단 놀이공원만 선택해 보면, 아래와 같이 놀이공원에 해당하는 값들이 나온다.
  • 현재 백앤드로 보내는 valueList는 ["3"]이다.
    
• 이제 과천시를 클릭해보겠다.
  • 현재 백앤드로 보내는 valueList는 ["3", "과천시"]이다.
  • 과천에는 단 하나의 놀이공원이 존재하는데, 그 값이 잘 나온 것을 볼 수 있다.
    
• 여기서 다시 송파구를 누르면 다음과 같이 2개의 결과가 나온다.
  • 현재 백앤드로 보내는 valueList는 ["3", "과천시", "송파구"]이다.
    
• 반대로 하나씩 결과를 줄여나갈 수 있다. 확인하기 쉽도록 놀이공원을 제거해 보겠다.
  • 과천은 데이터가 놀이공원인 서울대공원 하나 뿐이어서 그대로지만, 송파구는 나머지 공원들도 나온 것을 볼 수 있다.