UIToolkit 기본 UI 개발 중

Assets/Scripts/UVC/UIToolkit/Input/UTKBoundsField.cs

@@ -0,0 +1,117 @@
+#nullable enable
+using System;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UVC.UIToolkit
+{
+    /// <summary>
+    /// Bounds 입력 필드 컴포넌트.
+    /// Unity BoundsField를 래핑하여 커스텀 스타일을 적용합니다.
+    /// </summary>
+    [UxmlElement]
+    public partial class UTKBoundsField : BoundsField, IDisposable
+    {
+        #region Constants
+        private const string USS_PATH = "UIToolkit/Input/UTKBoundsField";
+        #endregion
+
+        #region Fields
+        private bool _disposed;
+        private bool _isEnabled = true;
+        #endregion
+
+        #region Events
+        /// <summary>값 변경 이벤트</summary>
+        public event Action<Bounds>? OnValueChanged;
+        #endregion
+
+        #region Properties
+        /// <summary>활성화 상태</summary>
+        [UxmlAttribute]
+        public bool IsEnabled
+        {
+            get => _isEnabled;
+            set
+            {
+                _isEnabled = value;
+                SetEnabled(value);
+                EnableInClassList("utk-boundsfield--disabled", !value);
+            }
+        }
+
+        /// <summary>현재 값</summary>
+        public Bounds Value
+        {
+            get => value;
+            set => this.value = value;
+        }
+        #endregion
+
+        #region Constructor
+        public UTKBoundsField() : base()
+        {
+            UTKThemeManager.Instance.ApplyThemeToElement(this);
+
+            var uss = Resources.Load<StyleSheet>(USS_PATH);
+            if (uss != null)
+            {
+                styleSheets.Add(uss);
+            }
+
+            SetupStyles();
+            SetupEvents();
+            SubscribeToThemeChanges();
+        }
+
+        public UTKBoundsField(string label) : this()
+        {
+            this.label = label;
+        }
+        #endregion
+
+        #region Setup
+        private void SetupStyles()
+        {
+            AddToClassList("utk-boundsfield");
+        }
+
+        private void SetupEvents()
+        {
+            this.RegisterValueChangedCallback(OnFieldValueChanged);
+        }
+
+        private void SubscribeToThemeChanges()
+        {
+            UTKThemeManager.Instance.OnThemeChanged += OnThemeChanged;
+            RegisterCallback<DetachFromPanelEvent>(_ =>
+            {
+                UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
+            });
+        }
+
+        private void OnThemeChanged(UTKTheme theme)
+        {
+            UTKThemeManager.Instance.ApplyThemeToElement(this);
+        }
+        #endregion
+
+        #region Event Handlers
+        private void OnFieldValueChanged(ChangeEvent<Bounds> evt)
+        {
+            OnValueChanged?.Invoke(evt.newValue);
+        }
+        #endregion
+
+        #region IDisposable
+        public void Dispose()
+        {
+            if (_disposed) return;
+            _disposed = true;
+
+            UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
+            OnValueChanged = null;
+        }
+        #endregion
+    }
+}

Assets/Scripts/UVC/UIToolkit/Input/UTKBoundsField.cs.meta

@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: e134d298c1ee5dd42b9193c172ef49ce

Assets/Scripts/UVC/UIToolkit/Input/UTKFloatField.cs

@@ -0,0 +1,118 @@
+#nullable enable
+using System;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UVC.UIToolkit
+{
+    /// <summary>
+    /// 실수 입력 필드 컴포넌트.
+    /// Unity FloatField를 래핑하여 커스텀 스타일을 적용합니다.
+    /// </summary>
+    [UxmlElement]
+    public partial class UTKFloatField : FloatField, IDisposable
+    {
+        #region Constants
+        private const string USS_PATH = "UIToolkit/Input/UTKFloatField";
+        #endregion
+
+        #region Fields
+        private bool _disposed;
+        private bool _isEnabled = true;
+        #endregion
+
+        #region Events
+        /// <summary>값 변경 이벤트</summary>
+        public event Action<float>? OnValueChanged;
+        #endregion
+
+        #region Properties
+        /// <summary>현재 값</summary>
+        public float Value
+        {
+            get => value;
+            set => this.value = value;
+        }
+
+        /// <summary>활성화 상태</summary>
+        [UxmlAttribute]
+        public bool IsEnabled
+        {
+            get => _isEnabled;
+            set
+            {
+                _isEnabled = value;
+                SetEnabled(value);
+                EnableInClassList("utk-float-field--disabled", !value);
+            }
+        }
+        #endregion
+
+        #region Constructor
+        public UTKFloatField() : base()
+        {
+            UTKThemeManager.Instance.ApplyThemeToElement(this);
+
+            var uss = Resources.Load<StyleSheet>(USS_PATH);
+            if (uss != null)
+            {
+                styleSheets.Add(uss);
+            }
+
+            SetupStyles();
+            SetupEvents();
+            SubscribeToThemeChanges();
+        }
+
+        public UTKFloatField(string label, float defaultValue = 0f) : this()
+        {
+            this.label = label;
+            value = defaultValue;
+        }
+        #endregion
+
+        #region Setup
+        private void SetupStyles()
+        {
+            AddToClassList("utk-float-field");
+        }
+
+        private void SetupEvents()
+        {
+            this.RegisterValueChangedCallback(OnFieldValueChanged);
+        }
+
+        private void SubscribeToThemeChanges()
+        {
+            UTKThemeManager.Instance.OnThemeChanged += OnThemeChanged;
+            RegisterCallback<DetachFromPanelEvent>(_ =>
+            {
+                UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
+            });
+        }
+
+        private void OnThemeChanged(UTKTheme theme)
+        {
+            UTKThemeManager.Instance.ApplyThemeToElement(this);
+        }
+        #endregion
+
+        #region Event Handlers
+        private void OnFieldValueChanged(ChangeEvent<float> evt)
+        {
+            OnValueChanged?.Invoke(evt.newValue);
+        }
+        #endregion
+
+        #region IDisposable
+        public void Dispose()
+        {
+            if (_disposed) return;
+            _disposed = true;
+
+            UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
+            OnValueChanged = null;
+        }
+        #endregion
+    }
+}

Assets/Scripts/UVC/UIToolkit/Input/UTKFloatField.cs.meta

@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 3c4a3266ad1bdc748a0be2cad2f66551

Assets/Scripts/UVC/UIToolkit/Input/UTKInputField.cs

@@ -0,0 +1,256 @@
+#nullable enable
+using System;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UVC.UIToolkit
+{
+    /// <summary>
+    /// 입력 필드 컴포넌트.
+    /// Unity TextField를 래핑하여 커스텀 스타일을 적용합니다.
+    /// </summary>
+    [UxmlElement]
+    public partial class UTKInputField : TextField, IDisposable
+    {
+        #region Constants
+        private const string USS_PATH = "UIToolkit/Input/UTKInputField";
+        #endregion
+
+        #region Fields
+        private bool _disposed;
+        private bool _isEnabled = true;
+        private string _errorMessage = "";
+        private InputFieldVariant _variant = InputFieldVariant.Default;
+        #endregion
+
+        #region Events
+        /// <summary>값 변경 이벤트</summary>
+        public event Action<string>? OnValueChanged;
+        /// <summary>포커스 이벤트</summary>
+        public event Action? OnFocused;
+        /// <summary>포커스 해제 이벤트</summary>
+        public event Action? OnBlurred;
+        /// <summary>엔터 키 이벤트</summary>
+        public event Action<string>? OnSubmit;
+        #endregion
+
+        #region Properties
+        /// <summary>입력 값</summary>
+        public string Value
+        {
+            get => value;
+            set => SetValue(value, true);
+        }
+
+        /// <summary>플레이스홀더 텍스트</summary>
+        [UxmlAttribute]
+        public string Placeholder
+        {
+            get => textEdition.placeholder;
+            set => textEdition.placeholder = value;
+        }
+
+        /// <summary>에러 메시지</summary>
+        [UxmlAttribute]
+        public string ErrorMessage
+        {
+            get => _errorMessage;
+            set
+            {
+                _errorMessage = value;
+                EnableInClassList("utk-input--error", !string.IsNullOrEmpty(value));
+            }
+        }
+
+        /// <summary>활성화 상태</summary>
+        [UxmlAttribute]
+        public bool IsEnabled
+        {
+            get => _isEnabled;
+            set
+            {
+                _isEnabled = value;
+                SetEnabled(value);
+                EnableInClassList("utk-input--disabled", !value);
+            }
+        }
+
+        /// <summary>읽기 전용</summary>
+        public new bool isReadOnly
+        {
+            get => base.isReadOnly;
+            set
+            {
+                base.isReadOnly = value;
+                EnableInClassList("utk-input--readonly", value);
+            }
+        }
+
+        /// <summary>멀티라인 모드</summary>
+        public new bool multiline
+        {
+            get => base.multiline;
+            set
+            {
+                base.multiline = value;
+                EnableInClassList("utk-input--multiline", value);
+            }
+        }
+
+        /// <summary>스타일 변형</summary>
+        [UxmlAttribute]
+        public InputFieldVariant Variant
+        {
+            get => _variant;
+            set
+            {
+                _variant = value;
+                UpdateVariant();
+            }
+        }
+        #endregion
+
+        #region Enums
+        public enum InputFieldVariant
+        {
+            Default,
+            Filled,
+            Outlined
+        }
+        #endregion
+
+        #region Constructor
+        public UTKInputField() : base()
+        {
+            UTKThemeManager.Instance.ApplyThemeToElement(this);
+
+            var uss = Resources.Load<StyleSheet>(USS_PATH);
+            if (uss != null)
+            {
+                styleSheets.Add(uss);
+            }
+
+            SetupStyles();
+            SetupEvents();
+            SubscribeToThemeChanges();
+        }
+
+        public UTKInputField(string label, string placeholder = "") : this()
+        {
+            this.label = label;
+            Placeholder = placeholder;
+        }
+        #endregion
+
+        #region Setup
+        private void SetupStyles()
+        {
+            AddToClassList("utk-input");
+            UpdateVariant();
+        }
+
+        private void SetupEvents()
+        {
+            this.RegisterValueChangedCallback(OnTextValueChanged);
+
+            RegisterCallback<FocusInEvent>(_ =>
+            {
+                EnableInClassList("utk-input--focused", true);
+                OnFocused?.Invoke();
+            });
+
+            RegisterCallback<FocusOutEvent>(_ =>
+            {
+                EnableInClassList("utk-input--focused", false);
+                OnBlurred?.Invoke();
+            });
+
+            RegisterCallback<KeyDownEvent>(evt =>
+            {
+                if (evt.keyCode == KeyCode.Return && !multiline)
+                {
+                    OnSubmit?.Invoke(value);
+                }
+            });
+        }
+
+        private void SubscribeToThemeChanges()
+        {
+            UTKThemeManager.Instance.OnThemeChanged += OnThemeChanged;
+            RegisterCallback<DetachFromPanelEvent>(_ =>
+            {
+                UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
+            });
+        }
+
+        private void OnThemeChanged(UTKTheme theme)
+        {
+            UTKThemeManager.Instance.ApplyThemeToElement(this);
+        }
+        #endregion
+
+        #region Event Handlers
+        private void OnTextValueChanged(ChangeEvent<string> evt)
+        {
+            OnValueChanged?.Invoke(evt.newValue);
+        }
+        #endregion
+
+        #region Methods
+        /// <summary>
+        /// 값 설정
+        /// </summary>
+        public void SetValue(string newValue, bool notify)
+        {
+            if (value == newValue) return;
+
+            if (notify)
+            {
+                value = newValue ?? "";
+            }
+            else
+            {
+                SetValueWithoutNotify(newValue ?? "");
+            }
+        }
+
+        /// <summary>
+        /// 선택 영역 설정
+        /// </summary>
+        public void SelectAll()
+        {
+            textSelection.SelectAll();
+        }
+
+        private void UpdateVariant()
+        {
+            RemoveFromClassList("utk-input--default");
+            RemoveFromClassList("utk-input--filled");
+            RemoveFromClassList("utk-input--outlined");
+
+            var variantClass = _variant switch
+            {
+                InputFieldVariant.Filled => "utk-input--filled",
+                InputFieldVariant.Outlined => "utk-input--outlined",
+                _ => "utk-input--default"
+            };
+            AddToClassList(variantClass);
+        }
+
+        #endregion
+
+        #region IDisposable
+        public void Dispose()
+        {
+            if (_disposed) return;
+            _disposed = true;
+
+            UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
+            OnValueChanged = null;
+            OnFocused = null;
+            OnBlurred = null;
+            OnSubmit = null;
+        }
+        #endregion
+    }
+}

Assets/Scripts/UVC/UIToolkit/Input/UTKInputField.cs.meta

@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 95821f1d9f683534bb294dbe05b84d37

Assets/Scripts/UVC/UIToolkit/Input/UTKIntegerField.cs

@@ -0,0 +1,118 @@
+#nullable enable
+using System;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UVC.UIToolkit
+{
+    /// <summary>
+    /// 정수 입력 필드 컴포넌트.
+    /// Unity IntegerField를 래핑하여 커스텀 스타일을 적용합니다.
+    /// </summary>
+    [UxmlElement]
+    public partial class UTKIntegerField : IntegerField, IDisposable
+    {
+        #region Constants
+        private const string USS_PATH = "UIToolkit/Input/UTKIntegerField";
+        #endregion
+
+        #region Fields
+        private bool _disposed;
+        private bool _isEnabled = true;
+        #endregion
+
+        #region Events
+        /// <summary>값 변경 이벤트</summary>
+        public event Action<int>? OnValueChanged;
+        #endregion
+
+        #region Properties
+        /// <summary>현재 값</summary>
+        public int Value
+        {
+            get => value;
+            set => this.value = value;
+        }
+
+        /// <summary>활성화 상태</summary>
+        [UxmlAttribute]
+        public bool IsEnabled
+        {
+            get => _isEnabled;
+            set
+            {
+                _isEnabled = value;
+                SetEnabled(value);
+                EnableInClassList("utk-integer-field--disabled", !value);
+            }
+        }
+        #endregion
+
+        #region Constructor
+        public UTKIntegerField() : base()
+        {
+            UTKThemeManager.Instance.ApplyThemeToElement(this);
+
+            var uss = Resources.Load<StyleSheet>(USS_PATH);
+            if (uss != null)
+            {
+                styleSheets.Add(uss);
+            }
+
+            SetupStyles();
+            SetupEvents();
+            SubscribeToThemeChanges();
+        }
+
+        public UTKIntegerField(string label, int defaultValue = 0) : this()
+        {
+            this.label = label;
+            value = defaultValue;
+        }
+        #endregion
+
+        #region Setup
+        private void SetupStyles()
+        {
+            AddToClassList("utk-integer-field");
+        }
+
+        private void SetupEvents()
+        {
+            this.RegisterValueChangedCallback(OnFieldValueChanged);
+        }
+
+        private void SubscribeToThemeChanges()
+        {
+            UTKThemeManager.Instance.OnThemeChanged += OnThemeChanged;
+            RegisterCallback<DetachFromPanelEvent>(_ =>
+            {
+                UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
+            });
+        }
+
+        private void OnThemeChanged(UTKTheme theme)
+        {
+            UTKThemeManager.Instance.ApplyThemeToElement(this);
+        }
+        #endregion
+
+        #region Event Handlers
+        private void OnFieldValueChanged(ChangeEvent<int> evt)
+        {
+            OnValueChanged?.Invoke(evt.newValue);
+        }
+        #endregion
+
+        #region IDisposable
+        public void Dispose()
+        {
+            if (_disposed) return;
+            _disposed = true;
+
+            UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
+            OnValueChanged = null;
+        }
+        #endregion
+    }
+}

Assets/Scripts/UVC/UIToolkit/Input/UTKIntegerField.cs.meta

@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 879c3d271207674478dea247592f1858

Assets/Scripts/UVC/UIToolkit/Input/UTKNumberStepper.cs

@@ -0,0 +1,334 @@
+#nullable enable
+using System;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UVC.UIToolkit.Input
+{
+    /// <summary>
+    /// 숫자 입력 필드에 위/아래 스테퍼 버튼이 붙은 컴포넌트
+    /// TextInput 오른쪽에 위, 아래 버튼이 세로로 배치됨
+    /// 마우스 호버 상태에서 휠로 값 조절 가능
+    /// </summary>
+    [UxmlElement]
+    public partial class UTKNumberStepper : VisualElement
+    {
+        #region Constants
+        private const string USS_PATH = "UIToolkit/Input/UTKNumberStepper";
+        #endregion
+
+        #region UXML Attributes
+        [UxmlAttribute]
+        public int Value
+        {
+            get => _value;
+            set => SetValue(value);
+        }
+
+        [UxmlAttribute]
+        public int MinValue
+        {
+            get => _minValue;
+            set
+            {
+                _minValue = value;
+                ClampValue();
+            }
+        }
+
+        [UxmlAttribute]
+        public int MaxValue
+        {
+            get => _maxValue;
+            set
+            {
+                _maxValue = value;
+                ClampValue();
+            }
+        }
+
+        [UxmlAttribute]
+        public int Step
+        {
+            get => _step;
+            set => _step = Math.Max(1, value);
+        }
+
+        [UxmlAttribute]
+        public bool WrapAround
+        {
+            get => _wrapAround;
+            set => _wrapAround = value;
+        }
+        #endregion
+
+        #region Fields
+        private int _value;
+        private int _minValue = int.MinValue;
+        private int _maxValue = int.MaxValue;
+        private int _step = 1;
+        private bool _wrapAround;
+        private bool _isUpdating;
+        private bool _isHovered;
+
+        private TextField? _textField;
+        private Button? _upButton;
+        private Button? _downButton;
+        #endregion
+
+        #region Events
+        /// <summary>값이 변경될 때 발생</summary>
+        public event Action<int>? OnValueChanged;
+
+        /// <summary>Tab 키가 눌렸을 때 발생 (다음 요소로 포커스 이동용)</summary>
+        public event Action? OnTabPressed;
+
+        /// <summary>Shift+Tab 키가 눌렸을 때 발생 (이전 요소로 포커스 이동용)</summary>
+        public event Action? OnShiftTabPressed;
+        #endregion
+
+        #region Constructor
+        public UTKNumberStepper()
+        {
+            UTKThemeManager.Instance.ApplyThemeToElement(this);
+            LoadStyleSheet();
+            CreateUI();
+            SetupEvents();
+            SubscribeToThemeChanges();
+        }
+
+        public UTKNumberStepper(int minValue, int maxValue, int initialValue = 0, int step = 1)
+        {
+            _minValue = minValue;
+            _maxValue = maxValue;
+            _step = Math.Max(1, step);
+            _value = Mathf.Clamp(initialValue, minValue, maxValue);
+
+            UTKThemeManager.Instance.ApplyThemeToElement(this);
+            LoadStyleSheet();
+            CreateUI();
+            SetupEvents();
+            SubscribeToThemeChanges();
+            UpdateDisplay();
+        }
+
+        private void LoadStyleSheet()
+        {
+            var uss = Resources.Load<StyleSheet>(USS_PATH);
+            if (uss != null)
+            {
+                styleSheets.Add(uss);
+            }
+        }
+
+        private void SubscribeToThemeChanges()
+        {
+            UTKThemeManager.Instance.OnThemeChanged += OnThemeChanged;
+
+            // 패널에서 분리될 때 이벤트 구독 해제
+            RegisterCallback<DetachFromPanelEvent>(_ =>
+            {
+                UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
+            });
+        }
+
+        private void OnThemeChanged(UTKTheme theme)
+        {
+            UTKThemeManager.Instance.ApplyThemeToElement(this);
+        }
+        #endregion
+
+        #region Public Methods
+        public void SetValue(int newValue, bool notify = true)
+        {
+            int clampedValue = ClampValueInternal(newValue);
+            if (_value != clampedValue)
+            {
+                _value = clampedValue;
+                UpdateDisplay();
+                if (notify)
+                {
+                    OnValueChanged?.Invoke(_value);
+                }
+            }
+        }
+
+        public void Increment()
+        {
+            if (_wrapAround && _value + _step > _maxValue)
+            {
+                SetValue(_minValue);
+            }
+            else
+            {
+                SetValue(_value + _step);
+            }
+        }
+
+        public void Decrement()
+        {
+            if (_wrapAround && _value - _step < _minValue)
+            {
+                SetValue(_maxValue);
+            }
+            else
+            {
+                SetValue(_value - _step);
+            }
+        }
+
+        public void SetRange(int min, int max)
+        {
+            _minValue = min;
+            _maxValue = max;
+            ClampValue();
+        }
+
+        /// <summary>텍스트 필드에 포커스를 설정합니다.</summary>
+        public new void Focus()
+        {
+            _textField?.Focus();
+        }
+        #endregion
+
+        #region Private Methods - UI Creation
+        private void CreateUI()
+        {
+            AddToClassList("utk-number-stepper");
+
+            // Text Field
+            _textField = new TextField { name = "stepper-input" };
+            _textField.AddToClassList("utk-number-stepper__input");
+
+            // TextField 내부 input 스타일링
+            _textField.RegisterCallback<AttachToPanelEvent>(_ =>
+            {
+                var input = _textField.Q<VisualElement>("unity-text-input");
+                if (input != null)
+                {
+                    input.AddToClassList("utk-number-stepper__text-input");
+                }
+            });
+
+            Add(_textField);
+
+            // Button Container (위/아래 버튼을 세로로 배치)
+            var buttonContainer = new VisualElement { name = "stepper-buttons" };
+            buttonContainer.AddToClassList("utk-number-stepper__buttons");
+
+            // Up Button
+            _upButton = new Button { name = "stepper-up", text = "\u25B2" };  // ▲
+            _upButton.AddToClassList("utk-number-stepper__btn");
+            _upButton.AddToClassList("utk-number-stepper__btn--up");
+            buttonContainer.Add(_upButton);
+
+            // Down Button
+            _downButton = new Button { name = "stepper-down", text = "\u25BC" };  // ▼
+            _downButton.AddToClassList("utk-number-stepper__btn");
+            _downButton.AddToClassList("utk-number-stepper__btn--down");
+            buttonContainer.Add(_downButton);
+
+            Add(buttonContainer);
+
+            UpdateDisplay();
+        }
+
+        private void SetupEvents()
+        {
+            _upButton?.RegisterCallback<ClickEvent>(_ => Increment());
+            _downButton?.RegisterCallback<ClickEvent>(_ => Decrement());
+
+            _textField?.RegisterValueChangedCallback(evt =>
+            {
+                if (_isUpdating) return;
+
+                if (int.TryParse(evt.newValue, out int parsed))
+                {
+                    SetValue(parsed);
+                }
+                else
+                {
+                    // 유효하지 않은 입력이면 이전 값으로 복원
+                    UpdateDisplay();
+                }
+            });
+
+            // 키보드 이벤트 (위/아래 화살표)
+            _textField?.RegisterCallback<KeyDownEvent>(evt =>
+            {
+                if (evt.keyCode == KeyCode.UpArrow)
+                {
+                    Increment();
+                    evt.StopPropagation();
+                }
+                else if (evt.keyCode == KeyCode.DownArrow)
+                {
+                    Decrement();
+                    evt.StopPropagation();
+                }
+            });
+
+            // Tab 키 이벤트 - TrickleDown으로 먼저 캡처
+            _textField?.RegisterCallback<KeyDownEvent>(evt =>
+            {
+                if (evt.keyCode == KeyCode.Tab)
+                {
+                    if (evt.shiftKey && OnShiftTabPressed != null)
+                    {
+                        // Shift+Tab: 이전 요소로 이동
+                        OnShiftTabPressed.Invoke();
+                        evt.StopImmediatePropagation();
+                    }
+                    else if (!evt.shiftKey && OnTabPressed != null)
+                    {
+                        // Tab: 다음 요소로 이동
+                        OnTabPressed.Invoke();
+                        evt.StopImmediatePropagation();
+                    }
+                }
+            }, TrickleDown.TrickleDown);
+
+            // 마우스 호버 상태 추적
+            RegisterCallback<MouseEnterEvent>(_ => _isHovered = true);
+            RegisterCallback<MouseLeaveEvent>(_ => _isHovered = false);
+
+            // 마우스 휠 이벤트 (호버 상태에서만)
+            RegisterCallback<WheelEvent>(evt =>
+            {
+                if (!_isHovered) return;
+
+                if (evt.delta.y < 0)
+                {
+                    Increment();
+                }
+                else if (evt.delta.y > 0)
+                {
+                    Decrement();
+                }
+                evt.StopPropagation();
+            });
+        }
+        #endregion
+
+        #region Private Methods - Logic
+        private void UpdateDisplay()
+        {
+            if (_textField == null) return;
+
+            _isUpdating = true;
+            _textField.value = _value.ToString();
+            _isUpdating = false;
+        }
+
+        private void ClampValue()
+        {
+            SetValue(_value, notify: false);
+        }
+
+        private int ClampValueInternal(int value)
+        {
+            return Mathf.Clamp(value, _minValue, _maxValue);
+        }
+        #endregion
+    }
+}

Assets/Scripts/UVC/UIToolkit/Input/UTKNumberStepper.cs.meta

@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 8d0eefc61dbd7274281032d5ebfae0fe

Assets/Scripts/UVC/UIToolkit/Input/UTKRectField.cs

@@ -0,0 +1,117 @@
+#nullable enable
+using System;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UVC.UIToolkit
+{
+    /// <summary>
+    /// Rect 입력 필드 컴포넌트.
+    /// Unity RectField를 래핑하여 커스텀 스타일을 적용합니다.
+    /// </summary>
+    [UxmlElement]
+    public partial class UTKRectField : RectField, IDisposable
+    {
+        #region Constants
+        private const string USS_PATH = "UIToolkit/Input/UTKRectField";
+        #endregion
+
+        #region Fields
+        private bool _disposed;
+        private bool _isEnabled = true;
+        #endregion
+
+        #region Events
+        /// <summary>값 변경 이벤트</summary>
+        public event Action<Rect>? OnValueChanged;
+        #endregion
+
+        #region Properties
+        /// <summary>활성화 상태</summary>
+        [UxmlAttribute]
+        public bool IsEnabled
+        {
+            get => _isEnabled;
+            set
+            {
+                _isEnabled = value;
+                SetEnabled(value);
+                EnableInClassList("utk-rectfield--disabled", !value);
+            }
+        }
+
+        /// <summary>현재 값</summary>
+        public Rect Value
+        {
+            get => value;
+            set => this.value = value;
+        }
+        #endregion
+
+        #region Constructor
+        public UTKRectField() : base()
+        {
+            UTKThemeManager.Instance.ApplyThemeToElement(this);
+
+            var uss = Resources.Load<StyleSheet>(USS_PATH);
+            if (uss != null)
+            {
+                styleSheets.Add(uss);
+            }
+
+            SetupStyles();
+            SetupEvents();
+            SubscribeToThemeChanges();
+        }
+
+        public UTKRectField(string label) : this()
+        {
+            this.label = label;
+        }
+        #endregion
+
+        #region Setup
+        private void SetupStyles()
+        {
+            AddToClassList("utk-rectfield");
+        }
+
+        private void SetupEvents()
+        {
+            this.RegisterValueChangedCallback(OnFieldValueChanged);
+        }
+
+        private void SubscribeToThemeChanges()
+        {
+            UTKThemeManager.Instance.OnThemeChanged += OnThemeChanged;
+            RegisterCallback<DetachFromPanelEvent>(_ =>
+            {
+                UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
+            });
+        }
+
+        private void OnThemeChanged(UTKTheme theme)
+        {
+            UTKThemeManager.Instance.ApplyThemeToElement(this);
+        }
+        #endregion
+
+        #region Event Handlers
+        private void OnFieldValueChanged(ChangeEvent<Rect> evt)
+        {
+            OnValueChanged?.Invoke(evt.newValue);
+        }
+        #endregion
+
+        #region IDisposable
+        public void Dispose()
+        {
+            if (_disposed) return;
+            _disposed = true;
+
+            UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
+            OnValueChanged = null;
+        }
+        #endregion
+    }
+}

Assets/Scripts/UVC/UIToolkit/Input/UTKRectField.cs.meta

@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 1a2ab1071b5d5e143923978bc0fcd0d0

Assets/Scripts/UVC/UIToolkit/Input/UTKVector2Field.cs

@@ -0,0 +1,117 @@
+#nullable enable
+using System;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UVC.UIToolkit
+{
+    /// <summary>
+    /// Vector2 입력 필드 컴포넌트.
+    /// Unity Vector2Field를 래핑하여 커스텀 스타일을 적용합니다.
+    /// </summary>
+    [UxmlElement]
+    public partial class UTKVector2Field : Vector2Field, IDisposable
+    {
+        #region Constants
+        private const string USS_PATH = "UIToolkit/Input/UTKVector2Field";
+        #endregion
+
+        #region Fields
+        private bool _disposed;
+        private bool _isEnabled = true;
+        #endregion
+
+        #region Events
+        /// <summary>값 변경 이벤트</summary>
+        public event Action<Vector2>? OnValueChanged;
+        #endregion
+
+        #region Properties
+        /// <summary>현재 값</summary>
+        public Vector2 Value
+        {
+            get => value;
+            set => this.value = value;
+        }
+
+        /// <summary>활성화 상태</summary>
+        [UxmlAttribute]
+        public bool IsEnabled
+        {
+            get => _isEnabled;
+            set
+            {
+                _isEnabled = value;
+                SetEnabled(value);
+                EnableInClassList("utk-vector2-field--disabled", !value);
+            }
+        }
+        #endregion
+
+        #region Constructor
+        public UTKVector2Field() : base()
+        {
+            UTKThemeManager.Instance.ApplyThemeToElement(this);
+
+            var uss = Resources.Load<StyleSheet>(USS_PATH);
+            if (uss != null)
+            {
+                styleSheets.Add(uss);
+            }
+
+            SetupStyles();
+            SetupEvents();
+            SubscribeToThemeChanges();
+        }
+
+        public UTKVector2Field(string label) : this()
+        {
+            this.label = label;
+        }
+        #endregion
+
+        #region Setup
+        private void SetupStyles()
+        {
+            AddToClassList("utk-vector2-field");
+        }
+
+        private void SetupEvents()
+        {
+            this.RegisterValueChangedCallback(OnFieldValueChanged);
+        }
+
+        private void SubscribeToThemeChanges()
+        {
+            UTKThemeManager.Instance.OnThemeChanged += OnThemeChanged;
+            RegisterCallback<DetachFromPanelEvent>(_ =>
+            {
+                UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
+            });
+        }
+
+        private void OnThemeChanged(UTKTheme theme)
+        {
+            UTKThemeManager.Instance.ApplyThemeToElement(this);
+        }
+        #endregion
+
+        #region Event Handlers
+        private void OnFieldValueChanged(ChangeEvent<Vector2> evt)
+        {
+            OnValueChanged?.Invoke(evt.newValue);
+        }
+        #endregion
+
+        #region IDisposable
+        public void Dispose()
+        {
+            if (_disposed) return;
+            _disposed = true;
+
+            UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
+            OnValueChanged = null;
+        }
+        #endregion
+    }
+}

Assets/Scripts/UVC/UIToolkit/Input/UTKVector2Field.cs.meta

@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: b0d88b10719b20f45819a9fa389ecdc9

Assets/Scripts/UVC/UIToolkit/Input/UTKVector3Field.cs

@@ -0,0 +1,117 @@
+#nullable enable
+using System;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UVC.UIToolkit
+{
+    /// <summary>
+    /// Vector3 입력 필드 컴포넌트.
+    /// Unity Vector3Field를 래핑하여 커스텀 스타일을 적용합니다.
+    /// </summary>
+    [UxmlElement]
+    public partial class UTKVector3Field : Vector3Field, IDisposable
+    {
+        #region Constants
+        private const string USS_PATH = "UIToolkit/Input/UTKVector3Field";
+        #endregion
+
+        #region Fields
+        private bool _disposed;
+        private bool _isEnabled = true;
+        #endregion
+
+        #region Events
+        /// <summary>값 변경 이벤트</summary>
+        public event Action<Vector3>? OnValueChanged;
+        #endregion
+
+        #region Properties
+        /// <summary>현재 값</summary>
+        public Vector3 Value
+        {
+            get => value;
+            set => this.value = value;
+        }
+
+        /// <summary>활성화 상태</summary>
+        [UxmlAttribute]
+        public bool IsEnabled
+        {
+            get => _isEnabled;
+            set
+            {
+                _isEnabled = value;
+                SetEnabled(value);
+                EnableInClassList("utk-vector3-field--disabled", !value);
+            }
+        }
+        #endregion
+
+        #region Constructor
+        public UTKVector3Field() : base()
+        {
+            UTKThemeManager.Instance.ApplyThemeToElement(this);
+
+            var uss = Resources.Load<StyleSheet>(USS_PATH);
+            if (uss != null)
+            {
+                styleSheets.Add(uss);
+            }
+
+            SetupStyles();
+            SetupEvents();
+            SubscribeToThemeChanges();
+        }
+
+        public UTKVector3Field(string label) : this()
+        {
+            this.label = label;
+        }
+        #endregion
+
+        #region Setup
+        private void SetupStyles()
+        {
+            AddToClassList("utk-vector3-field");
+        }
+
+        private void SetupEvents()
+        {
+            this.RegisterValueChangedCallback(OnFieldValueChanged);
+        }
+
+        private void SubscribeToThemeChanges()
+        {
+            UTKThemeManager.Instance.OnThemeChanged += OnThemeChanged;
+            RegisterCallback<DetachFromPanelEvent>(_ =>
+            {
+                UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
+            });
+        }
+
+        private void OnThemeChanged(UTKTheme theme)
+        {
+            UTKThemeManager.Instance.ApplyThemeToElement(this);
+        }
+        #endregion
+
+        #region Event Handlers
+        private void OnFieldValueChanged(ChangeEvent<Vector3> evt)
+        {
+            OnValueChanged?.Invoke(evt.newValue);
+        }
+        #endregion
+
+        #region IDisposable
+        public void Dispose()
+        {
+            if (_disposed) return;
+            _disposed = true;
+
+            UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
+            OnValueChanged = null;
+        }
+        #endregion
+    }
+}

Assets/Scripts/UVC/UIToolkit/Input/UTKVector3Field.cs.meta

@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: d4e1481a97fd5bd439a36afcfc9ee615

Assets/Scripts/UVC/UIToolkit/Input/UTKVector4Field.cs

@@ -0,0 +1,117 @@
+#nullable enable
+using System;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UVC.UIToolkit
+{
+    /// <summary>
+    /// 4D 벡터 입력 필드 컴포넌트.
+    /// Unity Vector4Field를 래핑하여 커스텀 스타일을 적용합니다.
+    /// </summary>
+    [UxmlElement]
+    public partial class UTKVector4Field : Vector4Field, IDisposable
+    {
+        #region Constants
+        private const string USS_PATH = "UIToolkit/Input/UTKVector4Field";
+        #endregion
+
+        #region Fields
+        private bool _disposed;
+        private bool _isEnabled = true;
+        #endregion
+
+        #region Events
+        /// <summary>값 변경 이벤트</summary>
+        public event Action<Vector4>? OnValueChanged;
+        #endregion
+
+        #region Properties
+        /// <summary>활성화 상태</summary>
+        [UxmlAttribute]
+        public bool IsEnabled
+        {
+            get => _isEnabled;
+            set
+            {
+                _isEnabled = value;
+                SetEnabled(value);
+                EnableInClassList("utk-vector4field--disabled", !value);
+            }
+        }
+
+        /// <summary>현재 값</summary>
+        public Vector4 Value
+        {
+            get => value;
+            set => this.value = value;
+        }
+        #endregion
+
+        #region Constructor
+        public UTKVector4Field() : base()
+        {
+            UTKThemeManager.Instance.ApplyThemeToElement(this);
+
+            var uss = Resources.Load<StyleSheet>(USS_PATH);
+            if (uss != null)
+            {
+                styleSheets.Add(uss);
+            }
+
+            SetupStyles();
+            SetupEvents();
+            SubscribeToThemeChanges();
+        }
+
+        public UTKVector4Field(string label) : this()
+        {
+            this.label = label;
+        }
+        #endregion
+
+        #region Setup
+        private void SetupStyles()
+        {
+            AddToClassList("utk-vector4field");
+        }
+
+        private void SetupEvents()
+        {
+            this.RegisterValueChangedCallback(OnFieldValueChanged);
+        }
+
+        private void SubscribeToThemeChanges()
+        {
+            UTKThemeManager.Instance.OnThemeChanged += OnThemeChanged;
+            RegisterCallback<DetachFromPanelEvent>(_ =>
+            {
+                UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
+            });
+        }
+
+        private void OnThemeChanged(UTKTheme theme)
+        {
+            UTKThemeManager.Instance.ApplyThemeToElement(this);
+        }
+        #endregion
+
+        #region Event Handlers
+        private void OnFieldValueChanged(ChangeEvent<Vector4> evt)
+        {
+            OnValueChanged?.Invoke(evt.newValue);
+        }
+        #endregion
+
+        #region IDisposable
+        public void Dispose()
+        {
+            if (_disposed) return;
+            _disposed = true;
+
+            UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
+            OnValueChanged = null;
+        }
+        #endregion
+    }
+}

Assets/Scripts/UVC/UIToolkit/Input/UTKVector4Field.cs.meta

@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 1243b879892156b44bca457cedb76e86