모노레포 환경에서 디자인 시스템을 독립 패키지로 구축한 프로젝트입니다.
일관성 있고 재사용 가능한 UI 컴포넌트를 다양한 프로젝트에서도 적용할 수 있는 구조를 마련했습니다.
🗓️ 프로젝트 진행 기간
- 2024.10.16 ~ 2024.11.14
- 2024.11.15 ~ 리팩토링 진행 중
책과 사람을 연결하는 독립 서점 플랫폼 📚책갈피📚
- 개성 넘치는 독립 서점과 소규모 출판사들의 특별한 책을 만나는 공간
- 책갈피에서 당신만의 책을 발견하세요!
📖 서비스 바로가기: https://book-mark-one.vercel.app/
🎨 BOOKMARK 디자인 시스템: Storybook
판매자
ID: sellertest@test.com PW: sellertest123
구매자
ID: buyertest@test.com PW: buyertest123
- 사용자 인증 및 권한 관리
- 전체 상품/상품 상세 조회
- 구매자 장바구니 관리
- 구매자 상품 주문 관리
- 판매자 판매 상품 관리
-
- 도서 이미지 파일 크기 축소를 위해
browser-image-compression라이브러리 사용 maxSizeMB와maxWidthOrHeight설정으로 이미지 용량을 1MB 이하로 조정- 파일을 Webp 형식으로 변환해 파일 크기와 네트워크 사용량 감소
- 총 용량 감소: 225.9 MB → 101.95 MB로 약 55% 용량 감소
- 최대 로드 시간 감소: 최대 로드 시간 801ms → 606ms로 약 24.3% 감소
- 도서 이미지 파일 크기 축소를 위해
-
- 메인 및 카테고리 페이지에서 상품 상세 페이지로 이동 시 prefetch 적용
- 상품 카드에 마우스 오버 시
queryClient.prefetchQuery를 활용해 데이터를 미리 가져옴 getQueryData를 통해 캐시 확인 후 캐시가 없는 경우에만 서버 요청 실행- FCP 개선: 약 34.7% 개선되어 초기 콘텐츠가 사용자에게 더 빠르게 표시됨
- LCP 개선: 약 50.6% 감소해 페이지의 주요 콘텐츠가 훨씬 빨리 렌더링됨
-
- 재사용성과 일관성 있는 UI 컴포넌트 설계에 대해 학습하고자 디자인 시스템 구축
- 컴파운드 컴포넌트 패턴으로 컴포넌트를 설계해 재사용성과 유연성 확보
- Context API를 활용해 상태를 공유하고, 상위와 하위 컴포넌트 간 일관성 유지
- 제어/비제어 방식을 모두 지원하는 Modal 컴포넌트 구현
- Storybook에 문서화하여 각 컴포넌트를 다양한 상황에서 검증 가능하도록 설정
-
- 디자인 시스템을 별도 패키지로 관리하여 현재와 앞으로의 프로젝트에 일관성 있게 재사용 가능하도록 함
- TurboRepo의 도입으로 캐시 관리를 최적화하고 빌드 시간을 단축
tsconfig.json등 설정 파일을 관리하며, 각 파일의 역할과 모노레포 환경에서의 활용 방식을 이해
-
- 문제: 메인 페이지와 카테고리 상품 페이지에서 동일한 queryKey 사용으로 인해 페이지 전환 시 잘못된 데이터가 재활용
- 해결: queryKey를 옵션 기반(catecory, limit)으로 세분화하여 페이지별로 고유한 쿼리 키를 가지도록 변경
- 결과: 각 페이지에서 요구하는 데이터만 캐싱 및 반환되며, 페이지 전환 시 데이터 불일치 문제가 해결
-
- 문제: Input 컴포넌트 구현 시 사용자 정의 속성(full, hasError, hasIcon)이 DOM에 전달되어 에러 발생
- 해결: Styled Components의 shouldForwardProp 옵션을 사용해 특정 속성을 DOM에 전달되지 않도록 필터링
- 결과: 경고 메시지가 사라지고 DOM에 불필요한 속성이 전달되지 않음. 컴포넌트가 안정적으로 동작하도록 개선
📦 Project_BookMark # 통합 프로젝트 루트 폴더
┣ 📂apps # 애플리케이션 관리
┃ ┗ 📂bookmark
┃ ┣ 📂src
┃ ┃ ┣ 📂components # 기능별 컴포넌트 관리
┃ ┃ ┃ ┣ 📂auth
┃ ┃ ┃ ┣ 📂cart
┃ ┃ ┃ ┣ 📂common
┃ ┃ ┃ ┣ 📂order
┃ ┃ ┃ ┗ 📂product
┃ ┃ ┣ 📂hooks # 커스텀 훅 관리
┃ ┃ ┣ 📂lib # 기능별 라이브러리 관리
┃ ┃ ┃ ┣ 📂auth
┃ ┃ ┃ ┣ 📂cart
┃ ┃ ┃ ┣ 📂common
┃ ┃ ┃ ┣ 📂order
┃ ┃ ┃ ┣ 📂product
┃ ┃ ┣ 📂pages # 페이지 관리
┃ ┃ ┣ 📂store # 전역 상태 관리
┃ ┃ ┃ ┗ 📂auth
┃ ┃ ┣ 📜App.tsx
┃ ┃ ┣ 📜firebase.ts
┃ ┃ ┣ 📜main.tsx
┃ ┗ 📜router.tsx # 라우터 설정
┣ 📂packages # 공용 패키지 관리
┃ ┗ 📂design-system # 디자인 시스템 패키지 폴더
┃ ┣ 📂src
┃ ┃ ┣ 📂badge
┃ ┃ ┣ 📂button
┃ ┃ ┣ 📂card
┃ ┃ ┣ 📂input
┃ ┃ ┣ 📂label
┃ ┃ ┣ 📂modal
┃ ┃ ┣ 📂select
┃ ┃ ┣ 📂textarea
┃ ┃ ┣ 📂toast
┃ ┃ ┗ 📂tokens
┣ 📜package.json
┣ 📜tsconfig.base.json
┣ 📜turbo.json
┗ 📜README.md