ExperionCrawler/plans/history-query-status-indicator.md

이력 조회 상태 표시기 구현

개요

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

구현 내용

1. HTML 구조 (index.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)

• .hist-status: 상태 표시기 컨테이너
• .hist-status.loading: 조회 중 (파란색)
• .hist-status.success: 조회 완료 (초록색)
• .hist-status.error: 조회 실패 (빨간색)
• 성능 최적화: contain: layout style, transform: translateZ(0)

3. JavaScript 로직 (app.js)

• histUpdateStatus(state, message): 상태 표시기 업데이트
• histLoad(): 태그 목록 조회 및 상태 업데이트
  • 조회 시작: ⏳ 조회 중...
  • 조회 완료: ✅ 조회 완료 (개수, 초)
  • 데이터 없음: ❌ 조회 데이터 없음 (0개)
  • 오류: ❌ 조회 실패: 메시지

수정된 문제들

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

남은 문제 (추가 작업 필요)

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

테스트 방법

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