HandWash 팀 프로젝트

팀원

Front-End

• 혜리님 : Nav, Main, Footer, 페이지 구현
• 동혁(나): Login, SignUp, 장바구니 구현
• 태양님 : 상품 상세페이지, 즐겨찾기 페이지 구현
• 윤희님 : 상품 리스트 페이지 구현

Back-End

• 다빈님 : 상품 API, 카테고리 API, 장바구니 API
• 민호님 : 유저 API, 즐겨찾기 API
• 공통 : 데이터 모델링, 데이터 추가, 데이터 구축

기술 스택

개발 도구

• React
• JavaScript
• HTML/CSS

협업 도구

• Trello : 전체적인 일정관리와 팀원들의 작업 현황 공유
  
• Git & GitHub : 전체적인 버전관리
• Slack : 팀원들과 소통
• Notion : API명세 공유
  

---

구현기능

Nav

• 회원가입,로그인 창과 API연결

Main

• CSS커스터마이즈 슬라이더 구현

Footer

• 아이콘 클릭시 아이콘에 맞는 모달창 구현

Login

• 데이터베이스에 없는 아이디, 비밀번호로 로그인하면 안되게 하였고, 아이디와 비밀번호에 조건을 걸어 조건이 만족 되면 버튼을 활성화
• 로그인 유효성으로 버튼 활성화
• JWT와 로컬스토리지를 사용한 로그인 기능 구현

Signup

• 데이터를 백엔드와 소통하여 필수 부분을 정하여 기입을 해야 회원가입을 가능하게 하였고 추가 사항은 값만 넘기도록 구현.

• 추가 정보를 클릭시 조건부 렌더링으로 아래 창이 나오게 구현

• 조건부 렌더링으로 추가 창이 나오도록 구현

• state에 인풋 값을 저장해 백엔드에 POST구현

ProductList

• 카테고리 부분에 필터링을 넣어 원하는 제품들만 찾을 수 있도록 구현
• offset, limit을 사용해 더보기를 누르면 추가로 아래에 나오도록 구현해주셨습니다.
• 하트 아이콘 마우스 호버, 클릭시 색상 변화
• 필터 기능 구현
• 더보기 클릭시 상품리스트 추가적으로 보이게 구현

Product

• 애니메이션 적용
• 사이즈 클릭시 state값에 상품 아이디, 사이즈를 저장 후 백엔드로 보내주어 장바구니로 보내는것을 구현해 주셨습니다.
• 동적 라우팅을 적용해 상품페이지에서 이미지 클릭시 상품 id로 url변경되게 구현

Favorite

• 사이즈 버튼 클릭시 조건부 렌더링 활용해 모달창 구현
• 쓰레기통 버튼 클릭시 데이터 베이스에서 상품 지워지게 구현
• 사이즈를 선택 후 담기 버튼을 클릭해 장바구니 데이터베이스에 저장되도록 구현

Basket

• 백엔드 장바구니 API와 연결해 데이터 받아오기 구현

---

코드공유

조건부 렌더링

https://velog.io/@gur0601/%EC%A1%B0%EA%B1%B4%EB%B6%80-%EB%A0%8C%EB%8D%94%EB%A7%81

좋았던 점

서로의 부족한 점을 서로 도와주려 먼저 다가와 주시고 소통을 하면서 각자 작업을 하면서
새로 알게된 정보를 공유해서 너무 좋았다!

아쉬운 점

이번 프로젝트에서 로그인과 회원가입, 장바구니를 맞았는데 아직 데이터 통신이 부족한거 같다.
props, state 관계를 더욱 공부해서 2차 프로젝트 때는 제대로 적용해 봐야겠다

깃 주소

https://github.com/wecode-bootcamp-korea/25-1st-HandWash-frontend