- 부가서비스 소개 List, 권한 검증 추가

- 각 API 오류 수정

src/pages/additional-service/list-page.tsx

@@ -2,16 +2,16 @@ import { ChangeEvent, useEffect, useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { HeaderType } from '@/entities/common/model/types';
-import { IMAGE_ROOT } from '@/shared/constants/common';
-import { 
-	useSetHeaderTitle,
-	useSetHeaderType,
-	useSetFooterMode,
+import {
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode,
   useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 import { useExtensionListMutation } from '@/entities/additional-service/api/use-extension-list-mutation';
-import { ExtensionListParams, ExtensionListResponse } from '@/entities/additional-service/model/types';
+import { ExtensionListParams, ExtensionListResponse, SERVICE_MAP } from '@/entities/additional-service/model/types';
 import { useStore } from '@/shared/model/store';
+import { Dialog } from '@/shared/ui/dialogs/dialog';
 
 export const ListPage = () => {
   const { navigate } = useNavigate();
@@ -19,6 +19,9 @@ export const ListPage = () => {
   const userMid = useStore.getState().UserStore.mid;
 
   const [mid, setMid] = useState<string>(userMid);
+  const [activeServices, setActiveServices] = useState<string[]>([]);
+  const [availableServices, setAvailableServices] = useState<string[]>([]);
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
 
   const { mutateAsync: extensionList } = useExtensionListMutation();
 
@@ -34,112 +37,63 @@ export const ListPage = () => {
       mid: mid
     }
     extensionList(params).then((rs: ExtensionListResponse) => {
-      console.log(rs)
+      setActiveServices(rs.activeExtensionList || []);
+      setAvailableServices(rs.availableExtensionList || []);
     });
   };
 
-  const activeExtensionList = [
-    {
-      className: 'list-wrap01', serviceName: 'SMS 결제 통보', serviceDesc: '입금 요청부터 완료까지 SMS 자동 전송',
-      icon: IMAGE_ROOT + '/icon_ing03.svg', path: PATHS.additionalService.smsPaymentNotification
-    },
-    {
-      className: 'list-wrap01', serviceName: '신용카드 ARS 결제', serviceDesc: '전화 한 통으로 결제 성공 편리하고 안전한 서비스',
-      icon: IMAGE_ROOT + '/icon_ing01.svg', path: PATHS.additionalService.ars.list
-    },
-    {
-      className: 'list-wrap01', serviceName: 'KEY-IN 결제', serviceDesc: '상담 중 카드정보 입력으로 간편한 결제 지원',
-      icon: IMAGE_ROOT + '/icon_ing02.svg', path: PATHS.additionalService.keyInPayment.list
-    },
-    {
-      className: 'list-wrap01', serviceName: '계좌성명조회', serviceDesc: '예금주 정보 입력으로 즉시 예금주 확인',
-      icon: IMAGE_ROOT + '/icon_ing04.svg', path: PATHS.additionalService.accountHolderSearch.list
-    },
-  ];
-  const availableExtensionList = [
-    {
-      className: 'list-wrap02', serviceName: '지급대행', serviceDesc: '하위 가맹점에 빠른 정산금 지급 지급대행 서비스',
-      icon: IMAGE_ROOT + '/icon_ing05.svg', path: PATHS.additionalService.payout.list
-    },
-    {
-      className: 'list-wrap02', serviceName: '정산대행', serviceDesc: '하위 가맹점 정산금 계산부터 지급까지 자동 해결 서비스',
-      icon: IMAGE_ROOT + '/icon_ing06.svg', path: PATHS.additionalService.settlementAgency.manage
-    },
-    {
-      className: 'list-wrap02', serviceName: '링크 결제', serviceDesc: '결제 링크 전송만으로 어디서든 결제 가능 서비스',
-      icon: IMAGE_ROOT + '/icon_ing07.svg', path: PATHS.additionalService.linkPayment.shippingHistory
-    },
-    {
-      className: 'list-wrap02', serviceName: '자금이체', serviceDesc: '예치금으로 즉시 송금, 파일 등록만으로 다중 송금 가능',
-      icon: IMAGE_ROOT + '/icon_ing08.svg', path: PATHS.additionalService.fundAccount.transferList
-    },
-    {
-      className: 'list-wrap02', serviceName: '계좌점유인증', serviceDesc: '1원 송금으로 실제 계좌 점유 확인 여부',
-      icon: IMAGE_ROOT + '/icon_ing09.svg', path: PATHS.additionalService.accountHolderAuth.list
-    },
-    {
-      className: 'list-wrap02', serviceName: '알림톡 결제통보', serviceDesc: '결제 상태를 알림톡으로 쉽고 빠른 안내',
-      icon: IMAGE_ROOT + '/icon_ing10.svg', path: PATHS.additionalService.alimtalk.list
-    },
-  ];
-
-  const onClickToNavigate = (path?: string) => {
-    if(!!path){
-      navigate(path);
-    }
-  };
-
   const getActiveExtensionList = () => {
-    let rs = [];
-    for(let i=0;i<activeExtensionList.length;i++){
-      rs.push(
-        <div 
-          key={ 'key-active-' + i }
-          className={ activeExtensionList[i]?.className }
-          onClick={ () => onClickToNavigate(activeExtensionList[i]?.path) }
-        >
-          <div>
-            <div className="service-name">{ activeExtensionList[i]?.serviceName }</div>
-            <p className="service-desc">{ activeExtensionList[i]?.serviceDesc }</p>
-          </div>
-          <img 
-            src={ activeExtensionList[i]?.icon } 
-            alt={ activeExtensionList[i]?.serviceName }
-          />
+    const filteredServices = SERVICE_MAP.filter(service =>
+      activeServices.includes(service.code)
+    );
+
+    return filteredServices.map((service) => (
+      <div
+        key={'key-active-' + service.code}
+        className="list-wrap01"
+        onClick={() => service.path && navigate(service.path)}
+      >
+        <div>
+          <div className="service-name">{service.serviceName}</div>
+          <p className="service-desc">{service.serviceDesc}</p>
         </div>
-      );
-    }
-    return rs;
+        <img
+          src={service.icon}
+          alt={service.serviceName}
+        />
+      </div>
+    ));
   };
+
   const getAvailableExtensionList = () => {
-    let rs = [];
-    for(let i=0;i<availableExtensionList.length;i++){
-      rs.push(
-        <div 
-          key={ 'key-available-' + i }
-          className={ availableExtensionList[i]?.className }
-          onClick={ () => onClickToNavigate(availableExtensionList[i]?.path) }
-        >
-          <div>
-            <div className="service-name">{ availableExtensionList[i]?.serviceName }</div>
-            <p className="service-desc">{ availableExtensionList[i]?.serviceDesc }</p>
-          </div>
-          <img 
-            src={ availableExtensionList[i]?.icon } 
-            alt={ availableExtensionList[i]?.serviceName }
-          />
+    const filteredServices = SERVICE_MAP.filter(service =>
+      availableServices.includes(service.code)
+    );
+
+    return filteredServices.map((service) => (
+      <div
+        key={'key-available-' + service.code}
+        className="list-wrap02"
+        onClick={() => setDialogOpen(true)}
+      >
+        <div>
+          <div className="service-name">{service.serviceName}</div>
+          <p className="service-desc">{service.serviceDesc}</p>
         </div>
-      );
-    }
-    return rs;
+        <img
+          src={service.icon}
+          alt={service.serviceName}
+        />
+      </div>
+    ));
   };
 
   useEffect(() => {
-    if(!!mid){
+    if (!!mid) {
       callExtensionList();
     }
   }, [mid]);
-  
+
   return (
     <>
       <main>
@@ -147,28 +101,41 @@ export const ListPage = () => {
           <div className="tab-pane sub active">
             <div className="ing-list">
               <div className="input-wrapper top-select">
-              <select 
-                value={ mid }
-                onChange={ (e: ChangeEvent<HTMLSelectElement>) => setMid(e.target.value) }
-              >
-                { 
-                  midOptions.map((value, index) => (
-                    <option
-                      key={ value.value }
-                      value={ value.value }
-                    >{ value.name }</option>
-                  )) 
-                } 
-              </select>
+                <select
+                  value={mid}
+                  onChange={(e: ChangeEvent<HTMLSelectElement>) => setMid(e.target.value)}
+                >
+                  {
+                    midOptions.map((value) => (
+                      <option
+                        key={value.value}
+                        value={value.value}
+                      >{value.name}</option>
+                    ))
+                  }
+                </select>
               </div>
               <h3 className="ing-title">사용중인 서비스</h3>
-              { getActiveExtensionList() }
+              {getActiveExtensionList()}
               <h3 className="ing-title">신청 가능한 서비스</h3>
-              { getAvailableExtensionList() }
+              {getAvailableExtensionList()}
             </div>
           </div>
         </div>
       </main>
+      <Dialog
+        open={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+        message={
+          <>
+            이용 중이지 않은 서비스입니다.<br />
+            가입 문의는 영업 담당자 또는 고객센터로 문의해 주세요.
+          </>
+        }
+        buttonLabel={['확인']}
+        onConfirmClick={() => setDialogOpen(false)}
+        afterLeave={() => { }}
+      />
     </>
   )
 };