Add permission checks and localization to ARS pages
- Add grant check (52, 'D') to ARS list download button - Add grant check (52, 'X') to ARS payment request button - Add grant check (52, 'X') to ARS detail SMS resend button - Refactor inline onClick handlers to method references - Replace hardcoded Korean text with i18n translation keys in ARS detail page Changes: - ars/list-page: Add permission checks for download and payment request - ars/detail-page: Add permission check for SMS resend, localize all UI text Localized fields: - Page title, transaction info, payment method, payment status, order status - Order date/time, product name, order number, buyer, phone number, email - Verification code, SMS resend button and success/error messages 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jay Sheen
@@ -25,6 +25,8 @@ import { ArsResendSmsBottomSheet } from '@/entities/additional-service/ui/ars/re
|
||||
import { useExtensionArsResendMutation } from '@/entities/additional-service/api/ars/use-extension-ars-resend-mutation';
|
||||
import { getArsOrderStatusName, getArsPaymentStatusName } from '@/entities/additional-service/model/ars/constant';
|
||||
import { snackBar } from '@/shared/lib';
|
||||
import { checkGrant } from '@/shared/lib/check-grant';
|
||||
import { showAlert } from '@/widgets/show-alert';
|
||||
|
||||
export const ArsDetailPage = () => {
|
||||
const { t, i18n } = useTranslation();
|
||||
@@ -50,7 +52,7 @@ export const ArsDetailPage = () => {
|
||||
});
|
||||
};
|
||||
|
||||
useSetHeaderTitle('ARS 결제 상세');
|
||||
useSetHeaderTitle(t('additionalService.ars.detailTitle'));
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(false);
|
||||
useSetOnBack(() => {
|
||||
@@ -62,6 +64,10 @@ export const ArsDetailPage = () => {
|
||||
}, []);
|
||||
|
||||
const onClickToOpenResendBottomSheet = () => {
|
||||
if (!checkGrant(52, 'X')) {
|
||||
showAlert(t('common.nopermission'));
|
||||
return;
|
||||
}
|
||||
setBottomSheetOn(true);
|
||||
};
|
||||
|
||||
@@ -76,18 +82,18 @@ export const ArsDetailPage = () => {
|
||||
}
|
||||
extensionArsResend(params).then((rs: ExtensionArsResendResponse) => {
|
||||
if (rs.status) {
|
||||
snackBar("SMS 재전송을 성공하였습니다.");
|
||||
snackBar(t('additionalService.ars.smsResendSuccess'));
|
||||
setBottomSheetOn(false);
|
||||
callDetail(); // 상세 정보 갱신
|
||||
} else {
|
||||
const errorMessage = rs.error?.message || 'SMS 재전송이 실패하였습니다.';
|
||||
snackBar(`[실패] ${errorMessage}`);
|
||||
const errorMessage = rs.error?.message || t('additionalService.ars.smsResendFailed');
|
||||
snackBar(`[${t('common.failed')}] ${errorMessage}`);
|
||||
}
|
||||
}).catch((error) => {
|
||||
const errorMessage = error?.response?.data?.error?.message ||
|
||||
error?.message ||
|
||||
'SMS 재전송 중 오류가 발생했습니다.';
|
||||
snackBar(`[실패] ${errorMessage}`);
|
||||
t('additionalService.ars.smsResendError');
|
||||
snackBar(`[${t('common.failed')}] ${errorMessage}`);
|
||||
});
|
||||
};
|
||||
|
||||
@@ -107,52 +113,52 @@ export const ArsDetailPage = () => {
|
||||
</div>
|
||||
<div className="detail-divider"></div>
|
||||
<div className="pay-detail">
|
||||
<div className="detail-title">거래 정보</div>
|
||||
<div className="detail-title">{t('additionalService.ars.transactionInfo')}</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="k">{t('additionalService.ars.paymentMethod')}</span>
|
||||
<span className="v">{ detail?.arsPaymentMethod }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">결제상태</span>
|
||||
<span className="k">{t('additionalService.ars.paymentStatus')}</span>
|
||||
<span className="v">{ getArsPaymentStatusName(t)(detail?.paymentStatus) }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">주문상태</span>
|
||||
<span className="k">{t('additionalService.ars.orderStatus')}</span>
|
||||
<span className="v">{ getArsOrderStatusName(t)(detail?.orderStatus) }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">주문일시</span>
|
||||
<span className="v">{
|
||||
<span className="k">{t('additionalService.ars.orderDateTime')}</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="k">{t('additionalService.ars.productName')}</span>
|
||||
<span className="v">{ detail?.goodsName }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">주문번호</span>
|
||||
<span className="k">{t('additionalService.ars.orderNumber')}</span>
|
||||
<span className="v">{ detail?.tid }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">구매자</span>
|
||||
<span className="k">{t('additionalService.ars.buyer')}</span>
|
||||
<span className="v">{ detail?.buyerName }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">휴대폰번호</span>
|
||||
<span className="k">{t('additionalService.ars.phoneNumber')}</span>
|
||||
<span className="v">{ detail?.maskPhoneNumber }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">이메일</span>
|
||||
<span className="k">{t('additionalService.ars.email')}</span>
|
||||
<span className="v">{ detail?.email }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">발송 인증번호</span>
|
||||
<span className="k">{t('additionalService.ars.sendVerificationCode')}</span>
|
||||
<span className="v">{ detail?.smsVerificationCode }</span>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -161,9 +167,9 @@ export const ArsDetailPage = () => {
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={ () => onClickToOpenResendBottomSheet() }
|
||||
onClick={onClickToOpenResendBottomSheet}
|
||||
//disabled={ detail?.orderStatus !== OrderStatus.PENDING }
|
||||
>SMS 재전송</button>
|
||||
>{t('additionalService.ars.smsResend')}</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -26,6 +26,8 @@ import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access
|
||||
import useIntersectionObserver from '@/widgets/intersection-observer';
|
||||
import { ArsList } from '@/entities/additional-service/ui/ars/ars-list';
|
||||
import { ArsDetail } from '@/entities/additional-service/ui/ars/detail/ars-detail';
|
||||
import { checkGrant } from '@/shared/lib/check-grant';
|
||||
import { showAlert } from '@/widgets/show-alert';
|
||||
|
||||
export const ArsListPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
@@ -136,6 +138,10 @@ export const ArsListPage = () => {
|
||||
};
|
||||
|
||||
const onClickToOpenEmailBottomSheet = () => {
|
||||
if (!checkGrant(52, 'D')) {
|
||||
showAlert(t('common.nopermission'));
|
||||
return;
|
||||
}
|
||||
setEmailBottomSheetOn(true);
|
||||
};
|
||||
|
||||
@@ -170,6 +176,10 @@ export const ArsListPage = () => {
|
||||
};
|
||||
|
||||
const onClickToNavigate = () => {
|
||||
if (!checkGrant(52, 'X')) {
|
||||
showAlert(t('common.nopermission'));
|
||||
return;
|
||||
}
|
||||
navigate(PATHS.additionalService.ars.request, {
|
||||
state: { mid }
|
||||
});
|
||||
@@ -230,7 +240,7 @@ export const ArsListPage = () => {
|
||||
<button
|
||||
className="download-btn"
|
||||
aria-label={t('common.download')}
|
||||
onClick={() => onClickToOpenEmailBottomSheet()}
|
||||
onClick={onClickToOpenEmailBottomSheet}
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_download.svg'}
|
||||
@@ -272,7 +282,7 @@ export const ArsListPage = () => {
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={() => onClickToNavigate()}
|
||||
onClick={onClickToNavigate}
|
||||
>{t('additionalService.ars.paymentRequest')}</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user