UTKPropertyTabListWindow 개발 완료

Assets/Resources/UIToolkit/Window/UTKPropertyListWindowUss.uss

@@ -15,7 +15,7 @@
 .utk-property-window {
     background-color: var(--color-bg-panel);
     flex-grow: 1;
-    height: 100%;
+    bottom: 0;
     min-width: 390px;
     width: 390px;
     padding: 10px 20px 25px 20px;

Assets/Resources/UIToolkit/Window/UTKPropertyTabListWindow.uxml

@@ -1,11 +1,28 @@
 <?xml version="1.0" encoding="utf-8"?>
 <UXML xmlns="UnityEngine.UIElements" xmlns:utk="UVC.UIToolkit">
-    <VisualElement name="window-root" class="utk-property-tab-window">
+    <!--
+    UTKPropertyTabListWindow.uxml
+
+    탭 기능이 포함된 UTKPropertyList 윈도우 컴포넌트입니다.
+    헤더(타이틀, 닫기 버튼), 탭 영역, 내부 UTKPropertyList로 구성됩니다.
+
+    구조:
+    - container: 메인 컨테이너
+      - header: 윈도우 헤더
+        - title: 윈도우 제목
+        - close-btn: UTKButton 닫기 버튼
+      - tab-scroll-view: 탭 스크롤 영역
+        - tab-container: 탭 버튼 컨테이너
+      - UTKPropertyList: 프로퍼티 리스트
+    -->
+    <VisualElement name="container" class="utk-property-tab-window" style="flex-grow: 1; flex-shrink: 0;">
         <VisualElement name="header" class="utk-property-tab-window__header">
-            <utk:UTKLabel name="title" class="utk-property-tab-window__title" />
+            <Label name="title" text="Properties" class="utk-property-tab-window__title" />
-            <utk:UTKButton name="close-btn" class="utk-property-tab-window__close-btn" variant="Text" icon-only="true" />
+            <utk:UTKButton name="close-btn" variant="Text" icon-only="true" class="utk-property-tab-window__close-btn" />
         </VisualElement>
-        <utk:UTKTabView name="tab-view" class="utk-property-tab-window__tab-view" />
+        <ScrollView name="tab-scroll-view" mode="Horizontal" horizontal-scroller-visibility="Hidden" vertical-scroller-visibility="Hidden" style="flex-shrink: 0; margin-bottom: 8px; max-height: 28px;">
-        <utk:UTKPropertyList name="content" class="utk-property-tab-window__content" />
+            <VisualElement name="tab-container" style="flex-direction: row; flex-shrink: 0;" />
+        </ScrollView>
+        <utk:UTKPropertyList name="content" style="flex-grow: 1; width: 100%;" />
     </VisualElement>
 </UXML>

Assets/Resources/UIToolkit/Window/UTKPropertyTabListWindowUss.uss

@@ -4,7 +4,7 @@
  * UTKPropertyTabListWindow 컴포넌트의 스타일 정의입니다.
  * 테마 지원: var(--color-*) 변수 사용
  *
- * UTKPropertyListWindow 스타일을 기반으로 탭 영역이 추가되었습니다.
+ * UTKComponentTabListWindow 스타일을 기반으로 프로퍼티 탭 영역이 추가되었습니다.
  */
 
 /* ============================================
@@ -14,7 +14,7 @@
 .utk-property-tab-window {
     background-color: var(--color-bg-panel);
     flex-grow: 1;
-    height: 100%;
+    bottom: 0;
     min-width: 390px;
     width: 390px;
     padding: 10px 20px 25px 20px;
@@ -33,12 +33,9 @@
     flex-shrink: 0;
 }
 
-/* UTKLabel 타이틀 스타일 */
+/* 타이틀 스타일 */
 .utk-property-tab-window__title {
     flex-grow: 1;
-}
-
-.utk-property-tab-window__title .utk-label__text {
     color: var(--color-text-primary);
     font-size: var(--font-size-label3);
     -unity-font-definition: resource('Fonts/Pretendard/Pretendard-Medium');
@@ -65,32 +62,46 @@
 }
 
 /* ============================================
-   탭 뷰 (Tab View)
+   탭 버튼 (Tab Buttons)
    ============================================ */
 
-.utk-property-tab-window__tab-view {
+.tab-button {
-    flex-grow: 0;
+    background-color: transparent;
+    border-width: 0;
+    border-bottom-width: 2px;
+    border-bottom-color: transparent;
+    padding: var(--space-s) var(--space-l);
+    margin-right: var(--space-s);
+    margin-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    color: var(--color-text-secondary);
+    font-size: var(--font-size-body2);
+    -unity-font-definition: resource('Fonts/Pretendard/Pretendard-Medium');
     flex-shrink: 0;
-    margin-bottom: 8px;
+    transition-duration: var(--anim-fast);
+    transition-property: background-color, border-color, color;
 }
 
-/* 탭 콘텐츠 영역 숨기기 (실제 콘텐츠는 외부 UTKPropertyList에 표시) */
+.tab-button:hover {
-.utk-property-tab-window__tab-view > .unity-tab-view__content-container {
+    background-color: var(--color-btn-hover);
-    display: none;
+}
-    flex-grow: 0;
+
-    height: 0;
+.tab-button-selected {
-    padding: 0;
+    background-color: transparent;
-    margin: 0;
+    color: var(--color-btn-primary);
+    border-bottom-color: var(--color-btn-primary);
+    -unity-font-style: bold;
+}
+
+.tab-button-selected:hover {
+    background-color: var(--color-btn-hover);
 }
 
 /* ============================================
    콘텐츠 (Content - UTKPropertyList)
    ============================================ */
 
-.utk-property-tab-window__content {
-    flex-grow: 1;
-}
-
 #unity-content-viewport {
     padding-right: 4px; /* 스크롤바 여유 공간 */
 }

Assets/Sample/UIToolkit/UTKPropertyListWindowSample.cs

@@ -35,40 +35,35 @@ namespace UVC.Sample.UIToolkit
             }
             _uiDocument = doc;
 
-            UTKThemeManager.Instance.RegisterRoot(_uiDocument.rootVisualElement);
+            var toggle = _uiDocument.rootVisualElement.Q<UTKToggle>("toggle");
-            UTKThemeManager.Instance.SetTheme(initialTheme);
+            if (toggle == null)
-
+            {
-            var root = _uiDocument.rootVisualElement;
+                Debug.LogError("UXML에서 UTKToggle을 찾을 수 없습니다.");
+                return;
+            }
+            _themeToggle = toggle;
 
             // PropertyListWindow 샘플
-            var window = root.Q<UTKPropertyListWindow>("window");
+            var window = _uiDocument.rootVisualElement.Q<UTKPropertyListWindow>("window");
             if (window != null)
             {
                 _propertyWindow = window;
-                _propertyWindow.style.position = Position.Absolute;
-                _propertyWindow.style.top = 50;
-                _propertyWindow.style.left = 0;
-                _propertyWindow.style.bottom = 0;
-                _propertyWindow.style.width = 300;
                 CreateSamplePropertyWindow();
             }
 
             // PropertyTabListWindow 샘플
-            var tabWindow = root.Q<UTKPropertyTabListWindow>("tabWindow");
+            var tabWindow = _uiDocument.rootVisualElement.Q<UTKPropertyTabListWindow>("tabWindow");
             if (tabWindow != null)
             {
                 _propertyTabWindow = tabWindow;
-                _propertyTabWindow.style.position = Position.Absolute;
-                _propertyTabWindow.style.top = 50;
-                _propertyTabWindow.style.right = 0;
-                _propertyTabWindow.style.bottom = 0;
-                _propertyTabWindow.style.width = 300;
                 CreateSamplePropertyTabWindow();
             }
 
-            UTKThemeManager.Instance.OnThemeChanged += theme =>
+            UTKThemeManager.Instance.RegisterRoot(_uiDocument.rootVisualElement);
+            UTKThemeManager.Instance.SetTheme(initialTheme);
+            _themeToggle.OnValueChanged += (isOn) =>
             {
-                UTKThemeManager.Instance.ApplyThemeToElement(_uiDocument.rootVisualElement);
+                UTKThemeManager.Instance.SetTheme(!isOn ? UTKTheme.Dark : UTKTheme.Light);
             };
         }
 
@@ -139,7 +134,7 @@ namespace UVC.Sample.UIToolkit
             };
 
             // === 탭 1: 기본 속성 (Grouped) ===
-            var basicTab = new TabPropertyData("기본", UTKMaterialIcons.Settings);
+            var basicTab = new TabPropertyData("기본");
             var basicGroups = new List<IUTKPropertyGroup>();
 
             var infoGroup = new UTKPropertyGroup("tab_info", "기본 정보");
@@ -159,7 +154,7 @@ namespace UVC.Sample.UIToolkit
             basicTab.SetGroupedData(basicGroups);
 
             // === 탭 2: 외관 (Grouped) ===
-            var appearanceTab = new TabPropertyData("외관", UTKMaterialIcons.Palette);
+            var appearanceTab = new TabPropertyData("외관");
             var appearanceGroups = new List<IUTKPropertyGroup>();
 
             var colorGroup = new UTKPropertyGroup("tab_colors", "색상");
@@ -178,7 +173,7 @@ namespace UVC.Sample.UIToolkit
             appearanceTab.SetGroupedData(appearanceGroups);
 
             // === 탭 3: 고급 설정 (Flat) ===
-            var advancedTab = new TabPropertyData("고급", UTKMaterialIcons.Tune);
+            var advancedTab = new TabPropertyData("고급");
             var advancedItems = new List<IUTKPropertyItem>
             {
                 new UTKBoolPropertyItem("tab_debug", "디버그 모드", false),
@@ -193,7 +188,7 @@ namespace UVC.Sample.UIToolkit
             advancedTab.SetFlatData(advancedItems);
 
             // === 탭 4: 일정 (Mixed) ===
-            var scheduleTab = new TabPropertyData("일정", UTKMaterialIcons.CalendarMonth);
+            var scheduleTab = new TabPropertyData("일정");
             var scheduleEntries = new List<IUTKPropertyEntry>();
 
             scheduleEntries.Add(new UTKDatePropertyItem("tab_created", "생성일", DateTime.Today.AddDays(-30)));

Assets/Sample/UIToolkit/UTKPropertyListWindowSampleUXML.uxml

@@ -0,0 +1,7 @@
+<UXML xmlns="UnityEngine.UIElements" xmlns:utk="UVC.UIToolkit" editor-extension-mode="False">
+    <VisualElement style="width: 100%; height: 100%;flex-direction: row;">
+        <utk:UTKPropertyListWindow name="window" style="position: absolute; top: 50; left: 0; bottom: 0; width: 350px;" />
+        <utk:UTKPropertyTabListWindow name="tabWindow" style="position: absolute; top: 50; right: 0; bottom: 0; width: 350px;" />
+        <utk:UTKToggle name="toggle" label="테마 변경" style="position: absolute; top: 10px; left: 10px;" />
+    </VisualElement>
+</UXML>

Assets/Sample/UIToolkit/UTKPropertyListWindowUXML.uxml

@@ -1,7 +0,0 @@
-<UXML xmlns="UnityEngine.UIElements" xmlns:utk="UVC.UIToolkit" editor-extension-mode="False">
-    <VisualElement style="width: 100%; height: 100%;">
-        <utk:UTKPropertyListWindow name="window" />
-        <utk:UTKPropertyTabListWindow name="tabWindow" />
-        <utk:UTKToggle name="toggle" label="테마 변경" style="position: absolute; top: 10px; left: 10px;" />
-    </VisualElement>
-</UXML>

Assets/Scripts/UVC/UIToolkit/Property/Core/TabPropertyData.cs

@@ -18,7 +18,7 @@ namespace UVC.UIToolkit
 
     /// <summary>
     /// 탭별 프로퍼티 설정 데이터 클래스입니다.
-    /// 탭의 메타데이터(이름, 아이콘, 활성화 상태)와
+    /// 탭의 메타데이터(이름, 활성화 상태)와
     /// 해당 탭에 표시할 프로퍼티 데이터를 보유합니다.
     /// </summary>
     public class TabPropertyData
@@ -27,9 +27,6 @@ namespace UVC.UIToolkit
         /// <summary>탭 이름 (표시 텍스트)</summary>
         public string Name { get; set; } = string.Empty;
 
-        /// <summary>탭 아이콘 (Material Icon 유니코드, null이면 아이콘 없음)</summary>
-        public string? Icon { get; set; }
-
         /// <summary>탭 활성화 상태</summary>
         public bool IsEnabled { get; set; } = true;
 
@@ -52,12 +49,6 @@ namespace UVC.UIToolkit
         {
             Name = name;
         }
-
-        /// <summary>아이콘 포함 생성자</summary>
-        public TabPropertyData(string name, string? icon) : this(name)
-        {
-            Icon = icon;
-        }
         #endregion
 
         #region Data Setters

Assets/Scripts/UVC/UIToolkit/Window/UTKPropertyTabListWindow.cs

@@ -8,14 +8,14 @@ using UnityEngine.UIElements;
 namespace UVC.UIToolkit
 {
     /// <summary>
-    /// UTKPropertyList와 UTKTabView를 결합한 탭 기반 프로퍼티 윈도우입니다.
+    /// UTKPropertyList에 탭 기능을 결합한 프로퍼티 윈도우입니다.
-    /// 헤더(타이틀 + 닫기 버튼), 탭 뷰, 프로퍼티 리스트로 구성되며,
+    /// 헤더(타이틀 + 닫기 버튼), 탭 버튼 영역, 프로퍼티 리스트로 구성되며,
     /// 탭별로 서로 다른 프로퍼티 데이터를 설정할 수 있습니다.
     ///
     /// <para><b>주요 기능:</b></para>
     /// <list type="bullet">
     ///   <item>윈도우 프레임 (헤더, 타이틀, 닫기 버튼)</item>
-    ///   <item>UTKTabView 기반 탭 전환</item>
+    ///   <item>Button 기반 탭 전환 (UTKComponentTabListWindow와 동일 구조)</item>
     ///   <item>탭별 프로퍼티 데이터 관리 (Flat/Grouped/Mixed 지원)</item>
     ///   <item>탭별 검색어 저장/복원</item>
     ///   <item>선택적 "전체(All)" 탭</item>
@@ -28,16 +28,14 @@ namespace UVC.UIToolkit
     /// window.ShowCloseButton = true;
     /// window.ShowAllTab = false;
     ///
-    /// // 탭 데이터 설정
     /// var generalTab = new TabPropertyData("일반");
     /// generalTab.SetGroupedData(new List&lt;IUTKPropertyGroup&gt; { transformGroup, renderGroup });
     ///
-    /// var advancedTab = new TabPropertyData("고급", "\ue8b8");
+    /// var advancedTab = new TabPropertyData("고급");
     /// advancedTab.SetFlatData(new List&lt;IUTKPropertyItem&gt; { debugItem, logItem });
     ///
     /// window.SetTabData(new List&lt;TabPropertyData&gt; { generalTab, advancedTab });
     ///
-    /// // 이벤트 구독
     /// window.OnTabChanged += (index, data) =&gt; Debug.Log($"탭 변경: {data?.Name}");
     /// window.OnPropertyValueChanged += args =&gt; Debug.Log($"{args.PropertyId} = {args.NewValue}");
     ///
@@ -58,15 +56,18 @@ namespace UVC.UIToolkit
 
         // UI 요소 참조
         private VisualElement? _header;
-        private UTKLabel? _titleLabel;
+        private Label? _titleLabel;
         private UTKButton? _closeButton;
-        private UTKTabView? _tabView;
+        private VisualElement? _tabContainer;
         private UTKPropertyList? _propertyList;
 
+        // 탭 버튼
+        private readonly List<Button> _tabButtons = new();
+
         // 탭 데이터
         private readonly List<TabPropertyData> _tabDataList = new();
         private int _selectedTabIndex = ALL_TAB_INDEX;
-        private bool _showAllTab = true;
+        private bool _showAllTab = false;
 
         // 탭별 검색어 저장
         private readonly Dictionary<int, string> _tabSearchQueries = new();
@@ -78,7 +79,7 @@ namespace UVC.UIToolkit
 
         // 윈도우 속성
         private string _title = "Properties";
-        private bool _showCloseButton = false;
+        private bool _showCloseButton;
         #endregion
 
         #region Properties
@@ -91,9 +92,7 @@ namespace UVC.UIToolkit
             {
                 _title = value;
                 if (_titleLabel != null)
-                {
+                    _titleLabel.text = value;
-                    _titleLabel.Text = value;
-                }
             }
         }
 
@@ -106,9 +105,7 @@ namespace UVC.UIToolkit
             {
                 _showCloseButton = value;
                 if (_closeButton != null)
-                {
                     _closeButton.style.display = value ? DisplayStyle.Flex : DisplayStyle.None;
-                }
             }
         }
 
@@ -134,9 +131,6 @@ namespace UVC.UIToolkit
 
         /// <summary>내부 UTKPropertyList 접근</summary>
         public UTKPropertyList PropertyList => _propertyList ??= new UTKPropertyList();
-
-        /// <summary>내부 UTKTabView 접근</summary>
-        public UTKTabView? TabView => _tabView;
         #endregion
 
         #region Events
@@ -183,9 +177,7 @@ namespace UVC.UIToolkit
 
             var styleSheet = Resources.Load<StyleSheet>(USS_PATH);
             if (styleSheet != null)
-            {
                 styleSheets.Add(styleSheet);
-            }
 
             CreateUI();
         }
@@ -208,13 +200,9 @@ namespace UVC.UIToolkit
 
             var asset = Resources.Load<VisualTreeAsset>(UXML_PATH);
             if (asset != null)
-            {
                 CreateUIFromUxml(asset);
-            }
             else
-            {
                 CreateUIFallback();
-            }
 
             // 드래그 이벤트
             if (_header != null)
@@ -223,25 +211,17 @@ namespace UVC.UIToolkit
                 _header.RegisterCallback<PointerMoveEvent>(OnHeaderPointerMove);
                 _header.RegisterCallback<PointerUpEvent>(OnHeaderPointerUp);
             }
-
-            // UTKTabView 탭 변경 이벤트 구독
-            if (_tabView != null)
-            {
-                _tabView.OnTabChanged += OnTabViewTabChanged;
-            }
         }
 
         private void CreateUIFromUxml(VisualTreeAsset asset)
         {
             var root = asset.Instantiate();
-            var windowRoot = root.Q<VisualElement>("window-root");
+            var container = root.Q<VisualElement>("container");
 
-            if (windowRoot != null)
+            if (container != null)
             {
-                foreach (var child in windowRoot.Children().ToArray())
+                foreach (var child in container.Children().ToArray())
-                {
                     Add(child);
-                }
             }
             else
             {
@@ -250,17 +230,14 @@ namespace UVC.UIToolkit
 
             // 요소 참조 가져오기
             _header = this.Q<VisualElement>("header");
-            _titleLabel = this.Q<UTKLabel>("title");
+            _titleLabel = this.Q<Label>("title");
             _closeButton = this.Q<UTKButton>("close-btn");
-            _tabView = this.Q<UTKTabView>("tab-view");
+            _tabContainer = this.Q<VisualElement>("tab-container");
-            _propertyList = this.Q<UTKPropertyList>("content");
+            _propertyList = this.Q<UTKPropertyList>();
 
             // 타이틀 설정
             if (_titleLabel != null)
-            {
+                _titleLabel.text = _title;
-                _titleLabel.Text = _title;
-                _titleLabel.Size = UTKLabel.LabelSize.Label3;
-            }
 
             // 닫기 버튼 설정
             if (_closeButton != null)
@@ -271,21 +248,31 @@ namespace UVC.UIToolkit
                 _closeButton.style.display = _showCloseButton ? DisplayStyle.Flex : DisplayStyle.None;
             }
 
-            // TabView가 없으면 생성
+            // tabContainer가 없으면 생성
-            if (_tabView == null)
+            if (_tabContainer == null)
             {
-                _tabView = new UTKTabView();
+                var scrollView = new ScrollView(ScrollViewMode.Horizontal);
-                _tabView.name = "tab-view";
+                scrollView.horizontalScrollerVisibility = ScrollerVisibility.Hidden;
-                _tabView.AddToClassList("utk-property-tab-window__tab-view");
+                scrollView.verticalScrollerVisibility = ScrollerVisibility.Hidden;
+                scrollView.style.flexShrink = 0;
+                scrollView.style.marginBottom = 8;
+                scrollView.style.maxHeight = 28;
+
+                _tabContainer = new VisualElement();
+                _tabContainer.name = "tab-container";
+                _tabContainer.style.flexDirection = FlexDirection.Row;
+                _tabContainer.style.flexShrink = 0;
+                scrollView.Add(_tabContainer);
+
                 // PropertyList 앞에 삽입
                 if (_propertyList != null)
                 {
                     int index = IndexOf(_propertyList);
-                    Insert(index, _tabView);
+                    Insert(index, scrollView);
                 }
                 else
                 {
-                    Add(_tabView);
+                    Add(scrollView);
                 }
             }
 
@@ -293,8 +280,8 @@ namespace UVC.UIToolkit
             if (_propertyList == null)
             {
                 _propertyList = new UTKPropertyList();
-                _propertyList.name = "content";
+                _propertyList.style.flexGrow = 1;
-                _propertyList.AddToClassList("utk-property-tab-window__content");
+                _propertyList.style.width = Length.Percent(100);
                 Add(_propertyList);
             }
         }
@@ -306,7 +293,7 @@ namespace UVC.UIToolkit
             _header.name = "header";
             _header.AddToClassList("utk-property-tab-window__header");
 
-            _titleLabel = new UTKLabel(_title, UTKLabel.LabelSize.Label3);
+            _titleLabel = new Label(_title);
             _titleLabel.name = "title";
             _titleLabel.AddToClassList("utk-property-tab-window__title");
             _header.Add(_titleLabel);
@@ -321,16 +308,26 @@ namespace UVC.UIToolkit
 
             Add(_header);
 
-            // 탭 뷰
+            // 탭 스크롤 영역
-            _tabView = new UTKTabView();
+            var scrollView = new ScrollView(ScrollViewMode.Horizontal);
-            _tabView.name = "tab-view";
+            scrollView.horizontalScrollerVisibility = ScrollerVisibility.Hidden;
-            _tabView.AddToClassList("utk-property-tab-window__tab-view");
+            scrollView.verticalScrollerVisibility = ScrollerVisibility.Hidden;
-            Add(_tabView);
+            scrollView.style.flexShrink = 0;
+            scrollView.style.marginBottom = 8;
+            scrollView.style.maxHeight = 28;
+
+            _tabContainer = new VisualElement();
+            _tabContainer.name = "tab-container";
+            _tabContainer.style.flexDirection = FlexDirection.Row;
+            _tabContainer.style.flexShrink = 0;
+            scrollView.Add(_tabContainer);
+
+            Add(scrollView);
 
             // PropertyList
             _propertyList = new UTKPropertyList();
-            _propertyList.name = "content";
+            _propertyList.style.flexGrow = 1;
-            _propertyList.AddToClassList("utk-property-tab-window__content");
+            _propertyList.style.width = Length.Percent(100);
             Add(_propertyList);
         }
         #endregion
@@ -341,7 +338,6 @@ namespace UVC.UIToolkit
         /// 탭 데이터 목록을 설정합니다.
         /// 기존 탭을 모두 제거하고 새로운 탭을 생성합니다.
         /// </summary>
-        /// <param name="tabDataList">탭 설정 데이터 목록</param>
         public void SetTabData(List<TabPropertyData> tabDataList)
         {
             _tabDataList.Clear();
@@ -357,20 +353,14 @@ namespace UVC.UIToolkit
                 SelectTab(0);
         }
 
-        /// <summary>
+        /// <summary>탭 데이터를 추가합니다.</summary>
-        /// 탭 데이터를 추가합니다.
-        /// </summary>
-        /// <param name="tabData">추가할 탭 데이터</param>
         public void AddTabData(TabPropertyData tabData)
         {
             _tabDataList.Add(tabData);
             RebuildTabs();
         }
 
-        /// <summary>
+        /// <summary>특정 인덱스의 탭 데이터를 제거합니다.</summary>
-        /// 특정 인덱스의 탭 데이터를 제거합니다.
-        /// </summary>
-        /// <param name="index">제거할 탭 인덱스 (0-based)</param>
         public void RemoveTabData(int index)
         {
             if (index < 0 || index >= _tabDataList.Count) return;
@@ -379,23 +369,13 @@ namespace UVC.UIToolkit
             _tabSearchQueries.Remove(index);
             RebuildTabs();
 
-            // 현재 선택된 탭이 제거된 경우 기본 탭 선택
             if (_selectedTabIndex == index)
-            {
                 SelectTab(_showAllTab ? ALL_TAB_INDEX : 0);
-            }
             else if (_selectedTabIndex > index)
-            {
-                // 인덱스 보정
                 _selectedTabIndex--;
-            }
         }
 
-        /// <summary>
+        /// <summary>특정 인덱스의 탭 데이터를 반환합니다.</summary>
-        /// 특정 인덱스의 탭 데이터를 반환합니다.
-        /// </summary>
-        /// <param name="index">탭 인덱스 (0-based)</param>
-        /// <returns>탭 데이터 또는 null</returns>
         public TabPropertyData? GetTabData(int index)
         {
             if (index >= 0 && index < _tabDataList.Count)
@@ -421,8 +401,8 @@ namespace UVC.UIToolkit
             // 2. 탭 인덱스 변경
             _selectedTabIndex = tabIndex;
 
-            // 3. UTKTabView 선택 동기화
+            // 3. 탭 선택 스타일 업데이트
-            SyncTabViewSelection(tabIndex);
+            UpdateTabStyles();
 
             // 4. 데이터 로드
             LoadDataForTab(tabIndex);
@@ -437,9 +417,7 @@ namespace UVC.UIToolkit
             OnTabChanged?.Invoke(tabIndex, tabData);
         }
 
-        /// <summary>
+        /// <summary>현재 선택된 탭의 데이터를 다시 로드합니다.</summary>
-        /// 현재 선택된 탭의 데이터를 다시 로드합니다.
-        /// </summary>
         public void RefreshCurrentTab()
         {
             LoadDataForTab(_selectedTabIndex);
@@ -559,79 +537,68 @@ namespace UVC.UIToolkit
         #region Private Methods - Tab Management
 
         /// <summary>
-        /// UTKTabView에 탭을 재구성합니다.
+        /// 탭 버튼을 재구성합니다.
+        /// UTKComponentTabListWindow와 동일한 Button 기반 방식입니다.
         /// </summary>
         private void RebuildTabs()
         {
-            if (_tabView == null) return;
+            if (_tabContainer == null) return;
 
-            // 이벤트 일시 해제 (재구성 중 탭 변경 이벤트 방지)
+            // 기존 탭 버튼 제거
-            _tabView.OnTabChanged -= OnTabViewTabChanged;
+            _tabContainer.Clear();
-            _tabView.ClearTabs();
+            _tabButtons.Clear();
 
             // "All" 탭 생성 (옵션)
             if (_showAllTab)
             {
-                _tabView.AddUTKTab("All");
+                var allTab = CreateTabButton("All", ALL_TAB_INDEX);
+                _tabButtons.Add(allTab);
+                _tabContainer.Add(allTab);
             }
 
             // 개별 탭 생성
             for (int i = 0; i < _tabDataList.Count; i++)
             {
                 var data = _tabDataList[i];
-                var tabName = data.Name;
+                var tab = CreateTabButton(data.Name, i);
-
+                tab.SetEnabled(data.IsEnabled);
-                // 아이콘이 있으면 탭 이름 앞에 추가
-                if (!string.IsNullOrEmpty(data.Icon))
-                {
-                    tabName = $"{data.Icon} {data.Name}";
-                }
-
-                var tab = _tabView.AddUTKTab(tabName);
-                tab.IsEnabled = data.IsEnabled;
 
                 if (!string.IsNullOrEmpty(data.Tooltip))
-                {
                     tab.tooltip = data.Tooltip;
-                }
+
+                _tabButtons.Add(tab);
+                _tabContainer.Add(tab);
             }
-
-            // 이벤트 재구독
-            _tabView.OnTabChanged += OnTabViewTabChanged;
         }
 
         /// <summary>
-        /// UTKTabView의 선택 상태를 동기화합니다.
+        /// 탭 버튼을 생성합니다.
         /// </summary>
-        private void SyncTabViewSelection(int tabIndex)
+        private Button CreateTabButton(string label, int index)
         {
-            if (_tabView == null) return;
+            var button = new Button(() => SelectTab(index))
-
+            {
-            int viewIndex;
+                text = label
-            if (_showAllTab)
+            };
-                viewIndex = tabIndex == ALL_TAB_INDEX ? 0 : tabIndex + 1;
+            button.AddToClassList("tab-button");
-            else
+            return button;
-                viewIndex = tabIndex;
-
-            if (viewIndex >= 0 && viewIndex < _tabView.UTKTabs.Count)
-                _tabView.SelectedIndex = viewIndex;
         }
 
         /// <summary>
-        /// UTKTabView에서 탭 변경 이벤트 발생 시 처리
+        /// 탭 선택 스타일을 업데이트합니다.
         /// </summary>
-        private void OnTabViewTabChanged(int viewIndex, Tab? tab)
+        private void UpdateTabStyles()
         {
-            int dataIndex;
+            for (int i = 0; i < _tabButtons.Count; i++)
-            if (_showAllTab)
+            {
-                dataIndex = viewIndex == 0 ? ALL_TAB_INDEX : viewIndex - 1;
+                var btn = _tabButtons[i];
-            else
+                int tabIndex = _showAllTab ? (i == 0 ? ALL_TAB_INDEX : i - 1) : i;
-                dataIndex = viewIndex;
 
-            // 이미 선택된 탭이면 무시
+                if (tabIndex == _selectedTabIndex)
-            if (dataIndex == _selectedTabIndex) return;
+                    btn.AddToClassList("tab-button-selected");
-
+                else
-            SelectTab(dataIndex);
+                    btn.RemoveFromClassList("tab-button-selected");
+            }
         }
 
         /// <summary>
@@ -642,13 +609,9 @@ namespace UVC.UIToolkit
             if (_propertyList == null) return;
 
             if (tabIndex == ALL_TAB_INDEX)
-            {
                 LoadAllTabData();
-            }
             else if (tabIndex >= 0 && tabIndex < _tabDataList.Count)
-            {
                 LoadSingleTabData(_tabDataList[tabIndex]);
-            }
         }
 
         /// <summary>
@@ -688,7 +651,6 @@ namespace UVC.UIToolkit
 
         /// <summary>
         /// 모든 탭의 데이터를 병합하여 UTKPropertyList에 로드합니다.
-        /// 병합 전략: Mixed 방식으로 통합 (IUTKPropertyEntry 리스트로 변환)
         /// </summary>
         private void LoadAllTabData()
         {
@@ -721,9 +683,7 @@ namespace UVC.UIToolkit
                     case TabPropertyDataType.Mixed:
                         var mixedItems = tabData.GetMixedData();
                         if (mixedItems != null)
-                        {
                             allEntries.AddRange(mixedItems);
-                        }
                         break;
                 }
             }
@@ -737,9 +697,7 @@ namespace UVC.UIToolkit
 
         #region Private Methods - Search Persistence
 
-        /// <summary>
+        /// <summary>현재 탭의 검색어를 저장합니다.</summary>
-        /// 현재 탭의 검색어를 저장합니다.
-        /// </summary>
         private void SaveCurrentSearchQuery()
         {
             if (_propertyList == null) return;
@@ -751,9 +709,7 @@ namespace UVC.UIToolkit
                 _tabSearchQueries.Remove(_selectedTabIndex);
         }
 
-        /// <summary>
+        /// <summary>지정된 탭의 저장된 검색어를 복원합니다.</summary>
-        /// 지정된 탭의 저장된 검색어를 복원합니다.
-        /// </summary>
         private void RestoreSearchQuery(int tabIndex)
         {
             if (_propertyList == null) return;
@@ -841,13 +797,6 @@ namespace UVC.UIToolkit
                 _header.UnregisterCallback<PointerUpEvent>(OnHeaderPointerUp);
             }
 
-            // TabView 이벤트 해제 및 정리
-            if (_tabView != null)
-            {
-                _tabView.OnTabChanged -= OnTabViewTabChanged;
-                _tabView.Dispose();
-            }
-
             // PropertyList 정리
             _propertyList?.Dispose();
             _propertyList = null;
@@ -859,12 +808,13 @@ namespace UVC.UIToolkit
             // 데이터 정리
             _tabDataList.Clear();
             _tabSearchQueries.Clear();
+            _tabButtons.Clear();
 
             // UI 참조 정리
             _header = null;
             _titleLabel = null;
             _closeButton = null;
-            _tabView = null;
+            _tabContainer = null;
         }
         #endregion
     }