diff --git a/src/entities/additional-service/model/types.ts b/src/entities/additional-service/model/types.ts index d92b349..13cdd76 100644 --- a/src/entities/additional-service/model/types.ts +++ b/src/entities/additional-service/model/types.ts @@ -7,6 +7,14 @@ export enum FundTransferTabKeys { export interface FundTransferTabProps { activeTab: FundTransferTabKeys; }; +export enum SettlementAgencyTabKeys { + Manage = 'Manage', + Deposit = 'Deposit', + Member = 'Member', +}; +export interface SettlementAgencyTabProps { + activeTab: SettlementAgencyTabKeys; +}; export interface ExtensionRequestParams { mid: string; }; diff --git a/src/entities/additional-service/ui/fund-transfer-request-list-wrap.tsx b/src/entities/additional-service/ui/fund-transfer-request-list-wrap.tsx index 286e241..32a88be 100644 --- a/src/entities/additional-service/ui/fund-transfer-request-list-wrap.tsx +++ b/src/entities/additional-service/ui/fund-transfer-request-list-wrap.tsx @@ -1,8 +1,146 @@ +import { IMAGE_ROOT } from "@/shared/constants/common"; + export const FundTransferRequestListWrap = () => { return ( <> +
+
+
+ + +
+ +
+
+
+
+ 잔액 + 2,000,000,000원원 +
+
+
+
+ ※ 이체 등록 후에는 별도 ‘이체요청'처리를 해야 이체가 실행됩니다. 미요청 시 이체 미진행. +
+
+ +
+
+ + | + +
+
+
+ 전체 + 성공 + 실패 +
+
+
+
+
25.06.08(일)
+
+
+
+
+
+
김*환(7000)
+
+ 20:00 + ㅣ + 미결제 + ㅣ + 결제대기 + ㅣ + SMS +
+
+
5,254,000원
+
+
+
+
+
+
+
김*환(7000)
+
+ 20:00 + ㅣ + 미결제 + ㅣ + 결제대기 + ㅣ + SMS +
+
+
5,254,000원
+
+ +
25.06.08(일)
+
+
+
+
+
+
김*환(7000)
+
+ 20:00 + ㅣ + 미결제 + ㅣ + 결제대기 + ㅣ + SMS +
+
+
5,254,000원
+
+
+
+
+
+
+
김*환(7000)
+
+ 20:00 + ㅣ + 미결제 + ㅣ + 결제대기 + ㅣ + SMS +
+
+
5,254,000원
+
+
+
+ +
); }; \ No newline at end of file diff --git a/src/entities/additional-service/ui/fund-transfer-result-inquiry-wrap.tsx b/src/entities/additional-service/ui/fund-transfer-result-inquiry-wrap.tsx index 518c8db..d884dd8 100644 --- a/src/entities/additional-service/ui/fund-transfer-result-inquiry-wrap.tsx +++ b/src/entities/additional-service/ui/fund-transfer-result-inquiry-wrap.tsx @@ -1,8 +1,144 @@ +import { IMAGE_ROOT } from "@/shared/constants/common"; + export const FundTransferResultInquiryWrap = () => { return ( <> +
+
+
+ + +
+ +
+
+
+
+ 잔액 + 2,000,000,000원 +
+
+
+
+ +
+
+ +
+
+ + | + +
+
+
+ 전체 + 성공 + 실패 +
+
+
+
+ +
25.06.08(일)
+
+
+
+
+
+
김*환(7000)
+
+ 20:00 + ㅣ + 등록완료 +
+
+
5,254,000원
+
+
+
+
+
+
+
김*환(7000)
+
+ 20:00 + ㅣ + 등록완료 +
+
+
5,254,000원
+
+ +
25.06.08(일)
+
+
+
+
+
+
김*환(7000)
+
+ 20:00 + ㅣ + 등록완료 +
+
+
5,254,000원
+
+
+
+
+
+
+
김*환(7000)
+
+ 20:00 + ㅣ + 등록완료 +
+
+
5,254,000원
+
+
+
+ +
); }; \ No newline at end of file diff --git a/src/entities/additional-service/ui/settlement-agency-deposit-wrap.tsx b/src/entities/additional-service/ui/settlement-agency-deposit-wrap.tsx new file mode 100644 index 0000000..16e3a42 --- /dev/null +++ b/src/entities/additional-service/ui/settlement-agency-deposit-wrap.tsx @@ -0,0 +1,206 @@ +import { PATHS } from '@/shared/constants/paths'; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; +import { IMAGE_ROOT } from '@/shared/constants/common'; + +export const SettlementAgencyDepositWrap = () => { + const { navigate } = useNavigate(); + + const onClickRegister = () => { + navigate(PATHS.additionalService.settlementAgency.register); + }; + + return ( + <> +
+
+
+ + +
+ +
+
+
+ 총 입금액 + 83,745,200원 +
+
+ 총 출금액 + 534,407원 +
+
+
+
+
+ + | + +
+
+
+ 전체 + 입금 + 출금 +
+
+
+
+
+
25.06.08(일)
+
+
+
+
+
+
입금(현금 입금)
+
+ 10:10:00 +
+
+
+ 5,254,000원 + 잔액 : 1,58,332원 +
+
+ +
+
+
+
+
+
입금(현금 입금)
+
+ 10:10:00 +
+
+
+ 5,254,000원 + 잔액 : 1,58,332원 +
+
+ +
+
+
+
+
+
입금(현금 입금)
+
+ 10:10:00 +
+
+
+ 5,254,000원 + 잔액 : 1,58,332원 +
+
+
+
+
+
+
+
입금(현금 입금)
+
+ 10:10:00 +
+
+
+ 5,254,000원 + 잔액 : 1,58,332원 +
+
+
+
+
+
+
+
입금(현금 입금)
+
+ 10:10:00 +
+
+
+ 5,254,000원 + 잔액 : 1,58,332원 +
+
+
+
+
+
+
+
입금(현금 입금)
+
+ 10:10:00 +
+
+
+ 5,254,000원 + 잔액 : 1,58,332원 +
+
+
+
+
+
+
+
입금(현금 입금)
+
+ 10:10:00 +
+
+
+ 5,254,000원 + 잔액 : 1,58,332원 +
+
+
+
+
+
+
+
입금(현금 입금)
+
+ 10:10:00 +
+
+
+ 5,254,000원 + 잔액 : 1,58,332원 +
+
+
+
+
+
+
+
입금(현금 입금)
+
+ 10:10:00 +
+
+
+ 5,254,000원 + 잔액 : 1,58,332원 +
+
+
+
+ + ); +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/settlement-agency-manage-wrap.tsx b/src/entities/additional-service/ui/settlement-agency-manage-wrap.tsx new file mode 100644 index 0000000..63028a4 --- /dev/null +++ b/src/entities/additional-service/ui/settlement-agency-manage-wrap.tsx @@ -0,0 +1,161 @@ +import { PATHS } from '@/shared/constants/paths'; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; +import { IMAGE_ROOT } from '@/shared/constants/common'; + +export const SettlementAgencyManageWrap = () => { + const { navigate } = useNavigate(); + + const onClickToRegister = () => { + navigate(PATHS.additionalService.settlementAgency.register); + }; + + return ( + <> +
+
+
+ + +
+ +
+
+
+
+ 예치금 잔액 + 83,745,200원 + (2,745건) +
+
+ 정산 현황 + +
+
+
+
    +
  • + 동의대기 + 50 건 +
    • +
  • + 동의완료 + 150 건 +
    • +
  • + 동의거절 + 0 건 +
    • +
  • + 동의기한 초과 + 5 건 +
    • +
  • + 출금성공 + 300 건 +
    • +
  • + 출금실패 + 0 건 +
    • +
  • + 환수안내 + 0 건 +
    • +
+
+
+
+
+
+ + | + +
+
+
+ + + +
+
+
+
+
25.06.08(일)
+
+
+
+
+
+
AB25061012 (BACK001)
+
+ 정산일 : 06.08 + ㅣ + 동의완료 +
+
+
10,000,000원
+
+
+
+
+
+
+
AB25061012 (BACK001)
+
+ 정산일 : 06.08 + ㅣ + 동의완료 +
+
+
10,000,000원
+
+
+
+
+
+
+
AB25061012 (BACK001)
+
+ 정산일 : 06.08 + ㅣ + 출금실패 +
+
+
10,000,000원
+
+
+
+ +
+ + ); +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/settlement-agency-member-wrap.tsx b/src/entities/additional-service/ui/settlement-agency-member-wrap.tsx new file mode 100644 index 0000000..39ef81f --- /dev/null +++ b/src/entities/additional-service/ui/settlement-agency-member-wrap.tsx @@ -0,0 +1,83 @@ +import { PATHS } from '@/shared/constants/paths'; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; +import { IMAGE_ROOT } from '@/shared/constants/common'; + +export const SettlementAgencyMemberWrap = () => { + const { navigate } = useNavigate(); + + const onClickRegister = () => { + navigate(PATHS.additionalService.settlementAgency.register); + }; + + return ( + <> +
+
+
+ +
+
+
+
+
+
+ +
BACK5(빽다방5프로)
+
    +
  • 수수료 : 1%, 반올림
    • +
  • 과세 여부 : 과세, 절사
    • +
  • 정산일 : 매월 15일
    • +
+
+
+
+
+ +
BACK5(빽다방5프로)
+
    +
  • 수수료 : 1%, 반올림
    • +
  • 과세 여부 : 과세, 절사
    • +
  • 정산일 : 매월 15일
    • +
+
+
+
+
+ +
BACK5(빽다방5프로)
+
    +
  • 수수료 : 1%, 반올림
    • +
  • 과세 여부 : 과세, 절사
    • +
  • 정산일 : 매월 15일
    • +
+
+
+
+
+ +
BACK5(빽다방5프로)
+
    +
  • 수수료 : 1%, 반올림
    • +
  • 과세 여부 : 과세, 절사
    • +
  • 정산일 : 매월 15일
    • +
+
+
+
+
+ +
BACK5(빽다방5프로)
+
    +
  • 수수료 : 1%, 반올림
    • +
  • 과세 여부 : 과세, 절사
    • +
  • 정산일 : 매월 15일
    • +
+
+
+
+
+ + ); +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/settlement-agency-tab.tsx b/src/entities/additional-service/ui/settlement-agency-tab.tsx new file mode 100644 index 0000000..a6e516e --- /dev/null +++ b/src/entities/additional-service/ui/settlement-agency-tab.tsx @@ -0,0 +1,44 @@ +import { PATHS } from '@/shared/constants/paths'; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; +import { + SettlementAgencyTabKeys, + SettlementAgencyTabProps +} from '../model/types'; + +export const SettlementAgencyTab = ({ + activeTab +}: SettlementAgencyTabProps) => { + const { navigate } = useNavigate(); + + const onClickToNavigation = (tab: SettlementAgencyTabKeys) => { + if(activeTab !== tab){ + if(tab === SettlementAgencyTabKeys.Manage){ + navigate(PATHS.additionalService.settlementAgency.manage); + } + else if(tab === SettlementAgencyTabKeys.Deposit){ + navigate(PATHS.additionalService.settlementAgency.deposit); + } + else if(tab === SettlementAgencyTabKeys.Member){ + navigate(PATHS.additionalService.settlementAgency.member); + } + } + }; + return ( + <> +
+ + + +
+ + ); +}; \ No newline at end of file diff --git a/src/pages/additional-service/additional-service-pages.tsx b/src/pages/additional-service/additional-service-pages.tsx index 256e1ed..9986f10 100644 --- a/src/pages/additional-service/additional-service-pages.tsx +++ b/src/pages/additional-service/additional-service-pages.tsx @@ -15,7 +15,11 @@ import { KakaoPaymentNotificationSettingPage } from './kakao-payment-notificatio 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 { SettlementAgencyManagePage } from './settlement-agency/manage-page'; +import { SettlementAgencyDepositPage } from './settlement-agency/deposit-page'; +import { SettlementAgencyMemberPage } from './settlement-agency/member-page'; +import { SettlementAgencyRegisterPage } from './settlement-agency/register-page'; +import { SettlementAgencyDetailPage } from './settlement-agency/detail-page'; import { PaymentAgencyListPage } from './payment-agency/list-page'; import { PaymentAgencyDetailPage } from './payment-agency/detail-page'; import { PaymentAgencyRequestPage } from './payment-agency/request-page'; @@ -45,7 +49,13 @@ export const AdditionalServicePages = () => { } /> } /> - } /> + + } /> + } /> + } /> + } /> + } /> + } /> } /> diff --git a/src/pages/additional-service/intro/intro-page.tsx b/src/pages/additional-service/intro/intro-page.tsx index a17e48f..58c2193 100644 --- a/src/pages/additional-service/intro/intro-page.tsx +++ b/src/pages/additional-service/intro/intro-page.tsx @@ -45,7 +45,7 @@ export const IntroPage = () => { }, { className: 'list-wrap02', serviceName: '정산대행', serviceDesc: '하위 가맹점 정산금 계산부터 지급까지 자동 해결 서비스', - icon: IMAGE_ROOT + '/icon_ing06.svg', path: PATHS.additionalService.settlementAgency + icon: IMAGE_ROOT + '/icon_ing06.svg', path: PATHS.additionalService.settlementAgency.manage }, { className: 'list-wrap02', serviceName: '링크 결제', serviceDesc: '결제 링크 전송만으로 어디서든 결제 가능 서비스', diff --git a/src/pages/additional-service/settlement-agency/deposit-page.tsx b/src/pages/additional-service/settlement-agency/deposit-page.tsx new file mode 100644 index 0000000..b31469a --- /dev/null +++ b/src/pages/additional-service/settlement-agency/deposit-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 { SettlementAgencyTab } from '@/entities/additional-service/ui/settlement-agency-tab'; +import { SettlementAgencyDepositWrap } from '@/entities/additional-service/ui/settlement-agency-deposit-wrap'; +import { SettlementAgencyTabKeys } 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 SettlementAgencyDepositPage = () => { + const { navigate } = useNavigate(); + + const [activeTab, setActiveTab] = useState(SettlementAgencyTabKeys.Deposit); + + useSetHeaderTitle('정산대행'); + useSetHeaderType(HeaderType.LeftArrow); + useSetFooterMode(true); + useSetOnBack(() => { + navigate(PATHS.home); + }); + + return ( + <> +
+
+
+ + +
+
+
+ + ); +}; \ No newline at end of file diff --git a/src/pages/additional-service/settlement-agency/detail-page.tsx b/src/pages/additional-service/settlement-agency/detail-page.tsx new file mode 100644 index 0000000..cac2940 --- /dev/null +++ b/src/pages/additional-service/settlement-agency/detail-page.tsx @@ -0,0 +1,8 @@ +export const SettlementAgencyDetailPage = () => { + + return ( + <> + + + ); +}; \ No newline at end of file diff --git a/src/pages/additional-service/settlement-agency/manage-page.tsx b/src/pages/additional-service/settlement-agency/manage-page.tsx new file mode 100644 index 0000000..bb657ca --- /dev/null +++ b/src/pages/additional-service/settlement-agency/manage-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 { SettlementAgencyTab } from '@/entities/additional-service/ui/settlement-agency-tab'; +import { SettlementAgencyManageWrap } from '@/entities/additional-service/ui/settlement-agency-manage-wrap'; +import { SettlementAgencyTabKeys } 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 SettlementAgencyManagePage = () => { + const { navigate } = useNavigate(); + + const [activeTab, setActiveTab] = useState(SettlementAgencyTabKeys.Manage); + + useSetHeaderTitle('정산대행'); + useSetHeaderType(HeaderType.LeftArrow); + useSetFooterMode(true); + useSetOnBack(() => { + navigate(PATHS.home); + }); + + return ( + <> +
+
+
+ + +
+
+
+ + ); +}; \ No newline at end of file diff --git a/src/pages/additional-service/settlement-agency/member-page.tsx b/src/pages/additional-service/settlement-agency/member-page.tsx new file mode 100644 index 0000000..8225d1b --- /dev/null +++ b/src/pages/additional-service/settlement-agency/member-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 { SettlementAgencyTab } from '@/entities/additional-service/ui/settlement-agency-tab'; +import { SettlementAgencyMemberWrap } from '@/entities/additional-service/ui/settlement-agency-member-wrap'; +import { SettlementAgencyTabKeys } 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 SettlementAgencyMemberPage = () => { + const { navigate } = useNavigate(); + + const [activeTab, setActiveTab] = useState(SettlementAgencyTabKeys.Member); + + useSetHeaderTitle('정산대행'); + useSetHeaderType(HeaderType.LeftArrow); + useSetFooterMode(true); + useSetOnBack(() => { + navigate(PATHS.home); + }); + + return ( + <> +
+
+
+ + +
+
+
+ + ); +}; \ No newline at end of file diff --git a/src/pages/additional-service/settlement-agency/register-page.tsx b/src/pages/additional-service/settlement-agency/register-page.tsx new file mode 100644 index 0000000..08e7b78 --- /dev/null +++ b/src/pages/additional-service/settlement-agency/register-page.tsx @@ -0,0 +1,8 @@ +export const SettlementAgencyRegisterPage = () => { + + return ( + <> + + + ); +}; \ No newline at end of file diff --git a/src/pages/additional-service/settlement-agency/settlement-agency-page.tsx b/src/pages/additional-service/settlement-agency/settlement-agency-page.tsx deleted file mode 100644 index 7b7ce6f..0000000 --- a/src/pages/additional-service/settlement-agency/settlement-agency-page.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { HeaderType } from '@/entities/common/model/types'; -import { - useSetHeaderTitle, - useSetHeaderType, - useSetFooterMode -} from '@/widgets/sub-layout/use-sub-layout'; - -export const SettlementAgencyPage = () => { - useSetHeaderTitle('정산대행'); - useSetHeaderType(HeaderType.LeftArrow); - useSetFooterMode(true); - - return ( - <> - - - ); -}; \ No newline at end of file diff --git a/src/shared/constants/paths.ts b/src/shared/constants/paths.ts index c534613..9aedaab 100644 --- a/src/shared/constants/paths.ts +++ b/src/shared/constants/paths.ts @@ -188,7 +188,29 @@ export const PATHS: RouteNamesType = { ROUTE_NAMES.additionalService.fundTransfer.resultInquiry, ), }, - settlementAgency: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.settlementAgency), + settlementAgency: { + base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.paymentAgency.base}`), + manage: generatePath( + `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.settlementAgency.base}`, + ROUTE_NAMES.additionalService.settlementAgency.manage, + ), + deposit: generatePath( + `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.settlementAgency.base}`, + ROUTE_NAMES.additionalService.settlementAgency.deposit, + ), + member: generatePath( + `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.settlementAgency.base}`, + ROUTE_NAMES.additionalService.settlementAgency.member, + ), + register: generatePath( + `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.settlementAgency.base}`, + ROUTE_NAMES.additionalService.settlementAgency.register, + ), + detail: generatePath( + `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.settlementAgency.base}`, + ROUTE_NAMES.additionalService.settlementAgency.detail, + ), + }, paymentAgency: { base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.paymentAgency.base}`), list: generatePath( diff --git a/src/shared/constants/route-names.ts b/src/shared/constants/route-names.ts index f3f34d5..f899bc3 100644 --- a/src/shared/constants/route-names.ts +++ b/src/shared/constants/route-names.ts @@ -92,7 +92,14 @@ export const ROUTE_NAMES = { requestRegister: 'request-register', resultInquiry: 'result-inquiry', }, - settlementAgency: 'settlement-agency', + settlementAgency: { + base: '/settlement-agency/*', + manage: 'manage', + deposit: 'deposit', + member: 'member', + register: 'register', + detail: 'detail', + }, paymentAgency: { base: '/payment-agency/*', list: 'list', diff --git a/src/shared/ui/menu/index.tsx b/src/shared/ui/menu/index.tsx index b6b5ca0..bd2ca64 100644 --- a/src/shared/ui/menu/index.tsx +++ b/src/shared/ui/menu/index.tsx @@ -90,7 +90,7 @@ export const Menu = ({ {title: '링크결제', path: PATHS.additionalService.linkPayment}, {title: '알림톡 결제통보', path: PATHS.additionalService.kakaoPaymentNotification.list}, {title: '자금이체', path: PATHS.additionalService.fundTransfer.requestList}, - {title: '정산대행', path: PATHS.additionalService.settlementAgency}, + {title: '정산대행', path: PATHS.additionalService.settlementAgency.manage}, {title: '지급대행', path: PATHS.additionalService.paymentAgency.list}, ] },