장바구니
React 데스크탑 장바구니 애플리케이션
🚀 Getting Started
다수의 컴포넌트를 페이지로 구성하고 복잡해진 상태를 관리합니다.
✔️ 데스크탑 타겟의 웹 앱을 구현하며 구매로 이어지는 것에 끊김이 없고 재방문을 고려한 UI/UX에 대해 고민해봅니다.
✔️ 다른 라이브러리나 프레임워크 없이 오로지 React만으로 상태를 관리하고 컴포넌트를 설계합니다.
✔️ 상태 관리를 위한 전략을 설계하고 구상하여 확장을 열어둡니다.
✔️ Router를 활용해 여러 페이지 전환을 고려합니다.
✔️ CSS Template
🕋 Server Guide
기본적으로 MSW
를 필수로 하고 있으며 서버는 필수가 아닙니다.
Schema
는 참고를 위함이니 자유롭게 변경 가능합니다.
자유롭게 Mock Server
를 활용해주세요.
📝 API & DB Schema
🎁 상품
상품 목록 조회
{
"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" : {
"id" : 1 ,
"product" : {
"name" : " test" ,
"price" : 1234 ,
"imageUrl" : " test.com" ,
"id" : 1
},
},
{
"id" : 5 ,
"product" : {
"name" : " tes11111t" ,
"price" : 1234 ,
"imageUrl" : " test.com" ,
"id" : 10
}
},
}
장바구니 아이템 추가
{
"requestBody" : {
"product" : {
"id" : 10 ,
"name" : " tes11111t" ,
"price" : 1234 ,
"imageUrl" : " test.com"
}
}
}
장바구니 아이템 단일 삭제
method
uri
DELETE
/carts/{cartId}
🗒 주문
주문 추가(주문하기)
{
"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
}
]
}
}
주문 목록(내역) 조회
{
"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
}
]
}
}