Merge branch 'feat/userpayment'

src/app/payment/check/confirm/page.tsx

@@ -6,19 +6,17 @@ import {
   loadPaymentWidget
 } from '@tosspayments/payment-widget-sdk';
 import { useAsync } from 'react-use';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useSearchParams } from 'next/navigation';
 import { useMemberStore } from '@/store/user.store';
 import LoaderSkeleton from '@/components/skeleton/LoaderSkeleton';
 
 const clientKey = 'test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm';
 
 const PaymentConfirmPage = () => {
   const { member } = useMemberStore();
-  const router = useRouter();
   const searchParams = useSearchParams();
   const price = searchParams.get('totalAmount') || '0';
   const orderTitle = searchParams.get('orderTitle') as string;
-  //paytodo : 유저 id 추가하기
   const customerKey = searchParams.get('customerKey') as string;
   const paymentWidgetRef = useRef<PaymentWidgetInstance | null>(null);
   const paymentMethodsWidgetRef = useRef<ReturnType<
@@ -80,7 +78,7 @@ const PaymentConfirmPage = () => {
 
   return (
     <Suspense>
-      <div className="max-w-2xl mx-auto px-4 my-20">
+      <div className="max-w-2xl mx-auto px-5 mt-10 pb-20 sm:px-4 sm:my-20 sm:pb-0">
         <div className="flex flex-col gap-2 mt-4">
           <h1 className="text-lg md:text-2xl font-semibold">확인 및 결제</h1>
           <p className="text-gray-600 mb-4">

src/app/payment/check/confirm/success/page.tsx

@@ -26,7 +26,7 @@ interface PaymentResponseProps {
   };
   type?: string;
   totalAmount: number;
-  method?: '카드' | '가상계좌' | '계좌이체';
+  method?: '카드' | '가상계좌' | '계좌이체' | '간편결제';
 }
 
 interface ParamsProps {
@@ -77,21 +77,7 @@ async function getPayment({ paymentKey, orderId, amount }: PaymentRequestProps)
     );
 
     if (payment) {
-      await axios.patch(`${process.env.NEXT_PUBLIC_API_URL}/api/payments`, {
-        orderId: orderId,
-        paymentKey: paymentKey,
-        amount: amount,
-        bookingStatus: 'SUCCESS',
-        status: payment.status,
-        method: payment?.method,
-        receiptUrl: payment?.receipt?.url,
-        approvedAt: payment?.approvedAt,
-        cardNumber: payment?.card?.number,
-        cardType: payment?.card?.cardType,
-        type: payment?.type,
-        mId: payment?.mId,
-        checkoutUrl: payment?.checkout?.url
-      });
+      console.log(payment);
     }
 
     return {
@@ -100,15 +86,6 @@ async function getPayment({ paymentKey, orderId, amount }: PaymentRequestProps)
   } catch (err: any) {
     console.log(err);
 
-    await axios.patch(`${process.env.NEXT_PUBLIC_API_URL}/api/payments`, {
-      orderId: orderId,
-      paymentKey: paymentKey,
-      amount: amount,
-      bookingStatus: 'FAILED',
-      failureCode: err.code,
-      failureMessage: err.message
-    });
-
     return {
       redirect: {
         destination: `/payments/fail?code=${err.code}&message=${err.message}&orderId=${orderId}`

src/components/common/MobileFooter.tsx

@@ -7,7 +7,7 @@ const MobileFooter = () => {
   const pathname = usePathname();
 
   return (
-    <div className="sm:hidden z-[99999] fixed bottom-0 pt-[14px] pb-[18px] px-[6px] flex items-center border-t border-gray100 bg-white w-full">
+    <div className="sm:hidden z-[9999] fixed bottom-0 pt-[14px] pb-[18px] px-[6px] flex items-center border-t border-gray100 bg-white w-full">
       <div
         onClick={() => router.push('/')}
         className="flex-1 flex flex-col gap-1 items-center">

src/components/modal/CouponModal.tsx

@@ -13,15 +13,11 @@ const Couponmodal = () => {
   const ref = useRef<HTMLDivElement>(null);
   useOnClickOutside(ref, () => setOpen(false));
 
-  const handleQuit = () => {
-    //Todo 탈퇴 로직 실행
-  };
-
   return (
     <Dimmed>
       <div
         ref={ref}
-        className=" absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 ">
+        className=" absolute z-[99999] top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 ">
         <div className="px-6 py-[28px] bg-white rounded-[12px]">
           <div className="w-[312px] mx-auto">
             <div className="text-heading2 flex items-center justify-center w-full">

src/components/modal/Quitmodal.tsx

@@ -21,7 +21,7 @@ const Quitmodal = () => {
     <Dimmed>
       <div
         ref={ref}
-        className=" absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 ">
+        className=" absolute z-[99999] top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 ">
         <div className="px-6 py-[28px] bg-white rounded-[12px]">
           <div className="w-[312px] mx-auto">
             <div className="text-heading2 flex items-center justify-center w-full">

src/components/payment/PaymentCheckIndex.tsx

@@ -25,7 +25,7 @@ const PaymentCheckIndex = () => {
   };
 
   return (
-    <div>
+    <div className="px-5 pb-20 sm:px-0 sm:pb-0">
       {/* 뒤로가기 */}
       <div onClick={() => router.back()} className="py-[14px] cursor-pointer max-w-max">
         <img src="/images/payment/back.svg" alt="" />

src/components/payment/PaymentIndex.tsx

@@ -10,7 +10,7 @@ const PaymentIndex = () => {
   useEffect(() => {
     const checkLoginStatus = () => {
       const token = localStorage.getItem('access_token');
-      setIsLoggedIn(!!token); // 로그인 상태를 설정
+      setIsLoggedIn(!!token);
     };
 
     checkLoginStatus();
@@ -25,7 +25,7 @@ const PaymentIndex = () => {
   };
 
   return (
-    <div>
+    <div className="px-5 pb-20 sm:px-0 sm:pb-0">
       {/* 뒤로가기 */}
       <div onClick={() => router.back()} className="py-[14px] cursor-pointer max-w-max">
         <img src="/images/payment/back.svg" alt="" />

src/components/search/SearchIndex.tsx

@@ -31,7 +31,7 @@ const SearchIndex = () => {
 
   useEffect(() => {
     setKeyword('');
-  }, []);
+  }, [setKeyword]);
 
   return (
     <div className="pt-10 flex flex-col  gap-10">