부가서비스 소개 수정

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

@@ -0,0 +1,161 @@
+import { 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,
+  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';
+
+export const ListPage = () => {
+  const { navigate } = useNavigate();
+
+  const [mid, setMid] = useState<string>('nictest001m');
+
+  const { mutateAsync: extensionList } = useExtensionListMutation();
+
+  useSetHeaderTitle('부가서비스 소개');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(true);
+  useSetOnBack(() => {
+    navigate(PATHS.home);
+  });
+
+  const callExtensionList = () => {
+    let params: ExtensionListParams = {
+      mid: mid
+    }
+    extensionList(params).then((rs: ExtensionListResponse) => {
+      console.log(rs)
+    });
+  };
+
+  useEffect(() => {
+    callExtensionList();
+  }, []);
+
+  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 }
+          />
+        </div>
+      );
+    }
+    return rs;
+  };
+  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 }
+          />
+        </div>
+      );
+    }
+    return rs;
+  };
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="ing-list">
+              <div className="input-wrapper top-select">
+                <select>
+                  <option value="1">nicetest00g</option>
+                  <option value="2">nicetest00g</option>
+                  <option value="3">nicetest00g</option>
+                </select>
+              </div>
+              <h3 className="ing-title">사용중인 서비스</h3>
+              { getActiveExtensionList() }
+              <h3 className="ing-title">신청 가능한 서비스</h3>
+              { getAvailableExtensionList() }
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  )
+};