114일차

7.11
상세보기에 지도 넣기

참여기업 상세

참여기업 상세페이지에 추가되는 값들은 해당 기업 정보, 해당 기업정보에 따른 지도api
현재 채용공고와 과거 채용공고들을 화면에 보여줄 것이다.

1. 서비스

마감된 공고는 현재 회차 이전 모든 것을 불러와야하기 때문에 여러개가 잇음을 감안해서 페이징을 해준다.

@Override
public Map<String, Object> getDetail(Integer companyId, Integer page) {
    //기업
    Company company = companyMapper.getDetail(companyId);

    public Map<String, Object> getDetail(Integer companyId) {
    // 회차
    Integer round = exhibitionInfoService.getCurrentRound();

    List<Posting> nowPostingList = postingMapper.getNowPostingList(companyId);

    Integer pageSize = 5; // 5개씩
    Integer startNum = (page - 1) * pageSize; // 0 6 11

    //페이지네이션 정보
    //총 지난 공고 개수
    Integer count = postingMapper.countAll(companyId);

    // 마지막 페이지 번호
    // 총 글개수 -1 / pageSize + 1
    Integer lastPage = (count - 1) / pageSize + 1;

    // 페이지네이션 왼쪽번호 1 6 11
    Integer leftPageNum = page - 2;
    leftPageNum = Math.max(leftPageNum, 1);

    // 페이지네이션 오른쪽 번호
    Integer rightPageNum = leftPageNum + 5;
    rightPageNum = Math.min(rightPageNum, lastPage);

    // 이전페이지
    Integer prevPageNum = page - 1;

    // 다음 페이지
    Integer nextPageNum = page + 1;

    Map<String, Object> pageInfo = new HashMap<>();
    pageInfo.put("lastPage", lastPage);
    pageInfo.put("leftPageNum", leftPageNum);
    pageInfo.put("rightPageNum", rightPageNum);
    pageInfo.put("currentPageNum", page);
    pageInfo.put("prevPageNum", prevPageNum);
    pageInfo.put("nextPageNum", nextPageNum);

    List<Posting> pastPostingList = postingMapper.getPastPostingList(startNum, pageSize, companyId);

    return Map.of("company", company, "industryList", industryList, "round", round);
    return Map.of("company", company,
            "industryList", industryList,
            "round", round,
            "nowPostingList", nowPostingList,
            "pageInfo", pageInfo,
            "pastPostingList", pastPostingList);
}

2. 매퍼

  <select id="getNowPostingList" resultMap="postingMap">
    SELECT * FROM TB_POSTING
    WHERE company_id = #{companyId} AND status = '채용중'
</select>

<select id="countAll" resultType="Integer">
    SELECT COUNT(*) FROM TB_POSTING
    WHERE company_id = #{companyId} AND status = '마감'
</select>

<select id="getPastPostingList" resultMap="postingMap">
    SELECT * FROM TB_POSTING
    WHERE company_id = #{companyId} AND status = '마감'
    LIMIT #{startNum}, #{pageSize}
</select>

3. 지도

    /* 지도 */
        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 geocoder = new kakao.maps.services.Geocoder();

        // 주소로 좌표를 검색
        geocoder.addressSearch(`${address}`, function (result, status) {

            // 정상적으로 검색이 완료됐으면
            if (status === kakao.maps.services.Status.OK) {

                var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

                // 결과값으로 받은 위치를 마커로 표시합니다
                var marker = new kakao.maps.Marker({
                    map: map,
                    position: coords
                });

                // 인포윈도우로 장소에 대한 설명을 표시합니다
                var infowindow = new kakao.maps.InfoWindow({
                    content: `<div style="width:150px;text-align:center;padding:6px 0;">${company.companyName}</div>`
                });
                infowindow.open(map, marker);

                // 지도의 중심을 결과값으로 받은 위치로 이동
                map.setCenter(coords);
            }
        });

2. 다음지도 api

다음 지도 api에서 주소를 통해서 좌표를 검색하는 것을 만들었다.
오류를 여러개 겪었는데
첫 오류 : accesskey가 있는데도 지도 객체가 생성이 되지 않는 것
두번째 오류 : 장소명으로 검색이 안되는 것 두가지 오류를 만났다.

2.1 다음지도 api 사용권한 등록하기

https://developers.kakao.com/
먼저 카카오 개발자로가서 등록을 하고 사용권한 키를 발급받아야한다.
지도 api의 경우 많은 권한이 필요없어서 금방된다.

2.2 애플리케이션 등록하기

본화면에서 우측 상단을 보면 내어플리케이션이 있다.
이후 애플리케이션 추가하기를 해주면된다.

앱이름, 사업자명을 넣어주면되는데 국비 프로젝트이기때문에 앱이름에는 국비교육프로젝트 프로젝트명
사업자명은 그냥 내이름을 넣어주었다.

여길들어가면 앱키 를 얻을 수있는데 지도는 자바스크립트 키만 있으면된다.
이후 애플리케이션의 요약정보에서 플랫폼이 잇는데 여기서 플랫폼을 꼭 등록해주어야한다.

WEB어플리케이션이기때문에 WEB을 누르고 등록해준다.
어플리케이션의 도메인을 입력해주면된다.

학습용이면 localhost이기때문이 http://localhost:포트번호를 넣어주면된다.
이러면 팀원들의 개발중인 환경에서도 지도가 보인다.

그러나 배포를 해준다면 ip주소:포트번호를 작성해주어야한다.

!! 이전에 설정을 해주기 위해서

키를 프로젝트 설정파일에 등록해주어야한다.

어차피 화면에서 보이기 때문에 그냥 application.properties에 추가해주었다.

# kakao Map accessKey
kakao.accessKey=b5d9cdaa5b6eb50e6339bb7e092aebf5

이후 컨트롤러에서 model에 담아서 view에 쏴서 사용하면된다.

@Controller
@RequestMapping("/")
@RequiredArgsConstructor
public class HomeController {

    @Value("${kakao.accessKey}")
    private String accessKey;

    private final ExhibitionInfoService exhibitionInfoService;

    @GetMapping("location")
    public String location(Model model) {
        ExhibitionInfo exhibitionInfo = exhibitionInfoService.getCurrentInfo();
        model.addAttribute("kakaoMap", accessKey);
        model.addAttribute("exhibitionInfo", exhibitionInfo);
        return "exhibitionInfo/location";
    }

이후 설정은 쉽다.

https://apis.map.kakao.com/
공식문서를 보고 하나씩 작성해주면된다.

3. 주소명 오류

3.1 Cannot read property 'Geocoder' of undefined

Geocoder객체를 만들어서 넣음으로서 주소에서 좌표를 얻어온다.
api 공식문서의 코드를 가져다 사용했지만 처음에는 뜨지 않았다.

카카오 지도 자바스크립트 api는 지도와 함께 사용할 수 잇는 라이브러리를 지원하고 있다.
이 주소로 좌표를 검색하는 것은 하나의 라이브러리이다.
이 기능을 추가로 불러와서 사용하기 위해서는 api에 파라미터로 추가하여 로드해야한다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>

그래서 처음 지도만 띄울때는 이 것을 사용하고 있었는데

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다.&libraries=services">        </script>

뒤에 파라미터로 라이브러리를 넣어주어야한다.

공식문서에 잘나와있찌만 놓쳐서 지도를 제대로 표시 못하는 것이었다.