Merge pull request #81 from kakao-tech-campus-2nd-step3/minji

Master에 반영

.eslintrc.json

@@ -1,43 +1,43 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "extends": ["plugin:react/recommended", "airbnb", "prettier"],
-  "parser": "@typescript-eslint/parser",
-  "rules": {
-    "no-use-before-define": "off",
-    "arrow-body-style": ["error", "as-needed"],
-    "requireReturnForObjectLiteral": true,
-    "react/react-in-jsx-scope": "off",
-    "react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }],
-    "import/extensions": [
-      "error",
-      "ignorePackages",
-      {
-        "js": "never",
-        "jsx": "never",
-        "ts": "never",
-        "tsx": "never"
-      }
-    ],
-    "react/function-component-definition": [
-      2,
-      {
-        "namedComponents": [
-          "function-declaration",
-          "arrow-function",
-          "function-expression"
-        ]
-      }
-    ]
-  },
-  "settings": {
-    "import/resolver": {
-      "node": {
-        "extensions": [".js", ".jsx", ".ts", ".tsx"]
-      },
-      "typescript": {}
-    }
-  }
-}
+// {
+//   "env": {
+//     "browser": true,
+//     "es2021": true
+//   },
+//   "extends": ["plugin:react/recommended", "airbnb", "prettier"],
+//   "parser": "@typescript-eslint/parser",
+//   "rules": {
+//     "no-use-before-define": "off",
+//     "arrow-body-style": ["error", "as-needed"],
+//     "requireReturnForObjectLiteral": 0,
+//     "react/react-in-jsx-scope": "off",
+//     "react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }],
+//     "import/extensions": [
+//       "error",
+//       "ignorePackages",
+//       {
+//         "js": "never",
+//         "jsx": "never",
+//         "ts": "never",
+//         "tsx": "never"
+//       }
+//     ],
+//     "react/function-component-definition": [
+//       2,
+//       {
+//         "namedComponents": [
+//           "function-declaration",
+//           "arrow-function",
+//           "function-expression"
+//         ]
+//       }
+//     ]
+//   },
+//   "settings": {
+//     "import/resolver": {
+//       "node": {
+//         "extensions": [".js", ".jsx", ".ts", ".tsx"]
+//       },
+//       "typescript": {}
+//     }
+//   }
+// }

README.md

@@ -1,2 +1,87 @@
 # Team14_FE
+
 14조 프론트엔드
+
+## 🍴요기먹때
+
+![alt text](image-1.png)
+
+- 🙋🏻‍♀️1인 가구 대상으로
+- 👩‍👦함께 배달 음식을 주문할 수 있는 사람을 매칭해
+- 💵배달 최소 주문 금액 부담을 덜고 추가적인 배달음식비 또는 배달팁을 줄이고자 함
+
+## 배포 링크
+
+✅FE: https://team14-fe.vercel.app/  
+✅BE: https://order-together.duckdns.org/api/v1
+
+## 주요기능
+
+**1. 카카오 소셜 로그인**  
+**2. 배달 어플 함께 주문하기(카카오지도 API)**  
+배달의 민족이 제공하는 "함께주문"을 통해 익명의 사용자와 함께 배달 주문을 할 수 있다.  
+지도 상에 표시된 마커와 리스트를 통해 배달 받을 장소와 가게를 확인하고 참여할 수 있다.  
+**3. 새로운 스팟 등록**  
+자신이 원하는 음식을 방장이 되어 원하는 장소에 스팟을 생성할 수 있다.  
+**4. sms**  
+선택한 스팟에 대한 "함께주문" 링크를 문자로 받을 수 있다.  
+**5. 주문 결제(토스 페이먼츠 API)**  
+이용자들은 구매한 포인트를 통해 해당 앱에서 배달 음식의 값을 지불할 수 있다.  
+**6. 주문 목록 확인**  
+이용자들의 자신의 구매 내역을 확인할 수 있다.
+
+## ERD 이미지
+
+![alt text](ERD.jpg)
+
+## 📆개발 기간
+
+- 24.09.16 ~ 24.11.15
+
+## 개발 인원 : 7명
+
+| 이름   | 담당 역할 및 기능                                                      |
+| ------ | ---------------------------------------------------------------------- |
+| 강호정 | <img src="https://img.shields.io/badge/-FE-blue"> 마이페이지           |
+| 서민지 | <img src="https://img.shields.io/badge/-FE-blue"> 스팟(메인)페이지     |
+| 임지환 | <img src="https://img.shields.io/badge/-FE-blue"> 로그인 및 결제페이지 |
+| 나제법 | <img src="https://img.shields.io/badge/-BE-red"> 결제 API              |
+| 서영우 | <img src="https://img.shields.io/badge/-BE-red"> 로그인 API, 회원 API  |
+| 안재영 | <img src="https://img.shields.io/badge/-BE-red"> SMS API, 결제내역 API |
+| 유보민 | <img src="https://img.shields.io/badge/-BE-red"> 지도(스팟) API        |
+
+## ⚒️기술 스택
+
+### ✅FE
+
+<img src="https://img.shields.io/badge/react-61DAFB?style=for-the-badge&logo=react&logoColor=black"> <img src="https://img.shields.io/badge/typescript-3178C6?style=for-the-badge&logo=typescript&logoColor=white"> <img src="https://img.shields.io/badge/emotion-DB7093?style=for-the-badge&logo=styled-components&logoColor=white">
+
+### ✅BE
+
+<img src="https://img.shields.io/badge/java-007396?style=for-the-badge&logo=java&logoColor=white"> <img src="https://img.shields.io/badge/spring-6DB33F?style=for-the-badge&logo=spring&logoColor=white"> <img src="https://img.shields.io/badge/mysql-4479A1?style=for-the-badge&logo=mysql&logoColor=white"> <img src="https://img.shields.io/badge/nginx-009639?style=for-the-badge&logo=nginx&logoColor=white"> <img src="https://img.shields.io/badge/junit5-25A162?style=for-the-badge&logo=junit5&logoColor=white"> **Spring Data JPA,** **JWT**
+
+## 💻UI(이미지 추가)
+
+<details>
+<summary>소개 및 로그인 페이지</summary>
+
+![alt text](image.png)
+![alt text](image-2.png)
+
+</details>
+
+<details>
+<summary>스팟페이지</summary>
+
+![alt text](image-3.png)
+![alt text](image-7.png)
+![alt text](image-6.png)
+
+</details>
+
+<details>
+<summary>마이페이지</summary>
+
+![alt text](image-8.png)
+
+</details>

package.json

@@ -10,6 +10,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@tosspayments/payment-widget-sdk": "^0.12.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.108",
     "@types/react": "^18.3.7",
@@ -49,6 +50,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@types/js-cookie": "^3.0.6",
     "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",

src/api/hooks/useConfirmPayment.ts

@@ -0,0 +1,45 @@
+import Cookies from 'js-cookie';
+import axios from 'axios';
+import { useMutation } from '@tanstack/react-query';
+
+interface PaymentResponse {
+  message: string;
+  data?: any;
+}
+
+interface ConfirmPaymentParams {
+  orderId: string;
+  amount: number;
+  paymentKey: string | null;
+}
+
+const confirmPayment = async ({
+  orderId,
+  amount,
+  paymentKey,
+}: ConfirmPaymentParams): Promise<PaymentResponse> => {
+  const accessToken = Cookies.get('access_token');
+  if (!accessToken) {
+    throw new Error('인증 토큰이 없습니다. 다시 로그인해주세요.');
+  }
+
+  const response = await axios.post(
+    'https://order-together.duckdns.org/api/v1/payments/confirm',
+    { orderId, amount, paymentKey },
+    {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${accessToken}`,
+      },
+    },
+  );
+
+  return response.data;
+};
+
+const useConfirmPayment = () =>
+  useMutation<PaymentResponse, Error, ConfirmPaymentParams>({
+    mutationFn: confirmPayment,
+  });
+
+export default useConfirmPayment;