Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web

src/entities/additional-service/model/types.ts

@@ -28,6 +28,12 @@ export enum ProcessResult {
   SUCCESS = 'SUCCESS',
   FAILURE = 'FAILURE'
 };
+export enum KeyInPaymentTransactionStatus {
+  ALL = 'ALL',
+  APPROVE = 'APPROVE',
+  BF_CANCEL = 'BF_CANCEL',
+  AF_CANCEL = 'AF_CANCEL'
+}
 export enum AccountHolderSearchType {
   ALL = 'ALL',
   ACCOUNT_HOLDER = 'ACCOUNT_HOLDER',
@@ -353,6 +359,20 @@ export interface FilterProps {
   filterOn: boolean;
   setFilterOn: (filterOn: boolean) => void;
 };
+export interface KeyInPaymentFilterProps extends FilterProps {
+  mid: string,
+  startDate: string;
+  endDate: string;
+  transactionStatus: KeyInPaymentTransactionStatus;
+  minAmount?: number | string;
+  maxAmount?: number | string;
+  setMid: (mid: string) => void;
+  setStartDate: (startDate: string) => void;
+  setEndDate: (endDate: string) => void;
+  setTransactionStatus: (transactionStatus: KeyInPaymentTransactionStatus) => void;
+  setMinAmount: (minAmount: string | number) => void;
+  setMaxAmount: (maxAmount: string | number) => void;
+}
 // 계좌성명 조회 필터
 export interface AccountHolderSearchFilterProps extends FilterProps {
   mid: string;

src/entities/additional-service/ui/account-holder-search/account-holder-search-filter.tsx

@@ -11,7 +11,7 @@ import {
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { FilterDateOptions } from '@/entities/common/model/types';
-import { FilterCalendar } from '@/shared/ui/filter/filter-calendar';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 
 export const AccountHolderSearchFilter = ({

src/entities/additional-service/ui/key-in-payment/key-in-payment-filter.tsx

@@ -0,0 +1,145 @@
+import moment from 'moment';
+import { useEffect } from 'react';
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { FilterSelect } from '@/shared/ui/filter/select';
+import { FilterSelectInput } from '@/shared/ui/filter/select-input';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
+import {
+    KeyInPaymentFilterProps,
+    KeyInPaymentTransactionStatus
+} from '../../model/types';
+
+export const KeyInPaymentFilter = ({
+    filterOn,
+    setFilterOn,
+    mid,
+    startDate,
+    endDate,
+    transactionStatus,
+    minAmount,
+    maxAmount,
+    setMid,
+    setStartDate,
+    setEndDate,
+    setTransactionStatus,
+    setMinAmount,
+    setMaxAmount
+}: KeyInPaymentFilterProps) => {
+
+    const [filterMid, setFilterMid] = useState<string>(mid);
+    const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
+    const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
+    const [filterTransactionStatus, setFilterTransactionStatus] = useState<KeyInPaymentTransactionStatus>(transactionStatus);
+    const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
+    const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
+
+    const variants = {
+        hidden: { x: '100%' },
+        visible: { x: '0%' },
+    };
+
+    const onClickToClose = () => {
+        setFilterOn(false);
+    };
+
+    const setNewDate = (newDate: any) => {
+        console.log(newDate)
+    };
+
+    const onClickToSetFilter = () => {
+        setMid(filterMid);
+        setStartDate(filterStartDate);
+        setEndDate(filterEndDate);
+        setTransactionStatus(filterTransactionStatus);
+        setMinAmount(filterMinAmount);
+        setMaxAmount(filterMaxAmount);
+        onClickToClose();
+    };
+    let MidOptions = [
+        { name: 'nictest001m', value: 'nictest001m' }
+    ];
+
+    let transactionStatusOption = [
+        { name: '전체', value: KeyInPaymentTransactionStatus.ALL },
+        { name: '승인', value: KeyInPaymentTransactionStatus.APPROVE },
+        { name: '전취소', value: KeyInPaymentTransactionStatus.BF_CANCEL },
+        { name: '후취소', value: KeyInPaymentTransactionStatus.AF_CANCEL },
+    ]
+
+    return (
+        <>
+            <motion.div
+                id="fullMenuModal"
+                className="full-menu-modal"
+                initial="hidden"
+                animate={(filterOn) ? 'visible' : 'hidden'}
+                variants={variants}
+                transition={{ duration: 0.3 }}
+                style={{
+                    width: '100%',
+                    height: '100%',
+                }}
+            >
+                <div className="full-menu-container">
+                    <div className="full-menu-header">
+                        <div className="full-menu-title center">필터</div>
+                        <div className="full-menu-actions">
+                            <button
+                                id="closeFullMenu"
+                                className="full-menu-close"
+                            >
+                                <img
+                                    src={IMAGE_ROOT + '/ico_close.svg'}
+                                    alt="닫기"
+                                    onClick={() => onClickToClose()}
+                                />
+                            </button>
+                        </div>
+                    </div>
+
+                    <div className="option-list pt-16">
+                        <FilterSelect
+                            title='가맹점'
+                            selectValue={filterMid}
+                            selectSetter={setFilterMid}
+                            selectOptions={MidOptions}
+                        ></FilterSelect>
+                        <FilterCalendar
+                            title='조회기간'
+                            startDate={filterStartDate}
+                            endDate={filterEndDate}
+                            setStartDate={setFilterStartDate}
+                            setEndDate={setFilterEndDate}
+                        ></FilterCalendar>
+
+                        <FilterButtonGroups
+                            title='거래상태'
+                            activeValue={filterTransactionStatus}
+                            btnGroups={transactionStatusOption}
+                            setter={setFilterTransactionStatus}
+                        ></FilterButtonGroups>
+
+                        <FilterRangeAmount
+                            title='상품가격'
+                            minAmount={filterMinAmount}
+                            maxAmount={filterMaxAmount}
+                            setMinAmount={setFilterMinAmount}
+                            setMaxAmount={setFilterMaxAmount}
+                        ></FilterRangeAmount>
+
+                    </div>
+                    <div className="apply-row">
+                        <button
+                            className="btn-50 btn-blue flex-1"
+                            onClick={() => onClickToSetFilter()}
+                        >적용</button>
+                    </div>
+                </div>
+            </motion.div>
+        </>
+    );
+};

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

@@ -12,7 +12,7 @@ import {
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { FilterDateOptions } from '@/entities/common/model/types';
-import { FilterCalendar } from '@/shared/ui/filter/filter-calendar';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 
 export const LinkPaymentPendingSendFilter = ({

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

@@ -13,7 +13,7 @@ import {
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { FilterDateOptions } from '@/entities/common/model/types';
-import { FilterCalendar } from '@/shared/ui/filter/filter-calendar';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 
 export const LinkPaymentShippingHistoryFilter = ({

src/entities/transaction/ui/filter/billing-filter.tsx

@@ -73,6 +73,8 @@ export const BillingFilter = ({
     setRequestStatus(filterRequestStatus);
     setProcessResult(filterProcessResult);
     setPaymentMethod(filterPaymentMethod);
+    setMinAmount(filterMinAmount);
+    setMaxAmount(filterMaxAmount);
     onClickToClose();
 	};
   let MidOptions = [
@@ -140,16 +142,16 @@ export const BillingFilter = ({
             <FilterSelect
               title='가맹점'
               selectValue={ filterMid }
-              selectSetter={ setMid }
+              selectSetter={ setFilterMid }
               selectOptions={ MidOptions }
             ></FilterSelect>
             <FilterSelectInput
               title='주문번호/ID'
               selectValue={ filterSearchType }
-              selectSetter={ setSearchType }
+              selectSetter={ setFilterSearchType }
               selectOptions={ SearchTypeOptions }
               inputValue={ searchKeyword }
-              inputSetter={ setSearchKeyword }
+              inputSetter={ setFilterSearchKeyword }
             ></FilterSelectInput>
             <FilterCalendar
               title='조회기간'

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

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import moment from 'moment';
+import { useEffect, useState } from 'react';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { HeaderType } from '@/entities/common/model/types';
@@ -8,24 +9,84 @@ import {
   useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
 import { PATHS } from '@/shared/constants/paths';
+import { useExtensionKeyinDownloadExcelMutation } from '@/entities/additional-service/api/use-extension-keyin-download-excel-mutation';
+import { KeyInPaymentFilter } from '@/entities/additional-service/ui/key-in-payment/key-in-payment-filter';
+import { KeyInPaymentTransactionStatus, SortByKeys } from '@/entities/additional-service/model/types';
+import { SortOptionsBox } from '@/entities/additional-service/ui/link-payment/sort-options-box';
+import { useExtensionKeyinListMutation } from '@/entities/additional-service/api/use-extension-keyin-list-mutation';
+import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
+
+const requestStatusBtnGroup = [
+  { name: '전체', value: KeyInPaymentTransactionStatus.ALL },
+  { name: '승인', value: KeyInPaymentTransactionStatus.APPROVE },
+  { name: '전취소', value: KeyInPaymentTransactionStatus.BF_CANCEL },
+  { name: '후취소', value: KeyInPaymentTransactionStatus.AF_CANCEL }
+];
 
 export const KeyInPaymentPage = () => {
   const { navigate } = useNavigate();
 
+
+  const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
+  const [listItems, setListItems] = useState({});
+  const [filterOn, setFilterOn] = useState<boolean>(false);
+  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [mid, setMid] = useState<string>('nictest001m');
+  const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
+  const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
+  const [transactionStatus, setTransactionStatus] = useState<KeyInPaymentTransactionStatus>(KeyInPaymentTransactionStatus.ALL)
+  const [minAmount, setMinAmount] = useState<number | string>();
+  const [maxAmount, setMaxAmount] = useState<number | string>();
+
+
   useSetHeaderTitle('KEY-IN 결제');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
 
+  const { mutateAsync: keyinList } = useExtensionKeyinListMutation();
+  const { mutateAsync: downloadExcel } = useExtensionKeyinDownloadExcelMutation();
+
+  const onClickToOpenFilter = () => {
+    setFilterOn(!filterOn);
+  };
+
+  const onClickToDownloadExcel = () => {
+    // downloadExcel({
+    //   mid,
+    //   fromDate: '',
+    //   toDate: '',
+    //   paymentStatus: '',
+    //   minAmount: 0,
+    //   maxAmount: 0
+    // }).then((rs) => {
+
+    // });
+  };
+
+  const onClickToSort = (sort: SortByKeys) => {
+    setSortBy(sort);
+    // TODO : callList 구현
+  };
+
+  const onClickToTransactionStatus = (val: KeyInPaymentTransactionStatus) => {
+    setTransactionStatus(val);
+    // TODO : callList 구현
+  };
+
   const onClickToNavigation = () => {
     navigate(PATHS.additionalService.keyInPayment.request)
   }
 
+  useEffect(() => {
+    // TODO : callList();
+  }, []);
+
   return (
     <>
       <main>
         <div className="tab-content">
           <div className="tab-pane sub active">
-            <section className="summary-section no-border">
+            <section className="summary-section">
               <div className="credit-controls">
                 <div>
                   <input
@@ -41,6 +102,7 @@ export const KeyInPaymentPage = () => {
                     <img
                       src={IMAGE_ROOT + '/ico_setting.svg'}
                       alt="검색옵션"
+                      onClick={() => onClickToOpenFilter()}
                     />
                   </button>
                 </div>
@@ -51,26 +113,31 @@ export const KeyInPaymentPage = () => {
                   <img
                     src={IMAGE_ROOT + '/ico_download.svg'}
                     alt="다운로드"
+                    onClick={() => onClickToDownloadExcel()}
                   />
                 </button>
               </div>
             </section>
 
-            <section className="filter-section">
+            <div className="filter-section">
-              <div className="sort-options">
+              <SortOptionsBox
-                <button className="sort-btn active">최신순</button>
+                sortBy={sortBy}
-                <span className="sort-divider">|</span>
+                onClickToSort={onClickToSort}
-                <button className="sort-btn">고액순</button>
+              ></SortOptionsBox>
-              </div>
               <div className="excrow">
                 <div className="full-menu-keywords no-padding">
-                  <span className="keyword-tag active">전체</span>
+                  {
-                  <span className="keyword-tag">승인</span>
+                    requestStatusBtnGroup.map((value, index) => (
-                  <span className="keyword-tag">전취소</span>
+                      <span
-                  <span className="keyword-tag">후취소</span>
+                        key={`key-service-code=${index}`}
+                        className={`keyword-tag ${(transactionStatus === value.value) ? 'active' : ''}`}
+                        onClick={() => onClickToTransactionStatus(value.value)}
+                      >{value.name}</span>
+                    ))
+                  }
+                </div>
               </div>
             </div>
-            </section>
 
             <section className="transaction-list">
               <div className="date-group">
@@ -148,6 +215,22 @@ export const KeyInPaymentPage = () => {
                 onClick={() => onClickToNavigation()}
               >결제 신청</button>
             </div>
+            <KeyInPaymentFilter
+              filterOn={filterOn}
+              setFilterOn={setFilterOn}
+              mid={mid}
+              startDate={startDate}
+              endDate={endDate}
+              transactionStatus={transactionStatus}
+              minAmount={minAmount}
+              maxAmount={maxAmount}
+              setMid={setMid}
+              setStartDate={setStartDate}
+              setEndDate={setEndDate}
+              setTransactionStatus={setTransactionStatus}
+              setMinAmount={setMinAmount}
+              setMaxAmount={setMaxAmount}
+            ></KeyInPaymentFilter>
           </div>
         </div>
       </main>

src/shared/ui/filter/range-amount.tsx

@@ -22,7 +22,7 @@ export const FilterRangeAmount = ({
         <div className="opt-controls">
           <div className="input-wrapper ">
             <input
-              type="text"
+              type="number"
               placeholder=""
               value={ minAmount }
               onChange={ (e: ChangeEvent<HTMLInputElement>) => setMinAmount(e.target.value) }
@@ -31,7 +31,7 @@ export const FilterRangeAmount = ({
           <span> ~ </span>
           <div className="input-wrapper date">
             <input
-              type="text"
+              type="number"
               placeholder=""
               value={ maxAmount }
               onChange={ (e: ChangeEvent<HTMLInputElement>) => setMaxAmount(e.target.value) }