Srope — 프로젝트 확장

주식 UI 패턴

srope 프로젝트의 주식/시세 화면에서 반복되는 UI 패턴을 doksam-ui 표준 컴포넌트와 시맨틱 토큰으로 재작성한 모음입니다. 등락률 색상은 한국 관례(상승=빨강, 하락=파랑)를 유지하되 하드코딩 hex 대신 text-destructive · text-chart-1 토큰으로 표현합니다.

#25

종목 카드

시세 + 등락 + PER/PBR + 52주 범위를 한 카드에 담은 시세 스냅샷.

삼성전자

005930 · 반도체 · KOSPI

KOSPI

72,400+1,200 (+1.68%)

PER 12.5PBR 1.32

52주 최저 55,80052주 최고 89,000

카카오

035720 · 플랫폼 · KOSPI

KOSPI

48,500-900 (-1.82%)

PER 28.4PBR 1.05

52주 최저 36,20052주 최고 61,400

<Card>
  <CardHeader className="pb-2">
    <p className="text-sm font-semibold">{quote.name}</p>
    <p className="text-xs text-muted-foreground">{quote.code} · {quote.sector}</p>
  </CardHeader>
  <CardContent className="space-y-3">
    <span className="text-2xl font-bold tabular-nums">{quote.currentPrice.toLocaleString()}</span>
    <span className={rateToneClass(quote.changePercent)}>
      {rateSign(quote.priceChange)}{quote.priceChange} ({rateSign(quote.changePercent)}{quote.changePercent}%)
    </span>
    {/* 52주 범위 바 — currentPrice 위치를 low~high 사이 % 로 환산 */}
  </CardContent>
</Card>

등락 색상은 rateToneClass() 유틸로 계산 — 상승 text-destructive / 하락 text-chart-1 / 보합 text-muted-foreground.
52주 범위 바는 (currentPrice - low) / (high - low) 로 위치를 계산해 primary 색 막대로 표시.
가격·비율은 항상 tabular-nums 로 자릿수를 정렬한다.

#26

시장 방향

선물/지수 스냅샷 — 상승/하락 방향 아이콘 + 색상.

시장 방향

야간선물

351.20+2.15%

KOSPI

2,687.44-0.32%

KOSDAQ

845.12+1.08%

{item.change > 0 ? (
  <TrendUpIcon size={16} weight="bold" className="text-destructive" />
) : (
  <TrendDownIcon size={16} weight="bold" className="text-chart-1" />
)}
<span className={rateToneClass(item.change)}>{rateSign(item.change)}{item.change}%</span>

TrendUpIcon(상승) / TrendDownIcon(하락) 조합으로 방향을 즉시 인지 가능하게 한다.
보합(0%)은 별도 아이콘 없이 text-muted-foreground 로만 표시한다.

#27

매매 시그널

verdict 배지(강력매수~강력매도) + 매수/보유/매도 비중 점수 바.

종합 시그널

삼성전자강력매수

외인 3일 연속 순매수, 반도체 업황 개선

카카오보유

실적 부진이나 광고 매출 반등 기대

하이브매도

BTS 공백기, 실적 하향 전망

<Badge variant={signal.verdictVariant}>{signal.verdictLabel}</Badge>
<div className="flex h-2 overflow-hidden rounded-full bg-secondary">
  <div className="bg-success" style={{ width: `${signal.buyPercent}%` }} />
  <div className="bg-warning" style={{ width: `${signal.holdPercent}%` }} />
  <div className="bg-destructive" style={{ width: `${signal.sellPercent}%` }} />
</div>

verdict 배지 매핑: 강력매수·매수=default, 보유=secondary, 매도·강력매도=destructive.
점수 바는 매매 판단(신호) 색상이라 등락 색상과 별개로 success(매수)/warning(보유)/destructive(매도) 토큰을 쓴다.

#28

재료 알림 + 센티먼트

방향(호재/악재/중립) + 강도 바 + 감성 배지.

재료 알림

SK하이닉스실적긍정

HBM3E 납품 확대 전망

LG에너지솔루션정책부정

EU 관세 리스크 부각

NAVER수급중립

외인 소폭 순매수 전환

function DirectionIcon({ dir }: { dir: "bullish" | "bearish" | "neutral" }) {
  if (dir === "bullish") return <ArrowUpIcon className="text-destructive" />
  if (dir === "bearish") return <ArrowDownIcon className="text-chart-1" />
  return <MinusIcon className="text-muted-foreground" />
}
// 강도 바: >=70 destructive, >=40 warning, else muted-foreground
// 센티먼트 배지: 긍정=default, 부정=destructive, 중립=secondary

방향 아이콘: bullish=ArrowUpIcon(destructive), bearish=ArrowDownIcon(chart-1), neutral=MinusIcon(muted).
강도 바 임계값: 70 이상 destructive, 40 이상 warning, 그 외 muted-foreground.

#31

워치리스트 게이지

게이지(Progress) + 원인 태그 + 활성/만료 상태.

포스코퓨처엠

활성

재료 85외인 매수

재료활성 · 양극재 수요 회복 기대

에코프로비엠

활성

재료 40외인 매도

외인매도 · 실적 대비 밸류에이션 부담

LG화학

만료

재료 15외인 중립

재료소멸 · 배터리 분사 영향 관망

<Progress value={item.gaugeValue} className="h-1.5" />
<p className={item.causeTone === "success" ? "text-success" : "text-destructive"}>
  {item.causeLabel} · {item.causeDescription}
</p>

게이지는 components/ui/progress 를 그대로 사용 — 별도 커스텀 게이지 컴포넌트를 만들지 않는다.
원인(cause) 톤은 도메인 의미(호재/악재)에 따라 success/destructive 중 선택해 직접 지정한다.

#30

일별 추적 테이블

D+1~D+5 등락률 + 재료 배지 + 소스 아이콘.

종목	추천가	D+1	D+2	D+3	D+4	D+5	재료
삼성전자	71,200	+1.7%	+0.4%	-0.3%	+1.1%	+0.8%	활성
SK하이닉스	195,000	+2.3%	+1.5%	+3.1%	-0.5%	+2.0%	강화
카카오	52,000	-1.1%	-0.8%	-2.3%	+0.4%	-1.5%	약화

<TableCell className={rateToneClass(rate)}>{rateSign(rate)}{rate.toFixed(1)}%</TableCell>
<Badge variant={catalystVariant(row.catalyst)}>{row.catalyst}</Badge>
{/* 소스 아이콘: news=warning, youtube=destructive, report=chart-1 */}

등락률 셀은 rateToneClass() 로 통일해 다른 섹션과 색상 규칙을 일치시킨다.
재료 배지: 활성/강화=default, 약화=secondary, 소멸=destructive.

#32

시뮬레이션 결과

요약 카드 4개 + 포트폴리오 가치 추이 차트 + 거래 내역 테이블.

총수익률

+18.5%

MDD

-8.2%

승률

65.0%

평균보유

4.2일

포트폴리오 가치 추이

종목	구분	날짜	가격	수량	사유
삼성전자	매수	04-01	68,000	10	시그널 매수
SK하이닉스	매수	04-02	195,000	3	돌파 매수
삼성전자	매도	04-05	72,400	10	목표가 도달

const chartConfig = { value: { label: "포트폴리오 가치", color: "var(--chart-1)" } } satisfies ChartConfig

<ChartContainer config={chartConfig} className="max-h-48 w-full">
  <LineChart data={PORTFOLIO_VALUE}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="day" tickLine={false} axisLine={false} />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Line dataKey="value" type="monotone" stroke="var(--color-value)" strokeWidth={2} dot={false} />
  </LineChart>
</ChartContainer>

차트 시리즈 색상은 chart-1~5 토큰만 사용하고 hex를 하드코딩하지 않는다.
recharts 는 브라우저 API(ResizeObserver)에 의존하므로 차트 부분만 별도 "use client" 파일로 분리한다.

주식 UI 패턴

<Card> <CardHeader className="pb-2"> <p className="text-sm font-semibold">{quote.name}</p> <p className="text-xs text-muted-foreground">{quote.code} · {quote.sector}</p> </CardHeader> <CardContent className="space-y-3"> <span className="text-2xl font-bold tabular-nums">{quote.currentPrice.toLocaleString()}</span> <span className={rateToneClass(quote.changePercent)}> {rateSign(quote.priceChange)}{quote.priceChange} ({rateSign(quote.changePercent)}{quote.changePercent}%) </span> {/* 52주 범위 바 — currentPrice 위치를 low~high 사이 % 로 환산 */} </CardContent> </Card>

{item.change > 0 ? ( <TrendUpIcon size={16} weight="bold" className="text-destructive" /> ) : ( <TrendDownIcon size={16} weight="bold" className="text-chart-1" /> )} <span className={rateToneClass(item.change)}>{rateSign(item.change)}{item.change}%</span>

<Badge variant={signal.verdictVariant}>{signal.verdictLabel}</Badge> <div className="flex h-2 overflow-hidden rounded-full bg-secondary"> <div className="bg-success" style={{ width: `${signal.buyPercent}%` }} /> <div className="bg-warning" style={{ width: `${signal.holdPercent}%` }} /> <div className="bg-destructive" style={{ width: `${signal.sellPercent}%` }} /> </div>

function DirectionIcon({ dir }: { dir: "bullish" | "bearish" | "neutral" }) { if (dir === "bullish") return <ArrowUpIcon className="text-destructive" /> if (dir === "bearish") return <ArrowDownIcon className="text-chart-1" /> return <MinusIcon className="text-muted-foreground" /> } // 강도 바: >=70 destructive, >=40 warning, else muted-foreground // 센티먼트 배지: 긍정=default, 부정=destructive, 중립=secondary

종목

추천가

D+1

D+2

D+3

D+4

D+5

재료

소스

삼성전자

71,200

+1.7%

+0.4%

-0.3%

+1.1%

+0.8%

활성

SK하이닉스

195,000

+2.3%

+1.5%

+3.1%

-0.5%

+2.0%

강화

카카오

52,000

-1.1%

-0.8%

-2.3%

+0.4%

-1.5%

약화

<TableCell className={rateToneClass(rate)}>{rateSign(rate)}{rate.toFixed(1)}%</TableCell> <Badge variant={catalystVariant(row.catalyst)}>{row.catalyst}</Badge> {/* 소스 아이콘: news=warning, youtube=destructive, report=chart-1 */}

종목

구분

날짜

가격

수량

사유

삼성전자

매수

04-01

68,000

시그널 매수

SK하이닉스

매수

04-02

195,000

돌파 매수

삼성전자

매도

04-05

72,400

목표가 도달

const chartConfig = { value: { label: "포트폴리오 가치", color: "var(--chart-1)" } } satisfies ChartConfig <ChartContainer config={chartConfig} className="max-h-48 w-full"> <LineChart data={PORTFOLIO_VALUE}> <CartesianGrid vertical={false} /> <XAxis dataKey="day" tickLine={false} axisLine={false} /> <ChartTooltip content={<ChartTooltipContent />} /> <Line dataKey="value" type="monotone" stroke="var(--color-value)" strokeWidth={2} dot={false} /> </LineChart> </ChartContainer>