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

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-dispatch-list-wrap.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-dispatch-list-wrap.tsx
@@ -0,0 +1,143 @@
+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 { LinkPaymentList } from "./link-payment-list";
+import { SortOptionsBox } from "./sort-options-box";
+import { SortByKeys } from "../../model/types";
+
+
+export const LinkPaymentDispatchListWrap = () => {
+    const { navigate } = useNavigate();
+    const [filterOn, setFilterOn] = useState<boolean>(false);
+    const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
+    const [listItems, setListItems] = useState({});
+
+    const onClickToOpenFilter = () => {
+        setFilterOn(!filterOn);
+    };
+    const onClickToNavigate = () => {
+        navigate(PATHS.additionalService.linkPayment.request)
+    }
+    const onClickToSort = (sort: SortByKeys) => {
+        setSortBy(sort);
+        callList({ sortBy: sort });
+    };
+
+    const callList = (option?: {sortBy?: string, val?: string}) => {
+        setListItems({
+            '20250608': [
+                {
+                    transactionId: 'txn1',
+                    customerName: '김*환(7000)',
+                    status: '결제완료',
+                    channel: 'SMS',
+                    paymentMethod: '신용카드',
+                    amount: 5254000
+                },
+                {
+                    transactionId: 'txn2',
+                    customerName: '김*환(7000)',
+                    status: '결제완료',
+                    channel: '이메일',
+                    paymentMethod: '신용카드',
+                    amount: 5254000
+                },
+                {
+                    transactionId: 'txn3',
+                    customerName: '김*환(7000)',
+                    status: '입금요청',
+                    channel: '이메일',
+                    paymentMethod: '신용카드',
+                    amount: 5254000
+                },
+                {
+                    transactionId: 'txn4',
+                    customerName: '김*환(7000)',
+                    status: '결제중단',
+                    channel: 'SMS',
+                    paymentMethod: '',
+                    amount: 5254000
+                },
+                {
+                    transactionId: 'txn5',
+                    customerName: '김*환(7000)',
+                    status: '결제실패',
+                    channel: 'SMS',
+                    paymentMethod: '',
+                    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">
+                <SortOptionsBox
+                    sortBy={sortBy}
+                    onClickToSort={onClickToSort}
+                >
+                </SortOptionsBox>
+                <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>
+
+            <LinkPaymentList
+                listItems={listItems}
+            />
+            <div className="apply-row">
+                <button
+                    className="btn-50 btn-blue flex-1"
+                    onClick={() => onClickToNavigate()}
+                >결제 신청</button>
+            </div>
+            <LinkPaymentFilter
+                filterOn={filterOn}
+                setFilterOn={setFilterOn}
+            ></LinkPaymentFilter>
+        </>
+    )
+}