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

2025-09-10 17:03:19 +09:00
parent a71690bad8
commit 409a711b9a
29 changed files with 1039 additions and 320 deletions
--- a/src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx
@@ -0,0 +1,129 @@
+import { IMAGE_ROOT } from "@/shared/constants/common";
+import { useState, useEffect } from "react";
+import { LinkPaymentFilter } from "./link-payment-filter";
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { PATHS } from "@/shared/constants/paths";
+import { LinkPaymentPendingList } from "./link-payment-pending-list";
+
+export const LinkPaymentPendingSendWrap = () => {
+    const { navigate } = useNavigate();
+    const [filterOn, setFilterOn] = useState<boolean>(false);
+    const [listItems, setListItems] = useState({});
+    
+    const onClickToOpenFilter = () => {
+        setFilterOn(!filterOn);
+    };
+    const onClickToNavigate = () => {
+        navigate(PATHS.additionalService.linkPayment.request)
+    }
+    
+    const callList = () => {
+        setListItems({
+            '20250608': [
+                {
+                    transactionId: 'pending1',
+                    customerName: '김*환(7000)',
+                    status: '발송요청',
+                    channel: 'SMS',
+                    amount: 5254000
+                },
+                {
+                    transactionId: 'pending2', 
+                    customerName: '김*환(7000)',
+                    status: '발송요청',
+                    channel: 'SMS',
+                    amount: 5254000
+                },
+                {
+                    transactionId: 'pending3',
+                    customerName: '김*환(7000)',
+                    status: '발송요청',
+                    channel: '이메일',
+                    amount: 5254000
+                },
+                {
+                    transactionId: 'pending4',
+                    customerName: '김*환(7000)',
+                    status: '발송취소',
+                    channel: 'SMS',
+                    amount: 5254000
+                },
+                {
+                    transactionId: 'pending5',
+                    customerName: '김*환(7000)',
+                    status: '발송취소',
+                    channel: 'SMS',
+                    amount: 5254000
+                }
+            ]
+        });
+    };
+
+    useEffect(() => {
+        callList();
+    }, []);
+    return (
+        <>
+            <section className="summary-section">
+                <div className="credit-controls">
+                    <div>
+                        <input
+                            className="credit-period"
+                            type="text"
+                            value="2025.06.01 ~ 2025.06.30"
+                            readOnly={true}
+                        />
+                        <button
+                            className="filter-btn"
+                            aria-label="필터"
+                        >
+                            <img
+                                src={IMAGE_ROOT + '/ico_setting.svg'}
+                                alt="검색옵션"
+                                onClick={() => onClickToOpenFilter()}
+                            />
+                        </button>
+                    </div>
+                    <button
+                        className="download-btn"
+                        aria-label="다운로드"
+                    >
+                        <img
+                            src={IMAGE_ROOT + '/ico_download.svg'}
+                            alt="다운로드"
+                        />
+                    </button>
+                </div>
+            </section>
+
+            <section className="filter-section">
+                <div className="sort-options">
+                    <button className="sort-btn active">최신순</button>
+                    <span className="sort-divider">|</span>
+                    <button className="sort-btn">고액순</button>
+                </div>
+                <div className="excrow">
+                    <div className="full-menu-keywords no-padding">
+                        <span className="keyword-tag active">전체</span>
+                        <span className="keyword-tag">성공</span>
+                        <span className="keyword-tag">실패</span>
+                    </div>
+                </div>
+            </section>
+
+            <LinkPaymentPendingList 
+                listItems={listItems}
+            />
+            <div className="apply-row">
+                <button
+                    className="btn-50 btn-blue flex-1"
+                    onClick={() => onClickToNavigate()}
+                >결제 신청</button>
+            </div>
+            <LinkPaymentFilter
+                filterOn={filterOn}
+                setFilterOn={setFilterOn}
+            ></LinkPaymentFilter>
+        </>
+    )
+}