보스 폼 사용성 개선

- 가격 입력 시 Tab으로 다음 활성 가격 칸으로 이동 (체크박스 건너뜀)
- 최대 인원 기본값 6 → 3 (요즘 보스 기본)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-04-13 16:23:45 +09:00
parent 89b0f1066d
commit 3df639c815
2 changed files with 6 additions and 4 deletions

View file

@ -2,7 +2,7 @@
* 커스텀 체크박스
* <Checkbox checked={x} onChange={(checked) => ...} />
*/
export default function Checkbox({ checked, onChange, disabled, className = '', size = 'md' }) {
export default function Checkbox({ checked, onChange, disabled, className = '', size = 'md', tabIndex }) {
const sizeCls = size === 'sm' ? 'w-4 h-4' : 'w-5 h-5'
const iconSize = size === 'sm' ? 'text-[10px]' : 'text-xs'
@ -12,6 +12,7 @@ export default function Checkbox({ checked, onChange, disabled, className = '',
role="checkbox"
aria-checked={checked}
disabled={disabled}
tabIndex={tabIndex}
onClick={(e) => { e.stopPropagation(); !disabled && onChange?.(!checked) }}
className={`${sizeCls} shrink-0 rounded-md border-2 flex items-center justify-center transition ${
checked

View file

@ -42,7 +42,7 @@ export default function BossForm() {
const fileInputRef = useRef(null)
const [name, setName] = useState('')
const [maxPartySize, setMaxPartySize] = useState(6)
const [maxPartySize, setMaxPartySize] = useState(3)
const [imageFile, setImageFile] = useState(null)
const [imagePreview, setImagePreview] = useState(null)
const [existingImageUrl, setExistingImageUrl] = useState(null)
@ -60,7 +60,7 @@ export default function BossForm() {
useEffect(() => {
if (!isEdit) {
setName('')
setMaxPartySize(6)
setMaxPartySize(3)
setImageFile(null)
setImagePreview(null)
setExistingImageUrl(null)
@ -69,7 +69,7 @@ export default function BossForm() {
}
if (bossData) {
setName(bossData.name || '')
setMaxPartySize(bossData.max_party_size || 6)
setMaxPartySize(bossData.max_party_size || 3)
setExistingImageUrl(bossData.image_url || null)
setImagePreview(null)
setImageFile(null)
@ -259,6 +259,7 @@ export default function BossForm() {
<Checkbox
checked={v.enabled}
onChange={(checked) => updateDifficulty(d.key, { enabled: checked })}
tabIndex={-1}
/>
<img
src={getDifficultyImageUrl(d.key)}