Merge pull request #16 from URECA-PODONG/feat/#6

feat(#6):1차 결제, 주문페이지
URECA-PODONG · Oct 28, 2024 · 6d5db13 · 6d5db13
2 parents 9ee5c3c + 3808499
commit 6d5db13
Show file tree

Hide file tree

Showing 7 changed files with 899 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
+    <script src="https://cdn.iamport.kr/v1/iamport.js"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/images/payment/Payment_image1.gif b/public/images/payment/Payment_image1.gif
diff --git a/src/Router.jsx b/src/Router.jsx
@@ -3,7 +3,13 @@ import MainPage from './pages/MainPage/MainPage.jsx';
 import Nav from './components/common/Nav.jsx';
 import Footer from './components/common/Footer';
 import ScrollTop from './components/common/ScrollTop.jsx';
+<<<<<<< Updated upstream
 import LoginPage from './pages/LoginPage/LoginPage.jsx';
+=======
+import PGpay from './pages/PaymentPage/PGpay.jsx';
+import Payment from './pages/PaymentPage/Payment.jsx';
+import PaymentEnd from './pages/PaymentPage/PaymentEnd.jsx';
+>>>>>>> Stashed changes
 import PetItemPage from './pages/PetItemPage/PetItemPage.jsx';
 import PetItemListPage from './pages/PetItemPage/PetItemListPage.jsx';
 import PetItemDetailPage from './pages/PetItemPage/PetItemDetailPage.jsx';
@@ -12,15 +18,19 @@ function Router() {
   return (
     <BrowserRouter>
       <div className="Router">
-        <Nav />
+        {/* <Nav /> */}
         <Routes>
+          <Route path="/" element={<PaymentEnd/>} />
           <Route path="/" element={<MainPage />} />
+<<<<<<< Updated upstream
           <Route path="/Login" element={<LoginPage />} />
+=======
+>>>>>>> Stashed changes
           <Route path="/petitem" element={<PetItemPage />} />
           <Route path="/petitemList" element={<PetItemListPage />} />
           <Route path="/petitemDetail/:no" element={<PetItemDetailPage/>} />
         </Routes>
-        <Footer />
+        {/* <Footer /> */}
         <ScrollTop />
       </div>
     </BrowserRouter>

diff --git a/src/components/common/Footer.jsx b/src/components/common/Footer.jsx
@@ -5,7 +5,7 @@ import { LuCalendarHeart } from 'react-icons/lu';
 import { images } from '../Images';
 import { Link, useLocation } from 'react-router-dom';
 
-const Footer = () => {
+const Footer = () => { 
   const location = useLocation();
   const [activeTab, setActiveTab] = useState(null);
 

diff --git a/src/pages/PaymentPage/PGpay.jsx b/src/pages/PaymentPage/PGpay.jsx
@@ -0,0 +1,45 @@
+import React from "react";
+import styled from "styled-components";
+
+// 결제 요청 함수
+export const requestPayment = () => {
+  console.log("결제 요청 함수 호출"); // 결제 함수 호출 여부 확인
+  const { IMP } = window; // 포트원 SDK 로드 확인
+  if (!IMP) {
+    console.error("포트원 SDK 로드 실패");
+    return;
+  }
+  IMP.init("imp02101050"); // 포트원 가맹점 식별코드
+
+  const data = {
+    pg: "html5_inicis", // PG사명
+    pay_method: "card", // 결제수단
+    merchant_uid: `mid_${new Date().getTime()}`, // 주문번호 (중복되지 않도록 생성)
+    name: "테스트 결제", // 결제명
+    amount: 1000, // 결제 금액
+    buyer_email: "[email protected]", // 구매자 이메일
+    buyer_name: "홍길동", // 구매자 이름
+    buyer_tel: "010-1234-5678", // 구매자 전화번호
+    buyer_addr: "서울특별시 강남구 삼성동", // 구매자 주소
+    buyer_postcode: "123-456", // 구매자 우편번호
+  };
+
+  // 결제 요청
+  IMP.request_pay(data, callback);
+};
+
+// 결제 완료 후 콜백 함수
+const callback = (response) => {
+  const { success, error_msg } = response;
+  if (success) {
+    alert("결제가 완료되었습니다!");
+  } else {
+    alert(`결제에 실패하였습니다: ${error_msg}`);
+  }
+};
+
+const Page = styled.div`
+  margin: 64px 0;
+`;
+
+export default requestPayment;