🩺🍪 Dr.Tart

닥터 자르트 클론 프로젝트 회고

• 프로젝트 이름 : Dr.Tart (닥터 자르트 클론)
• 기간 : 11.29 ~ 12.10
• 팀원
  • FE : 길도연, 김상훈, 홍유진
  • BE : 박정현, 성주호, 유민혁
• 목표 : 실제 서비스 수준으로 개발하는 것을 목표로 두고 프로젝트를 진행

Frontend 개발 초기 세팅은 CRA를 이용하여 직접 진행

---

📑 Source

• Frontend Github
• Backend Github
• 백엔드 API 명세서
• Trello
• Notion

---

🛠 Tech Stack

• Frontend : HTML/CSS(SASS), React.js, AWS S3
• Backend : Python3, Django, bcrypt, JWT, AWS EC2
• Database : MySQL
• SCM : Git, Github
• Team Collaboration Tool : Slack, Trello, Notion

---

⌨️ 구현

길도연

Nav

• 프로젝트 전역에 쓰이는 Nav 레이아웃 구현

제품 리스트 페이지

• GET 메소드를 이용하여 제품을 불러와 상태값으로 관리
• 좋아요, 판매량 순등 다양한 값에 기반한 sorting 기능 구현
• react-slick을 사용하지 않고 이미지 슬라이드 구현

장바구니/결제

• 장바구니 및 결제(Order.js)를 url을 통한 조건부 렌더링으로 구현하였으며 전체적인 로직 작성
• 백엔드와의 다양한 통신을 통한 장바구니 추가, 삭제, 구매가 가능하도록 로직 구현
• 쿼리 파라미터를 이용한 결제 이후 정보 표시 구현

김상훈

회원가입

• 회원가입 레이아웃 작성
• 회원가입 구현
• 백엔드와 통신을 통해 DB의 user테이블에 회원을 등록할 수 있도록 함

제품 상세 페이지

• 패스 파라미터의 제품 id값을 이용해 백엔드에서 해당 제품 정보를 가지고 올 수 있도록 구현

홍유진

메인

• 메인 페이지 레이아웃 작성

로그인

• 로그인 유효성 검사 로직 작성
• 로그인 과정에서 받는 jwt 토큰 관리

제품 컴포넌트

• 제품 바로구매 모달 구현
• 제품 좋아요 기능 구현

---

🖥 결과

Nav

Signup

Login

Product List

Product Detail

Cart

Checkout

---