BBBick ·

온라인 북(Book) 커머스 플랫폼 입니다.

title	desc
배포 URL	https://bbbick.vercel.app
프로젝트 진행 기간	2024.04 ~ 2024.05 (4주)

	ID	PW
구매자	buyer@email.com	qwe123
판매자(관리자)	seller@email.com	qwe123

시작하기

{
  npm: '10.2.3',
  node: '20.10.0'
}

git clone https://github.com/hxxtae/bbbick.git
cd bbbick
npm install
npm run dev

기술적 도전

• React Dev Tools의 Profiler를 활용한 렌더링 성능 개선
• Lighthouse Treemap을 활용한 Tree Shaking 및 빌드 경량화
• Lighthouse를 활용하여 LCP 점수 개선
• DOM outside 클릭 감지에 대한 고민

트러블슈팅

• Named export 컴포넌트 lazy 호출 시 문제
• 라우터 페이지 이동 시 스크롤이 유지되는 현상

주요 기능

[신간 도서, 베스트 셀러, 추천 책 골라보기]

카테고리별로 책을 조회하여 원하는 유형의 책을 찾을 수 있습니다.

[구매자용 장바구니]

장바구니에 구매할 책 상품들을 보관할 수 있습니다.

[구매자용 상품 주문 및 결제]

장바구니에 담은 책 상품들을 수량 및 금액 확인 후 바로 결제 프로세스를 진행합니다.

[구매자용 구매내역]

결제된 상품들을 언제든지 구매내역을 통해 확인할 수 있습니다. 결제를 취소하고 싶다면 주문 취소가 가능합니다.

[구매자용 마이페이지]

구매자의 프로필, 닉네임, 비밀번호, 배송지 주소 등을 관리할 수 있습니다.

[판매자용 상품등록, 수정, 삭제]

판매자는 상품을 등록 및 수정, 삭제하여 책 상품을 관리할 수 있습니다.

(UI 수정중)

와이어프레임 구조 설계

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

아키텍처

기술 스택

디렉터리 구조

📦src
 ┣ 📂components
 ┣ 📂constants
 ┣ 📂hooks
 ┣ 📂interface
 ┣ 📂layout
 ┣ 📂router
 ┣ 📂service
 ┣ 📂store
 ┣ 📂styles
 ┣ 📂utils
 ┣ 📂pages
 ┃ ┣ 📂Best
 ┃ ┣ 📂Cart
 ┃ ┣ 📂History
 ┃ ┣ 📂Home
 ┃ ┣ 📂Like
 ┃ ┣ 📂Management
 ┃ ┣ 📂MyPage
 ┃ ┣ 📂Order
 ┃ ┣ 📂ProductDetail
 ┃ ┣ 📂Recent
 ┃ ┣ 📂Search
 ┃ ┣ 📂Signin
 ┗ ┗ 📂Signup

폴더명	설명
components	재사용 컴포넌트들을 모아놓은 폴더
constants	상수 값을 모아놓은 폴더
hooks	커스텀 훅 선언
interface	타입에 대한 정의를 모아놓은 폴더
layout	컴포넌트 페이지 레이아웃을 모아놓은 폴더
pages	컴포넌트 페이지를 모아놓은 폴더
router	페이지 라우터 컴포넌트들을 모아놓은 폴더
service	서버와 관련된 config 폴더
store	전역 상태를 관리하기 위한 폴더
styles	전역 스타일을 관리학 위한 폴더
utils	유틸 함수를 모아놓은 폴더