-
-
{label}
+
+
{required && (
필수
)}
-
{renderInput()}
+
+
+ {helper && (
+
+ {helper}
+
+ )}
+
+
+ name={name}
+ rules={rules}
+ controlId={fieldId}
+ describedById={errorMsg ? errId : descId}
+ >
+ {children}
+
+
+
+
+ {errorMsg ? errorMsg : description}
+
+
+ {showCounterRight && typeof counterMax === 'number' && (
+
+ {currentLen}/{counterMax}
+
+ )}
+
);
}
diff --git a/src/shared/ui/form/multi-item-selector.tsx b/src/shared/ui/form/multi-item-selector.tsx
index e7dbea24..098b2a3f 100644
--- a/src/shared/ui/form/multi-item-selector.tsx
+++ b/src/shared/ui/form/multi-item-selector.tsx
@@ -1,16 +1,19 @@
'use client';
import { Plus } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import Button from '@/shared/ui/button';
import { ToggleButton } from '@/shared/ui/toggle';
import { BaseInput } from '../input';
interface Props {
- value: string[];
+ value?: string[];
maxSelectable?: number;
- onChange: (updated: string[]) => void;
+ onChange?: (updated: string[]) => void;
options?: string[];
+ // 대소문자 구분
+ caseSensitive?: boolean;
+ allowCustom?: boolean;
}
export default function SelectableTagsInput({
@@ -18,30 +21,88 @@ export default function SelectableTagsInput({
onChange,
maxSelectable = 4,
options = [],
+ caseSensitive = false,
+ allowCustom = true,
}: Props) {
- const [customInput, setCustomInput] = useState('');
- const [customTags, setCustomTags] = useState
([]);
+ const selected = value ?? [];
+ const optionSet = useMemo(
+ () =>
+ new Set(caseSensitive ? options : options.map((o) => o.toLowerCase())),
+ [options, caseSensitive],
+ );
+
+ const norm = useCallback(
+ (v: string) => (caseSensitive ? v : v.toLowerCase()),
+ [caseSensitive],
+ );
+
+ const customTags = selected.filter((v) => !optionSet.has(norm(v)));
+
const [showInput, setShowInput] = useState(false);
+ const [customInput, setCustomInput] = useState('');
+ const inputRef = useRef(null);
- const toggleItem = (key: string) => {
- onChange(
- value.includes(key)
- ? value.filter((item) => item !== key)
- : value.length < 4
- ? [...value, key]
- : value,
- );
- };
-
- const removeCustomTag = (tag: string) => {
- onChange(value.filter((item) => item !== tag));
- setCustomTags((prev) => prev.filter((item) => item !== tag));
- };
+ const selectedSet = useMemo(
+ () => new Set(caseSensitive ? selected : selected.map(norm)),
+ [selected, caseSensitive, norm],
+ );
+
+ const canAddMore = selected.length < maxSelectable;
useEffect(() => {
- const customOnly = value.filter((v) => !options.includes(v));
- setCustomTags(customOnly);
- }, [value, options]);
+ if (showInput) inputRef.current?.focus();
+ }, [showInput]);
+
+ const emit = useCallback((next: string[]) => onChange?.(next), [onChange]);
+
+ const toggleItem = useCallback(
+ (key: string) => {
+ const k = caseSensitive ? key : key.toLowerCase();
+ if (selectedSet.has(k)) {
+ emit(selected.filter((item) => norm(item) !== k));
+ } else if (canAddMore) {
+ emit([...selected, key]);
+ }
+ },
+ [caseSensitive, selectedSet, selected, emit, canAddMore, norm],
+ );
+
+ const removeCustomTag = useCallback(
+ (tag: string) => emit(selected.filter((item) => item !== tag)),
+ [emit, selected],
+ );
+
+ const addCustom = useCallback(() => {
+ const trimmed = customInput.trim();
+ if (!allowCustom || !trimmed) return;
+
+ const key = caseSensitive ? trimmed : trimmed.toLowerCase();
+ if (selectedSet.has(key) || !canAddMore) return;
+
+ emit([...selected, trimmed]);
+ setCustomInput('');
+ }, [
+ allowCustom,
+ customInput,
+ caseSensitive,
+ selectedSet,
+ canAddMore,
+ emit,
+ selected,
+ ]);
+
+ const handleCustomKeyDown = useCallback(
+ (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ addCustom();
+ } else if (e.key === 'Escape') {
+ setShowInput(false);
+ setCustomInput('');
+ }
+ },
+ [addCustom],
+ );
return (
@@ -51,64 +112,82 @@ export default function SelectableTagsInput({
size="sm"
variant="square"
key={item}
- pressed={value.includes(item)}
+ pressed={selectedSet.has(norm(item))}
onPressedChange={() => toggleItem(item)}
>
{item}
))}
+
{customTags.map((item) => (
{item}
-
removeCustomTag(item)}>✕
+
))}
-
+
+ {allowCustom && (
+
+ )}