[PreOnboarding#보너스] 가구 툴팁 페이지 과제 후기

🥽 깃허브

과제 깃허브로 이동하기

⛳ 목표

API로 받아온 데이터로 가구 툴팁을 렌더링한다.

🎀 구현 기능

• API를 통해서 사진과 가구에 대한 정보 호출
• 각각의 가구에 해당하는 좌표에 돋보기 버튼 배치
• 돋보기 버튼 클릭을 클릭하면 상품정보 tool tip을 출력하고 돋보기 모양이 닫기 버튼으로 변경
• 닫기 버튼을 클릭하면 tool tip이 사라지고 다시 돋보기 버튼으로 변경
• tool tip이 노출된 상태에서 다른 가구를 선택하면 새로 클릭한 가구의 tool tip만 노출
• 하단에 있는 상품목록(Swiper)에서 가구를 선택하면 border 색 변경으로 선택되었음을 표시하고 상단 메인 이미지 상에서 해당 가구의 tool tip 출력

🎁 추가로 구현한 것

• 과제를 제시한 기업의 웹 사이트의 실제 폰트 사용 (Spoqa Han Sans)
  • 구동 속도를 높이기 위해, 웹 폰트가 아닌 로컬 파일로 다운받아서 넣는 방법을 채택
• 그 외에 사용자 편의성을 고려하여 툴팁의 바깥을 눌러도 툴팁이 닫히도록 처리

🚅 타입스크립트 사용

타입스크립트의 끊임없는 에러로 정신이 혼미했지만, 자바스크립트보다 에러 메시지가 구체적이어서 검색으로 해결하기 편했다. 에러 해결은 이 블로그를 참조했다. 런타임에서 돌려보기 전에 컴파일 단계에서 미리미리 에러가 뜨는 점도 좋았다.

🏂 문제 해결

처음에 map으로 렌더링한 돋보기 이미지가 데이터로 받아온 좌표와의 약간의 오차로 계속해서 방 이미지의 가구와 맞지 않게 뜨는 문제가 계속되었다. 마침 슬랙에 들어와있던 같은 팀원과 함께 이 문제로 한참을 고생했지만 쉽게 해결이 되지 않았다. 결국 프리온보딩 전체 슬랙에 질문을 해서 집단지성의 힌트('저희도 안 돼요 ㅜㅜ')와 팀원의 재치('좌표에 맞도록 특정 값을 곱해보자!')로 간신히 해결했다 😛

🍣 해결

기존 API로 받아온 좌표 값에 특정 숫자를 곱해주었다.

const ProductsWrap = styled.div<{ pointX: number; pointY: number }>`
  position: absolute;
  top: ${(props) => `${props.pointX * 1.43}`}px;
  left: ${(props) => `${props.pointY * 1.5}`}px;
`;