dpdpdndn 블로그

WATCH-04-FE-감성레이블-뉴스UI

NEW3 min read

[WATCH-04] FE: 감성 레이블 직관화 + 뉴스 리스트 UI 고도화

작업 내용 (설계 의도)

변경 사항

세 가지를 함께 개선한다:

  1. signal.label 행동 레이블을 “매수 유망 / 상승 주목 / 중립 관망 / 하락 주의 / 매도 주의”로 맞춘다 (ML WATCH-01 완료 후 실제 값이 바뀌므로 SignalCard에서 표현 매핑만 업데이트).
  2. SignalCard 뉴스 섹션을 NewsItem 컴포넌트로 교체: 호재/악재/중립 배지, 클릭 가능한 링크, 번역 제목 표시.
  3. 카드 최상단에 NewsSummary 블록(BE에서 조회한 요약 텍스트) 추가.

WATCH-01(ML 뉴스 shape 변경), WATCH-03(BE 요약 API)에 의존한다. WATCH-05가 WatchlistItemCard.tsx를 수정하므로 이 티켓은 SignalCard.tsx·SignalCard.module.css·types/signal.ts만 수정한다.

다이어그램

처리 흐름

sequenceDiagram
    participant FE as WatchlistSection
    participant BE as BE :8080
    participant ML as ML :8000
    FE->>BE: GET /api/v1/watchlist/{symbol}/news
    FE->>ML: GET /signals/{symbol}
    BE-->>FE: {summary, headlines}
    ML-->>FE: Signal
    FE->>FE: render SignalCard(signal, newsSummary, headlines)

클래스 의존

flowchart LR
    WatchlistSection --> SignalCard
    SignalCard --> NewsSummary
    SignalCard --> NewsItem
    SignalCard --> SignalLabel

테스트 케이스

  • SignalLabel이 composite ≥ 0.5일 때 “매수 유망”을 렌더한다
  • SignalLabel이 composite ≥ 0.15일 때 “상승 주목”을 렌더한다
  • SignalLabel이 composite > -0.15일 때 “중립 관망”을 렌더한다
  • SignalLabel이 composite > -0.5일 때 “하락 주의”를 렌더한다
  • SignalLabel이 composite < -0.5일 때 “매도 주의”를 렌더한다
  • NewsItem이 sentiment="호재"일 때 초록색 배지를 렌더한다
  • NewsItem이 sentiment="악재"일 때 빨간색 배지를 렌더한다
  • NewsItem이 링크를 제공할 때 <a href> 요소로 렌더된다
  • NewsSummary가 비어 있으면 섹션 자체가 렌더되지 않는다
  • translated_title이 있으면 원문 대신 번역 제목을 표시한다

그래프 뷰

백링크