fix : payment fixed

sw326 · Sep 15, 2024 · 43d559c · 43d559c
1 parent 85f38c4
commit 43d559c
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 21 deletions.
diff --git a/src/pages/members/PaymentCancelPage.tsx b/src/pages/members/PaymentCancelPage.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { XCircle } from 'lucide-react';
+
+const PaymentCancelPage: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const cancelInfo = location.state?.cancelInfo;
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+      <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
+        <div className="flex items-center justify-center mb-6">
+          <XCircle className="text-red-500 w-16 h-16" />
+        </div>
+        <h1 className="text-3xl font-bold mb-4 text-center text-red-600">
+          결제 취소
+        </h1>
+        <p className="text-gray-600 mb-6 text-center">결제가 취소되었습니다.</p>
+        {cancelInfo && (
+          <div className="mb-6 text-sm">
+            <p>
+              <strong>취소 금액:</strong>{' '}
+              {cancelInfo.cancelAmount.toLocaleString()}원
+            </p>
+            <p>
+              <strong>주문 번호:</strong> {cancelInfo.merchantUid}
+            </p>
+            <p>
+              <strong>취소 사유:</strong> {cancelInfo.reason}
+            </p>
+            <p>
+              <strong>취소 시간:</strong>{' '}
+              {new Date(cancelInfo.cancelledAt * 1000).toLocaleString()}
+            </p>
+          </div>
+        )}
+        <button
+          onClick={() => navigate('/memberhome')}
+          className="w-full bg-brand text-white py-3 px-4 rounded-lg hover:bg-brand-dark transition-colors text-lg font-bold"
+        >
+          홈으로 돌아가기
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default PaymentCancelPage;
diff --git a/src/pages/members/PaymentPage.tsx b/src/pages/members/PaymentPage.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { useCompletePayment } from '../../hooks/usePayment';
+import { useGetPaymentData, useCompletePayment } from '../../hooks/usePayment';
 import { adaptEstimateToPayment } from '../../utils/paymentAdapter';
 import {
   PayMethod,
@@ -18,23 +18,22 @@ import {
   CreditCard as SimplePayIcon,
 } from 'lucide-react';
 
-// Mockup data for testing without backend
-const mockPaymentData = {
-  amount: 10000,
-  buyer_name: '홍길동',
-  buyer_tel: '010-1234-5678',
-  buyer_email: '[email protected]',
-};
+type ExtendedPayMethod = PayMethod | 'SIMPLE_PAY';
 
 const PaymentPage: React.FC = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const { estimateId } = location.state as { estimateId: number };
 
-  const [paymentMethod, setPaymentMethod] = useState<PayMethod>('card');
+  const [paymentMethod, setPaymentMethod] = useState<ExtendedPayMethod>('card');
   const [simplePayMethod, setSimplePayMethod] = useState<string>('');
-  const [isLoading, setIsLoading] = useState(true);
+  const [isScriptLoading, setIsScriptLoading] = useState(true);
 
+  const {
+    data: paymentData,
+    isLoading: isDataLoading,
+    error,
+  } = useGetPaymentData(estimateId);
   const completePaymentMutation = useCompletePayment();
 
   useEffect(() => {
@@ -47,9 +46,9 @@ const PaymentPage: React.FC = () => {
 
     jquery.onload = () => {
       if (iamport.readyState === 'complete') {
-        setIsLoading(false);
+        setIsScriptLoading(false);
       } else {
-        iamport.onload = () => setIsLoading(false);
+        iamport.onload = () => setIsScriptLoading(false);
       }
     };
 
@@ -59,7 +58,9 @@ const PaymentPage: React.FC = () => {
     };
   }, []);
 
-  if (isLoading) return <LoadingSpinner />;
+  if (isScriptLoading || isDataLoading) return <LoadingSpinner />;
+  if (error) return <div>Error: {error.message}</div>;
+  if (!paymentData) return <div>결제 정보를 불러올 수 없습니다.</div>;
 
   const onClickPayment = () => {
     if (!window.IMP) {
@@ -70,9 +71,11 @@ const PaymentPage: React.FC = () => {
     const { IMP } = window;
     IMP.init(import.meta.env.VITE_IMP_KEY);
 
+    const finalPayMethod =
+      paymentMethod === 'SIMPLE_PAY' ? simplePayMethod : paymentMethod;
     const data: RequestPayParams = adaptEstimateToPayment(
-      mockPaymentData,
-      paymentMethod,
+      paymentData,
+      finalPayMethod as PayMethod,
     );
 
     IMP.request_pay(data, callback);
@@ -126,7 +129,7 @@ const PaymentPage: React.FC = () => {
                   value={method.id}
                   checked={paymentMethod === method.id}
                   onChange={() => {
-                    setPaymentMethod(method.id as PayMethod);
+                    setPaymentMethod(method.id as ExtendedPayMethod);
                     if (method.id !== 'SIMPLE_PAY') {
                       setSimplePayMethod('');
                     }
@@ -155,7 +158,7 @@ const PaymentPage: React.FC = () => {
             <div className="flex justify-between items-center text-lg">
               <span>청소 서비스 금액</span>
               <span className="font-bold">
-                {mockPaymentData.amount.toLocaleString()}원
+                {paymentData.amount.toLocaleString()}원
               </span>
             </div>
           </div>
@@ -181,7 +184,7 @@ const PaymentPage: React.FC = () => {
           }
           className="w-full bg-brand text-white py-3 px-4 rounded-lg hover:bg-brand-dark transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-lg font-bold"
         >
-          {mockPaymentData.amount.toLocaleString()}원 결제하기
+          {paymentData.amount.toLocaleString()}원 결제하기
         </button>
       </div>
     </div>

diff --git a/src/shared/Router.tsx b/src/shared/Router.tsx
@@ -37,6 +37,7 @@ import MapTest from '../pages/partners/MapTest';
 import PaymentPage from '../pages/members/PaymentPage';
 import Redirection from '../pages/members/Redirection';
 import PaymentSuccessPage from '../pages/members/PaymentSuccessPage';
+import PaymentCancelPage from '../pages/members/PaymentCancelPage';
 
 const ProtectedRoute: React.FC<{ allowedRole: 'member' | 'partner' }> = ({
   allowedRole,
@@ -99,6 +100,7 @@ const Router: React.FC = () => {
           <Route path="/estimatedetail" element={<EstimateDetail />} />
           <Route path="/payment" element={<PaymentPage />} />
           <Route path="/payment-success" element={<PaymentSuccessPage />} />
+          <Route path="/payment-cancel" element={<PaymentCancelPage />} />
         </Route>
       </Route>
 

diff --git a/src/types/portone.ts b/src/types/portone.ts
@@ -34,10 +34,24 @@ export interface EstimateAndCommissionResponseDto {
   member_email: string;
 }
 
+// 서버와 통신하는 인터페이스 (스네이크 케이스)
 export interface PaymentRequest {
+  pg: string;
+  payMethod: PayMethod;
+  merchantUid: string;
+  name: string;
+  amount: number;
+  buyerName: string;
+  buyerTel: string;
+  buyerEmail: string;
+}
+
+// 포트원 관련 인터페이스 (스네이크 케이스)
+export interface PortonePaymentRequest {
   pg: string;
   pay_method: PayMethod;
   merchant_uid: string;
+  name: string;
   amount: number;
   buyer_name: string;
   buyer_tel: string;

diff --git a/src/utils/paymentAdapter.ts b/src/utils/paymentAdapter.ts
@@ -10,8 +10,8 @@ export const adaptEstimateToPayment = (
     pay_method: selectedPayMethod as PayMethod,
     merchant_uid: `ORDER_${uuidv4().replace(/-/g, '')}`,
     amount: paymentData.amount,
-    buyer_name: paymentData.buyer_name,
-    buyer_tel: paymentData.buyer_tel,
-    buyer_email: paymentData.buyer_email,
+    buyer_name: paymentData.buyerName,
+    buyer_tel: paymentData.buyerTel,
+    buyer_email: paymentData.buyerEmail,
   };
 };