[Main-Project] Day 11 - Kakao map API 검색창 로직 구현, 현재 위치 버튼 기능 구현, 아래에서 위로 올라오는 css animation, lottie animation

📗 Pre-Project, Day 11

• 로딩 애니메이션 구현
• 검색창 입력 구현 - 책 검색시 해당 되는 책이 없다면 기존 상인마커 및 커스텀 레이아웃 삭제하기
• 리스트 구현 - data가 있을 시 하단에 리스트가 생성되게 구현(아래에서 위로 올라오는 css animation)
• 현재 위치 버튼 기능 구현 - 현재 위치 버튼 클릭시 user의 현재 위치로 재설정
• 멘토링

📗 검색창 로직 구현

👉🏻 책 검색시 해당되는 책이 없다면 기존에 화면에서 보여주던 상인마커와 커스텀 레이아웃 삭제

→ 검색창 로직을 구현하는데 앞서, 머리속이 복잡해서 팀원분과 같이 수도 코드를 작성하며 로직을 정리하는 시간을 가졌는데 굉장히 도움이 되었다.

const handleSearchInput = (e: React.KeyboardEvent) => {
		console.log(e.key);
		if (e.key === 'Enter') {
			if (searchInput === '') {
				setReset(false);
				setMerchantSector(data); // 더미데이터
			} else {
				getTotalBook(searchInput, current.Ma, current.La).then(res => {
					// 책검색 api 요청 -> 데이터가 있으면?
					if (res) {
						notify(dispatch, '검색한 책이 없어요');
						setReset(true);
						setBookSector(res);
						setMerchantSector([]);
					} else {
						// 없으면 ?
						// 리셋안하고 toast 팝업;
						// setReset(false);
						setBookSector(null);
						setMerchantSector([]);
					}
				});
			}
		}
	};

📗 현재 위치 버튼 기능 구현

👉🏻 현재 위치 버튼 클릭시, user의 현재 위치로 재설정

→ 검색창 옆에 현재 위치 버튼을 누르면 다시 현재 유저의 위치로 이동할 수 있도록 기능을 구현하였다.

아래와 같이 버튼에 핸들 이벤트를 주는데 크게 어려움은 없었는데, 실제로 구현해보니 버튼을 누르고 현재 위치로 돌아오기 까지 렌더링되는 시간이 꽤나 걸려서 이 부분은 개선할 수 있을지 보완 스프린트 주에 생각해볼 예정이다.

<TbCurrentLocation
	className="location"
	size={40}
	onClick={handleCurrentLocationMove}
/>
...
	const handleCurrentLocationMove = () => {
		let lat = 0;
		let lon = 0;
		var options = {
			enableHighAccuracy: true,
		};
		navigator.geolocation.getCurrentPosition(
			position => {
				lat = position.coords.latitude; // 위도
				lon = position.coords.longitude; // 경도
				setCurrent({ La: lon, Ma: lat });
			},
			null,
			options,
		);
	};

📗 list css animation 구현

👉🏻 리스트가 아래에서 위로 올라오고, 반동 있게 css animation 구현

→ 유저가 책을 검색하고 해당 커스텀 오버레이를 누르면 아래에서 위로 올라오는 리스트를 구현하기로 하였다. 0% 80% 100% 단계별로 transform: translateY 속성을 지정하여 구현했으며, 반동하는 듯한 효과를 넣어주기 위해 80%에 max-height를 살짝 높게 줬다.

추후에는 커스텀 오버레이를 클릭했을 때만 리스트가 올라오게 로직을 추가할 예정이다.

	return (
		<div style={{ width: '100vw', height: '100%' }}>
			<Container id="map" ref={mapContainer} />
			<Search>
				{/* <MerchantLists merchantList={merchantList} /> */}
				<BookLists bookLists={bookLists} />
			</Search>
		</div>
	);
...
const Container = styled.div`
	width: 100%;
	height: 100%;
`;
const MoveLists = keyframes`
0% {
	opacity: 0.9;
	transform: translateY(220px);
	bottom: -20px;
}
80% {
	opacity: 0.9;
	transform: none;
	bottom: 230px;
	max-height: 230px;
}
100% {
	opacity: 0.9;
	transform: none;
	bottom: 220px;
	max-height: 220px;
}
`;
...
const Search = styled.div`
	border-radius: 30px 30px 0px 0px;
	box-shadow: 20px 20px 20px 20px grey;
	max-height: 220px;
	overflow-y: scroll;
	position: relative;
	bottom: 220px;
	z-index: 1000;
	opacity: 0.9;
	transform: translateY(px);
	animation: ${MoveLists} 1s;
`;

• css animation 블로그_링크
  
  

📗 lottie animation

👉🏻 페이지 로딩 시 화면에 로딩 애니메이션 보이게 구현

→ 렌더링이 될 때 시간이 걸리는데 별도의 액션이 없다면, 기능이 제대로 작동하지 않는다고 느낄 수 있을 것 같아 로딩 애니메이션을 lottie animation을 사용하여 추가하기로 하였다.

→ 전체 페이지에 적용하기 위해 Router.tsx에 Animation를 Suspense fallback로 작성해주었다.

Suspense fallback은 이번에 로딩 애니메이션을 넣기 위해 알아보면서 처음 알게 되었는데, 데이터를 포함한 다른 모든 것을 선언적으로 "대기" 하는 데 사용할 수 있는 기능이라고 한다.

• lottie animation_링크
• Suspense fallback_링크

✍🏻 멘토링 및 회고

→ 멘토님과 현재 우리 팀의 진행 상황을 체크하는 시간을 가졌는데 현재까지는 크게 수정하거나 보충할 부분은 없다고 말씀해주셨고, 팀원들끼리 쉬는 시간을 정확하게 정하는 것이 앞으로 남은 프로젝트 기간에 도움이 될 것 같다고 말씀해주셨다.

개인적으로 현재 프론트 내에서도 소통이 원활하게 되고, 프론트와 백엔드 사이에서도 소통이 잘 되어 좋은데 회의 시간에 있어 아쉬운 점이 있어 수정하면 좋을 것 같다 생각이 들었다. 우리팀은 회의 시작 시간만 정해두고 하고 있는데, 이렇게 되다 보니 회의 시간에 집중해서 필요한 부분만 소통하는 것이 아니라 늘어지며 회의 시간만 길어지는 문제가 있었다. 회의할 내용이 많아 길어지는 것은 상관없지만, 회의하는 시간을 1시간 이런식으로 명확하게 정해두면 좋을 것 같다.