# GUID 슬롯 완전 자유 편집 기능 (최종 완성) ## 🎉 완벽한 유연성 달성! 이제 **1개, 3개, 5개, 100개** 등 **어떤 개수의 슬롯**이든 자유롭게 설정할 수 있습니다! ## ✨ 핵심 기능 ### 1. **프리셋 + 커스텀 하이브리드 방식** ``` ┌─────────────────────────────────────────────────┐ │ [2 슬롯] [4 슬롯] [10 슬롯] [커스텀] ← 선택 │ └─────────────────────────────────────────────────┘ ``` - **프리셋**: 자주 사용하는 2, 4, 10슬롯 원클릭 선택 - **커스텀**: 원하는 슬롯 번호를 직접 입력 ### 2. **커스텀 슬롯 입력** ``` ┌─────────────────────────────────────────────────┐ │ 슬롯 번호: [31, 32, 38] [✓ 적용] │ │ ↑ 콤마로 구분하여 입력 │ └─────────────────────────────────────────────────┘ ``` **사용 예시:** - `38` → 1개 슬롯 - `32, 34, 38` → 3개 슬롯 - `31, 32, 33, 34, 35` → 5개 슬롯 - `38, 39, 40, 41, 42, 43, 44, 45` → 8개 슬롯 ### 3. **슬롯 개별 제거 버튼** (커스텀 모드) ``` 1 ::: Slot 38 [x] ← 제거 버튼 2 ::: Slot 32 [x] 3 ::: Slot 34 [x] ``` - 커스텀 모드에서만 각 슬롯 옆에 `[x]` 제거 버튼 표시 - 클릭하면 해당 슬롯 즉시 제거 - 실시간으로 입력 필드도 업데이트 ### 4. **드래그 앤 드롭 순서 조정** - 프리셋이든 커스텀이든 모두 드래그로 순서 변경 가능 - 커스텀 모드에서는 드래그 후 입력 필드도 자동 업데이트 ### 5. **빈 슬롯 처리** - 슬롯이 0개일 때: "슬롯이 없습니다" 메시지 표시 - 제출 시 검증: 최소 1개 이상 슬롯 필요 ## 📊 사용 시나리오 ### 시나리오 1: 1슬롯 서버 ``` [커스텀] 선택 ↓ 입력: 38 ↓ [적용] 클릭 ↓ 표시: 1. Slot 38 ↓ txt 파일: ABC1234 Slot.38: XXX GUID: 0xXXX ``` ### 시나리오 2: 3슬롯 서버 ``` [커스텀] 선택 ↓ 입력: 32, 34, 38 ↓ [적용] 클릭 ↓ 표시: 1. Slot 32 [x] 2. Slot 34 [x] 3. Slot 38 [x] ↓ 드래그로 순서 변경 (예: 38, 34, 32) ↓ txt 파일: ABC1234 Slot.38: XXX Slot.34: YYY Slot.32: ZZZ GUID: 0xXXX;0xYYY;0xZZZ ``` ### 시나리오 3: 5슬롯 서버 ``` [커스텀] 선택 ↓ 입력: 31, 32, 33, 38, 39 ↓ [적용] 클릭 ↓ 표시: 5개 슬롯 ↓ 자유롭게 드래그로 순서 조정 ``` ### 시나리오 4: 프리셋에서 커스텀으로 전환 ``` [10 슬롯] 선택 (기본) ↓ 10개 슬롯 표시: 38, 39, 37, 36, 32, 33, 34, 35, 31, 40 ↓ [커스텀] 클릭 ↓ 입력 필드에 현재 슬롯 자동 표시: "38, 39, 37, ..." ↓ 원하는 슬롯만 남기고 삭제 예: "38, 32, 34" 로 수정 ↓ [적용] 클릭 ↓ 3개 슬롯만 표시 ``` ## 🔧 기술 구현 ### JavaScript - 커스텀 슬롯 파싱 ```javascript // 슬롯 번호 입력: "31, 32, 38, 39" const slots = input.split(',') .map(s => s.trim()) // 공백 제거 .filter(s => s !== '') // 빈 문자열 제거 .filter(s => /^\d+$/.test(s)) // 숫자만 허용 .filter((v, i, a) => a.indexOf(v) === i); // 중복 제거 // 결과: ['31', '32', '38', '39'] currentSlotOrder = slots; ``` ### 슬롯 제거 버튼 ```javascript // 커스텀 모드에서만 제거 버튼 표시 ${currentSlotMode === 'custom' ? `` : '' } // 제거 버튼 클릭 시 btn.addEventListener('click', function() { const slotToRemove = this.getAttribute('data-slot'); currentSlotOrder = currentSlotOrder.filter(s => s !== slotToRemove); renderSlotList(); customSlotNumbers.value = currentSlotOrder.join(', '); }); ``` ### Enter 키 지원 ```javascript customSlotNumbers.addEventListener('keypress', function(e) { if (e.key === 'Enter') { applyCustomSlots.click(); // 적용 버튼 클릭 } }); ``` ### 빈 슬롯 검증 ```javascript // 폼 제출 시 if (currentSlotOrder.length === 0) { e.preventDefault(); alert('최소 1개 이상의 슬롯을 설정하세요.'); return; } ``` ## 💡 UI/UX 특징 ### 1. **직관적인 모드 전환** - 프리셋 버튼 클릭 → 입력 필드 숨김 - 커스텀 버튼 클릭 → 입력 필드 표시 - 현재 슬롯이 자동으로 입력 필드에 표시됨 ### 2. **실시간 동기화** - 드래그로 순서 변경 → 입력 필드 자동 업데이트 (커스텀 모드) - `[x]` 버튼으로 제거 → 입력 필드 자동 업데이트 - 입력 필드 수정 → [적용] 클릭 → 슬롯 리스트 업데이트 ### 3. **시각적 피드백** - 슬롯 개수 배지: `3개`, `5개`, `10개` - 슬롯 없을 때: 회색 배지 + 안내 메시지 - 커스텀 모드: 노란색 버튼 + `[x]` 제거 버튼 ### 4. **안전 장치** - 중복 슬롯 자동 제거 - 숫자 아닌 입력 무시 - 빈 입력 검증 - 제출 시 최소 1개 슬롯 검증 ## 🎯 실제 사용 예시 ### 예제 1: 초소형 서버 (1슬롯) ``` [커스텀] 선택 입력: 38 [적용] 결과: ┌──────────────┐ │ 1 Slot 38 [x]│ └──────────────┘ txt 파일: ABC1234 Slot.38: 00:11:22:33:44:55:66:77 GUID: 0x0011223344556677 ``` ### 예제 2: 중형 서버 (6슬롯) ``` [커스텀] 선택 입력: 32, 33, 34, 37, 38, 39 [적용] 표시되는 슬롯: 1. Slot 32 [x] 2. Slot 33 [x] 3. Slot 34 [x] 4. Slot 37 [x] 5. Slot 38 [x] 6. Slot 39 [x] 드래그로 순서 변경: 1. Slot 38 [x] ← 드래그로 맨 위로 2. Slot 39 [x] 3. Slot 37 [x] 4. Slot 32 [x] 5. Slot 33 [x] 6. Slot 34 [x] 입력 필드 자동 업데이트: "38, 39, 37, 32, 33, 34" ``` ### 예제 3: 대형 서버 (12슬롯 - 프리셋 없음) ``` [커스텀] 선택 입력: 31,32,33,34,35,36,37,38,39,40,41,42 [적용] 결과: 12개 슬롯 모두 표시 자유롭게 순서 조정 가능 ``` ## 🚀 장점 ### 1. **무제한 유연성** - 1개부터 이론상 무제한까지 - 어떤 슬롯 번호 조합도 가능 - 연속/불연속 무관 ### 2. **편의성** - 자주 사용하는 것은 프리셋으로 - 특수한 경우는 커스텀으로 - 두 방식을 자유롭게 오갈 수 있음 ### 3. **안전성** - 입력 검증 (숫자만, 중복 제거) - 빈 슬롯 방지 - 현재 상태 자동 저장 ### 4. **직관성** - 입력 필드와 슬롯 리스트 동기화 - 제거 버튼으로 간편한 삭제 - 드래그로 순서 조정 ## ⚠️ 사용 팁 ### 1. **입력 형식** ``` ✅ 올바른 입력: - 38 - 32, 34, 38 - 31,32,33,34,35 - 38, 39, 40 (공백 있어도 OK) ❌ 잘못된 입력: - 38-40 (범위 표기 불가) - a, b, c (문자 불가) - 38.5 (소수점 불가) ``` ### 2. **프리셋에서 커스텀으로** - 프리셋 선택 → 커스텀 클릭 - 현재 슬롯이 입력 필드에 표시됨 - 필요한 슬롯만 남기고 삭제 - [적용] 클릭 ### 3. **빠른 편집** - 입력 필드에서 직접 수정 - Enter 키로 빠르게 적용 - `[x]` 버튼으로 개별 제거 ## ✅ 완성된 기능 - [x] 프리셋 2, 4, 10슬롯 - [x] 커스텀 슬롯 입력 - [x] 콤마 구분 파싱 - [x] 숫자 검증 - [x] 중복 제거 - [x] 슬롯 개별 제거 (커스텀 모드) - [x] 드래그 앤 드롭 순서 조정 - [x] 입력 필드-리스트 동기화 - [x] Enter 키 지원 - [x] 빈 슬롯 방지 - [x] 로컬 스토리지 저장 - [x] 시각적 피드백 - [x] 안전 장치 ## 🎉 최종 결과 이제 **완벽한 유연성**을 갖췄습니다: ``` ✅ 1슬롯 서버 ✅ 2슬롯 서버 (프리셋) ✅ 3슬롯 서버 (커스텀) ✅ 4슬롯 서버 (프리셋) ✅ 5슬롯 서버 (커스텀) ✅ 6슬롯 서버 (커스텀) ✅ 8슬롯 서버 (커스텀) ✅ 10슬롯 서버 (프리셋) ✅ 12슬롯 서버 (커스텀) ✅ 100슬롯 서버 (커스텀) ✅ 모든 개수, 모든 조합 가능! ``` **진정한 완전 자유 편집 시스템 완성!** 🚀 사용자가 원하는 **어떤 슬롯 구성**이든 완벽하게 지원합니다!