국비/Project-2 쇼핑몰

2023.06.07 90일차 Team Project

춘핑이 2023. 6. 22. 10:51

90일차

추가할만한것
카카오 지도 api
첫페이지 열릴때 get요청통합? -> 불가능 @responsebody는 값만 전달함
상품상세페이지에서 즐겨찾기 설정
마이페이지
실시간채팅 등등

재입고알림? 메일로?

1.다음 카카오 우편번호 서비스

https://postcode.map.daum.net/guide

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
    new daum.Postcode({
        oncomplete: function(data) {
            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
            // 예제를 참고하여 다양한 활용법을 확인해 보세요.
        }
    }).open();
</script>

주소를 선택하면 지도도 함께 보여주기
다음 지도 API를 이용하시려면 https://developers.kakao.com에서 API Key를 발급받아야한다.

사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져올 수 있다.
도로명 주소 = R 지번주소 = J
data.roadAddress / data.jibunAddress
도로명주소 / 지번주소라 각 이름이 이런느낌인듯 하다.

우리의 경우 하나의 주소만 저장할 수 있게 하고 싶고 최근엔 도로명만 사용하니
도로명으로 고정하였다.

도로명의 경우 부가 주소가 있는데 우리는 도로명만 기록하기로 했으니 두경우다 추가해준다.

우편번호도 필요하니 넣어준다.

<div class="container-lg">
    <div class="row justify-content-center">
        <div class="col-12 col-md-8 col-lg-6">
            <div class="mb-3">
                <label for="inputAddress" class="form-label">주소</label>
                <div class="col-sm-6">
                    <div class="input-group mt-3">
                        <input type="text" id="postCode" class="form-control input-sm" placeholder="우편번호">
                        <button class="btn btn-outline-secondary" type="button" id="searchAddress">주소검색</button>
                    </div>
                </div>
                <input id="inputAddress" type="text" class="form-control" readonly placeholder="도로명 주소" />
                <input id="detailAddress" type="text" class="form-control" placeholder="상세주소" />
                <input type="text" class="form-control" id="address" name="address" />
            </div>
        </div>
    </div>
</div>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
$("#searchAddress").click(
    function() {
        new daum.Postcode(
            {
                oncomplete : function(data) {
                    // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
                    // 예제를 참고하여 다양한 활용법을 확인해 보세요.

                    // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

                    // 각 주소의 노출 규칙에 따라 주소를 조합한다.
                    // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                    let addr = ''; // 주소 변수
                    let extraAddr = ''; // 참고항목 변수

                    //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져올 수 있다.
                    // 도로명 주소 = R 지번주소 = J
                    // 사용자가 도로명 주소를 선택했을 경우
                    if (data.userSelectedType === 'R') {
                        addr = data.roadAddress;
                    } else {
                        // 사용자가 지번 주소를 선택했을 경우(J)
                        // addr = data.jibunAddress;    
                        addr = data.roadAddress;
                    }

                    // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                    // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                    if (data.bname !== ''
                            && /[동|로|가]$/g.test(data.bname)) {
                        extraAddr += data.bname;
                    }

                    // 건물명이 있고 공동주택일 경우 추가한다.
                    if (data.buildingName !== ''
                            && data.apartment === 'Y') {
                        extraAddr += (extraAddr !== '' ? ', '
                                + data.buildingName
                                : data.buildingName);
                    }
                    // 표시할 참고항목이 있을 경우 괄호까지 추가한 최종 문자열을 만든다.
                    if (extraAddr !== '') {
                        extraAddr = ' (' + extraAddr + ')';
                    }

                    $("#postCode").val(data.zonecode);
                    $("#inputAddress").val(addr + extraAddr);
                    $("#detailAddress").focus();
                }
            }).open();
});

$("#detailAddress").keyup(function() {
    const postCode = $("#postCode").val();
    const addr = $("#inputAddress").val();
    const detailAddr = $("#detailAddress").val();

    const finalAddress = (postCode) + " " + addr + " " + detailAddr;

    $("#address").val(finalAddress);
});

2. 찾아오는길

카카오 지도 api를 사용해보자.

https://webty.tistory.com/95
https://apis.map.kakao.com/web/ 공식
cad06ceb48c5512ce00843bc40feb531

실제 지도를 그리는 Javascript API를 불러오기

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY"></script>
// 이라는 상대 프로토콜을 사용하면, 사용자의 http, https 환경에 따라 자동으로 해당 프로토콜을 따라가게 된다.

API를 로딩하는 스크립트 태그는 HTML파일안의 head, body 등 어떠한 위치에 넣어도 상관없다.
하지만, 반드시 실행 코드보다 먼저 선언되어야 한다.

const container = document.getElementById('map');
const options = {
    center : new kakao.maps.LatLng(33.450701, 126.570667),
    level : 3
};

const map = new kakao.maps.Map(container, options);

kakao.maps.Map으로 객체를 만드는데 담을 div와 options를 아규먼트로 사용한다.
이렇게 만들어진객체로 map.setDraggable()등등의 메소드를 사용할 수 있는듯 하다.

지도 드래그못하게하기
함수를 만들어서 버튼울 누를시 못하게한다.
예시에서는 이렇게하는데 객체 내장으로 있는듯하다.
그냥 map.setDraggable(draggable)해도된다.

function setDraggable(draggable) {
    // 마우스 드래그로 지도 이동 가능여부를 설정합니다
    map.setDraggable(draggable);
}

마커만들기
마커 포지션 객체 new kakao.maps.LatLng(좌표,좌표)

마커객체 생성

var marker = new kakao.maps.Marker({
    position: markerPosition
});

버튼누르면 기존위치로 가기

3. rttr

RedirectAttributes에
rttr.addAttribute("id", id);하면 @PathVariable처럼 사용할 수 있다는 사실을
타강의를 듣고 알게 되었다.

// 상품 수정 페이지
@PostMapping("modify/{id}")
public String modifyProc(Product product,
        @RequestParam(value = "removeFiles", required = false) List<String> removeFileNames,
        @RequestParam(value = "files", required = false) MultipartFile[] files,
        RedirectAttributes rttr) {
    Integer productId = product.getProductId();
    rttr.addAttribute("productId", productId);
    try {
        boolean ok = productService.modify(product, removeFileNames, files);
        if (ok) {
            rttr.addFlashAttribute("message", productId + "번 상품이 수정되었습니다.");
            return "redirect:/admin/product/detail/{productId}";
        }
    } catch (IOException e) {
        e.printStackTrace();
    }
    rttr.addFlashAttribute("message", "게시물이 수정되지 않았습니다.");
    return "redirect:/admin/product/modify/{productId}";
}

유용한 사실이다 덧셈연산을 통해서 만드는 것보다 이렇게 하는것이 더 안정성이 있다.

2023.06.07

카카오 지도 사용 자체는 쉬운데
키를 얻거나
실제로 구체적으로 새로운 것을 만들어내는 것은 쉽지 않아보인다.

그래도 꽤나 직관적이기때문에 doc를보면서 만지면 금방 만질 수 있을 것 같이 보인다.