[STK3-06] FE 추천 카드 + 알림 연계

작업 내용 (설계 의도)

변경 사항

• RecommendationCard(진입가·시점·근거 표시).
• “이 진입가로 알림 등록” → BE POST /api/v1/alerts(targetPrice=entry, direction=BELOW, note=“추천 진입가”).
• recommendationApi.ts: ML 직접 호출.

의존

• 선행: STK3-04
• 후행: 없음

다이어그램

처리 흐름

sequenceDiagram
    participant U as 사용자
    participant FE as RecommendationCard
    participant ML as ML /recommendations
    participant BE as BE /api/v1/alerts
    FE->>ML: GET /recommendations?limit
    ML-->>FE: recommendations[]
    Note over FE: 카드 렌더(종목·점수·진입가·시점·근거)
    U->>FE: "이 진입가로 알림 등록" 클릭
    FE->>BE: POST /api/v1/alerts\n(targetPrice=entry, direction=BELOW,\nnote="추천 진입가")
    BE-->>FE: 201 Created
    Note over FE: 등록 완료 토스트

클래스 의존

flowchart LR
    subgraph FE["FE"]
        card["RecommendationCard\n컴포넌트"]
        recApi["recommendationApi.ts"]
        alertApi["alertApi.ts"]
    end
    subgraph External["External"]
        ML["ML :8000\n/recommendations"]
        BE["BE\n/api/v1/alerts"]
    end
    card --> recApi
    card --> alertApi
    recApi --> ML
    alertApi --> BE

테스트 케이스

• 추천 목록이 점수 내림차순으로 카드 리스트에 렌더된다.
• 카드에 진입가·시점·근거가 올바르게 표시된다.
• “이 진입가로 알림 등록” 클릭 시 targetPrice=entry, direction=BELOW, note=“추천 진입가”로 BE에 등록된다.
• 알림 등록 성공 시 완료 토스트가 표시된다.
• 추천 API 호출 실패 시 에러 메시지가 표시되고 빈 화면이 되지 않는다.