STK8-06-frontend-enhanced-recommendations

[STK8-06] Frontend: 추천 종목 탭 단기/중기/장기 예측 UI

작업 내용 (설계 의도)

기존 “추천 종목” 탭에 단기/중기/장기 예측 패널을 추가한다. 각 추천 종목 카드에 단기/중기/장기 탭을 노출하고, 선택한 horizon에 맞는 주 단위 예측 차트와 매도 추천 정보를 표시한다. 기준가는 현재가(lastClose)이므로 매수가 기준 손익 대신 “현재가 대비 예상 변동률(%)“로 표시한다.

API: GET /api/v1/recommendations/enhanced?limit=5

다이어그램

처리 흐름

sequenceDiagram
    participant U as 사용자
    participant UI as Recommend UI
    participant AGG as Aggregator
    U->>UI: "추천 종목" 탭 진입
    UI->>AGG: GET /api/v1/recommendations/enhanced?limit=5
    AGG-->>UI: 추천 5종목 + 각 단기/중기/장기 예측
    U->>UI: 종목 카드에서 "중기" 탭 클릭
    UI-->>U: 중기 예측 차트 + 매도 추천 주차 + 예상 변동률 표시

클래스 의존

flowchart LR
    RecommendationsPage --> RecommendationCard
    RecommendationCard --> HorizonTabSelector
    HorizonTabSelector --> ForecastChart
    HorizonTabSelector --> SellRecommendationCard

테스트 케이스

• 추천 종목 목록이 단기/중기/장기 탭과 함께 표시된다
• 각 탭 클릭 시 해당 horizon의 주 단위 예측 차트가 갱신된다
• 매도 추천 카드에 추천 주차, 예상 가격, 현재가 대비 예상 변동률이 표시된다
• API 응답 로딩 중 스켈레톤 UI가 표시된다
• 일부 종목의 예측이 없을 경우 해당 종목만 ”-” 처리되고 나머지는 정상 표시된다