🚀 배포 링크

https://wanted-preonboarding-team3-oddconcepts.netlify.app/

💿 실행 방법

$ git clone https://github.com/pre-onboarding-team3/wanted-codestates-project-3-5.git

$ npm install

$ npm run start

😎 3팀

• 노학민 : 페이지네이션, 상대경로 지정 (팀장)
• 김경봉 : canvas 기능 구현(지정영역 추가, 삭제, 수정)
• 김남경 : canvas 기능 구현(지정영역 추가, 삭제, 수정)
• 김형욱 : 검색 알고리즘 작성, 검색 기능 구현, 에러처리, 리덕스 관리
• 이산하 : 디테일 뷰(상품 검색 시 노출되는 컴포넌트 작성)
• 도지현 : 검색 알고리즘 작성, 검색 기능 구현, 에러처리, 반응형 CSS 스타일링
• 양윤성 : 스켈레톤 UI, 반응형 사이트 CSS 스타일링, 리덕스 관리

🎇사용 기술스택

• Javascript
• React
• Redux
• styled-components
• Axios
• canvas

👩‍💻구현 : 1번과제

1번 과제 : 검색 기능 구현 & 로딩 중을 스켈레톤 UI로 시각화 & 페이지네이션

• axios를 사용해 JSON 데이터를 불러왔습니다. 데이터가 도착한 후 검색 알고리즘을 적용해 관련 검색어까지 포함된 데이터를 리덕스 스토어에 보관했습니다.
• 스켈레톤 UI로 로딩 중임을 시각화해서 표현했습니다.
• 데이터는 15개씩 페이지 별로 보여줄 수 있도록 페이지네이션 기능을 구현했습니다.

검색기능 : 이미지 주소 혹은 상품 코드로 검색했을때, 상품의 상세 정보와 상품과 같은 카테고리를 가진 상품들이 검색됩니다.

상대 경로

이미지를 클릭했을때, 새로운 윈도우로 관련 이미지를 띄워줍니다. 이때 경로는 이미지의 주소로 지정되어 있습니다.

홈버튼

픽셀로고를 클릭했을때, 검색 사이트로 돌아갈 수 있습니다.

반응형 사이트

로컬캐싱

검색된 데이터는 로컬스토리지에 저장되어, 재활용할 수 있습니다.

👩‍💻구현 : 2번과제

선택 영역 추가

• 마우스 드래그로 원하는 영역을 만들어 추가할 수 있습니다.
• 영역을 추가하면 로컬 캐싱

선택 영역 수정, 삭제

• 선택 영역의 삭제, 이름 변경이 가능합니다.
• 수정, 삭제 기능 로컬 캐싱

영역 선택 취소

• 선택영역이 canvas 밖으로 나갈때 영역 선택 취소
• 선택영역의 가로 혹은 세로길이가 1px 일때 영역 선택 취소
• 영역의 이름을 설정하지 않을 시 역역 선택 취소