Skip to content

⚛️ React 장바구니 애플리케이션 🛒

Notifications You must be signed in to change notification settings

taeyoungs/react-shopping-cart

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

장바구니

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
			}
		]
	}
}

About

⚛️ React 장바구니 애플리케이션 🛒

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%