원티드 프리온보딩 코스에서 개인 과제로 구현한 미션
- 타입스크립트 + React로 구현
- API를 호출하여 방 이미지와 각각의 가구 정보 렌더링
- 방 이미지에서 각 가구의 위치에 해당하는 좌표에 돋보기 렌더링
- 돋보기를 클릭하면 상품 정보 툴팁을 보여주고, 돋보기는 닫기 버튼으로 변경
- 닫기 버튼을 클릭하면 툴팁이 사라지고, 다시 돋보기로 변경
- 툴팁이 노출된 상태에서 다른 가구를 선택하면, 새로 선택된 가구의 툴팁만 노출
- 하단 슬라이드에서 가구를 선택하면, 선택된 가구의 툴팁을 상단에 표시 + border색 변경으로 선택된 가구 강조
- 렌더링된 가구 정보 컨텐츠에는 Spoqa Han Sans 폰트 사용
- 초기 로딩 속도를 높이기 위해 웹 폰트가 아닌 로컬 폰트 다운로드
- git clone 후 yarn install - yarn start를 실행하세요.
- 구글 확장 프로그램 Octotree를 설치하시면, 화면 왼쪽에 폴더 간 빠른 이동이 가능해지는 사이드 바가 생깁니다 😄
- 브라우저 주소창에서 '~github.com'을 '~github.dev'로 수정하시면, vscode 버전으로 바로 브라우저에서 코드를 보실 수 있어요!