Just Do It 프로젝트

Just Do It

• 프론트엔드 2명과 백엔드 2명으로 나누어진 팀에서 2주간 나이키 클론코딩 프로젝트를 진행하였다.

• 나는 프론트엔드를 맡아서 디테일 페이지에 장바구니 기능과 리뷰 기능을 구현했다.

• 나이키 공식 홈페이지의 디테일 페이지 : https://www.nike.com/kr/ko_kr/t/men/fw/nike-sportswear/DB2477-003/nvir85/nike-crater-impact

• 고화질 사용 영상 : https://www.youtube.com/watch?v=Y2CcrXBqPzQ

디테일 페이지 구현 요소

• 디테일 페이지는 상품의 상세 페이지를 의미한다.

  • 사용자가 이 디테일 페이지로 오는 경로는 주로 상품 목록 페이지(리스트 페이지)에서 특정 상품을 클릭하면 들어오는 형태로, 리액트 라우터 돔의 hook 중 하나인 useParams를 사용해서 path parameter의 정보를 얻어 해당 상품의 상세 페이지를 보여주었다.
  • Rest API 규칙에 맞게 설정된 url은 동적으로 라우팅되어서 이 url 정보를 바탕으로 상세 페이지가 열린다.

• 사진 정렬은 CSS grid 속성을 주어서 가로 1:1, 세로 1:1의 비율을 갖게 했다. 사진의 크기는 제품 별로 제 각각이였지만, 이미지의 상위 태그에 이미지가 알맞은 크기로 들어가게끔 CSS를 설정해서 마치 모든 이미지들이 제 각각 다른 사이즈가 아니라 같은 사이즈인 것처럼 통일감을 주었다.

• 백엔드에서 상품에 대한 정보를 가져오는 데에 많은 시간을 공들여서, 상품 사진, 이름, 가격, 재고, 사이즈 정보 등을 모두 백엔드에서 불러오면서 각각의 상품 별로 다른 정보들을 가지고 있도록 구현했다.

• 상품 당 수량은 최대 5개까지 구매할 수 있고, 사이즈를 선택하지 않으면 장바구니에 추가할 수 없도록 하고 사용자에게 사이즈를 선택하지 않음을 알려주는 기능을 추가했다.

장바구니 기능

• 장바구니는 디테일 페이지에서 오른쪽 옆에 모달창을 띄움으로써 사용자가 자신의 장바구니를 바로 확인할 수 있게 만들었다.

  • 모달창은 로그인을 한 사용자만이 이용할 수 있고, 상품의 수량과 사이즈를 선택한 후 장바구니 버튼을 누르면 열리도록 만들었다.
    사용자가 장바구니 버튼을 누르는 동시에 사이즈와 수량 정보가 state에 담겨서 서버로 전달된다.

  • 장바구니 모달창에는 장바구니 목록 전체 삭제와 특정 상품만을 삭제하는 기능이 있다. 각각 다른 API를 사용했기 때문에 전달하는 정보도 달리 해야 했다.

  • 모달창을 나가고 싶으면 모달창 밖의 아무 곳이나 클릭하면 되게 만들었다. useState를 사용해서 모달창이 열린 상태에서 배경을 클릭하면 모달창의 열린 상태가 닫힌 상태로 변하게끔 구현했다.

리뷰 기능

• 리뷰는 별점 기능으로 만들었는데, 평범한 별점을 구현하기 보다는 다양한 리뷰를 구현하자는 팀원들의 의견을 반영해서 상품 별로 세세한 특징들을 모두 평가해서 별점에 반영시켰다.

• 리뷰 버튼은 슬라이더로 만들어서 가운데 점을 사용자가 드래그해서 원하는 위치에 놓으면 가장 왼쪽이 0점이고 가장 오른쪽이 5점으로 점수를 평가해서 서버로 전달하면 백엔드에서 평균을 내서 상단의 별점에 반영을 하는 방식이다.

• 슬라이더 버튼은 0.1점 단위로 움직여 최대한 사용자의 평가를 자세하게 반영할 수 있고 별점도 마찬가지로 0.1점 단위로 별이 차오르도록 최대한 자세하게 만들었다.

• 백엔드에서 별점 정보를 주고 받을 수 있도록 리액트의 hook인 useEffect를 사용했고, 이 useEffect는 사용자가 별점을 제출할 때 마다 바로바로 렌더링 되어서 최신화 할 수 있도록 구현했다.

• 이미 리뷰를 제출한 사용자는 두번 다시 리뷰를 남길 수 없게 만들었고, 만약 제출을 했다면 alert 창에 이미 리뷰를 만들었다고 알려주는 기능을 만들었다.