부가서비스 페이지 및 컴포넌트 다국어화 완료

- 부가서비스 메인 페이지 다국어화
  * 헤더 타이틀, 사용중인 서비스/신청 가능한 서비스 섹션
  * 비활성 서비스 안내 메시지
- 부가서비스 공통 컴포넌트 다국어화
  * list-item: 11개 서비스의 상태 라벨 (성공, 실패, 요청, 재발송)
  * title-info-wrap: 서비스 정보 표시
- 정산대행 페이지 다국어화 (5개 페이지)
  * 관리, 입금, 회원, 상세 페이지 헤더
  * 상세 페이지: 입금 확인, 정산 정보, 수수료 정보 등 17개 필드
  * 상태 변경 이력: 출금 실패, 동의 완료, 동의 만료 등
- 서비스별 상세 페이지 통화 표기 개선 (4개 페이지)
  * ARS, 펀드계좌(이체/결과), 페이아웃 상세 페이지
- 전체 통화 표기 통일 (11개 인스턴스)
  * 한국어: 100,000원 (suffix)
  * 영어: ₩100,000 (prefix)
- 번역 키 추가: additionalService 네임스페이스 51+ 키
  * 공통 상태 라벨, 11개 서비스명 및 설명
  * 정산대행 전용 21개 키
- 지원 서비스: SMS결제, ARS결제, KEY-IN결제, 계좌조회/인증,
  페이아웃, 정산대행, 링크결제, 펀드계좌, 알림톡, 안면인증

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jay Sheen
2025-10-29 18:22:09 +09:00
parent 3f0ab49a3d
commit f0a157b2c3
13 changed files with 217 additions and 60 deletions

View File

@@ -1,5 +1,6 @@
import moment from 'moment'; import moment from 'moment';
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
import { AdditionalServiceCategory, DetailInfoSectionKeys } from '../../model/types'; import { AdditionalServiceCategory, DetailInfoSectionKeys } from '../../model/types';
import { DetailInfoSectionProps } from '../../model/types'; import { DetailInfoSectionProps } from '../../model/types';
@@ -8,6 +9,7 @@ export const TitleInfoWrap = ({
titleInfo, titleInfo,
onClickToShowInfo onClickToShowInfo
}: DetailInfoSectionProps) => { }: DetailInfoSectionProps) => {
const { t, i18n } = useTranslation();
const onClickToSetShowInfo = () => { const onClickToSetShowInfo = () => {
if (!!onClickToShowInfo) { if (!!onClickToShowInfo) {
@@ -49,7 +51,8 @@ export const TitleInfoWrap = ({
value={titleInfo?.amount} value={titleInfo?.amount}
thousandSeparator thousandSeparator
displayType="text" displayType="text"
suffix={''} prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat> ></NumericFormat>
</span> </span>
</div> </div>
@@ -66,7 +69,8 @@ export const TitleInfoWrap = ({
value={titleInfo?.amount} value={titleInfo?.amount}
thousandSeparator thousandSeparator
displayType="text" displayType="text"
suffix={''} prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat> ></NumericFormat>
</span> </span>
</div> </div>

View File

@@ -1,4 +1,5 @@
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
import { PATHS } from '@/shared/constants/paths'; import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { ListItemProps, AdditionalServiceCategory } from '../model/types'; import { ListItemProps, AdditionalServiceCategory } from '../model/types';
@@ -36,6 +37,7 @@ export const ListItem = ({
onResendClick onResendClick
}: ListItemProps) => { }: ListItemProps) => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const { t, i18n } = useTranslation();
const getItemClass = () => { const getItemClass = () => {
let rs = ''; let rs = '';
if (paymentStatus === '') { if (paymentStatus === '') {
@@ -532,19 +534,19 @@ export const ListItem = ({
if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) { if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
rs.push( rs.push(
<div className={`status-label ${resultStatus === 'SUCCESS' ? 'success' : 'fail'}`}> <div className={`status-label ${resultStatus === 'SUCCESS' ? 'success' : 'fail'}`}>
{resultStatus === 'SUCCESS' ? '성공' : '실패'} {resultStatus === 'SUCCESS' ? t('additionalService.common.success') : t('additionalService.common.fail')}
</div> </div>
); );
} }
else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) { else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
rs.push( rs.push(
<div className={`status-label ${authResult === 'SUCCESS' ? 'success' : 'fail'}`}> <div className={`status-label ${authResult === 'SUCCESS' ? 'success' : 'fail'}`}>
{authResult === 'SUCCESS' ? '성공' : '실패'} {authResult === 'SUCCESS' ? t('additionalService.common.success') : t('additionalService.common.fail')}
</div> </div>
); );
} }
else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) { else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
const statusText = authStatus === 'REQUEST' ? '요청' : authStatus === 'SUCCESS' ? '성공' : '실패'; const statusText = authStatus === 'REQUEST' ? t('additionalService.common.request') : authStatus === 'SUCCESS' ? t('additionalService.common.success') : t('additionalService.common.fail');
const statusClass = authStatus === 'SUCCESS' || 'REQUEST' ? 'success' : 'fail'; const statusClass = authStatus === 'SUCCESS' || 'REQUEST' ? 'success' : 'fail';
rs.push( rs.push(
<div className={`status-label ${statusClass}`}> <div className={`status-label ${statusClass}`}>
@@ -559,7 +561,8 @@ export const ListItem = ({
value={amount} value={amount}
thousandSeparator thousandSeparator
displayType="text" displayType="text"
suffix='원' prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat> ></NumericFormat>
</div> </div>
); );
@@ -573,7 +576,8 @@ export const ListItem = ({
value={amount} value={amount}
thousandSeparator thousandSeparator
displayType="text" displayType="text"
suffix='원' prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat> ></NumericFormat>
</div> </div>
); );
@@ -588,7 +592,8 @@ export const ListItem = ({
value={amount} value={amount}
thousandSeparator thousandSeparator
displayType="text" displayType="text"
suffix='원' prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat> ></NumericFormat>
</div> </div>
); );
@@ -605,7 +610,8 @@ export const ListItem = ({
value={amount} value={amount}
thousandSeparator thousandSeparator
displayType="text" displayType="text"
suffix='원' prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat> ></NumericFormat>
</div> </div>
); );
@@ -620,7 +626,8 @@ export const ListItem = ({
value={amount} value={amount}
thousandSeparator thousandSeparator
displayType="text" displayType="text"
suffix='원' prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat> ></NumericFormat>
</div> </div>
); );
@@ -637,7 +644,7 @@ export const ListItem = ({
key="sms-payment-amount" key="sms-payment-amount"
className={`status-label success`} className={`status-label success`}
onClick={() => mid && onResendClick(mid, tid || '')} onClick={() => mid && onResendClick(mid, tid || '')}
>{'재발송'}</div> >{t('additionalService.common.resend')}</div>
) )
} }
return rs; return rs;

View File

@@ -384,6 +384,68 @@
"escrowPayment": "Escrow Payment" "escrowPayment": "Escrow Payment"
} }
}, },
"additionalService": {
"title": "Additional Services",
"activeServices": "Active Services",
"availableServices": "Available Services",
"notActiveServiceMessage": "This service is not currently active.",
"contactSalesMessage": "Please contact your sales representative or customer service for inquiries.",
"common": {
"success": "Success",
"fail": "Fail",
"request": "Request",
"resend": "Resend"
},
"services": {
"sms": "SMS Payment Notification",
"smsDesc": "Automatic SMS sending from deposit request to completion",
"ars": "Credit Card ARS Payment",
"arsDesc": "Convenient and secure payment service with just one phone call",
"keyIn": "KEY-IN Payment",
"keyInDesc": "Simple payment support by entering card information during consultation",
"accountHolderSearch": "Account Holder Search",
"accountHolderSearchDesc": "Instant account holder verification with account holder information",
"payout": "Payout Service",
"payoutDesc": "Quick settlement payment service for sub-merchants",
"settlementAgency": "Settlement Agency",
"settlementAgencyDesc": "Automated settlement calculation and payment service for sub-merchants",
"linkPayment": "Link Payment",
"linkPaymentDesc": "Payment service available anywhere with just a payment link",
"fundAccount": "Fund Transfer",
"fundAccountDesc": "Instant transfer with deposits, multiple transfers with file registration",
"accountHolderAuth": "Account Holder Authentication",
"accountHolderAuthDesc": "Account ownership verification with 1 KRW transfer",
"alimtalk": "Alimtalk Payment Notification",
"alimtalkDesc": "Easy and fast payment status notifications via Alimtalk",
"faceAuth": "Face Authentication",
"faceAuthDesc": "Secure payment service with face recognition for easy identity verification"
},
"settlementAgency": {
"title": "Settlement Agency",
"depositConfirmation": "Deposit Confirmation",
"settlementInfo": "Settlement Information",
"settlementId": "Settlement ID",
"settlementDate": "Settlement Date",
"settlementStatus": "Settlement Status",
"totalTransactionAmount": "Total Transaction Amount",
"settlementAmount": "Settlement Amount",
"settlementStoreInfo": "Settlement Store Information",
"settlementStoreId": "Settlement Store ID",
"settlementStoreName": "Settlement Store Name",
"businessNumber": "Business Number",
"feeInfo": "Fee Information",
"taxStatus": "Tax Status",
"bank": "Bank",
"accountNumber": "Account Number",
"statusChangeHistory": "Status Change History",
"withdrawalFailed": "Withdrawal Failed",
"agreementCompleted": "Agreement Completed",
"agreementExpired": "Agreement Expired",
"reason": "Reason",
"accountError": "Payment Account Error",
"agreeOrReject": "Agree/Reject Settlement"
}
},
"merchant": { "merchant": {
"title": "Merchant Management", "title": "Merchant Management",
"info": "Merchant Info", "info": "Merchant Info",

View File

@@ -388,6 +388,68 @@
"escrowPayment": "에스크로 결제" "escrowPayment": "에스크로 결제"
} }
}, },
"additionalService": {
"title": "부가서비스 소개",
"activeServices": "사용중인 서비스",
"availableServices": "신청 가능한 서비스",
"notActiveServiceMessage": "이용 중이지 않은 서비스입니다.",
"contactSalesMessage": "가입 문의는 영업 담당자 또는 고객센터로 문의해 주세요.",
"common": {
"success": "성공",
"fail": "실패",
"request": "요청",
"resend": "재발송"
},
"services": {
"sms": "SMS 결제 통보",
"smsDesc": "입금 요청부터 완료까지 SMS 자동 전송",
"ars": "신용카드 ARS 결제",
"arsDesc": "전화 한 통으로 결제 성공 편리하고 안전한 서비스",
"keyIn": "KEY-IN 결제",
"keyInDesc": "상담 중 카드정보 입력으로 간편한 결제 지원",
"accountHolderSearch": "계좌성명조회",
"accountHolderSearchDesc": "예금주 정보 입력으로 즉시 예금주 확인",
"payout": "지급대행",
"payoutDesc": "하위 가맹점에 빠른 정산금 지급 지급대행 서비스",
"settlementAgency": "정산대행",
"settlementAgencyDesc": "하위 가맹점 정산금 계산부터 지급까지 자동 해결 서비스",
"linkPayment": "링크 결제",
"linkPaymentDesc": "결제 링크 전송만으로 어디서든 결제 가능 서비스",
"fundAccount": "자금이체",
"fundAccountDesc": "예치금으로 즉시 송금, 파일 등록만으로 다중 송금 가능",
"accountHolderAuth": "계좌점유인증",
"accountHolderAuthDesc": "1원 송금으로 실제 계좌 점유 확인 여부",
"alimtalk": "알림톡 결제통보",
"alimtalkDesc": "결제 상태를 알림톡으로 쉽고 빠른 안내",
"faceAuth": "얼굴인증",
"faceAuthDesc": "얼굴 인식으로 간편 본인확인과 결제 가능한 안전 결제 서비스"
},
"settlementAgency": {
"title": "정산대행",
"depositConfirmation": "입금확인서",
"settlementInfo": "정산 정보",
"settlementId": "정산ID",
"settlementDate": "정산일",
"settlementStatus": "정산 상태",
"totalTransactionAmount": "총 거래금액",
"settlementAmount": "정산금액",
"settlementStoreInfo": "정산 매장 정보",
"settlementStoreId": "정산매장 ID",
"settlementStoreName": "정산매장 명",
"businessNumber": "사업자 번호",
"feeInfo": "수수료 정보",
"taxStatus": "과세 여부",
"bank": "은행",
"accountNumber": "계좌번호",
"statusChangeHistory": "상태 변경 이력",
"withdrawalFailed": "출금실패",
"agreementCompleted": "동의완료",
"agreementExpired": "동의기한 초과",
"reason": "사유",
"accountError": "지급 계좌오류",
"agreeOrReject": "정산 동의/거절"
}
},
"merchant": { "merchant": {
"title": "가맹점 관리", "title": "가맹점 관리",
"info": "가맹점 정보", "info": "가맹점 정보",

View File

@@ -1,5 +1,6 @@
import { PATHS } from '@/shared/constants/paths'; import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useTranslation } from 'react-i18next';
import { HeaderType } from '@/entities/common/model/types'; import { HeaderType } from '@/entities/common/model/types';
import { import {
useSetHeaderTitle, useSetHeaderTitle,
@@ -25,6 +26,7 @@ import { useExtensionArsResendMutation } from '@/entities/additional-service/api
import { getArsOrderStatusName, getArsPaymentStatusName } from '@/entities/additional-service/model/ars/constant'; import { getArsOrderStatusName, getArsPaymentStatusName } from '@/entities/additional-service/model/ars/constant';
export const ArsDetailPage = () => { export const ArsDetailPage = () => {
const { t, i18n } = useTranslation();
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const location = useLocation(); const location = useLocation();
@@ -88,7 +90,8 @@ export const ArsDetailPage = () => {
value={ detail?.amount } value={ detail?.amount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
suffix='원' prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat> ></NumericFormat>
</span> </span>
</div> </div>

View File

@@ -1,5 +1,6 @@
import { PATHS } from '@/shared/constants/paths'; import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useTranslation } from 'react-i18next';
import { HeaderType } from '@/entities/common/model/types'; import { HeaderType } from '@/entities/common/model/types';
import { import {
useSetHeaderTitle, useSetHeaderTitle,
@@ -22,6 +23,7 @@ import { useExtensionFundAccountDownloadReceiptMutation } from '@/entities/addit
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet'; import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
export const FundAccountResultDetailPage = () => { export const FundAccountResultDetailPage = () => {
const { t, i18n } = useTranslation();
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const location = useLocation(); const location = useLocation();
@@ -88,7 +90,8 @@ export const FundAccountResultDetailPage = () => {
value={detail?.amount} value={detail?.amount}
thousandSeparator thousandSeparator
displayType="text" displayType="text"
suffix='원' prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat> ></NumericFormat>
</span> </span>
</div> </div>

View File

@@ -1,5 +1,6 @@
import { PATHS } from '@/shared/constants/paths'; import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useTranslation } from 'react-i18next';
import { HeaderType } from '@/entities/common/model/types'; import { HeaderType } from '@/entities/common/model/types';
import { import {
useSetHeaderTitle, useSetHeaderTitle,
@@ -18,6 +19,7 @@ import { snackBar } from '@/shared/lib';
import { useExtensionFundAccountTransferRequestMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-request-mutation'; import { useExtensionFundAccountTransferRequestMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-request-mutation';
export const FundAccountTransferDetailPage = () => { export const FundAccountTransferDetailPage = () => {
const { t, i18n } = useTranslation();
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const location = useLocation(); const location = useLocation();
@@ -81,7 +83,8 @@ export const FundAccountTransferDetailPage = () => {
value={detail?.amount} value={detail?.amount}
thousandSeparator thousandSeparator
displayType="text" displayType="text"
suffix='원' prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat> ></NumericFormat>
</span> </span>
</div> </div>

View File

@@ -1,4 +1,5 @@
import { ChangeEvent, useEffect, useState } from 'react'; import { ChangeEvent, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PATHS } from '@/shared/constants/paths'; import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types'; import { HeaderType } from '@/entities/common/model/types';
@@ -14,6 +15,7 @@ import { useStore } from '@/shared/model/store';
import { Dialog } from '@/shared/ui/dialogs/dialog'; import { Dialog } from '@/shared/ui/dialogs/dialog';
export const ListPage = () => { export const ListPage = () => {
const { t } = useTranslation();
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const midOptions = useStore.getState().UserStore.selectOptionsMids; const midOptions = useStore.getState().UserStore.selectOptionsMids;
const userMid = useStore.getState().UserStore.mid; const userMid = useStore.getState().UserStore.mid;
@@ -25,7 +27,7 @@ export const ListPage = () => {
const { mutateAsync: extensionList } = useExtensionListMutation(); const { mutateAsync: extensionList } = useExtensionListMutation();
useSetHeaderTitle('부가서비스 소개'); useSetHeaderTitle(t('additionalService.title'));
useSetHeaderType(HeaderType.LeftArrow); useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false); useSetFooterMode(false);
useSetOnBack(() => { useSetOnBack(() => {
@@ -115,9 +117,9 @@ export const ListPage = () => {
} }
</select> </select>
</div> </div>
<h3 className="ing-title"> </h3> <h3 className="ing-title">{t('additionalService.activeServices')}</h3>
{getActiveExtensionList()} {getActiveExtensionList()}
<h3 className="ing-title"> </h3> <h3 className="ing-title">{t('additionalService.availableServices')}</h3>
{getAvailableExtensionList()} {getAvailableExtensionList()}
</div> </div>
</div> </div>
@@ -128,11 +130,11 @@ export const ListPage = () => {
onClose={() => setDialogOpen(false)} onClose={() => setDialogOpen(false)}
message={ message={
<> <>
.<br /> {t('additionalService.notActiveServiceMessage')}<br />
. {t('additionalService.contactSalesMessage')}
</> </>
} }
buttonLabel={['확인']} buttonLabel={[t('common.confirm')]}
onConfirmClick={() => setDialogOpen(false)} onConfirmClick={() => setDialogOpen(false)}
afterLeave={() => { }} afterLeave={() => { }}
/> />

View File

@@ -1,5 +1,6 @@
import { PATHS } from '@/shared/constants/paths'; import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useTranslation } from 'react-i18next';
import { HeaderType } from '@/entities/common/model/types'; import { HeaderType } from '@/entities/common/model/types';
import { import {
useSetHeaderTitle, useSetHeaderTitle,
@@ -18,6 +19,7 @@ import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import { DownloadTypeBottomSheet } from '@/entities/common/ui/download-type-bottom-sheet'; import { DownloadTypeBottomSheet } from '@/entities/common/ui/download-type-bottom-sheet';
export const PayoutDetailPage = () => { export const PayoutDetailPage = () => {
const { t, i18n } = useTranslation();
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const location = useLocation(); const location = useLocation();
@@ -110,7 +112,8 @@ export const PayoutDetailPage = () => {
value={ detail?.disbursementAmount } value={ detail?.disbursementAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
suffix='원' prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
></NumericFormat> ></NumericFormat>
</span> </span>
</div> </div>

View File

@@ -1,4 +1,5 @@
import { useState } from 'react'; import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PATHS } from '@/shared/constants/paths'; import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { SettlementAgencyTab } from '@/entities/additional-service/ui/settlement-agency/settlement-agency-tab'; import { SettlementAgencyTab } from '@/entities/additional-service/ui/settlement-agency/settlement-agency-tab';
@@ -13,11 +14,12 @@ import {
} from '@/widgets/sub-layout/use-sub-layout'; } from '@/widgets/sub-layout/use-sub-layout';
export const SettlementAgencyDepositPage = () => { export const SettlementAgencyDepositPage = () => {
const { t } = useTranslation();
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const [activeTab, setActiveTab] = useState<SettlementAgencyTabKeys>(SettlementAgencyTabKeys.Deposit); const [activeTab, setActiveTab] = useState<SettlementAgencyTabKeys>(SettlementAgencyTabKeys.Deposit);
useSetHeaderTitle('정산대행'); useSetHeaderTitle(t('additionalService.settlementAgency.title'));
useSetHeaderType(HeaderType.LeftArrow); useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false); useSetFooterMode(false);
useSetOnBack(() => { useSetOnBack(() => {

View File

@@ -1,4 +1,5 @@
import { useState } from 'react'; import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PATHS } from '@/shared/constants/paths'; import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { IMAGE_ROOT } from '@/shared/constants/common'; import { IMAGE_ROOT } from '@/shared/constants/common';
@@ -12,11 +13,12 @@ import {
} from '@/widgets/sub-layout/use-sub-layout'; } from '@/widgets/sub-layout/use-sub-layout';
export const SettlementAgencyDetailPage = () => { export const SettlementAgencyDetailPage = () => {
const { t } = useTranslation();
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const [bottomAgreeOn, setBottomAgreeOn] = useState<boolean>(false); const [bottomAgreeOn, setBottomAgreeOn] = useState<boolean>(false);
useSetHeaderTitle('정산대행'); useSetHeaderTitle(t('additionalService.settlementAgency.title'));
useSetHeaderType(HeaderType.LeftArrow); useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false); useSetFooterMode(false);
useSetOnBack(() => { useSetOnBack(() => {
@@ -40,7 +42,7 @@ export const SettlementAgencyDetailPage = () => {
<div className="receipt-row"> <div className="receipt-row">
<button type="button" className="receipt-btn"> <button type="button" className="receipt-btn">
<span className="icon-24 download"></span> <span className="icon-24 download"></span>
<span></span> <span>{t('additionalService.settlementAgency.depositConfirmation')}</span>
</button> </button>
</div> </div>
</div> </div>
@@ -48,84 +50,84 @@ export const SettlementAgencyDetailPage = () => {
<div className="detail-divider"></div> <div className="detail-divider"></div>
<div className="pay-detail"> <div className="pay-detail">
<div className="detail-title"> </div> <div className="detail-title">{t('additionalService.settlementAgency.settlementInfo')}</div>
<ul className="kv-list"> <ul className="kv-list">
<li className="kv-row"> <li className="kv-row">
<span className="k">ID</span> <span className="k">{t('additionalService.settlementAgency.settlementId')}</span>
<span className="v">AB25061012</span> <span className="v">AB25061012</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k"></span> <span className="k">{t('additionalService.settlementAgency.settlementDate')}</span>
<span className="v">2025.06.08</span> <span className="v">2025.06.08</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k"> </span> <span className="k">{t('additionalService.settlementAgency.settlementStatus')}</span>
<span className="v"></span> <span className="v"></span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k"> </span> <span className="k">{t('additionalService.settlementAgency.totalTransactionAmount')}</span>
<span className="v">105,000,000 </span> <span className="v">105,000,000 </span>
</li> </li>
<li className="kv-row bolder"> <li className="kv-row bolder">
<span className="k"></span> <span className="k">{t('additionalService.settlementAgency.settlementAmount')}</span>
<span className="v">100,000,000</span> <span className="v">100,000,000</span>
</li> </li>
</ul> </ul>
<div className="detail-divider"></div> <div className="detail-divider"></div>
<div className="detail-title"> </div> <div className="detail-title">{t('additionalService.settlementAgency.settlementStoreInfo')}</div>
<ul className="kv-list"> <ul className="kv-list">
<li className="kv-row"> <li className="kv-row">
<span className="k"> ID</span> <span className="k">{t('additionalService.settlementAgency.settlementStoreId')}</span>
<span className="v">BACK01</span> <span className="v">BACK01</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k"> </span> <span className="k">{t('additionalService.settlementAgency.settlementStoreName')}</span>
<span className="v">3</span> <span className="v">3</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k"> </span> <span className="k">{t('additionalService.settlementAgency.businessNumber')}</span>
<span className="v">123456789</span> <span className="v">123456789</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k"> </span> <span className="k">{t('additionalService.settlementAgency.feeInfo')}</span>
<span className="v">3%, </span> <span className="v">3%, </span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k"> </span> <span className="k">{t('additionalService.settlementAgency.taxStatus')}</span>
<span className="v">, </span> <span className="v">, </span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k"></span> <span className="k">{t('additionalService.settlementAgency.bank')}</span>
<span className="v"></span> <span className="v"></span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k"></span> <span className="k">{t('additionalService.settlementAgency.accountNumber')}</span>
<span className="v">110-12-12-11111</span> <span className="v">110-12-12-11111</span>
</li> </li>
</ul> </ul>
<div className="detail-divider"></div> <div className="detail-divider"></div>
<div className="detail-title summary-amount divTop"> <div className="detail-title summary-amount divTop">
<span className="amount-text states-17"> </span> <span className="amount-text states-17"> {t('additionalService.settlementAgency.statusChangeHistory')}</span>
<button> <button>
<img <img
src={ IMAGE_ROOT + '/ico_divTop_arrow.svg' } src={ IMAGE_ROOT + '/ico_divTop_arrow.svg' }
alt="화살표" alt={t('settlement.arrow')}
/> />
</button> </button>
</div> </div>
<div className="sd-history"> <div className="sd-history">
<div className="sd-history-item"> <div className="sd-history-item">
<div className="left"> <div className="left">
<div className="name"></div> <div className="name">{t('additionalService.settlementAgency.withdrawalFailed')}</div>
<div className="time">2025/04/15 10:00:00</div> <div className="time">2025/04/15 10:00:00</div>
</div> </div>
<div className="right"> <div className="right">
<div className="reason">사유 : 지급 </div> <div className="reason">{t('additionalService.settlementAgency.reason')} : {t('additionalService.settlementAgency.accountError')}</div>
</div> </div>
</div> </div>
<div className="sd-history-item"> <div className="sd-history-item">
<div className="left"> <div className="left">
<div className="name"></div> <div className="name">{t('additionalService.settlementAgency.agreementCompleted')}</div>
<div className="time">2025/04/10 10:00:00</div> <div className="time">2025/04/10 10:00:00</div>
</div> </div>
<div className="right"> <div className="right">
@@ -134,7 +136,7 @@ export const SettlementAgencyDetailPage = () => {
</div> </div>
<div className="sd-history-item"> <div className="sd-history-item">
<div className="left"> <div className="left">
<div className="name"> </div> <div className="name">{t('additionalService.settlementAgency.agreementExpired')}</div>
<div className="time">2025/04/06 10:00:00</div> <div className="time">2025/04/06 10:00:00</div>
</div> </div>
<div className="right"> <div className="right">
@@ -146,7 +148,7 @@ export const SettlementAgencyDetailPage = () => {
<button <button
className="btn-50 btn-blue flex-1" className="btn-50 btn-blue flex-1"
onClick={ () => oncClickToOpenBottomAgree() } onClick={ () => oncClickToOpenBottomAgree() }
> /</button> >{t('additionalService.settlementAgency.agreeOrReject')}</button>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -1,4 +1,5 @@
import { useState } from 'react'; import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PATHS } from '@/shared/constants/paths'; import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { SettlementAgencyTab } from '@/entities/additional-service/ui/settlement-agency/settlement-agency-tab'; import { SettlementAgencyTab } from '@/entities/additional-service/ui/settlement-agency/settlement-agency-tab';
@@ -13,11 +14,12 @@ import {
} from '@/widgets/sub-layout/use-sub-layout'; } from '@/widgets/sub-layout/use-sub-layout';
export const SettlementAgencyManagePage = () => { export const SettlementAgencyManagePage = () => {
const { t } = useTranslation();
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const [activeTab, setActiveTab] = useState<SettlementAgencyTabKeys>(SettlementAgencyTabKeys.Manage); const [activeTab, setActiveTab] = useState<SettlementAgencyTabKeys>(SettlementAgencyTabKeys.Manage);
useSetHeaderTitle('정산대행'); useSetHeaderTitle(t('additionalService.settlementAgency.title'));
useSetHeaderType(HeaderType.LeftArrow); useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false); useSetFooterMode(false);
useSetOnBack(() => { useSetOnBack(() => {

View File

@@ -1,4 +1,5 @@
import { useState } from 'react'; import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PATHS } from '@/shared/constants/paths'; import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { SettlementAgencyTab } from '@/entities/additional-service/ui/settlement-agency/settlement-agency-tab'; import { SettlementAgencyTab } from '@/entities/additional-service/ui/settlement-agency/settlement-agency-tab';
@@ -13,11 +14,12 @@ import {
} from '@/widgets/sub-layout/use-sub-layout'; } from '@/widgets/sub-layout/use-sub-layout';
export const SettlementAgencyMemberPage = () => { export const SettlementAgencyMemberPage = () => {
const { t } = useTranslation();
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const [activeTab, setActiveTab] = useState<SettlementAgencyTabKeys>(SettlementAgencyTabKeys.Member); const [activeTab, setActiveTab] = useState<SettlementAgencyTabKeys>(SettlementAgencyTabKeys.Member);
useSetHeaderTitle('정산대행'); useSetHeaderTitle(t('additionalService.settlementAgency.title'));
useSetHeaderType(HeaderType.LeftArrow); useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false); useSetFooterMode(false);
useSetOnBack(() => { useSetOnBack(() => {