Dropdown 샘플코드 갱신. Tab align 기능 추가

Assets/Scripts/UVC/UIToolkit/Tab/UTKTabView.cs

@@ -6,6 +6,21 @@ using UnityEngine.UIElements;
 
 namespace UVC.UIToolkit
 {
+    /// <summary>
+    /// 탭 정렬 방향
+    /// </summary>
+    public enum TabAlign
+    {
+        /// <summary>탭이 위쪽에 배치</summary>
+        Top,
+        /// <summary>탭이 아래쪽에 배치</summary>
+        Bottom,
+        /// <summary>탭이 왼쪽에 배치 (세로 정렬)</summary>
+        Left,
+        /// <summary>탭이 오른쪽에 배치 (세로 정렬)</summary>
+        Right
+    }
+
     /// <summary>
     /// 탭 뷰 컴포넌트.
     /// Unity TabView를 래핑하여 커스텀 스타일을 적용합니다.
@@ -29,6 +44,7 @@ namespace UVC.UIToolkit
     /// <list type="bullet">
     /// <item><description><c>SelectedIndex</c> - 현재 선택된 탭 인덱스</description></item>
     /// <item><description><c>UTKTabs</c> - 탭 목록 (읽기 전용)</description></item>
+    /// <item><description><c>Align</c> - 탭 정렬 방향 (Top, Bottom, Left, Right)</description></item>
     /// </list>
     ///
     /// <para><b>주요 메서드:</b></para>
@@ -59,21 +75,25 @@ namespace UVC.UIToolkit
     /// var tabView = new UTKTabView();
     /// 
     /// // 탭 추가
-    /// var tab1 = tabView.AddTab("일반", UTKMaterialIcons.Settings);
+    /// var tab1 = tabView.AddUTKTab("일반");
     /// tab1.Add(new Label("일반 설정 내용"));
     /// 
-    /// var tab2 = tabView.AddTab("고급", UTKMaterialIcons.Build);
+    /// var tab2 = tabView.AddUTKTab("고급");
     /// tab2.Add(new Label("고급 설정 내용"));
     /// 
     /// // 탭 변경 이벤트
     /// tabView.OnTabChanged += (index, tab) => Debug.Log($"탭 {index} 선택됨");
     /// 
+    /// // 탭 정렬 방향 설정
+    /// tabView.Align = TabAlign.Left;  // 탭을 왼쪽에 세로로 배치
+    /// 
     /// // 탭 선택
     /// tabView.SelectedIndex = 0;
     /// </code>
     /// <para><b>UXML에서 사용:</b></para>
     /// <code>
     /// <ui:UXML xmlns:utk="UVC.UIToolkit">
+    ///     <!-- 기본 탭 뷰 (위쪽) -->
     ///     <utk:UTKTabView>
     ///         <utk:UTKTab label="일반">
     ///             <ui:Label text="일반 탭 내용" />
@@ -82,6 +102,16 @@ namespace UVC.UIToolkit
     ///             <ui:Label text="고급 탭 내용" />
     ///         </utk:UTKTab>
     ///     </utk:UTKTabView>
+    ///     
+    ///     <!-- 탭을 왼쪽에 배치 -->
+    ///     <utk:UTKTabView align="Left">
+    ///         <utk:UTKTab label="탭 1">
+    ///             <ui:Label text="내용 1" />
+    ///         </utk:UTKTab>
+    ///         <utk:UTKTab label="탭 2">
+    ///             <ui:Label text="내용 2" />
+    ///         </utk:UTKTab>
+    ///     </utk:UTKTabView>
     /// </ui:UXML>
     /// </code>
     /// </example>
@@ -95,6 +125,7 @@ namespace UVC.UIToolkit
         #region Fields
         private bool _disposed;
         private readonly List<UTKTab> _utkTabs = new();
+        private TabAlign _align = TabAlign.Top;
         #endregion
 
         #region Events
@@ -112,6 +143,19 @@ namespace UVC.UIToolkit
 
         /// <summary>UTK 탭 목록</summary>
         public IReadOnlyList<UTKTab> UTKTabs => _utkTabs;
+
+        /// <summary>탭 정렬 방향</summary>
+        [UxmlAttribute("align")]
+        public TabAlign Align
+        {
+            get => _align;
+            set
+            {
+                if (_align == value) return;
+                _align = value;
+                ApplyAlignment();
+            }
+        }
         #endregion
 
         #region Constructor
@@ -135,6 +179,7 @@ namespace UVC.UIToolkit
         private void SetupStyles()
         {
             AddToClassList("utk-tabview");
+            ApplyAlignment();
         }
 
         private void SetupEvents()
@@ -174,6 +219,35 @@ namespace UVC.UIToolkit
         #endregion
 
         #region Methods
+        /// <summary>
+        /// 탭 정렬 방향 적용
+        /// </summary>
+        private void ApplyAlignment()
+        {
+            // 기존 align 클래스 제거
+            RemoveFromClassList("utk-tabview--align-top");
+            RemoveFromClassList("utk-tabview--align-bottom");
+            RemoveFromClassList("utk-tabview--align-left");
+            RemoveFromClassList("utk-tabview--align-right");
+
+            // 새로운 align 클래스 추가
+            switch (_align)
+            {
+                case TabAlign.Top:
+                    AddToClassList("utk-tabview--align-top");
+                    break;
+                case TabAlign.Bottom:
+                    AddToClassList("utk-tabview--align-bottom");
+                    break;
+                case TabAlign.Left:
+                    AddToClassList("utk-tabview--align-left");
+                    break;
+                case TabAlign.Right:
+                    AddToClassList("utk-tabview--align-right");
+                    break;
+            }
+        }
+
         /// <summary>
         /// UTK 탭 추가
         /// </summary>