Feat: 쿠폰 등록 화면 구현 및 API 연결

jobdri/src/app/credit/page.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { useEffect, useState, Suspense } from "react";
-import { useSearchParams, useRouter } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 import { CreditCard } from "@/components/common/cards";
 import Useage from "@/components/common/credit/Useage";
+import CouponRegistrationModal from "@/components/common/credit/CouponRegistrationModal";
 import {
   fetchCreditPlans,
   checkPaymentStatus,
@@ -12,6 +13,8 @@ import {
 import Lnb from "@/components/common/lnb/Lnb";
 import PageHeader from "@/components/common/PageHeader";
 import { BusinessFooter } from "@/components/common/footer";
+import { Button } from "@/components/common/buttons";
+import { Toast } from "@/components/common/toast";
 
 function calcDiscountRate(plan: CreditPlan, basePricePerUnit: number): string {
   const original = basePricePerUnit * plan.creditAmount;
@@ -23,8 +26,11 @@ function calcDiscountRate(plan: CreditPlan, basePricePerUnit: number): string {
 function CreditContent() {
   const [plans, setPlans] = useState<CreditPlan[]>([]);
   const [isConfirming, setIsConfirming] = useState(false);
+  const [isCouponModalOpen, setIsCouponModalOpen] = useState(false);
+  const [couponToastCreditAmount, setCouponToastCreditAmount] = useState<
+    number | null
+  >(null);
   const searchParams = useSearchParams();
-  const router = useRouter();
 
   useEffect(() => {
     fetchCreditPlans()
@@ -87,12 +93,50 @@ function CreditContent() {
     }
   }, [searchParams]);
 
+  useEffect(() => {
+    if (couponToastCreditAmount === null) return;
+
+    const toastTimer = window.setTimeout(() => {
+      setCouponToastCreditAmount(null);
+    }, 3000);
+
+    return () => window.clearTimeout(toastTimer);
+  }, [couponToastCreditAmount]);
+
+  const handleCouponRegistrationSuccess = (creditAmount: number) => {
+    setIsCouponModalOpen(false);
+    setCouponToastCreditAmount(creditAmount);
+  };
+
   const basePricePerUnit =
     plans.find((p) => p.planCode === "ONE_TIME")?.price ?? 2500;
 
   return (
     <>
-      <PageHeader />
+      <div className="flex self-stretch items-end justify-between">
+        <PageHeader />
+        <Button
+          label="쿠폰 등록하기"
+          styleType="tertiary"
+          size="large"
+          onClick={() => setIsCouponModalOpen(true)}
+        />
+      </div>
+
+      {isCouponModalOpen && (
+        <CouponRegistrationModal
+          onClose={() => setIsCouponModalOpen(false)}
+          onSuccess={handleCouponRegistrationSuccess}
+        />
+      )}
+
+      {couponToastCreditAmount !== null && (
+        <Toast
+          message={`${couponToastCreditAmount}크레딧이 충전되었습니다!`}
+          variant="check"
+          onClose={() => setCouponToastCreditAmount(null)}
+        />
+      )}
 
       {isConfirming && (
         <div className="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-black/40 backdrop-blur-sm">

jobdri/src/components/common/PageHeader.tsx

@@ -18,7 +18,7 @@ export default function PageHeader() {
     routeTitles[pathname] ?? pathname.split("/").filter(Boolean).pop() ?? "홈";
 
   return (
-    <div className="gap-y-1">
+    <div className="flex flex-col items-start gap-2">
       <h1 className="text-h24-bold text-text-neutral-title">{title}</h1>
       <p className="text-b16-med text-text-neutral-description">
         {PageDescriptions[pathname]}

jobdri/src/components/common/buttons/ButtonCtaModal.tsx

@@ -18,6 +18,7 @@ interface ButtonCtaModalProps {
   submitClassName?: string;
   cancelClassName?: string;
   className?: string;
+  submitDisabled?: boolean;
 }
 
 interface Stack3Item {
@@ -59,6 +60,7 @@ export default function ButtonCtaModal({
   submitClassName,
   cancelClassName,
   className,
+  submitDisabled = false,
 }: ButtonCtaModalProps) {
   return (
     <div
@@ -73,10 +75,11 @@ export default function ButtonCtaModal({
           size="large"
           styleType={submitStyleType}
           onClick={onSubmit}
+          disabled={submitDisabled}
           className={clsx("h-[46px] w-full", submitClassName)}
         />
       ) : stack === "stack2_horizontal" ? (
-        <div className="flex w-full items-start gap-3 self-stretch">
+        <div className="flex w-full items-start gap-2 self-stretch">
           <Button
             label={cancelLabel}
             size="large"
@@ -89,6 +92,7 @@ export default function ButtonCtaModal({
             size="large"
             styleType={submitStyleType}
             onClick={onSubmit}
+            disabled={submitDisabled}
             className={clsx("h-[46px] flex-1", submitClassName)}
           />
         </div>

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

@@ -0,0 +1,106 @@
+"use client";
+
+import { useState } from "react";
+import { ButtonCtaModal } from "@/components/common/buttons";
+import { InputTextAreaAutoGrowS } from "@/components/common/input";
+import { ModalOverlay } from "@/components/common/modal/ModalOverlay";
+import { redeemCoupon } from "@/lib/api/credit";
+
+interface CouponRegistrationModalProps {
+  onClose: () => void;
+  onSuccess: (creditAmount: number) => void;
+}
+
+export default function CouponRegistrationModal({
+  onClose,
+  onSuccess,
+}: CouponRegistrationModalProps) {
+  const [couponNumber, setCouponNumber] = useState("");
+  const [error, setError] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleCouponNumberChange = (value: string) => {
+    setCouponNumber(value);
+    setError("");
+  };
+
+  const handleSubmit = async () => {
+    const couponCode = couponNumber.trim();
+
+    if (!couponCode || isSubmitting) {
+      setError("쿠폰 번호를 확인해주세요.");
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const result = await redeemCoupon(couponCode);
+      onSuccess(result.creditAmount);
+    } catch {
+      setError("쿠폰 번호를 확인해주세요.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <ModalOverlay onClose={onClose}>
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="coupon-registration-title"
+        aria-describedby="coupon-registration-description"
+        className="flex w-[400px] shrink-0 flex-col items-center justify-center gap-0 rounded-card-l bg-bg-contents-default shadow-modal"
+      >
+        <div className="flex flex-col items-start gap-4 self-stretch px-7 pt-7">
+          <div className="flex flex-col items-start gap-3 self-stretch">
+            <h2
+              id="coupon-registration-title"
+              className="self-stretch text-t20-semibold text-text-neutral-title [font-feature-settings:'liga'_off,'clig'_off]"
+            >
+              쿠폰 등록하기
+            </h2>
+            <p
+              id="coupon-registration-description"
+              className="self-stretch text-sub14-med text-text-neutral-description [font-feature-settings:'liga'_off,'clig'_off]"
+            >
+              &ldquo;-&rdquo;와 띄어쓰기 없이 쿠폰번호를 입력해주세요.
+            </p>
+          </div>
+        </div>
+
+        <div className="flex flex-col items-start gap-2.5 self-stretch px-7 pt-6">
+          <InputTextAreaAutoGrowS
+            aria-label="쿠폰 일련 번호"
+            autoFocus
+            label=""
+            required={false}
+            placeholder="일련 번호를 입력해주세요."
+            value={couponNumber}
+            onChange={handleCouponNumberChange}
+            error={error}
+            disabled={isSubmitting}
+            showAddButton={false}
+            showBottomLine={false}
+            className="gap-1"
+          />
+        </div>
+
+        <div className="flex items-end justify-end gap-2 self-stretch px-5 pt-8 pb-5">
+          <ButtonCtaModal
+            stack="stack2_horizontal"
+            cancelLabel="닫기"
+            label="등록하기"
+            cancelStyleType="quaternary"
+            submitStyleType="secondary"
+            onCancel={onClose}
+            onSubmit={handleSubmit}
+            submitDisabled={isSubmitting}
+            className="w-full !pb-0"
+          />
+        </div>
+      </div>
+    </ModalOverlay>
+  );
+}

jobdri/src/components/common/input/InputTextAreaAutoGrowS.tsx

@@ -37,6 +37,7 @@ export function InputTextAreaAutoGrowS({
   leadingContent,
   trailingContent,
   showAddButton = true,
+  showBottomLine = true,
   addButtonLabel = "추가하기",
   addButtonDisabled,
   onAdd,
@@ -171,18 +172,20 @@ export function InputTextAreaAutoGrowS({
           </div>
         </div>
 
-        <InputTextAreaFixedBottom
-          addButtonDisabled={addButtonDisabled}
-          addButtonLabel={addButtonLabel}
-          count={count}
-          disabled={disabled}
-          hasValue={hasValue}
-          leadingContent={leadingContent}
-          maxLength={maxLength}
-          onAdd={onAdd}
-          showAddButton={showAddButton}
-          trailingContent={trailingContent}
-        />
+        {showBottomLine && (
+          <InputTextAreaFixedBottom
+            addButtonDisabled={addButtonDisabled}
+            addButtonLabel={addButtonLabel}
+            count={count}
+            disabled={disabled}
+            hasValue={hasValue}
+            leadingContent={leadingContent}
+            maxLength={maxLength}
+            onAdd={onAdd}
+            showAddButton={showAddButton}
+            trailingContent={trailingContent}
+          />
+        )}
       </div>
 
       <InputTextAreaFixedMessage

jobdri/src/components/common/input/InputTextAreaFixedShared.tsx

@@ -35,6 +35,7 @@ export interface InputTextAreaFixedSharedProps extends Omit<
   leadingContent?: ReactNode;
   trailingContent?: ReactNode;
   showAddButton?: boolean;
+  showBottomLine?: boolean;
   addButtonLabel?: string;
   addButtonDisabled?: boolean;
   onAdd?: () => void;

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

@@ -9,15 +9,25 @@ interface ModalOverlayProps {
 
 export function ModalOverlay({ children, onClose }: ModalOverlayProps) {
   useEffect(() => {
+    const previousOverflow = document.body.style.overflow;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onClose?.();
+      }
+    };
+
     document.body.style.overflow = "hidden";
+    document.addEventListener("keydown", handleKeyDown);
+
     return () => {
-      document.body.style.overflow = "unset";
+      document.body.style.overflow = previousOverflow;
+      document.removeEventListener("keydown", handleKeyDown);
     };
-  }, []);
+  }, [onClose]);
 
   return (
     <div
-      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-sm transition-opacity"
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-bg-lightbox-default transition-opacity"
       onClick={onClose}
     >
       <div className="relative z-[101]" onClick={(e) => e.stopPropagation()}>

jobdri/src/components/common/toast/Toast.tsx

@@ -34,7 +34,7 @@ export default function Toast({
 
         isTop
           ? "top-10 left-1/2 w-fit -translate-x-1/2 justify-center gap-3 rounded-card bg-fill-quaternary-default py-3 pr-4 pl-3"
-          : "right-5 bottom-28 max-w-[400px] justify-between self-stretch rounded-card px-4 py-3 pl-5",
+          : "right-7 bottom-7 max-w-[400px] justify-between self-stretch rounded-card px-4 py-3 pl-5",
 
         isDark ? "bg-fill-tertiary-default" : "bg-fill-quaternary-default",
         className,

jobdri/src/lib/api/credit.ts

@@ -128,3 +128,43 @@ export async function checkPaymentStatus(orderId: string) {
   if (!response.ok) throw new Error("Failed to fetch payment status");
   return response.json();
 }
+
+export interface RedeemCouponResult {
+  couponCode: string;
+  creditAmount: number;
+  creditBalance: number;
+  redeemedAt: string;
+}
+
+interface RedeemCouponResponse {
+  isSuccess: boolean;
+  code: string;
+  message: string;
+  result: RedeemCouponResult | null;
+  error: string | null;
+}
+
+export async function redeemCoupon(
+  couponCode: string,
+): Promise<RedeemCouponResult> {
+  const response = await fetch(`${API_BASE_URL}/api/payments/coupons/redeem`, {
+    method: "POST",
+    headers: {
+      ...getAuthHeaders(),
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ couponCode }),
+  });
+
+  if (response.status === 401) handleUnauthorized();
+
+  const payload = (await response.json()) as RedeemCouponResponse;
+
+  if (!response.ok || !payload.isSuccess || !payload.result) {
+    throw new Error(
+      payload.error || payload.message || "쿠폰 번호를 확인해주세요.",
+    );
+  }
+
+  return payload.result;
+}