diff --git a/web/components/PriceTargets.tsx b/web/components/PriceTargets.tsx index 1b65863..985051b 100644 --- a/web/components/PriceTargets.tsx +++ b/web/components/PriceTargets.tsx @@ -7,6 +7,7 @@ import { useEffect, useMemo, useState } from "react"; import { readTargets, writeTargets, type Targets } from "../lib/targets"; +import { Collapsible } from "./Collapsible"; type Props = { code: string; @@ -69,12 +70,24 @@ export function PriceTargets({ code, current, onChange }: Props) { const pctCls = (p: number | null): string => p == null ? "text-zinc-500" : p >= 0 ? "text-rose-400" : "text-sky-400"; + // 접힌 상태에서도 유저가 어떤 값을 저장해뒀는지 한눈에 — 둘 다 없으면 InvestmentNote 와 + // 같은 톤의 "비공개 · 브라우저 저장" 안내. 저장값(savedN)이 아닌 dirty 입력값을 보여주면 + // 토글 사이클 사이에 안내가 깜빡여 혼란. saved 기준만 표시. + const fmtNum = (n: number): string => + n.toLocaleString(undefined, { maximumFractionDigits: 0 }); + const subtitle = + saved.target != null && saved.stop != null + ? `목표 ${fmtNum(saved.target)} · 손절 ${fmtNum(saved.stop)}` + : saved.target != null + ? `목표 ${fmtNum(saved.target)}` + : saved.stop != null + ? `손절 ${fmtNum(saved.stop)}` + : "비공개 · 브라우저 저장"; + return ( -
-
-

내 목표가

- 브라우저 저장 · 비공개 -
+ // defaultOpen=true — 입력 중인 텍스트는 Collapsible 의 hidden 본문 덕에 토글로 사라지지 + // 않지만, 처음 보는 사용자에겐 input 이 펴져 있어야 "여기서 목표가를 적는다" 가 자명. +
현재가 로딩 중 — 변동률은 잠시 후 표시
)} -
+ ); }