hyewon3938 / book-shop

도서 상품 온라인 샵

- 온라인 도서 쇼핑몰 , 북샵 -

화면을 클릭하면 사이트로 이동합니다

프로젝트 진행

• 개발 기간 : 2021.07.09 ~ 2021.08.12 (5주)
• 개발 인원 : 1명
• 담당 : 기획 및 UI 디자인(100%), FE개발(100%), BE개발(100%)

서비스 소개

도서 상품을 구매할 수 있는 온라인 샵입니다. 도서 상세정보에서 도서를 3D로 확인할 수 있는 특징이 있습니다.
카테고리별로 분류된 도서를 확인할 수 있고, 쇼핑몰의 추천 책과 새로 들어온 책 리스트를 볼 수 있습니다.

서비스 기능

→ 'bookshop' 사이트 링크

→ 포트폴리오 링크

• 회원가입
• 로그인/로그아웃
• 상품 정보 확인
• 카트에 상품 추가/삭제
• 상품 재고 확인
• 적립금으로 상품 주문
• 마이페이지에서 회원정보와 주문 내역 확인

book-shop's Issues

feat : HOC 구현

• 권한확인용 hoc 구현
• path확인용 함수 구현
• 라우터에 적용

chore : 서버 환경설정

• express로 서버 구축
• mongo DB 연결

feat : 로그아웃 API

• controller함수
• User 모델에 findByToken static 함수 만들기
• 로그인 여부를 확인하는 권한확인 middleware 함수 만들기
• 라우트 생성
• 라우트 연결

feat : ProductsPage UI

• Products Page 컴포넌트 UI
• Product 컴포넌트 UI

refactor : 모바일 모드에서 hover 효과 제거

• 모바일에서는 hover효과 제거

feat : 이메일 중복 검사 API 연동

• 이메일 중복 검사 API 연동

feat : 스크롤 관련 기능 추가

• 뒤로 가기 했을 때에도 스크롤 위치 값이 유지 되는 기능 추가
• 스크롤 최상위로 올리는 버튼 추가

feat : 무한 캐러셀 구현

광고용 캐러샐

• 무한 캐러샐 구현
• 일정 시간마다 자동으로 넘어가는 기능 구현
• 마우스오버시 자동넘김 멈춤 기능 구현

책소개용 캐러셀

• 무한 캐러샐 구현
• 5개의 아이템이 보여지고, currentItem이 중간에서 가장 앞으로 나오도록 구현

feat : 이메일 중복 검사 API

• controller 생성
• 라우트 생성
• 라우트 연결

feat : 회원가입 API 연동

• 회원가입 API 연동

feat : ProductDetailsPage UI

• ProductDetailsPage UI 구현
• 책 모양을 입체적으로 볼 수 있도록 3D css 구현
• 반응형 UI
• 목차나 책소개 등 길어질 경우 더보기 버튼 구현

feat : 컴포넌트 스타일 기본 설정

• style reset
• 컴포넌트에 Global style 적용
• styled-component 테마 파일 적용

feat : 상품 상세정보 가져오기 API 연동

• api 요청
• response UI에 적용

feat : 회원가입 API

• User 스키마 추가
• 비밀번호 암호화
• controller 생성
• 라우트 생성
• 라우트 연결

feat : RegisterPage UI

• 회원가입 페이지 UI
• 각 데이터 유효성 검사

fix : 로그인 시 계속 비밀번호 오류 나는 문제 해결

feat : 홈페이지 광고 가져오기 API

Ad API

• Ad 스키마 모델
• controller
• routes
• index에 적용

feat : 권한확인 API

• controller함수
• 라우트 생성
• 라우트 연결

feat : 로그인 API

• controller 생성
• 라우트 생성
• 라우트 연결

feat : 상품 리스트 가져오기, 상품 상세정보 가져오기 API

• 상품 전체 데이터 가져오기 api
• ID로 특정 상품 데이터 가져오기 api
• 카테고리별로 상품 데이터 가져오기 api

feat : 로그아웃 API 연동

• 로그아웃 API 연동

feat : 추천 책 가져오기 API

Recommendation API

• recommendation 스키마 모델
• controller
• routes
• index에 적용

feat : 상품 주문내역 가져오기 API

상품 주문내역 가져오기 API

• controller 생성
• 라우트 생성
• 라우트 연결

feat : 새로 들어온 책 가져오기 API

NewArrival API

• controller
• routes
• index에 적용

feat : Lazy Loading 적용

• Product 컴포넌트에 Lazy Loading 적용하여 무한 스크롤 구현
• UserPage의 주문 목록에 Lazy Loading 적용하여 무한 스크롤 구현

feat : 스켈레톤 로딩 UI

skeleton loading UI

• HomePage
• ProductDetailsPage
• ProductsPage

feat : 라우팅 설정

• App.js에 라우팅 설정
• 컴포넌트 라우팅

feat : 상품 재고확인 API

상품 재고확인 API

• controller 생성
• 라우트 생성
• 라우트 연결

feat : CartPage UI

• CartItem 컴포넌트
• CartPage 컴포넌트

feat : LoginPage UI

• 로그인페이지 UI
• 이메일 비밀번호 유효성 검사

feat : Header UI

• Navbar UI
• BackDrop UI
• SideDrawer UI

feat : Cart에 상품 추가 기능

• cart에 상품 추가 상태 관리
• Header 컴포넌트에 cartItem 수 렌더링
• 추가된 아이템 localStorage에 저장

feat : 상품 주문하기 API

주문하기 API

• Order 스키마 추가
• controller 생성
• 라우트 생성
• 라우트 연결

feat : DB 상품 데이터 추가

• Product 데이터 스키마 추가
• 데이터 삽입 함수 추가
• 데이터 파일 추가

feat : 404 NotFound 페이지 구현

• 404페이지UI구현
• 라우팅 연결
• 없는 카테고리 접근시 404로 이동
• 없는 상품 상세정보 접근시 404로 이동

refactor : 반응형 미디어쿼리 break points 모듈화

• device 크기 별로 breakPoints max-width 값을 담은 객체 생성
• breakPoints 값을 받아 mediaQuery max-width 값에 적용

chore : 클라이언트 개발 환경설정

• 웹팩 설정
• 바벨 설정
• 리액트 기본 구조 설정

chore : 헤로쿠 배포 환경 설정

• Procfile 추가
• client 빌드 파일 가져오기
• 라우트 설정
• heroku-postbuild 스크립트 추가

feat : 주문하기 API 연동

• 주문하기 API 연동

feat : 로그인 API 연동

• 로그인 API 연동

feat : OrderPage UI

• 상품주문하기 페이지 UI 구현

feat : HomePage API 연동

• Recommendation API 연동
• NewArrival API 연동
• AD API 연동

feat : UserPage UI

• UserPage UI

feat : API 캐싱

캐싱할 API

• getProducts
• getAd
• getRecommendation
• getNewArrival
• getOrder

기능

• 뒤로가기나 앞으로가기 할 경우에만 캐싱

feat : HomePage UI

• HomePage UI
• 캐러셀 구현

feat : 상품리스트 가져오기 API 연동

• 카테고리 별로 Product 가져오기 api 연동

feat : 컴포넌트 설계

• 컴포넌트 설계
• 컴포넌트 폴더 & 스켈레톤 파일 생성

feat : 상품 주문내역 가져오기 API 연동

• API 연동을 위한 redux 설정
• API 연동

feat : 재고확인 API 연동

• 재고확인 API 연동을 위한 리덕스 설정
• API 연동
  • 카트페이지의 주문하기 버튼
  • 상품상세페이지의 바로 주문하기 버튼