인터페이스에서 통화 전환

1) 원칙

1. 먼저 의미, UI입니다. 디스플레이 통화 (편의) 및 거래 통화 (실제 화폐 변환) 와 별도의 계정 통화 (회계 진실).

2. 모호성이 없습니다. 혼동의 위험이있는 코드 + 기호 ('US $', 'CA $', 'MXN', 'R $') 를 표시하십시오. (PHP 3 = 3.0.6, PHP 4)

3. 코스 무결성. 수수료/스프레드가 포함되어 있는지 여부는 코스의 출처, 마지막 업데이트의 순간입니다.
4. 입력 안정성. 통화 전환은 명시적인 동의없이 (특히 요율/예금 양식) 입력 값을 "점프" 해서는 안됩니다.
5. 형식의 현지화. 사용자 로케일별로 제한기, 공간, 통화 부호; 정확성-통화 별.

2) 스위칭 모델

디스플레이 전용-모든 계산은 계정 통화에 유지되며 UI는 선택한 통화에 해당합니다. 카탈로그, 프로필, 차원에 사용하십시오

하이브리드 (소프트 변환기): 선택한 통화에 표시 + 계정 통화로 거래 확인 (둘 다 표시).
운영 (하드 변환): 사용자가 거래 통화 (예금/인출/요율) 를 변경합니다. 명시 적 코스, 커미션, 수정 시간이 필요합니다.

규칙: 기본적으로-디스플레이 전용 및 해당 흐름 (현금, 인출, 자금 이체) 에서만 "하드" 변환을 켜십시오.

3) 제어 및 배치

헤더/프로파일 패널의 통화 스위치 (""/€/$" 아이콘 또는 통화 코드).
선택기: 코드/이름/기호로 검색; 선택/빈번한 통화-상단.
양식 내부 (예금/비율): "XXX에서 동등한" 힌트 옆에있는 양 필드의 오른쪽에있는 컴팩트 한 선택기.
모바일 패턴: 필터링 목록과 입력이있는 하단 시트.

html
<button aria-haspopup="listbox" aria-expanded="false" class="currency-switch">UAH</button>
<ul role="listbox" class="currency-menu" hidden>
<li role="option" aria-selected="true">UAH — ₴</li>
<li role="option">USD — US$</li>
<li role="option">EUR — €</li>
<li role="option">TRY — ₺</li>
</ul>

4) 형식 및 정확도

사소한 단위: 전체 최소 단위 (페니, 센트, 사토시) 로 저장 금액.

• 0: JPY, KRW, CLP
• 2: USD, EUR, UAH, TRY
• 3 +: 일부 ZAR (2), KWD (3), crypto (4-8) 통화
• 암호 화폐: 최대 8 자 (동적 정확도이지만 가독성이 낮음) 를 표시하십시오.
• 표 숫자: '글꼴-변형 숫자: 표-수치;' 열 정렬.

js const fmt = (amountMinor, currency, locale) => {
const fraction = { JPY:0, KRW:0, KWD:3 }[currency]?? 2;
return new Intl.NumberFormat(locale, { style:'currency', currency, minimumFractionDigits:fraction, maximumFractionDigits:fraction })
.format(amountMinor / 10fraction);
};
fmt(200000, 'UAH', 'uk-UA'); // 2 000,00 ₴

5) 코스 및 업데이트

출처: 코스 제공 업체 (내부 가격/은행/FX-API) 를 수정하십시오.
캐시: 합리적인 빈도로 코스 업데이트 (예: 60-300 초마다) + 필요에 따른 증분 업데이트.
수정 시간: 결제시 'N 분 전에 업데이트 됨' 및 수정 시간을 표시합니다.
스프레드/커미션: "Rate 1 USD = 36. 60 UAH (스프레드 1 포함) 5%)».
반올림: 은행 또는 일반-하나를 선택하고 정책에서 수정하십시오.

6) UX 텍스트 및 설명

등가: "λ52. 10 € "-양의 음소거 된 색상 옆에 실시간으로 업데이트되었습니다.
법적 경고: "실제 요율과 수수료는 확인 단계에 기록 될 것입니다".
긴 코드: 툴팁/보조 문자열: "US $ - US 달러" 를 사용하십시오.
바구니의 변환: 설명없이 "총" 을 변경하지 마십시오. 재 계산 라인을 표시하십시오.

7) 가용성 (A11y)

통화 선택기에서 'role = "listbox/옵션"'.
키보드 지원: 코드/이름별로 화살표, 입력, 미리 입력.
SR 읽기: "디스플레이 통화: UAH-우크라이나 hryvnia".
색상은 의미의 유일한 매체입니다 (항상 코드/텍스트가 있습니다).
RTL: 아랍어 문자열 내부의 'dir = "ltr" 의 숫자/코드.

8) 성능과 캐싱

코스 - TTL을 사용한 메모리 + 로컬 스토리지 (예: 5 분).
배치 업데이트: 배치에 해당하는 금액을 다시 계산합니다 (요청시 AnimationFrame, debunks 100-200 ms).
코스가 <임계 값을 변경할 때 추가 목록 재실행기를 트리거하지 마십시오 (예: 0). 1%).

9) iGaming의 세부 사항

계정 통화-기본보고 (예금, 잔액, 이력).
요율 통화: 일반적으로 = 계정 통화; 다른 것이 지정되면 "USD로 토론 된 X XXX (UAH의 경우 YY YYY)" 라는 이중 블록을 표시하십시오.
합의 수정: 승리는 베팅이 아닌 결제 시점의 요율로 전환됩니다. 쿠폰/기록 세부 사항에서 볼 수 있습니다.
예금/인출: PSP/은행의 요금 및 수수료-별도의 회선; 방법별로 ETA.
책임있는 플레이 제한: 계정 통화에 정의; UI가 다른 통화에있는 경우 두 값을 모두 표시하십시오.
토너먼트 및 상: 상금 통화가 수정되었습니다. 표시 될 때 동등한 것은 대략적으로 표시됩니다.

10) 안티 패턴

명시적인 동의없이 통화를 전환 할 때 입력 분야에서 "매직" 값이 변경됩니다.
국가 코드없이 하나의 "$" 문자 사용.
알고있는 숨겨진 커미션 (확산에 관한 선 없음).
로케일과 통화 혼합 ('UAH' 의 경우 'en-US' 형식).
JPY/KRW의 경우 "2 문자" 또는 모든 암호 화폐의 경우 "8 문자" 의 정밀도.
"재계산" 이라는 표시없이 현재 환율에서 "소급 적으로" 역사적 거래의 재 계산.

11) 디자인 시스템 토큰 (예)

json
{
"currency": {
"default": "UAH",
"displayList": ["UAH","USD","EUR","TRY","PLN","BRL","MXN"],
"fractions": { "JPY":0, "KRW":0, "KWD":3, "BTC":8 },
"showCodeWithSymbol": ["USD","CAD","AUD","NZD"],
"approxPrefix": "≈ "
},
"format": {
"tabularNums": true,
"grouping": "locale",
"negative": "−"
},
"fx": {
"ttlSec": 300,
"changeThresholdPct": 0.1,
"showSpread": true
}
}

12) 스니펫

통화 스위치 (반응, 컨텍스트 + Intl)

tsx import { createContext, useContext, useState, useMemo } from 'react';

type Cur = 'UAH'    'USD'    'EUR'    'TRY';
const CurrencyCtx = createContext<{cur:Cur,set:(c:Cur)=>void, rate:(from:Cur,to:Cur)=>number}>({cur:'UAH',set:()=>{},rate:()=>1});

export function CurrencyProvider({children}:{children:React.ReactNode}){
const [cur, set] = useState<Cur>('UAH');
// fx: получить из кэша/апи; здесь — заглушка const table = { UAH:{USD:0.027,EUR:0.025,TRY:0.89,UAH:1}, USD:{UAH:36.6,EUR:0.93,TRY:33.0,USD:1}, EUR:{UAH:39.2,USD:1.07,TRY:35.4,EUR:1}, TRY:{UAH:1.12,USD:0.030,EUR:0.028,TRY:1} };
const rate = (from:Cur,to:Cur)=> table[from][to];
const value = useMemo(()=>({cur, set, rate}),[cur]);
return <CurrencyCtx.Provider value={value}>{children}</CurrencyCtx.Provider>;
}

export function useCurrency(){ return useContext(CurrencyCtx); }

export function Money({minor, iso}:{minor:number, iso:Cur}){
const { cur, rate } = useCurrency();
const fraction = { JPY:0, KRW:0, KWD:3 }[cur as any]?? 2;
const v = (minor/10fraction) rate(iso, cur);
return <span style={{fontVariantNumeric:'tabular-nums'}}>{new Intl.NumberFormat(undefined,{style:'currency',currency:cur, minimumFractionDigits:fraction, maximumFractionDigits:fraction}).format(v)}</span>;
}

듀얼 디스플레이 (운영 변환)

html
<div class="amount">
<label>Сумма депозита</label>
<div class="row">
<input type="number" inputmode="decimal" aria-describedby="fxnote">
<select aria-label="Валюта операции">
<option>USD</option><option>EUR</option><option>UAH</option>
</select>
</div>
<small id="fxnote">≈ 2 000,00 ₴ · Курс будет зафиксирован на следующем шаге</small>
</div>

13) 지표

FX 대기 시간: 통화 스위치에서 모든 필드의 업데이트까지의 시간 (대상 10150ms).
정확도: "잘못된 금액" 을 지원하기위한 통화 비율 (<0. 2%).
디스플레이 대 계정 불일치: 사용자가 통화를 혼동하는 이벤트 (낮은 힌트).
CTR 코스 팁: "코스/커미션에 대한 자세한 내용" 을 클릭하십시오.
전환시 현금 할인: 금액의 "갑작스런" 변화와 관련된 실패의 비율.

14) QA 체크리스트

의미와 투명성

• 계정 및/또는 거래의 통화는 모든 곳에서 볼 수 있습니다.
• $ 는 국가 코드 (US $, CA $ 등) 를 보여줍니다.
• 요율, 업데이트 날짜 및 스프레드/커미션에 대한 라인이 있습니다.

형식과 정확성

• 통화 별 10 진수 장소 (JPY = 0, KWD = 3, crypto = 최대 8).
• 숫자/통화 로케일은 UI 언어에 해당합니다.
• 과거 거래는 표시없이 "현재 환율" 로 다시 계산되지 않습니다.

행동

• 통화 전환은 확인없이 항목을 변경하지 않습니다.
• "" 등가 "는 매끄럽고 빠르게 업데이트됩니다.
• 통화 선택기는 키보드로 액세스 할 수있는 유형 미리 작동합니다.

iGaming-specifics

• 쿠폰에서: 청구/승리 및 통화가 서명되면 고정 속도가 표시됩니다.
• 경고시: PSP/은행 수수료는 별도로 표시됩니다.
• 한계에서: 두 값이 모두 표시됩니다 (계정 및 표시).

RTL/A11y

• 코드/양은 RTL에서 올바르게 읽습니다 (숫자는 'dir = "ltr"').
• 대조 및 초점 표시기는 AA에 해당합니다.

15) 설계 시스템의 문서

구성 요소: 'CurrencySwitch', 'Money', 'FxNote', 'DualAmount'.
정밀/반올림 정책 및 단일 형식 기능.
규칙: "디스플레이 전용", "하드 변환", "스프레드 표시 방법".
통화 참조: 코드, 기호, 숫자, 지역 문자 충돌.
갤러리 Do/Do n 't: "코드없이 $", 자동 점프 입력, 숨겨진 수수료.

간단한 요약

통화 전환은 단순히/€/$ 셀렉터가 아닙니다. 이것은 명확한 돈 모델 (계좌 통화 대 디스플레이 대 운영), 커미션에 대한 공정 요금, 로케일 별 올바른 형식 및 입력 필드의 신중한 동작입니다. 디자인 시스템의 규칙을 수정하고 코스의 형식 및 캐싱을 자동화하십시오. 사용자는 숫자를 의심하지 않고 "보이지 않는" 스프레드에서 돈을 잃지 않고 금액으로 자신있게 작업합니다.