react-shopping-cart

장바구니

React 데스크탑 장바구니 애플리케이션

🚀 Getting Started

다수의 컴포넌트를 페이지로 구성하고 복잡해진 상태를 관리합니다.

✔️ 데스크탑 타겟의 웹 앱을 구현하며 구매로 이어지는 것에 끊김이 없고 재방문을 고려한 UI/UX에 대해 고민해봅니다.
✔️ 다른 라이브러리나 프레임워크 없이 오로지 React만으로 상태를 관리하고 컴포넌트를 설계합니다.
✔️ 상태 관리를 위한 전략을 설계하고 구상하여 확장을 열어둡니다.
✔️ Router를 활용해 여러 페이지 전환을 고려합니다.
✔️ CSS Template

🕋 Server Guide

기본적으로 MSW 를 필수로 하고 있으며 서버는 필수가 아닙니다.
Schema는 참고를 위함이니 자유롭게 변경 가능합니다.
자유롭게 Mock Server를 활용해주세요.

📝 API & DB Schema

🎁 상품

상품 목록 조회

method	uri
GET	/products

{
    "response": [
        {
            "id": 1,
            "price": 10000,
            "name": "치킨",
            "imageUrl": "http://example.com/chicken.jpg"
        },
        {
            "id": 2,
            "price": 20000,
            "name": "피자",
            "imageUrl": "http://example.com/pizza.jpg"
        }
    ]
}

상품 추가

method	uri
POST	/products

{
    "requestBody": {
        "products": {
            "price": 10000,
            "name": "치킨",
            "imageUrl": "http://example.com/chicken.jpg"
        }
    }
}

상품 단일 조회

method	uri
GET	/products/{id}

{
    "response": {
        "id": 1,
        "price": 10000,
        "name": "치킨",
        "imageUrl": "http://example.com/chicken.jpg"
    }
}

상품 단일 삭제

method	uri
DELETE	/products/{id}

{
    "response": {}
}

🛒 장바구니

장바구니 아이템 목록 조회

method	uri
GET	/carts

{
  "response": {
    "id": 1,
      "product": {
            "name": "test",
            "price": 1234,
            "imageUrl": "test.com",
            "id": 1
        },
    },
    {
    "id": 5,
        "product": {
            "name": "tes11111t",
            "price": 1234,
            "imageUrl": "test.com",
            "id": 10
        }
    },
}

장바구니 아이템 추가

method	uri
POST	/carts

{
    "requestBody": {
        "product": {
            "id": 10,
            "name": "tes11111t",
            "price": 1234,
            "imageUrl": "test.com"
        }
    }
}

장바구니 아이템 단일 삭제

method	uri
DELETE	/carts/{cartId}

{
    "response": {}
}

🗒 주문

주문 추가(주문하기)

method	uri
POST	/orders

{
    "requestBody": {
        "orderDetails": [
            {
                "id": 1,
                "price": 10000,
                "name": "치킨",
                "imageUrl": "http://example.com/chicken.jpg",
                "quantity": 5
            },
            {
                "id": 2,
                "price": 20000,
                "name": "피자",
                "imageUrl": "http://example.com/pizza.jpg",
                "quantity": 3
            }
        ]
    }
}

주문 목록(내역) 조회

method	uri
GET	/orders

{
    "response": [
        {
            "id": 1,
            "orderDetails": [
                {
                    "id": 1,
                    "price": 10000,
                    "name": "치킨",
                    "imageUrl": "http://example.com/chicken.jpg",
                    "quantity": 5
                },
                {
                    "id": 2,
                    "price": 20000,
                    "name": "피자",
                    "imageUrl": "http://example.com/pizza.jpg",
                    "quantity": 3
                }
            ]
        },
        {
            "id": 2,
            "orderDetails": [
                {
                    "id": 1,
                    "price": 10000,
                    "name": "치킨",
                    "imageUrl": "http://example.com/chicken.jpg",
                    "quantity": 5
                },
                {
                    "id": 2,
                    "price": 20000,
                    "name": "피자",
                    "imageUrl": "http://example.com/pizza.jpg",
                    "quantity": 3
                }
            ]
        }
    ]
}

주문 단일 조회

method	uri
GET	/orders/{id}

{
    "response": {
        "id": 1,
        "orderDetails": [
            {
                "id": 1,
                "price": 10000,
                "name": "치킨",
                "imageUrl": "http://example.com/chicken.jpg",
                "quantity": 5
            },
            {
                "id": 2,
                "price": 20000,
                "name": "피자",
                "imageUrl": "http://example.com/pizza.jpg",
                "quantity": 3
            }
        ]
    }
}