[Main-Project] Day 13(주말) - Kakao map API 책 상태값, 검색창 로직 추가, 지도 확대 축소 기능 레벨 지정, 커스텀 오버레이 수정

📗 Pre-Project, Day 13

• 책 검색 - 책 상태 리스트 구현(책 이름, 대여상태, 상인)
• 커스텀 오버레이 - 상인 수에 따른 오버레이 크기 변경(한자리수, 두자리수, 세자리수 기준)
• 검색창 - 빈칸 상태로 검색 시, 현재 위치 주변 상인 정보 불러오기 로직 추가
• 지도 레벨 - 1~5까지 확대/축소 기능 추가(기본 레벨은 5로 변경)
• 지도 검색 - 주변 도서 대여 상태 안내 구현(대여가능, 예약가능, 불가능 색상별로 표시)
• navbar css 수정 - 색상 및 아이콘 수정
• 채팅 페이지 - "현재 페이지는 서비스 준비중입니다"라고 띄우기

📗 지도 레벨 변경

👉🏻 회의 후 확대 축소 불가능했던 지도를 지도 레벨 1~5까지 확대 축소가 가능하도록 수정하였다.

→ 처음에는 백엔드에서 보내주는 지도 섹터 문제로 지도 확대 축소 기능은 막고 드래깅 이벤트만 주었다. 하지만 확대와 축소 범위를 설정해주면 섹터 문제도 없고 ux적인 측면에서도 개선될 것 같아 수정하게 되었다.

let mapOption = {
		center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
		level: 5, // 지도의 확대 레벨
		// 두번 클릭시 확대 기능을 막습니다
		disableDoubleClickZoom: true,
	};
map.setMinLevel(1);
map.setMaxLevel(5);

📗 도서 대여 상태 안내 구현

👉🏻 유저 주변 도서 대여 리스트 UI를 구현하였으며, 지도 검색에서 유저 주변의 도서 대여 상태(대여가능, 예약가능, 불가능)을 색상별로 표시했다.

<Box>
{bookLists?.map((item: any, i: number) => {
	const { bookId, title, status, merchantName } = item;
	return (
	<List key={bookId}>
		<div className="bookstate">
		<span className="book">{title}</span>
		{status === '대여가능' && <div className="state1"></div>}
		{status === '예약가능' && <div className="state2"></div>}
		{status === '대여/예약불가' && <div className="state3"></div>}
		</div>
		<span className="merchents">{merchantName}</span>
	</List>
);
})}
</Box>

📗 커스텀 오버레이 수정

👉🏻 상인 수(한자리수, 두자리수, 세자리수 기준)에 따라 커스텀 오버레이 크기를 변경해주었다.

→ 10보다 작은 경우, 100보다 작은 경우, 1000보다 작은 경우로 나눠서 커스텀 오버레이 크기를 조정했다.

이 부분은 이미 출시되고 어플 중 map api를 사용한 서비스들을 참고하여 수정한 부분이다. ex) 직방, 다방

let content = document.createElement('div');
			content.setAttribute('class', 'overlay');
			if (data[i].merchantCount! < 10 || data[i].totalBookCount! < 10) {
				content.style.width = '5rem';
				content.style.height = '5rem';
				content.style.fontSize = '2rem';
			} else if (
				data[i].merchantCount! < 100 ||
				data[i].totalBookCount! < 100
			) {
				content.style.width = '6rem';
				content.style.height = '6rem';
				content.style.fontSize = '2.5rem';
			} else if (
				data[i].merchantCount! < 1000 ||
				data[i].totalBookCount! < 1000
			) {
				content.style.width = '7rem';
				content.style.height = '7rem';
				content.style.fontSize = '2.7rem';
			}
			content.style.backgroundColor = content.getAttribute('view')
				? '#124B38'
				: '#26795D';
			content.style.opacity = '0.8';
			content.style.borderRadius = '1000px';
			content.style.color = 'white';
			content.style.display = 'flex';
			content.style.alignItems = 'center';
			content.style.justifyContent = 'center';
			content.innerText = String(
				data[i].merchantCount || data[i].totalBookCount,
			);

✍🏻 회고

→ 금주가 시작하기 전에 작성했던 스프린트1도 끝났다. 아무래도 map api가 우리 서비스의 주요 기능 중 하나이기에 계속해서 수정되고 추가되는 부분이 많아 생각보다 오래 걸리고 있다.






현재 우리 웹앱은 반응형이기에 화면 크기에 따라 유저 주변 500m 반경만 보이고 나머지 지도는 비어 보이는 문제가 있기에.. 대폭 수정하기로 하였다. 윈도우 크기에 따라 요청을 새로 해야하고 섹터도 달라지게 수정해야하는 부분이 많다.

아마 차주에도 map api는 진행될 것 같으며, 개인이 맡은 페이지의 crud도 구현해야 한다.. 화이팅..!