링크 결제 필터 추가 수정

src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx

@@ -68,6 +68,7 @@ export const LinkPaymentPendingSendFilter = ({
         setEndDate(filterEndDate);
         setSendMethod(filterSendMethod);
         setSendingStatus(filterSendingStatus);
+        onClickToClose();
     };
 
     let MidOptions = [

src/entities/additional-service/ui/link-payment/filter/link-payment-shipping-history-filter.tsx

@@ -73,6 +73,7 @@ export const LinkPaymentShippingHistoryFilter = ({
         setTransactionStatus(filterTransactionStatus);
         setProcessResult(filterProcessResult);
         setSendMethod(filterSendMethod);
+        onClickToClose();
     };
 
     let MidOptions = [

src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx

@@ -5,11 +5,19 @@ import { LinkPaymentPendingSendFilter } from "./filter/link-payment-pending-send
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { PATHS } from "@/shared/constants/paths";
 import { LinkPaymentPendingList } from "./link-payment-pending-list";
-import { LinkPaymentSearchType, LinkPaymentSendingStatus, LinkPaymentSendMethod } from "../../model/types";
+import { LinkPaymentSearchType, LinkPaymentSendingStatus, LinkPaymentSendMethod, SortByKeys } from "../../model/types";
+import { SortOptionsBox } from './sort-options-box';
+
+const sendingStatusBtnGrouup = [
+    { name: '전체', value: LinkPaymentSendingStatus.ALL },
+    { name: '발송요청', value: LinkPaymentSendingStatus.SEND_REQUEST },
+    { name: '발송취소', value: LinkPaymentSendingStatus.SEND_CANCEL }
+]
 
 export const LinkPaymentPendingSendWrap = () => {
     const { navigate } = useNavigate();
 
+    const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
     const [filterOn, setFilterOn] = useState<boolean>(false);
     const [mid, setMid] = useState<string>('nictest001m');
     const [searchType, setSearchType] = useState<LinkPaymentSearchType>(LinkPaymentSearchType.ALL)
@@ -70,6 +78,18 @@ export const LinkPaymentPendingSendWrap = () => {
         });
     };
 
+    const onClickToDownloadExcel = () => {
+
+    };
+
+    const onClickToSort = (sort: SortByKeys) => {
+        setSortBy(sort);
+    };
+
+    const onClickSendingStatus = (val: LinkPaymentSendingStatus) => {
+        setSendingStatus(val);
+    };
+
     useEffect(() => {
         callList();
     }, []);
@@ -81,13 +101,11 @@ export const LinkPaymentPendingSendWrap = () => {
                         <input
                             className="credit-period"
                             type="text"
-                            value="2025.06.01 ~ 2025.06.30"
+                            value={moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD')}
                             readOnly={true}
                         />
                         <button
-                            className="filter-btn"
-                            aria-label="필터"
-                        >
+                            className="filter-btn">
                             <img
                                 src={IMAGE_ROOT + '/ico_setting.svg'}
                                 alt="검색옵션"
@@ -102,25 +120,31 @@ export const LinkPaymentPendingSendWrap = () => {
                         <img
                             src={IMAGE_ROOT + '/ico_download.svg'}
                             alt="다운로드"
+                            onClick={() => onClickToDownloadExcel()}
                         />
                     </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="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>
+                        {
+                            sendingStatusBtnGrouup.map((value, index) => (
+                                <span
+                                    key={`key-service-code=${index}`}
+                                    className={`keyword-tag ${(sendingStatus === value.value) ? 'active' : ''}`}
+                                    onClick={() => onClickSendingStatus(value.value)}
+                                >{value.name}</span>
+                            ))
+                        }
                     </div>
                 </div>
-            </section>
+            </div>
 
             <LinkPaymentPendingList
                 listItems={listItems}

src/entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap.tsx

@@ -7,11 +7,17 @@ import { PATHS } from "@/shared/constants/paths";
 import { LinkPaymentList } from "./link-payment-list";
 import { SortOptionsBox } from "./sort-options-box";
 import { LinkPaymentSendMethod, LinkPaymentTransactionStatus, ProcessResult, SortByKeys } from "../../model/types";
-import { LinkPaymentSearchType,  } from "../../model/types";
+import { LinkPaymentSearchType, } from "../../model/types";
 
+const processResultBtnGroup = [
+    { name: '전체', value: ProcessResult.ALL },
+    { name: '성공', value: ProcessResult.SUCCESS },
+    { name: '실패', value: ProcessResult.FAILURE }
+]
 
 export const LinkPaymentShippingHistoryWrap = () => {
     const { navigate } = useNavigate();
+
     const [filterOn, setFilterOn] = useState<boolean>(false);
     const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
     const [listItems, setListItems] = useState({});
@@ -82,6 +88,10 @@ export const LinkPaymentShippingHistoryWrap = () => {
         });
     };
 
+    const onClickProcessResult = (val: ProcessResult) => {
+        setProcessResult(val);
+    }
+
     useEffect(() => {
         callList();
     }, []);
@@ -94,13 +104,11 @@ export const LinkPaymentShippingHistoryWrap = () => {
                         <input
                             className="credit-period"
                             type="text"
-                            value="2025.06.01 ~ 2025.06.30"
+                            value={moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD')}
                             readOnly={true}
                         />
                         <button
-                            className="filter-btn"
-                            aria-label="필터"
-                        >
+                            className="filter-btn">
                             <img
                                 src={IMAGE_ROOT + '/ico_setting.svg'}
                                 alt="검색옵션"
@@ -120,7 +128,7 @@ export const LinkPaymentShippingHistoryWrap = () => {
                 </div>
             </section>
 
-            <section className="filter-section">
+            <div className="filter-section">
                 <SortOptionsBox
                     sortBy={sortBy}
                     onClickToSort={onClickToSort}
@@ -128,12 +136,18 @@ export const LinkPaymentShippingHistoryWrap = () => {
                 </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>
+                        {
+                            processResultBtnGroup.map((value, index) => (
+                                <span
+                                    key={`key-service-code=${index}`}
+                                    className={`keyword-tag ${(processResult === value.value) ? 'active' : ''}`}
+                                    onClick={() => onClickProcessResult(value.value)}
+                                >{value.name}</span>
+                            ))
+                        }
                     </div>
                 </div>
-            </section>
+            </div>
 
             <LinkPaymentList
                 listItems={listItems}

src/pages/additional-service/key-in-payment/key-in-payment-page.tsx

@@ -92,7 +92,7 @@ export const KeyInPaymentPage = () => {
                   <input
                     className="credit-period"
                     type="text"
-                    value="2025.06.01 ~ 2025.06.31"
+                    value={ moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD') } 
                     readOnly={true}
                   />
                   <button