지도의 경계 정보를 가져와 근처 일자리 공고 조회 기능 개발

1. 개요

진행중인 프로젝트에서 현재 사용자가 보고 있는 지도 화면에 일자리를 띄워주는 기능을 개발하게됐다.

에어비엔비 같은 숙박 업소, 네이버 부동산같은 부동산 플랫폼에서도 쉽게 볼 수 있는 기능이다.

우리 서비스에도 이와 비슷한 기능이 있고, 아래는 개발 중인 서비스의 초안 디자인이다.

각 일자리 모집 공고에는 이미 위도, 경도 데이터를 함께 갖고 있다.

따라서 현재 클라이언트가 보고 있는 지도의 북동쪽, 남서쪽 위도, 경도를 파라미터로 받은 후 쿼리를 날려 조회해 올 생각이다.

사실 학습이 꽤나 필요하거나, 정리할 게 있는 경우에만 포스터를 작성하는 편인데 이번엔 구글링 했을 때 자료가 너무 없어서 처음 하시는 분들이게 조금이나마 도움이 되고자 쓰고있다.

2. 카카오 Map Key 발급

지도의 경계 부분 위도, 경도는 프론트 팀이 알아서 잘 넘겨주겠지만 개발 후 테스트를 위해 카카오 맵 API를 사용하기로 했다.

https://developers.kakao.com/

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

카카오 API 접속
내 애플리케이션 이동
애플리케이션 추가
JavaScript 키 복사
플랫폼에 사용할 URL 등록

여기서 사용할 키는 JavaScript 키 이다.

마지막으로 플랫폼 메뉴에서 URL을 등록시켜줘야 사용 가능하다.

아래는 카카오 Map을 생성 후 위도, 경도를 입력해 Center 위치를 잡고, 북동쪽 경계, 남서쪽 경계의 위도, 경도 좌표를 구하는 간단한 HTML JS 코드이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script
      type="text/javascript"
      src="http://dapi.kakao.com/v2/maps/sdk.js?appkey=ab9e6700f2bc6a1dee2720143aade0cf"
    ></script>

    <div id="map" style="width: 100%; height: 350px"></div>

    <div id="mapInfo"></div>

    <script>
      var mapContainer = document.getElementById('map'), // 지도를 표시할 div
        mapOption = {
          center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
          level: 3, // 지도의 확대 레벨
        };

      var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

      // 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
      var mapTypeControl = new kakao.maps.MapTypeControl();

      // 지도 타입 컨트롤을 지도에 표시합니다
      map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);

      function getInfo() {
        // 지도의 현재 중심좌표를 얻어옵니다
        var center = map.getCenter();

        // 지도의 현재 레벨을 얻어옵니다
        var level = map.getLevel();

        // 지도타입을 얻어옵니다
        var mapTypeId = map.getMapTypeId();

        // 지도의 현재 영역을 얻어옵니다
        var bounds = map.getBounds();

        // 영역의 남서쪽 좌표를 얻어옵니다
        var swLatLng = bounds.getSouthWest();

        // 영역의 북동쪽 좌표를 얻어옵니다
        var neLatLng = bounds.getNorthEast();

        // 영역정보를 문자열로 얻어옵니다. ((남,서), (북,동)) 형식입니다
        var boundsStr = bounds.toString();

        var message = '지도 중심좌표는 위도 ' + center.getLat() + ', <br>';
        message += '경도 ' + center.getLng() + ' 이고 <br>';
        message += '지도 레벨은 ' + level + ' 입니다 <br> <br>';
        message += '지도 타입은 ' + mapTypeId + ' 이고 <br> ';
        message +=
          '지도의 남서쪽 좌표는 ' +
          swLatLng.getLat() +
          ', ' +
          swLatLng.getLng() +
          ' 이고 <br>';
        message +=
          '북동쪽 좌표는 ' +
          neLatLng.getLat() +
          ', ' +
          neLatLng.getLng() +
          ' 입니다';

        document.getElementById('mapInfo').innerHTML = message;
      }
      getInfo();
    </script>
  </body>
</html>

카카오 본사를 중심 좌표로 찍고, 지도의 확대 레벨을 3으로 했을 때 북동쪽 좌표와 남서쪽 좌표를 아래와 같이 구할 수 있다.

동아대학교 위도, 경도를 찾아 테스트해보면 아래와 같이 나온다. 남서쪽 좌표엔 을숙도 초등학교가 위치하는데, 해당 좌표를 센터 좌표로 고정하고 지도를 띄우면 을숙도 초등학교가 잘 뜨는걸 확인할 수 있다.

3. 구현 & Test

~~이 뒤론 따로 설명이 필요없을 것 같아 코드만 첨부하였다.~~

- Controller

지도 경계의 위도, 경도와 간단한 필터링 조건을 파라미터로 받아주었다.

@Operation(summary = "지도에서 모집 공고 조회")
@GetMapping("/api/worker/job-post/map")
public ResponseEntity<Response> getJobPostOnMap(@AuthenticationPrincipal PrincipalDetails principalDetails,
                                                @RequestParam(name = "northEastLat") Float northEastLat,
                                                @RequestParam(name = "northEastLng") Float northEastLng,
                                                @RequestParam(name = "southWestLat") Float southWestLat,
                                                @RequestParam(name = "southWestLng") Float southWestLng,
                                                @RequestParam(name = "workDateList", required = false) List<LocalDate> dateList,
                                                @RequestParam(name = "scrap", required = false) Boolean scrap) {
    List<JobPostMapResponse> jobPostsOnMap = jobPostWorkerService.findJobPostsOnMap(principalDetails.getMember().getId(), northEastLat, northEastLng, southWestLat, southWestLng, dateList, scrap);
    return ResponseEntity.ok(new Response(jobPostsOnMap, "지도에서 경계 안에 속한 모집 공고 조회 완료"));
}

- Service

/**
 * 모집 공고 지도에서 조회
 */
@Transactional(readOnly = true)
public List<JobPostMapResponse> findJobPostsOnMap(Long workerId, Float northEastLat, Float northEastLng, Float southWestLat, Float southWestLng, List<LocalDate> dateList, Boolean scrap) {
    Member worker = memberRepository.findById(workerId)
            .orElseThrow(() -> new CustomException(ErrorCode.MEMBER_NOT_FOUND));

    return jobPostRepository.findJobPostOnMap(worker.getId(), northEastLat, northEastLng, southWestLat, southWestLng, dateList, scrap).stream()
            .map(JobPostMapResponse::from)
            .collect(Collectors.toList());
}

- Repository

@Override
public List<JobPost> findJobPostOnMap(Long memberId, Float northEastLat, Float northEastLng, Float southWestLat, Float southWestLng, List<LocalDate> dateList, Boolean scrap) {
    return queryFactory
            .selectFrom(jobPost)
            .where(
                    jobPost.address.latitude.between(southWestLat, northEastLat).and(jobPost.address.longitude.between(southWestLng, northEastLng)),
                    eqWorkDate(dateList),
                    eqScrap(memberId, scrap)
            )
            .fetch();
}

swagger에서 위도, 경도 좌표를 입력하고 필터링을 건 후 요청하면 아래와 같이 쿼리가 잘 나가는걸 확인할 수 있다.

    select
	// 생략
    from
        job_post j1_0       
    where
        j1_0.latitude between 35.103577 and 35.126644           
        and j1_0.longitude between 128.89316 and 129.02708           
        and exists(select
            1           
        from
            work_date w1_0           
        where
            w1_0.date in('2024-04-10T00:00:00.000+0900','2024-04-11T00:00:00.000+0900')               
            and j1_0.job_post_id=w1_0.job_post_id)

'Spring Boot, JAVA 🌱' 카테고리의 다른 글

하나의 요청에 나가는 쿼리 개수를 효율적으로 세어보자 (Hibernate StatementInspector, Spring AOP) (1)	2024.05.21
AWS Lambda를 이용한 Image Resize 도입 (썸네일 이미지 성능 개선) (1)	2024.05.07
[Spring Batch] 스프링 배치 작업 실패에 대처하기 : Skip, Retry (1)	2024.05.02
동시성 문제에 대한 고민과 해결 과정 (0)	2024.04.23
Spring Boot 의 다중 유저 요청 처리 방법 (Tomcat) (2)	2024.04.19