https://www.logitech.com/
배포 된 페이지 : https://shop-front-372501.dt.r.appspot.com/
페이지 로그인시 ID : TOM / PW QWER2@ , JACK / QWER1!
프로젝트 현황 및 작업 우선순위:
1순위 스타일드 컴포넌트로 반응형 웹 추가 현재 index 와 GNB 반응형 90%완료
2순위 oauth 회원가입 도입, oauth profile을 사용한 로그인은 성공
3순위 컴포넌트의 유지 보수 용이성을 위한 기능별 세부로직 모듈화. 각 연산작업을 모듈화 시켜 가독성을 좋게만듬
완료목록
- 클라이언트 전역 상태 관리를 위한 redux도입 완료
- gcp 배포
- next 13업데이트로 인한 next image 리펙토링.
- axios 모듈화 작업 완료.
- 폴더 구조 변경 작업 완료.
- gcp api서버 포트포워딩 ssl발급 완료
- 로컬스토리지 redux persist를 사용한 장바구니 기능 작성 완료
- 주문조회 기능 작성완료 스타일 추가 예정
- 댓글 작성 컴포넌트 및 rating 모듈 작성 완료 레이팅 모듈은 추 후 npm 웹에 배포 예정
- fetch 된 데이터가 많은 곳은 usememo나 usecallback으로 변경해주기
- 댓글- 대 댓글 기능 작성
| index페이지 | 제품페이지 |
|---|---|
 |
 |
| 기능 | 기능 |
| 로지텍웹의 index | 원하는 물품 검색 기능 |
| grid기능을 사용해표현한 케러셀 | api요청을 통한 컨텐츠의 동적 렌더링 , 받아온 api정보를 통한 페이지 네이션,제품 |
| 장바구니 페이지 | 로그인 기능 |
|---|---|
 |
 |
| redux 전역 상태관리를 통한 장바구니 기능 | jwt 발급 및 인증을 통한 로그인 |
components: 페이지나 컴포넌트에 삽입할 컴포넌트가 담긴 폴더입니다.commons: index페이지나 분류하기 힘든 컴포넌트를 모아둔 폴더입니다.productpage: 상품관련 컴포넌트를 모아둔 폴더입니다.userpage: 유저 관련 페이지의 컴포넌트를 모아둔 폴더입니다
-
pages: next js 라우터 기능을 사용하기 위해 사용합니다. -
index: 프로젝트의 메인 페이지입니다. -
pagess: 여러 모듈을 먼저 시험해보는 개발 전용 페이지 입니다. -
product 폴더: 상품페이지와 상품상세 페이지를 동적 라우팅한 폴더입니다. -
goods 폴더: 상품팡세 페이지를 동적라우팅 기능을 사용하기위해 만든 폴더입니다 -
[...category]: 쿼리스트링에서 처럼 입력받은category를 바탕으로 제품정보api통신으로 받아서 렌더링 해주는 다이나믹 라우팅 페이지 입니다. -
[pid]: 쿼리스트링에서 제품번호를 받아 해당 제품 상세정보를api통신으로 받아 표현해주는 다이나믹 라우팅 페이지 입니다. 장바구니 추가 기능 또한 포함이 되어있습니다. -
users: 로그인 및 사용자 정보를 위한 페이지들이 모인 폴더입니다 -
login: login을 위해만든 페이지입니다. id pw를 서버로보내 확인하고 jwt를 발급받습니다 -
usermenu: 로그인 후 쿠키에 담긴 jwt를 사용해 유저의 정보를 인증하고 해당 유저의 정보를 받아서 표현해주는 페이지입니다. -
bags: 장바구니에 넣은 상품의 전역 상태를 보여주는 페이지입니다 -
404: 잘못된 경로를 입력했을때 진입하게되는 페이지 입니다. -
fetches: axios로 api통신하는 api호출 함수를 모아둔 파일입니다. -
redux: redux의 action을 정의하거나, 개별 리듀서 및 리듀서의 타입을 정의해두는 폴더입니다.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent