Refactor additional service pages and add localization
- ARS 페이지 컴포넌트 분리 및 리팩토링 - SMS 재전송 성공/실패 snackBar 추가 - 부가서비스 페이지 다국어(i18n) 적용 - 계좌명의인증 리스트 UI 개선 - 라우트 경로 상수 정리 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
HyeonJongKim
187
src/entities/additional-service/ui/ars/detail/ars-detail.tsx
Normal file
187
src/entities/additional-service/ui/ars/detail/ars-detail.tsx
Normal file
@@ -0,0 +1,187 @@
|
||||
import moment from 'moment';
|
||||
import { motion } from 'framer-motion';
|
||||
import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { getArsOrderStatusName, getArsPaymentStatusName } from '@/entities/additional-service/model/ars/constant';
|
||||
import { ArsPaymentMethod, ExtensionArsDetailParams, ExtensionArsDetailResponse, ExtensionArsResendParams, ExtensionArsResendResponse } from "@/entities/additional-service/model/ars/types";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
|
||||
import { useExtensionArsDetailMutation } from '@/entities/additional-service/api/ars/use-extension-ars-detail-mutation';
|
||||
import { useExtensionArsResendMutation } from '@/entities/additional-service/api/ars/use-extension-ars-resend-mutation';
|
||||
import { snackBar } from '@/shared/lib';
|
||||
import { ArsResendSmsBottomSheet } from '../resend-sms-bottom-sheet';
|
||||
|
||||
export interface ArsDetailProps {
|
||||
detailOn: boolean;
|
||||
setDetailOn: (detailOn: boolean) => void;
|
||||
mid: string;
|
||||
tid: string;
|
||||
};
|
||||
|
||||
export const ArsDetail = ({
|
||||
detailOn,
|
||||
setDetailOn,
|
||||
mid,
|
||||
tid
|
||||
}: ArsDetailProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [detail, setDetail] = useState<ExtensionArsDetailResponse>();
|
||||
const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
|
||||
|
||||
const { mutateAsync: extensionArsDetail } = useExtensionArsDetailMutation();
|
||||
const { mutateAsync: extensionArsResend } = useExtensionArsResendMutation();
|
||||
|
||||
const callDetail = () => {
|
||||
let arsDetailParams: ExtensionArsDetailParams = {
|
||||
mid: mid,
|
||||
tid: tid
|
||||
};
|
||||
extensionArsDetail(arsDetailParams).then((rs: ExtensionArsDetailResponse) => {
|
||||
setDetail(rs);
|
||||
});
|
||||
}
|
||||
|
||||
const arsResend = () => {
|
||||
let arsResendParams: ExtensionArsResendParams = {
|
||||
mid: mid,
|
||||
tid: tid
|
||||
};
|
||||
extensionArsResend(arsResendParams).then((rs: ExtensionArsResendResponse) => {
|
||||
if (rs.status) {
|
||||
snackBar("SMS 재전송을 성공하였습니다.");
|
||||
setBottomSheetOn(false);
|
||||
callDetail(); // 상세 정보 갱신
|
||||
} else {
|
||||
const errorMessage = rs.error?.message || 'SMS 재전송이 실패하였습니다.';
|
||||
snackBar(`[실패] ${errorMessage}`);
|
||||
}
|
||||
}).catch((error) => {
|
||||
const errorMessage = error?.response?.data?.error?.message ||
|
||||
error?.message ||
|
||||
'SMS 재전송 중 오류가 발생했습니다.';
|
||||
snackBar(`[실패] ${errorMessage}`);
|
||||
});
|
||||
}
|
||||
|
||||
const onClickToOpenResendBottomSheet = () => {
|
||||
setBottomSheetOn(true);
|
||||
};
|
||||
const onClickToClose = () => {
|
||||
setDetailOn(false);
|
||||
};
|
||||
|
||||
const getDate = (date?: string) => {
|
||||
return (date) ? moment(date.substr(0, 8)).format('YYYY.MM.DD') : '';
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!!mid && !!tid) {
|
||||
callDetail();
|
||||
}
|
||||
}, [mid, tid]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
className="full-menu-modal"
|
||||
initial="hidden"
|
||||
animate={(detailOn) ? 'visible' : 'hidden'}
|
||||
variants={DetailMotionVariants}
|
||||
transition={DetailMotionDuration}
|
||||
style={DetailMotionStyle}
|
||||
>
|
||||
<div className="full-menu-container pdw-16">
|
||||
<div className="full-menu-header">
|
||||
<div className="full-menu-title center">{'ARS 결제 상세'}</div>
|
||||
<div className="full-menu-actions">
|
||||
<FullMenuClose
|
||||
addClass="full-menu-close"
|
||||
onClickToCallback={onClickToClose}
|
||||
></FullMenuClose>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tab-pane sub active">
|
||||
<div className="pay-top">
|
||||
<div className="num-amount">
|
||||
<span className="amount">
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(Number(detail?.amount) || 0) })}
|
||||
</span>
|
||||
</div>
|
||||
<div className="num-store">{detail?.corpName}</div>
|
||||
<div className="num-day">{getDate(detail?.paymentDate)}</div>
|
||||
</div>
|
||||
<div className="detail-divider"></div>
|
||||
<div className="pay-detail">
|
||||
<div className="detail-title">거래 정보</div>
|
||||
<ul className="kv-list">
|
||||
<li className="kv-row">
|
||||
<span className="k">MID</span>
|
||||
<span className="v">{detail?.mid}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">결제방식</span>
|
||||
<span className="v">{detail?.arsPaymentMethod}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">결제상태</span>
|
||||
<span className="v">{getArsPaymentStatusName(t)(detail?.paymentStatus)}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">주문상태</span>
|
||||
<span className="v">{getArsOrderStatusName(t)(detail?.orderStatus)}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">주문일시</span>
|
||||
<span className="v">{
|
||||
detail?.paymentDate ? moment(detail.paymentDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '-'
|
||||
}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">상품명</span>
|
||||
<span className="v">{detail?.goodsName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">주문번호</span>
|
||||
<span className="v">{detail?.tid}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">구매자</span>
|
||||
<span className="v">{detail?.buyerName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">휴대폰번호</span>
|
||||
<span className="v">{detail?.maskPhoneNumber}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">이메일</span>
|
||||
<span className="v">{detail?.email}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">발송 인증번호</span>
|
||||
<span className="v">{detail?.smsVerificationCode}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{detail?.arsPaymentMethod === ArsPaymentMethod.SMS && (
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={() => onClickToOpenResendBottomSheet()}
|
||||
//disabled={ detail?.orderStatus !== OrderStatus.PENDING }
|
||||
>SMS 재전송</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ArsResendSmsBottomSheet
|
||||
setBottomSheetOn={setBottomSheetOn}
|
||||
bottomSheetOn={bottomSheetOn}
|
||||
phoneNumber={detail?.phoneNumber}
|
||||
callResendSms={arsResend}
|
||||
></ArsResendSmsBottomSheet>
|
||||
</motion.div>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user