# GUID 엑셀 변환 시 슬롯 우선순위 설정 기능 구현

## 📋 개요

GUID to Excel 버튼 클릭 시 슬롯 우선순위(slot 31~40)를 사용자가 직접 지정할 수 있는 모달창을 추가하여, 지정된 순서대로 엑셀 파일에 저장되도록 기능을 구현했습니다.

## ✨ 주요 기능

### 1. **모달창 기반 UI**
- GUID to Excel 버튼 클릭 시 모달창 표시
- Slot 31~40의 우선순위를 드래그 앤 드롭으로 변경 가능
- 기본값 복원 버튼으로 초기 순서로 리셋 가능

### 2. **드래그 앤 드롭 인터페이스**
- **SortableJS** 라이브러리 사용
- 직관적인 슬롯 순서 조정
- 실시간으로 순위 번호 업데이트

### 3. **백엔드 처리**
- 사용자가 지정한 슬롯 순서를 환경변수로 전달
- `GUIDtxtT0Execl.py` 스크립트에서 슬롯 우선순위를 읽어서 처리
- 지정된 순서대로 엑셀 컬럼 정렬

## 🔧 구현 세부사항

### Frontend 변경사항

#### **index.html**

**모달창 추가:**
```html
<div class="modal fade" id="slotPriorityModal">
  <!-- 슬롯 우선순위 설정 UI -->
  <ul id="slotList" class="list-group">
    <!-- JavaScript로 동적 생성 -->
  </ul>
  <form id="slotPriorityForm" action="/update_guid_list" method="post">
    <input type="hidden" name="slot_priority" id="slot_priority_input">
    <!-- 서버 리스트 내용도 함께 전달 -->
  </form>
</div>
```

**JavaScript 로직:**
- `SortableJS` 라이브러리를 사용하여 드래그 앤 드롭 구현
- 기본 슬롯 순서: `['38', '39', '37', '36', '32', '33', '34', '35', '31', '40']`
- 폼 제출 시 슬롯 순서를 콤마로 구분된 문자열로 전달

### Backend 변경사항

#### **utilities.py**

```python
@utils_bp.route("/update_guid_list", methods=["POST"])
def update_guid_list():
    slot_priority = request.form.get("slot_priority", "")
    
    # 환경변수로 슬롯 우선순위 전달
    env = os.environ.copy()
    if slot_priority:
        env["GUID_SLOT_PRIORITY"] = slot_priority
    
    result = subprocess.run(
        [sys.executable, "GUIDtxtT0Execl.py"],
        env=env,  # 환경변수 전달
        ...
    )
```

#### **GUIDtxtT0Execl.py**

```python
# 환경변수에서 슬롯 우선순위 읽기
slot_priority_str = os.getenv("GUID_SLOT_PRIORITY", "")
if slot_priority_str:
    SLOT_PRIORITY = [s.strip() for s in slot_priority_str.split(",")]
else:
    # 기본 우선순위
    SLOT_PRIORITY = ['38', '39', '37', '36', '32', '33', '34', '35', '31', '40']

# 데이터 재정렬
for slot_num in SLOT_PRIORITY:
    slot_key = f"Slot.{slot_num}"
    if slot_key in parsed_data:
        reordered_data[slot_key] = parsed_data[slot_key]
```

## 📊 사용 흐름

1. **서버 리스트 입력**: 텍스트 영역에 서버 목록 입력
2. **GUID to Excel 버튼 클릭**: 모달창 표시
3. **슬롯 우선순위 설정**: 드래그 앤 드롭으로 순서 변경
4. **확인 버튼 클릭**: 설정된 순서로 엑셀 생성
5. **결과 확인**: 지정된 슬롯 순서대로 엑셀에 저장됨

## 🎨 UI 특징

- **직관적인 디자인**: 순위 번호가 원형 배지로 표시
- **시각적 피드백**: 드래그 시 반투명 효과 및 하이라이트
- **기본값 복원**: 한 번의 클릭으로 초기 순서로 리셋
- **반응형**: 모달창 크기 조정 가능

## 🔍 기술 스택

- **Frontend**:
  - Bootstrap 5 (모달, 스타일링)
  - SortableJS 1.15.0 (드래그 앤 드롭)
  - Vanilla JavaScript (로직 처리)

- **Backend**:
  - Flask (라우팅)
  - Python subprocess (스크립트 실행)
  - 환경변수 (슬롯 순서 전달)

- **데이터 처리**:
  - Pandas (엑셀 생성)
  - OrderedDict (순서 유지)

## ⚠️ 주의사항

1. **서버 리스트 필수**: 모달 열기 전에 서버 리스트를 입력해야 함
2. **슬롯 개수**: 현재는 10개 슬롯(31~40) 기준으로 구현
3. **호환성**: 기존 *.txt 파일 형식과 호환됨

## 🚀 향후 개선 방안

1. **동적 슬롯 개수**: txt 파일에서 실제 존재하는 슬롯만 표시
2. **프리셋 저장**: 자주 사용하는 슬롯 순서를 프리셋으로 저장
3. **일괄 적용**: 여러 서버에 동일한 슬롯 순서 적용
4. **검증 강화**: 슬롯 번호 유효성 검사 추가

## ✅ 테스트 시나리오

1. ✓ 모달창 정상 표시
2. ✓ 드래그 앤 드롭 동작 확인
3. ✓ 기본값 복원 버튼 동작
4. ✓ 슬롯 순서가 백엔드로 정상 전달
5. ✓ 엑셀 파일에 순서대로 저장
6. ✓ 환경변수 전달 확인
7. ✓ 기본 순서 동작 (슬롯 우선순위 미지정 시)

## 📝 관련 파일

- `backend/templates/index.html` - 모달 UI 및 JavaScript
- `backend/routes/utilities.py` - 백엔드 라우트 처리
- `data/server_list/GUIDtxtT0Execl.py` - 엑셀 생성 로직