53 lines
2.1 KiB
Markdown
53 lines
2.1 KiB
Markdown
# 이력 조회 상태 표시기 구현
|
|
|
|
## 개요
|
|
이력 조회 페이지의 '▼ 옵션 불러오기' 버튼 오른쪽에 상태 표시기를 추가하여, 태그 목록 조회 상태를 시각적으로 표시합니다.
|
|
|
|
## 구현 내용
|
|
|
|
### 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. 태그 선택 시 페이지 반응성 확인
|