WATCH-05-FE-세부페이지-예측차트

[WATCH-05] FE: 관심종목 세부 페이지 + 예측 차트

작업 내용 (설계 의도)

변경 사항

관심종목 카드 클릭 시 /watchlist/[symbol] 페이지로 이동하고, 세부 페이지에서 최근 20일 실제 종가 + 향후 5일 예측 곡선을 SVG 기반 라인 차트로 렌더한다. WatchlistItemCard에 클릭 핸들러(router.push)를 추가한다. WATCH-02(ML /predictions 엔드포인트)에 의존한다. WATCH-04는 SignalCard.tsx만 건드리고 이 티켓은 WatchlistItemCard.tsx·신규 페이지·신규 컴포넌트만 건드리므로 파일 충돌 없음.

다이어그램

처리 흐름

sequenceDiagram
    participant U as User
    participant FE as WatchlistItemCard
    participant DP as watchlist/[symbol]
    participant ML as ML :8000
    U->>FE: 카드 클릭
    FE->>DP: router.push('/watchlist/SYMBOL')
    DP->>ML: GET /predictions/{symbol}
    ML-->>DP: {historical, predicted, note}
    DP->>U: PredictionChart 렌더

클래스 의존

flowchart LR
    WatchlistItemCard -->|click| DetailPage["app/watchlist/[symbol]/page.tsx"]
    DetailPage --> PredictionChart
    DetailPage --> SignalCard
    PredictionChart --> SVG["SVG 라인 차트"]

테스트 케이스

• WatchlistItemCard가 클릭 시 /watchlist/{symbol} 경로로 router.push를 호출한다
• PredictionChart가 historical 데이터포인트를 실선으로 렌더한다
• PredictionChart가 predicted 데이터포인트를 점선으로 렌더한다
• PredictionChart가 upper/lower 밴드를 반투명 영역으로 렌더한다
• PredictionChart에 주의 문구(“투자 판단 근거로 사용하지 마십시오”)가 표시된다
• ML /predictions 호출 실패 시 차트 자리에 오류 메시지를 표시한다
• 세부 페이지가 unknown symbol 접근 시 “종목을 찾을 수 없습니다” 상태를 렌더한다
• 세부 페이지에서 ”← 관심종목 목록” 뒤로 가기 링크가 동작한다