Update 2026-01-20 20:47:44
This commit is contained in:
unknown
354
.gemini/artifacts/guid_slot_custom_final.md
Normal file
354
.gemini/artifacts/guid_slot_custom_final.md
Normal file
@@ -0,0 +1,354 @@
|
||||
# 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' ?
|
||||
`<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 키 지원
|
||||
|
||||
```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슬롯 서버 (커스텀)
|
||||
✅ 모든 개수, 모든 조합 가능!
|
||||
```
|
||||
|
||||
**진정한 완전 자유 편집 시스템 완성!** 🚀
|
||||
|
||||
사용자가 원하는 **어떤 슬롯 구성**이든 완벽하게 지원합니다!
|
||||
Reference in New Issue
Block a user