242 lines
5.3 KiB
Markdown
242 lines
5.3 KiB
Markdown
# 슬롯 설정 완전 단순화 (최종)
|
|
|
|
## 🎉 드래그 앤 드롭 제거!
|
|
|
|
복잡한 드래그 앤 드롭 대신 **텍스트 입력만**으로 슬롯을 설정할 수 있게 완전히 단순화했습니다!
|
|
|
|
## ✨ 새로운 간단한 방식
|
|
|
|
### 1문. **텍스트 입력 필드**
|
|
```
|
|
┌─────────────────────────────────────┐
|
|
│ 슬롯 번호: [3개] │
|
|
│ ┌─────────────────────────────────┐ │
|
|
│ │ 38, 39, 37 │ │
|
|
│ └─────────────────────────────────┘ │
|
|
│ 💡 팁: 위에서부터 순서대로 우선순위 │
|
|
└─────────────────────────────────────┘
|
|
```
|
|
|
|
### 2. **빠른 프리셋 버튼**
|
|
```
|
|
[2슬롯] [4슬롯] [10슬롯]
|
|
```
|
|
클릭하면 자동으로 입력 필드 채워짐!
|
|
|
|
### 3. **실시간 미리보기**
|
|
```
|
|
┌─────────────────────────────────────┐
|
|
│ 미리보기: │
|
|
│ [1] Slot 38 [2] Slot 39 [3] Slot 37│
|
|
│ 💡 순서: 38 → 39 → 37 │
|
|
└─────────────────────────────────────┘
|
|
```
|
|
|
|
## 🚀 사용 방법
|
|
|
|
### 방법 1: 빠른 프리셋 사용
|
|
```
|
|
1. [2슬롯] 또는 [4슬롯] 또는 [10슬롯] 클릭
|
|
↓
|
|
2. 입력 필드에 자동으로 슬롯 번호 채워짐
|
|
↓
|
|
3. 필요하면 직접 수정
|
|
↓
|
|
4. [확인] 클릭
|
|
```
|
|
|
|
### 방법 2: 직접 입력
|
|
```
|
|
1. 입력 필드에 슬롯 번호 입력
|
|
예: 38, 39, 37
|
|
|
|
2. 실시간 미리보기 확인
|
|
|
|
3. 순서 변경하고 싶으면 입력 필드에서 직접 수정
|
|
예: 37, 38, 39 (순서 변경)
|
|
|
|
4. [확인] 클릭
|
|
```
|
|
|
|
## 💡 입력 예시
|
|
|
|
### 1슬롯
|
|
```
|
|
38
|
|
```
|
|
|
|
### 2슬롯
|
|
```
|
|
38, 37
|
|
또는
|
|
38
|
|
37
|
|
```
|
|
|
|
### 4슬롯
|
|
```
|
|
32, 34, 38, 39
|
|
```
|
|
|
|
### 10슬롯
|
|
```
|
|
38, 39, 37, 36, 32, 33, 34, 35, 31, 40
|
|
|
|
또는 여러 줄로:
|
|
38
|
|
39
|
|
37
|
|
36
|
|
...
|
|
```
|
|
|
|
### 순서 변경
|
|
```
|
|
처음: 38, 37, 32
|
|
변경: 32, 38, 37 ← 입력 필드에서 직접 수정!
|
|
```
|
|
|
|
## ⚡ 핵심 장점
|
|
|
|
### 1. **초간단**
|
|
- 드래그 필요 없음
|
|
- 그냥 타이핑하면 끝!
|
|
- 복사 & 붙여넣기 가능
|
|
|
|
### 2. **명확한 순서**
|
|
- 위에서 아래로 = 우선순위
|
|
- 눈으로 바로 확인
|
|
- 수정도 바로 가능
|
|
|
|
### 3. **실시간 미리보기**
|
|
- 입력하면 즉시 미리보기
|
|
- 개수 자동 표시
|
|
- 순서 화살표로 표시
|
|
|
|
### 4. **자동 저장**
|
|
- 로컬 스토리지에 자동 저장
|
|
- 다음에 모달 열면 이전 설정 그대로
|
|
- 별도 저장 버튼 필요 없음
|
|
|
|
### 5. **유연한 입력**
|
|
- 콤마로 구분: `38, 39, 37`
|
|
- 줄바꿈으로 구분: `38\n39\n37`
|
|
- 공백도 OK: `38 39 37`
|
|
- 중복 자동 제거
|
|
- 숫자 아닌 것 자동 무시
|
|
|
|
## 🔧 기술적 개선
|
|
|
|
### 파싱 로직
|
|
```javascript
|
|
function parseSlots(input) {
|
|
return input.split(/[,\s\n]+/) // 콤마, 공백, 줄바꿈 모두 허용
|
|
.map(s => s.trim())
|
|
.filter(s => s !== '')
|
|
.filter(s => /^\d+$/.test(s)) // 숫자만
|
|
.filter((v, i, a) => a.indexOf(v) === i); // 중복 제거
|
|
}
|
|
```
|
|
|
|
### 실시간 업데이트
|
|
```javascript
|
|
slotNumbersInput.addEventListener('input', updatePreview);
|
|
```
|
|
타이핑하자마자 미리보기 업데이트!
|
|
|
|
### 자동 저장
|
|
```javascript
|
|
function saveToStorage() {
|
|
localStorage.setItem('guidSlotNumbers', slotNumbersInput.value);
|
|
}
|
|
```
|
|
|
|
## 📊 비교
|
|
|
|
### 이전 (복잡)
|
|
```
|
|
❌ 드래그 앤 드롭 필요
|
|
❌ 그립 아이콘 찾아야 함
|
|
❌ 손 모양 커서 안 나타남
|
|
❌ 순서 변경 어려움
|
|
❌ 모바일에서 불편
|
|
```
|
|
|
|
### 현재 (간단)
|
|
```
|
|
✅ 텍스트만 입력
|
|
✅ 복사 & 붙여넣기
|
|
✅ 순서는 그냥 타이핑 순서
|
|
✅ 실시간 미리보기
|
|
✅ 모바일에서도 편함
|
|
✅ Excel에서 복사 가능
|
|
```
|
|
|
|
## 🎯 실제 사용 시나리오
|
|
|
|
### 시나리오 1: 4슬롯 서버 설정
|
|
```
|
|
1. 모달 열기
|
|
2. 입력: 32, 34, 38, 39
|
|
3. 미리보기 확인: [1]Slot 32 [2]Sl34 [3]Slot 38 [4]Slot 39
|
|
4. [확인] 클릭
|
|
완료!
|
|
```
|
|
|
|
### 시나리오 2: 순서 변경
|
|
```
|
|
1. 현재: 38, 39, 37
|
|
2. 입력 필드에서 직접 수정: 37, 38, 39
|
|
3. 미리보기: [1]Slot 37 [2]Slot 38 [3]Slot 39
|
|
4. [확인] 클릭
|
|
완료!
|
|
```
|
|
|
|
### 시나리오 3: Excel에서 복사
|
|
```
|
|
1. Excel에 슬롯 목록 있음:
|
|
38
|
|
39
|
|
37
|
|
36
|
|
|
|
2. 복사 (Ctrl+C)
|
|
|
|
3. 모달 입력 필드에 붙여넣기 (Ctrl+V)
|
|
|
|
4. 자동 파싱: 38, 39, 37, 36
|
|
|
|
완료!
|
|
```
|
|
|
|
## ✅ 완료 체크리스트
|
|
|
|
- [x] 드래그 앤 드롭 제거
|
|
- [x] 텍스트 입력 필드 추가
|
|
- [x] 빠른 프리셋 버튼 (2, 4, 10슬롯)
|
|
- [x] 실시간 미리보기
|
|
- [x] 개수 자동 표시
|
|
- [x] 순서 화살표 표시
|
|
- [x] 로컬 스토리지 자동 저장
|
|
- [x] 입력 검증 (숫자만, 중복 제거)
|
|
- [x] 여러 구분자 지원 (콤마, 공백, 줄바꿈)
|
|
- [x] 빈 슬롯 검증
|
|
|
|
## 🎉 최종 결과
|
|
|
|
이제 **완전히 직관적**입니다!
|
|
|
|
```
|
|
입력 필드에 슬롯 번호 입력
|
|
↓
|
|
실시간 미리보기 확인
|
|
↓
|
|
[확인] 클릭
|
|
↓
|
|
완료! ✅
|
|
```
|
|
|
|
**드래그 걱정 없이, 텍스트만 입력하면 끝!** 🚀
|
|
|
|
훨씬 간단하고 확실하고 빠릅니다!
|