YAPP-Github · Jeong-jeong · Jul 10, 2022 · Jul 10, 2022 · Jul 10, 2022 · Jul 10, 2022
diff --git a/.env.development b/.env.development
@@ -1,4 +1,8 @@
 VITE_KAKAO_JAVASCRIPT_KEY=02e0caae3e4116da61d734a06528cd86
 VITE_KAKAO_RESTAPI_KEY=09bebf5106adf50d6a204a7ac2c22779
 VITE_KAKAO_OPEN_URL=https://kauth.kakao.com/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&response_type=code&prompt=login
-VITE_SERVER_URL=//49.50.175.112:8080
+
+VITE_SERVER_URL=http://49.50.175.112:8080
+
+VITE_TEST_PATMENT_URL=https://democpay.payple.kr/php/auth.php
+VITE_TEST_PAYMENT_REFERER=http://localhost:3000
diff --git a/index.html b/index.html
@@ -15,6 +15,9 @@
   <body>
     <div id="root"></div>
     <div id="modal-root"></div>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+    <script src="https://democpay.payple.kr/js/cpay.payple.1.0.1.js"></script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/components/domain/matching/buttons/SuccessButton.tsx b/src/components/domain/matching/buttons/SuccessButton.tsx
@@ -1,14 +1,77 @@
+import React, { useState } from 'react';
 import { Button } from '@/components/base';
-import React from 'react';
+import { getPartnerAuth } from '@/lib/api/payment';
+
+declare global {
+  interface Window {
+    PaypleCpayAuthCheck: (params: any) => any;
+    MainBodyAction: (params: string) => void;
+  }
+}
 
 function SuccessButton() {
-  const handleClick = () => {
-    console.log('asd');
+  const [payResult, setPayResult] = useState({});
+
+  window.onpopstate = (e) => {
+    if (e) {
+      window.MainBodyAction('close');
+    }
   };
+
+  const getPaymentResult = (res: any) => {
+    console.log(res, 'res');
+    if (res.PCD_PAY_RST === 'success') {
+      setPayResult({ ...res });
+      // 전달받은 데이터를 서버에 보내기
+    }
+  };
+
+  const handleClick = async () => {
+    const data = await getPartnerAuth();
+    if (data?.result !== 'success') {
+      console.error(data?.result_msg);
+      return;
+    }
+    const { AuthKey, return_url } = data;
+    console.log(data, 'res');
+    const payload = {
+      PCD_PAY_TYPE: 'card',
+      PCD_PAY_WORK: 'PAY',
+      /* 01 : 빌링키결제 */
+      PCD_CARD_VER: '01',
+
+      PCD_PAY_OID: 'test099942200156938',
+      PCD_PAYER_NO: 1234,
+      PCD_PAYER_NAME: '홍길동',
+      PCD_PAYER_HP: '01012345678',
+      PCD_PAYER_EMAIL: '[email protected]',
+      PCD_PAY_GOODS: '티셔츠',
+      PCD_PAY_TOTAL: 10000,
+      PCD_PAY_ISTAX: 'Y',
+      PCD_PAY_TAXTOTAL: 10,
+
+      /* 파트너 인증시 받은 값 입력  */
+      PCD_AUTH_KEY: AuthKey,
+      PCD_PAY_URL: return_url,
+      PCD_RST_URL: 'matching/meeting',
+      callbackFunction: getPaymentResult,
+    };
+
+    try {
+      // 가맹점 인증 api 응답 결과 success 시
+      const res = await window.PaypleCpayAuthCheck(payload);
+      return res;
+    } catch (e) {
+      console.error(e, 'requestPatmentAPI error');
+    }
+  };
+
   return (
-    <Button onClick={handleClick} size="medium" variant={'kakao'}>
-      <strong>카카오페이</strong>로 간편하고 안전하게 결제
-    </Button>
+    <>
+      <Button id="payAction" onClick={handleClick} size="medium" variant={'kakao'}>
+        <strong>카카오페이</strong>로 간편하고 안전하게 결제
+      </Button>
+    </>
   );
 }
 

diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts
@@ -7,7 +7,7 @@ const apiClient = axios.create({
   // baseURL: host,
   withCredentials: true,
   headers: {
-    Authorization: Cookies.get('AccessToken'),
+    Authorization: Cookies.get('AccessToken') ?? '',
   },
 });
 export default apiClient;
diff --git a/src/lib/api/payment.ts b/src/lib/api/payment.ts
@@ -0,0 +1,12 @@
+import apiClient from './index';
+import { SERVER_URL } from '../constants';
+import { PartnerAuth } from '@/types/payment';
+
+export const getPartnerAuth = async (): Promise<PartnerAuth | undefined> => {
+  try {
+    const res = await apiClient.post('/api/payment');
+    return res.data;
+  } catch (e) {
+    console.error(e);
+  }
+};
diff --git a/src/lib/constants/index.ts b/src/lib/constants/index.ts
@@ -0,0 +1,2 @@
+export const SERVER_URL = import.meta.env.VITE_SERVER_URL;
+export const PAYMENT_URL = import.meta.env.VITE_TEST_PATMENT_URL;
diff --git a/src/pages/MatchingPage.tsx b/src/pages/MatchingPage.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 const MatchingPage = () => {
-  const TempData = { state: 'pay' };
+  const TempData = { state: 'success' };
   return (
     <>
       <MatchingTemplete btnName={TempData.state} title={MatchingStateTitle(TempData.state)}>

diff --git a/src/types/payment.ts b/src/types/payment.ts
@@ -0,0 +1,11 @@
+export interface PartnerAuth {
+  server_name: string;
+  result: string;
+  result_msg: string;
+  cst_id: string;
+  custKey: string;
+  AuthKey: string;
+  PCD_PAY_HOST: string;
+  PCD_PAY_URL: string;
+  return_url: string;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const SERVER_URL = import.meta.env.VITE_SERVER_URL;
		export const PAYMENT_URL = import.meta.env.VITE_TEST_PATMENT_URL;
Copy link Member choisohyun Jul 14, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. 👍