Feat: credit fix [JDDEV-73]

jobdri/src/app/credit/page.tsx

@@ -37,27 +37,30 @@ function CreditContent() {
     const orderId = searchParams.get("orderId");
     const amount = searchParams.get("amount");
 
-    // URL에 결제 정보가 있으면 승인 로직 시작
     if (paymentKey && orderId && amount) {
       const processConfirm = async () => {
-        setIsConfirming(true); // 화면 잠금 (중복 요청 방지)
+        setIsConfirming(true); // 화면 잠금
+
         try {
           await confirmPurchase(paymentKey, orderId, Number(amount));
-
-          alert("크레딧 충전이 완료되었습니다!");
+          window.history.replaceState(null, "", window.location.pathname);
+          setIsConfirming(false);
+          setTimeout(() => {
+            alert("크레딧 충전이 완료되었습니다!");
+            window.location.reload();
+          }, 100);
         } catch (error) {
           console.error("결제 승인 실패:", error);
-          alert("결제 승인에 실패했습니다. 다시 시도해 주세요.");
-        } finally {
           setIsConfirming(false);
-          // 새로고침 시 중복 호출 방지
-          router.replace("/credit");
+          alert("결제 승인에 실패했습니다. 다시 시도해 주세요.");
+          // 실패 시에도 쿼리 파라미터를 날려 중복 요청 방지
+          window.history.replaceState(null, "", window.location.pathname);
         }
       };
 
       processConfirm();
     }
-  }, [searchParams, router]);
+  }, [searchParams]);
 
   const basePricePerUnit =
     plans.find((p) => p.planCode === "ONE_TIME")?.price ?? 2500;
@@ -82,9 +85,6 @@ function CreditContent() {
             price={plan.price.toLocaleString()}
             planCode={plan.planCode}
             discountRate={calcDiscountRate(plan, basePricePerUnit)}
-            discountLabel={
-              calcDiscountRate(plan, basePricePerUnit) ? "할인" : ""
-            }
           />
         ))}
       </section>

jobdri/src/components/common/cards/CreditCard.tsx

@@ -1,19 +1,20 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import type { HTMLAttributes } from "react";
 import clsx from "clsx";
 import { Button } from "@/components/common/buttons";
-import ModalPurchase from "@/components/common/modal/ModalPurchase";
+import { ModalCard } from "../modal/ModalCard";
+import { ModalOverlay } from "../modal/ModalOverlay";
 import type { PlanCode } from "@/lib/api/credit";
+import { preparePurchase } from "@/lib/api/credit";
+import { loadTossPayments, ANONYMOUS } from "@tosspayments/tosspayments-sdk";
+import { Toast } from "../toast";
 
 interface CreditCardProps extends HTMLAttributes<HTMLElement> {
   creditCount?: number;
-  creditLabel?: string;
   price?: string;
-  currencyLabel?: string;
   discountRate?: string;
-  discountLabel?: string;
   buttonLabel?: string;
   planCode: PlanCode;
   onPurchase?: () => void;
@@ -27,38 +28,98 @@ export default function CreditCard({
   planCode,
   onPurchase,
   className,
-  discountLabel,
-  creditLabel,
-  currencyLabel,
   ...articleProps
 }: CreditCardProps) {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [toastMessage, setToastMessage] = useState<string | null>(null);
 
   const handlePurchaseClick = () => {
     onPurchase?.();
     setIsModalOpen(true);
   };
 
+  const handleCloseModal = () => {
+    if (!isLoading) setIsModalOpen(false);
+  };
+
+  useEffect(() => {
+    if (toastMessage) {
+      const timer = setTimeout(() => {
+        setToastMessage(null);
+      }, 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [toastMessage]);
+
+  const handleConfirmPurchase = async () => {
+    setIsLoading(true);
+    try {
+      const { clientKey, orderId, orderName, amount, customerEmail } =
+        await preparePurchase(planCode);
+
+      const tossPayments = await loadTossPayments(clientKey);
+      const payment = tossPayments.payment({ customerKey: ANONYMOUS });
+
+      await payment.requestPayment({
+        method: "CARD",
+        amount: { currency: "KRW", value: amount },
+        orderId,
+        orderName,
+        customerEmail,
+        successUrl: `${window.location.origin}/credit`,
+        failUrl: `${window.location.origin}/credit/fail`,
+        card: {
+          easyPay: "TOSSPAY",
+          flowMode: "DIRECT",
+        },
+      });
+    } catch (error: unknown) {
+      const tossError = error as { code?: string; message?: string };
+
+      if (tossError.code === "USER_CANCEL") {
+        setToastMessage("결제를 취소하였습니다.");
+      } else {
+        console.error("결제 창 호출 중 오류:", tossError.message || error);
+        setToastMessage("결제 진행 중 오류가 발생했습니다.");
+      }
+    } finally {
+      setIsLoading(false);
+      setIsModalOpen(false);
+    }
+  };
+
   return (
     <>
+      {toastMessage && (
+        <div className="fixed top-10 left-1/2 z-[9999] -translate-x-1/2">
+          <Toast message={toastMessage} position="top" />
+        </div>
+      )}
+
       {isModalOpen && (
-        <ModalPurchase
-          creditCount={creditCount}
-          price={price}
-          planCode={planCode}
-          onClose={() => setIsModalOpen(false)}
-          title="크레딧을 충전할까요?"
-        />
+        <ModalOverlay onClose={handleCloseModal}>
+          <ModalCard
+            onSecondaryClick={handleCloseModal}
+            onPrimaryClick={handleConfirmPurchase}
+            title="크레딧을 충전할까요?"
+            description={`${creditCount} 크레딧을 충전합니다.`}
+            secondaryBtn="닫기"
+            primaryBtn={isLoading ? "처리 중..." : "충전하기"}
+          />
+        </ModalOverlay>
       )}
-      <article
+
+      {/* 크레딧 카드 UI */}
+      <main
         className={clsx(
           "flex w-full flex-col items-center h-fit rounded-card bg-bg-contents-default px-8 pt-8 pb-7 shadow-card",
           className,
         )}
         {...articleProps}
       >
         <div className="flex flex-1 flex-col justify-between gap-8 w-full">
-          <div className="flex flex-col  items-center gap-4">
+          <div className="flex flex-col items-center gap-4">
             <div className="flex items-end justify-center gap-1">
               <span className="text-center text-[32px] font-bold leading-[130%] text-text-neutral-title ">
                 {creditCount}
@@ -100,7 +161,7 @@ export default function CreditCard({
             </p>
           </div>
         </div>
-      </article>
+      </main>
     </>
   );
 }

jobdri/src/components/common/credit/CreditTable.tsx

@@ -22,7 +22,7 @@ const defaultRows: CreditRowData[] = Array.from({ length: 6 }, (_, i) => ({
 export default function CreditTable({ rows = defaultRows }: CreditTableProps) {
   return (
     <section className="flex flex-col gap-4 w-full rounded-card-l border border-line-neutral-default">
-      <div className="flex flex-col overflow-hidden rounded-card-l border-t border-line-neutral-default">
+      <div className="flex flex-col overflow-hidden rounded-card-l">
         <CreditHeader />
         {rows.map((row, index) => (
           <CreditRow

jobdri/src/components/common/lnb/Lnb.tsx

@@ -10,7 +10,7 @@ import {
 import { createPortal } from "react-dom";
 import clsx from "clsx";
 import { useRouter } from "next/navigation";
-import { ModalNotice } from "@/components/common/modal";
+import ModalNotice from "../modal/ModalNotice";
 import { Toast, type ToastVariant } from "@/components/common/toast";
 import {
   AUTH_STORAGE_KEYS,
@@ -281,10 +281,7 @@ export default function Lnb({
       );
     };
 
-    window.addEventListener(
-      MOCK_APPLY_DELETED_EVENT,
-      handleMockApplyDeleted,
-    );
+    window.addEventListener(MOCK_APPLY_DELETED_EVENT, handleMockApplyDeleted);
 
     return () => {
       window.removeEventListener(

jobdri/src/components/common/modal/ModalCard.tsx

@@ -23,7 +23,7 @@ export const ModalCard: React.FC<ModalCardProps> = ({
   onErrorClick,
 }) => {
   return (
-    <div className="bg-white rounded-modal shadow-modal flex flex-col h-fil w-full max-w-[400px]">
+    <div className="bg-white rounded-modal shadow-modal flex flex-col h-full w-100">
       <div className="flex flex-col justify-center items-start mx-7 mt-7">
         <h3 className="text-t20-semibold text-text-neutral-title text-center mb-3">
           {title}

jobdri/src/components/common/modal/ModalOverlay.tsx

@@ -4,9 +4,10 @@ import { useEffect, type ReactNode } from "react";
 
 interface ModalOverlayProps {
   children: ReactNode;
+  onClose?: () => void;
 }
 
-export function ModalOverlay({ children }: ModalOverlayProps) {
+export function ModalOverlay({ children, onClose }: ModalOverlayProps) {
   useEffect(() => {
     document.body.style.overflow = "hidden";
     return () => {
@@ -15,7 +16,10 @@ export function ModalOverlay({ children }: ModalOverlayProps) {
   }, []);
 
   return (
-    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-sm transition-opacity">
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-sm transition-opacity"
+      onClick={onClose}
+    >
       <div className="relative z-[101]" onClick={(e) => e.stopPropagation()}>
         {children}
       </div>

jobdri/src/components/common/modal/index.ts

@@ -1,6 +0,0 @@
-export { default as ModalInput } from "./ModalInput";
-export { default as ModalFileUpload } from "./ModalFileUpload";
-export { default as ModalLinkInputDemo } from "./ModalLinkInputDemo";
-export { default as ModalNotice } from "./ModalNotice";
-export { default as ModalPurchase } from "./ModalPurchase";
-export { default as ModalAdd } from "./ModalAdd";