알림함 카테고리 셋팅

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">
--- a/src/pages/alarm/list/list-page.tsx
+++ b/src/pages/alarm/list/list-page.tsx
@@ -1,45 +1,56 @@
 import { AlarmList } from '@/entities/alarm/ui/alarm-list';
 import { HeaderType } from '@/entities/common/model/types';
+import { useStore } from '@/shared/model/store';
 import { 
 	useSetHeaderTitle,
 	useSetHeaderType,
 	useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 export const ListPage = () => {
+  let totalAppNotificationCategories = useStore.getState().CommonStore.appNotificationCategories;
+  const [appNotificationCategories, setAppNotificationCategories] = useState<Array<any>>(totalAppNotificationCategories);
+  
  useSetHeaderTitle('알림함');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);

-  const [category, setCategory] = useState<string>('all');
+  const [appNotificationCategory, setAppNotificationCategory] = useState<string>('');

-  let btnList = [
-    {name: '전체', category: 'all'},
-    {name: '혜택/이벤트', category: 'event'},
-    {name: '공지사항', category: 'notice'}
-  ];
-
-  const onClickToCategory = (value: any) => {
-    setCategory(value.category);
+  const resetAlarmCategories = () => {
+    if(appNotificationCategories){
+      let newAppNotificationCategories = appNotificationCategories.filter((value, index) => {
+        return value.code1 !== '****' && value.code2 === '*';
+      });
+      setAppNotificationCategories(newAppNotificationCategories);
+    }
  };

+  useEffect(() => {
+    resetAlarmCategories();
+  }, [totalAppNotificationCategories])
+  
  return (
    <>
      <main className="pop">
        <div className="sub-wrap">
          <div className="notice-tabs">
-            {
-              btnList.map((value, index) => (
+            <button 
+              className={ `tab36 ${(appNotificationCategory === '')? 'on': ''}`}
+              onClick={ () => setAppNotificationCategory('') }
+            >전체</button>
+            { !!appNotificationCategories &&
+              appNotificationCategories.map((value, index) => (
                <button 
-                  className={ `tab36 ${(category === value.category)? 'on': ''}`}
-                  onClick={ () => onClickToCategory(value) }
-                >{ value.name }</button>    
+                  className={ `tab36 ${(appNotificationCategory === value.code1)? 'on': ''}`}
+                  onClick={ () => setAppNotificationCategory(value.code1) }
+                >{ value.desc1 }</button>    
              ))
            }
          </div>
          <AlarmList
-            category={ category }
+            appNotificationCategory={ appNotificationCategory }
          ></AlarmList>
        </div>
      </main>
--- a/src/pages/transaction/all-transaction/cancel-page.tsx
+++ b/src/pages/transaction/all-transaction/cancel-page.tsx
@@ -50,6 +50,10 @@ export const AllTransactionCancelPage = () => {
  const [vatAutoCalcSummary, setVatAutoCalcSummary] = useState<number>(0);
  const [totalCancelAmount, setTotalCancelAmount] = useState<number>(0);
  const [cancelPassword, setCancelPassword] = useState<string>('');
+  const [cancelSupplyAmount, setCancelSupplyAmount] = useState<number>(0);
+  const [cancelGoodsVat, setCancelGoodsVat] = useState<number>(0);
+  const [cancelTaxFreeAmount, setCancelTaxFreeAmount] = useState<number>(0);
+  const [cancelServiceAmount, setCancelServiceAmount] = useState<number>(0);

  const [bankCode, setBankCode] = useState<string>('');
  const [accountNo, setAccountNo] = useState<string>('');
@@ -105,10 +109,10 @@ export const AllTransactionCancelPage = () => {
      bankCode: bankCode,
      accountNo: accountNo,
      accountHolder: accountHolder,
-      supplyAmount: supplyAmount,
-      goodsVatAmount: goodsVat,
-      taxFreeAmount: taxFreeAmount,
-      serviceAmount: serviceAmount,
+      supplyAmount: (!!partCancelCl)? cancelSupplyAmount: supplyAmount,
+      goodsVatAmount: (!!partCancelCl)? cancelGoodsVat: goodsVat,
+      taxFreeAmount: (!!partCancelCl)? cancelTaxFreeAmount: taxFreeAmount,
+      serviceAmount: (!!partCancelCl)? cancelServiceAmount: serviceAmount,
      clientIp: userInfo.clientAddressIP,
      partCancelCl: partCancelCl,
      isNpg: isNpg,
@@ -195,7 +199,7 @@ export const AllTransactionCancelPage = () => {
                    setAccountHolder={ setAccountHolder }
                  ></AllTransactionAllCancel>
                }
-                { partCancelCl && (tabAction === CancelTabKeys.Part) &&
+                { !!partCancelCl && (tabAction === CancelTabKeys.Part) &&
                  <AllTransactionPartCancel
                    serviceCode={ serviceCode }
                    debtPreventionCancelDisplayInfo={ debtPreventionCancelDisplayInfo }
@@ -220,6 +224,14 @@ export const AllTransactionCancelPage = () => {
                    setAccountNo={ setAccountNo }
                    accountHolder={ accountHolder }
                    setAccountHolder={ setAccountHolder }
+                    cancelSupplyAmount={ cancelSupplyAmount }
+                    setCancelSupplyAmount={ setCancelSupplyAmount }
+                    cancelGoodsVat={ cancelGoodsVat }
+                    setCancelGoodsVat={ setCancelGoodsVat }
+                    cancelTaxFreeAmount={ cancelTaxFreeAmount}
+                    setCancelTaxFreeAmount={ setCancelTaxFreeAmount }
+                    cancelServiceAmount={ cancelServiceAmount }
+                    setCancelServiceAmount={ setCancelServiceAmount }
                  ></AllTransactionPartCancel>
                }
              </div>
--- a/src/shared/constants/url.ts
+++ b/src/shared/constants/url.ts
@@ -1,3 +1,5 @@
+import { UAParser } from 'ua-parser-js';
+
 const { origin } = window.location;
 export const CURRENT_URL = `${origin}`;

@@ -17,13 +19,20 @@ const getAPIAuthBaseUrl = () => {
  }
  return rs;
 }
-const getHeaderUserAgent = () => {
-  let os = 'Android';
-  let deviceType = 'Galaxy Flip 6';
+const getHeaderUserAgent = (options?: {
+  menuId?: number,
+  apiType?: string
+}) => {
+  let parser = new UAParser();
+  let result = parser.getResult();
+
+  let os = result.os.name;
+  let deviceType = result.device.type;
  let deviceID = 'uuid';
  let appVersion = '1.0.0';
-  let browserInformation = 'Chrome135';
-  return `${os} ${deviceType} ${deviceID} ${appVersion} ${browserInformation}`;
+  let browserInformation = result.browser.name;
+  
+  return `${os} ${deviceType} ${deviceID} ${appVersion} ${browserInformation} ${options?.menuId} ${options?.apiType}`;
 };

 export const API_BASE_URL = getAPIBaseUrl();
--- a/src/shared/ui/assets/css/style-fix.css
+++ b/src/shared/ui/assets/css/style-fix.css
@@ -391,4 +391,7 @@ main.home-main{
  text-overflow: ellipsis;
  overflow-x: hidden;
  width: 100%;
+}
+.cancel-input{
+  width: calc(100% - 5px);
 }
--- a/src/widgets/sub-layout/index.tsx
+++ b/src/widgets/sub-layout/index.tsx
@@ -246,7 +246,7 @@ export const SubLayout = () => {
        codeCl: '0022', 
        code1Filter: filter0022
      });
-
+      callCodesSelect({ codeCl: '0325' });
      callCodesSelect({ codeCl: '0074' });

    }).catch((error: any) => {
@@ -309,6 +309,9 @@ export const SubLayout = () => {
      });
      useStore.getState().CommonStore.setServiceCodes(options);
    }
+    else if(codeCl === '0325'){
+      useStore.getState().CommonStore.setAppNotificationCategories(data);
+    }
    else if(codeCl === '0074'){
      useStore.getState().CommonStore.setVirtualBankList(data);
    }