From 698c87d3a0f63a700e7c7e5ebb3ae64a96f593d1 Mon Sep 17 00:00:00 2001
From: ssong10 <logan@101.inc>
Date: Thu, 5 Jun 2025 16:09:38 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20viewpager=20tab=20=EC=9D=84=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0=ED=95=A9=EB=8B=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ViewPagerTabGroup/ViewPagerTabGroup.tsx   | 51 ++++++++++---------
 .../ViewPagerTabGroupProps.ts                 |  4 +-
 .../vibrant-core/src/lib/TabView/TabView.tsx  |  2 +-
 .../src/lib/TabView/TabViewProps.ts           |  2 +-
 4 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroup.tsx b/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroup.tsx
index c4ec0eeda..fd5662b85 100644
--- a/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroup.tsx
+++ b/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroup.tsx
@@ -1,3 +1,4 @@
+import { Children, isValidElement } from 'react';
 import type { ComponentWithRef } from '@vibrant-ui/core';
 import { TabView } from '@vibrant-ui/core';
 import { HStack } from '../HStack';
@@ -11,29 +12,33 @@ import type { ViewPagerTabGroupProps } from './ViewPagerTabGroupProps';
 import { withViewPagerTabGroupVariation } from './ViewPagerTabGroupProps';
 
 export const ViewPagerTabGroup = withViewPagerTabGroupVariation(
-  ({ children, tabId, testId, onTabChange, tabSpacing, native_swipeEnabled = true }) => (
-    <TabView
-      tabId={tabId}
-      testId={testId}
-      renderTobBarContainer={props => (
-        <HStack px={[20, 20, 0]} spacing={tabSpacing} data-testid="top-bar-container">
-          {props}
-        </HStack>
-      )}
-      renderTobBarItem={({ isSelected, onClick, title, tabId }) => (
-        <VStack key={title} spacing={8}>
-          <Pressable onClick={onClick} data-testid={`top-bar-${tabId}`}>
-            <Title level={5}>{title}</Title>
-          </Pressable>
-          {isSelected && <Paper borderColor="onView1" borderStyle="solid" borderWidth={1} />}
-        </VStack>
-      )}
-      onTabChange={onTabChange}
-      native_swipeEnabled={native_swipeEnabled}
-    >
-      {children}
-    </TabView>
-  )
+  ({ children, tabId, testId, onTabChange, tabSpacing, native_swipeEnabled = true }) => {
+    const validChildren = Children.toArray(children).filter(isValidElement<ViewPagerTabGroupItemProps>);
+
+    return (
+      <TabView
+        tabId={tabId}
+        testId={testId}
+        renderTobBarContainer={props => (
+          <HStack px={[20, 20, 0]} spacing={tabSpacing} data-testid="top-bar-container">
+            {props}
+          </HStack>
+        )}
+        renderTobBarItem={({ isSelected, onClick, title, tabId }) => (
+          <VStack key={title} spacing={8}>
+            <Pressable onClick={onClick} data-testid={`top-bar-${tabId}`}>
+              <Title level={5}>{title}</Title>
+            </Pressable>
+            {isSelected && <Paper borderColor="onView1" borderStyle="solid" borderWidth={1} />}
+          </VStack>
+        )}
+        onTabChange={onTabChange}
+        native_swipeEnabled={native_swipeEnabled}
+      >
+        {validChildren}
+      </TabView>
+    );
+  }
 ) as ComponentWithRef<ViewPagerTabGroupProps> & {
   Item: ComponentWithRef<ViewPagerTabGroupItemProps>;
 };
diff --git a/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroupProps.ts b/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroupProps.ts
index 4992f1bfd..038b9a9fc 100644
--- a/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroupProps.ts
+++ b/packages/vibrant-components/src/lib/ViewPagerTabGroup/ViewPagerTabGroupProps.ts
@@ -3,10 +3,10 @@ import { withVariation } from '@vibrant-ui/core';
 import type { ViewPagerTabGroupItemProps } from './ViewPagerTabGroupItem';
 
 export type ViewPagerTabGroupProps = {
-  children: ReactElement<ViewPagerTabGroupItemProps> | ReactElement<ViewPagerTabGroupItemProps>[];
+  children: (ReactElement<ViewPagerTabGroupItemProps> | undefined)[] | ReactElement<ViewPagerTabGroupItemProps>;
   tabSpacing?: number;
   tabId?: string;
-  onTabChange?: () => void;
+  onTabChange?: (tabId?: string) => void;
   testId?: string;
   native_swipeEnabled?: boolean;
 };
diff --git a/packages/vibrant-core/src/lib/TabView/TabView.tsx b/packages/vibrant-core/src/lib/TabView/TabView.tsx
index 1b49837f2..9f6571a1a 100644
--- a/packages/vibrant-core/src/lib/TabView/TabView.tsx
+++ b/packages/vibrant-core/src/lib/TabView/TabView.tsx
@@ -23,7 +23,7 @@ export const TabView = withTabViewVariation(
 
       setCurrentIndex(index);
 
-      onTabChange?.();
+      onTabChange?.(currentTab?.props.tabId);
     };
 
     const changeTabById = useCallbackRef((tabId?: string) => {
diff --git a/packages/vibrant-core/src/lib/TabView/TabViewProps.ts b/packages/vibrant-core/src/lib/TabView/TabViewProps.ts
index 5edd0d77b..2eeb6db42 100644
--- a/packages/vibrant-core/src/lib/TabView/TabViewProps.ts
+++ b/packages/vibrant-core/src/lib/TabView/TabViewProps.ts
@@ -8,7 +8,7 @@ type TabViewProps = {
   children: ReactElement<TabViewItemProps> | ReactElement<TabViewItemProps>[];
   renderTobBarItem: (_: { title: string; isSelected: boolean; onClick: () => void; tabId: string }) => ReactElement;
   renderTobBarContainer: (props: ReactElementChildren) => ReactElement;
-  onTabChange?: () => void;
+  onTabChange?: (tabId?: string) => void;
   testId?: string;
   native_swipeEnabled?: boolean;
 };