컨버스 프로젝트 리뷰(2)

3. 제품 상세

반응형 웹도 개발했다.

잘한점 (배운점)

• 제품 상세 페이지의 가장 큰 특징은 반응형 웹도 구현했다는 것이다. 컨버스 홈페이지에 매장 정보의 지도API를 제외하곤 특별한 기능이 없어 무엇을 더 추가할 수 있을까 고민하다 반응형 웹을 만들어봤다.
  CSS 전처리기 Sass의 Scss를 활용하면 media-query 구문을 보다 간결하게 입력할 수 있어 반응형 웹 제작에 큰 어려움은 없었다. 변수화하여 이름을 지어주니 가독성도 상승하여 협업에도 좋은 것 같다.
  
  

• 제품 소개 사진 우측 SideBar의 제품 주문을 위한 버튼들은 모두 State를 통해 관리된다.
  this.state.sizeSelected를 통해 신발의 size를 선택해야만 장바구니 버튼을 클릭할 수 있도록 했다.
  장바구니 버튼 클릭 시 선택한 size, quantity(수량), 제품 code를 SERVICE_CART_URL에 POST로 보내준다. State를 사용하지 않았을 때 사용자로부터 선택한 값을 받아오기위해 Form을 사용해야 했던 것을 생각하면 엄청 편하고 코드도 훨씬 간결해졌다.

백엔드 API에 POST로 보내진 State는 백엔드에서 처리 후 다음과 같이 GET을 통해 팀원이 작업해주신 장바구니로 전해진다.

아쉬운점

• 장바구니 버튼을 클릭하기 전에 사이즈가 선택이 되어있어야 하고, 유저가 구매를 원하는 사이즈는 대게의 경우 '한 개'일 것이다. 또, 백엔드 API에 보내주기 위해 선택한 '사이즈'도 저장하고 있어야 한다.
  코드를 짜다보니 위와 같은 기능을 관리하기 위해 위처럼 사이즈에만 3개의 state를 사용했다.
  (sizeCheck는 size버튼 중 어느 것이 클릭되었는지,
  sizeSelected는 size버튼이 클릭되었는지,
  size는 클릭한 size(숫자)를 저장한다.)
  이 3개의 size에 대한 state들은 위의 함수들에서 요긴하게(?) 사용되는데,
  지금 생각해보면 sizeCheck배열과 size를 따로 두는 대신, 하나의 size 객체로 만들면 더 깔끔했을 것 같다.

제품 상세 페이지는 반응형 웹과 함께 여러 기능을 구현할 수 있어서 재밌게 만들었던 기억이 남는다.
마지막 [3편]에서는 매장 정보 페이지에 대해 적어보겠다.