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

src/entities/additional-service/ui/link-payment/link-payment-item.tsx

@@ -0,0 +1,62 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import moment from 'moment';
+
+interface LinkPaymentItemProps {
+  transactionId: string;
+  customerName: string;
+  status: string;
+  channel: string;
+  paymentMethod: string;
+  amount: number;
+}
+
+export const LinkPaymentItem = ({
+  transactionId,
+  customerName,
+  status,
+  channel,
+  paymentMethod,
+  amount
+}: LinkPaymentItemProps) => {
+  const { navigate } = useNavigate();
+  
+  const onClickToNavigate = () => {
+    navigate(PATHS.additionalService.linkPayment.detail, {
+      state: {
+        transactionId: transactionId
+      }
+    });
+  };
+  
+  const getStatusDotClass = () => {
+    if (status === '결제완료' || status === '입금요청') {
+      return 'status-dot blue';
+    }
+    return 'status-dot gray';
+  };
+
+  return (
+    <>
+      <div 
+        className="transaction-item approved"
+        onClick={() => onClickToNavigate()}
+      >
+        <div className="transaction-status">
+          <div className={getStatusDotClass()}></div>
+        </div>
+        <div className="transaction-content">
+          <div className="transaction-title">{customerName}</div>
+          <div className="transaction-details">
+            <span>{status}</span>
+            <span className="separator">ㅣ</span>
+            <span>{channel}</span>
+            <span className="separator">ㅣ</span>
+            <span>{paymentMethod}</span>
+          </div>
+        </div>
+        <div className="transaction-amount">{amount.toLocaleString()}원</div>
+      </div>
+    </>
+  );
+};