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

2025-09-25 09:18:24 +09:00
parent 3116c58ae7 5e1f24c8b8
commit 38f40264cd
40 changed files with 1798 additions and 461 deletions
--- a/src/entities/additional-service/ui/account-holder-auth/account-holder-auth-filter.tsx
+++ b/src/entities/additional-service/ui/account-holder-auth/account-holder-auth-filter.tsx
--- a/src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx
+++ b/src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx
@@ -1,4 +1,3 @@
-import { PATHS } from '@/shared/constants/paths';
 import { ListDateGroup } from '../list-date-group';
 import { AccountHolderAuthListProps, AdditionalServiceCategory } from '../../model/types';

--- a/src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx
+++ b/src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx
@@ -39,10 +39,6 @@ export const AccountHolderSearchFilter = ({
    const [filterEndDate, setFilterEndDate] = useState<string>(moment(endDate).format('YYYY.MM.DD'));
    const [filterBank, setFilterBank] = useState<string>(bank)
    const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
-    const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
-    const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
-
-    const [calendarOpen, setCalendarOpen] = useState<boolean>(false);

    const variants = {
        hidden: { x: '100%' },
--- a/src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx
+++ b/src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx
@@ -105,7 +105,7 @@ export const KeyInPaymentFilter = ({
                        <FilterSelect
                            title='가맹점'
                            selectValue={filterMid}
-                            selectSetter={setFilterMid}
+                            selectSetter={setMid}
                            selectOptions={MidOptions}
                        ></FilterSelect>
                        <FilterCalendar
--- a/src/entities/additional-service/ui/list-date-group.tsx
+++ b/src/entities/additional-service/ui/list-date-group.tsx
@@ -7,7 +7,8 @@ export const ListDateGroup = ({
  additionalServiceCategory,
  date,
  items,
-  mid
+  mid,
+  onResendClick
 }: ListDateGroupProps) => {
  moment.locale('ko');
  const getStateDate = () => {
@@ -63,6 +64,9 @@ export const ListDateGroup = ({
            sendCl={ items[i]?.sendCl }
            paymentMethod={ items[i]?.paymentMethod }
            receiverName={ items[i]?.receiverName }
+
+            smsCl= { items[i]?.smsCl }
+            onResendClick={ onResendClick }
          ></ListItem>
        )
      }  
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/src/entities/additional-service/ui/list-item.tsx
@@ -13,19 +13,22 @@ export const ListItem = ({
  amount, sendDate, sendStatus, sendMethod,
  scheduledSendDate, processStatus,

-  accountName,transferStatus,
+  accountName, transferStatus,

  submallId, settlementDate, companyName,
  disbursementStatus, disbursementAmount,

-  transferAmount, receiveBankName, 
+  transferAmount, receiveBankName,
  receiveAccountNo, receiveAccountName,
  status, processDate,

  orderStatus, arsPaymentMethod,

  alimCl, sendType, sendCl,
-  paymentMethod, receiverName
+  paymentMethod, receiverName,
+
+  smsCl,
+  onResendClick
 }: ListItemProps) => {
  const { navigate } = useNavigate();
  const getItemClass = () => {
@@ -100,13 +103,21 @@ export const ListItem = ({
      } else {
        rs = 'gray'
      }
+    } else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
+      if (smsCl === "VACCOUNT_REQ_DEPOSIT") {
+        rs = 'blue'
+      } else {
+        rs = 'gray'
+      }
    }
    return rs;

  };

  const onClickToNavigate = () => {
-    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
+    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment ||
+      additionalServiceCategory === AdditionalServiceCategory.SMSPayment
+    ) {

      return;
    }
@@ -176,7 +187,7 @@ export const ListItem = ({
        }
      });
    }
-    else if (additionalServiceCategory === AdditionalServiceCategory.Ars){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
      navigate(PATHS.additionalService.ars.detail, {
        state: {
          additionalServiceCategory: additionalServiceCategory,
@@ -186,7 +197,7 @@ export const ListItem = ({
        }
      });
    }
-    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
      navigate(PATHS.additionalService.alimtalk.detail, {
        state: {
          additionalServiceCategory: additionalServiceCategory,
@@ -220,11 +231,11 @@ export const ListItem = ({
    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
      timeStr = moment(requestDate).format('mm:ss');
    }
-    else if (additionalServiceCategory === AdditionalServiceCategory.Ars){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
      let time = paymentDate?.substring(8, 12);
      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
    }
-    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
      let time = paymentDate?.substring(8, 12);
      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
    }
@@ -257,16 +268,19 @@ export const ListItem = ({
    else if (additionalServiceCategory === AdditionalServiceCategory.Payout) {
      str = companyName;
    }
-    else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer){
+    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
      str = `${receiveAccountName}(${receiveAccountNo})`;
    }
-    else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountResult){
+    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
      str = `${receiveAccountName}(${receiveAccountNo})`;
    }
-    else if(additionalServiceCategory === AdditionalServiceCategory.Ars){
+    else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
+      str = `${paymentDate}(${paymentStatus})[추후 수정 필요]`
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
      str = '이름(' + tid + ')';
    }
-    else if(additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
      str = `${receiverName}(${tid})`;
    }

@@ -277,7 +291,7 @@ export const ListItem = ({
    let rs = [];
    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
      rs.push(
-        <div className="transaction-details">
+        <div key='key-in-list' className="transaction-details">
          <span>{getTime()}</span>
          <span className="separator">|</span>
          <span>{paymentStatus}</span>
@@ -295,7 +309,7 @@ export const ListItem = ({
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
      rs.push(
-        <div className="transaction-details">
+        <div key="account-search" className="transaction-details">
          <span>{getTime()}</span>
          <span className="separator">|</span>
          <span>{bankName}</span>
@@ -305,7 +319,7 @@ export const ListItem = ({
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) {
      if (paymentStatus === "PAYMENT_FAIL" || paymentStatus === "INACTIVE") {
        rs.push(
-          <div className="transaction-details">
+          <div key="link-payment-history" className="transaction-details">
            <span>{getPaymentStatusText(paymentStatus)}</span>
            <span className="separator">|</span>
            <span>{getSendMethodText(sendMethod)}</span>
@@ -313,7 +327,7 @@ export const ListItem = ({
        )
      } else {
        rs.push(
-          <div className="transaction-details">
+          <div key="link-payment-history" className="transaction-details">
            <span>{getPaymentStatusText(paymentStatus)}</span>
            <span className="separator">|</span>
            <span>{getSendMethodText(sendMethod)}</span>
@@ -325,7 +339,7 @@ export const ListItem = ({
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait) {
      rs.push(
-        <div className="transaction-details">
+        <div key="link-payment-wait" className="transaction-details">
          <span>{getProcessStatusText(processStatus)}</span>
          <span className="separator">|</span>
          <span>{getSendMethodText(sendMethod)}</span>
@@ -341,48 +355,57 @@ export const ListItem = ({
        </div>
      );
    }
-    else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer){
+    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
      rs.push(
        <div className="transaction-details">
-          <span>{ getTime() }</span>
+          <span>{getTime()}</span>
          <span className="separator">|</span>
-          <span>{ status }</span>
+          <span>{status}</span>
        </div>
      );
    }
-    else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountResult){
+    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
      rs.push(
        <div className="transaction-details">
-          <span>{ getTime() }</span>
+          <span>{getTime()}</span>
          <span className="separator">|</span>
-          <span>{ status }</span>
+          <span>{status}</span>
        </div>
      );
    }
-    else if(additionalServiceCategory === AdditionalServiceCategory.Ars){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
      rs.push(
        <div className="transaction-details">
-          <span>{ getTime() }</span>
+          <span>{getTime()}</span>
          <span className="separator">|</span>
-          <span>{ paymentStatus }</span>
+          <span>{paymentStatus}</span>
          <span className="separator">|</span>
-          <span>{ orderStatus }</span>
+          <span>{orderStatus}</span>
          <span className="separator">|</span>
-          <span>{ arsPaymentMethod }</span>
+          <span>{arsPaymentMethod}</span>
        </div>
      );
    }
-    else if(additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
      rs.push(
        <div className="transaction-details">
-          <span>{ getTime() }</span>
+          <span>{getTime()}</span>
          <span className="separator">|</span>
-          <span>{ paymentMethod }</span>
+          <span>{paymentMethod}</span>
          <span className="separator">|</span>
-          <span>{ alimCl }</span>
+          <span>{alimCl}</span>
        </div>
      );
    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
+      rs.push(
+        <div key="sms-payment" className="transaction-details">
+          <span>{mid}</span>
+          <span className="separator">|</span>
+          <span>{smsCl}</span>
+        </div>
+      )
+    }
    return rs;
  };

@@ -394,7 +417,7 @@ export const ListItem = ({
          {resultStatus === 'SUCCESS' ? '성공' : '실패'}
        </div>
      );
-    } 
+    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
      rs.push(
        <div className={`status-label ${(transferStatus === 'REQUEST' || transferStatus === 'SUCCESS') ? 'success' : 'fail'}`}>
@@ -493,9 +516,18 @@ export const ListItem = ({
        <div
          key="payout-item-amount"
          className="transaction-amount"
-        >{ sendCl }</div>
+        >{sendCl}</div>
      );
    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment && onResendClick && tid) {
+      rs.push(
+        <div
+        key="sms-payment-amount"
+        className={`status-label success`}
+        onClick={() => mid && tid && onResendClick(mid, tid)}
+        >{'재발송'}</div>
+      )
+    }
    return rs;
  }

@@ -509,10 +541,10 @@ export const ListItem = ({
          <div className={`status-dot ${getDotClass()}`}></div>
        </div>
        <div className="transaction-content">
-          <div className="transaction-title">{ getTitle() }</div>
-          { getDetail() }
+          <div className="transaction-title">{getTitle()}</div>
+          {getDetail()}
        </div>
-        { getAmount() }
+        {getAmount()}
      </div>
    </>
  );
--- a/src/entities/additional-service/ui/sms-payment-filter.tsx
+++ b/src/entities/additional-service/ui/sms-payment-filter.tsx
@@ -1,8 +0,0 @@
-export const SmsPaymentFilter = () => {
-
-  return (
-    <>
-    
-    </>
-  );
-};
--- a/src/entities/additional-service/ui/sms-payment/sms-payment-detail-resend.tsx
+++ b/src/entities/additional-service/ui/sms-payment/sms-payment-detail-resend.tsx
@@ -1,10 +1,11 @@
 import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
-import { SmsPaymentDetailResendProps } from '../model/types';
+import { SmsPaymentDetailResendProps } from '../../../additional-service/model/sms-payment/types';

 export const SmsPaymentDetailResend = ({
  bottomSmsPaymentDetailResendOn,
-  setBottomSmsPaymentDetailResendOn
+  setBottomSmsPaymentDetailResendOn,
+  smsDetailData
 }: SmsPaymentDetailResendProps) => {
  
  const variants = {
@@ -44,11 +45,11 @@ export const SmsPaymentDetailResend = ({
          </div>
        </div>
        <div className="resend-info">
-          <div className="resend-row">발신자(번호) : 유앤아이피부과(16610808)</div>
-          <div className="resend-row">수신자(번호) : 김*환(010****7000)</div>
+          <div className="resend-row">발신자(번호) : {smsDetailData?.senderName || '-'}({smsDetailData?.senderNumber || '-'})</div>
+          <div className="resend-row">수신자(번호) : {smsDetailData?.receiverName || '-'}({smsDetailData?.receiverNumber || '-'})</div>
        </div>
        <div className="resend-box">
-          <p className="resend-text">[유앤아이피부과]김*환님, 신한은행 110322141414 (300원 06/08 입금완료)</p>
+          <p className="resend-text">{smsDetailData?.sendMessage || '-'}</p>
        </div>
        <div className="bottomsheet-footer">
          <button className="btn-50 btn-blue flex-1" type="button">신청</button>
--- a/src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx
+++ b/src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx
@@ -0,0 +1,140 @@
+import moment from 'moment';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+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/calendar';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { SmsPaymentFilterProps, SmsPaymentSearchType, SmsType } from '../../model/sms-payment/types';
+export const SmsPaymentFilter = ({
+  filterOn,
+  setFilterOn,
+  mid,
+  searchCl,
+  searchValue,
+  fromDate,
+  toDate,
+  smsCl,
+  setMid,
+  setSearchCl,
+  setSearchValue,
+  setFromDate,
+  setToDate,
+  setSmsCl
+}: SmsPaymentFilterProps) => {
+
+  const [filterMid, setFilterMid] = useState<string>(mid);
+  const [filterSearchCl, setFilterSearchCl] = useState<SmsPaymentSearchType>(searchCl);
+  const [filterSearchValue, setFilterSearchValue] = useState<string>(searchValue);
+  const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYY.MM.DD'));
+  const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYY.MM.DD'));
+  const [filterSmsCl, setFilterSmsCl] = useState<SmsType>(smsCl);
+
+  const variants = {
+    hidden: { x: '100%' },
+    visible: { x: '0%' },
+  };
+
+  const onClickToSetFilter = () => {
+    setMid(filterMid);
+    setSearchCl(filterSearchCl);
+    setSearchValue(filterSearchValue);
+    setFromDate(filterFromDate);
+    setToDate(filterToDate);
+    setSmsCl(filterSmsCl);
+    onClickToClose();
+  };
+
+  let MidOptions = [
+    { name: 'nictest001m', value: 'nictest001m' },
+    { name: 'nictest002m', value: 'nictest002m' }
+  ];
+
+  let searchTypeOption = [
+    { name: '주문자', value: SmsPaymentSearchType.BUYER_NAME },
+    { name: '수신번호', value: SmsPaymentSearchType.RECEIVE_PHONE_NUMBER },
+  ]
+
+  let smsTypeOption = [
+    { name: '전체', value: SmsType.ALL },
+    { name: '가상계좌요청', value: SmsType.VACCOUNT_REQ },
+    { name: '가상계좌 요청+입금', value: SmsType.VACCOUNT_REQ_DEPOSIT },
+  ]
+
+  const onClickToClose = () => {
+    setFilterOn(false);
+  };
+
+  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={mid}
+              selectSetter={setMid}
+              selectOptions={MidOptions}
+            ></FilterSelect>
+
+            <FilterSelectInput
+              title='주문자,수신번호'
+              selectValue={searchCl}
+              selectSetter={setSearchCl}
+              selectOptions={searchTypeOption}
+              inputValue={searchValue}
+              inputSetter={setSearchValue}
+            ></FilterSelectInput>
+            <FilterCalendar
+              startDate={filterFromDate}
+              endDate={filterToDate}
+              setStartDate={setFilterFromDate}
+              setEndDate={setFilterToDate}
+            ></FilterCalendar>
+            <FilterButtonGroups
+              title='조회결과'
+              activeValue={filterSmsCl}
+              btnGroups={smsTypeOption}
+              setter={setFilterSmsCl}
+            ></FilterButtonGroups>
+          </div>
+          <div className="apply-row">
+            <button
+              className="btn-50 btn-blue flex-1"
+              onClick={() => onClickToSetFilter()}
+            >적용</button>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+};
--- a/src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx
+++ b/src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx
@@ -0,0 +1,35 @@
+import { SmsPaymentListProps } from '../../model/sms-payment/types';
+import { AdditionalServiceCategory } from '../../model/types';
+import { ListDateGroup } from '../list-date-group';
+
+export const SmsPaymentList = ({
+    listItems,
+    mid,
+    onResendClick
+}: SmsPaymentListProps) => {
+
+    const getListDateGroup = () => {
+        let rs = [];
+        for (const [key, value] of Object.entries(listItems)) {
+            rs.push(
+                <ListDateGroup
+                    additionalServiceCategory={AdditionalServiceCategory.SMSPayment}
+                    key={key}
+                    date={key}
+                    items={value}
+                    mid={mid}
+                    onResendClick={onResendClick}
+                ></ListDateGroup>
+            )
+        }
+        return rs;
+    };
+
+    return (
+        <>
+            <div className="transaction-list">
+                {getListDateGroup()}
+            </div>
+        </>
+    )
+}