nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

링크결제 분리승인 페이지 다국어 지원 추가

Browse Source 
- 분리승인 상세, 성공, 실패 페이지 현지화
- 기간연장 및 링크중단 기능 텍스트 번역
- 에러 메시지 및 안내 문구 다국어 적용
- 거래금액, 결제상태, 유효기간 등 레이블 현지화

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jay Sheen
2025-11-03 16:04:11 +09:00
parent 405b6f1e38
commit b0698248f1
5 changed files with 72 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/additional-service/link-payment/separate-approval/link-payment-separate-approval-fail.tsx
View File

@@ -1,4 +1,5 @@
import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { PATHS } from "@/shared/constants/paths";
import {
@@ -25,6 +26,7 @@ export const LinkPaymentApplyFailPage = ({
errorMessage,
onClose
}: LinkPaymentApplyFailPageProps) => {
const { t } = useTranslation();
const onClickToClose = () => {
setPageOn(false);
@@ -51,7 +53,7 @@ export const LinkPaymentApplyFailPage = ({
aria-hidden="true"
></div>
<h1 className="success-title">
<span>링크결제_분리승인</span>
<span>{t('additionalService.linkPayment.separateApproval')}</span>
</h1>
{resultMessage && (
@@ -62,8 +64,8 @@ export const LinkPaymentApplyFailPage = ({
<div className="success-result">
<p className="result-text align-left position_label">
<span>결과 :</span>
<span>{errorMessage || '다시 시도해 주세요'}</span>
<span>{t('common.result')} :</span>
<span>{errorMessage || t('additionalService.linkPayment.pleaseRetry')}</span>
</p>
</div>
</div>
@@ -71,7 +73,7 @@ export const LinkPaymentApplyFailPage = ({
<button
className="btn-50 btn-blue flex-1"
onClick={onClickToClose}
>확인</button>
>{t('common.confirm')}</button>
</div>
</div>
</div>

42
src/pages/additional-service/link-payment/separate-approval/link-payment-separate-approval-page.tsx
View File

@@ -1,4 +1,5 @@
import { useEffect, useState, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { PATHS } from '@/shared/constants/paths';
import { useLocation } from 'react-router';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
@@ -20,6 +21,7 @@ import { useStore } from '@/shared/model/store';
import moment from 'moment';
export const LinkPaymentSeparateApprovalPage = () => {
const { t } = useTranslation();
const { navigate } = useNavigate();
const location = useLocation();
const userMid = useStore.getState().UserStore.mid;
@@ -43,7 +45,7 @@ export const LinkPaymentSeparateApprovalPage = () => {
const { mutateAsync: callItems } = useExtensionLinkPaySeparateDetail();
const { mutateAsync: linkPaySeparateAction } = useExtensionLinkPaySeparateAction();
useSetHeaderTitle('분리승인 상세');
useSetHeaderTitle(t('additionalService.linkPayment.separateApprovalTitle'));
useSetHeaderType(HeaderType.RightClose);
useSetOnBack(() => {
navigate(PATHS.additionalService.linkPayment.shippingHistory);
@@ -189,7 +191,7 @@ export const LinkPaymentSeparateApprovalPage = () => {
// 선택된 항목이 없으면 리턴
if (selectedItems.length === 0) {
setErrorMessage('선택된 항목이 없습니다.');
setErrorMessage(t('additionalService.linkPayment.noItemsSelected'));
setFailPageOn(true);
return;
}
@@ -203,7 +205,7 @@ export const LinkPaymentSeparateApprovalPage = () => {
const allHaveExtendPeriod = selectedSubItems.every(id => extendPeriods[id]);
if (!allHaveExtendPeriod) {
setErrorMessage('모든 선택된 항목의 연장 기간을 선택해주세요.');
setErrorMessage(t('additionalService.linkPayment.pleaseSelectExtendPeriod'));
setFailPageOn(true);
return;
}
@@ -237,16 +239,16 @@ export const LinkPaymentSeparateApprovalPage = () => {
setTotalCount(response.totalCount);
if (response.success) {
setResultMessage(`전체요청 성공했습니다.`);
setResultMessage(t('additionalService.linkPayment.allRequestSuccess'));
setSuccessPageOn(true);
} else {
setResultMessage(`유효기간 연장에 실패했습니다. 개별 상태를 확인해주세요.`);
setResultMessage(t('additionalService.linkPayment.extendPeriodFailed'));
setErrorMessage('');
setFailPageOn(true);
}
}).catch((error) => {
console.error('기간연장 실패:', error);
setResultMessage('유효기간 연장에 실패했습니다.');
setResultMessage(t('additionalService.linkPayment.extendPeriodFailedGeneric'));
setFailPageOn(true);
});
};
@@ -257,7 +259,7 @@ export const LinkPaymentSeparateApprovalPage = () => {
// 선택된 항목이 없으면 리턴
if (selectedItems.length === 0) {
setErrorMessage('선택된 항목이 없습니다.');
setErrorMessage(t('additionalService.linkPayment.noItemsSelected'));
setFailPageOn(true);
return;
}
@@ -287,16 +289,16 @@ export const LinkPaymentSeparateApprovalPage = () => {
setFailCount(response.failCount);
setTotalCount(response.totalCount);
if (response.success) {
setResultMessage(`전체요청 성공했습니다.`);
setResultMessage(t('additionalService.linkPayment.allRequestSuccess'));
setSuccessPageOn(true);
} else {
setResultMessage('링크중단 요청에 실패했습니다. 개별 상태를 확인해주세요.');
setResultMessage(t('additionalService.linkPayment.linkBreakFailed'));
setErrorMessage('');
setFailPageOn(true);
}
}).catch((error) => {
console.error('링크중단 실패:', error);
setResultMessage('링크중단 요청에 실패했습니다.');
setResultMessage(t('additionalService.linkPayment.linkBreakFailedGeneric'));
setFailPageOn(true);
});
};
@@ -334,8 +336,8 @@ export const LinkPaymentSeparateApprovalPage = () => {
<div className="tab-pane sub active">
<div className="separate-approval-section">
<div className="approval-notice-box">
<p>※ 연장 기간: 최대 7일, 총 3번 연장 가능</p>
<p>※ 링크 중단: 유효기간 전, 결제를 마감하는 기능, 링크중단 시 원복 불가</p>
<p>{t('additionalService.linkPayment.extendPeriodNotice')}</p>
<p>{t('additionalService.linkPayment.linkBreakNotice')}</p>
</div>
<div className="approval-cards-wrapper">
@@ -360,17 +362,17 @@ export const LinkPaymentSeparateApprovalPage = () => {
<div className="card-body">
<ul className="info-list">
<li>
<span className="label">• 거래금액:</span>
<span className="label">• {t('additionalService.linkPayment.transactionAmount')}:</span>
<span className="value">{item.amount.toLocaleString()}</span>
</li>
<li>
<span className="label">• 결제상태:</span>
<span className="label">• {t('additionalService.linkPayment.paymentStatus')}:</span>
<span className="value">{item.paymentStatusName}</span>
</li>
{item.type !== LinkPaymentSeparateType.MAIN && (
<>
<li>
<span className="label">• 유효기간:</span>
<span className="label">• {t('additionalService.linkPayment.validityPeriod')}:</span>
<span className="value">
{item.paymentLimitDate
? moment(item.paymentLimitDate, 'YYYYMMDD').format('YYYY/MM/DD')
@@ -379,7 +381,7 @@ export const LinkPaymentSeparateApprovalPage = () => {
</span>
</li>
<li>
<span className="label">• 연장횟수:</span>
<span className="label">• {t('additionalService.linkPayment.extendCount')}:</span>
<span className="value">{item.paymentLimitCount}</span>
</li>
</>
@@ -388,7 +390,7 @@ export const LinkPaymentSeparateApprovalPage = () => {
</div>
<div className="card-footer">
<div className="period-selector">
<label>연장기간</label>
<label>{t('additionalService.linkPayment.extendPeriod')}</label>
<select
value={extendPeriods[itemId] || ''}
onChange={(e) => handleExtendPeriodChange(itemId, e.target.value)}
@@ -399,7 +401,7 @@ export const LinkPaymentSeparateApprovalPage = () => {
? '-'
: !canExtendPeriod(item)
? '-'
: '미설정'}
: t('additionalService.linkPayment.unset')}
</option>
{canExtendPeriod(item) && [1, 2, 3, 4, 5, 6, 7].map(days => {
const baseDate = moment(item.paymentLimitDate, 'YYYYMMDD');
@@ -420,13 +422,13 @@ export const LinkPaymentSeparateApprovalPage = () => {
className="btn-50 btn-blue flex-1"
onClick={onClickToValidityPeriod}
disabled={!isExtendButtonEnabled()}
>기간연장
>{t('additionalService.linkPayment.extendPeriodAction')}
</button>
<button
className="btn-50 btn-blue flex-1"
onClick={onClickToSendLink}
disabled={!isLinkBreadkEnabled()}
>링크중단
>{t('additionalService.linkPayment.linkBreakAction')}
</button>
</div>
</div>

10
src/pages/additional-service/link-payment/separate-approval/link-payment-separate-approval-success-page.tsx
View File

@@ -1,4 +1,5 @@
import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import {
FilterMotionDuration,
FilterMotionStyle,
@@ -24,6 +25,7 @@ export const LinkPaymentApplySuccessPage = ({
totalCount,
onClose
}: LinkPaymentApplySuccessPageProps) => {
const { t } = useTranslation();
const onClickToClose = () => {
setPageOn(false);
@@ -50,13 +52,13 @@ export const LinkPaymentApplySuccessPage = ({
aria-hidden="true"
></div>
<h1 className="success-title">
<span>링크결제_분리승인</span>
<span>{t('additionalService.linkPayment.separateApproval')}</span>
</h1>
<div className="success-result">
<p className="result-text align-left position_label">
<span>결과 :</span>
<span>{resultMessage || '전체요청 성공했습니다.'}</span>
<span>{t('common.result')} :</span>
<span>{resultMessage || t('additionalService.linkPayment.allRequestSuccess')}</span>
</p>
</div>
</div>
@@ -64,7 +66,7 @@ export const LinkPaymentApplySuccessPage = ({
<button
className="btn-50 btn-blue flex-1"
onClick={onClickToClose}
>확인</button>
>{t('common.confirm')}</button>
</div>
</div>
</div>