[프로젝트 개요]
팀 FE REPOSITORY 주소: https://github.com/wecode-bootcamp-korea/46-1st-WePet-frontend
개인 REPOSITORY 주소: https://github.com/AGNESBAEK/46-1st-WePet-frontend
개발 기간 : 2023/5/26 ~ 2023/6/9
개발 인원 : 프론트엔드 3명, 백엔드 2명
Tech Stack
(FE) React.js, JavaScript, sass
(BE) Node.js, Express, My SQL, Bcrypt
(공통) : RESTful API, TRELLO, SLACK, Notion, Google Sheets
[담당 업무 및 구현 기능]
1) 프로젝트 매니저
: TRELLO, Notion, Google Sheets를 통한 프로젝트 일정 관리
2) 담당 페이지 레이아웃 및 기능 구현
(1) [필수] 메인 페이지 레이아웃 및 기능 구현
- 고객들의 관심을 유도할 수 있는 다양한 화면 효과
- Carousel 기능: useEffect와 setInterval을 이용하여 5초마다 새로운 이미지로 전환되게 설정
- Slider 기능: 간식/용품 카테고리별 제품을 4개씩 slider로 노출
- 쿼리 스트링을 통해 최신순, 인기순 기준의 상품들을 map 메서드로 노출
(2) [필수] 장바구니 페이지 레이아웃 및 기능 구현
- checkbox로 전체 선택 및 일부 선택 가능, 선택 갯수 노출
- count 컴포넌트로 실시간 제품별 구매 수량 변경 및 reduce 함수를 통한 실시간 총 구매 금액 산출
- 구매 유도를 위한 배송비 무료까지 잔여 금액에 대한 알람창 노출
- 조건부 렌더링으로 장바구니에 담긴 제품이 없을 경우, "앗 장바구니가 텅~" 문구 노출, 구매 버튼 비활성화, 배송비 0원 적용
- 주문 버튼 클릭 시 결제 페이지로 이동
[서버(BE)와의 통신] - 유저의 장바구니 데이터를 GET 메서드 통신
- 장바구니 상품별 수량 변경 부분은 PATCH 메서드 통신 (수량 추가/감소 endpoint)
- 선택 삭제 및 전체 삭제 기능은 DELETE 메서드 통신 (개별 삭제 및 전체 선택 endpoint)
(3) [추가] 마이 페이지 레이아웃 및 기능 구현
- 조건부 렌더링으로 클릭하는 메뉴에 따라 다른 문구 노출
- 1:1 문의 내역에는 버튼 클릭 시 문의 내용 입력 모달 확인 가능
- 이메일 문의 클릭 시 바로 메일을 보낼 수 있게 링크가 적용
- 결제 완료 후 서버에서 ORDER DATA를 GET 통신으로 전달 받아 마이페이지에 구현
(4) [추가] Nav바 일부 기능 구현
- 로그인 여부에 따라 버튼 문구 변경 (로그인/로그아웃)
- 로그인 여부에 따라 NAV 모달에 노출 문구 변경 (앗 로그인이 필요합니다, 안녕하세요 ~님)
- 로그인이 된 경우에만 장바구니, 마이페이지로 진입(로그인이 안 된 경우에는 로그인 페이지로 이동)
Hello World!