[졸업작품] - 제작 4주차

이번주는 지금까지 만든 메인페이지에 애니메이션과 동적 움직임을 넣어서 페이지의 퀄리티를 높일 생각이다. 

아직까지는 많은 애니메이션을 사용을 하지 않았지만 프론트엔드 직업상 사용자가 경험했을때 더 다양한 모션이 있는것이

좋다고 생각했다. 

지금까지 만든 페이지에 추가로 넣을 옵션은 크게 총 2가지다.

1. 필터를 클릭하면 올라가게 하고 올라갔을때 필터 외 다른 곳을 클릭했을때는 다시 원상태로 내려오게 한다.

2. 필터안의 '내위치' 버튼을 누르면 현재 사용자의 행정구역이 나오게 한다. 

---

1. 필터

필터의 움직임 부분은 '아시아나항공'의 필터 부분을 참고하여 만들었다. 필터를 누르면 필터가 천천히 올라감과 동시에 뒷 배경이 점점 흐려지게 만들고 싶었다. 내릴때도 똑같은 로직으로 하고 싶었다.  

.movein{
  animation-name: movein;
  animation-duration: 0.65s;
  animation-fill-mode: forwards;
}
@keyframes movein{
  from{
    margin-top: 516px;
  }
  to{
    margin-top:100px;
  }
}

.moveout{
  animation-name: moveout;
  animation-duration: 0.65s;
  animation-fill-mode: forwards;


}
@keyframes moveout{
  from{
    margin-top: 100px;
  }
  to{
    margin-top:516px;
  }
}

 

먼저 클래스를 2개를 만들었다. monvein클래스는 필터가 올라갔을때 추가되는 클래스인데 margin-top값을  줄여주는 애니메이션을 넣어줬다. moveout클래스는 그 반대 로직이 작동한다. 이 클래스들은 필터 박스를 사용자가 클릭하면 필터박스 클래스에 추가되도록 하였다.

.blurin{
  animation: blurin 0.65s forwards;
}
@keyframes blurin{
  from{
    filter: blur(0px);
  }
  to{
    filter:blur(6px);
  }
}
.blurout{
  animation: blurout 0.65s forwards;
}
@keyframes blurout{
  from{
    filter: blur(6px);
  }
  to{
    filter:blur(0px);
  }
}

뒷배경도 흐려지게 만들어야 하기 때문에 또 다른 2개의 클래스를 만들었다. blurin클래스는 흐려지게 하는 애니메이션이고 blurout은 그 반대의 기능을 한다. 이 클래스들은 필터박스를 누르면 바디태그 바로 아래 만든 태그에 추가해 주도록 하였다. 

function filter(event){
    var target = event.target.closest("section").className;
    const quickfilter  = document.querySelector(".quickfilter");

    
    if(target!=='quickfilter movein'&&quickfilter.classList.contains("movein")===true){
        quickfilter.classList.remove("movein");
        quickfilter.classList.add("moveout");
        wrap.classList.remove("blurin");
        wrap.classList.add("blurout");
        wrap.style.backgroundColor="";
    }    
    if(target==='quickfilter'|| target==="quickfilter moveout"){
        quickfilter.classList.remove("moveout");
        quickfilter.classList.add("movein");
        wrap.classList.remove("blurout");   
        wrap.classList.add("blurin");
        wrap.style.backgroundColor="rgb(128 128 128 / 26%)";
    }
}

각각에 if문을 줘서 해당 사항에 맞는 조건이 되면 실행되도록 만들었다.

---

2. 내위치

내위치는 현재 사용자의 위치를 좌표로 받아온 다음 주소를 찾는 방식으로 진행했다. 이것을 역지오코딩이라고 하는데 이번에 구현하면서 처음알게 되었다. 

주소를 찾으려면 여러가지 api들이 있겠지만 나는 카카오api가 가장 정확하다고 생각해서 쓰게되었다. 카카오 api를 가져오기 위해선 KAKAO Developers에 가서 로그인을 한 후 애플리케이션을 추가한 후 플랫폼을 등록해줘야 api키를 가져올 수 있다. 

 

처음에는 동기식 방법으로 처리해서 api를 가져오려 했으나 계속된 오류속에서 해결책을 찾지 못했다.

+function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            let lon = position.coords.latitude; //위도
            let lat = position.coords.longitude; //경도
            toAddress(lon,lat);
        }, function(error) {
          console.error(error);
        }, {
          enableHighAccuracy: false,
          maximumAge: 0,
          timeout: Infinity
        });
    }
}


function toAddress(lon,lat){
    console.log(`lon: ${lon}, lat: ${lat}`);
    $.ajax({
        url : `https://dapi.kakao.com/v2/local/geo/coord2address.json?x=${lat}&y=${lon}&input_coord=WGS84`,
        type : 'GET',
        headers : {
          Authorization : 'kakaoAK {REST API 키}'
        },
        success : function(result) {
            let totatlCount = result.meta.total_count; //총 문서 수 
             if (totatlCount > 0) {
                if (result.documents[0].road_address === null) {
                    addressName = result.documents[0].address.region_1depth_name; //지역(시) 이름 
                } else {
                    addressName = result.documents[0].road_address.region_1depth_name;
                }
            }
            addr = addressName;
        },
        error : function(e) {
          console.log(e);
        }
    });
}

{errorType: "AccessDeniedError", message: "cannot find Authorization : KakaoAK header"}

1. errorType: "AccessDeniedError"
2. message: "cannot find Authorization : KakaoAK header"-> 자꾸 이런 오류가 떠서 찾아보니 도메인값이 전달이 잘못 되었거나 api키가 잘못되었다는 말이 대부분이 였는데 내가 api키를 계속 바꿔서 해봤지만 안되는 걸로 봐서는 도메인값이 잘되된거 같다.

그래서 다른 방법으로 진행하였다. 

kakao의 javascript키만 가져와서 카카오의 내장함수를 사용하는 방식으로 해결했다. 

nowplace.addEventListener("click",function(){
    navigator.geolocation.getCurrentPosition(function(position){		// 현재좌표추출
        var geocoder = new kakao.maps.services.Geocoder();        // 주소-좌표 변환 객체를 생성
        var callback = function(result,status){
            if(status === kakao.maps.services.Status.OK){
                var location = result[0].address_name;			// 좌표를 지역이름으로 변경
                nowplace.style.display = "none";
                var div = document.createElement("div");
                var txt = document.createTextNode(`현재 위치는 ${location} 입니다.`);
                div.appendChild(txt);
                place.prepend(div);
                div.style.marginBottom = "30px";
                div.style.fontSize = "30px";
            }
        };
        geocoder.coord2RegionCode(position.coords.longitude,position.coords.latitude,callback);
    });

먼저 getCurrentPosition으로 좌표를 추출 한 후 변수 geocoder에 카카오의 주소-좌표 변환 객체를 생성해줬다. 

콜백 함수를 만들어서 좌표를 지역이름으로 만들어주고 원래 있던 현위치 버튼을 누르면 버튼은 사라지고 새로운 div태그를 만들어서 div 태그에 사용자의 현재위치를 text현식으로 넣어줫다. 

그 후 place태그의 첫번째 자식요소로 들어가야 하기 때문에 prepend메서드를 사용했다. 

---

이번주에 한 기능들이 쉬워보였으나 실제로 구현을 하려다 보니 굉장히 막막했다. 이전까지는 인터넷에 있는 코드들을 가져다 붙이는 수준으로 가능했으나 실제 내가 원하는 기능은 없다보니 혼자 구현해야 된다는 점이 가장 힘들었다. 그러나 약 2주의 시간동안 도전해서 성공된 기능들을 보니 뿌듯했다. 성취감이 있었다. ㅎㅎ