diff --git a/src/entities/additional-service/api/use-extension-keyin-apply-mutation.ts b/src/entities/additional-service/api/use-extension-keyin-apply-mutation.ts index 31f7950..66f9c21 100644 --- a/src/entities/additional-service/api/use-extension-keyin-apply-mutation.ts +++ b/src/entities/additional-service/api/use-extension-keyin-apply-mutation.ts @@ -17,7 +17,7 @@ export const extensionKeyinApply = (params: ExtensionKeyinApplyParams) => { ); }; -export const useExtensionKeyinListMutation = (options?: UseMutationOptions) => { +export const useExtensionKeyinApplyMutation = (options?: UseMutationOptions) => { const mutation = useMutation({ ...options, mutationFn: (params: ExtensionKeyinApplyParams) => extensionKeyinApply(params), diff --git a/src/pages/additional-service/additional-service-pages.tsx b/src/pages/additional-service/additional-service-pages.tsx index c933d6a..0657885 100644 --- a/src/pages/additional-service/additional-service-pages.tsx +++ b/src/pages/additional-service/additional-service-pages.tsx @@ -29,6 +29,8 @@ import { LinkPaymentApplyConfirmPage } from './link-payment/apply/link-payment-a import { LinkPaymentApplySuccessPage } from './link-payment/apply/link-payment-apply-success-page'; import { LinkPaymentDetailPage } from './link-payment/link-payment-detail-page'; import { LinkPaymentPendingDetailPage } from './link-payment/link-payment-pending-detail-page'; +import { KeyInPaymentRequestPage } from './key-in-payment/requeset-page'; +import { KeyInPaymentRequestSuccessPage } from './key-in-payment/request-success-page'; export const AdditionalServicePages = () => { return ( @@ -41,7 +43,11 @@ export const AdditionalServicePages = () => { } /> } /> - } /> + + } /> + } /> + } /> + } /> } /> } /> diff --git a/src/pages/additional-service/intro/intro-page.tsx b/src/pages/additional-service/intro/intro-page.tsx index 63ce7d2..12cd1d1 100644 --- a/src/pages/additional-service/intro/intro-page.tsx +++ b/src/pages/additional-service/intro/intro-page.tsx @@ -31,7 +31,7 @@ export const IntroPage = () => { }, { className: 'list-wrap01', serviceName: 'KEY-IN 결제', serviceDesc: '상담 중 카드정보 입력으로 간편한 결제 지원', - icon: IMAGE_ROOT + '/icon_ing02.svg', path: PATHS.additionalService.keyInPayment + icon: IMAGE_ROOT + '/icon_ing02.svg', path: PATHS.additionalService.keyInPayment.list }, { className: 'list-wrap01', serviceName: '계좌성명조회', serviceDesc: '예금주 정보 입력으로 즉시 예금주 확인', diff --git a/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx b/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx index 443e3aa..d4b9080 100644 --- a/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx +++ b/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx @@ -1,18 +1,156 @@ +import { useState } from 'react'; +import { IMAGE_ROOT } from '@/shared/constants/common'; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { HeaderType } from '@/entities/common/model/types'; -import { - useSetHeaderTitle, - useSetHeaderType, - useSetFooterMode +import { + useSetHeaderTitle, + useSetHeaderType, + useSetFooterMode } from '@/widgets/sub-layout/use-sub-layout'; +import { PATHS } from '@/shared/constants/paths'; export const KeyInPaymentPage = () => { + const { navigate } = useNavigate(); + useSetHeaderTitle('KEY-IN 결제'); useSetHeaderType(HeaderType.LeftArrow); - useSetFooterMode(true); + useSetFooterMode(false); + + const onClickToNavigation = () => { + navigate(PATHS.additionalService.keyInPayment.request) + } return ( <> - +
+
+
+
+
+
+ + +
+ +
+
+ +
+
+ + | + +
+
+
+ 전체 + 승인 + 전취소 + 후취소 +
+
+
+ +
+
+
2025.06.08(일)
+ +
+
+
+
+
+
김*환(7000)
+
+ 20:00ㅣ승인 +
+
+
5,254,000원
+
+ +
+
+
+
+
+
최*길(7000)
+
+ 08:35ㅣ승인 +
+
+
23,845,000원
+
+ +
+
+
+
+
+
김*환(7000)
+
+ 20:00ㅣ승인 +
+
+
5,254,000원
+
+ +
+
+
+
+
+
김*환(7000)
+
+ 20:00ㅣ후취소 +
+
+
5,254,000원
+
+ +
+
+
+
+
+
최*길(7000)
+
+ 20:00ㅣ후취소 +
+
+
23,845,000원
+
+
+
+
+ +
+
+
+
); }; \ No newline at end of file diff --git a/src/pages/additional-service/key-in-payment/requeset-page.tsx b/src/pages/additional-service/key-in-payment/requeset-page.tsx new file mode 100644 index 0000000..f643721 --- /dev/null +++ b/src/pages/additional-service/key-in-payment/requeset-page.tsx @@ -0,0 +1,210 @@ +import { useState } from 'react'; +import { PATHS } from '@/shared/constants/paths'; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; +import { IMAGE_ROOT } from '@/shared/constants/common'; +import { HeaderType } from '@/entities/common/model/types'; +import { useExtensionKeyinApplyMutation } from '@/entities/additional-service/api/use-extension-keyin-apply-mutation'; +import { + useSetHeaderTitle, + useSetHeaderType, + useSetFooterMode, + useSetOnBack +} from '@/widgets/sub-layout/use-sub-layout'; +import { number } from 'framer-motion'; + +export const KeyInPaymentRequestPage = () => { + const { navigate } = useNavigate(); + + const { mutateAsync: keyInApply } = useExtensionKeyinApplyMutation(); + + useSetHeaderTitle('KEY-IN 결제'); + useSetHeaderType(HeaderType.LeftArrow); + useSetFooterMode(false); + useSetOnBack(() => { + navigate(PATHS.additionalService.keyInPayment.list); + }); + + const callKeyInPaymentRequest = () => { + let keyInApplyParams = { + mid: 'string', + goodsName: 'string', + amount: 0, + buyerName: 'string', + email: 'string', + phoneNumber: 'string', + cardNo: 'string', + cardExpirationDate: 'string', + instmntMonth: 'string', + moid: 'SMS', + }; + keyInApply(keyInApplyParams).then((rs) => { + navigate(PATHS.additionalService.arsCardPayment.requestSuccess); + console.log(rs) + }).catch(() => { + + }).finally(() => { + + }); + + }; + + const [formData, setFormData] = useState({ + mid: 'nictest001m', + goodsName: '', + amount: 0 + }); + const handleInputChange = (field: string, value: string) => { + setFormData(prev => ({ + ...prev, + [field]: value + })); + }; + + const onClickToRequest = () => { + callKeyInPaymentRequest(); + }; + + return ( + <> +
+
+
+
+
+
+
가맹점 *
+
+ +
+
+ +
+
상품명 *
+
+ +
+
+ +
+
상품가격 *
+
+ +
+
+ +
+
구매자명 *
+
+ +
+
+ +
+
구매자 이메일 *
+
+ +
+
+ +
+
구매자 전화번호 *
+
+ +
+
+ +
+
카드번호 *
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
유효기간(월/년)*
+
+ +
+
+ +
+
할부 기간*
+
+ +
+
+ +
+
주문번호
+
+ +
+
+
+
+
+ +
+
+
+
+ + ) +} \ No newline at end of file diff --git a/src/pages/additional-service/key-in-payment/request-success-page.tsx b/src/pages/additional-service/key-in-payment/request-success-page.tsx new file mode 100644 index 0000000..749efd8 --- /dev/null +++ b/src/pages/additional-service/key-in-payment/request-success-page.tsx @@ -0,0 +1,43 @@ +import { PATHS } from '@/shared/constants/paths'; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; +import { HeaderType } from '@/entities/common/model/types'; +import { + useSetHeaderType, + useSetFooterMode, +} from '@/widgets/sub-layout/use-sub-layout'; +export const KeyInPaymentRequestSuccessPage = () => { + const { navigate } = useNavigate(); + + useSetHeaderType(HeaderType.NoHeader); + useSetFooterMode(false); + + const onClickToNavigate = () => { + navigate(PATHS.additionalService.keyInPayment.list); + }; + + return ( + <> +
+
+ +

+ KEY-IN 결제
+ 결제 신청이 완료되었습니다. +

+
+

결과 : [0000] ARS 요청 처리 완료

+
+
+
+ +
+
+ + ); +}; \ No newline at end of file diff --git a/src/pages/additional-service/link-payment/link-payment-dispatch-list-page.tsx b/src/pages/additional-service/link-payment/link-payment-dispatch-list-page.tsx index f24348c..f5dda5f 100644 --- a/src/pages/additional-service/link-payment/link-payment-dispatch-list-page.tsx +++ b/src/pages/additional-service/link-payment/link-payment-dispatch-list-page.tsx @@ -13,6 +13,9 @@ import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout'; +/** + * 발송내역 탭 화면 + */ export const LinkPaymentDispatchListPage = () => { const { navigate } = useNavigate(); diff --git a/src/pages/additional-service/link-payment/link-payment-pending-send-page.tsx b/src/pages/additional-service/link-payment/link-payment-pending-send-page.tsx index 23ce553..c88c57f 100644 --- a/src/pages/additional-service/link-payment/link-payment-pending-send-page.tsx +++ b/src/pages/additional-service/link-payment/link-payment-pending-send-page.tsx @@ -14,6 +14,9 @@ import { } from '@/widgets/sub-layout/use-sub-layout'; import { LinkPaymentFilter } from '@/entities/additional-service/ui/link-payment/link-payment-filter'; +/** + * 발송대기 탭 화면 + */ export const LinkPaymentPendingSendPage = () => { const { navigate } = useNavigate(); diff --git a/src/shared/constants/paths.ts b/src/shared/constants/paths.ts index 139eb0b..b59b465 100644 --- a/src/shared/constants/paths.ts +++ b/src/shared/constants/paths.ts @@ -157,7 +157,21 @@ export const PATHS: RouteNamesType = { ROUTE_NAMES.additionalService.arsCardPayment.requestSuccess, ), }, - keyInPayment: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.keyInPayment), + keyInPayment: { + base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.keyInPayment.base}`), + list: generatePath( + `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.keyInPayment.base}`, + ROUTE_NAMES.additionalService.keyInPayment.list + ), + request: generatePath( + `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.keyInPayment.base}`, + ROUTE_NAMES.additionalService.keyInPayment.request, + ), + requestSuccess: generatePath( + `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.keyInPayment.base}`, + ROUTE_NAMES.additionalService.keyInPayment.requestSuccess, + ), + }, smsPaymentNotification: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.smsPaymentNotification), accountHolderSearch: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.accountHolderSearch), accountHolderAuth: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.accountHolderAuth), diff --git a/src/shared/constants/route-names.ts b/src/shared/constants/route-names.ts index 4478733..59ab87b 100644 --- a/src/shared/constants/route-names.ts +++ b/src/shared/constants/route-names.ts @@ -76,7 +76,12 @@ export const ROUTE_NAMES = { request: 'request', requestSuccess: 'request-success', }, - keyInPayment: 'key-in-payment', + keyInPayment: { + base: '/key-in-payment/*', + list: 'list', + request: 'request', + requestSuccess: 'request-success', + }, smsPaymentNotification: 'sms-payment-notification', accountHolderSearch: 'account-holder-search', accountHolderAuth: 'account-holder-auth', diff --git a/src/shared/ui/menu/index.tsx b/src/shared/ui/menu/index.tsx index d520820..45874a6 100644 --- a/src/shared/ui/menu/index.tsx +++ b/src/shared/ui/menu/index.tsx @@ -83,7 +83,7 @@ export const Menu = ({ items: [ {title: '부가서비스소개', path: PATHS.additionalService.intro}, {title: 'ARS 카드결제', path: PATHS.additionalService.arsCardPayment.list}, - {title: 'KEY-IN 결제', path: PATHS.additionalService.keyInPayment}, + {title: 'KEY-IN 결제', path: PATHS.additionalService.keyInPayment.list}, {title: 'SMS 결제 통보', path: PATHS.additionalService.smsPaymentNotification}, {title: '계좌성명조회', path: PATHS.additionalService.accountHolderSearch}, {title: '계좌점유인증', path: PATHS.additionalService.accountHolderAuth},