From f2337e269d5090210d8593e8661822ca7ae17c1f Mon Sep 17 00:00:00 2001 From: "focp212@naver.com" Date: Wed, 24 Sep 2025 13:13:01 +0900 Subject: [PATCH] =?UTF-8?q?ars=20=EC=83=81=EC=84=B8=20,=20=EC=9A=94?= =?UTF-8?q?=EC=B2=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../additional-service/model/ars/constant.ts | 6 +- .../additional-service/model/ars/types.ts | 16 +- .../ui/ars/resend-sms-bottom-sheet.tsx | 6 + .../additional-service/ui/list-item.tsx | 5 +- .../additional-service/ars/detail-page.tsx | 137 +++++++++++++++++- .../additional-service/ars/request-page.tsx | 80 +++++++--- src/shared/ui/assets/css/style-fix.css | 3 + 7 files changed, 220 insertions(+), 33 deletions(-) create mode 100644 src/entities/additional-service/ui/ars/resend-sms-bottom-sheet.tsx diff --git a/src/entities/additional-service/model/ars/constant.ts b/src/entities/additional-service/model/ars/constant.ts index 01aa0fb..fdce979 100644 --- a/src/entities/additional-service/model/ars/constant.ts +++ b/src/entities/additional-service/model/ars/constant.ts @@ -1,4 +1,4 @@ -import { OrderStatus, PaymentStatus } from './types'; +import { ArsPaymentMethod, OrderStatus, PaymentStatus } from './types'; export const ArsPaymentStatusBtnGroup = [ {name: '전체', value: PaymentStatus.ALL }, @@ -11,4 +11,8 @@ export const ArsOrderStatusBtnGroup = [ {name: '결제성공', value: OrderStatus.SUCCESS }, {name: '기간만료', value: OrderStatus.EXPIRED }, {name: '취소완료', value: OrderStatus.CANCELED }, +]; +export const ArsPaymentMethodBtnGroup = [ + {name: 'SMS', value: ArsPaymentMethod.SMS }, + {name: 'ARS', value: ArsPaymentMethod.ARS }, ]; \ No newline at end of file diff --git a/src/entities/additional-service/model/ars/types.ts b/src/entities/additional-service/model/ars/types.ts index 3aeae7e..1250a4f 100644 --- a/src/entities/additional-service/model/ars/types.ts +++ b/src/entities/additional-service/model/ars/types.ts @@ -15,6 +15,10 @@ export enum OrderStatus { EXPIRED = 'EXPIRED', CANCELED = 'CANCELED', }; +export enum ArsPaymentMethod { + SMS = 'SMS', + ARS = 'ARS' +}; export interface ExtensionArsResendParams { mid: string; tid: string; @@ -34,9 +38,9 @@ export interface ExtensionArsListParams { export interface ArsListContent { tid?: string; paymentDate?: string; - paymentStatus?: string; + paymentStatus?: PaymentStatus | string; orderStatus?: string; - arsPaymentMethod?: string; + arsPaymentMethod?: ArsPaymentMethod; amount?: number; }; export interface ExtensionArsListResponse extends DefaulResponsePagination { @@ -47,7 +51,7 @@ export interface ExtensionArsDownloadExcelParams { moid?: string; fromDate?: string; toDate?: string; - paymentStatus?: string; + paymentStatus?: PaymentStatus; orderStatus?: string; minAmount?: number; maxAmount?: number; @@ -60,8 +64,8 @@ export interface ExtensionArsDetailParams { export interface ExtensionArsDetailResponse { corpName: string; mid: string; - arsPaymentMethod: string; - paymentStatus: string; + arsPaymentMethod: ArsPaymentMethod; + paymentStatus: PaymentStatus; orderStatus: string; paymentDate: string; goodsName: string; @@ -81,6 +85,6 @@ export interface ExtensionArsApplyParams { buyerName: string; phoneNumber: string; email: string; - arsPaymentMethod: string; + arsPaymentMethod: ArsPaymentMethod; }; export interface ExtensionArsApplyResponse {}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/ars/resend-sms-bottom-sheet.tsx b/src/entities/additional-service/ui/ars/resend-sms-bottom-sheet.tsx new file mode 100644 index 0000000..cedef50 --- /dev/null +++ b/src/entities/additional-service/ui/ars/resend-sms-bottom-sheet.tsx @@ -0,0 +1,6 @@ +export const ArsResendSmsBottomSheet = () => { + + return ( + <> + ); +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/list-item.tsx b/src/entities/additional-service/ui/list-item.tsx index 2a9313a..424734a 100644 --- a/src/entities/additional-service/ui/list-item.tsx +++ b/src/entities/additional-service/ui/list-item.tsx @@ -174,11 +174,12 @@ export const ListItem = ({ }); } else if (additionalServiceCategory === AdditionalServiceCategory.Ars){ - navigate(PATHS.additionalService.payout.detail, { + navigate(PATHS.additionalService.ars.detail, { state: { additionalServiceCategory: additionalServiceCategory, mid: mid, - tid: tid + tid: tid, + amount: amount } }); } diff --git a/src/pages/additional-service/ars/detail-page.tsx b/src/pages/additional-service/ars/detail-page.tsx index 43edcf1..e598c27 100644 --- a/src/pages/additional-service/ars/detail-page.tsx +++ b/src/pages/additional-service/ars/detail-page.tsx @@ -1,6 +1,141 @@ +import { PATHS } from '@/shared/constants/paths'; +import { useNavigate } from '@/shared/lib/hooks/use-navigate'; +import { HeaderType } from '@/entities/common/model/types'; +import { + useSetHeaderTitle, + useSetHeaderType, + useSetFooterMode, + useSetOnBack +} from '@/widgets/sub-layout/use-sub-layout'; +import { useLocation } from 'react-router'; +import { useEffect, useState } from 'react'; +import { NumericFormat } from 'react-number-format'; +import { useExtensionArsDetailMutation } from '@/entities/additional-service/api/ars/use-extension-ars-detail-mutation'; +import { + ExtensionArsDetailParams, + ExtensionArsDetailResponse +} from '@/entities/additional-service/model/ars/types'; +import moment from 'moment'; + export const ArsDetailPage = () => { + const { navigate } = useNavigate(); + const location = useLocation(); + + const tid = location.state.tid; + const mid = location.state.mid; + const amount = location.state.amount; + + const [detail, setDetail] = useState(); + + const { mutateAsync: extensionArsDetail } = useExtensionArsDetailMutation(); + const callDetail = () => { + let params: ExtensionArsDetailParams = { + tid: tid, + mid: mid, + }; + + extensionArsDetail(params).then((rs: ExtensionArsDetailResponse) => { + setDetail(rs); + }); + }; + + useSetHeaderTitle('ARS 결제 상세'); + useSetHeaderType(HeaderType.LeftArrow); + useSetFooterMode(false); + useSetOnBack(() => { + navigate(PATHS.additionalService.ars.list); + }); + + useEffect(() => { + callDetail(); + }, []); + + const onClickToOpenResendBottomSheet = () => { + + }; + + const getDate = (date?: string) => { + return (date)? moment(date.substr(0, 8)).format('YYYY.MM.DD'): ''; + }; return ( - <> + <> +
+
+
+
+
+ + + +
+
{ detail?.corpName }
+
{ getDate(detail?.paymentDate) }
+
+
+
+
거래 정보
+
    +
  • + MID + { detail?.mid } +
    • +
  • + 결제방식 + { detail?.arsPaymentMethod } +
    • +
  • + 결제상태 + { detail?.paymentStatus } +
    • +
  • + 주문상태 + { detail?.orderStatus } +
    • +
  • + 주문일시 + { getDate(detail?.paymentDate) } +
    • +
  • + 상품명 + { detail?.goodsName } +
    • +
  • + 주문번호 + { detail?.tid } +
    • +
  • + 구매자 + { detail?.buyerName } +
    • +
  • + 휴대폰번호 + { detail?.maskPhoneNumber } +
    • +
  • + 이메일 + { detail?.email } +
    • +
  • + 발송 인증번호 + { detail?.smsVerificationCode } +
    • +
+
+
+ +
+
+
+
+ ); }; \ No newline at end of file diff --git a/src/pages/additional-service/ars/request-page.tsx b/src/pages/additional-service/ars/request-page.tsx index 071da8f..eab202a 100644 --- a/src/pages/additional-service/ars/request-page.tsx +++ b/src/pages/additional-service/ars/request-page.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { ChangeEvent, useState } from 'react'; import { PATHS } from '@/shared/constants/paths'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { IMAGE_ROOT } from '@/shared/constants/common'; @@ -10,12 +10,23 @@ import { useSetFooterMode, useSetOnBack } from '@/widgets/sub-layout/use-sub-layout'; +import { ArsPaymentMethod, ExtensionArsApplyParams } from '@/entities/additional-service/model/ars/types'; export const ArsRequestPage = () => { const { navigate } = useNavigate(); const { mutateAsync: arsApply } = useExtensionArsApplyMutation(); + const [mid, setMid] = useState(''); + const [moid, setMoid] = useState(''); + const [goodsName, setGoodsName] = useState(''); + const [amount, setAmount] = useState(0); + const [instmntMonth, setInstmntMonth] = useState(''); + const [buyerName, setBuyerName] = useState(''); + const [phoneNumber, setPhoneNumber] = useState(''); + const [email, setEamil] = useState(''); + const [arsPaymentMethod, setArsPaymentMethod] = useState(ArsPaymentMethod.SMS); + useSetHeaderTitle('결제 신청'); useSetHeaderType(HeaderType.LeftArrow); useSetFooterMode(false); @@ -23,17 +34,17 @@ export const ArsRequestPage = () => { navigate(PATHS.additionalService.ars.list); }); - const callArsRequest = () => { - let arsApplyParams = { - mid: 'string', - moid: 'string', - goodsName: 'string', - amount: 0, - instmntMonth: '00', - buyerName: 'string', - phoneNumber: 'string', - email: 'string', - arsPaymentMethod: 'SMS', + const callArsApply = () => { + let arsApplyParams: ExtensionArsApplyParams = { + mid: mid, + moid: moid, + goodsName: goodsName, + amount: amount, + instmntMonth: instmntMonth, + buyerName: buyerName, + phoneNumber: phoneNumber, + email: email, + arsPaymentMethod: arsPaymentMethod, }; arsApply(arsApplyParams).then((rs) => { navigate(PATHS.additionalService.ars.requestSuccess); @@ -47,9 +58,29 @@ export const ArsRequestPage = () => { }; const onClickToRequest = () => { - callArsRequest(); + callArsApply(); }; + const getArsPaymentMethodBtns = () => { + let rs = []; + rs.push( +
+ + +
+ ); + return rs; + }; + return ( <>
@@ -73,7 +104,8 @@ export const ArsRequestPage = () => {
) => setMoid(e.target.value) } />
@@ -83,7 +115,8 @@ export const ArsRequestPage = () => {
) => setGoodsName(e.target.value) } />
@@ -93,7 +126,8 @@ export const ArsRequestPage = () => {
) => setAmount(parseInt(e.target.value)) } />
@@ -113,7 +147,8 @@ export const ArsRequestPage = () => {
) => setBuyerName(e.target.value) } />
@@ -123,7 +158,8 @@ export const ArsRequestPage = () => {
) => setPhoneNumber(e.target.value) } />
@@ -133,7 +169,8 @@ export const ArsRequestPage = () => {
) => setEamil(e.target.value) } />
@@ -141,10 +178,7 @@ export const ArsRequestPage = () => {
결제 방식 *
-
- - -
+ { getArsPaymentMethodBtns() }
diff --git a/src/shared/ui/assets/css/style-fix.css b/src/shared/ui/assets/css/style-fix.css index f0393cd..5ee4298 100644 --- a/src/shared/ui/assets/css/style-fix.css +++ b/src/shared/ui/assets/css/style-fix.css @@ -80,4 +80,7 @@ main { } .menu-category:last-of-type{ padding-bottom: 15px; +} +.billing-label{ + width: 85px; } \ No newline at end of file