import { Plus, Trash2, TrendingUp, TrendingDown, RefreshCw, DollarSign, AlertCircle, X, ChevronDown, Edit3 } from "lucide-react"; interface Stock { id: string; ticker: string; buyPrice: number; currentPrice: number | null; quantity: number; userId: string; manualPrice: boolean; loading: boolean; error: boolean; } type Lang = "ko" | "en" | "ja" | "zh"; const T: Record> = { ko: { title: "주식 포트폴리오", addStock: "종목 추가", ticker: "티커 (예: AAPL)", buyPrice: "매수가", quantity: "수량", add: "추가", cancel: "취소", totalInvested: "총 투자금액", currentValue: "현재 평가금액", totalPnL: "총 손익", emptyTitle: "첫 종목을 추가하세요", emptyDesc: "포트폴리오에 보유 종목을 추가하고 수익률을 추적하세요", addFirst: "종목 추가하기", refreshAll: "전체 새로고침", delete: "삭제", shares: "주", bought: "매수", current: "현재", pnl: "손익", fetchFail: "시세 조회 실패", manualInput: "수동 입력", enterPrice: "현재가 입력", save: "저장", portfolio: "포트폴리오 비중", noPrice: "가격 미정", required: "필수 입력", invalidNum: "유효한 숫자를 입력하세요", }, en: { title: "Stock Portfolio", addStock: "Add Stock", ticker: "Ticker (e.g. AAPL)", buyPrice: "Buy Price", quantity: "Quantity", add: "Add", cancel: "Cancel", totalInvested: "Total Invested", currentValue: "Current Value", totalPnL: "Total P&L", emptyTitle: "Add your first stock", emptyDesc: "Track your portfolio performance by adding stocks", addFirst: "Add Stock", refreshAll: "Refresh All", delete: "Delete", shares: "shares", bought: "Bought", current: "Current", pnl: "P&L", fetchFail: "Price fetch failed", manualInput: "Manual Input", enterPrice: "Enter current price", save: "Save", portfolio: "Portfolio Allocation", noPrice: "No price", required: "Required", invalidNum: "Enter a valid number", }, ja: { title: "株式ポートフォリオ", addStock: "銘柄追加", ticker: "ティッカー (例: AAPL)", buyPrice: "購入価格", quantity: "数量", add: "追加", cancel: "キャンセル", totalInvested: "総投資額", currentValue: "現在の評価額", totalPnL: "損益合計", emptyTitle: "最初の銘柄を追加しましょう", emptyDesc: "ポートフォリオに銘柄を追加して収益率を追跡", addFirst: "銘柄を追加", refreshAll: "全体更新", delete: "削除", shares: "株", bought: "購入", current: "現在", pnl: "損益", fetchFail: "価格取得失敗", manualInput: "手動入力", enterPrice: "現在の価格を入力", save: "保存", portfolio: "ポートフォリオ構成", noPrice: "価格未定", required: "必須入力", invalidNum: "有効な数値を入力してください", }, zh: { title: "股票投资组合", addStock: "添加股票", ticker: "代码 (例: AAPL)", buyPrice: "买入价", quantity: "数量", add: "添加", cancel: "取消", totalInvested: "总投资金额", currentValue: "当前市值", totalPnL: "总盈亏", emptyTitle: "添加您的第一只股票", emptyDesc: "将持仓股票添加到组合中追踪收益", addFirst: "添加股票", refreshAll: "全部刷新", delete: "删除", shares: "股", bought: "买入", current: "当前", pnl: "盈亏", fetchFail: "获取价格失败", manualInput: "手动输入", enterPrice: "输入当前价格", save: "保存", portfolio: "持仓分布", noPrice: "价格未定", required: "必填", invalidNum: "请输入有效数字", }, }; const CHART_COLORS = [ "#10b981", "#6366f1", "#f59e0b", "#ef4444", "#8b5cf6", "#06b6d4", "#ec4899", "#14b8a6", "#f97316", "#84cc16", ]; function detectLang(): Lang { try { const n = (typeof window !== "undefined" && window.navigator?.language) || "en"; if (n.startsWith("ko")) return "ko"; if (n.startsWith("ja")) return "ja"; if (n.startsWith("zh")) return "zh"; } catch {} return "en"; } export default function App() { const lang = useMemo(() => detectLang(), []); const t = useCallback((key: string) => T[lang]?.[key] || T.en[key] || key, [lang]); const [stocks, setStocks] = useSharedStorage("portfolio_stocks", []); const user = useUser(); const [showForm, setShowForm] = useState(false); const [tickerInput, setTickerInput] = useState(""); const [buyPriceInput, setBuyPriceInput] = useState(""); const [quantityInput, setQuantityInput] = useState(""); const [formError, setFormError] = useState(""); const [manualEditId, setManualEditId] = useState(null); const [manualPriceInput, setManualPriceInput] = useState(""); const [refreshing, setRefreshing] = useState(false); const scrollRef = useRef(null); const fetchPrice = useCallback(async (ticker: string): Promise<{ price: number | null; error: boolean }> => { try { const url = encodeURIComponent(`https://query1.finance.yahoo.com/v8/finance/chart/${ticker}?interval=1d&range=1d`); const res = await fetch(`/api/proxy?url=${url}`); if (!res.ok) throw new Error("fetch failed"); const data = await res.json(); const price = data?.chart?.result?.[0]?.meta?.regularMarketPrice; if (typeof price === "number" && price > 0) return { price, error: false }; throw new Error("no price"); } catch { return { price: null, error: true }; } }, []); const handleAdd = useCallback(async () => { const ticker = tickerInput.trim().toUpperCase(); if (!ticker) { setFormError(t("required")); return; } const bp = parseFloat(buyPriceInput); const qty = parseFloat(quantityInput); if (isNaN(bp) || bp <= 0 || isNaN(qty) || qty <= 0) { setFormError(t("invalidNum")); return; } const id = Date.now().toString(36) + Math.random().toString(36).slice(2, 6); const newStock: Stock = { id, ticker, buyPrice: bp, currentPrice: null, quantity: qty, userId: user?.id || "anonymous", manualPrice: false, loading: true, error: false, }; setStocks((prev: Stock[]) => [...prev, newStock]); setShowForm(false); setTickerInput(""); setBuyPriceInput(""); setQuantityInput(""); setFormError(""); const result = await fetchPrice(ticker); setStocks((prev: Stock[]) => (prev || []).map((s: Stock) => s.id === id ? { ...s, currentPrice: result.price, loading: false, error: result.error } : s ) ); }, [tickerInput, buyPriceInput, quantityInput, t, user, fetchPrice, setStocks]); const handleDelete = useCallback( (id: string) => { setStocks((prev: Stock[]) => (prev || []).filter((s: Stock) => s.id !== id)); }, [setStocks] ); const handleRefreshAll = useCallback(async () => { if (refreshing) return; setRefreshing(true); const currentStocks = stocks || []; for (const stock of currentStocks) { const result = await fetchPrice(stock.ticker); setStocks((prev: Stock[]) => (prev || []).map((s: Stock) => s.id === stock.id ? { ...s, currentPrice: result.price ?? s.currentPrice, loading: false, error: result.error && s.currentPrice === null } : s ) ); } setRefreshing(false); }, [stocks, fetchPrice, refreshing, setStocks]); const handleManualSave = useCallback( (id: string) => { const price = parseFloat(manualPriceInput); if (isNaN(price) || price <= 0) return; setStocks((prev: Stock[]) => (prev || []).map((s: Stock) => s.id === id ? { ...s, currentPrice: price, manualPrice: true, error: false } : s ) ); setManualEditId(null); setManualPriceInput(""); }, [manualPriceInput, setStocks] ); const safeStocks: Stock[] = Array.isArray(stocks) ? stocks : []; const totalInvested = useMemo( () => (safeStocks || []).reduce((sum, s) => sum + s.buyPrice * s.quantity, 0), [safeStocks] ); const totalCurrent = useMemo( () => (safeStocks || []).reduce( (sum, s) => sum + (s.currentPrice ?? s.buyPrice) * s.quantity, 0 ), [safeStocks] ); const totalPnL = totalCurrent - totalInvested; const totalPnLPercent = totalInvested > 0 ? (totalPnL / totalInvested) * 100 : 0; const donutData = useMemo(() => { if (safeStocks.length === 0) return []; const total = (safeStocks || []).reduce( (sum, s) => sum + (s.currentPrice ?? s.buyPrice) * s.quantity, 0 ); if (total <= 0) return []; return (safeStocks || []).map((s, i) => ({ ticker: s.ticker, value: ((s.currentPrice ?? s.buyPrice) * s.quantity) / total, color: CHART_COLORS[i % CHART_COLORS.length], })); }, [safeStocks]); const renderDonut = useCallback(() => { if (donutData.length === 0) return null; const size = 160; const cx = size / 2; const cy = size / 2; const r = 55; const strokeW = 28; const circumference = 2 * Math.PI * r; let offset = 0; return ( ); }, [donutData]); const formatNum = useCallback((n: number, decimals?: number) => { return n.toLocaleString(lang === "ko" ? "ko-KR" : lang === "ja" ? "ja-JP" : lang === "zh" ? "zh-CN" : "en-US", { minimumFractionDigits: decimals ?? 2, maximumFractionDigits: decimals ?? 2, }); }, [lang]); return (

{/* Header */}

{t("title")}

{safeStocks.length > 0 && ( )}

{/* Scrollable content */}

{safeStocks.length === 0 && !showForm ? ( /* Empty State */

{t("emptyTitle")}

{t("emptyDesc")}

) : ( <> {/* Summary */} {safeStocks.length > 0 && (

{t("totalInvested")}

${formatNum(totalInvested)}

{t("currentValue")}

${formatNum(totalCurrent)}

{t("totalPnL")}

= 0 ? "text-emerald-600" : "text-rose-600"}`}> {totalPnL >= 0 ? "+" : ""}${formatNum(totalPnL)}

= 0 ? "text-emerald-500" : "text-rose-500"}`}> {totalPnL >= 0 ? "+" : ""}{formatNum(totalPnLPercent)}%

{/* Donut Chart */} {donutData.length > 1 && (

{t("portfolio")}

{renderDonut()}

{(donutData || []).map((d, idx) => (

{d.ticker} {(d.value * 100).toFixed(1)}%

))}

)}

)} {/* Add Form */} {showForm && (

{t("addStock")}

setTickerInput(e.target.value)} className="w-full px-3 py-3 rounded-xl bg-slate-50 text-gray-900 placeholder:text-gray-400 text-sm outline-none focus:ring-2 focus:ring-emerald-300" />

setBuyPriceInput(e.target.value)} className="px-3 py-3 rounded-xl bg-slate-50 text-gray-900 placeholder:text-gray-400 text-sm outline-none focus:ring-2 focus:ring-emerald-300" /> setQuantityInput(e.target.value)} className="px-3 py-3 rounded-xl bg-slate-50 text-gray-900 placeholder:text-gray-400 text-sm outline-none focus:ring-2 focus:ring-emerald-300" />

{formError && (

{formError}

)}

)} {/* Stock Cards */} {(safeStocks || []).map((stock) => { const pnl = stock.currentPrice !== null ? (stock.currentPrice - stock.buyPrice) * stock.quantity : 0; const pnlPct = stock.currentPrice !== null && stock.buyPrice > 0 ? ((stock.currentPrice - stock.buyPrice) / stock.buyPrice) * 100 : 0; const isGain = pnl >= 0; const hasPrice = stock.currentPrice !== null; const isEditing = manualEditId === stock.id; return (

{stock.ticker} {stock.quantity} {t("shares")}

{stock.error && !isEditing && ( )} {isOwner(stock) && ( )}

{t("bought")}

${formatNum(stock.buyPrice)}

{t("current")}

{stock.loading ? (

) : hasPrice ? (

${formatNum(stock.currentPrice!)}

) : (

{t("noPrice")}

)}

{t("pnl")}

{stock.loading ? (

) : hasPrice ? (

{isGain ? ( ) : ( )}

{isGain ? "+" : ""}{formatNum(pnlPct)}%

) : (

)}

{hasPrice && (

{isGain ? "+" : ""}${formatNum(pnl)}

)} {stock.error && !isEditing && (

{t("fetchFail")}

)} {isEditing && (

setManualPriceInput(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") handleManualSave(stock.id); }} className="flex-1 px-3 py-2 rounded-xl bg-slate-50 text-gray-900 placeholder:text-gray-400 text-sm outline-none focus:ring-2 focus:ring-amber-300" />

)}

); })} )}

{/* FAB */} {safeStocks.length > 0 && !showForm && ( )}

); }

주식 포트폴리오

주식 포트폴리오

reviews