2021 Dev-Matching: 웹 프론트엔드 개발자(하반기)

---

🐇 요구사항

• index.html의 마크업을 참고하여, 각 구조 class를 유지, 컴포넌트의 UI작성할 것
• url, localStorage key 이름 등 유지할 것
• 3개의 페이지 제작
• 상품 가격 표기시 3자리마다 콤마 작성

🐇 상품 목록 페이지

• url : /web/
• 디자인에 맞춰 상품 목록을 렌더링합니다.
• 목록에서 상품 카드를 클릭하면 상품 상세페이지로 이동합니다.

🐇 상품 상세 페이지

• url : /web/products/:productId
• productId에 해당하는 상품을 불러오고, 상품 정보를 렌더링합니다.
  • 상품 옵션가가 0인 경우
    • ${상품이름} ${상품옵션} 형식으로 전체 옵션 이름 렌더링
  • 상품 옵션가가 0보다 큰 경우
    • ${상품이름} ${상품옵션} (+${옵션가격}원)형식으로 전체 옵션 이름 렌더링
    • 옵션 가격 렌더링 시, 3자리마다 콤마 작성
  • 재고가 0인경우
    • $ (품절) ${상품이름} ${상품옵션}
      • option에 disabled attribute를 지정해 선택되지 않게 함.
• 상품의 옵션을 선택하면, 선택된 상품을 보여주는 영역에 추가함
  • 이미 선택된 상품은 다시 선택해도 선택된 상품에 추가되지 않음
  • 선택된 상품의 총 가격을 계산하여 위의 이미지처럼 렌더링
    • 옵션별 가격은 상품가격 + 옵션가격을 합친 값
    • 각 옵션별 가격은 수량만큼 곱해야합니다.
• 선택된 상품의 input에서 수량을 변경하면 수량이 변경되어야 합니다.
  • 선태한 옵션의 개수를 변경 시, option의 stock을 넘을 수 없게 해야합니다.
  • 해당 input에 숫자가 아닌 값을 넣은 경우 무시하도록 합니다.
• 주문하기 버튼을 누르면 localStorage에 아래 형태로 데이터로 상품을 추가

[
  {
    productId: '상품 id',
    optionId: '선택한 옵션의 id',
    quantity: '선택한 수량'
  }
]

• 이후 /cart 페이지로 이동
• 이때 localStorage에 담는 키는 반드시 products_cart 로 해야함

🐇 장바구니 페이지

• url : /web/cart
• localStorage에 담아둔 장바구니 관련데이터를 이용해 상품 및 상품 옵션 데이터를 불러오고, 화면 구성에 맞게 장바구니에 담긴 상품을 렌더링한다.
  • 출력 텍스트 형식 마크버, 예시화면과 같게한다
  • ${상품이름} ${옵션이름} ${수량}개 의 형식
  • 상품은 여러 종류를 담을 수 있어야합니다.
    • 1번 상품 상세페이지에서 고른 뒤 주문하길 누르고, 다시 상품 목록 페이지로 돌아가, 2번 상품 상세페이지에서 상품을 고른 뒤 주문하기를 누르면 장바구니에는 1,2번 모두 있어야합니다.
    • 위의 경우, 다시 상품목록 페이지로 돌아가는 것은 뒤로 가기를 통해 이동하면 되며, 별도의 기능 구현은 필요하지 않습니다.
• 장바구니에 담긴 상품은 예시처럼 상품의 기본가+옵션가와 각 옵션의 수량을 더한 총액을 맨 아래 총 가격부분에 출력해야 한다
  • 출력 텍스트 형식 마크업, 예시화면과 같게한다.
  • 총 상품가격 ${계산된 총 상품 가격}원 의 형식
• 주문하기 클릭 시 alert로 주문되었습니다를 띄우고, 상품 목록 페이지로 이동.
  • localStorage에 장바구니 값은 모두 지워야 합니다.
• 장바구니에 담은 상품이 없는 채로 페이지에 들어오면 alert를 이용해 장바구니가 비어있습니다 메세지를 띄운 후, 상품 목록 페이지로 이동시킵니다.

🐇 API

상품 목록 조회

• Get : https://uikt6pohhh.execute-api.ap-northeast-2.amazonaws.com/dev/products

  • 상품 목록을 조회한다

  • response

    [
      {
        "id": 1,
        "name": "커피 컵",
        "imageUrl": "https://grepp-cloudfront.s3.ap-northeast-2.amazonaws.com/programmers_imgs/assignment_image/cafe_coffee_cup.png",
        "price": 10000
      },
      {
        "id": 2,
        "name": "커피컵 종이홀더",
        "imageUrl": "https://grepp-cloudfront.s3.ap-northeast-2.amazonaws.com/programmers_imgs/assignment_image/coffee_cup_paper_sleeve.png",
        "price": 1000
      },
      ...
    ]

상품 옵션 및 수량 조회

GET - https://uikt6pohhh.execute-api.ap-northeast-2.amazonaws.com/dev/products/{productId}

• productId에 해당하는 상품을 조회합니다.
• 응답은 아래와 같습니다.

`{
  "id": 1,
  "name": "커피 컵",
  "price": 10000,
  "imageUrl": "https://grepp-cloudfront.s3.ap-northeast-2.amazonaws.com/programmers_imgs/assignment_image/cafe_coffee_cup.png",
  "productOptions": [
    {
      "id": 1,
      "name": "100개 묶음",
      "price": 0,
      "stock": 5,
      "created_at": "2021-08-23T22:52:17.634Z",
      "updated_at": "2021-08-23T22:52:17.638Z"
    },
    {
      "id": 2,
      "name": "200개 묶음",
      "price": 8000,
      "stock": 5,
      "created_at": "2021-08-23T22:52:34.248Z",
      "updated_at": "2021-08-23T22:52:34.252Z"
    },
    {
      "id": 24,
      "name": "10개 묶음",
      "price": 0,
      "stock": 555,
      "created_at": "2021-08-23T23:03:04.873Z",
      "updated_at": "2021-08-23T23:03:04.879Z"
    }
  ]
}`