kgwoo / bonjuk_project

KiBon (기본에 충실하자!)

프로젝트 주제

본죽 사이트 클론 프로젝트

• 유명 프렌차이즈 본죽에서 상품 소개 및 판매를 중심으로 제작된 사이트.

팀원

• 이효정 / https://hj-tilblog.tistory.com/
• 조윤민 / https://velog.io/@yoonminsohappy
• 손수민 / https://velog.io/@codeamor
• 김건우 / https://velog.io/@geonoo99

팀 회의록

https://trello.com/b/EpdX6Zqf/kibon

사용한 기술

1. Front-End

• HTML / CSS
• JavaScript
• React
  • create-react-app settings
  • 공통 Component 재활용
  • React-slick
  • React-Router-DOM
  • fetch를 이용한 API 호출
  • map을 이용한 jsx 리턴
  • Routes.js 의 path 를 이용한 동적 라우팅
• SASS

2. Back-End

• Python
• Django
• MySQL

Back-End Repository: https://github.com/wecode-bootcamp-korea/11-KiBon-backend

3. 공통

• JSON
• Git
• AWS
• Linux
• HTTP
• Postman
  • API 호출
  • 응답 확인
• Scrum 진행 방식을 통한 협업

기능 구현

• 회원가입 & 로그인 페이지

  • 조건 충족시 회원가입 & 로그인
  • token을 localStorage에 저장하여 활용
  • token값을 가지고 로그인 상태 유지 & 로그아웃

• 메인 페이지

  • JavaScript의 이벤트와 CSS의 애니메이션 효과를 통해 동적인 페이지 구현
  • 검색 기능을 통해 원하는 메뉴 필터링 기능 구현

• 메뉴 소개 페이지

  • 메뉴 리스트와 메뉴 상세 페이지 연결
  • 백엔드 API에서 필요한 데이터 호출

• 상세 메뉴 페이지

  • 메뉴별 고유의 경로를 가진 상세 페이지
  • 백엔드 API에서 필요한 데이터 호출

• 장바구니 페이지

  • 장바구니 추가, 삭제 기능 구현

구현 화면

https://www.youtube.com/watch?v=f84czHkMht8&feature=youtu.be