마켓컬리 상세페이지 작업

상세페이지는 여러 리스트에 출력된 제품들 중 하나를 클릭하면 나오는 화면이다.
즉 컴포넌트는 하나의 컴포넌트로 재사용해서 사용가능하다. 👍🏻

상세페이지 헤더 부분

우선 상품 상세페이지에서는 각 제품마다 소개하는 목록이 다르다.
판매단위, 중량단위, 배송구분, 포장타입, 알레르기 정보, 유통기한 등 있는 것도 있고 없는 것들도 있다.

서버에서 게시물의 정보를 받아와 해당하는 컬럼에 정보가 존재한다면 출력하면 되고 존재하지 않는다면 출력안하면 된다.

어떻게??? 조건부렌더링 or 삼항연산자 !!!

{
  "id": 1,
  "subCategoryId": 2,
  "imageUrl": "https://images.unsplash.com/photo-1495360010541-f48722b34f7d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2F0fGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60",
  "name": "[신규회원 이벤트] 심쿵하는 사진",
  "description": "최고의 고앵님들의 사진첩 저장 심쿵사 주의",
  "price": 11700,
  "salesUnit": 1,
  "amount": "3g5포x2케이스",
  "content": "",
  "origin": "국내산",
  "storageMethod": "상온",
  "expirationData": "농산물로 별도의 유통기한은 없으나 가급적 빨리 드시기 바랍니다.",
  "uploadedAt": "",
  "stock": "",
  "discountRate": 0.6,
  "allergy": [
    "쇠고기",
    "밀",
    "우유",
    "계란",
    "갑각류",
    "도라지",
    "고앵이털"
  ]
}

백엔드와 동일하게 Mock data 구성했다.
저것을 토대로 값이 있으면 출력 없으면 미출력해주면 된다!!

위와같이 조건부렌더링을 사용하면 게시글 정보에 해당 컬럼이 없다면 미출력해주면 아주 간편하게 관리할 수 있다!!

그리고 이러한 것들도 서버에서 넘어온 할인율을 기준으로 자동으로 바뀌도록 로직을 짰다.
그래서 카운터 값을 올리면 바뀐 할인율을 기준이 적용된 상태에서 총합이 올라간다.

이 부분도 state값인 isRestockNotice: true,isWishList: false로 관리해서 나중에 디비에서 이 값을 넘겨받아 사용 가능한 기능이라면 false 아니라면 true와 같이 관리할 수 있다.

상세페이지 추천 리스트 목록

현재 이 관련된 추천 리스트는 로직을 백엔드에서 어떻게 짜서 뿌려줘야할지 고민이 해결되지 않아서 우선 랜덤으로 추천 해주는 걸로 정했다. 백엔드(병수,세형님) 화이팅 👊🏻

라이브러리를 사용할까 하다가 위스타에서 했던 것 처럼 직접 구현했다!
2차프로젝트에서도 캐러셀 슬라이드 기능이 있다면 그땐 라이브러리를 사용해봐야겠다!

원리는 간단하다.

• 리스트 x축 값이 전체 width값을 넘기면 안된다. (오른족 이동 화살표 기능 제거)
• 리스트 x축 값이 0 보다 작으면 안된다. (왼쪽 이동 화살표 기능 제거)
• 리스트가 5개 이하면 (이동 화살표 기능 제거)
• 리스트가 6개 이상일 때만 (이동 화살표 기능 활성화)

  state = {
    imgUlWidth: null,
    imgListLength: null,
    carouselX: 0,
    isLeftArrow: false,
    isRightArrow: true,
  };
  componentDidMount() {
    this.setState({
      imgUlWidth: this.getWidth.offsetWidth,
      imgListLength: this.getWidth.children.length,
    });
  }

  handleArrowMove = e => {
    if (e.target.className.includes('arrowLeftBox')) {
      this.setState({ carouselX: this.state.carouselX + CAROUSEL_X }, () => {
        if (this.state.carouselX < 0) {
          this.setState({ isRightArrow: true });
        } else {
          this.setState({ isLeftArrow: false, isRightArrow: true });
        }
      });
    }
    if (e.target.className.includes('arrowRightBox')) {
      this.setState({ carouselX: this.state.carouselX - CAROUSEL_X }, () => {
        if (Math.abs(this.state.carouselX) >= this.state.imgUlWidth - CAROUSEL_X) {
          this.setState({ isRightArrow: false, isLeftArrow: true });
        } else {
          this.setState({ isLeftArrow: true });
        }
      });
    }
  };

<ul className="goodsAddProductList" ref={e => (this.getWidth = e)} style={{ transform: `translateX(${carouselX}px)` }}>

제품 추천 리스트도 Mock data 만들자! 후