JaeHo Pyoun
byname. developyoun
Tech-Stack
Projects
History
영화 소개 프로젝트도서 관리 플랫폼재호의 포트폴리오

👉 Github Link !! 👈

📚 BookStore

📖 프로젝트명 : 책팔자

한줄요약 : 책에 대한 정보와 커뮤니티를 융합한 온라인 서점 개발 프로젝트.

👨‍👨‍👦‍👦 팀 소개

Skill & Tools

BackEnd

Front-end

기술 스택들



📜 API 설계도

api 명세서1



api 명세서2

📝 프로토타입

프로토타입 버전

🚧 프로젝트 v 0.2

v0.2

🖼 Front End

⚙️ Usage

# react dependency & library 설치
npm install

# react server 실행 (3000 포트)
npm start

⛪️ Library

'react-router-dom'        # Apply Domain Routing
'axios'                   # Asynchronous Request
'react-bootstrap'         # Apply Carousel & modal
'react-slick'             # For a apply Multi Carousel (Like Netflix...)
'slick-carousel'          # react-slcik CSS
'fontawesome 3 Pakage'    # for react UI font
  '@fortawesome/fontawesome-svg-core'
  '@fortawesome/free-solid-svg-icons'
  '@fortawesome/react-fontawesome'
'styled-components'       # apply for CSS in js
'poished'                 # interactive utill funcion
'qs'                      # using query string (사용x)
'react-cookie'            # Using Cookie in Browser
'react-hook-form'         # for Using user input form
'jwt-decode'              # Do jwt decode library (using find user info)
'react-google-login'      # for social login of google
'react-paginate'          # apply paginate of items
'react-rating-starts-component'   # apply rating star for react
'react-icons'             # for react web icon
'react-material-ui'	      # using for various Form
'react-sticky-el'         # for a stick-component

🛠 Core Feature

📦 File Structure (In Progress...)

books
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── .gitignore
├── public
│ 	├── favicon.ico
│ 	└── index.html
└── src
├── App.js
├── icons
│	├── books.jpg
│ 	└── open-book.jpg
├── index.css
├── index.js
├── components
│	├── HeaderPage
│	│	├── CategoryBar.js			# 장르 / 베스트 / 신간 / 커뮤니티 별로 Link되는 컴포넌트
│	│	├── CategoryHoverDetail.js		# 장르 버튼에 Mouse Over시 display되는 컴포넌트
│	│	├── Header.js				# Header Container
│	│	└── SearchBar.js			# 제목별 검색기능
│	├── MainPage
│	│	├── BookListPage
│	│	│	├── BestBookList.js		# 베스트 아이템 리스트
│	│	│	├── NewBookList.js		# 신간 아이템 리스트
│	│	│	└── SearchBookList.js		# 검색 결과 아이템 리스트
│	│	├── CommunityPage
│	│	│	├── Community.js		# 전체 커뮤니티 컴포넌트
│	│	│	├── CommunityDetail.js		# 상세 커뮤니티 게시글 + 댓글 
│	│	│	├── ArticleDetail.js		# 상세 커뮤니티 게시글
│	│	│	├── CommentDetail.js		# 상세 커뮤니티 댓글
│	│	│	├── EachComment.js		# 각 댓글 컴포넌트
│	│	│	├── CommunityRegister.js	# 게시글 등록
│	│	│	└── CommunityUpdate.js		# 게시글 수정(업데이트)
│	│	├── DetailPage
│	│	│	├── ItemDetail.js		# 상세 도서 컴포넌트
│	│	│	├── TopDetail.js		# 책의 이미지 / 제목 / 저자 / 출판사 / 가격 / 재고 + 장바구니 / 바로구매
│	│	│	├── MidDetail.js		# 책의 설명
│	│	│	├── ReviewList.js		# 책을 구매한 유저의 댓글 및 평점 리스트
│	│	│	└── Review.js			# 각 댓글 컴포넌트
│	│	├── HomePage
│	│	│	├── Home.js			# 메인 홈 화면
│	│	│	├── SlideItem.js		# 하나의 도서에 대한 슬라이드
│	│	│	├── PickItem.js			# 랜덤 4개의 도서에 대한 멀티 슬라이드
│	│	│	├── MonthBooks.js		# 랜덤 4개의 도서에 대한 멀티 슬라이드
│	│	│	└── CustomArrow
│	│	│		├── NextArrow.css	# 다음 슬라이드 제어 버튼 CSS		
│	│	│		├── NextArrow.js	# 다음 슬라이드 제어 버튼
│	│	│		├── PrevArrow.css	# 이전 슬라이드 제어 버튼 CSS
│	│	│		└── prevArrow.js	# 이전 슬라이드 제어 버튼
│	│	└── UserPage
│	│		├── Admin
│	│		│	├── AllOrderListComponent
│	│		│	│	├── AllOrderList.js	# 모든 유저 목록
│	│		│	│	├── EachUserOrder.js	# 각 유저의 주문 내용
│	│		│	│	└── UserOrder.js	# 각 유저의 상세 주문 내용
│	│		│	├── AdminPage.js		# 관리자 컴포넌트
│	│		│	├── AllItemList.js		# 등록된 전체 상품 리스트
│	│		│	├── EachItemList.js		# 각 상품 제어 컴포넌트
│	│		│	├── PostCoupon.js		# 쿠폰 등록 페이지
│	│		│	├── UserList.js			# 모든 유저 리스트	
│	│		│	└── UserArticle.js		# 유저의 게시글 리스트
│	│		├──Public
│	│		│	├── CartPageComponent
│	│		│	│	├── CartPage.js		# 장바구니 페이지
│	│		│	│	├── CouponItem.js	# 쿠폰 선택 컴포넌트 (적용 및 미적용 금액 보여주기) 
│	│		│	│	└── EachCartItem.js	# 장바구니에 담긴 아이템 조작(수량, 체크박스) 컴포넌트
│	│		│	├── OrderComponent
│	│		│	│	├── OrderList.js	# 주문한 목록의 항목 리스트
│	│		│	│	└── OrderPage.js	# 주문한 각 아이템 정보 컴포넌트
│	│		│	├── MyPage.js			# 개인정보 전체 컴포넌트
│	│		│	├── MyPost.js			# 개인이 등록한 게시글을 보는 컴포넌트
│	│		│	└── UserInfo.js			# 개인 정보 컴포넌트
│	│		├── LoginPage			# 로그인 페이지
│	│		└── SignupPage			# 회원가입 페이지
│	└── FooterPage
│		└── Footer.js				# Footer
└── Features
	├── GenreMap.js		# 장르별 ID값을 장르항목(항목)으로 변환
	├── JwtDecode.js		# 수신받은 JWT 토큰을 디코드하는 함수
	└── ETC...

🤜🤛 회고

초반, react의 컴포넌트 구조와 state관리를 이해하는데 시간을 많이 들였지만, 궁금증을 가지고 배우려고 노력하니 점점 알아가는게 많아졌다. 
하지만 그만큼 지금 프로젝트에서의 부족한 점이 보이기 시작하였고, 많은 부분이 아쉬움으로 남았다.

💥 아쉬운 점
- React Redux를 이용한 중앙 집중식의 상태관리 (상태관리를 하는데 있어서 많은 코드가 낭비된다고 느껴졌음)
- 컴포넌트의 구조를 체계화하여 재활용 코드 구현 및 리팩토링
- Material UI를 이용하여 더욱 매력적인 페이지 구축