1주 차 설 연휴 개인 과제 (22.01.31 ~ 22.02.04) TIL

프리온 보딩에서는 과제마다 각 기업이 요구하는 기술을 바탕으로 과제를 진행하는 방식입니다.

 

설 연휴 개인 과제 상품 정보 사이트 만들기

가구들의 툴팁을 볼 수 있는 상품 정보 페이지 만드는 것이 과제였습니다

 

배포 깃 허브 링크 

https://github.com/Gilpop8663/productLink

GitHub - Gilpop8663/productLink: 원티드 프론트앤드 프리온보딩 2기 14팀 김영길의 상품 링크 페이지 프

 

상품 정보 페이지

 

• 가구 정보가 있는 곳에 돋보기 모양의 버튼을 표시
• 돋보기를 클릭하면 상품정보 tool tip 출력되면서 돋보기 모양이 닫기 버튼으로 변경
• 닫기 버튼을 클릭하면 tool tip을 없애고 돋보기 버튼으로 변경
• tool tip은 하나만 노출. tool tip이 노출되고 있는 상태에서 다른 가구를 선택하면 노출되고 있던 tool tip은 닫히고 새로 클릭한 가구 tool tip만 노출
• 하단에 있는 상품목록에서 해당 가구가 선택되었으면 tool tip 출력

 

정리 및 회고

새로 알게 된 점

• 배포 방법을 AWS 배포를 선택하여서 AWS S3 , CloudFront 방법으로 https 배포 환경을 구축하였습니다. 생각보다 AWS 배포하는 것이 생각보다 어렵진 않았지만 쉽지도 않았던 것 같습니다.

 

AWS S3 ,CloudFront로 리액트앱 프론트앤드 웹페이지 배포하기

 

• API에서 pointX, pointY 해서 css 스타일로 각각 left, top에 넣어주어서 위치를 조정하는 것을 알게 되었습니다.

힘들었던 점 / 해결과 극복 방법

• 상품 정보를 띄우는 것은 쉬웠지만 하단 부분의 상품 목록에 드래그로 움직이는 것이 어려웠었다. 우선 드래그를 라이브러리 없이 해보려 했지만 아직 라이브러리의 도움을 받지 않고 하기엔 자연스럽지 않게 나와서 framer-motion 라이브러리를 사용하여 드래그를 구성하였다.

 

• 라이브러리를 사용해서도 드래그 이벤트가  페이지의 스크롤 너비를 구해서 자동으로 오른쪽 스크롤 끝에서 멈추었어야 했다. 그 과정에서 useRef로 하는 방법을 찾았고 클릭하는 경우에는 각각 요소 개수에 따라 몇 px 씩 필요한지 구해서 삼항 연산자로 클릭하였을 때 해당 상품 목록의 x값으로 이동하게 하였습니다.

 

• 상품 정보가 나올 때 말풍선과 해당 상품에 대한 정보가 화면에 떴어야 했는데 해당 API의 x, y 위치에 따라 말풍선과 정보의 위치가 다르게 나왔었다. 말풍선의 경우에는 검색을 통해서 해결하였고 위치에 따라 다르게 위치해야 하는 것은 styled에 x, y의 변수를 주어서 변숫값에 따라서 다르게 css를 표시하는 것으로 해결하였습니다.