[STK4-06] FE 종목 리스트·검색 UI

작업 내용 (설계 의도)

변경 사항

종목 리스트 탭 페이지(StockListPage)와 검색 바(SearchBar) 컴포넌트를 구현한다. 페이지 마운트 시 REST 스냅샷으로 초기 가격을 로드하고, EventSource로 SSE에 연결해 30초 주기로 현재가를 갱신한다. 검색은 디바운스 후 /api/v1/stocks/search?q=를 호출한다. 목표가 알림 등록 화면에서 재사용 가능한 종목 검색 컴포넌트로 분리한다.

선행: STK4-04, STK4-05

다이어그램

처리 흐름

sequenceDiagram
    participant User as 사용자
    participant Page as StockListPage
    participant BE as BE API

    User->>Page: 종목 리스트 탭 진입
    Page->>BE: GET /api/v1/stocks/prices?symbols= (스냅샷)
    BE-->>Page: 초기 가격 데이터
    Page->>BE: GET /api/v1/stocks/prices/stream (SSE 연결)
    loop 30초마다
        BE-->>Page: SSE event {prices:[...]}
        Page->>Page: 화면 갱신
    end
    User->>Page: 검색창에 "삼성" 입력
    Page->>BE: GET /api/v1/stocks/search?q=삼성
    BE-->>Page: 검색 결과

클래스 의존

flowchart LR
    StockListPage --> SearchBar
    StockListPage --> StockListItem
    StockListPage -->|SSE| BE_SSE[BE SSE 엔드포인트]
    SearchBar -->|REST| BE_Search[BE 검색 API]

테스트 케이스

• 리스트 탭 진입 시 종목명·현재가·등락률이 표시된다
• 검색창에 “삼성” 입력 시 관련 종목이 필터링된다
• 종목 코드 “005930” 입력 시 해당 종목이 상단에 표시된다
• SSE 연결 중 가격 이벤트 수신 시 화면이 갱신된다
• 페이지 unmount 시 SSE 연결이 종료된다