부가서비스

- 링크결제 결제신청 API 연결

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>