원티드 프리온보딩 6차 2차 과제

💡 11팀 | 참여 인원(이미지 클릭시 개인 레포지토리로 이동)

[팀장]정재훈	김인태	김항래	박희주	오강산	이미란	정진우	현승범

배포링크

📚 기술스택

• 선택 이유

  • TypeScript : 정적 타입 지원하므로 컴파일 단계에서 오류를 포착할 수 있고, 여러가지 패러다임을 활용할 수 있어서 채택했다.(절차지향, 객체지향, 함수형)

  • styled-component : 컴포넌트화 시켜 다른곳에서도 사용 가능하며, 제일 많이 쓰는 css 라이브러리라 채택했다.

  • recoil : props drilling을 피하고 페이지간 데이터 공유를 위해 상태관리 라이브러리 도입을 결정했고, 문법이 간단해 learning curve가 낮아 도입을 결정했다.
    

😃 과제 소개

목표

• Fruitte의 스토어 리뉴얼 개발

과제 요구사항 및 시연 영상

1. 사용자 기능

• 스토어 상품목록 조회(30개 이상의 상품목록, 10개 단위의 페이지네이션, 인피니트 스크롤 X)

_2022_09_05_02_27_59_491.mp4

• 스토어 상품 상세조회(이미지, 상품 옵션, 수량, 가격 등)

_2022_09_05_10_47_32_94.mp4

• 스토어 상품 주문(상품 선택, 수량, 배송주소, 연락처 등)

_2022_09_05_02_36_52_894.mp4

• 스토어 상품 주문 내역확인 (주문 번호, 상품명, 주문 수량, 주문 옵션)

_2022_09_05_02_38_38_338.mp4

2. 관리자 기능

• 스토어 상품목록 등록 페이지(이미지, 상품 옵션, 수량, 가격 등)

_2022_09_05_02_41_49_553.mp4

• 스토어 상품목록 관리 페이지
  • 상품 삭제 기능
  • 상품 노출 여부 조정 기능(상품은 유지되어 있되, 노출 여부를 수정하는 기능)

_2022_09_05_02_43_16_117.mp4

팀 프로젝트 진행 방법

• 플랫한 프로젝트 구조 지향
• 취합 시 충돌과 혼동을 피하기 위해 page 단위로 2명씩 팀원을 배정, 해당 page 디렉토리 내에서 모두 개발 후 취합

프로젝트 구조

scr
├─api
├─components 
│  └─styles
├─hooks
├─mockup-data
├─pages
│  ├─admin
│  │  ├─product-list
│  │  └─product-upload
│  ├─fruitstore
│  ├─order
│  ├─order-list
│  └─product-detail
│      ├─store
│      └─style
├─store
└─types
public
└─mockup-data

Commit Convention

Type	Description
feat	Add a new feature
fix	Fix the bug
design	UI design changes such as CSS
style	code formatting
refactor	Refactoring the code
docs	Modify the document
chore	etc.