[FEAT] 토스페이 결제 기능 구현

.gitignore

@@ -13,10 +13,9 @@
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
+.env.production
+.env.development
 .env.test.local
-.env.production.local
 
 npm-debug.log*
 yarn-debug.log*

package.json

@@ -7,11 +7,13 @@
     "@material-tailwind/react": "^2.1.9",
     "@stomp/stompjs": "^7.0.0",
     "@toast-ui/react-editor": "^3.2.3",
+    "@tosspayments/payment-widget-sdk": "^0.10.2",
     "axios": "^1.6.7",
     "chart.js": "^4.4.2",
     "flowbite": "^2.3.0",
     "flowbite-datepicker": "^1.2.6",
     "http-proxy-middleware": "^2.0.6",
+    "nanoid": "^5.0.6",
     "react": "^17.0.2",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^17.0.2",

src/api/communityApi.js

@@ -0,0 +1,27 @@
+import GetTokenFromLocalStorage from "./Common/token";
+import axios from "axios";
+import userInstance from "./userBaseApi";
+
+const Token = GetTokenFromLocalStorage('user')
+if (Token) {
+    axios.defaults.headers.common['Authorization'] = `Bearer ${Token}`
+}
+
+/**
+ * @since 2024.03.03
+ * @author 김유빈
+ */
+const CommunityApi = {
+
+    /**
+     * 나의 커뮤니티 게시글 리스트 조회
+     *
+     * @since 2024.03.03
+     * @author 김유빈
+     */
+    getMyCommunities: async (pageNo = 0, amount = 5) => {
+        return await userInstance.get(`/communities?type=me&pageNo=${pageNo}&amount=${amount}`)
+    },
+}
+
+export default CommunityApi;

src/api/paymentApi.js

@@ -0,0 +1,45 @@
+import axios from "axios";
+import Token from "./Common/token";
+import userInstance from "./userBaseApi";
+
+if (Token) {
+    axios.defaults.headers.common['Authorization'] = `Bearer ${Token}`
+}
+
+/**
+ * @since 2024.02.29
+ * @author 김유빈
+ */
+const PaymentApi = {
+
+    /**
+     * 구매자 정보 조회
+     *
+     * @since 2024.03.02
+     * @author 김유빈
+     */
+    getBuyer: async () => {
+        return await userInstance.get(`/ad/users`)
+    },
+
+    /**
+     * 토스페이 결제 승인 요청
+     *
+     * @since 2024.02.29
+     * @author 김유빈
+     */
+    confirmTossPay: async (data, file = null) =>  {
+        const formData = new FormData()
+        formData.append("data",  new Blob([JSON.stringify(data)]), {
+            type: "application/json;charset=UTF-8"
+        })
+        formData.append("file", file)
+        return await userInstance.post(`/payments/toss/confirm`, formData, {
+            headers: {
+                "Content-Type": "multipart/form-data",
+            },
+        })
+    },
+};
+
+export default PaymentApi;

src/api/planApi.js

@@ -37,11 +37,12 @@ const PlanApi = {
      * @since 2024.02.27
      * @author 김유빈
      */
-    save: async (data) => {
+    save: async (data, file = null) => {
         const formData = new FormData()
-        formData.append("data",  new Blob([JSON.stringify(data)], {
+        formData.append("data",  new Blob([JSON.stringify(data)]), {
             type: "application/json"
-        }))
+        })
+        formData.append("file", file)
         return await axios.post(`/api/v1/plans`, formData, {
             "Content-Type": `multipart/form-data`,
         })

src/api/popupApi.js

@@ -1,5 +1,6 @@
 import GetTokenFromLocalStorage from "./Common/token";
 import axios from "axios";
+import userInstance from "./userBaseApi";
 
 const Token = GetTokenFromLocalStorage('user')
 if (Token) {
@@ -11,6 +12,7 @@ if (Token) {
  * @author 이상민
  */
 const PopupApi = {
+
     /**
      * 나의 사업계획서에 따른 팝업 조회
      *
@@ -20,6 +22,7 @@ const PopupApi = {
     findByPlanId: async (planId = 0) => {
         return await axios.get(`/api/v1/plans/${planId}/popup`)
     },
+
     /**
      * 나의 사업계획서에 따른 팝업 조회
      *
@@ -33,6 +36,16 @@ const PopupApi = {
         const response = await axios.post(`/api/v1/popups`, formData);
         return response.data;
     },
+
+    /**
+     * 나의 팝업스토어 게시글 리스트 조회
+     *
+     * @since 2024.03.03
+     * @author 김유빈
+     */
+    getMyPopups: async (pageNo = 0, amount = 5) => {
+        return await userInstance.get(`/popups?sort=me&pageNo=${pageNo}&amount=${amount}`)
+    },
 }
 
 export default PopupApi;

src/components/business/BuyerContentBox/BuyerContentBox.js

@@ -0,0 +1,47 @@
+import InputText from "../../common/Input/InputText";
+import ContentBox from "../../common/ContentBox/ContentBox";
+import React, {useEffect, useState} from "react";
+import PaymentApi from "../../../api/paymentApi";
+
+/**
+ * BuyerContentBox 컴포넌트 제작
+ *
+ * @since 2024.03.02
+ * @author 김유빈
+ */
+function BuyerContentBox() {
+    const [buyer, setBuyer] = useState({})
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const response = await PaymentApi.getBuyer()
+                const data = response.data.data
+                const buyer = {
+                    id: data.id,
+                    nickname: data.nickname,
+                    email: data.email,
+                    businessRegistrationNumber: data.businessRegistrationNumber,
+                    connectedNumber: data.connectedNumber,
+                }
+                setBuyer(buyer)
+            } catch (error) {
+                console.error("주문자 데이터를 가져오는 중 오류 발생: ", error)
+            }
+        }
+        fetchData()
+    }, [])
+    return (
+        <ContentBox
+            title="주문자 정보"
+            content={
+                <>
+                    <InputText title="주문자" value={buyer.nickname} disabled="true"/>
+                    <InputText title="연락처" value={buyer.connectedNumber} disabled="true"/>
+                    <InputText title="이메일" value={buyer.email} disabled="true"/>
+                    <InputText title="사업자 등록번호" value={buyer.businessRegistrationNumber} disabled="true"/>
+                </>
+            }/>
+    )
+}
+
+export default BuyerContentBox;

src/components/business/SelectedAdPost/SelectedAdPost.js

@@ -0,0 +1,19 @@
+import CheckedPostTable from "../../common/Table/CheckedPostTable";
+import ContentBox from "../../common/ContentBox/ContentBox";
+import React from "react";
+
+/**
+ * @since 2024.03.03
+ * @author 김유빈
+ */
+function SelectedAdPost({posts}) {
+    return (
+        <>
+            <ContentBox
+                title="게시글 선택"
+                content={<CheckedPostTable posts={posts}/>}/>
+        </>
+    )
+}
+
+export default SelectedAdPost;