자금이체 탭

src/entities/additional-service/model/types.ts

@@ -1,5 +1,12 @@
 import { DefaulResponsePagination } from '@/entities/common/model/types';
 
+export enum FundTransferTabKeys {
+  RequestList = 'RequestList',
+  ResultInquiry = 'ResultInquiry'
+};
+export interface FundTransferTabProps {
+  activeTab: FundTransferTabKeys;
+};
 export interface ExtensionRequestParams {
   mid: string;
 };

src/entities/additional-service/ui/fund-transfer-request-list-wrap.tsx

@@ -0,0 +1,8 @@
+export const FundTransferRequestListWrap = () => {
+
+  return (
+    <>
+    
+    </>
+  );
+};

src/entities/additional-service/ui/fund-transfer-result-inquiry-wrap.tsx

@@ -0,0 +1,8 @@
+export const FundTransferResultInquiryWrap = () => {
+
+  return (
+    <>
+    
+    </>
+  );
+};

src/entities/additional-service/ui/fund-transfer-tab.tsx

@@ -0,0 +1,37 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { 
+  FundTransferTabKeys, 
+  FundTransferTabProps 
+} from '../model/types';
+export const FundTransferTab = ({
+  activeTab
+}: FundTransferTabProps) => {
+  const { navigate } = useNavigate();
+
+  const onClickToNavigation = (tab: FundTransferTabKeys) => {
+    if(activeTab !== tab){
+      if(tab === FundTransferTabKeys.RequestList){
+        navigate(PATHS.additionalService.fundTransfer.requestList);
+      }
+      else if(tab === FundTransferTabKeys.ResultInquiry){
+        navigate(PATHS.additionalService.fundTransfer.resultInquiry);
+      }
+    }
+  };
+
+  return (
+    <>
+      <div className="subTab">
+        <button 
+          className={`subtab-btn ${(activeTab === FundTransferTabKeys.RequestList)? 'active': ''}` }
+          onClick={ () => onClickToNavigation(FundTransferTabKeys.RequestList) } 
+        >이체 신청</button>
+        <button 
+          className={`subtab-btn ${(activeTab === FundTransferTabKeys.ResultInquiry)? 'active': ''}` }
+          onClick={ () => onClickToNavigation(FundTransferTabKeys.ResultInquiry) } 
+        >결과 조회</button>
+      </div>
+    </>
+  );
+};

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

@@ -14,6 +14,7 @@ import { KakaoPaymentNotificationListPage } from './kakao-payment-notification/l
 import { KakaoPaymentNotificationSettingPage } from './kakao-payment-notification/setting-page';
 import { FundTransferRequestListPage } from './fund-transfer/request-list-page';
 import { FundTransferRequestRegisterPage } from './fund-transfer/request-register-page';
+import { FundTransferResultInquiryPage } from './fund-transfer/result-inquiry-page';
 import { SettlementAgencyPage } from './settlement-agency/settlement-agency-page';
 import { PaymentAgencyListPage } from './payment-agency/list-page';
 import { PaymentAgencyDetailPage } from './payment-agency/detail-page';
@@ -42,6 +43,7 @@ export const AdditionalServicePages = () => {
         <Route path={ROUTE_NAMES.additionalService.fundTransfer.base}>
           <Route path={ROUTE_NAMES.additionalService.fundTransfer.requestList} element={<FundTransferRequestListPage />} />
           <Route path={ROUTE_NAMES.additionalService.fundTransfer.requestRegister} element={<FundTransferRequestRegisterPage />} />
+          <Route path={ROUTE_NAMES.additionalService.fundTransfer.resultInquiry} element={<FundTransferResultInquiryPage />} />
         </Route>
         <Route path={ROUTE_NAMES.additionalService.settlementAgency} element={<SettlementAgencyPage />} />
         <Route path={ROUTE_NAMES.additionalService.paymentAgency.base}>

src/pages/additional-service/fund-transfer/request-list-page.tsx

@@ -1,18 +1,39 @@
+import { useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { FundTransferTab } from '@/entities/additional-service/ui/fund-transfer-tab'; 
+import { FundTransferRequestListWrap } from '@/entities/additional-service/ui/fund-transfer-request-list-wrap';
+import { FundTransferTabKeys } from '@/entities/additional-service/model/types';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
 	useSetHeaderTitle,
 	useSetHeaderType,
-	useSetFooterMode
+	useSetFooterMode,
+  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 
 export const FundTransferRequestListPage = () => {
+  const { navigate } = useNavigate();
+
+  const [activeTab, setActiveTab] = useState<FundTransferTabKeys>(FundTransferTabKeys.RequestList);
+
   useSetHeaderTitle('자금이체');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(true);
+  useSetOnBack(() => {
+    navigate(PATHS.home);
+  });
 
   return (
     <>
-
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <FundTransferTab activeTab={ activeTab }></FundTransferTab>
+            <FundTransferRequestListWrap></FundTransferRequestListWrap>
+          </div>
+        </div>
+      </main>
     </>
   );
 };

src/pages/additional-service/fund-transfer/result-inquiry-page.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { FundTransferTab } from '@/entities/additional-service/ui/fund-transfer-tab'; 
+import { FundTransferResultInquiryWrap } from '@/entities/additional-service/ui/fund-transfer-result-inquiry-wrap';
+import { FundTransferTabKeys } from '@/entities/additional-service/model/types';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const FundTransferResultInquiryPage = () => {
+  const { navigate } = useNavigate();
+
+  const [activeTab, setActiveTab] = useState<FundTransferTabKeys>(FundTransferTabKeys.ResultInquiry);
+
+  useSetHeaderTitle('자금이체');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(true);
+  useSetOnBack(() => {
+    navigate(PATHS.home);
+  });
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <FundTransferTab activeTab={ activeTab }></FundTransferTab>
+            <FundTransferResultInquiryWrap></FundTransferResultInquiryWrap>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

src/shared/constants/paths.ts

@@ -183,6 +183,10 @@ export const PATHS: RouteNamesType = {
         `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.fundTransfer.base}`,
         ROUTE_NAMES.additionalService.fundTransfer.requestRegister,
       ),
+      resultInquiry: generatePath(
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.fundTransfer.base}`,
+        ROUTE_NAMES.additionalService.fundTransfer.resultInquiry,
+      ),
     },
     settlementAgency: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.settlementAgency),
     paymentAgency: {

src/shared/constants/route-names.ts

@@ -90,6 +90,7 @@ export const ROUTE_NAMES = {
       base: '/fund-transfer/*',
       requestList: 'request-list',
       requestRegister: 'request-register',
+      resultInquiry: 'result-inquiry',
     },
     settlementAgency: 'settlement-agency',
     paymentAgency: {