🧞‍♂️ 알라딘 🧞‍♂️

🖥 화면 소개

1️⃣ Home 페이지

편집장의 선택 & 실시간 클릭 Top 10	이 책의 한 문장 & 어나더커버	페이지 하단 부분

• 편집장의 선택 커스텀 Carousel
• 책 리스트 가로 스크롤
• 배너 슬라이더 부분 슬라이드 시 각 단일 아이템만 화면에 등장
• 베스트 네비게이션 탭 눌렀을 때 Best 페이지로 이동
• 헤더 좌측 로고 눌렀을 때 Home 페이지로 이동
• 헤더 우측 장바구니 아이콘 눌렀을 때 Cart 페이지로 이동

2️⃣ Best 페이지

책 카테고리 & 기간 선택 & 책 리스트	전체 카테고리 팝업	페이지네이션

• 베스트 책 리스트
• 책 타입 선택 가로 스크롤
• 책 카테고리 가로 스크롤
• 책 전체 카테고리 팝업
• 책 리스트에서 타이틀 클릭 시 상세 페이지로 이동

3️⃣ Detail 페이지

책 정보	광고 캐러셀 및 상품 정보	리뷰 등록 및 리뷰 리스트

• 책 정보 불러오기
• 좋아요 저장/취소
• 바텀 바 좋아요/상단 좋아요 버튼 연동 및 토스트 메시지
• 장바구니 담기 및 토스트 메시지
• 네비 바 클릭 시 해당 내용으로 스크롤
• 광고 캐러셀 커스텀
• 이벤트 가로 스크롤
• 글자수 기준 글 '...' 처리
• 글 더보기/접기
• 100자평 입력 글자수 제한 및 byte 수 세기
• 별 클릭해서 평점 반영하기
• 구매하기 클릭 시 장바구니에 담고 Cart로 이동
• 함께 구매한/클릭한 도서

4️⃣ Cart 페이지

헤더 & 탭바 & 필터 & 장바구니 리스트	영수증 & 함께 구매한 도서	알라딘 굿즈 & 알라딘 커피 & 주문 푸터

• 헤더 백버튼 클릭시 뒤로가기
• 헤더 홈버튼 클릭시 홈으로 이동
• 전체 선택 클릭 시 아이템 전체 선택 / 전체 해제
• 각 아이템 개별 선택
• 각 아이템 개수 조절
• 선택된 아이템 영수증 계산
• 각 아이템 개별 삭제
• 선택 아이템 일괄 삭제
• 선택된 아이템 영수증 계산
• 함깨 구매한 도서
• 알라딘 굿즈 & 알라딘 커피
• 선물하기 & 주문하기 버튼

✨ OUR TEAM

지민	정우	수빈
@urjimyu	@jungwoo3490	@binllionaire

👥 역할 분담

👩🏻‍💻 지민

종류	목록
setting ⚙️	글로벌 스타일 이미지 추출 formatting 세팅
view 📱	상세 페이지
api 📡	도서 상세페이지 조회(GET) 도서 리뷰 등록(POST) 장바구니 추가(POST) 책 좋아요/취소(POST)
etc ✨	노션

👨🏻‍💻 정우

종류	목록
setting ⚙️	커스텀 스타일
view 📱	메인 페이지
api 📡	편집장의 선택(GET)
etc ✨	README 작성

👩🏻‍💻 수빈

종류	목록
setting ⚙️	폴더 구조 라우팅
view 📱	공통 컴포넌트 베스트 페이지 장바구니 페이지
api 📡	베스트 도서 리스트 조회(GET) 장바구니 개수 조회(GET) 장바구니 추가(POST) 장바구니 삭제(DELETE) 장바구니 개수 변경(PATCH) 장바구니 목록 조회(GET)

🛠 기술스택

역할	종류
Library
Programming Language
Styling
Data Fetching
State Management
Formatting
Package Manager
Version Control
Deployment

💡 주요 라이브러리

    "react-router-dom": "^6.19.0",
    "react-slick": "^0.29.0",
    "recoil": "^0.7.7",
    "slick-carousel": "^1.8.1",
    "styled-components": "^6.1.1",
    "vite-plugin-svgr": "^4.2.0"

📄 컨벤션 및 브랜치 전략

🔽💙1조 웨비들 공간💙🔽

1️⃣ Commit 컨벤션

• 기본적인것 (feat, fix, chore, ..) 위주로만 지키기!

제목	내용
init	브랜치 첫 커밋
feat	새로운 기능을 추가할 경우
style	기능에 영향을 주지 않는 커밋, 코드 순서, css 등의 포맷에 관한 커밋
fix	버그를 고친 경우
refactor	코드 리팩토링에 대한 커밋
docs	문서를 수정한 경우, 파일 삭제, 파일명 수정 등
chore	빌드 테스트 업데이트, 패키지 매니저를 설정하는 경우, 주석 추가, 자잘한 문서 수정
code review	코드 리뷰 반영

브랜치 전략

페이지명/#이슈번호

브랜치 운영

• main: 최종 Merge를 하는 곳 ❗️
• develop: 개발용 브랜치, 모든 페이지를 Merge 하는 곳
• feature/페이지명: 페이지별로 기능 개발 후 Merge 하는 곳
• 페이지명/#이슈번호: 각 페이지별 기능을 개발할 때 사용한 브랜치

📁 폴더 구조

└── 📁 src
  ├── 📁 assets
  │   └── 📁 fonts
  │   └── 📁 icons
  │   └── 📁 imgs
  ├── 📁components
  │   └── 📁 best
  │   └── 📁 cart
  │   └── 📁 common
  │   └── 📁 detail
  │   └── 📁 home
  ├── 📁constants
  ├── 📁hooks
  ├── 📁pages
  ├── 📁recoil
  │   └── 📁 atoms
  ├── 📁styles
  └── 📁utils