📋 ROECY' Chocolate

📌 팀명 : 열품타 (열내지말고 품위지키며 타자치자)

• 모티브로 한 사이트 : https://roycechocolate.com/
• 팀장 : 김진영
• FE : 김진영 김유현 정예원 천찬영
• BE : 오서준 오지호

사용한 기술 스택
FE : JavaScript React.js sass react-slick 등등
BE : Node.js JavaScript MySQL

JUSTCODE 과정에서 처음으로 진행된 1차 팀 프로젝트입니다.

이 프로젝트는 팀장인 저를 포함하여 FE 총 4명, BE 2명으로 이루어진 팀으로 진행했고, 커머스 사이트를 만들어보고 싶어 팀원들과의 협의하에 ROYCE’ Chocolate 홈페이지를 모티브로 제작하게 되었습니다.

여기서 모티브로 제작하였다는 건, 누군가의 코드를 그대로 복사 붙여넣기 한 것이 아닌 페이지의 구조를 참고하여 직접 코드를 작성한것을 뜻합니다.

이 프로젝트의 주요 기능은 회원가입 및 로그인, 상품 구매 등이 있습니다.

---

🔗 링크

💻 GitHub

📋 회고록

---

🔧 내가 구현한 기능

1. Nav (Header)

페이지의 Y 축 스크롤을 감지하여 일정 스크롤 밑으로 내려갔을 때와 nav bar에 마우스가 올라갔을 때 nav bar에 다른 클래스가 적용되게 한 뒤, 각 클래스에 다른 디자인이 적용되도록 구현했습니다.

2. Home (Main) & Carouesel

Carousel은 react-slick 라이브러리를 통해 구현했고, 마우스 hover 시 애니메이션이 동작하도록 구현했습니다.

또 마지막 상품 판매 컴포넌트는 상품 상세페이지를 맡으신 예원님의 컴포넌트를 재활용했습니다.

3. Footer

4. Search

Search 기능은 타이핑을 입력할 때마다 데이터를 요청하는 것이 아니라, 모든 상품 데이터를 받아온 후, 그걸 filter 메소드를 통해 출력하는 방식입니다.

5. Cart

Header에서 CART를 누르거나, 상품을 장바구니에 추가하면 나오는 사이드바입니다.

async & await을 통한 동기 처리로 물품 상세페이지에서 물품 추가를 했을 때, request가 전달되고 Cart에 물품이 추가된 후에야 Cart가 열리도록 구현했습니다.

6. Cart (상세페이지)

Cart 상세페이지에선 Cart에서 쓴 CartItemBox 컴포넌트를 재활용했고, 총 가격이 99달러를 넘지 않으면 총 가격에 배송비 3달러가 추가되게 하였습니다.

또 Kakao 주소 API를 통해 배송지를 직접 입력할 수 있도록 구현했습니다.

7. 채팅

상담원과의 채팅은 Tawk.to 플러그인을 통해 구현했습니다.

---

🤯 기억에 남는 트러블

이번 프로젝트를 하며 가장 기억에 남는 트러블은 백엔드와 통신하며 마주친 수많은 에러들입니다.

특히 Cart쪽을 통신할 때 가장 오류를 많이 마주했는데,
저는 mock data를 통해 Cart UI를 구성해놓았는데 실제로 통신했을 때 상품이 하나도 없는 경우, 수량 1개에서 제거했을 때, 비로그인 상태로 Cart 오픈 시 등등 프론트와 백 두 환경 모두 수많은 에러와 마주했습니다.

하지만 해당 파트를 맡으신 백엔드 서준님과 함께 메타버스 플랫폼 zep에서 계속 실시간으로 소통하며 결국 에러를 전부 잡았고, 모든 경우의 수를 테스트해보았을 때 아무런 에러가 일어나지 않는 걸 보고 매우 뿌듯했던 기억이 있습니다.

---

💪 프로젝트를 통해 성장한 부분

1. 리더십

이번 프로젝트를 통해 처음으로 개발 프로젝트의 팀장을 맡아 회의, 역할 분배, 문제 해결, 컨벤션 맞추기, 티켓 관리 등 다양한 부분을 도맡아 진행하며 리더십을 기를 수 있었습니다.

2. 문제해결 능력

처음으로 진행하는 개발 프로젝트다 보니 다양한 문제에 부딪혔는데, Git 협업 문제, 에러 등 다양한 상황을 마주하며 그 상황을 해결하는 능력을 해결하는 능력을 길렀습니다.

3. 정보 탐색 및 활용

처음 사용해 보는 기능들 ex) Carousel, Kakao 주소 API, async await 등등
을 구글링을 통해 사용하며 인터넷에서 정보를 찾아 새로운 기술을 사용하는 요령을 익혔습니다.