# 이력 조회 상태 표시기 구현

## 개요
이력 조회 페이지의 '▼ 옵션 불러오기' 버튼 오른쪽에 상태 표시기를 추가하여, 태그 목록 조회 상태를 시각적으로 표시합니다.

## 구현 내용

### 1. HTML 구조 ([`index.html`](src/Web/wwwroot/index.html:503))
```html
<div class="fg">
  <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
    <span>태그 선택 <em>(최대 8개, OR 조건)</em></span>
    <button class="btn-b btn-sm" onclick="histLoad()">▼ 옵션 불러오기</button>
    <span id="hist-load-status" class="hist-status">대기 중</span>
  </div>
  <div class="pb-name-grid">
    <!-- select 8개 -->
  </div>
</div>
```

### 2. CSS 스타일 ([`style.css`](src/Web/wwwroot/css/style.css:815))
- `.hist-status`: 상태 표시기 컨테이너
- `.hist-status.loading`: 조회 중 (파란색)
- `.hist-status.success`: 조회 완료 (초록색)
- `.hist-status.error`: 조회 실패 (빨간색)
- 성능 최적화: `contain: layout style`, `transform: translateZ(0)`

### 3. JavaScript 로직 ([`app.js`](src/Web/wwwroot/js/app.js:688))
- `histUpdateStatus(state, message)`: 상태 표시기 업데이트
- `histLoad()`: 태그 목록 조회 및 상태 업데이트
  - 조회 시작: `⏳ 조회 중...`
  - 조회 완료: `✅ 조회 완료 (개수, 초)`
  - 데이터 없음: `❌ 조회 데이터 없음 (0개)`
  - 오류: `❌ 조회 실패: 메시지`

## 수정된 문제들
1. 초기 상태 "준비됨" → "대기 중"으로 변경
2. 레이아웃 구조 개선 (flex 컨테이너 사용)
3. CSS 애니메이션 제거 및 성능 최적화
4. `requestAnimationFrame`으로 DOM 업데이트 지연

## 남은 문제 (추가 작업 필요)
- 태그 선택 시 페이지 hang 현상 원인 파악 필요
  - `pb-name-grid`의 CSS grid 레이아웃과 select 요소 8개의 상호작용
  - 브라우저 호환성 문제 가능성
  - 메모리 누락 가능성

## 테스트 방법
1. 이력 조회 탭 진입 → "대기 중" 표시 확인
2. '▼ 옵션 불러오기' 클릭 → 상태 변화 확인
3. 태그 선택 시 페이지 반응성 확인