8.3 KiB
8.3 KiB
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 - 커스텀 슬롯 파싱
// 슬롯 번호 입력: "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;
슬롯 제거 버튼
// 커스텀 모드에서만 제거 버튼 표시
${currentSlotMode === 'custom' ?
`<button class="slot-remove-btn" data-slot="${slot}">
<i class="bi bi-x-lg"></i>
</button>`
: ''
}
// 제거 버튼 클릭 시
btn.addEventListener('click', function() {
const slotToRemove = this.getAttribute('data-slot');
currentSlotOrder = currentSlotOrder.filter(s => s !== slotToRemove);
renderSlotList();
customSlotNumbers.value = currentSlotOrder.join(', ');
});
Enter 키 지원
customSlotNumbers.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
applyCustomSlots.click(); // 적용 버튼 클릭
}
});
빈 슬롯 검증
// 폼 제출 시
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]버튼으로 개별 제거
✅ 완성된 기능
- 프리셋 2, 4, 10슬롯
- 커스텀 슬롯 입력
- 콤마 구분 파싱
- 숫자 검증
- 중복 제거
- 슬롯 개별 제거 (커스텀 모드)
- 드래그 앤 드롭 순서 조정
- 입력 필드-리스트 동기화
- Enter 키 지원
- 빈 슬롯 방지
- 로컬 스토리지 저장
- 시각적 피드백
- 안전 장치
🎉 최종 결과
이제 완벽한 유연성을 갖췄습니다:
✅ 1슬롯 서버
✅ 2슬롯 서버 (프리셋)
✅ 3슬롯 서버 (커스텀)
✅ 4슬롯 서버 (프리셋)
✅ 5슬롯 서버 (커스텀)
✅ 6슬롯 서버 (커스텀)
✅ 8슬롯 서버 (커스텀)
✅ 10슬롯 서버 (프리셋)
✅ 12슬롯 서버 (커스텀)
✅ 100슬롯 서버 (커스텀)
✅ 모든 개수, 모든 조합 가능!
진정한 완전 자유 편집 시스템 완성! 🚀
사용자가 원하는 어떤 슬롯 구성이든 완벽하게 지원합니다!