부가서비스 소개 수정

src/entities/additional-service/ui/intro-list-item.tsx

@@ -1,35 +0,0 @@
-import { IntroListItemProps } from '../model/types';
-import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-
-export const IntroListItem = ({
-  className,
-  serviceName,
-  serviceDesc,
-  icon,
-  path
-}: IntroListItemProps) => {
-  const { navigate } = useNavigate();
-  
-  const onClickToNavigate = () => {
-    if(!!path){
-      navigate(path);
-    }
-  };
-  return (
-    <>
-      <div 
-        className={ className }
-        onClick={ () => onClickToNavigate() }
-      >
-        <div>
-          <div className="service-name">{ serviceName }</div>
-          <p className="service-desc">{ serviceDesc }</p>
-        </div>
-        <img 
-          src={ icon } 
-          alt={ serviceName }
-        />
-      </div>
-    </>
-  )
-};

src/entities/additional-service/ui/link-payment/apply/link-payment-step1.tsx

@@ -13,7 +13,7 @@ export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Prop
   const { navigate } = useNavigate();
 
   useSetOnBack(() => {
-    navigate(PATHS.additionalService.intro);
+    navigate(PATHS.additionalService.list);
   });
 
   const handlePaymentMethodChange = (method: LinkPaymentSendMethod) => {

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

@@ -1,7 +1,7 @@
 import { Route } from 'react-router-dom';
 import { SentryRoutes } from '@/shared/configs/sentry';
 import { ROUTE_NAMES } from '@/shared/constants/route-names';
-import { IntroPage } from './intro/intro-page';
+import { ListPage } from './list-page';
 import { ArsListPage } from './ars/list-page';
 import { ArsDetailPage } from './ars/detail-page';
 import { ArsRequestPage } from './ars/request-page';
@@ -43,8 +43,7 @@ export const AdditionalServicePages = () => {
   return (
     <>
       <SentryRoutes>
-        <Route path={ROUTE_NAMES.additionalService.intro} element={<IntroPage />} />
+        <Route path={ROUTE_NAMES.additionalService.list} element={<ListPage />} />
-
         <Route path={ROUTE_NAMES.additionalService.ars.base}>
           <Route path={ROUTE_NAMES.additionalService.ars.list} element={<ArsListPage />} />
           <Route path={ROUTE_NAMES.additionalService.ars.detail} element={<ArsDetailPage />} />

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

@@ -1,18 +1,24 @@
+import { useEffect, useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
-import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { IntroListItem } from '@/entities/additional-service/ui/intro-list-item';
 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 IntroPage = () => {
+export const ListPage = () => {
   const { navigate } = useNavigate();
 
+  const [mid, setMid] = useState<string>('nictest001m');
+
+  const { mutateAsync: extensionList } = useExtensionListMutation();
+
   useSetHeaderTitle('부가서비스 소개');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(true);
@@ -20,7 +26,20 @@ export const IntroPage = () => {
     navigate(PATHS.home);
   });
 
-  const usingList = [
+  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
@@ -38,7 +57,7 @@ export const IntroPage = () => {
       icon: IMAGE_ROOT + '/icon_ing04.svg', path: PATHS.additionalService.accountHolderSearch.list
     },
   ];
-  const requestList = [
+  const availableExtensionList = [
     {
       className: 'list-wrap02', serviceName: '지급대행', serviceDesc: '하위 가맹점에 빠른 정산금 지급 지급대행 서비스',
       icon: IMAGE_ROOT + '/icon_ing05.svg', path: PATHS.additionalService.payout.list
@@ -65,34 +84,52 @@ export const IntroPage = () => {
     },
   ];
 
-  const getUsingList = () => {
+  const onClickToNavigate = (path?: string) => {
+    if(!!path){
+      navigate(path);
+    }
+  };
+
+  const getActiveExtensionList = () => {
     let rs = [];
-    for(let i=0;i<usingList.length;i++){
+    for(let i=0;i<activeExtensionList.length;i++){
       rs.push(
-        <IntroListItem
+        <div 
-          key={ 'key-using-' + i }
+          key={ 'key-active-' + i }
-          className={ usingList[i]?.className }
+          className={ activeExtensionList[i]?.className }
-          serviceName={ usingList[i]?.serviceName }
+          onClick={ () => onClickToNavigate(activeExtensionList[i]?.path) }
-          serviceDesc={ usingList[i]?.serviceDesc }
+        >
-          icon={ usingList[i]?.icon }
+          <div>
-          path={ usingList[i]?.path }
+            <div className="service-name">{ activeExtensionList[i]?.serviceName }</div>
-        ></IntroListItem>
+            <p className="service-desc">{ activeExtensionList[i]?.serviceDesc }</p>
+          </div>
+          <img 
+            src={ activeExtensionList[i]?.icon } 
+            alt={ activeExtensionList[i]?.serviceName }
+          />
+        </div>
       );
     }
     return rs;
   };
-  const getRequestList = () => {
+  const getAvailableExtensionList = () => {
     let rs = [];
-    for(let i=0;i<requestList.length;i++){
+    for(let i=0;i<availableExtensionList.length;i++){
       rs.push(
-        <IntroListItem
+        <div 
-          key={ 'key-request-' + i }
+          key={ 'key-available-' + i }
-          className={ requestList[i]?.className }
+          className={ availableExtensionList[i]?.className }
-          serviceName={ requestList[i]?.serviceName }
+          onClick={ () => onClickToNavigate(availableExtensionList[i]?.path) }
-          serviceDesc={ requestList[i]?.serviceDesc }
+        >
-          icon={ requestList[i]?.icon }
+          <div>
-          path={ requestList[i]?.path }
+            <div className="service-name">{ availableExtensionList[i]?.serviceName }</div>
-        ></IntroListItem>
+            <p className="service-desc">{ availableExtensionList[i]?.serviceDesc }</p>
+          </div>
+          <img 
+            src={ availableExtensionList[i]?.icon } 
+            alt={ availableExtensionList[i]?.serviceName }
+          />
+        </div>
       );
     }
     return rs;
@@ -112,13 +149,13 @@ export const IntroPage = () => {
                 </select>
               </div>
               <h3 className="ing-title">사용중인 서비스</h3>
-              { getUsingList() }
+              { getActiveExtensionList() }
               <h3 className="ing-title">신청 가능한 서비스</h3>
-              { getRequestList() }
+              { getAvailableExtensionList() }
             </div>
           </div>
         </div>
       </main>
     </>
-  );
+  )
 };

src/shared/constants/paths.ts

@@ -132,7 +132,7 @@ export const PATHS: RouteNamesType = {
   },
   additionalService: {
     base: generatePath(ROUTE_NAMES.additionalService.base),
-    intro: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.intro),
+    list: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.list),
     ars: {
       base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.ars.base}`),
       list: generatePath(

src/shared/constants/route-names.ts

@@ -66,7 +66,7 @@ export const ROUTE_NAMES = {
   },
   additionalService: {
     base: '/additional-service/*',
-    intro: 'intro',
+    list: 'list',
     ars: {
       base: '/ars/*',
       list: 'list',
@@ -161,89 +161,6 @@ export const ROUTE_NAMES = {
     list: 'list',
   },
 
-  /*
-  intro: '/intro',
-  appAuth: '/appAuth',
-  start: '/start',
-  mobileVerification: '/mobileVerification',
-  pwFail: '/pwFail',
-  signUp: {
-    base: '/signUp/*',
-    termsAndConditions: 'termsAndConditions',
-    setPinNumber: 'setPinNumber',
-    reSetBiometricAuth: 'reSetBiometricAuth',
-    setBiometricAuth: 'setBiometricAuth',
-    reSetPinNumber: 'reSetPinNumber',
-    bioPinNumber: 'bioPinNumber',
-    inputPinNumber: 'inputPinNumber',
-  },
-  issueWallet: {
-    base: '/issueWallet/*',
-    intro: 'intro',
-    inputBankAccount: 'inputBankAccount',
-    authBankAccount: 'authBankAccount',
-    chooseIDCardType: 'chooseIDCardType',
-    captureBusinessLicense: 'captureBusinessLicense',
-    confirm: {
-      base: '/confirm/*',
-      IDCard: 'IDCard',
-      driverLicense: 'driverLicense',
-      passport: 'passport',
-      businessLicense: 'businessLicense',
-    },
-  },
-  myWallet: {
-    base: '/myWallet/*',
-    history: 'history',
-    historyDetail: 'history/:historyId',
-    refundQRCode: 'refundQRCode/:historyId',
-    tokenDetail: 'token/:tokenId',
-  },
-  exchange: {
-    base: '/exchange/*',
-    selectRecipient: 'selectRecipient',
-    inputRecipient: 'inputRecipient',
-    inputAmount: 'inputAmount',
-    inputConfirm: 'inputConfirm',
-    process: 'process',
-    complete: 'complete',
-  },
-  myBankAccount: '/myBankAccount',
-  security: '/security',
-  appVersion: '/appVersion',
-  settingFontSize: '/settingFontSize',
-  community: {
-    base: '/community/*',
-    faq: 'faq',
-    faqDetail: 'faqDetail',
-    notice: 'notice',
-    noticeDetail: 'noticeDetail',
-    inquiry: 'inquiry',
-    inquiryDetail: 'inquiryDetail',
-    inquiryModify: 'inquiryModify',
-  },
-  menu: '/menu',
-  login: '/login',
-  reLogin: '/reLogin',
-  home: '/home',
-  shopList: '/shopList',
-  notification: {
-    base: '/notification/*',
-    setting: 'setting',
-  },
-  payment: {
-    base: '/payment/*',
-    myPaymentQRCode: 'myPaymentQRCode',
-    payWithNFCManual: 'payWithNFCManual',
-    payWithNFCAuto: 'payWithNFCAuto',
-  },
-  voucher: {
-    base: '/voucher/*',
-    voucherDetail: ':voucherId',
-  },
-  paymentGuide: 'paymentGuide',
-  inputShopWalletAddr: 'inputShopWalletAddr',
-  */
 };
 
 export type RouteNamesType = typeof ROUTE_NAMES;

src/shared/ui/menu/index.tsx

@@ -81,7 +81,7 @@ export const Menu = ({
       category: '부가서비스',
       categoryIcon: 'service-icon',
       items: [
-        {title: '부가서비스소개', path: PATHS.additionalService.intro},
+        {title: '부가서비스소개', path: PATHS.additionalService.list},
         {title: 'ARS 카드결제', path: PATHS.additionalService.ars.list},
         {title: 'KEY-IN 결제', path: PATHS.additionalService.keyInPayment.list},
         {title: 'SMS 결제 통보', path: PATHS.additionalService.smsPaymentNotification},