Euan lee

.github/pull_request_template.md

@@ -1,15 +1,9 @@
 # Pull Request Template
 
-> `PR Template`은 유용한 PR을 통해 리뷰어와 유의미한 소통으로 더 많은 성장을 하기 위함을 목적으로 하고 있습니다. (삭제)
-> 아래의 템플릿은 그대로 사용하셔도 되고 선택적으로 참고만하셔도 됩니다. (삭제)
-> (삭제)가 표기된 가이드 문구는 PR 올리실때 모두 제거해주세요. (삭제)
-
 ## 1. 가이드
 
 ### 1-1. 배포
 
-> 배포된 페이지가 있다면 링크를 남겨주세요 (삭제)
-
 - [LMS](https://edu.nextstep.camp)
 - [CSS](next-step.github.io/shopping-cart-css)
 

cart-front/.env

@@ -0,0 +1 @@
+VITE_LOCAL_DEV="http://localhost:5173"

cart-front/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

cart-front/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

cart-front/README.md

@@ -0,0 +1,276 @@
+<p align="middle" >
+  <img src="https://techcourse-storage.s3.ap-northeast-2.amazonaws.com/3e6c6f30b11d4b098b5a3e81be19ce3a" width="400">
+</p>
+<h2 align="middle">장바구니</h2>
+<p align="middle">React 데스크탑 장바구니 애플리케이션</p>
+</p>
+
+## 🚀 Getting Started
+
+> 다수의 컴포넌트를 페이지로 구성하고 복잡해진 상태를 관리합니다.
+
+✔️ 데스크탑 타겟의 웹 앱을 구현하며 구매로 이어지는 것에 끊김이 없고 재방문을 고려한 UI/UX에 대해 고민해봅니다.  
+✔️ 다른 라이브러리나 프레임워크 없이 오로지 React만으로 상태를 관리하고 컴포넌트를 설계합니다.  
+✔️ 상태 관리를 위한 전략을 설계하고 구상하여 확장을 열어둡니다.  
+✔️ Router를 활용해 여러 페이지 전환을 고려합니다.  
+✔️ [CSS Template](https://github.com/next-step/shopping-cart-css)
+
+<br />
+
+### 🕋 Server Guide
+
+- 기본적으로 `MSW` 를 필수로 하고 있으며 서버는 필수가 아닙니다.
+- `Schema`는 참고를 위함이니 자유롭게 변경 가능합니다.
+- 자유롭게 `Mock Server`를 활용해주세요.
+
+<br />
+
+### 📝 API & DB Schema
+
+#### 🎁 상품
+
+##### 상품 목록 조회
+
+| method | uri       |
+| ------ | --------- |
+| GET    | /products |
+
+```json
+{
+  "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 |
+
+```json
+{
+  "requestBody": {
+    "products": {
+      "price": 10000,
+      "name": "치킨",
+      "imageUrl": "http://example.com/chicken.jpg"
+    }
+  }
+}
+```
+
+##### 상품 단일 조회
+
+| method | uri            |
+| ------ | -------------- |
+| GET    | /products/{id} |
+
+```json
+{
+  "response": {
+    "id": 1,
+    "price": 10000,
+    "name": "치킨",
+    "imageUrl": "http://example.com/chicken.jpg"
+  }
+}
+```
+
+##### 상품 단일 삭제
+
+| method | uri            |
+| ------ | -------------- |
+| DELETE | /products/{id} |
+
+```json
+{
+  "response": {}
+}
+```
+
+#### 🛒 장바구니
+
+##### 장바구니 아이템 목록 조회
+
+| method | uri    |
+| ------ | ------ |
+| GET    | /carts |
+
+```json
+{
+  "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 |
+
+```json
+{
+  "requestBody": {
+    "product": {
+      "id": 10,
+      "name": "tes11111t",
+      "price": 1234,
+      "imageUrl": "test.com"
+    }
+  }
+}
+```
+
+##### 장바구니 아이템 단일 삭제
+
+| method | uri             |
+| ------ | --------------- |
+| DELETE | /carts/{cartId} |
+
+```json
+{
+  "response": {}
+}
+```
+
+#### 🗒 주문
+
+##### 주문 추가(주문하기)
+
+| method | uri     |
+| ------ | ------- |
+| POST   | /orders |
+
+```json
+{
+  "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 |
+
+```json
+{
+  "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} |
+
+```json
+{
+  "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
+      }
+    ]
+  }
+}
+```

cart-front/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>