TIL 90 l 리디북스 클론 프로젝트

YB.J·2021년 11월 12일
0

프로젝트

목록 보기
1/1
post-thumbnail

팀 프로젝트 프론트엔드 GitHub 레파지토리
팀 프로젝트 시현영상

Project Overview

위코드에서의 1차 클론 코딩 프로젝트가 끝났다. 내가 제안했던 사이트인 리디북스가 감사하게도 클론 코딩 사이트로 선정되어 프로젝트를 할 수 있게 되엇다. 전자책 구매/대여를 하는 리디북스는 리액트 컴포넌트를 활용하기에 좋은 사이트이기 때문에 1차 프로젝트를 하기에 적합하고 심플한 UI에 기획을 조금 덧붙인다면 프론트 백엔드 모두에게 최상의 프로젝트가 될 것이라고 생각했다.


React를 사용하여 리디북스 클론하기

  • 공동의 public 폴더와 scss를 사용하고 관리
  • 리액트 컴포넌트를 재사용하는 프로젝트
  • 백엔드에서 데이터를 fetch 해오는 첫 프로젝트

작업 기간

2021.11.01 - 2021.11.12

기술 스택

프론트엔드 4명 ⚡︎

  • HTML/CSS
  • JavaScript(ES6+)
  • React
  • SASS

백엔드 2명

  • Python
  • Django
  • MySQL
  • JWT

주요 구현 사항

⚡︎ 표시는 내가 기여한 기능!

로그인, 회원가입 기능(유효성 검사)
메인페이지 추천 도서, 신간 도서 필터링 리스트
메인페이지의 슬라이드
동적 라우팅을 이용한 카테고리별 도서 리스트 조회 기능
도서별 상세페이지 레이아웃 ⚡︎
상세페이지의 좋아요/좋아요 취소 기능 ⚡︎
상세페이지의 별점을 호버하면 별점이 바뀌는 기능 ⚡︎
장바구니 레이아웃 ⚡︎
장바구니 금액 합계 기능

결과화면


칭찬할 부분!

컴포넌트 재사용!

처음에는 동일한 UI, 기능의 컴포넌트들을 하드코딩으로 전부 작성했었다. 컴포넌트 재활용이 리액트의 장점이라는 것을 알고있었지만 처음에는 적용이 어려웠는데, 비슷한 UI부터 시작해서 컴포넌트 재사용을 연습하다 보니, 나중에는 분리와 재사용을 재법 잘하는 내가 되었다!

UI 디자인 기획

리디북스 사이트의 가장 아쉬운 점은 단조로운 UI라고 생각한다. 프로젝트 초기세팅 때. 팀원들과 상의하여 Nav와 Footer의 색깔을 그라데이션으로 주고 다른 페이지의 배경색깔을 그라데이션 시작색과 끝색 정도에 맞추기로 결정한 것은 정말 잘한 일 같다. 디자인이 업그레이드 되었을 뿐 아니라, 디자인 작업의 시간을 줄이고 최종 merge 후 디자인 수정의 시간을 획기적으로 줄였다.

아쉬운 부분!

기능구현

시간의 한계로 인해 별점의 기능을 반밖에 하지 못한 부분이 가장 아쉬웠다. 사용자가 별점을 호버했을 때, 별점이 점수화되어서 화면에 표시되는 것까지 구현하는 것이 목표였는데 이 부분은 개인적으로 진행해볼 예정이다.

profile
♪(^∇^*) 워-후!!(^∀^*)ノシ

0개의 댓글