보스 폼 사용성 개선
- 가격 입력 시 Tab으로 다음 활성 가격 칸으로 이동 (체크박스 건너뜀) - 최대 인원 기본값 6 → 3 (요즘 보스 기본) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
89b0f1066d
commit
3df639c815
2 changed files with 6 additions and 4 deletions
|
|
@ -2,7 +2,7 @@
|
||||||
* 커스텀 체크박스
|
* 커스텀 체크박스
|
||||||
* <Checkbox checked={x} onChange={(checked) => ...} />
|
* <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 sizeCls = size === 'sm' ? 'w-4 h-4' : 'w-5 h-5'
|
||||||
const iconSize = size === 'sm' ? 'text-[10px]' : 'text-xs'
|
const iconSize = size === 'sm' ? 'text-[10px]' : 'text-xs'
|
||||||
|
|
||||||
|
|
@ -12,6 +12,7 @@ export default function Checkbox({ checked, onChange, disabled, className = '',
|
||||||
role="checkbox"
|
role="checkbox"
|
||||||
aria-checked={checked}
|
aria-checked={checked}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
|
tabIndex={tabIndex}
|
||||||
onClick={(e) => { e.stopPropagation(); !disabled && onChange?.(!checked) }}
|
onClick={(e) => { e.stopPropagation(); !disabled && onChange?.(!checked) }}
|
||||||
className={`${sizeCls} shrink-0 rounded-md border-2 flex items-center justify-center transition ${
|
className={`${sizeCls} shrink-0 rounded-md border-2 flex items-center justify-center transition ${
|
||||||
checked
|
checked
|
||||||
|
|
|
||||||
|
|
@ -42,7 +42,7 @@ export default function BossForm() {
|
||||||
const fileInputRef = useRef(null)
|
const fileInputRef = useRef(null)
|
||||||
|
|
||||||
const [name, setName] = useState('')
|
const [name, setName] = useState('')
|
||||||
const [maxPartySize, setMaxPartySize] = useState(6)
|
const [maxPartySize, setMaxPartySize] = useState(3)
|
||||||
const [imageFile, setImageFile] = useState(null)
|
const [imageFile, setImageFile] = useState(null)
|
||||||
const [imagePreview, setImagePreview] = useState(null)
|
const [imagePreview, setImagePreview] = useState(null)
|
||||||
const [existingImageUrl, setExistingImageUrl] = useState(null)
|
const [existingImageUrl, setExistingImageUrl] = useState(null)
|
||||||
|
|
@ -60,7 +60,7 @@ export default function BossForm() {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isEdit) {
|
if (!isEdit) {
|
||||||
setName('')
|
setName('')
|
||||||
setMaxPartySize(6)
|
setMaxPartySize(3)
|
||||||
setImageFile(null)
|
setImageFile(null)
|
||||||
setImagePreview(null)
|
setImagePreview(null)
|
||||||
setExistingImageUrl(null)
|
setExistingImageUrl(null)
|
||||||
|
|
@ -69,7 +69,7 @@ export default function BossForm() {
|
||||||
}
|
}
|
||||||
if (bossData) {
|
if (bossData) {
|
||||||
setName(bossData.name || '')
|
setName(bossData.name || '')
|
||||||
setMaxPartySize(bossData.max_party_size || 6)
|
setMaxPartySize(bossData.max_party_size || 3)
|
||||||
setExistingImageUrl(bossData.image_url || null)
|
setExistingImageUrl(bossData.image_url || null)
|
||||||
setImagePreview(null)
|
setImagePreview(null)
|
||||||
setImageFile(null)
|
setImageFile(null)
|
||||||
|
|
@ -259,6 +259,7 @@ export default function BossForm() {
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={v.enabled}
|
checked={v.enabled}
|
||||||
onChange={(checked) => updateDifficulty(d.key, { enabled: checked })}
|
onChange={(checked) => updateDifficulty(d.key, { enabled: checked })}
|
||||||
|
tabIndex={-1}
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
src={getDifficultyImageUrl(d.key)}
|
src={getDifficultyImageUrl(d.key)}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue