✔️ Fruitte Store

📌 프로젝트 소개

Fruitte의 스토어 사용자, 관리자 리뉴얼 개발

• 사용자

  • 상단 Client 카테고리

• 관리자

  • 상단 Admin 카테고리

📌 배포

https://fruitte-renewal-fe-5.netlify.app/

📌 팀원 소개

김성용	성민규	임상빈	이재하	김초연	박세리
FE Developer	FE Developer	FE Developer	FE Developer	FE Developer	FE Developer

📌프로젝트 과정 소개

Git전략

커밋 컨벤션 및 코딩 컨벤션

📌 프로젝트 구조

open

├─assets
│  ├─client
│  └─img
├─components
│  ├─admin
│  │  ├─login
│  │  ├─prod
│  │  │  ├─prodImage
│  │  │  │  └─dropZone
│  │  │  ├─prodinfo
│  │  │  │  ├─detail
│  │  │  │  └─image
│  │  │  └─table
│  │  └─prodList
│  ├─client
│  │  ├─footer
│  │  ├─header
│  │  ├─orders
│  │  └─productList
│  └─common
│      ├─button
│      ├─input
│      └─layout
│          └─adminLayout
│              ├─header
│              └─side
│                  ├─list
│                  └─profile
├─hooks
├─mocks
├─pages
│  ├─admin
│  └─client
│      ├─main
│      ├─order
│      ├─orders
│      └─prodDetail
├─services
│  ├─admin
│  └─client
├─styles
└─utils

📌기술 스택

📌기능 목록 명세

✔ MSW(Mock Service Worker)을 활용한 가상 데이터 API 적용

• MSW를 활용하여 Mock Data를 주고 받을 수 있도록 최대한 실무 환경에 적용 가능하도록 Mock Rest Server 서비스하였습니다.

  • MSW 적용 목록
    

    • 사용자

      • 상품 전체 조회 (GET: /api/goods&page=?)
      • 상품 상세조회(주문내역 조회) (GET: /api/goods/:goodsId)

    • 관리자

      • 관리자 로그인 (POST: /api/admin/user)
      • 관리자 상품관리 목록 조회 (GET: /api/admin/goods&page=?)
      • 관리자 상품꽌리 노출 수정 (PUT: /api/admin/goods/:goodsId/showflag)
      • 관리자 상품관리 목록 삭제 (DELETE /api/admin/goods/:goodsId)

✔ fakeJS를 활용한 유연한 Mock Data 구현

• fakerJs를 활용하여 MSW를 이용한 Mock Data 통신 시 실제 데이터 환경과 비슷하게 구축하여 매번 다른 정보를 받아올 수 있도록 하였습니다. 이는 페이지네이션과 관련하여 실제 환경과 비슷한 데이터 통신을 구현할 수 있었습니다.

✔ 스토어 상품목록 조회

• 페이지당 최대 32개 상품까지 조회
• 상품을 클릭시 해당 상품 페이지 이동
• 페이지네이션을 이용하여 효율적인 페이지 탐색
• 좋아요와 리뷰 갯수 시각화에 따른 유저 경험 향상

✔ 스토어 상품 상세조회

• 상품 리스트 페이지에서 상품 클릭시 해당 상품 상세 페이지로 이동
• 구매하기 버튼 클릭시 해당 상품 정보를 session storage에 저장
  • 실제 구매 환경과 유사하게 구현

✔ 스토어 상품 주문

• UI/UX를 기반으로 스토어 상품 주문 레이아웃을 구성하고 디자인을 함.
• 세션 스토리지에 담긴 주문내역 데이터를 기반으로 데이터 처리
• 주문하기를 누르면 주문 내역확인 페이지로 이동

✔ 스토어 상품 주문 내역확인

• UI/UX를 기반으로 스토어 상품 주문 레이아웃을 구성하고 디자인을 함.
• 주문 내역을 컴포넌트로 분리하여 구성
• msw를 사용하여 코드 내 axios로 목데이터를 가져옴

✔ 관리자 로그인 페이지

• 관리자는 관리자 계정으로 로그인할 수 있도록 구현하였습니다.
• 관리자 로그인

  ID: test
  PW: 1234

✔ 관리자 상품목록 등록 페이지

• 이미지 등록 시 드랍존을 구현하여 보다 편리하게 이미지 업로드가 가능하도록 하였습니다.
• 이미지 등록 시 최대 10개 미리보기를 구현하였습니다.
• 상품 옵션 및 상품 제공 공시를 유연하게 받아올 수 있도록 테이블로 추가할 수 있도록 하였습니다.

✔ 관리자 상품목록 관리 페이지

• 상품 전체 관리를 msw와 fakerJS를 활용하여 실제 데이터를 불러오는 것과 같도록 구현하였습니다.
• 상품 노출 비노출 상태 변경을 구현하였습니다.
• 상품 노출,비노출 변경시 노출 현재 상태를 확인할 수 있습니다.
• 상품 목록 삭제를 구현하여 상품관리 목록에서 삭제할 수 있습니다.
• 페이지네이션을 구현하여 페이지 클릭 시 다른 정보를 받아볼 수 있도록 구현하였습니다

📌 프로젝트 설치 및 시작

프로젝트 클론

$ git clone https://github.com/wanted-pre-onboarding-frontend-6/Assign-2.git

패키지 설치

$ npm install

서버 실행

$ npm run start