SHOPEASE: 디자인 시스템과 모노레포 적용

프로젝트 소개

디자인 시스템과 모노레포로 구축된 이커머스 플랫폼. 당신의 스타일을 완성할 모든 패션 아이템을 언제 어디서나 손쉽게 쇼핑하세요.

프로젝트 진행기간

2024.10.16 ~ 2024.11.14 (4주)

프로젝트 배포링크

SHOPEASE 배포링크

STORYBOOK 배포링크

테스트 계정

아래 로그인정보를 입력하거나 로그인 페이지에 테스터 로그인 버튼이 있습니다.

판매자
ID: testSeller@gmail.com
PW: Qlalfqjsgh1!

구매자
ID: testBuyer@gmail.com
PW: Qlalfqjsgh1!

🛠 기술스택

💭 기술적 의사결정

• 디자인 시스템 구축: 재사용성과 일관성을 위한 설계 및 도구 활용법

• 모노레포의 필요성과 도입 전략: 프로젝트 관리 효율성 증가 사례

• 스토리북과 크로마틱 배포 / CI/CD 효율적으로 활용하기 (feat. Github Actions) Chromatic

• 컴파운드 컴포넌트로 재사용성과 가독성 높이기

• 전역상태관리 기준에 대한 고찰

• 제어 컴포넌트와 비제어 컴포넌트 비교

• asChild 속성으로 render delegation 컴포넌트 구현하기

• 비지니스 로직과 뷰 분리

• FSD 폴더 아키텍쳐

🔥 성능 최적화

• 이미지 최적화로 이미지 크기 96.8% 줄이기

• 랜더링 최적화 React.memo, useCallback, useMemo

  • LCP 3s -> 1s / TBT 190ms -> 0ms

• lazy loading과 suspense 코드 스플리팅

  
  

🔫 트러블 슈팅

• 상품 prefetch로 인한 불필요한 네트워크 요청 해결 (throttledPrefetch)

• Deferred component로 Loading skeleton 화면 깜빡임 이슈 해결

• 비동기 api 이미지 Layout shift 이슈 Loading skeleton으로 해결

📌 주요기능

토글을 열면 시연영상을 확인하실 수 있습니다

로그인 / 회원가입

로그인 (구글 로그인)

회원가입

• 폼 유효성 검증
• 로그인 후 전역상태로 회원정보 관리
• 구글 로그인 구현

전체 상품 조회

전체상품 - 결과 필터링

전체상품 - 무한스크롤

• 카테고리에 따른 조회 결과 필터링 기능
• 무한스크롤을 활용한 페이지네이션 (React Query)

상품 상세 조회

상품 상세정보

• 상품 정보 조회 및 장바구니 추가
• 이미지 캐러셀을 통한 다량의 상품 이미지 전환

[판매자] 판매상품관리

판매상품관리 - 상품 등록 (이미지 최적화 업로드)

판매상품관리 - 상품 삭제

• 판매 상품 조회, 등록, 수정, 삭제 기능
• 이미지 등록시 webp로 압축

[판매자] 관리자페이지

판매상품관리 - 상품 확인 및 주문 상태 변경

• 주문 완료된 상품 확인 및 주문 상태 변경
• 주문정보의 상태
  • 주문 완료
  • 발송 대기
  • 발송 시작
  • 주문 취소

[구매자] 장바구니

장바구니 - 상품추가,수량변경, 상품 삭제

• 장바구니 상품 수량 수정 기능
• 선택한 상품 금액 및 개수 계산
• 상품 전체/부분 삭제 기능

[구매자] 상품 주문

주문-결제

• 포트원 SDK를 활용한 결제 기능

[구매자] 주문 내역 조회 및 주문 취소

주문 정보 조회 및 주문 취소

• 상품별 주문 취소 기능

와이어프레임 구조 설계

사용한 디자인 톨 : Figma
설계 기준 : 페이지 및 컴포넌트 단위

🏗 아키텍쳐

🗂 폴더구조

┣ 📁my-monorepo
  ┣ 📁.turbo
  ┣ 📁apps
    ┣ 📁shopease
      ┣ 📁.turbo
      ┣ 📁public
      ┣ 📁src
        ┣ 📁app
          ┣ 📁assets
        ┣ 📁features
          ┣ 📁auth
            ┣ 📁api
            ┣ 📁hooks
          ┣ 📁cart
            ┣ 📁api
            ┣ 📁hooks
          ┣ 📁order
            ┣ 📁api
            ┣ 📁hooks
          ┣ 📁product
            ┣ 📁api
            ┣ 📁hooks
        ┣ 📁pages
          ┣ 📁administration
          ┣ 📁categoryProduct
          ┣ 📁checkout
          ┣ 📁detailedProduct
          ┣ 📁home
          ┣ 📁login
          ┣ 📁myProducts
          ┣ 📁purchaseHistory
          ┣ 📁signUp
        ┣ 📁shared
          ┣ 📁components
          ┣ 📁error
          ┣ 📁hooks
          ┣ 📁layout
          ┣ 📁types
        ┣ 📁store
          ┣ 📁auth
          ┣ 📁toast
        ┣ main.tsx
    ┣ 📁packages
      ┣ 📁eslint-config
      ┣ 📁typescript-config
      ┣ 📁ui
        ┣ 📁.storybook
        ┣ 📁src
          ┣ 📁components
            ┣ 📁button
            ┣ 📁carousel
            ┣ 📁dropdown
            ┣ 📁input
            ┣ 📁modal
            ┣ 📁sheet
            ┣ 📁toggle
          ┣ 📁hooks
        ┣ 📁turbo

• my-monorepo: 모노레포의 루트 디렉토리, 전체 설정 파일 포함
• apps : 개별 프로젝트 저장소
  • shopease: Fashion e-commerce 프로젝트
    • app: 전역 설정 및 초기화 파일
    • features: 기능별 모듈(api, hooks 포함)
    • pages: 페이지별 컴포넌트
    • shared: 공용 컴포넌트 및 훅
    • store: Zustand 기반 전역 상태 관리
• packages: 프로젝트 공용 패키지
  • ui: 디자인 시스템
    • components: 디자인 시스템 컴포넌트
    • hooks: 시스템 전용 커스텀 훅