부가서비스 소개 수정

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
-          key={ 'key-using-' + i }
-          className={ usingList[i]?.className }
-          serviceName={ usingList[i]?.serviceName }
-          serviceDesc={ usingList[i]?.serviceDesc }
-          icon={ usingList[i]?.icon }
-          path={ usingList[i]?.path }
-        ></IntroListItem>
+        <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 getRequestList = () => {
+  const getAvailableExtensionList = () => {
     let rs = [];
-    for(let i=0;i<requestList.length;i++){
+    for(let i=0;i<availableExtensionList.length;i++){
       rs.push(
-        <IntroListItem
-          key={ 'key-request-' + i }
-          className={ requestList[i]?.className }
-          serviceName={ requestList[i]?.serviceName }
-          serviceDesc={ requestList[i]?.serviceDesc }
-          icon={ requestList[i]?.icon }
-          path={ requestList[i]?.path }
-        ></IntroListItem>
+        <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;
@@ -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>
     </>
-  );
+  )
 };