입력 필드 상태 가이드

91. 입력 필드 상태 가이드 Define input field state specifications: **Base Input Styling**: - Height: 40px (touch-friendly: 44px) - Padding: 12px horizontal - Border: 1px solid gray-300 - Border-radius: 8px - Font-size: 16px - Background: white **State: Default**: - Border: gray-300 - Background: white - Text: gray-900 - Placeholder: gray-400 **State: Hover** (not focused): - Border: gray-400 - Cursor: text - Subtle background tint optional **State: Focus**: - Border: brand-500 - Ring: 2px brand-500/20 - Outline: none (custom ring) - Label: may float/change color **State: Filled** (has value): - Same as default visually - Or success indicator if validated **State: Valid**: - Border: green-500 - Icon: check in field (optional) - Helper text: green (optional) **State: Error/Invalid**: - Border: red-500 - Ring: 2px red-500/20 on focus - Icon: warning in field - Helper text: red, below field **State: Disabled**: - Background: gray-100 - Text: gray-400 - Cursor: not-allowed - Border: gray-200 **State: Read-only**: - Background: gray-50 - Text: gray-900 (readable) - No interaction styles **State: Loading** (async validation): - Spinner icon in field - Input may be disabled - Placeholder: "Checking..." **Input Variants**: **With Icon**: - Leading icon: left padding increased - Trailing icon: right padding increased - Icon color: gray-400, focus: gray-600 **With Addon**: - Prefix: "https://" or "$" attached - Suffix: ".com" or unit attached - Border joins to addon **Textarea**: - Min-height: 100px - Resize: vertical - Same states as input **Select**: - Custom chevron icon - Same dimensions as input - Dropdown styling separate Tech: Tailwind + React Hook Form + CVA