알림함 카테고리 셋팅

2025-10-27 11:30:02 +09:00
parent 9eba765957
commit 9be67b403e
12 changed files with 242 additions and 130 deletions
--- a/src/entities/alarm/ui/alarm-item.tsx
+++ b/src/entities/alarm/ui/alarm-item.tsx
@@ -4,6 +4,7 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import moment from 'moment';

 export interface AlarmItemProps {
+  appNotificationSequence?: number;
  appNotificationCategory?: string;
  notificationReceivedDate?: string;
  appNotificationTitle?: string;
@@ -12,6 +13,7 @@ export interface AlarmItemProps {
 };

 export const AlarmItem = ({
+  appNotificationSequence,
  appNotificationCategory,
  notificationReceivedDate,
  appNotificationTitle,
@@ -19,9 +21,10 @@ export const AlarmItem = ({
  appNotificationLink
 }: AlarmItemProps) => {
  const { navigate } = useNavigate();
-  const onClickToNavigate = (alarmId: number) => {
-    let path = PATHS.support.notice.detail + alarmId;
-    navigate(path);
+
+  const onClickToNavigate = () => {
+    let path = PATHS.support.notice.detail + appNotificationSequence;
+    // navigate(path);
  };

  return (
@@ -35,7 +38,7 @@ export const AlarmItem = ({
      </div>
      <div 
        className="notice-arrow"
-        onClick={ () => onClickToNavigate(4) }
+        onClick={ () => onClickToNavigate() }
      >
        <img 
          src={ IMAGE_ROOT + '/Forward.svg' }
--- a/src/entities/alarm/ui/alarm-list.tsx
+++ b/src/entities/alarm/ui/alarm-list.tsx
@@ -11,11 +11,11 @@ import { useStore } from '@/shared/model/store';
 import { DefaultRequestPagination } from '@/entities/common/model/types';

 export interface AlarmListProps {
-  category: string;
+  appNotificationCategory: string;
 };

 export const AlarmList = ({
-  category
+  appNotificationCategory
 }: AlarmListProps) => {
  const { navigate } = useNavigate();
  const { t } = useTranslation();
@@ -24,28 +24,10 @@ export const AlarmList = ({
  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
  const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
  const [appCl, setAppCl] = useState<MERCHANT_ADMIN_APP>(MERCHANT_ADMIN_APP.MERCHANT_ADMIN_APP)
-  const [appNotificationCategory, setAppNotificationCategory] = useState<string>('');
  const [resultList, setResultList] = useState<Array<AlarmListContent>>([]);
-  const [selectedCategory, setSelectedCategory] = useState<string>('');
  
  const { mutateAsync: appAlarmList } = useAppAlarmListMutation();

-  const getAlarmItems = () => {
-    let rs = [];
-    for(let i=0;i<resultList.length;i++){
-      rs.push(
-        <AlarmItem
-          appNotificationCategory={ resultList[i]?.appNotificationCategory }
-          notificationReceivedDate={ resultList[i]?.notificationReceivedDate }
-          appNotificationTitle={ resultList[i]?.appNotificationTitle }
-          appNotificationContent={ resultList[i]?.appNotificationContent }
-          appNotificationLink={ resultList[i]?.appNotificationLink }
-        ></AlarmItem>
-      )
-    }
-    return rs;
-  };
-
  const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
    entries.forEach((entry: IntersectionObserverEntry) => {
      if(entry.isIntersecting){
@@ -73,7 +55,7 @@ export const AlarmList = ({
        appCl: appCl,
        appNotificationCategory: appNotificationCategory,
        page: pageParam
-      }
+      };

      if(type !== 'page' && params.page){
        params.page.cursor = null;
@@ -115,11 +97,27 @@ export const AlarmList = ({
    }
    
  };
+  const getAlarmItems = () => {
+    let rs = [];
+    for(let i=0;i<resultList.length;i++){
+      rs.push(
+        <AlarmItem
+          appNotificationSequence={ resultList[i]?.appNotificationSequence }
+          appNotificationCategory={ resultList[i]?.appNotificationCategory }
+          notificationReceivedDate={ resultList[i]?.notificationReceivedDate }
+          appNotificationTitle={ resultList[i]?.appNotificationTitle }
+          appNotificationContent={ resultList[i]?.appNotificationContent }
+          appNotificationLink={ resultList[i]?.appNotificationLink }
+        ></AlarmItem>
+      );
+    }
+    return rs;
+  };

  useEffect(() => {
    callList();
-  }, [selectedCategory]);
-
+  }, [appNotificationCategory]);
+  
  return (
    <>
      <div className="notice-box sub">
--- a/src/entities/common/model/store.ts
+++ b/src/entities/common/model/store.ts
@@ -16,6 +16,8 @@ export interface CommonState {
  setBankList: (update: SetStateAction<Array<any>>) => void;
  virtualBankList: Array<any>;
  setVirtualBankList: (update: SetStateAction<Array<any>>) => void;
+  appNotificationCategories: Array<any>;
+  setAppNotificationCategories: (update: SetStateAction<Array<any>>) => void;
 };

 const initialBannerInfoState = {         
@@ -24,6 +26,10 @@ const initialBannerInfoState = {

 const initialCommonState = {
  serviceCodes: [] as Array<any>,
+  creditCardList: [] as Array<any>,
+  bankList: [] as Array<any>,
+  virtualBankList: [] as Array<any>,
+  appNotificationCategories: [] as Array<any>
 } as CommonState;

 export const createBannerInfoStore = lens<BannerInfoState>((set, get) => ({
@@ -94,4 +100,16 @@ export const createCommonStore = lens<CommonState>((set, get) => ({
        };
    });
  },
+  setAppNotificationCategories: (update) => {
+    set((state: CommonState) => {
+      const newAppNotificationCategories = (typeof update === 'function')
+        ? update(state.appNotificationCategories): update;
+        return {
+          ...state,
+          appNotificationCategories: [
+            ...newAppNotificationCategories
+          ]
+        };
+    });
+  },
 }));
--- a/src/entities/transaction/api/use-all-transaction-list-mutation.ts
+++ b/src/entities/transaction/api/use-all-transaction-list-mutation.ts
@@ -12,6 +12,7 @@ import {
 } from '@tanstack/react-query';

 export const allTransactionList = (params: AllTransactionListParams) => {
+  //axios.AxiosHeaders[]
  return resultify(
    axios.post<AllTransactionListResponse>(API_URL_TRANSACTION.allTransactionList(), params),
  );
--- a/src/entities/transaction/ui/all-transaction-part-cancel.tsx
+++ b/src/entities/transaction/ui/all-transaction-part-cancel.tsx
@@ -4,6 +4,7 @@ import { NumericFormat } from 'react-number-format';
 import { AllTransactionCancelSectionPasswordGroup } from './section/all-transaction-cancel-section-password-group';
 import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-cancel-section-bank-group';
 import { BankCode } from '@/shared/@types/banking-code';
+import { ChangeEvent, useEffect, useState } from 'react';

 export interface AllTransactionPartCancelProps extends AllTransactionCancelInfoResponse {
  serviceCode: string;
@@ -15,6 +16,14 @@ export interface AllTransactionPartCancelProps extends AllTransactionCancelInfoR
  setAccountNo?: (accountNo: string) => void;
  accountHolder?: string;
  setAccountHolder?: (accountHolder: string) => void;
+  cancelSupplyAmount: number;
+  setCancelSupplyAmount: (cancelSupplyAmount: number) => void;
+  cancelGoodsVat: number;
+  setCancelGoodsVat: (cancelGoodsVat: number) => void;
+  cancelTaxFreeAmount: number;
+  setCancelTaxFreeAmount: (cancelTaxFreeAmount: number) => void;
+  cancelServiceAmount: number;
+  setCancelServiceAmount: (cancelServiceAmount: number) => void;
 };

 export const AllTransactionPartCancel = ({
@@ -40,99 +49,115 @@ export const AllTransactionPartCancel = ({
  accountNo,
  setAccountNo,
  accountHolder,
-  setAccountHolder
+  setAccountHolder,
+  cancelSupplyAmount,
+  setCancelSupplyAmount,
+  cancelGoodsVat,
+  setCancelGoodsVat,
+  cancelTaxFreeAmount,
+  setCancelTaxFreeAmount,
+  cancelServiceAmount,
+  setCancelServiceAmount
 }: AllTransactionPartCancelProps) => {
  
-
+  
  return (
    <>
      { !!isCompoundTax  && 
-      <div className="tb_both">
-        <table className="partial-cancel-table">
-          <colgroup>
-            <col width="30%" />
-            <col width="30%" />
-            <col width="40%" />
-          </colgroup>
-          <thead>
-            <tr>
-              <th className="header-empty"></th>
-              <th className="header-balance">잔액</th>
-              <th className="header-cancel">취소금액</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td className="row-label">과세액</td>
-              <td className="row-balance">
-                <NumericFormat
-                  value={ supplyAmount } 
-                  thousandSeparator
-                  displayType="text"
-                ></NumericFormat> 
-              </td>
-              <td className="row-cancel">
-                <input 
-                  className="cancel-input"
-                  type="text"
-                  value=""
-                />
-              </td>
-            </tr>
+        <div className="tb_both">
+          <table className="partial-cancel-table">
+            <colgroup>
+              <col width="30%" />
+              <col width="30%" />
+              <col width="40%" />
+            </colgroup>
+            <thead>
              <tr>
-                <td className="row-label">부가세</td>
+                <th className="header-empty"></th>
+                <th className="header-balance">잔액</th>
+                <th className="header-cancel">취소금액</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td className="row-label">과세액</td>
                <td className="row-balance">
                  <NumericFormat
-                    value={ goodsVat } 
+                    value={ supplyAmount } 
                    thousandSeparator
                    displayType="text"
                  ></NumericFormat> 
                </td>
                <td className="row-cancel">
-                  <input 
-                    className="cancel-input"
-                    type="text"
-                    placeholder=""
-                  />
-                </td>
-              </tr>
-              <tr>
-                <td className="row-label">면세</td>
-                <td className="row-balance">
                  <NumericFormat
-                    value={ taxFreeAmount } 
-                    thousandSeparator
-                    displayType="text"
+                    className="cancel-input"
+                    value={ cancelSupplyAmount }
+                    allowNegative={ false }
+                    displayType="input"
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => setCancelServiceAmount(parseInt(e.target.value)) }
                  ></NumericFormat>
                </td>
-                <td className="row-cancel">
-                  <input 
-                    className="cancel-input"
-                    type="text"
-                    placeholder=""
-                  />
-                </td>
              </tr>
-              <tr>
-                <td className="row-label">봉사료</td>
-                <td className="row-balance">
-                  <NumericFormat
-                    value={ serviceAmount } 
-                    thousandSeparator
-                    displayType="text"
-                  ></NumericFormat>
-                </td>
-                <td className="row-cancel">
-                  <input 
-                    className="cancel-input"
-                    type="text"
-                    placeholder=""
-                  />
-                </td>
-              </tr>
-          </tbody>
-        </table>
-      </div>
+                <tr>
+                  <td className="row-label">부가세</td>
+                  <td className="row-balance">
+                    <NumericFormat
+                      value={ goodsVat } 
+                      thousandSeparator
+                      displayType="text"
+                    ></NumericFormat> 
+                  </td>
+                  <td className="row-cancel">
+                    <NumericFormat
+                      className="cancel-input"
+                      value={ cancelGoodsVat }
+                      allowNegative={ false }
+                      displayType="input"
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => setCancelGoodsVat(parseInt(e.target.value)) }
+                    ></NumericFormat>
+                  </td>
+                </tr>
+                <tr>
+                  <td className="row-label">면세</td>
+                  <td className="row-balance">
+                    <NumericFormat
+                      value={ taxFreeAmount } 
+                      thousandSeparator
+                      displayType="text"
+                    ></NumericFormat>
+                  </td>
+                  <td className="row-cancel">
+                    <NumericFormat
+                      className="cancel-input"
+                      value={ cancelTaxFreeAmount }
+                      allowNegative={ false }
+                      displayType="input"
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => setCancelTaxFreeAmount(parseInt(e.target.value)) }
+                    ></NumericFormat>
+                  </td>
+                </tr>
+                <tr>
+                  <td className="row-label">봉사료</td>
+                  <td className="row-balance">
+                    <NumericFormat
+                      value={ serviceAmount } 
+                      thousandSeparator
+                      displayType="text"
+                    ></NumericFormat>
+                  </td>
+                  <td className="row-cancel">
+                    <NumericFormat
+                      className="cancel-input"
+                      value={ cancelServiceAmount }
+                      allowNegative={ false }
+                      displayType="input"
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => setCancelServiceAmount(parseInt(e.target.value)) }
+                    ></NumericFormat>
+                  </td>
+                </tr>
+            </tbody>
+          </table>
+        </div>
      }

      <div className="form-section">