STK8-05-frontend-portfolio

[STK8-05] Frontend: 포트폴리오 입력 UI + 손익 대시보드

작업 내용 (설계 의도)

“내 포트폴리오” 탭을 신설한다. 종목 코드 · 종목명 · 평균 매수가 · 보유 수량을 입력하여 등록하고, 현재가 대비 손익(금액 + 수익률)을 목록으로 표시한다.

각 종목 클릭 시 단기/중기/장기 탭으로 전환되며, 해당 horizon의 예측 차트와 매도 추천 정보(추천 주차, 예상 매도가, 예상 손익)를 표시한다.

Aggregator API:

• GET /api/v1/portfolio → 목록 + 손익
• POST /api/v1/portfolio → 추가
• PUT /api/v1/portfolio/{symbol} → 수정
• DELETE /api/v1/portfolio/{symbol} → 삭제
• GET /api/v1/portfolio/{symbol}/analysis → 예측 + 매도 추천

다이어그램

처리 흐름

sequenceDiagram
    participant U as 사용자
    participant UI as Portfolio UI
    participant AGG as Aggregator
    U->>UI: "삼성전자, 50000원, 100주" 입력 후 추가
    UI->>AGG: POST /api/v1/portfolio
    AGG-->>UI: ManualHoldingResponse
    UI->>AGG: GET /api/v1/portfolio
    AGG-->>UI: 목록 + 손익 (현재가 포함)
    U->>UI: 종목 클릭 → "단기" 탭 선택
    UI->>AGG: GET /api/v1/portfolio/{symbol}/analysis
    AGG-->>UI: 예측 + 매도 추천

클래스 의존

flowchart LR
    PortfolioPage --> PortfolioList
    PortfolioPage --> AddHoldingModal
    PortfolioList --> HoldingRow
    HoldingRow --> AnalysisPanel
    AnalysisPanel --> ForecastChart
    AnalysisPanel --> SellRecommendationCard

테스트 케이스

• 포트폴리오 추가 폼에서 매수가 0 입력 시 유효성 오류가 표시된다
• 목록에서 수익 종목은 초록색, 손실 종목은 빨간색으로 표시된다
• 종목 클릭 후 단기/중기/장기 탭 전환이 동작한다
• 각 탭에서 매도 추천 카드(추천 주차, 예상 매도가, 예상 손익)가 표시된다
• 중복 symbol 추가 시 서버 오류 메시지가 화면에 표시된다
• 삭제 확인 모달 → 확인 클릭 시 항목이 목록에서 제거된다