부가서비스

- 링크결제 결제신청 API 연결
2025-09-22 17:00:02 +09:00
parent ea9803d442
commit b5bdd3d855
9 changed files with 327 additions and 98 deletions
--- a/src/entities/additional-service/api/link-payment/use-extension-link-pay-request-mutation.ts
+++ b/src/entities/additional-service/api/link-payment/use-extension-link-pay-request-mutation.ts
@@ -0,0 +1,26 @@
+import axios from 'axios';
+import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import {
+    useMutation,
+    UseMutationOptions
+} from '@tanstack/react-query';
+import { ExtensionLinkPayRequestParams, ExtensionLinkPayRequestResponse } from '../../model/types';
+
+export const extensionLinkPayRequest = (params: ExtensionLinkPayRequestParams) => {
+  return resultify(
+    axios.post<ExtensionLinkPayRequestResponse>(API_URL_ADDITIONAL_SERVICE.extensionLinkPaymentRequest(), params),
+  );
+};
+
+export const useExtensionLinkPayRequestMutation = (options?: UseMutationOptions<ExtensionLinkPayRequestResponse, CBDCAxiosError, ExtensionLinkPayRequestParams>) => {
+  const mutation = useMutation<ExtensionLinkPayRequestResponse, CBDCAxiosError, ExtensionLinkPayRequestParams>({
+    ...options,
+    mutationFn: (params: ExtensionLinkPayRequestParams) => extensionLinkPayRequest(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};
--- a/src/entities/additional-service/api/link-payment/use-extension-link-pay-wait-delete-mutation.ts
+++ b/src/entities/additional-service/api/link-payment/use-extension-link-pay-wait-delete-mutation.ts
@@ -13,7 +13,7 @@ import { ExtensionLinkPayWaitDeleteParams } from '../../model/types';

 export const extensionLinkPayWaitDelete = async (params: ExtensionLinkPayWaitDeleteParams)=> {
    return resultify(
-        axios.post<ExtensionLinkPayWaitDeleteRespone>(API_URL_ADDITIONAL_SERVICE.extensionLinkPayMentWaitDelete(), params)
+        axios.post<ExtensionLinkPayWaitDeleteRespone>(API_URL_ADDITIONAL_SERVICE.extensionLinkPaymentWaitDelete(), params)
    );
 };

--- a/src/entities/additional-service/model/types.ts
+++ b/src/entities/additional-service/model/types.ts
@@ -215,6 +215,21 @@ export enum LinkPaymentSendingStatus {
  SEND_CANCEL = "SEND_CANCEL"
 }

+export enum IdentityType {
+  INDIVIDUAL = "INDIVIDUAL",
+  CORPORATE = "CORPORATE"
+}
+
+export enum Language {
+  KR = "KR",
+  EN = "EN"
+}
+
+export enum LinkContentType {
+  BASIC = "BASIC",
+  ADDITIONAL = "ADDITIONAL"
+}
+
 export interface LinkPaymentHistoryListItem {
  tid?: string;
  // TODO : buyerName 필요
@@ -396,6 +411,45 @@ export interface ExtensionLinkPayHistoryDownloadExcelRespone {
  status: boolean;
 }

+export interface ExtensionLinkPayRequestParams extends ExtensionRequestParams {
+  sendMethod: string;
+  goodsName: string;
+  amount: number;
+  moid: string;
+  paymentExpiryDate: string;
+  buyerName: string;
+  email: string;
+  phoneNumber: string;
+  isIdentity: boolean;
+  identityType: IdentityType;
+  identityValue: string;
+  language: Language;
+  linkContentType: LinkContentType;
+}
+
+export interface ExtensionLinkPayRequestResponse {
+  status: boolean
+}
+
+export interface LinkPaymentFormData {
+  // Step 1
+  mid: string;
+  sendMethod: LinkPaymentSendMethod;
+  goodsName: string;
+  amount: number;
+  moid: string;
+  paymentExpiryDate: string;
+  // Step 2
+  buyerName: string;
+  email: string;
+  phoneNumber: string;
+  isIdentity: boolean;
+  identityType: IdentityType;
+  identityValue: string;
+  language: Language;
+  linkContentType: LinkContentType;
+}
+
 export interface ExtensionLinkPayHistoryDetailParams extends ExtensionRequestParams {
  tid: string;
 }
--- a/src/entities/additional-service/ui/link-payment/apply/link-payment-step1.tsx
+++ b/src/entities/additional-service/ui/link-payment/apply/link-payment-step1.tsx
@@ -1,33 +1,31 @@
-import { useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
-import { IMAGE_ROOT } from '@/shared/constants/common';
+import { LinkPaymentFormData, LinkPaymentSendMethod } from '@/entities/additional-service/model/types';
+import { SingleDatePicker } from '@/shared/ui/filter/single-date-picker';

-export const LinkPaymentStep1 = () => {
+interface LinkPaymentStep1Props {
+  formData: LinkPaymentFormData;
+  setFormData: (formData: LinkPaymentFormData) => void;
+}
+
+export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Props) => {
  const { navigate } = useNavigate();

  useSetOnBack(() => {
    navigate(PATHS.additionalService.intro);
  });
-  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState('SMS');
-  const [formData, setFormData] = useState({
-    merchant: 'nictest001m',
-    productName: '',
-    productPrice: '',
-    orderNumber: '',
-    validDate: '2025.06.30'
-  });

-  const handlePaymentMethodChange = (method: string) => {
-    setSelectedPaymentMethod(method);
+  const handlePaymentMethodChange = (method: LinkPaymentSendMethod) => {
+    setFormData({ ...formData, sendMethod: method });
  };

  const handleInputChange = (field: string, value: string) => {
-    setFormData(prev => ({
-      ...prev,
-      [field]: value
-    }));
+    setFormData({ ...formData, [field]: value });
+  };
+
+  const handleDateChange = (date: string) => {
+    setFormData({ ...formData, paymentExpiryDate: date });
  };

  return (
@@ -38,8 +36,8 @@ export const LinkPaymentStep1 = () => {
          <div className="issue-field">
            <select
              className="wid-100"
-              value={formData.merchant}
-              onChange={(e) => handleInputChange('merchant', e.target.value)}
+              value={formData.mid}
+              onChange={(e) => handleInputChange('mid', e.target.value)}
            >
              <option>nictest001m</option>
            </select>
@@ -51,20 +49,20 @@ export const LinkPaymentStep1 = () => {
          <div className="issue-field">
            <div className="chip-row">
              <span
-                className={`keyword-tag flex-1 ${selectedPaymentMethod === 'SMS' ? 'active' : ''}`}
-                onClick={() => handlePaymentMethodChange('SMS')}
+                className={`keyword-tag flex-1 ${formData.sendMethod === 'SMS' ? 'active' : ''}`}
+                onClick={() => handlePaymentMethodChange(LinkPaymentSendMethod.SMS)}
              >
                SMS
              </span>
              <span
-                className={`keyword-tag flex-1 ${selectedPaymentMethod === '이메일' ? 'active' : ''}`}
-                onClick={() => handlePaymentMethodChange('이메일')}
+                className={`keyword-tag flex-1 ${formData.sendMethod === 'EMAIL' ? 'active' : ''}`}
+                onClick={() => handlePaymentMethodChange(LinkPaymentSendMethod.EMAIL)}
              >
                이메일
              </span>
              <span
-                className={`keyword-tag flex-1 ${selectedPaymentMethod === '카카오' ? 'active' : ''}`}
-                onClick={() => handlePaymentMethodChange('카카오')}
+                className={`keyword-tag flex-1 ${formData.sendMethod === 'KAKAO' ? 'active' : ''}`}
+                onClick={() => handlePaymentMethodChange(LinkPaymentSendMethod.KAKAO)}
              >
                카카오
              </span>
@@ -78,8 +76,8 @@ export const LinkPaymentStep1 = () => {
            <input
              type="text"
              placeholder=""
-              value={formData.productName}
-              onChange={(e) => handleInputChange('productName', e.target.value)}
+              value={formData.goodsName}
+              onChange={(e) => handleInputChange('goodsName', e.target.value)}
            />
          </div>
        </div>
@@ -90,8 +88,8 @@ export const LinkPaymentStep1 = () => {
            <input
              type="text"
              placeholder=""
-              value={formData.productPrice}
-              onChange={(e) => handleInputChange('productPrice', e.target.value)}
+              value={formData.amount}
+              onChange={(e) => handleInputChange('amount', e.target.value)}
            />
          </div>
        </div>
@@ -102,8 +100,8 @@ export const LinkPaymentStep1 = () => {
            <input
              type="text"
              placeholder=""
-              value={formData.orderNumber}
-              onChange={(e) => handleInputChange('orderNumber', e.target.value)}
+              value={formData.moid}
+              onChange={(e) => handleInputChange('moid', e.target.value)}
            />
          </div>
        </div>
@@ -112,20 +110,11 @@ export const LinkPaymentStep1 = () => {
          <div className="issue-label">결제 유효일</div>
          <div className="issue-field">
            <div className="link-apply-date">
-              <div className="input-wrapper date">
-                <input
-                  type="text"
-                  value={formData.validDate}
-                  className="date-input"
-                  onChange={(e) => handleInputChange('validDate', e.target.value)}
-                />
-                <button type="button" className="date-btn">
-                  <img
-                    src={IMAGE_ROOT + '/ico_date.svg'}
-                    alt="날짜 선택"
-                  />
-                </button>
-              </div>
+              <SingleDatePicker
+                date={formData.paymentExpiryDate}
+                setDate={handleDateChange}
+                placeholder="날짜 선택"
+              />
              <span>까지</span>
            </div>
          </div>
--- a/src/entities/additional-service/ui/link-payment/apply/link-payment-step2.tsx
+++ b/src/entities/additional-service/ui/link-payment/apply/link-payment-step2.tsx
@@ -1,45 +1,40 @@
 import {ProcessStep} from "@/entities/transaction/model/types";
 import {useSetOnBack} from "@/widgets/sub-layout/use-sub-layout";
-import {useState} from "react";
+import { LinkPaymentFormData, IdentityType, Language, LinkContentType } from '@/entities/additional-service/model/types'

 export interface LinkPaymentStep2Props {
    setProcessStep: ((processStep: ProcessStep) => void);
+    formData: LinkPaymentFormData;
+    setFormData: (formData: LinkPaymentFormData) => void;
 }

 export const LinkPaymentStep2 = ({
-    setProcessStep
+    setProcessStep,
+    formData,
+    setFormData
 }: LinkPaymentStep2Props) => {
    useSetOnBack(() => {
        setProcessStep(ProcessStep.One);
    });

    const handleInputChange = (field: string, value: string) => {
-        setFormData(prev => ({
-            ...prev,
-            [field]: value
-        }));
+        setFormData({ ...formData, [field]: value });
    };

-    const [selectedPurchaserType, setSelectedPurchaserType] = useState('개인');
-    const [selectedLanguage, setSelectedLanguage] = useState('국문')
-    const [selectedLinkContent, setSelectedLinkContent] = useState('기본');
-    const [formData, setFormData] = useState({
-        purchaser: '',
-        purchaserEmail: '',
-        purchaserPhone: '',
-        purchaserBirth: ''
-    });
-
-    const handlePurchaserTypeChange = (type: string) => {
-        setSelectedPurchaserType(type)
+    const handleIdendityTypeChange = (type: IdentityType) => {
+        setFormData({ ...formData, identityType: type });
    }

-    const handleLanguageType = (type: string) => {
-        setSelectedLanguage(type)
+    const handleLanguageType = (type: Language) => {
+        setFormData({ ...formData, language: type });
    }

-    const handleLinkContent = (content: string) => {
-        setSelectedLinkContent(content)
+    const handleLinkContent = (content: LinkContentType) => {
+        setFormData({ ...formData, linkContentType: content });
+    }
+
+    const handleIdentityToggle = (isChecked: boolean) => {
+        setFormData({ ...formData, isIdentity: isChecked });
    }

    return (
@@ -51,8 +46,8 @@ export const LinkPaymentStep2 = ({
                        <input
                            type="text"
                            placeholder=""
-                            value={formData.purchaser}
-                            onChange={(e) => handleInputChange('purchaser', e.target.value)}
+                            value={formData.buyerName}
+                            onChange={(e) => handleInputChange('buyerName', e.target.value)}
                        />
                    </div>
                </div>
@@ -63,8 +58,8 @@ export const LinkPaymentStep2 = ({
                        <input
                            type="text"
                            placeholder="test@nicepay.co.kr"
-                            value={formData.purchaserEmail}
-                            onChange={(e) => handleInputChange('purchaserEmail', e.target.value)}
+                            value={formData.email}
+                            onChange={(e) => handleInputChange('email', e.target.value)}
                        />
                    </div>
                </div>
@@ -75,8 +70,8 @@ export const LinkPaymentStep2 = ({
                        <input
                            type="text"
                            placeholder="01012345678"
-                            value={formData.purchaserPhone}
-                            onChange={(e) => handleInputChange('purchaserPhone', e.target.value)}
+                            value={formData.phoneNumber}
+                            onChange={(e) => handleInputChange('phoneNumber', e.target.value)}
                        />
                    </div>
                </div>
@@ -84,7 +79,7 @@ export const LinkPaymentStep2 = ({
                <div className="issue-row gap-10 beetween">
                    <div className="issue-label wid-105">구매자 정보 대조</div>
                    <label className="settings-switch">
-                        <input type="checkbox"/>
+                        <input type="checkbox" checked={formData.isIdentity} onChange={(e) => handleIdentityToggle(e.target.checked)}/>
                        <span className="slider"></span>
                    </label>
                </div>
@@ -93,14 +88,14 @@ export const LinkPaymentStep2 = ({
                    <div className="issue-field">
                        <div className="chip-row">
                            <span
-                                className={`keyword-tag flex-1 ${selectedPurchaserType === '개인' ? 'active' : ''}`}
-                                onClick={() => handlePurchaserTypeChange('개인')}
+                                className={`keyword-tag flex-1 ${formData.identityType === IdentityType.INDIVIDUAL ? 'active' : ''}`}
+                                onClick={() => handleIdendityTypeChange(IdentityType.INDIVIDUAL)}
                            >
                                개인
                            </span>
                            <span
-                                className={`keyword-tag flex-1 ${selectedPurchaserType === '법인' ? 'active' : ''}`}
-                                onClick={() => handlePurchaserTypeChange('법인')}
+                                className={`keyword-tag flex-1 ${formData.identityType === IdentityType.CORPORATE ? 'active' : ''}`}
+                                onClick={() => handleIdendityTypeChange(IdentityType.CORPORATE)}
                            >
                                법인
                            </span>
@@ -112,10 +107,10 @@ export const LinkPaymentStep2 = ({
                    <div className="issue-label wid-105"></div>
                    <div className='issue-field'>
                        <input
-                            type="text"
+                            type="number"
                            placeholder="생년월일 6자리"
-                            value={formData.purchaserBirth}
-                            onChange={(e) => handleInputChange('purchaserPhone', e.target.value)}
+                            value={formData.identityValue}
+                            onChange={(e) => handleInputChange('identityValue', e.target.value)}
                        />
                    </div>
                </div>
@@ -125,14 +120,14 @@ export const LinkPaymentStep2 = ({
                    <div className="issue-field">
                        <div className="chip-row">
                            <span
-                                className={`keyword-tag flex-1 ${selectedLanguage === '국문' ? 'active' : ''}`}
-                                onClick={() => handleLanguageType('국문')}
+                                className={`keyword-tag flex-1 ${formData.language === Language.KR ? 'active' : ''}`}
+                                onClick={() => handleLanguageType(Language.KR)}
                            >
                                국문
                            </span>
                            <span
-                                className={`keyword-tag flex-1 ${selectedLanguage === '영문' ? 'active' : ''}`}
-                                onClick={() => handleLanguageType('영문')}
+                                className={`keyword-tag flex-1 ${formData.language === Language.EN ? 'active' : ''}`}
+                                onClick={() => handleLanguageType(Language.EN)}
                            >
                                영문
                            </span>
@@ -144,14 +139,14 @@ export const LinkPaymentStep2 = ({
                    <div className="issue-field">
                        <div className="chip-row">
                            <span
-                                className={`keyword-tag flex-1 ${selectedLinkContent === '기본' ? 'active' : ''}`}
-                                onClick={() => handleLinkContent('기본')}
+                                className={`keyword-tag flex-1 ${formData.linkContentType === LinkContentType.BASIC ? 'active' : ''}`}
+                                onClick={() => handleLinkContent(LinkContentType.BASIC)}
                            >
                                기본
                            </span>
                            <span
-                                className={`keyword-tag flex-1 ${selectedLinkContent === '추가' ? 'active' : ''}`}
-                                onClick={() => handleLinkContent('추가')}
+                                className={`keyword-tag flex-1 ${formData.linkContentType === LinkContentType.ADDITIONAL ? 'active' : ''}`}
+                                onClick={() => handleLinkContent(LinkContentType.ADDITIONAL)}
                            >
                                추가
                            </span>