[STK2-08] FE 시그널 탭 + 알림 연계

작업 내용 (설계 의도)

변경 사항

• SignalCard(인라인 알림 form), StockSearchInput(250ms 디바운스 자동완성).
• signalApi.ts: ML(:8000) 직접 호출(NEXT_PUBLIC_SIGNAL_BASE_URL).
• “이 가격에 알림” → BE POST /api/v1/alerts 재사용(목표가 기본=현재가).
• 색상: 상승/긍정 빨강, 하락/부정 파랑, 중립 회색, primary 토스블루.

의존

• 선행: STK2-06
• 후행: 없음

다이어그램

처리 흐름

sequenceDiagram
    participant User as 사용자
    participant SI as SignalTab (FE)
    participant ML as ML 서비스 (:8000)
    participant BE as BE (:8080)
    User->>SI: 종목 검색 (250ms 디바운스)
    SI->>ML: GET /signals/{symbol}
    ML-->>SI: Signal JSON
    SI->>SI: SignalCard 렌더링 (색상 매핑)
    User->>SI: "이 가격에 알림" 클릭
    SI->>BE: POST /api/v1/alerts (목표가, 방향)
    BE-->>SI: 201 Created
    SI-->>User: 알림 등록 완료 표시

클래스 의존

flowchart LR
    subgraph FE["FE (Next.js)"]
        SignalTab["SignalTab (page)"]
        SignalCard["SignalCard (component)"]
        StockSearch["StockSearchInput (component)"]
        signalApi["signalApi.ts"]
        alertApi["alertApi.ts"]
    end
    subgraph External["External"]
        ML["ML :8000"]
        BE["BE :8080"]
    end
    SignalTab --> SignalCard
    SignalTab --> StockSearch
    SignalCard --> signalApi
    SignalCard --> alertApi
    signalApi --> ML
    alertApi --> BE

테스트 케이스

• 시그널 카드에서 목표가·방향을 입력하면 POST /api/v1/alerts가 호출된다.
• ML 서비스가 응답 오류를 반환하면 시그널 카드에 에러 상태가 표시된다.
• composite 양수면 카드 색상이 빨강, 음수면 파랑, 0이면 회색으로 렌더링된다.
• 검색 입력 후 250ms 이내 재입력 시 API 호출이 1회만 발생한다(디바운스).
• NEXT_PUBLIC_SIGNAL_BASE_URL 미설정 시 시그널 탭이 비활성 상태를 표시한다.