33기 1차 프로젝트 6팀 ToWe

프로젝트 선정이유

• 깔끔하고 아기자기한 UI로 보기 좋게 레이아웃을 잡고, 기능 구현에 중점을 두어 개발할 수 있다.
• 커머스 사이트로써 기본적인 페이지 구성이 잘 되어 있다.

프로젝트 소개

한정된 기간동안 기획과 디자인보다는 개발에 집중하기 위해서 일부를 (무직타이거)을 참조하여 학습목적으로 제작하였습니다.
코드 및 이미지를 남용 및 악용할 경우 법적으로 문제될 수 있습니다.
이 프로젝트에서 사용되고 있는 로고 및 배너는 해당 프로젝트 팀 소유이므로 외부인이 허가없이 사용할 수 없습니다.

1. 프로젝트 기간 및 인원

프로젝트 기간 22.05.23 ~ 22.06.03 (약2주)

2. 개발 인원

Front-end : 김형석, 김슬비, 김정준, 노해리, 유지후

Back-end : 정치영, 정병휘

3. 구현 항목

필수구현

회원가입 / 로그인, 메인페이지, 상품 리스트, 상품 상세, 장바구니, Nav / Footer, 마이페이지

추가 구현

베스트10, 주문하기(포인트결제), 리뷰 / 게시판

4. 기술 스택

Front-end

: HTML/CSS, JavaScript, React.js, React-Router, Sass

Back-end

: Python, Django

5. 협업도구

(1) Trello

• 팀원간 프로젝트 협업도구로는 Trello를 활용했다.

(2)Slack

6. Front-end 기능 구현

1. 회원가입 페이지

• id, pw 유효성 검사
• Back-end DB에 유저정보 저장하기

2. 로그인 페이지

id, pw 유효성 검사
로그인시 토큰 발급 후 저장

3. 메인 페이지

• 메인 페이지 상단 자동 무한 캐러셀 애니메이션
• 메인 페이지 하단 무한 슬라이더 애니메이션
• 스크롤 이벤트 애니메이션
• 메인화면 레이아웃 작업

4. 제품 리스트 페이지

• Query String 을 이용한 카테고리별 제품 다중 필터 기능 구현
• 가격순, 연령순 정렬 기능 구현
• 제품 이미지 호버 시에 이미지 변경
• 각 제품 좋아요 버튼 구현
• 더보기 기능

5. 제품 상세 페이지

• 작은 이미지 클릭시 큰 이미지로 변환
![이미지변환기능](https://user-images.githubusercontent.com/102506443/172135726-42d23b01-6274-4bd0-b1c1-1724b4e61829.gif)

• 색상별 장바구니 담기 기능
 ![색상별담기](https://user-images.githubusercontent.com/102506443/172135794-929a15be-c318-4346-9a2e-6676e4f24358.gif)


• 후기작성
 ![후기작성](https://user-images.githubusercontent.com/102506443/172135806-dd36185a-b810-4b50-bec1-a1ea6b94e910.gif)


• 질문작성
 ![질문작성](https://user-images.githubusercontent.com/102506443/172135813-afdb063e-b58c-4d0d-bc1f-b6e17dcf6bd1.gif)

6. 제품 상세 페이지

7. 마이페이지

• Back-end DB 저정된 유저정보 요청 및 리스트업
• Back-end DB 저정된 유저별 주문 관리 내역 및 유저가 쓴 글 리스트업
• 리스트업 할때 중복되는 UI map함수 사용
• 데이터를 받아올때 헤더에 로컬스토리지에 저장된 토큰을 첨부하여 요청

8. 장바구니 페이지

• GET 호출로 백엔드로부터 데이터 받아온 뒤 리스트업
• 장바구니 리스트별 수량 변경 기능 구현
• 장바구니 리스트별 삭제 기능 구현
• 장바구니 비어있을 때 빈 장바구니 화변 보여주기
• 장바구니 리스트에 따른 가격 합계

9. 주문관리 페이지

• GET 호출을 통해서 백엔드로부터 데이터를 받아온 뒤 여러개의 데이터를 setState 함수를 통해 렌더링 작업
• POST 호출을 통해 로그인시 발급받은 토큰을 localStorage에서 가져와 headers에 담아서 보낸뒤 페이지 이동

10. 베스트10 페이지

• 컴포넌트 재사용, 폼에 맞도록 조정
• fetch()를 통해 DB로 부터 이미지 데이터를 받아온 뒤 렌더링 작업

11. 게시판 페이지

탭메뉴 구현 (게시판별 레이아웃이 똑같아 클릭이벤트를 줬을 때 각가 다른 데이터 렌더링)

12. Nav / Footer

• 상수데이터를 만든 후 map method를 사용하여 Navigation bar 정리
• 조건부 렌더링을 사용하여 token을 받았을 때와 받지 못했을 때 마이페이지 및 장바구니 클릭 시 로그인 페이지 이동
• 각 항목에 맞는 quary parameter를 설정하여 클릭시 상품에 맞는 query parameter인 상품리스트 페이지 이동

7. Back-end 기능 구현

1. ERD

2. 회원가입 및 로그인 API

ID, Password 암호화 및 유효성 검사

• bcrypt 활용한 Password 암호화 적용
• JWT 활용한 로그인 기능 구현
• 정규표현식 활용한 유효성 검사
• 유효성 검사 모듈화(validator)
• 로그인 데코레이터 기능 구현

3. 유저정보 확인 API

사용자 관점에서 해당 유저정보 요청시 개인정보 확인 기능 구현

• 로그인 데코레이터를 통한 유저정보 식별
• 해당유저의 개인정보 / 리뷰정보 / 구매정보 확인 기능 구현

4. 제품 리스트 API

• 작성중

5. 제품 상세 API

• 작성중

6. 좋아요 기능 API

• 작성중

7. 리뷰 기능 API

RESTful 방식으로 제품 ID를 식별, 해당 제품에 대한 리뷰 작성 및 확인 기능

• 제품ID 및 유저ID(Token)을 통해 제품과 유저를 식별
• POST, GET 메서드를 활용하여 리뷰작성 및 리뷰확인 기능 구현

8. 장바구니 기능 API

• 장바구니 담기(post), 확인(get), 삭제(delete) 기능 구현
• transaction 활용 입력데이터 무결성 확보 구현

9. 주문관리 기능 API

• 결제시스템을 모방하여 포인트를 사용하여 주문하기 기능 구현
  (토큰, Proudct_Option_id, Quantity 값을 입력받아 '주문' 테이블에 삽입)
• 데이터 삽입시 transaction 활용, 데이터 무결성 확보
• 유저의 '주문확인' 기능 구현

시연영상

https://www.youtube.com/watch?v=wX-WB_yCXtg