aidev
537 lines
20 KiB
TypeScript
537 lines
20 KiB
TypeScript
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
|
import { Autocomplete, TextField, CircularProgress, Box, SxProps, Theme, IconButton, Typography, Divider } from '@mui/material';
|
|
import { Star, StarBorder } from '@mui/icons-material';
|
|
import upbitApiService, { UpbitMarket, UpbitTicker } from '../services/upbitApi';
|
|
import { toggleFavorite, getAllFavorites } from '../services/cryptoFavoriteApi';
|
|
|
|
interface CryptoNameComboBoxProps {
|
|
value: string;
|
|
onChange: (symbol: string, cryptoInfo?: UpbitMarket) => void;
|
|
disabled?: boolean;
|
|
label?: string;
|
|
placeholder?: string;
|
|
helperText?: string;
|
|
size?: 'small' | 'medium';
|
|
sx?: SxProps<Theme>;
|
|
}
|
|
|
|
type SortKey = 'favorite' | 'korean_name' | 'trade_price' | 'signed_change_rate' | 'acc_trade_price_24h';
|
|
type SortOrder = 'asc' | 'desc';
|
|
|
|
const HEADER_ROW_HEIGHT = 30;
|
|
|
|
const formatPrice = (price?: number): string => {
|
|
if (price == null) return '-';
|
|
if (price >= 1000) return price.toLocaleString();
|
|
if (price >= 1) return price.toLocaleString(undefined, { maximumFractionDigits: 4 });
|
|
return price.toLocaleString(undefined, { maximumFractionDigits: 8 });
|
|
};
|
|
|
|
const formatChangeRate = (rate?: number): string => {
|
|
if (rate == null) return '-';
|
|
const percent = rate * 100;
|
|
const sign = percent > 0 ? '+' : '';
|
|
return `${sign}${percent.toFixed(2)}%`;
|
|
};
|
|
|
|
const formatTradeValue = (value?: number): string => {
|
|
if (value == null) return '-';
|
|
if (value >= 1_0000_0000_0000) return `${(value / 1_0000_0000_0000).toFixed(2)}조`;
|
|
if (value >= 1_0000_0000) return `${(value / 1_0000_0000).toFixed(1)}억`;
|
|
if (value >= 1_0000) return `${(value / 1_0000).toFixed(1)}만`;
|
|
return value.toLocaleString();
|
|
};
|
|
|
|
const compareNumber = (a?: number, b?: number): number => {
|
|
const av = a ?? Number.NEGATIVE_INFINITY;
|
|
const bv = b ?? Number.NEGATIVE_INFINITY;
|
|
return av - bv;
|
|
};
|
|
|
|
const compareString = (a?: string, b?: string): number => (a ?? '').localeCompare(b ?? '', 'ko');
|
|
|
|
|
|
const CryptoNameComboBox: React.FC<CryptoNameComboBoxProps> = ({
|
|
value,
|
|
onChange,
|
|
disabled = false,
|
|
label = '암호화폐명',
|
|
placeholder = '암호화폐명을 입력하거나 선택하세요',
|
|
helperText,
|
|
size = 'medium',
|
|
sx,
|
|
}) => {
|
|
const [cryptos, setCryptos] = useState<UpbitMarket[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [inputValue, setInputValue] = useState('');
|
|
const [selectedCrypto, setSelectedCrypto] = useState<UpbitMarket | null>(null);
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [isUserTyping, setIsUserTyping] = useState(false);
|
|
const [favorites, setFavorites] = useState<Record<string, boolean>>({});
|
|
const [tickerMap, setTickerMap] = useState<Record<string, UpbitTicker>>({});
|
|
const [sortKey, setSortKey] = useState<SortKey>('favorite');
|
|
const [sortOrder, setSortOrder] = useState<SortOrder>('desc');
|
|
const [dropdownWidth, setDropdownWidth] = useState<number>(520);
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
const comboRootRef = useRef<HTMLDivElement>(null);
|
|
|
|
const fetchTickers = useCallback(async (markets: string[]) => {
|
|
if (markets.length === 0) return;
|
|
const chunkSize = 80;
|
|
const chunks: string[][] = [];
|
|
for (let i = 0; i < markets.length; i += chunkSize) {
|
|
chunks.push(markets.slice(i, i + chunkSize));
|
|
}
|
|
|
|
try {
|
|
const results = await Promise.all(chunks.map((chunk) => upbitApiService.getCurrentPrice(chunk)));
|
|
const next: Record<string, UpbitTicker> = {};
|
|
results.flat().forEach((ticker) => {
|
|
if (ticker?.market) next[ticker.market] = ticker;
|
|
});
|
|
setTickerMap(next);
|
|
} catch (error) {
|
|
console.error('티커 로드 실패:', error);
|
|
}
|
|
}, []);
|
|
|
|
// 컴포넌트 마운트 시 암호화폐 목록 로드
|
|
useEffect(() => {
|
|
const loadAllCryptos = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const activeCryptos = await upbitApiService.getActiveCryptos();
|
|
const convertedCryptos = activeCryptos.map(crypto => ({
|
|
market: crypto.symbol,
|
|
korean_name: crypto.koreanName,
|
|
english_name: crypto.englishName
|
|
}));
|
|
setCryptos(convertedCryptos);
|
|
await fetchTickers(convertedCryptos.map((c) => c.market));
|
|
|
|
// 즐겨찾기 목록 한 번에 로드
|
|
try {
|
|
const favList = await getAllFavorites();
|
|
const favMap: Record<string, boolean> = {};
|
|
favList.forEach(fav => {
|
|
favMap[fav.symbol] = true;
|
|
});
|
|
setFavorites(favMap);
|
|
} catch (error) {
|
|
console.error('즐겨찾기 목록 로드 실패:', error);
|
|
setFavorites({});
|
|
}
|
|
} catch (error) {
|
|
console.error('암호화폐 목록 로드 실패:', error);
|
|
const defaultCryptos = [
|
|
{ market: 'KRW-BTC', korean_name: '비트코인', english_name: 'Bitcoin' },
|
|
{ market: 'KRW-ETH', korean_name: '이더리움', english_name: 'Ethereum' },
|
|
{ market: 'KRW-XRP', korean_name: '리플', english_name: 'Ripple' },
|
|
{ market: 'KRW-ADA', korean_name: '에이다', english_name: 'Cardano' },
|
|
{ market: 'KRW-SOL', korean_name: '솔라나', english_name: 'Solana' },
|
|
];
|
|
setCryptos(defaultCryptos);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
loadAllCryptos();
|
|
}, [fetchTickers]);
|
|
|
|
useEffect(() => {
|
|
if (!isOpen || cryptos.length === 0) return;
|
|
void fetchTickers(cryptos.map((c) => c.market));
|
|
}, [isOpen, cryptos, fetchTickers]);
|
|
|
|
// 부모에서 종목이 바뀌면(알림·FAB 등) 검색 중 플래그 해제 → 아래 동기화 effect가 한글명 반영
|
|
useEffect(() => {
|
|
setIsUserTyping(false);
|
|
}, [value]);
|
|
|
|
// 외부 value 변경 시 선택 상태 동기화
|
|
useEffect(() => {
|
|
// 사용자가 타이핑 중이거나 드롭다운이 열려있을 때는 동기화하지 않음
|
|
if (isUserTyping || isOpen) {
|
|
return;
|
|
}
|
|
|
|
if (value && cryptos.length > 0) {
|
|
const crypto = cryptos.find(c => c.market === value);
|
|
if (crypto && crypto !== selectedCrypto) {
|
|
setSelectedCrypto(crypto);
|
|
setInputValue(crypto.korean_name);
|
|
}
|
|
} else if (!value) {
|
|
setSelectedCrypto(null);
|
|
setInputValue('');
|
|
}
|
|
}, [value, cryptos, selectedCrypto, isUserTyping, isOpen]);
|
|
|
|
// 필터링된 종목 목록
|
|
// - 드롭다운이 열릴 때 (isOpen=true) 사용자가 타이핑 중일 때만 필터링
|
|
// - 목록을 펼칠 때는 모든 종목 표시
|
|
// - 즐겨찾기를 먼저 표시하도록 정렬
|
|
const getFilteredOptions = useCallback(() => {
|
|
let filteredList: UpbitMarket[];
|
|
|
|
// 사용자가 타이핑 중일 때만 필터링
|
|
if (isUserTyping && inputValue) {
|
|
const lowerCaseInput = inputValue.toLowerCase();
|
|
filteredList = cryptos.filter(crypto => {
|
|
if (!crypto || !crypto.korean_name || !crypto.english_name || !crypto.market) return false;
|
|
return crypto.korean_name.toLowerCase().includes(lowerCaseInput) ||
|
|
crypto.english_name.toLowerCase().includes(lowerCaseInput) ||
|
|
crypto.market.toLowerCase().includes(lowerCaseInput);
|
|
});
|
|
} else {
|
|
// 목록을 펼칠 때는 모든 종목 표시
|
|
filteredList = cryptos;
|
|
}
|
|
|
|
return [...filteredList].sort((a, b) => {
|
|
const tA = tickerMap[a.market];
|
|
const tB = tickerMap[b.market];
|
|
let cmp = 0;
|
|
|
|
if (sortKey === 'favorite') {
|
|
cmp = Number(!!favorites[a.market]) - Number(!!favorites[b.market]);
|
|
} else if (sortKey === 'korean_name') {
|
|
cmp = compareString(a.korean_name, b.korean_name);
|
|
} else if (sortKey === 'trade_price') {
|
|
cmp = compareNumber(tA?.trade_price, tB?.trade_price);
|
|
} else if (sortKey === 'signed_change_rate') {
|
|
cmp = compareNumber(tA?.signed_change_rate, tB?.signed_change_rate);
|
|
} else if (sortKey === 'acc_trade_price_24h') {
|
|
cmp = compareNumber(tA?.acc_trade_price_24h, tB?.acc_trade_price_24h);
|
|
}
|
|
|
|
if (cmp === 0) {
|
|
cmp = compareString(a.korean_name, b.korean_name);
|
|
}
|
|
return sortOrder === 'asc' ? cmp : -cmp;
|
|
});
|
|
}, [cryptos, inputValue, isUserTyping, favorites, tickerMap, sortKey, sortOrder]);
|
|
|
|
const handleSort = useCallback((key: SortKey) => {
|
|
if (sortKey === key) {
|
|
setSortOrder((prev) => (prev === 'asc' ? 'desc' : 'asc'));
|
|
return;
|
|
}
|
|
setSortKey(key);
|
|
setSortOrder(key === 'korean_name' ? 'asc' : 'desc');
|
|
}, [sortKey]);
|
|
|
|
// 드롭다운 열림/닫힘 핸들러
|
|
const handleOpen = () => {
|
|
const inputWidth = comboRootRef.current?.clientWidth ?? 0;
|
|
// 입력란 좌측 기준으로 붙이고, 너무 좁지 않게 최소 폭 보장
|
|
setDropdownWidth(Math.max(520, inputWidth));
|
|
setIsOpen(true);
|
|
setIsUserTyping(false); // 목록을 펼칠 때는 필터링 비활성화
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setIsOpen(false);
|
|
setIsUserTyping(false);
|
|
// 닫힐 때 입력값이 비어있거나 매칭되는 종목이 없으면 선택된 종목으로 복원
|
|
if (selectedCrypto && !inputValue) {
|
|
setInputValue(selectedCrypto.korean_name);
|
|
} else if (!selectedCrypto && !inputValue) {
|
|
// 선택된 종목도 없고 입력값도 없으면 그대로 유지
|
|
setInputValue('');
|
|
}
|
|
};
|
|
|
|
// 종목 선택 핸들러 — 목록에서 고를 때만 부모 onChange(차트 갱신). Clear는 검색칸만 비움.
|
|
const handleChange = (event: React.SyntheticEvent, newValue: UpbitMarket | null) => {
|
|
if (newValue) {
|
|
setSelectedCrypto(newValue);
|
|
setIsUserTyping(false);
|
|
setInputValue(newValue.korean_name);
|
|
onChange(newValue.market, newValue);
|
|
return;
|
|
}
|
|
// Clear(X): 실제 선택·부모 symbol·차트는 유지, 입력만 비워 다음 종목 검색 가능
|
|
const keep =
|
|
(value && cryptos.length > 0 ? cryptos.find((c) => c.market === value) : null) ?? selectedCrypto;
|
|
if (keep) {
|
|
setSelectedCrypto(keep);
|
|
setInputValue('');
|
|
setIsUserTyping(true);
|
|
} else {
|
|
setSelectedCrypto(null);
|
|
setInputValue('');
|
|
setIsUserTyping(false);
|
|
}
|
|
};
|
|
|
|
// 입력 변경 핸들러
|
|
const handleInputChange = (event: React.SyntheticEvent, newInputValue: string, reason: string) => {
|
|
setInputValue(newInputValue);
|
|
|
|
// 사용자가 키보드로 직접 입력하거나 clear할 때 필터링 활성화
|
|
if (reason === 'input' || reason === 'clear') {
|
|
setIsUserTyping(true);
|
|
} else if (reason === 'reset') {
|
|
// 선택이 완료되었을 때만 타이핑 상태 해제
|
|
setIsUserTyping(false);
|
|
}
|
|
};
|
|
|
|
// 키 입력 핸들러 - 엔터키 처리
|
|
const handleKeyDown = (event: React.KeyboardEvent) => {
|
|
if (event.key === 'Enter' && isUserTyping) {
|
|
const filteredOptions = getFilteredOptions();
|
|
// 필터링된 결과가 하나이면 해당 종목 선택
|
|
if (filteredOptions.length === 1) {
|
|
const crypto = filteredOptions[0];
|
|
setSelectedCrypto(crypto);
|
|
setInputValue(crypto.korean_name);
|
|
setIsUserTyping(false);
|
|
setIsOpen(false);
|
|
onChange(crypto.market, crypto);
|
|
} else if (filteredOptions.length > 1) {
|
|
// 필터링된 결과 중 정확히 일치하는 종목이 있으면 선택
|
|
const exactMatch = filteredOptions.find(c =>
|
|
c.korean_name.toLowerCase() === inputValue.toLowerCase() ||
|
|
c.english_name.toLowerCase() === inputValue.toLowerCase() ||
|
|
c.market.toLowerCase() === inputValue.toLowerCase()
|
|
);
|
|
if (exactMatch) {
|
|
setSelectedCrypto(exactMatch);
|
|
setInputValue(exactMatch.korean_name);
|
|
setIsUserTyping(false);
|
|
setIsOpen(false);
|
|
onChange(exactMatch.market, exactMatch);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// 즐겨찾기 토글 핸들러
|
|
const handleToggleFavorite = async (e: React.MouseEvent, option: UpbitMarket) => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
try {
|
|
const result = await toggleFavorite({
|
|
symbol: option.market,
|
|
koreanName: option.korean_name,
|
|
englishName: option.english_name,
|
|
});
|
|
setFavorites(prev => ({ ...prev, [option.market]: result }));
|
|
} catch (error) {
|
|
console.error('즐겨찾기 토글 실패:', error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box ref={comboRootRef}>
|
|
<Autocomplete
|
|
options={getFilteredOptions()}
|
|
getOptionLabel={(option) => option.korean_name}
|
|
isOptionEqualToValue={(option, val) => option.market === val.market}
|
|
loading={loading}
|
|
disabled={disabled}
|
|
value={selectedCrypto}
|
|
open={isOpen}
|
|
onOpen={handleOpen}
|
|
onClose={handleClose}
|
|
onChange={handleChange}
|
|
inputValue={inputValue}
|
|
onInputChange={handleInputChange}
|
|
filterOptions={(options) => options} // 커스텀 필터링 사용
|
|
size={size}
|
|
freeSolo={false} // 목록에서만 선택 가능
|
|
clearOnBlur={false} // 포커스를 잃어도 입력값 유지
|
|
selectOnFocus={false} // 포커스 시 자동 선택 안함
|
|
handleHomeEndKeys={false}
|
|
disableClearable={false} // X 버튼 표시
|
|
sx={sx}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
inputRef={inputRef}
|
|
label={label || undefined}
|
|
placeholder={placeholder}
|
|
helperText={helperText || undefined}
|
|
fullWidth
|
|
size={size}
|
|
onKeyDown={handleKeyDown}
|
|
InputProps={{
|
|
...params.InputProps,
|
|
endAdornment: (
|
|
<React.Fragment>
|
|
{loading ? <CircularProgress color="inherit" size={20} /> : null}
|
|
{params.InputProps.endAdornment}
|
|
</React.Fragment>
|
|
),
|
|
}}
|
|
/>
|
|
)}
|
|
renderOption={(props, option, state) => {
|
|
const isFav = favorites[option.market] || false;
|
|
const ticker = tickerMap[option.market];
|
|
const options = getFilteredOptions();
|
|
const currentIndex = state.index;
|
|
const isFirstRow = currentIndex === 0;
|
|
|
|
// 현재 항목이 즐겨찾기이고, 다음 항목이 일반 항목인지 확인
|
|
const nextOption = options[currentIndex + 1];
|
|
const isLastFavorite = isFav && nextOption && !favorites[nextOption.market];
|
|
|
|
return (
|
|
<React.Fragment key={option.market}>
|
|
{isFirstRow && (
|
|
<Box
|
|
sx={{
|
|
position: 'sticky',
|
|
top: 0,
|
|
zIndex: 1,
|
|
display: 'grid',
|
|
gridTemplateColumns: '28px minmax(120px, 1.2fr) minmax(92px, 0.9fr) minmax(82px, 0.8fr) minmax(82px, 0.8fr)',
|
|
alignItems: 'center',
|
|
px: 1.5,
|
|
height: HEADER_ROW_HEIGHT,
|
|
bgcolor: 'background.paper',
|
|
borderBottom: '1px solid',
|
|
borderColor: 'divider',
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="caption"
|
|
sx={{ textAlign: 'center', cursor: 'pointer', userSelect: 'none' }}
|
|
onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); }}
|
|
onClick={(e) => { e.preventDefault(); e.stopPropagation(); handleSort('favorite'); }}
|
|
>
|
|
즐겨
|
|
</Typography>
|
|
<Typography
|
|
variant="caption"
|
|
sx={{ cursor: 'pointer', userSelect: 'none' }}
|
|
onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); }}
|
|
onClick={(e) => { e.preventDefault(); e.stopPropagation(); handleSort('korean_name'); }}
|
|
>
|
|
한글명 {sortKey === 'korean_name' ? (sortOrder === 'asc' ? '▲' : '▼') : ''}
|
|
</Typography>
|
|
<Typography
|
|
variant="caption"
|
|
sx={{ textAlign: 'right', cursor: 'pointer', userSelect: 'none' }}
|
|
onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); }}
|
|
onClick={(e) => { e.preventDefault(); e.stopPropagation(); handleSort('trade_price'); }}
|
|
>
|
|
현재가 {sortKey === 'trade_price' ? (sortOrder === 'asc' ? '▲' : '▼') : ''}
|
|
</Typography>
|
|
<Typography
|
|
variant="caption"
|
|
sx={{ textAlign: 'right', cursor: 'pointer', userSelect: 'none' }}
|
|
onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); }}
|
|
onClick={(e) => { e.preventDefault(); e.stopPropagation(); handleSort('signed_change_rate'); }}
|
|
>
|
|
전일대비 {sortKey === 'signed_change_rate' ? (sortOrder === 'asc' ? '▲' : '▼') : ''}
|
|
</Typography>
|
|
<Typography
|
|
variant="caption"
|
|
sx={{ textAlign: 'right', cursor: 'pointer', userSelect: 'none' }}
|
|
onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); }}
|
|
onClick={(e) => { e.preventDefault(); e.stopPropagation(); handleSort('acc_trade_price_24h'); }}
|
|
>
|
|
거래대금 {sortKey === 'acc_trade_price_24h' ? (sortOrder === 'asc' ? '▲' : '▼') : ''}
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
<Box
|
|
component="li"
|
|
{...props}
|
|
sx={{
|
|
display: 'grid !important',
|
|
gridTemplateColumns: '28px minmax(120px, 1.2fr) minmax(92px, 0.9fr) minmax(82px, 0.8fr) minmax(82px, 0.8fr) !important',
|
|
alignItems: 'center !important',
|
|
gap: 1,
|
|
padding: '8px 12px !important',
|
|
}}
|
|
>
|
|
<IconButton
|
|
size="small"
|
|
onClick={(e) => handleToggleFavorite(e, option)}
|
|
sx={{
|
|
color: isFav ? '#fbbf24' : 'action.disabled',
|
|
padding: '2px',
|
|
}}
|
|
>
|
|
{isFav ? <Star fontSize="small" /> : <StarBorder fontSize="small" />}
|
|
</IconButton>
|
|
|
|
{/* 한글명 */}
|
|
<Box sx={{ minWidth: 0, display: 'flex', flexDirection: 'column' }}>
|
|
<Typography sx={{ fontWeight: 'bold', fontSize: '14px' }}>
|
|
{option.korean_name}
|
|
</Typography>
|
|
<Typography sx={{ fontSize: '12px', color: 'text.secondary' }}>
|
|
{option.market.replace('KRW-', '')}
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* 현재가 */}
|
|
<Typography sx={{ textAlign: 'right', fontWeight: 600, fontSize: '13px' }}>
|
|
{formatPrice(ticker?.trade_price)}
|
|
</Typography>
|
|
|
|
{/* 전일대비 */}
|
|
<Typography
|
|
sx={{
|
|
textAlign: 'right',
|
|
fontWeight: 600,
|
|
fontSize: '13px',
|
|
color:
|
|
(ticker?.signed_change_rate ?? 0) > 0
|
|
? 'error.main'
|
|
: (ticker?.signed_change_rate ?? 0) < 0
|
|
? 'info.main'
|
|
: 'text.secondary',
|
|
}}
|
|
>
|
|
{formatChangeRate(ticker?.signed_change_rate)}
|
|
</Typography>
|
|
|
|
{/* 거래대금 */}
|
|
<Typography sx={{ textAlign: 'right', fontSize: '12px', color: 'text.secondary' }}>
|
|
{formatTradeValue(ticker?.acc_trade_price_24h)}
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* 즐겨찾기와 일반 종목 사이 divider */}
|
|
{isLastFavorite && (
|
|
<Divider sx={{ my: 0.5 }} />
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
}}
|
|
ListboxProps={{
|
|
sx: {
|
|
width: '100%',
|
|
maxHeight: '70vh',
|
|
pt: 0,
|
|
},
|
|
}}
|
|
componentsProps={{
|
|
popper: {
|
|
style: {
|
|
width: `${dropdownWidth}px`,
|
|
},
|
|
placement: 'bottom-start',
|
|
},
|
|
paper: {
|
|
sx: {
|
|
maxHeight: '72vh',
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
</Box>
|
|
);
|
|
|
|
};
|
|
|
|
export default CryptoNameComboBox;
|