🍊 오늘의 할일
🍪 필수 Task
비밀번호 변경, 프로필 삭제 등 modal height 조절회원탈퇴 후 로그인해도 로그인이 이루어짐 <= 에러Oauth 회원탈퇴 시 비밀번호입력하지 않아도, 회원탈퇴 가능하도록 UI 변경 필요- 가이드 카드 모달창 신청하기, 채팅하기 상태에 따른 변경사항 merge 후 확인 필요
🍊 오늘의 정리
🍉 가이드 카드 필터링 UI 수정
문제상황
처음 UI는 아래와 같이 돋보기를 클릭하면 여행날짜, 가이드 성별로 필터링된 결과를 보여주는 것이었다.
하지만, 같은 팀원들 조차 해당 돋보기를 눌러야 검색되는지 인지하지 못했고, 에러라고 생각했다고 한다.
문제해결
이를 개선하고자 아래와 같이 UI를 변경하였다.
글자로 된 적용하기버튼이 돋보기보다는 직관적으로 클릭을 유도할 수 있다고 생각하여, 아래와 같이 변경하였다.
🍉 overlay로 구현한 Marker (마커 이미지 로딩 개선)
문제상황
카카오 마커의 경우 .png, .jpg와 같은 이미지 파일로 마커가 표시되기 때문에, 인터넷 환경이 느린 경우 지도와 가이드카드는 표시되지만, 아래와 같이 마커만 표시되지 않는 경우를 발견했다.
let imageSrc = '/asset/loading/loading4.png';
let imageSize = new kakao.maps.Size(35, 35);
let markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 새로운 마커 생성
for (let i = 0; i < positions.length; i++) {
let position = positions[i];
let marker = new kakao.maps.Marker({
map, // 마커를 표시할 지도
position: new kakao.maps.LatLng(position.latitude, position.longitude), // 마커를 표시할 위치
image: markerImage, // 마커 이미지
clickable: true, // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정
});
문제해결 고안
이를 해결하기 위해 이미지를 이용한 마커가 아닌 커스텀 overlay로 마커를 대체하여 태그로 마커와 같이 표현해 주려고자 하였다.
처음에는 div태그를 사용하고 css로 마커의 모양을 만들어 줄 예정이었다. 하지만, 로딩 페이지를 만드는 과정에서 loading4.svg 파일을 만들게 되어 svg 태그로 다시 수정하게 되었다.
(조금 더 빨리 svg 파일을 만들었다면, 그냥 이미지를 svg 파일로 변경해 주기만 하면 되었을 것 같다...)
📎 SVG 학습 정리
어려웠던 점
marker을 overlay로 표시해주는 것은 어렵지 않았다. 하지만 overlay에 이벤트를 심어주는 과정에서 헤매기도 했다.
overlay는 marker처럼 이벤트 api를 제공해 주지 않는다. 그렇기 때문에, DOM에 접근하여 addEventListener를 통해 이벤트를 걸어주는 방법으로 이를 해결했다.
수정 전 소스코드
// 마커 이미지 / 이미지 크기 / 마커 이미지 생성
let imageSrc = '/asset/loading/loading4.png';
let imageSize = new kakao.maps.Size(35, 35);
let markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 새로운 마커 생성
for (let i = 0; i < positions.length; i++) {
let position = positions[i];
let marker = new kakao.maps.Marker({
map, // 마커를 표시할 지도
position: new kakao.maps.LatLng(position.latitude, position.longitude), // 마커를 표시할 위치
image: markerImage, // 마커 이미지
clickable: true, // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정
});
let overlay = new kakao.maps.CustomOverlay({
map,
content: `<div class="infowindow">
<div class="dday">D - ${getDday(positions[i].guideDate)}</div>
<div class="wrapper">
<div class="title">${positions[i].title}</div>
<div class="content">${
positions[i].content.length > 20
? positions[i].content.slice(0, 20) + '...'
: positions[i].content
}</div>
</div>
</div>
`,
position: marker.getPosition(),
xAnchor: 0.5,
yAnchor: 0.02,
});
overlays[position.guideId] = overlay;
overlay.setMap(null);
kakao.maps.event.addListener(marker, 'mouseover', () => overlay.setMap(map));
kakao.maps.event.addListener(marker, 'mouseout', () => overlay.setMap(null));
kakao.maps.event.addListener(marker, 'click', () => clickMarker(positions[i].guideId));
markers[position.guideId] = marker;
}
start coding