부가서비스 : 링크결제 발송내역,발송대기 상세페이지 추가

src/entities/additional-service/ui/link-payment/apply/link-payment-step1.tsx

@@ -0,0 +1,136 @@
+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';
+
+export const LinkPaymentStep1 = () => {
+  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 handleInputChange = (field: string, value: string) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+
+  return (
+    <>
+      <div className="issue-form">
+        <div className="issue-row gap-10">
+          <div className="issue-label">가맹점</div>
+          <div className="issue-field">
+            <select 
+              className="wid-100"
+              value={formData.merchant}
+              onChange={(e) => handleInputChange('merchant', e.target.value)}
+            >
+              <option>nictest001m</option>
+            </select>
+          </div>
+        </div>
+
+        <div className="issue-row gap-10">
+          <div className="issue-label">발송 수단</div>
+          <div className="issue-field">
+            <div className="chip-row">
+              <span 
+                className={`keyword-tag flex-1 ${selectedPaymentMethod === 'SMS' ? 'active' : ''}`}
+                onClick={() => handlePaymentMethodChange('SMS')}
+              >
+                SMS
+              </span>
+              <span 
+                className={`keyword-tag flex-1 ${selectedPaymentMethod === '이메일' ? 'active' : ''}`}
+                onClick={() => handlePaymentMethodChange('이메일')}
+              >
+                이메일
+              </span>
+              <span 
+                className={`keyword-tag flex-1 ${selectedPaymentMethod === '카카오' ? 'active' : ''}`}
+                onClick={() => handlePaymentMethodChange('카카오')}
+              >
+                카카오
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div className="issue-row gap-10">
+          <div className="issue-label">상품명</div>
+          <div className="issue-field">
+            <input 
+              type="text" 
+              placeholder="" 
+              value={formData.productName}
+              onChange={(e) => handleInputChange('productName', e.target.value)}
+            />
+          </div>
+        </div>
+
+        <div className="issue-row gap-10">
+          <div className="issue-label">상품가격</div>
+          <div className="issue-field">
+            <input 
+              type="text" 
+              placeholder="" 
+              value={formData.productPrice}
+              onChange={(e) => handleInputChange('productPrice', e.target.value)}
+            />
+          </div>
+        </div>
+
+        <div className="issue-row gap-10">
+          <div className="issue-label">상품 주문번호</div>
+          <div className="issue-field">
+            <input 
+              type="text" 
+              placeholder="" 
+              value={formData.orderNumber}
+              onChange={(e) => handleInputChange('orderNumber', e.target.value)}
+            />
+          </div>
+        </div>
+
+        <div className="issue-row gap-10">
+          <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>
+              <span>까지</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};